@charset "UTF-8";
/* CSS Document */

/* 非常時対応 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*
  構造（single-house-emergency.php）
    .emergencyContainer    … 位置の基準（PC版）
      .emergency_text      … テキスト
      .emergency_stage     … テーブルとエッセン
        .emergency_table
        .essen_character
  PC版：.emergency_stage をテーブル画像と同じ大きさ（最大1214×444）の枠にして、コンテナの左下に置く。
        画面が狭くなるとテーブルが縮むので、エッセンも同じ倍率で縮め、テーブル上の同じ点に立たせる。
  モバイル版：.emergency_stage を 560×740 の舞台にして、画面幅に合わせて拡大縮小する
*/
.emergencyContainer {
  position: relative;
  top: 0;
  left: 0;
  height: 728px;
}
.emergency_stage {
  --essen-x: 359; /* エッセンの足元が来る、テーブル画像上のx座標（PC版） */
  --essen-y: 216; /* 同じくy座標 */
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(100%, 1214px);    /* テーブル画像の幅。画面が狭いと縮む */
  aspect-ratio: 1214 / 444;
  container-type: inline-size; /* 中の要素で枠の幅（cqw）を使えるようにする */
}
.emergency_table {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 900; /* エッセンより手前（エッセンはテーブルの向こう側に立つ） */
}
.emergency_table img {
  display: block;
  width: 100%;
  height: auto;
}

/* キャラクター エッセン */
/*
  足元（左端から74px・上端から124px下）を、テーブル画像上の点（--essen-x, --essen-y）に置く。
  縮小率 = 枠の幅 ÷ 1214px（テーブル画像と同じ倍率。画面が広いときは1）
*/
.essen_character {
  position: absolute;
  left: calc(var(--essen-x) / 1214 * 100% - 74px);
  top:  calc(var(--essen-y) / 444 * 100% - 124px);
  transform-origin: 74px 124px;
  /* animation: essen-move 3s ease-in-out infinite; */
  scale: calc(var(--stage-w, 1214) / 1214);
}

.essen_body {
  position: absolute;
  top: 0px;
  left: 50px;
  z-index: 500;
  animation: essen-breathe 3s ease-in-out infinite;
}
.essen_head {
  position: absolute;
  top: -129px;
  left: 21px;
  z-index: 600;
  transform-origin: 53px 129px;
  animation: essen-breathe 3s ease-in-out infinite;
}
.essen_child {
  position: absolute;
  top: -203px;
  left: 67px;
  z-index: 300;
  transform-origin: 29px 86px;
  animation:  essen-breathe 3s ease-in-out infinite,
              essen-child 1s ease-in-out infinite;
}
.essen_child_tail {
  position: absolute;
  top: -127px;
  left: 98px;
  z-index: 200;
  transform-origin: 5px 3px;
  animation:  essen-breathe 3s ease-in-out infinite,
              essen-tail 1s ease-in-out infinite;
}
.essen_child_eye {
  position: absolute;
  top: -169px;
  left: 81px;
  z-index: 400;
  transform-origin: 14px 52px;
  animation:  essen-breathe 3s ease-in-out infinite,
              essen-child 1s ease-in-out infinite,
              essen-eye 1s ease-in-out infinite;
}
.essen_hand_L {
  position: absolute;
  top: 5px;
  left: 82px;
  z-index: 400;
  transform-origin: 5px 5px; /* 肩の付け根。画像に合わせて要微調整 */
  animation:
    essen-breathe 3s ease-in-out infinite,
    essen-lefte 2s ease-in-out infinite;
}
.essen_hand_R {
  position: absolute;
  top: 5px;
  left: -23px;
  z-index: 400;
  transform-origin: 90px 5px; /* 肩の付け根。画像に合わせて要微調整 */
  animation:
    essen-breathe 3s ease-in-out infinite,
    essen-raise 2s ease-in-out infinite;
}
.essen_reg_L {
  position: absolute;
  top: 60px;
  left: 84px;
  z-index: 300;
  transform-origin: 7px 8px; /* 足の付け根。画像に合わせて要微調整 */
  /* animation: essen-breathe 3s ease-in-out infinite; */
}
.essen_reg_R {
  position: absolute;
  top: 60px;
  left: 26px;
  z-index: 300;
  transform-origin: 30px 8px; /* 足の付け根。画像に合わせて要微調整 */
  /* animation: essen-breathe 3s ease-in-out infinite; */
}


/* 呼吸：body・両腕で共有する上下の揺れ */
@keyframes essen-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* 子の揺れ：tail専用の揺れ */
@keyframes essen-child {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(5deg); }
}

/* 尾の揺れ：tail専用の揺れ */
@keyframes essen-tail {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-5deg); }
}

/* 目の揺れ：eye専用の揺れ */
@keyframes essen-eye {
  0%, 100% { transform: translateX(2px) rotate(0deg); }
  50%      { transform: translateX(0px) rotate(5deg); }
}

/* 右腕の挙手：肩を軸に0deg→60deg→0degの回転 */
@keyframes essen-raise {
  0%, 100% { transform: rotate(24deg); }
  50%      { transform: rotate(0deg); }
}

/* 左腕の挙手：肩を軸に0deg→60deg→0degの回転 */
@keyframes essen-lefte {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(12deg); }
}

/* エッセンの移動 */
@keyframes essen-move {
  0%, 100% { transform: translateX(-50%) translateY(10px) scale(1); }
  25%      { transform: translateX(-25%) translateY(12px) scale(0.9); }
  50%      { transform: translateX(25%) translateY(12px) scale(0.9); }
  75%      { transform: translateX(50%) translateY(10px) scale(1); }
}



/* テキスト */
.emergency_text {
  position: absolute;
  top: 170px;
  right: 50px;
  width: 600px;
  font-size: 18px;
  line-height: 1.8;
  color: #666666;
  -webkit-text-stroke: 5px #fff; /* 線の太さと色（白） */
  paint-order: stroke fill; /* 縁取りを文字の背後に描画してつぶれを防ぐ */
}
/* 語の途中で改行させない（iPhoneのSafariは word-break: auto-phrase に未対応のため） */
.emergency_text .nowrap {
  display: inline-block;
}


/* 非常時対応 モバイル版（767px以下、または縦向きで1080px以下） - - - - - - - */
/* エネラボカフェ（house.css）・水耕栽培と同じ条件 */
/*
  .emergency_stage を 560×740 の舞台として使う。テキストは舞台に重ねる（グリッドで同じマスに置く）。

  テーブル画像（1214×444）は横長なので、左右を切って一部だけを舞台に映す。
  テーブルとエッセンは同じ倍率で拡大縮小し、PC版と同じ大きさの関係を保つ。
  位置と大きさは、次の3つの変数で決める（どれもPC版のpx値を単位なしで書く）。
    --view-k    … 舞台が560px幅のときの、PC版に対する倍率
    --view-x    … 舞台の左端に来る、テーブル画像上のx座標
    --table-top … 舞台の上端からテーブル画像の上端までの距離（舞台560×740上の値）
  エッセンの立ち位置は、テーブル画像上の座標で指定する（PC版のスクリーンショットから求めた値）。
    --essen-x / --essen-y … エッセンの足元（見た目の中心・いちばん下）が来る、テーブル画像上の点

  エッセンはPC版の組み立て（px）をそのまま使い、丸ごと拡大縮小する（水耕栽培と同じ方式）。
  拡大縮小の中心（transform-origin）は「エッセンの見た目の中心・いちばん下」の点。
    横：.essen_character の左端から74px（胴体の中心）
    縦：いちばん下のパーツ（足）は .essen_character の上端から124px下
*/
@media (max-width: 767.98px), (orientation: portrait) and (max-width: 1080px) {

  .emergencyContainer {
    height: auto;
    display: grid;
    justify-items: center;
    padding-top: 12px;
  }

  /* テキストと舞台を同じマスに重ねる */
  .emergency_text,
  .emergency_stage {
    grid-area: 1 / 1;
  }

  .emergency_text {
    position: relative;
    z-index: 1; /* 舞台（テーブル・エッセン）より手前に */
    align-self: start;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 560px;
    padding: 16px 16px 0;
    font-size: clamp(18px, 3.1vw, 22px); /* スマホ18px〜タブレット縦22px */
    line-height: 1.8;
    word-break: auto-phrase; /* 対応ブラウザでは文節で改行 */
  }
  .emergency_text p {
    margin: 0;
  }
  /* 句点の後の改行はモバイルではしない */
  .emergency_text br {
    display: none;
  }

  .emergency_stage {
    --view-k: 0.85;
    --view-x: 235;
    --table-top: 385;
    /* --essen-x: 359;
    --essen-y: 216; */
    --essen-x: 450;
    --essen-y: 212;
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 560 / 740;
    overflow: hidden;            /* テーブルの左右の切れ端を隠す */
    isolation: isolate;          /* テーブルの z-index:900 がテキストより手前に出ないように */
    container-type: inline-size; /* 中の要素で舞台の幅（cqw）を使えるようにする */
  }

  .emergency_stage .emergency_table {
    bottom: auto;
    top:   calc(var(--table-top) / 740 * 100%);
    left:  calc(var(--view-x) * var(--view-k) / 560 * -100%);
    width: calc(1214 * var(--view-k) / 560 * 100%);
  }
  .emergency_stage .emergency_table img {
    display: block;
    width: 100%;
    max-width: none;
  }

  .emergency_stage .essen_character {
    position: absolute;
    left:   calc((var(--essen-x) - var(--view-x)) * var(--view-k) / 560 * 100% - 74px);
    top:    calc((var(--table-top) + var(--essen-y) * var(--view-k)) / 740 * 100% - 124px);
    bottom: auto;
    transform-origin: 74px 124px;
    scale: 0.6; /* 下の計算に対応していないブラウザ用 */
    /* 非常時（モバイル） */
    scale: calc(var(--stage-w, 416) / 560 * var(--view-k));
  }



}

/* 動きを減らす設定の端末では、動き続けるアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .essen_body,
  .essen_head,
  .essen_child,
  .essen_child_tail,
  .essen_child_eye,
  .essen_hand_L,
  .essen_hand_R {
    animation: none;
  }
}