@charset "UTF-8";

/* ==========
   Utilities
========== */
.reverse { flex-direction: row-reverse; }
.vertical { writing-mode: vertical-rl; text-orientation: upright; }
.right { text-align: right; }
.indent { white-space: pre-line; }
img {max-width:100%;}

/* ==========
   Top band
========== */
#topblock {
  margin-top: 75px;
  background-color: #a8c3a0;
  height: 85px;
  width: 100%;
}

/* ==========
   Overview
========== */
.course { padding: 85px 75px; }

.course h2 {
  padding: 0 85px;
  position: relative;
}

.course h2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 55px;
  height: 39px;
  background: url("../images/sub1_course/mountain_55x39.svg") center / contain no-repeat;
}

/* ==========
   Soup block (band + image)
========== */
:root {
  --band-color: #a8c3a0;
  --band-height: 228px;
  --band-width: 100%;
  --img-w: 535px;
  --img-h: 357px;
  --img-shift-left: -25%;
  --space-vertical: 100px;
}

.soup-block {
  position: relative;
  width: 100%;
  height: var(--img-h);
  margin: var(--space-vertical) 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.soup-block::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: var(--band-width);
  height: var(--band-height);
  background: var(--band-color);
  z-index: 0;
}

.soup-block::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(calc(-50% + var(--img-shift-left)), -50%);
  width: var(--img-w);
  max-width: 100%;
  height: var(--img-h);
  background: url("../images/sub1_course/soup_535x357.png") center / contain no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* 中間ブレイクポイントでシフトを弱める */
@media (max-width: 1024px) {
  :root { --img-shift-left: -15%; }
}

@media (max-width: 900px) {
  :root { --img-shift-left: 0%; }
}


/* ==========
   Text below overview
========== */
.lower-text {
  padding-left: 179px;
  margin-bottom: 103px;
}

/* ==========
   Pricing cards
========== */
h3 { font-size: 36px; font-weight: 400; }
h4 { font-size: 24px; font-weight: 400; }

.day-1 h4,
.day-3 h4 { padding: 96px 0 24px; }

.day-5 h4 { line-height: 1.4; padding: 85px 0 12px; }

.course li span { font-size: 36px; font-weight: 400; }
.prices { line-height: 3em; }

/* tree icons under h3 */
.day-1 h3, .day-3 h3, .day-5 h3 { position: relative; }

.day-1 h3::after,
.day-3 h3::after,
.day-5 h3::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -75px;
  width: 71px;
  height: 71px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.day-1 h3::after { height: 80px; background-image: url("../images/sub1_course/tree1_71x80.png"); }
.day-3 h3::after { background-image: url("../images/sub1_course/tree2_71x71.png"); }
.day-5 h3::after { background-image: url("../images/sub1_course/tree3_71x71.png"); }

/* price block + borders */
.prices {
  text-align: center;
  padding: 24px 16px;
  color: var(--price);
  background-image:
    url("../images/sub1_course/border_295x1.5.svg"),
    url("../images/sub1_course/border_295x1.5.svg");
  background-repeat: no-repeat;
  background-position: top center, bottom center;
  background-size: 85% auto;
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 10px;
  justify-items: center;
}

.prices .price-block { text-align: left; display: inline-block; }
.prices .price-line { margin: 0; line-height: 1.5; font-size: clamp(20px, 3.2vw, 28px); letter-spacing: .02em; }
.prices .yen { font-weight: 500; margin-right: .35em; }
.prices .type { font-weight: 500; font-size: 20px; opacity: .9; }
.prices .room-note { line-height: 1.1; font-size: 0.9rem; display: block; margin-top: 2px; text-align: center; }

/* card grid + shadows */
.course ul { gap: 19px; }
.course li { width: 328px; height: auto; text-align: center; }

.course .day-1,
.course .day-3 {
  border: 1px solid #a8c3a0;
  border-radius: 10px;
  background: linear-gradient(0deg,#ffffff 75%, #a8c3a0 94%, #a8c3a0 100%);
  box-shadow: 5px 5px 2px 0 rgba(0,3,51,0.5);
}

.course .day-5 {
  border: 5px solid #f2c94c;
  border-radius: 10px;
  background: linear-gradient(0deg,#ffffff 75%, #f2c94c 94%, #f2c94c 100%);
  box-shadow: 5px 5px 2px 0 rgba(0,3,51,0.5);
}

.price-desc { padding: 24px 20px; text-align: justify; }

/* ==========
   Animations
========== */
@keyframes fadeUp-move {
  0% { transform: translateY(-30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.fadeUpActive { animation: fadeUp-move 1s ease forwards; }
.fadeUp-trigger { transform: translateY(-30px); opacity: 0; }
.delay-1 { animation-delay: 0s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.4s; }

/* ==========
   Food section
========== */
.food {
  --padX: 75px;             /* ← セクション左右余白を変数化 */
  text-align: center;
  padding: 0 var(--padX);
}

.food h2 {
  display: inline-block;
  position: relative;
  margin: 0 0 85px;
  line-height: 1.2;
}

.food h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -100px;
  transform: translateY(-50%);
  width: 58px;
  height: 57px;
  background: url("../images/sub1_course/sun_58x57.svg") no-repeat center / contain;
  pointer-events: none;
}

/* panel base */
/* ===== Food画像の高さを421pxで統一（比率維持トリミング） ===== */

/* 汎用指定 */
.food .vpanel img{
  height: 421px;
  max-width:100%;
  width: auto;
  object-fit: cover;
  object-position: left -20px top 0px;
  flex-shrink:1;
}

.food dl.panel {
  position: relative;
  background: #a8c3a0;
  padding: 30px;
  width: 421px;
  height: 421px;
  margin: 0;
  box-sizing: border-box;
  flex-shrink:0;
}

/* white box in panel (vertical body) */
.food dl.panel > dd.vertical {
  background: #fff;
  height: 100%;
  width: 100%;
  padding: 30px 76px 20px 20px; /* R(20 + 36 + 20) */
  box-sizing: border-box;
  display: block;
  text-align: start;
}

/* vertical red title in panel */
.food dl.panel > dt.vertical {
  position: absolute;
  top: 50%;
  right: 35px;
  transform: translateY(-50%);
  margin: 0;
  color: #f05050;
  font-weight: 500;
  font-size: 36px;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* rows spacing */
.food .flex { margin-bottom: 62px; }

.food .hpanel img {
  object-fit: cover;
}

/* panel-3 only */
.food dl.panel-3 {
  position: relative;
  background: #a8c3a0;
  padding: 30px;
  width: 622px;
  height: 420px;
  margin: 0;
  box-sizing: border-box;
  text-align: left;
  flex-shrink:2;
}

.food dl.panel-3 span { font-size: 24px; font-weight: 400; }
.food dl.panel-3 > dt {
  position: absolute;
  padding: 30px 20px 20px 30px;
  color: #d4a017;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
}
.food dl.panel-3 > dd {
  background: #fff;
  margin: 0;
  height: 100%;
  padding: 120px 20px 20px 30px;
  box-sizing: border-box;
}

/* 細かいレスポンシブ */

@media (max-width: 900px) {
  .food .vpanel img{
    object-position: left -100px top 0px;
  }

}

@media (max-width: 940px) {

  /* カードは2列グリッド */
  .course ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    justify-items: center; /* 各セル内で中央寄せ */
  }

  .course li {
    width: 100%;
    max-width: 360px;
  }

  /* アイテム数が奇数のとき、最後の1枚を2列ぶち抜き＋中央 */
  .course ul > li:nth-last-child(1):nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 744px) {

    /* カード1列化 */
    .course ul {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  
}

@media (max-width: 558px) {

  /* フォント調整 */
  #koso-text{
    letter-spacing: 0;
  }

}

/* =========================================
   768px以下：2列＋見出しを横書きに変更
========================================= */
@media (max-width: 768px) {

    /* 「コース・料金」を横書きに切り替え */
    .course h2.vertical {
      writing-mode: horizontal-tb;
      text-orientation: mixed;
      font-size: 28px;
      padding: 0;
      margin-bottom: 32px;
      text-align: center;
    }

    .course h2::after {
      content: "";
      position: absolute;
      right: -80px;
    }

    .soup-block {
      margin: 50px 0;
    }

    .lower-text {
      padding-left: 0px;
    }

    /* 位置調整（左右反転のときも整列するように） */
    .course .flex.reverse {
      flex-direction: column;
      align-items: center;
    }
  
    .food h2{
    font-size: 28px;
    padding: 0;
    } 

    /* Food：画像とテキストを縦積み */
    .food .flex {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .food .column-reverse{
      flex-direction: column-reverse;
    }

  /* ★追加：PC時の固定高さ/位置ズレを上書きして自動スケール */
  .food .vpanel img {
    width: 100%;
    height: auto;           /* ← 421px固定を解除 */
    max-width: none;
    object-fit: contain;    /* ← 収まる（トリミングなし） */
    object-position: center;/* ← 左ズラしを中央に戻す */
    display: block;
  }

  /* （必要なら）横長画像用の横並びパネルも同様に */
  .food .hpanel img {
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  .food .flex {
    width: 100%;
    flex-direction: column;
    align-items: stretch; /* ← ここが重要（center だと幅が揃わない） */
  }
  .food .column-reverse {
    flex-direction: column-reverse;
    align-items: stretch; /* ← こっちも揃える */
  }

  /* 2) 画像：要素いっぱい＆高さ固定（=PC時の世界観のまま） */
  .food .vpanel {
    width: 100%;
  }
  .food .vpanel img {
    width: 100%;
    height: 421px;          /* ← 高さ固定を維持して崩れ防止 */
    object-fit: cover;      /* ← 面で見せる。トリミングあり */
    object-position: center;/* ← 左ズラしをリセットして中央に */
    display: block;
  }

  /* 3) パネル（緑背景）：画像と同じ幅＆同じ高さに揃える */
  .food dl.panel,
  .food dl.panel-3 {
    width: 100%;
    height: 421px;          /* ← ここも固定で“見た目の高さ”を合わせる */
    box-sizing: border-box;
  }
}
  /* =========================================
     500px以下：余白さらに圧縮
  ========================================= */
  @media (max-width: 500px) {
  
    /* 「コース・料金」見出しさらに小さく */
    .course h2.vertical {
      font-size: 24px;
      margin-bottom: 24px;
    }
  
    .soup-block {
      margin: 0 0;
    }

    .soup-block::before {
      display:none
    }

    .food h2{
      font-size: 24px;
      margin-bottom: 24px;
    }

    .food h2::before{
      /* 左の張り出しを大幅に短くする（より内側に寄せる） */
      left: calc(-1 * (var(--padX) + 10px)); 
      transform: translateY(-50%);
    }

    /* Food：さらにコンパクトに */
    #koso-text{
      line-height:1.75em;
    }
  }
    /* ===========================
   可変余白トークン
=========================== */
:root{
  /* 画面幅に応じて16px〜85pxまで自動可変 */
  --course-side: clamp(16px, 6vw, 75px);      /* 標準余白 */
  --course-sideWide: clamp(16px, 8vw, 85px);  /* 見出しや広め余白 */
}

/* 「コース・料金」セクション本体 */
.course{
  padding: 85px var(--course-sideWide);
}
.course h2{
  padding: 0 var(--course-sideWide);
}

/* 下テキスト左インデントを可変化（最大179px維持） */
.lower-text{
  padding-left: clamp(0px, 10vw, 179px);
}

/* フードセクションの余白 */
.food{
  --padX: var(--course-side);
  padding: 0 var(--padX);
}

/* 汎用：このページ内で共通の左右余白を適用したい時 */
.px-responsive{
  padding-inline: var(--course-side);
}

/* 見出しアイコンの位置補正（小画面対策） */
@media (max-width: 900px){
  .food h2::before{ left: calc(-1 * clamp(48px, 8vw, 80px)); }
}

/* ========= お食事・ドリンク 見出しアイコンの位置を余白基準で固定 ========= */

/* 余白とアイコン寸法のトークン（このページ専用） */
.food{
  --padX: var(--course-side); /* すでに設定済みの可変左右余白 */
  --foodIconW: 58px;          /* アイコン幅（画像サイズに合わせる） */
  --foodIconH: 57px;          /* アイコン高 */
  --foodIconGap: 16px;        /* コンテンツ左端からの見た目の余白 */
}

/* アイコンを「コンテナ余白 + アイコン幅 + ギャップ」ぶん左に張り出す */
.food h2::before{
  width: var(--foodIconW);
  height: var(--foodIconH);
  left: calc(-1 * (var(--padX) + var(--foodIconW) + var(--foodIconGap)));
  /* 既存の top/transform/background はそのまま活かす */
}

/* 念のため 900px 以下でも同じ式で上書き（以前のvw依存を打ち消す） */
@media (max-width: 900px){
  .food h2::before{
    left: calc(-1 * (var(--padX) + var(--foodIconW) + var(--foodIconGap)));
  }
}

/* ========= 強制上書き：お食事・ドリンク見出しアイコン位置 ========= */
/* 前提トークン（未定義なら定義） */
.food{
  --padX: var(--course-side, 24px);
  --foodIconW: 58px;
  --foodIconH: 57px;
  --foodIconGap: 16px;
}

/* PC〜タブレット：余白基準で外側に張り出す（既存値を打ち消す） */
.food h2::before{
  left: calc(-1 * (var(--padX) + var(--foodIconW) + var(--foodIconGap))) !important;
  width: var(--foodIconW);
  height: var(--foodIconH);
  transform: translateY(-50%);
}

/* 500px以下：しっかり寄せる（文字のすぐ左） */
@media (max-width: 500px){
  .food h2::before{
    left: calc(-1 * (var(--padX) + 33px)) !important; /* もっと寄せたければ 0px に */
  }
}