/* ==========================================================
   DESIGN TOKENS
   方針：「ホテルレストランとしての上質さ」を最優先。
   ベースは藍（会津藍染）×柿渋朱（会津塗）のまま、
   山・里・海の3色を各セクションのアイコン／地図で明快に使う。
   （コラージュ・スタンプ・ステッカー調の装飾はv4で削除）

   [パフォーマンス方針]
   ・アイコンはCSSに埋め込まず ../img/icons/*.svg を参照
     （CSS自体のファイルサイズを小さく保ち、レンダリングブロックを最小化）
   ・装飾用アイコンはブラウザが低優先度で並行取得できる外部ファイルに分離
   ========================================================== */
:root{
  --paper:      #F2EEE4;  /* 晒す前の生成り・和紙 */
  --paper-deep: #E9E2D1;
  --ink:        #2A2622;
  --ink-soft:   #5B5245;

  --ai:         #22303A;  /* 藍：上質さを担うメインアクセント */
  --ai-soft:    #3E4F5C;
  --shibu:      #B54A3A;  /* 柿渋朱：郷土感＋ポップな差し色（CTA・スタンプ等） */
  --shibu-deep: #973A2C;

  --c-yama: #4F7A46;  /* 会津 -山- 緑 */
  --c-sato: #CE8A3D;  /* 中通り -里- 橙 */
  --c-umi:  #2B6FA0;  /* 浜通り -海- 青 */

  --line: #DCD3C2;

  --font-mincho: "Shippori Mincho", serif;
  --font-en:     "Cormorant Garamond", serif;
  --font-sans:   "Noto Sans JP", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.95;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--ai-soft); outline-offset:3px; }

.wrap{ width:min(1080px, 90vw); margin-inline:auto; }

.sp {
    display: none;
}

@media(max-width:600px){

    .sp {
        display: block;
    }

    .pc {
        display: none;
    }

}

/* ---------- placeholder（型のダミー要素。本番は実写に差し替え） ---------- */
.ph{
  position:relative;
  aspect-ratio: var(--ar, 4/3);
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem;
  background:linear-gradient(140deg, #FFFFFF 0%, #F6ECD5 50%, #E7D6B5 100%);
  border:1px solid var(--line);
}
.ph::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 20% 18%, rgba(181,74,58,.11), transparent 52%);
}
.ph-icon{
  width:44px; height:34px; position:relative; z-index:1;
  background-color:var(--ink-soft); opacity:.34;
  -webkit-mask:url("../img/icons/icon-photo.svg") no-repeat center / contain;
  mask:url("../img/icons/icon-photo.svg") no-repeat center / contain;
}
.ph .ph-lbl{
  position:relative; z-index:1;
  font-size:.74rem; letter-spacing:.12em; color:var(--ink-soft);
  text-align:center; padding:0 1rem; opacity:.85;
}

/* ---------- 山・里・海 アイコン（共通パーツ） ---------- */
.icon-glyph{ width:100%; height:100%; background-color:#fff; }
.icon-glyph.yama{
  -webkit-mask:url("../img/icons/icon-yama.svg") no-repeat center/68%;
  mask:url("../img/icons/icon-yama.svg") no-repeat center/68%;
}
.icon-glyph.sato{
  -webkit-mask:url("../img/icons/icon-sato.svg") no-repeat center/58%;
  mask:url("../img/icons/icon-sato.svg") no-repeat center/58%;
}
.icon-glyph.umi{
  -webkit-mask:url("../img/icons/icon-umi.svg") no-repeat center/72%;
  mask:url("../img/icons/icon-umi.svg") no-repeat center/72%;
}

.icon-badge{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px -6px rgba(42,38,34,.4);
}
.icon-badge.yama{ background:var(--c-yama); }
.icon-badge.sato{ background:var(--c-sato); }
.icon-badge.umi{  background:var(--c-umi); }

/* 料理写真の角に載せる版（少し大きめ・白フチ付き） */
.region-icon-badge{
  position:absolute; right:14px; bottom:14px; z-index:2;
  width:52px; height:52px; border:3px solid #fff;
}

/* ---------- 共通：章見出し ---------- */
.section{ padding:clamp(4.5rem,8vw,7rem) 0; position:relative; overflow: hidden;}
.sec-head{ text-align:center; margin-bottom:clamp(2.6rem,5vw,4rem); position:relative; }
.sec-head .eyebrow{
  display:block; font-family:var(--font-en); font-style:italic;
  letter-spacing:.24em; font-size:.86rem; color:var(--ai-soft); margin-bottom:.7rem;
}
.sec-head h2{
  font-family:var(--font-mincho); font-weight:600;
  font-size:clamp(1.55rem,3.6vw,2.15rem); line-height:1.7;
  margin:0 0 1.1rem; letter-spacing:.03em;
}
.sec-head .rule{ width:38px; height:1px; background:var(--ai); margin:0 auto; opacity:.6; }
.sec-head .lead{ margin:1.3rem auto 0; color:var(--ink-soft); font-size:.94rem; line-height:1.9; }
.sec-head .lead .ln{ display:block; white-space:nowrap; }

.eyebrowMenu {
    background: url(../img/menu.svg) no-repeat center;
    background-size: auto 100%;
    padding: 20px;
}

@media(max-width:600px){ .sec-head .lead .ln{ white-space:normal; } }

/* =========================================================
   1. HERO（フルブリード／フェアロゴを中央に大きく＋90thロゴ）
   本番では1枚の写真＋ロゴの合成KV差し替えを想定。
   ここではロゴが中央に大きく配置されることが伝わる型のみ。
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh; /* yukata/summerstay/oyako 等、同サイトの特設ページに合わせフル画面に */
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  background:linear-gradient(155deg, #FFFFFF 0%, #F7EFDC 45%, #EDDBBB 100%);
  background-image: url(../img/hero.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
    background-color: #fff;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 14% 16%, rgba(181,74,58,.10), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(107,44,47,.09), transparent 42%);
}
.kv-note{
  position:absolute; right:1.1rem; bottom:1.1rem; z-index:4;
  font-family:var(--font-en); font-style:italic; letter-spacing:.06em; font-size:.72rem;
  color:var(--ink-soft); border:1px solid var(--line); background:rgba(255,255,255,.6);
  padding:.3rem .9rem; border-radius:40px;
}

.badge-90th{
  position:absolute; z-index:4; top:1.5rem; right:1.5rem;
  width:82px; height:82px; border-radius:50%; background:#fff;
  box-shadow:0 12px 26px -12px rgba(34,48,58,.4); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding:11px;
}
.badge-90th img{ width:100%; height:100%; object-fit:contain; }

.hero-logo{position:absolute;top:22px;left:0;background:transparent;padding:8px 18px;}
.hero-logo img{height:20px;display:block;filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8))
        drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));}

@media (min-width:768px){
  .hero-logo{top:32px;left:36px;}
  .hero-logo img{height:24px;}
}
@media (min-width:1024px){
  .hero-logo{top:42px;left:50px;padding:0;}
  .hero-logo img{height:26px;}
}
@media(max-width:600px){ .badge-90th{ width:58px; height:58px; top:.9rem; right:.9rem; padding:6px; } 
.hero{
  background-image: url(../img/hero-sp.svg);
}
}

.hero-inner{ position:relative; z-index:3; padding:5.5rem 1.5rem 4rem; color:var(--ink); max-width:720px; }

/* フェアロゴ：完成時は中央に大きく配置される想定のプレースホルダー */
.hero .logo-ph{
    position: relative;
    width: 67vw;
    max-width: 500px;
    min-width: 100%;
    margin: 0 auto 1.5rem;
}

.hero .logo-ph::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    height: calc(100% - 2px);
    aspect-ratio: 1;
    background-color: #fff;
    border-radius: 500px;
}

.hero .logo-ph img {
    position: relative;
}

/* 仮見出し：ロゴ内に文字が入る場合は不要になる可能性がある“仮置き”のタイトル。
   本文より一回り控えめなサイズにし、注記を添えて「仮」であることを明示する。 */
.hero .wordmark-sm{
  font-family:var(--font-mincho); font-weight:600; color:var(--ink);
  font-size:clamp(1.5rem,3.6vw,2.2rem); line-height:1.5; letter-spacing:.06em; margin:0;
}
.hero .sub{
  font-family:var(--font-mincho); font-weight:500;
  font-size:clamp(1rem,2.4vw,1.2rem); color:var(--ink-soft); margin:2.2rem 0 0; letter-spacing:.05em; line-height:1.9;
}
.hero .period-simple{
  margin-top:1.8rem;
  font-family:var(--font-en); font-style:italic; font-weight:500;
  font-size:1.5rem; letter-spacing:.05em; color:var(--ink-soft);
}

.hero .period-simple .small {
  font-size:1.1rem;
}

@media(max-width:760px){

    .hero .period-simple{
        font-size:1.3rem;
    }

    .hero .period-simple .small {
        font-size:1rem;
    }

}

/*shape*/
.hero .shape {
    position: absolute;
    border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%;
    overflow: hidden;
}

.hero .shape1 {
    top: -50px;
    left: -50px;
    width: 40%;
    height: 30vw;
    min-width: 250px;
    min-height: 200px;
    border-radius: 0% 51% 51% 55% / 57% 58% 49% 43%;
}

.hero .shape2 {
    bottom: -10px;
    right: -50px;
    width: 35%;
    height: 25vw;
    min-width: 235px;
    min-height: 210px;
    border-radius: 46% 58% 0% 46% / 63% 50% 49% 41%;
}

.hero .shape3 {
    top: 14px;
    right: -50px;
    width: 36%;
    height: 25vw;
    min-width: 192px;
    min-height: 146px;
    border-radius: 46% 55% 53% 46% / 55% 39% 64% 47%;
}

.hero .shape4 {
    bottom: 30px;
    left: -50px;
    width: 30%;
    height: 20vw;
    min-width: 205px;
    min-height: 165px;
    border-radius: 46% 58% 52% 50% / 63% 50% 49% 41%;
}

.hero .shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   2. CONCEPT
   ========================================================= */
#concept {
    background-image: url(../img/concept-illust.svg), url(../img/concept-bg.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: auto calc(100% - 80px), auto calc(100% - 50px);
}

.concept-wrap{ position:relative; }
.concept-copy{
  max-width:560px; margin:0 auto; text-align:center;
  font-size:1rem; line-height:2.2; color:var(--ink);
}
.concept-copy strong{ font-family:var(--font-mincho); font-weight:600; }
.concept-table{ max-width:620px; margin:3.2rem auto 0; border-top:1px solid var(--line); }
.concept-table dl{
  display:flex; margin:0; padding:1rem .3rem; border-bottom:1px solid var(--line); font-size:.88rem;
}
.concept-table dt{ width:118px; flex-shrink:0; color:var(--ai-soft); font-family:var(--font-mincho); }
.concept-table dd{ margin:0; color:var(--ink-soft); }

/* =========================================================
   3. MENU（レストラン紹介：メインコンテンツ）
   ========================================================= */
.sec-menu{ background:var(--paper-deep); }
.sec-menu .sec-head{ position:relative; }


.sec-menu .fmap-row {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    justify-content: center;
    margin-top: 30px;
}

.sec-menu .fmap-area {
    width: auto !important;
    flex-direction: inherit;
    align-items: flex-start;
}

.sec-menu .fmap-area h4 .ja {
    writing-mode: inherit;
}

.sec-menu .fmap-area .icon-badge {
    margin-bottom: 0;
}

@media(max-width:640px){

    .sec-menu .fmap-area {
        margin: 0;
    }

    .sec-menu .fmap-area .icon-badge {
        margin-top: 3px;
    }

}

.store{position: relative; display:flex; align-items:center; gap:3.5rem; margin-bottom:5.6rem; }
.store:last-child{ margin-bottom:0; }
.store.reverse{ flex-direction:row-reverse; }
.store .photo{ flex:1.05; min-width:280px; position:relative; }
.store .photo .ph{ width:100%; box-shadow:0 24px 48px -30px rgba(34,48,58,.35); }
.store .text{ flex:1; min-width:260px; }

.store h3{ font-family:var(--font-mincho); font-weight:600; font-size:1.4rem; margin:0 0 .2rem; }
.store h3 .en{
  display:block; font-family:var(--font-en); font-style:italic; font-size:.82rem;
  color:var(--ink-soft); letter-spacing:.04em; margin-top:.3rem;
}
.store .course-name{
  display:inline-block; margin:1.1rem 0 0; font-family:var(--font-mincho); font-weight:600;
  font-size:1rem; color:var(--shibu-deep); border-bottom:1px dashed var(--line); padding-bottom:.35rem;
}

.store .course-name span {
    display: block;
}

.store .course-name span::before{ content:"◆"; color:var(--shibu); font-size:.62em; margin-right:.5em; vertical-align:middle; }
.store p.copy{ font-size:.9rem; color:var(--ink-soft); margin:.9rem 0 1.5rem; }

.store .illust {
    width: 10vw;
    max-width: 150px;
    min-width: 100px;
    max-height: 120px;
    margin-top: 20px;
}

.store .illust1 {
    margin-left: auto;
}

.cta-group{ display:flex; flex-wrap:wrap; gap:.9rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-mincho); font-size:.86rem; letter-spacing:.04em;
  padding:.8rem 1.7rem; min-width:152px; border-radius:2px; text-decoration:none;
  transition:all .2s ease; white-space:nowrap; border:1.6px solid transparent;
}
.btn-primary{ background:var(--shibu); color:#fff; box-shadow:0 12px 24px -10px rgba(181,74,58,.55); }
.btn-primary:hover{ background:var(--shibu-deep); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--ai); border-color:var(--ai); }
.btn-outline:hover{ background:var(--ai); color:#fff; transform:translateY(-2px); }

@media(max-width:760px){
  .store, .store.reverse{ flex-direction:column; gap:1.6rem; align-items:stretch; }
  .store .illust  {
    display: none;
  }
}

/* =========================================================
   4. 福島の魅力（地域紹介＋エリアマップ）
   ========================================================= */
.sec-head .guideTitle {
    background-image: url(../img/guide1.svg), url(../img/guide2.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: center left, center right;
    background-size: 200px, 200px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.region-cards{ display:flex; gap:1.8rem; flex-wrap:wrap; }
.region-card{ flex:1; min-width:260px; }
.region-card .photo{ position:relative; margin-bottom:1.2rem;
    height: 450px;
}
.region-card .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.region-card .ph{ width:100%; }
.region-card .bar{ width:30px; height:2px; margin-bottom:.9rem; }
.region-card.yama .bar{ background:var(--c-yama); }
.region-card.sato .bar{ background:var(--c-sato); }
.region-card.umi  .bar{ background:var(--c-umi); }
.region-card h3{ font-family:var(--font-mincho); font-size:1.15rem; font-weight:600; margin:0 0 .1rem; }
.region-card h3 .en{
  font-family:var(--font-en); font-style:italic; font-size:.8rem; color:var(--ai-soft); margin-left:.5rem;
}
.region-card p{ font-size:.86rem; color:var(--ink-soft); margin-top:.6rem; }

.region-links{
  margin-top:3.4rem; text-align:center; display:flex; flex-wrap:wrap;
  justify-content:center; gap:1.8rem;
}
.region-links a{
  text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:.1rem;
  transition:border-color .2s ease;
}
.region-links a:hover{ border-color:var(--ai-soft); }

@media(max-width:760px){ .region-cards{ flex-direction:column; } 
.sec-head .guideTitle {
    background-position: top left, bottom right;
    background-size: 60px, 60px;
}
}

/* ---- エリアマップ（会津・中通り・浜通り／簡略イメージ図） ---- */
.fmap-wrap{position: relative; margin-top:4.2rem; margin-bottom:clamp(3.4rem,7vw,5rem); }
.fmap{
  max-width:700px; margin:0 auto; background:#fff; border:1px solid var(--line);
  border-radius:20px; padding:clamp(1.8rem,4vw,2.6rem);
  box-shadow:0 30px 54px -38px rgba(42,38,34,.3);
}
.fmap-title{ text-align:center; margin-bottom:1.8rem; }
.fmap-title .en{ display:block; font-family:var(--font-en); font-style:italic; letter-spacing:.18em; font-size:.78rem; color:var(--ai-soft); margin-bottom:.4rem; }
.fmap-title .jp{ font-family:var(--font-mincho); font-size:1.05rem; font-weight:600; }

.mapArea {
    position: relative;
}

.fmap-row{ display:flex; align-items:stretch; gap:0; }
.fmap-area{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1.6rem .5rem;
}

.fmap-area .shape{ position:absolute; inset:0; opacity:.14; z-index:0; }
.fmap-area.aizu .shape{ background:var(--c-yama); border-radius:42% 58% 55% 45% / 60% 55% 45% 40%; }
.fmap-area.naka .shape{ background:var(--c-sato); border-radius:50% 50% 50% 50% / 55% 55% 45% 45%; }
.fmap-area.hama .shape{ background:var(--c-umi); border-radius:55% 45% 40% 60% / 45% 60% 40% 55%; }
.fmap-area .icon-badge{ position:relative; z-index:1; margin-bottom:.8rem; width:44px; height:44px; }
.fmap-area h4{ position:relative; z-index:1; font-family:var(--font-mincho); font-size:1.2rem; font-weight:600; margin:0; }
.fmap-area h4 .ja {
    writing-mode: vertical-rl;
}
.fmap-area h4 .en{
    line-height: 1.3;
    display:block; font-family:var(--font-en); font-style:italic; font-size:.7rem; color:var(--ink-soft); margin-top:.2rem; letter-spacing:.06em; }
.fmap-area .city{
        line-height: 1.3;
         position:relative; z-index:1; font-size:.7rem; color:var(--ink-soft); letter-spacing:.03em;}

.fmap-ocean{
  text-align:right; font-family:var(--font-en); font-style:italic; font-size:.76rem;
  color:var(--ai-soft); margin-top:.9rem; letter-spacing:.06em; padding-right:.4rem;
}

.fmap-wrap .ab1 {
    position: absolute;
    top: -50px;
    left: 0;
    width: 17vw;
    max-width: 200px;
    min-width: 100px;
}

.fmap-wrap .ab2 {
    position: absolute;
    bottom: -50px;
    right: 0;
    width: 17vw;
    max-width: 200px;
    min-width: 100px;
}


    .fmap-row {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        margin: auto;
        width: 100%;
    }

    .fmap-area.aizu {
        width: 55%;
    }

    .fmap-area.naka {
        width: 25%;
    }

    .fmap-area.hama {
        width: 20%;
    }

    
@media(max-width:640px){

    .fmap-area {
        padding: 1rem .5rem;
        min-height: auto;
    }

    .fmap-area h4 .en {
        font-size: .5rem;
    }

    .fmap-area .city {
        font-size: .6rem;
    }

    .fmap-area .icon-badge {
        width: 30px;
        height: 30px;
    }

    .fmap-area h4 {
        font-size: 1.1rem;
    }

}

/* =========================================================
   5. CHEF'S JOURNEY（シェフの現地取材／非対称グリッド）
   写真は一切回転させず、主役写真を大きく・重なりは角のみに抑える。
   Press削除に伴い、前後セクション（Guide／Reservation）との境目が
   曖昧にならないよう、背景をpaper-deepにしてメリハリをつける。
   ========================================================= */
.sec-journey{ background:var(--paper-deep); }

.eyebrowJourney {
    background: url(../img/journey-icon.svg) no-repeat center;
    background-size: auto 100%;
    padding: 20px;
}

.journey-item{
    position: relative;
  display:flex; align-items:center; gap:clamp(2.4rem,5vw,4.2rem);
  margin-bottom:clamp(5.5rem,10vw,8.5rem);
}
.journey-item:last-child{ margin-bottom:0; }
.journey-item.alt{ flex-direction:row-reverse; }

.journey-item .ph{
  border:none; border-radius:8px;
  box-shadow:0 30px 54px -26px rgba(42,38,34,.34), 0 10px 20px -12px rgba(42,38,34,.16);
}

.journey-photos{ flex:1.3; min-width:320px; position:relative; }
.journey-photos .ph{ position:absolute; }

.journey-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.journey-item::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  top: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
}

.journey-item.item1::before {
    right: 0;
  background: radial-gradient(
    circle,
    rgba(79, 122, 70, 0.22) 0%,
    rgba(79, 122, 70, 0.14) 35%,
    rgba(79, 122, 70, 0.05) 65%,
    rgba(79, 122, 70, 0) 100%
  );
}

.journey-item.item2::before {
    left: 0;
  background: radial-gradient(
    circle,
    rgba(206, 138, 61, 0.22) 0%,
    rgba(206, 138, 61, 0.14) 35%,
    rgba(206, 138, 61, 0.05) 65%,
    rgba(206, 138, 61, 0) 100%
  );
}

.journey-item.item3::before {
    right: 0;
  background: radial-gradient(
    circle,
    rgba(43, 111, 160, 0.18) 0%,
    rgba(43, 111, 160, 0.10) 40%,
    rgba(43, 111, 160, 0.03) 70%,
    rgba(43, 111, 160, 0) 100%
  );
}

.journey-list {
    background: url(../img/journey.svg) no-repeat top 100px center;
    background-size: auto 100%;
}

/* 2枚構成：主役（大）を左上、脇写真を右下の角にだけ重ねる */
.journey-photos.layout-2{ aspect-ratio:4/3.2; }
.layout-2 .g-hero{ top:0; left:0; width:66%; z-index:2; }
.layout-2 .g-b{ bottom:0; right:0; width:42%; z-index:3; }

.journey-item.alt .layout-2 .g-hero{ left:auto; right:0; }
.journey-item.alt .layout-2 .g-b{ right:auto; left:0; }

.journey-text{ flex:1; min-width:260px; }
.journey-text .num{
  display:block; font-family:var(--font-en); font-style:italic; font-weight:500;
  font-size:clamp(2.2rem,5vw,2.8rem); line-height:1; color:var(--ai); opacity:.3; margin-bottom:.7rem;
}
.journey-text .num-rule{ width:22px; height:2px; background:var(--shibu); margin-bottom:1.1rem; }
.journey-text h3{ font-family:var(--font-mincho); font-weight:600; font-size:1.28rem; margin:0 0 .5rem; }
.journey-text .tagline{
  font-family:var(--font-mincho); font-style:italic; font-size:.9rem; color:var(--ink-soft);
  margin:0 0 1.1rem; line-height:1.85;
}
.journey-text .copy{ font-size:.9rem; color:var(--ink-soft); line-height:2; margin:0; }

/* 03のみ：テキスト列の下にもう1枚（全体のバランスを見て、テキスト幅に合わせる） */
.journey-text-col{ display:flex; flex-direction:column; flex:1; min-width:260px; gap:1.7rem; }
.journey-text-col .journey-text{ flex:none; min-width:0; }
.journey-photo-extra{ width:56%; aspect-ratio:4/3; }

@media(max-width:760px){
  .journey-item, .journey-item.alt{ flex-direction:column; align-items:stretch; gap:1.6rem; }

  /* テキストのラッパーを箱として消し、中身（見出し／本文）を
     journey-item の直接の子として扱えるようにする。
     これにより「見出し→写真→本文」の順に並べ替えられる。 */
  .journey-item > .journey-text,
  .journey-item > .journey-text-col,
  .journey-text-col > .journey-text{ display:contents; }

  .journey-head{ order:1; }
  .journey-photos{ order:2; }
  .journey-photo-extra{ order:2; }
  .journey-text .copy{ order:3; margin-top:.2rem; }

  .journey-photos{ min-width:0; }
  .journey-photo-extra{ width:62%; margin-top:.2rem; }

    .journey-list {
        background-position: top 200px center;
        background-size: 100% auto;
    }

}

/* =========================================================
   6. RESERVATION
   ========================================================= */
.sec-reserve{
    position: relative;
  color:#F2EEE4; text-align:center; position:relative;
  background:linear-gradient(155deg, #2C3D48 0%, var(--ai) 55%, #1D2932 100%);
}

.sec-reserve::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/reserve.webp) no-repeat center;
    background-size: cover;
    opacity: .3;
}

.sec-reserve .wrap {
    position: relative;
}

.sec-reserve .eyebrow{
  font-family:var(--font-en); font-style:italic; letter-spacing:.24em; font-size:.86rem; color:#CBD3D6;
}
.sec-reserve h2{
  font-family:var(--font-mincho); font-weight:600; font-size:1.75rem; margin:.8rem 0 2.4rem;
}
.reserve-summary{ max-width:560px; margin:0 auto 2.4rem; border-top:1px solid rgba(242,238,228,.22); }
.reserve-summary dl{
  display:flex; margin:0; padding:.9rem .3rem; border-bottom:1px solid rgba(242,238,228,.22);
  font-size:.85rem; text-align:left;
}
.reserve-summary dt{ width:130px; flex-shrink:0; color:#D8B9AE; font-family:var(--font-mincho); }
.reserve-summary dd{ margin:0; color:rgba(242,238,228,.85); }

.reserve-summary dd a {
    text-decoration: none;
}

.cta-shibu{
  display:inline-block; font-family:var(--font-mincho); font-size:1rem; letter-spacing:.06em;
  color:#fff; background:var(--shibu); padding:1rem 2.8rem; text-decoration:none;
  box-shadow:0 16px 30px -14px rgba(181,74,58,.6);
  transition:all .2s ease;
}
.cta-shibu:hover{ background:var(--shibu-deep); transform:translateY(-2px); }