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

/* 水耕栽培 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*
  構造（single-house-hydroponic.php）
    .hydroponicContainer   … 背景画像の変数（--bg-image / --bg-image-mobile）を持つ
      .hydroponic_text     … テキスト
      .hydroponic_stage    … ネゴ
  PC版：.hydroponicContainer に背景を敷く。.hydroponic_stage は位置の基準にしない
  モバイル版：.hydroponic_stage に背景を敷き、それを基準に % で配置して、画面幅に合わせて拡大縮小する
*/
.hydroponicContainer {
  position: relative;
  top: 0;
  left: 0;
  height: 728px;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* キャラクター ネゴ */
.nego_character {
  position: relative;
  bottom: -620px;
  left: 50%;
  width: 300px;
  animation: nego-move 3s ease-in-out infinite;
}
.nego_body {
  position: absolute;
  bottom: 209px;
  left: 50px;
  z-index: 500;
  animation: nego-breathe 3s ease-in-out infinite;
}
.nego_head {
  position: absolute;
  bottom: 262px;
  left: 35px;
  z-index: 600;
  animation: nego-breathe 3s ease-in-out infinite;
}
.nego_hand_L {
  position: absolute;
  bottom: 247px;
  left: 0px;
  z-index: 400;
  transform-origin: 50px 53px; /* 肩の付け根。画像に合わせて要微調整 */
  animation:
    nego-breathe 3s ease-in-out infinite,
    nego-lefte 2s ease-in-out infinite;
}
.nego_hand_R {
  position: absolute;
  bottom: 186px;
  left: 76px;
  z-index: 400;
  transform-origin: 7px 7px; /* 肩の付け根。画像に合わせて要微調整 */
  animation:
    nego-breathe 3s ease-in-out infinite,
    nego-raise 1s ease-in-out infinite;
}

.nego_necktie {
  position: absolute;
  bottom: 176px;
  left: 65px;
  z-index: 550;
  transform-origin: 10px 0px; /* ネクタイの付け根。画像に合わせて要微調整 */
  animation:
    nego-breathe 3s ease-in-out infinite,
    nego-necktie 1s ease-in-out infinite;
}

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

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

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

/* ネクタイ：首を軸に回転 */
@keyframes nego-necktie {
  0%, 100% { transform: rotate(3deg); }
  50%      { transform: rotate(-3deg); }
}

/* ネゴの移動 */
@keyframes nego-move {
  0%, 100% { transform: translateX(-50%) translateY(11px) scale(1.1); }
  25%      { transform: translateX(-25%) translateY(8px) scale(0.9); }
  50%      { transform: translateX(25%) translateY(8px) scale(0.9); }
  75%      { transform: translateX(50%) translateY(11px) scale(1.1); }
}



/* テキスト */
.hydroponic_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; /* 縁取りを文字の背後に描画してつぶれを防ぐ */
}


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

  ネゴはPC版の組み立て（px）をそのまま使い、舞台の幅に合わせて丸ごと拡大縮小する。
    縮小率 = 舞台の幅 ÷ 560px × --nego-scale
  拡大縮小の中心（transform-origin）は「ネゴの見た目の中心・いちばん下」の点。
    横：パーツの左端から約50px（PC版の表示から見積もった値）
    縦：いちばん下のパーツ（ネクタイ）は .nego_character の下端から176px上
  この点を --nego-x / --nego-y の位置に置くので、大きさを変えても位置がずれない。
*/
@media (max-width: 767.98px), (orientation: portrait) and (max-width: 1080px) {

  .hydroponicContainer {
    height: auto;
    background-image: none;
    display: grid;
    justify-items: center;
    padding-top: 12px;
  }

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

  .hydroponic_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(21px, 3.1vw, 25px); /* スマホ21px〜タブレット縦25px（PC版18pxの約1.4倍） */
    line-height: 1.8;
    word-break: auto-phrase; /* 対応ブラウザでは文節で改行 */
  }
  .hydroponic_text p {
    margin: 0;
  }
  /* 句点の後の改行はモバイルではしない */
  .hydroponic_text br {
    display: none;
  }

  .hydroponic_stage {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 560 / 740;
    background-image: var(--bg-image-mobile);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* ネゴの箱（幅300px）がはみ出して横スクロールにならないように */
    container-type: inline-size; /* 中の要素で舞台の幅（cqw）を使えるようにする */
  }

  .hydroponic_stage .nego_character {
    --nego-scale: 1.4; /* 大きさ（舞台560px幅のときのPC比） */
    --nego-x: 48%;     /* ネゴの中心の横位置（舞台の左端から） */
    --nego-y: 18%;      /* ネゴのいちばん下の縦位置（舞台の下端から） */
    position: absolute;
    left: calc(var(--nego-x) - 50px);
    bottom: calc(var(--nego-y) - 176px);
    transform-origin: 50px -176px;
    scale: 0.9; /* 下の計算に対応していないブラウザ用 */
    /* 移動は PC版と同じ nego-move。拡大縮小の中心を上で変えているので、
       モバイルでは --nego-x を中心に左右へ同じだけ動く（左右は見切れてよい） */
  }

  /* 舞台の幅 ÷ 560px を数値にするため tan(atan2()) を使う（CSSでは長さ÷長さが直接書けないため） */
  /* @supports (width: 1cqw) and (scale: tan(atan2(1px, 1px))) {
    .hydroponic_stage .nego_character {
      scale: calc(tan(atan2(100cqw, 560px)) * var(--nego-scale));
    }
  } */
  /* 水耕栽培（モバイル） */
  scale: calc(var(--stage-w, 416) / 560 * var(--nego-scale));


  /* 動きを減らす設定の端末では、その場に止める */
  @media (prefers-reduced-motion: reduce) {
    .hydroponic_stage .nego_character {
      animation: none;
      transform: none;
    }
  }
}

/* 動きを減らす設定の端末では、動き続けるアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .nego_character,
  .nego_body,
  .nego_head,
  .nego_hand_L,
  .nego_hand_R,
  .nego_necktie {
    animation: none;
  }
  .nego_character {
    transform: translateX(-50%);
  }
}