/* =========================================================
   Bassin’ Heaven 2027年2月 メキシコ・バスフィッシング 個別ページ
   /stafftour/template/2702mexico.css

   ※ 2702mexico.html 専用。共通デザイン（ヘッダー・フッター・
     ボタン・staff-shell 等）は site.css。
     クラスはすべて mx- で始まり、他ページに影響しない。
   ※ このファイルは「色・大きさ・配置」だけ。文章は1文字も
     持たせていない（content: は飾りの空文字 "" のみ）。
   ※ スマホ・タブレットの指定は、各セクションの直後にまとめて
     置いている（そのセクションの指定はそこだけ見ればよい）。

   目次
     0. COLOR          色の設定
     1. PAGE           ページ全体・セクション共通
     2. BREADCRUMB     パンくず
     3. HERO           ヒーロー
     4. SPECS          釣行データ帯
     5. INTRO          01 メキシコという釣り場
     6. WHY            02 なぜメキシコなのか
     7. TEN POUNDER    03 夢のテンパウンダー
     8. PAST TOURS     04 これまでのメキシコ
     9. MID CTA        ページ途中の問い合わせ
    10. DAY            05 一日の流れ
    11. LODGE          06 ロッジ
    12. TOUR           07 参考旅行情報・日程表・見積り内容
    13. FIRST          08 初めての海外遠征
    14. TACKLE         09 タックルと持ち物
    15. STAFF          10 同行スタッフ
    16. FAQ            11 よくあるご質問
    17. CTA            最終問い合わせ
    18. MOTION         スクロール時の動き
   ========================================================= */


/* =========================================================
   0. COLOR（メキシコ専用の色）
   ▼ 色を変える時はここだけ
     地の色（黒・深緑・茶・深い湖・アイボリー）の上に、
     メキシコの原色を「差し色」として小さく強く使う
   ========================================================= */
.mx-main{
  /* 地の色 */
  --mx-ink:        #17140D;   /* ヒーロー（黒〜濃茶） */
  --mx-black:      #0F0E0B;   /* これまでのメキシコ */
  --mx-brown:      #24190F;   /* ロッジ・同行スタッフ（暖色ブラウン） */
  --mx-green:      #0F2A1F;   /* 初めての海外遠征（ディープグリーン） */
  --mx-lake:       #0B2428;   /* 釣り場（深い湖の色） */
  --mx-sand:       #F3EBDA;   /* 暖かなベージュ */
  --mx-paper:      #F8F3E8;   /* 日程表などの紙面 */
  --mx-card:       #FFFDF8;   /* 紙面の上のカード */

  /* ゴールド・土 */
  --mx-earth:      #8A5E3B;
  --mx-clay:       #B46A3A;
  --mx-gold:       #D6A84F;
  --mx-gold-light: #EBCB86;

  /* メキシコの原色（暗い地の上で使う明るい色） */
  --mx-red:        #E5483C;
  --mx-orange:     #F28C28;
  --mx-yellow:     #F6C343;
  --mx-lime:       #3DBA6A;   /* サボテンの緑 */
  --mx-turquoise:  #2EC4BE;
  --mx-blue:       #2B8FC7;   /* 湖と空の青 */
  --mx-pink:       #E8508A;   /* フューシャ */

  /* 同じ原色の濃い版（明るい地の上の文字・線に使う） */
  --mx-red-d:       #B42A21;
  --mx-orange-d:    #BD5415;
  --mx-yellow-d:    #936A00;
  --mx-lime-d:      #1C7A43;
  --mx-turquoise-d: #0B7A76;
  --mx-blue-d:      #0F5E8A;
  --mx-pink-d:      #B8185A;

  /* 空の色（一日の流れ） */
  --mx-dawn:       #5FC3D0;
  --mx-sun:        #F6C343;
  --mx-dusk:       #E5603A;

  /* 文字・線 */
  --mx-text:       #2A2417;
  --mx-text-sub:   rgba(42,36,23,.76);
  --mx-line:       rgba(42,36,23,.16);
  --mx-ivory:      #F7F1E3;
  --mx-ivory-sub:  rgba(247,241,227,.80);
  --mx-line-light: rgba(247,241,227,.14);

  /* 民芸品のストライプ（セラーペ柄） */
  --mx-sarape: linear-gradient(90deg,
    var(--mx-red) 0 14.3%, var(--mx-orange) 0 28.6%, var(--mx-yellow) 0 42.9%,
    var(--mx-lime) 0 57.1%, var(--mx-turquoise) 0 71.4%, var(--mx-blue) 0 85.7%,
    var(--mx-pink) 0 100%);

  /* 暗い地の標準（明るい地・各セクションで切り替え）
     --c-num はセクション番号とラベルの色 */
  --c-head:   #FFFFFF;
  --c-body:   var(--mx-ivory-sub);
  --c-accent: var(--mx-gold);
  --c-num:    var(--mx-gold);
  --c-line:   var(--mx-line-light);
}


/* =========================================================
   1. PAGE（ページ全体・セクション共通）
   ========================================================= */
.mx-main{
  position: relative;
  overflow: hidden;
  color: var(--mx-ivory);
  background: var(--mx-ink);
  line-break: strict;
}

.mx-sec{
  position: relative;
  padding: clamp(64px, 8vw, 112px) 0;
}

/* ---- セクションの地の色（HTMLの mx-sec--〇〇 で選ぶ） ---- */

/* 暖かなベージュ（うっすら砂のざらつき）：なぜメキシコ・タックル */
.mx-sec--sand{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .14 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 90% 0%, rgba(242,140,40,.12), transparent 40%),
    var(--mx-sand);
}

/* 紙面：参考旅行情報・FAQ */
.mx-sec--paper{
  background:
    radial-gradient(circle at 8% 0%, rgba(46,196,190,.08), transparent 36%),
    var(--mx-paper);
}

/* 明るい地の文字色 */
.mx-sec--sand,
.mx-sec--paper{
  --c-head:   var(--olive-dark);
  --c-body:   var(--mx-text-sub);
  --c-accent: var(--mx-earth);
  --c-line:   var(--mx-line);
  color: var(--mx-text);
}

/* 深い湖（ブルー×グリーン）：メキシコという釣り場 */
.mx-sec--lake{
  --c-accent: var(--mx-turquoise);
  background:
    radial-gradient(circle at 88% 8%, rgba(46,196,190,.20), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(43,143,199,.26), transparent 50%),
    linear-gradient(180deg, var(--mx-lake), #0C2B2A);
}

/* 黒（鮮やかな差し色が映える）：これまでのメキシコ */
.mx-sec--black{
  background:
    radial-gradient(circle at 10% 0%, rgba(232,80,138,.12), transparent 36%),
    radial-gradient(circle at 94% 100%, rgba(46,196,190,.10), transparent 40%),
    var(--mx-black);
}

/* ディープグリーン：初めての海外遠征 */
.mx-sec--green{
  background:
    radial-gradient(circle at 10% 0%, rgba(61,186,106,.16), transparent 38%),
    radial-gradient(circle at 95% 92%, rgba(46,196,190,.10), transparent 40%),
    var(--mx-green);
}

/* 暖色ブラウン×ゴールド：ロッジ・同行スタッフ */
.mx-sec--brown{
  background:
    radial-gradient(circle at 88% 12%, rgba(242,140,40,.14), transparent 42%),
    var(--mx-brown);
}

/* ---- セラーペ柄の帯（区切りの飾り。使う所で ::before に付ける） ---- */
.mx-specs::before,
.mx-midcta::before,
.mx-price::before,
.mx-cta::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 5px;
  background: var(--mx-sarape) 0 0 / 364px 100% repeat-x;
}

/* ---- このページのボタン（太陽の色）。ヘッダーのボタンには影響しない ---- */
.mx-main .staff-button{
  border-color: #FFD98A;
  background: linear-gradient(180deg, #FFD25C 0%, #F28C28 100%);
  box-shadow: 0 10px 24px rgba(242,140,40,.28);
  color: #2B1405;
}

/* セクションの見出しラベル（01 THE FIELD メキシコという釣り場） */
.mx-label{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 26px;
  line-height: 1.4;
}

.mx-label__no{
  color: var(--c-num);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
}

.mx-label__en{
  color: var(--c-num);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
}

.mx-label__ja{
  color: var(--c-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
}

/* ラベルの横線：先頭にセラーペ柄の短い帯 */
.mx-label::after{
  content: "";
  flex: 1 1 60px;
  height: 3px;
  background:
    var(--mx-sarape) left center / 84px 3px no-repeat,
    linear-gradient(90deg, var(--c-line), transparent) left center / 100% 1px no-repeat;
}

/* 大見出し */
.mx-h2{
  color: var(--c-head);
  font-family: var(--font-serif);
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .06em;
}

/* 見出しは文節の切れ目で改行する（対応ブラウザのみ・非対応でも崩れない） */
.mx-h2,
.mx-h3,
.mx-hero__catch,
.mx-why__title,
.mx-ten__title,
.mx-midcta__title,
.mx-day__title,
.mx-cta__title{
  line-break: strict;
  word-break: auto-phrase;
}

/* 中見出し */
.mx-h3{
  color: var(--c-head);
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  letter-spacing: .06em;
}

/* 本文 */
.mx-text p{
  color: var(--c-body);
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: .03em;
}

.mx-text p + p{
  margin-top: 1em;
}

/* 写真の枠（縦横比は各セクションで指定） */
.mx-frame{
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 10px;
  background: #2B2618;
}

.mx-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

figure:hover .mx-frame img{
  transform: scale(1.035);
}

.mx-frame + figcaption{
  margin-top: 9px;
  color: var(--c-body);
  font-size: 12px;
  letter-spacing: .06em;
}

@media (min-width: 768px){
  #mx-past-title{
    white-space: nowrap;
  }

  .mx-label{
    margin-bottom: 20px;
  }

  .mx-label__no{
    font-size: 15px;
  }

  .mx-label__en{
    font-size: 10px;
    letter-spacing: .24em;
  }

  .mx-label__ja{
    font-size: 11.5px;
  }

  .mx-h2{
    font-size: clamp(23px, 6.6vw, 28px);
    letter-spacing: .04em;
  }

  .mx-text p{
    font-size: 14px;
    line-height: 2;
  }
}


/* =========================================================
   2. BREADCRUMB（パンくず）
   ========================================================= */
.mx-breadcrumb{
  margin-top: var(--header-h);
  background: #120F09;
  border-bottom: 1px solid rgba(247,241,227,.08);
}

.mx-breadcrumb ol{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  list-style: none;
  color: rgba(247,241,227,.62);
  font-size: 12.5px;
  letter-spacing: .04em;
}

.mx-breadcrumb li{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* 区切りの「›」は線で描く */
.mx-breadcrumb li + li::before{
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid rgba(214,168,79,.7);
  border-right: 1px solid rgba(214,168,79,.7);
  transform: rotate(45deg);
}

.mx-breadcrumb a{
  color: var(--brass-light);
  transition: color .2s ease;
}

.mx-breadcrumb a:hover{
  color: #E8CF8B;
}

@media (max-width: 767px){
  .mx-breadcrumb ol{
    padding: 9px 0;
    font-size: 11.5px;
  }
}


/* =========================================================
   3. HERO（ヒーロー）
   ▼ 写真の主役の位置はHTMLの style="--pos / --pos-sp" で調整
   ========================================================= */
.mx-hero{
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(620px, calc(100svh - var(--header-h) - 40px), 820px);
  overflow: hidden;
  background: var(--mx-ink);
}

.mx-hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mx-hero__media picture{
  display: block;
  width: 78%;
  height: 100%;

  /* PC：写真そのものの右端を黒背景へ溶かす */
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 68%,
    rgba(0,0,0,.96) 72%,
    rgba(0,0,0,.82) 78%,
    rgba(0,0,0,.58) 85%,
    rgba(0,0,0,.30) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    #000 0%,
    #000 68%,
    rgba(0,0,0,.96) 72%,
    rgba(0,0,0,.82) 78%,
    rgba(0,0,0,.58) 85%,
    rgba(0,0,0,.30) 92%,
    transparent 100%
  );
}

.mx-hero__image{
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 70% 45%);
  background: #2A2014;   /* 写真が無くても枠が保てるように */
  filter: saturate(1.03) contrast(1.04) brightness(.93);
}

/* PC：文字側を少し暗くする。境目のフェード自体は picture の mask で作る */
.mx-hero__shade{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(20,15,8,0) 0%,
      rgba(20,15,8,0) 52%,
      rgba(20,15,8,.16) 62%,
      rgba(20,15,8,.38) 72%,
      rgba(20,15,8,.72) 84%,
      var(--mx-ink) 100%
    ),
    linear-gradient(0deg, rgba(20,15,8,.34), transparent 34%);
}

.mx-hero__inner{
  position: relative;
  z-index: 2;
}

.mx-hero__copy{
  width: min(680px, 48%);
  margin-left: auto;
  padding-block: 64px 72px;
  padding-left: clamp(20px, 2vw, 32px);
  color: #FFF;
  transform: translateX(150px);
}

.mx-hero__eyebrow{
  margin-bottom: 18px;
  color: var(--mx-gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .22em;
}

.mx-hero__title{
  font-weight: 400;
}

/* MEXICO（金のグラデーション文字） */
.mx-hero__en{
  display: block;
  width: fit-content;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(64px, 6.3vw, 100px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .07em;
  color: #F6E2B0;
  background: linear-gradient(180deg, #FFF8E8 0%, #F3DDA8 52%, #D9A650 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.45));
}

.mx-hero__en-sub{
  display: block;
  margin-top: 16px;
  color: var(--mx-gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.3vw, 18px);
  letter-spacing: .46em;
}

.mx-hero__ja{
  display: block;
  width: fit-content;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(235,203,134,.38);
  color: rgba(255,255,255,.94);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: .16em;
  white-space: nowrap;
}

.mx-hero__catch{
  margin-top: 12px;
  color: #FFF;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .08em;
  text-shadow: 0 3px 18px rgba(0,0,0,.55);
}

.mx-hero__date{
  margin-top: 16px;
}

.mx-hero__tags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  list-style: none;
}

.mx-hero__tag{
  display: inline-flex;
  align-items: center;
  min-height: 43px;
  padding: 8px 16px;
  border: 1px solid rgba(235,203,134,.45);
  border-radius: 7px;
  background: rgba(20,15,8,.5);
  color: var(--mx-ivory);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}

.mx-hero__lead{
  max-width: 560px;
  margin-top: 20px;
  color: rgba(255,255,255,.88);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.mx-hero__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}

.mx-hero__actions .staff-button{
  min-width: 260px;
  min-height: 54px;
  font-size: 16px;
}

.mx-hero__more{
  padding-bottom: 3px;
  color: rgba(247,241,227,.85);
  font-size: 14px;
  letter-spacing: .05em;
  border-bottom: 1px solid rgba(235,203,134,.5);
  transition: color .2s ease;
}

.mx-hero__more:hover{
  color: var(--mx-gold-light);
}

/* 21回目の印 */
.mx-seal{
  position: absolute;
  top: clamp(24px, 5vh, 48px);
  left: clamp(24px, 4vw, 64px);
  right: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 146px;
  height: 146px;
  border-radius: 50%;
  /* 中は暗く、外周はメキシコの原色の輪 */
  background:
    radial-gradient(circle closest-side, rgba(28,20,10,.96) 0 82%, rgba(235,203,134,.85) 82.6% 84%, transparent 84.6%),
    conic-gradient(from -30deg, var(--mx-red), var(--mx-orange), var(--mx-yellow), var(--mx-lime), var(--mx-turquoise), var(--mx-blue), var(--mx-pink), var(--mx-red));
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  color: var(--mx-gold-light);
  text-align: center;
  line-height: 1.2;
  transform: rotate(-8deg);
}

.mx-seal__top{
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .06em;
}

.mx-seal__num{
  margin: 2px 0 1px;
  color: #F6DFA6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 54px;
  line-height: 1;
}

.mx-seal__bottom{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

/* タブレット・スマホ：写真を上に全部見せて、文字はその下へ
   （縦長の画面で文字を写真に重ねると、魚が隠れてしまうため） */
@media (max-width: 1023px){
  .mx-hero{
    display: block;
    min-height: 0;
  }

  .mx-hero__ja{
    white-space: normal;
  }

  .mx-hero__media{
    position: relative;
    inset: auto;
  }

  .mx-hero__media picture{
    width: 100%;
    height: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mx-hero__image{
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
  }

  .mx-hero__shade{
    background:
      linear-gradient(0deg, rgba(23,20,13,.28) 0%, rgba(23,20,13,0) 16%);
  }

  .mx-hero__inner{
    margin-top: 0;
    background: var(--mx-ink);
  }

  .mx-hero__copy{
    width: 100%;
    margin-left: 0;
    padding: 34px 0 48px;
    transform: none;
  }

  .mx-seal{
    top: 16px;
    left: auto;
    right: 16px;
    width: 112px;
    height: 112px;
  }

  .mx-seal__num{
    font-size: 40px;
  }
}

@media (max-width: 767px){
  .mx-hero__image{
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: var(--pos-sp, 50% 50%);
  }

  .mx-hero__copy{
    padding-top: 30px;
    padding-bottom: 44px;
  }

  .mx-hero__eyebrow{
    margin-bottom: 12px;
    font-size: 10px;
    letter-spacing: .16em;
  }

  .mx-hero__en{
    font-size: min(18vw, 82px);
    letter-spacing: .06em;
  }

  .mx-hero__en-sub{
    margin-top: 12px;
    font-size: 11.5px;
    letter-spacing: .34em;
  }

  .mx-hero__ja{
    margin-top: 18px;
    padding-top: 14px;
    font-size: 15.5px;
    letter-spacing: .12em;
  }

  .mx-hero__catch{
    font-size: clamp(21px, 6.2vw, 26px);
    letter-spacing: .05em;
  }

  .mx-hero__tags{
    gap: 8px;
  }

  .mx-hero__tag{
    min-height: 40px;
    padding: 6px 12px;
    font-size: 12.5px;
  }

  .mx-hero__lead{
    font-size: 13.5px;
    line-height: 1.95;
  }

  .mx-hero__lead br{
    display: none;
  }

  .mx-hero__actions{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 24px;
  }

  .mx-hero__actions .staff-button{
    min-width: 0;
  }

  .mx-hero__more{
    align-self: center;
  }

  .mx-seal{
    top: 12px;
    right: 12px;
    width: 86px;
    height: 86px;
  }

  .mx-seal__num{
    font-size: 30px;
  }

  .mx-seal__top,
  .mx-seal__bottom{
    font-size: 8px;
  }
}


/* =========================================================
   4. SPECS（釣行データ帯）
   ▼ 上端にセラーペ柄の帯（1. PAGE で指定）。項目名は1つずつ色を変える
   ========================================================= */
.mx-specs{
  position: relative;
  padding-top: 5px;
  background: linear-gradient(90deg, #1E1810, #2A2014 50%, #1E1810);
  border-bottom: 1px solid rgba(214,168,79,.14);
}

.mx-specs__grid{
  display: grid;
  grid-template-columns: repeat(6, auto);
}

.mx-specs__item{
  padding: 18px 16px 17px;
}

.mx-specs__item:nth-child(1){ --k: var(--mx-red); }
.mx-specs__item:nth-child(2){ --k: var(--mx-orange); }
.mx-specs__item:nth-child(3){ --k: var(--mx-yellow); }
.mx-specs__item:nth-child(4){ --k: var(--mx-lime); }
.mx-specs__item:nth-child(5){ --k: var(--mx-turquoise); }
.mx-specs__item:nth-child(6){ --k: var(--mx-pink); }

.mx-specs__item + .mx-specs__item{
  border-left: 1px solid rgba(247,241,227,.09);
}

.mx-specs__item:first-child{
  padding-left: 0;
}

.mx-specs__item dt{
  margin-bottom: 4px;
  color: var(--k, var(--mx-gold));
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
}

.mx-specs__item dd{
  color: rgba(247,241,227,.94);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: .02em;
}

@media (max-width: 1023px){
  .mx-specs__grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  .mx-specs__item:nth-child(3n+1){
    padding-left: 0;
    border-left: 0;
  }

  .mx-specs__item:nth-child(n+4){
    border-top: 1px solid rgba(247,241,227,.09);
  }
}

@media (max-width: 767px){
  .mx-specs__grid{
    grid-template-columns: 1fr;
    padding-block: 6px;
  }

  .mx-specs__item,
  .mx-specs__item:nth-child(3n+1){
    display: grid;
    grid-template-columns: 64px minmax(0,1fr);
    gap: 10px;
    align-items: baseline;
    padding: 9px 0;
    border-left: 0;
  }

  .mx-specs__item + .mx-specs__item{
    border-top: 1px solid rgba(247,241,227,.09);
    border-left: 0;
  }

  .mx-specs__item dt{
    margin-bottom: 0;
    font-size: 9.5px;
    letter-spacing: .2em;
  }

  .mx-specs__item dd{
    font-size: 13px;
  }
}


/* =========================================================
   5. INTRO（01 メキシコという釣り場）
   ========================================================= */
.mx-intro{
  --c-num: var(--mx-turquoise);
}

.mx-intro__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.mx-intro .mx-text{
  margin-top: 26px;
}

.mx-video{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(46,196,190,.45);
  border-radius: 12px;
  background: #000;
  box-shadow:
    0 24px 54px rgba(0,0,0,.4),
    0 0 40px rgba(46,196,190,.14);
}

.mx-video iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mx-video__caption{
  margin-top: 10px;
  color: var(--c-body);
  font-size: 12.5px;
  letter-spacing: .05em;
}

/* 数字の帯 */
.mx-stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top: clamp(48px, 6vw, 80px);
  list-style: none;
  border-top: 1px solid var(--c-line);
}

.mx-stats__item{
  padding: 26px 20px 2px;
}

.mx-stats__item + .mx-stats__item{
  border-left: 1px solid var(--c-line);
}

.mx-stats__item:first-child{
  padding-left: 0;
}

.mx-stats__fig{
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.mx-stats__item:nth-child(1){ --k: var(--mx-yellow); }
.mx-stats__item:nth-child(2){ --k: var(--mx-turquoise); }
.mx-stats__item:nth-child(3){ --k: var(--mx-orange); }
.mx-stats__item:nth-child(4){ --k: var(--mx-pink); }

.mx-stats__num{
  color: var(--k, var(--mx-gold));
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 5.4vw, 74px);
  line-height: 1;
  letter-spacing: .01em;
}

.mx-stats__unit{
  color: var(--c-head);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}

.mx-stats__text{
  margin-top: 10px;
  color: var(--c-body);
  font-size: 13px;
  line-height: 1.7;
}

@media (max-width: 767px){
  .mx-intro__grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mx-intro .mx-text{
    margin-top: 20px;
  }

  .mx-stats{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .mx-stats__item{
    padding: 20px 14px 18px;
  }

  .mx-stats__item:nth-child(odd){
    padding-left: 0;
    border-left: 0;
  }

  .mx-stats__item:nth-child(n+3){
    border-top: 1px solid var(--c-line);
  }

  .mx-stats__num{
    font-size: 46px;
  }

  .mx-stats__text{
    font-size: 12px;
  }
}


/* =========================================================
   6. WHY（02 なぜメキシコなのか）
   ▼ アイボリーの地に、カードごとに違う原色の帯
     PCではカードを互い違いにずらして動きを出す
   ========================================================= */
.mx-why{
  --c-num: var(--mx-orange-d);
}

.mx-why .mx-h2{
  margin-bottom: clamp(30px, 4vw, 48px);
}

.mx-why__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
}

.mx-why__card:nth-child(1){ --k: var(--mx-orange);    --k-d: var(--mx-orange-d); }
.mx-why__card:nth-child(2){ --k: var(--mx-turquoise); --k-d: var(--mx-turquoise-d); }
.mx-why__card:nth-child(3){ --k: var(--mx-lime);      --k-d: var(--mx-lime-d); }
.mx-why__card:nth-child(4){ --k: var(--mx-yellow);    --k-d: var(--mx-yellow-d); }

/* 右列を下げて互い違いに */
.mx-why__card:nth-child(even){
  margin-top: 64px;
}

.mx-why__card{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mx-line);
  border-radius: 12px;
  background: var(--mx-card);
  box-shadow: 0 18px 40px rgba(70,46,18,.12);
}

/* カード上端の原色の帯 */
.mx-why__card::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: 5px;
  background: var(--k);
}

.mx-why__media{
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #E4D6BA;
}

.mx-why__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.mx-why__card:hover .mx-why__media img{
  transform: scale(1.04);
}

.mx-why__body{
  padding: 24px 28px 28px;
}

.mx-why__kicker{
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--k-d);
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
}

.mx-why__kicker span{
  color: var(--k-d);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

.mx-why__title{
  margin-top: 10px;
  color: var(--olive-dark);
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .05em;
}

.mx-why__text{
  margin-top: 12px;
  color: var(--mx-text-sub);
  font-size: 14px;
  line-height: 2;
}

@media (max-width: 767px){
  .mx-why__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .mx-why__card:nth-child(even){
    margin-top: 0;
  }

  .mx-why__media{
    aspect-ratio: 16 / 10;
  }

  .mx-why__body{
    padding: 20px 20px 22px;
  }

  .mx-why__title{
    font-size: 19px;
  }

  .mx-why__text{
    font-size: 13.5px;
  }
}


/* =========================================================
   7. TEN POUNDER（03 夢のテンパウンダー）
   ========================================================= */
.mx-ten{
  --c-num: var(--mx-yellow);
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 9vw, 128px) 0;
  background:
    radial-gradient(ellipse 70% 90% at 100% 50%, rgba(242,140,40,.24), transparent 60%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(232,80,138,.14), transparent 60%),
    linear-gradient(120deg, #17130B 0%, #221A0F 55%, #2E1F10 100%);
}

.mx-ten__grid{
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
}

.mx-ten__num{
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 6px;
  line-height: .8;
}

.mx-ten__digits{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(150px, 19vw, 270px);
  line-height: .78;
  letter-spacing: -.02em;
  color: var(--mx-yellow);
  /* 夕陽のグラデーション */
  background: linear-gradient(180deg, #FFEBA8 0%, var(--mx-yellow) 38%, var(--mx-orange) 70%, var(--mx-red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mx-ten__unit{
  padding-bottom: .12em;
  color: var(--mx-orange);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(34px, 3.6vw, 52px);
}

.mx-ten__kg{
  padding-bottom: .9em;
  color: rgba(247,241,227,.6);
  font-family: Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .2em;
}

.mx-ten__title{
  margin-top: 26px;
  color: #FFF;
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .06em;
}

.mx-ten .mx-text{
  max-width: 34em;
  margin-top: 22px;
}

.mx-ten__media{
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(246,195,67,.5);
  border-radius: 12px;
  background: #2C2114;
  box-shadow:
    14px 14px 0 -1px rgba(242,140,40,.85),
    0 28px 60px rgba(0,0,0,.45);
}

.mx-ten__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mx-ten__photo figcaption{
  margin-top: 10px;
  color: rgba(247,241,227,.55);
  font-size: 12px;
  letter-spacing: .06em;
}

@media (max-width: 767px){
  .mx-ten{
    padding: 60px 0;
  }

  .mx-ten__grid{
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .mx-ten__digits{
    font-size: 40vw;
  }

  .mx-ten__unit{
    font-size: 34px;
  }

  .mx-ten__title{
    margin-top: 20px;
    font-size: clamp(26px, 7.4vw, 31px);
  }

  .mx-ten__photo{
    width: min(100%, 420px);
    margin-inline: auto;
  }
}


/* =========================================================
   8. PAST TOURS（04 これまでのメキシコ）
   ▼ 写真の並び：大1枚（feature）＋小4枚＋横長1枚（wide）＋小2枚
   ========================================================= */
.mx-past{
  --c-num: var(--mx-pink);
}

.mx-past__head{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr);
  gap: 20px clamp(24px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(30px, 4vw, 48px);
}

@media (min-width: 768px){
  #mx-past-title{
    white-space: nowrap;
    font-size: 40px;
  }
}

.mx-past__lead{
  color: var(--c-body);
  font-size: 15px;
  line-height: 2.05;
}

.mx-past__mosaic{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-rows: clamp(150px, 17vw, 215px);
  gap: 10px;
}

.mx-past__item{
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #1D1B16;
}

/* 写真ごとの差し色（キャプション頭の小さな帯） */
.mx-past__item:nth-child(7n+1){ --k: var(--mx-red); }
.mx-past__item:nth-child(7n+2){ --k: var(--mx-orange); }
.mx-past__item:nth-child(7n+3){ --k: var(--mx-yellow); }
.mx-past__item:nth-child(7n+4){ --k: var(--mx-lime); }
.mx-past__item:nth-child(7n+5){ --k: var(--mx-turquoise); }
.mx-past__item:nth-child(7n+6){ --k: var(--mx-blue); }
.mx-past__item:nth-child(7n+7){ --k: var(--mx-pink); }

.mx-past__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}

.mx-past__item:hover img{
  transform: scale(1.04);
}

.mx-past__item--feature{
  grid-column: span 2;
  grid-row: span 2;
}

.mx-past__item--wide{
  grid-column: span 2;
}

.mx-past__item figcaption{
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 14px 10px;
  color: #FFF;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  background: linear-gradient(0deg, rgba(10,9,7,.78), transparent);
}

.mx-past__item figcaption::before{
  content: "";
  display: inline-block;
  width: 18px;
  height: 4px;
  margin-right: 9px;
  border-radius: 2px;
  background: var(--k);
  vertical-align: middle;
}

.mx-past__item--feature figcaption{
  padding: 40px 18px 14px;
  font-size: 14px;
}

.mx-past__note{
  margin-top: 14px;
  color: var(--c-body);
  font-size: 12px;
  text-align: right;
}

@media (max-width: 767px){
  .mx-past__head{
    grid-template-columns: 1fr;
  }

  .mx-past__lead{
    font-size: 14px;
  }

  .mx-past__mosaic{
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-rows: 36vw;
    gap: 8px;
  }

  .mx-past__item figcaption{
    padding: 24px 10px 8px;
    font-size: 11px;
  }

  .mx-past__note{
    text-align: left;
  }
}


/* =========================================================
   9. MID CTA（ページ途中の問い合わせ）
   ▼ 暗いセクションが続く中で、湖の青〜緑の帯で空気を変える
   ========================================================= */
.mx-midcta{
  position: relative;
  padding: clamp(44px, 5vw, 60px) 0 clamp(40px, 5vw, 56px);
  background:
    radial-gradient(ellipse 60% 140% at 100% 50%, rgba(246,195,67,.22), transparent 60%),
    linear-gradient(100deg, #0E4F6E 0%, #0B6F6B 55%, #1C6B3E 100%);
}

.mx-midcta__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

.mx-midcta__eyebrow{
  color: rgba(255,255,255,.82);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: .22em;
}

.mx-midcta__title{
  margin-top: 8px;
  color: #FFF;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .06em;
  text-shadow: 0 2px 14px rgba(0,0,0,.25);
}

.mx-midcta__sub{
  margin-top: 6px;
  color: rgba(255,255,255,.86);
  font-size: 13.5px;
  letter-spacing: .04em;
}

.mx-midcta__button{
  min-width: 290px;
  min-height: 56px;
  font-size: 16px;
}

@media (max-width: 767px){
  .mx-midcta__inner{
    display: block;
    text-align: center;
  }

  .mx-midcta__title{
    font-size: 24px;
  }

  .mx-midcta__sub{
    font-size: 12.5px;
  }

  .mx-midcta__button{
    margin-top: 22px;
    min-width: 0;
  }
}


/* =========================================================
   10. DAY（05 一日の流れ）
   ▼ 夜明け（ターコイズ）→ 昼（黄）→ 夕陽（橙・ピンク）の色で一日を表す
   ========================================================= */
.mx-day{
  --c-num: var(--mx-orange);
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(229,96,58,.22), transparent 70%),
    linear-gradient(180deg, #0D2530 0%, #15201F 34%, #241C12 70%, #3A1D17 100%);
}

/* 上部だけ夕景写真を背景にする。
   写真右側のアングラーを残し、左側に見出しと本文を置く */
.mx-day__visual{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(330px, 36vw, 500px);
  margin-top: 8px;
  padding: clamp(34px, 5vw, 64px);
  overflow: hidden;
  border: 1px solid rgba(247,241,227,.10);
  border-radius: 14px;
  background:
    linear-gradient(90deg,
      rgba(10,25,30,.92) 0%,
      rgba(10,25,30,.82) 34%,
      rgba(10,25,30,.52) 54%,
      rgba(10,25,30,.14) 78%,
      rgba(10,25,30,.02) 100%),
    linear-gradient(0deg,
      rgba(13,37,48,.92) 0%,
      rgba(13,37,48,.20) 44%,
      rgba(13,37,48,0) 72%),
    url("../images/mexico-sunset-01.jpg") center 52% / cover no-repeat;
  box-shadow: 0 24px 54px rgba(0,0,0,.28);
}

.mx-day__head{
  position: relative;
  z-index: 1;
  width: min(720px, 66%);
}

.mx-day__title{
  color: #FFF;
  font-family: var(--font-serif);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-shadow: 0 4px 20px rgba(0,0,0,.48);
}

.mx-day__lead{
  max-width: 720px;
  margin-top: 18px;
  color: rgba(247,241,227,.92);
  font-size: 15px;
  line-height: 2;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

.mx-day__lead p + p{
  margin-top: .8em;
}

/* 太陽の軌道とステップ（PC） */
.mx-day__track{
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 150px;
}

.mx-day__arc{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  overflow: visible;
}

.mx-day__path{
  fill: none;
  stroke: url(#mx-arc-grad);
  stroke-width: 2;
  stroke-dasharray: 3 7;
  vector-effect: non-scaling-stroke;
}

.mx-day__stop--dawn{ stop-color: var(--mx-dawn); }
.mx-day__stop--noon{ stop-color: var(--mx-sun); }
.mx-day__stop--dusk{ stop-color: var(--mx-dusk); }

.mx-day__sun{
  position: absolute;
  top: 14px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF1B8 0%, var(--mx-sun) 48%, var(--mx-orange) 100%);
  box-shadow:
    0 0 0 8px rgba(246,195,67,.16),
    0 0 44px 12px rgba(246,195,67,.34);
}

.mx-day__steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 0 14px;
  list-style: none;
}

/* 地平線 */
.mx-day__steps::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--mx-dawn), var(--mx-sun) 50%, var(--mx-dusk));
  opacity: .7;
}

.mx-day__step{
  position: relative;
  text-align: center;
}

/* 時間帯ごとの色（点と時刻） */
.mx-day__step:nth-child(1){ --k: var(--mx-dawn); }
.mx-day__step:nth-child(2){ --k: var(--mx-turquoise); }
.mx-day__step:nth-child(3){ --k: var(--mx-lime); }
.mx-day__step:nth-child(4){ --k: var(--mx-sun); }
.mx-day__step:nth-child(5){ --k: var(--mx-yellow); }
.mx-day__step:nth-child(6){ --k: var(--mx-orange); }
.mx-day__step:nth-child(7){ --k: var(--mx-pink); }

/* 地平線上の点 */
.mx-day__step::before{
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  margin: -7px auto 18px;
  border: 2px solid var(--k, var(--mx-gold-light));
  border-radius: 50%;
  background: #1B1A14;
  box-shadow: 0 0 0 5px rgba(247,241,227,.07);
}

/* 昼の点は塗りつぶして太陽に */
.mx-day__step--noon::before{
  background: var(--mx-sun);
  box-shadow:
    0 0 0 6px rgba(246,195,67,.18),
    0 0 18px rgba(246,195,67,.5);
}

.mx-day__time{
  color: var(--k, var(--mx-gold-light));
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
}

.mx-day__name{
  margin-top: 6px;
  color: #FFF;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .06em;
}

.mx-day__text{
  margin-top: 8px;
  color: var(--mx-ivory-sub);
  font-size: 12.5px;
  line-height: 1.85;
}


.mx-day__note{
  margin-top: 18px;
  color: rgba(247,241,227,.5);
  font-size: 12px;
  text-align: center;
}

/* タブレット・スマホ：縦のタイムラインに切り替え */
@media (max-width: 1023px){
  .mx-day__track{
    padding-top: 0;
  }

  .mx-day__arc,
  .mx-day__sun{
    display: none;
  }

  .mx-day__steps{
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 36px;
  }

  .mx-day__steps::before{
    top: 8px;
    bottom: 8px;
    left: 9px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--mx-dawn), var(--mx-sun) 50%, var(--mx-pink));
    opacity: 1;
  }

  .mx-day__step{
    padding-bottom: 24px;
    text-align: left;
  }

  .mx-day__step:last-child{
    padding-bottom: 0;
  }

  .mx-day__step::before{
    position: absolute;
    top: 5px;
    left: -33px;
    margin: 0;
  }

  .mx-day__time{
    display: inline-block;
    min-width: 5.5em;
  }

  .mx-day__name{
    display: inline-block;
    margin-top: 0;
  }

  .mx-day__text{
    margin-top: 4px;
    font-size: 13.5px;
  }
}

@media (max-width: 767px){
  .mx-day__visual{
    min-height: 430px;
    padding: 28px 22px;
    background:
      linear-gradient(90deg,
        rgba(10,25,30,.90) 0%,
        rgba(10,25,30,.70) 48%,
        rgba(10,25,30,.20) 78%,
        rgba(10,25,30,.04) 100%),
      linear-gradient(0deg,
        rgba(13,37,48,.94) 0%,
        rgba(13,37,48,.28) 48%,
        rgba(13,37,48,0) 76%),
      url("../images/mexico-sunset-01.jpg") 66% center / cover no-repeat;
  }

  .mx-day__head{
    width: 100%;
  }

  .mx-day__title{
    font-size: clamp(28px, 8.4vw, 36px);
    letter-spacing: .04em;
  }

  .mx-day__lead{
    max-width: 92%;
    font-size: 14px;
  }

  .mx-day__lead br{
    display: none;
  }

  .mx-day__track{
    margin-top: 34px;
  }

  .mx-day__name{
    font-size: 17px;
  }
}




/* =========================================================
   11. LODGE（06 拠点となるロッジ）
   ========================================================= */
.mx-lodge{
  --c-num: var(--mx-gold);
}

.mx-lodge__grid{
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
}

.mx-lodge__main .mx-frame{
  aspect-ratio: 3 / 2;
  border-color: rgba(235,203,134,.35);
  box-shadow: 0 24px 54px rgba(0,0,0,.4);
}

.mx-lodge__copy .mx-text{
  margin-top: 22px;
}

/* ロッジの基本情報 */
.mx-facts{
  margin-top: 26px;
}

.mx-facts > div{
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  gap: 16px;
  align-items: baseline;
  padding: 13px 2px;
  border-top: 1px solid var(--c-line);
}

.mx-facts > div:last-child{
  border-bottom: 1px solid var(--c-line);
}

.mx-facts dt{
  color: var(--c-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
}

.mx-facts dd{
  color: rgba(247,241,227,.92);
  font-size: 14px;
  line-height: 1.75;
}

.mx-lodge__row{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(28px, 4vw, 44px);
}

.mx-lodge__row .mx-frame{
  aspect-ratio: 4 / 3;
}

@media (max-width: 767px){
  .mx-lodge__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .mx-facts > div{
    grid-template-columns: 70px minmax(0,1fr);
    gap: 12px;
    padding: 12px 2px;
  }

  .mx-facts dd{
    font-size: 13.5px;
  }

  /* 1枚目を大きく、残り2枚を横並び */
  .mx-lodge__row{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
  }

  .mx-lodge__row figure:first-child{
    grid-column: 1 / -1;
  }
}


/* =========================================================
   12. TOUR（07 参考旅行情報・日程表・見積り内容）
   ========================================================= */
.mx-tour{
  --c-num: var(--mx-lime-d);
}

.mx-tour__head{
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr);
  gap: 20px 60px;
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 44px);
}

.mx-tour__lead{
  color: var(--c-body);
  font-size: 15px;
  line-height: 2;
}

/* 概要カード */
.mx-keyfacts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}

.mx-keyfacts__item{
  padding: 18px 18px 16px;
  border: 1px solid var(--mx-line);
  border-top: 4px solid var(--k);
  border-radius: 10px;
  background: var(--mx-card);
}

.mx-keyfacts__item:nth-child(4n+1){ --k: var(--mx-orange);    --k-d: var(--mx-orange-d); }
.mx-keyfacts__item:nth-child(4n+2){ --k: var(--mx-lime);      --k-d: var(--mx-lime-d); }
.mx-keyfacts__item:nth-child(4n+3){ --k: var(--mx-turquoise); --k-d: var(--mx-turquoise-d); }
.mx-keyfacts__item:nth-child(4n+4){ --k: var(--mx-pink);      --k-d: var(--mx-pink-d); }

.mx-keyfacts dt{
  color: var(--k-d);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
}

.mx-keyfacts dd{
  margin-top: 6px;
  color: var(--olive-dark);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.mx-keyfacts dd small{
  display: block;
  margin-top: 4px;
  color: var(--mx-text-sub);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
}

/* 日程表 */
.mx-sched-wrap{
  margin-top: clamp(44px, 5vw, 64px);
}

.mx-sched__caption{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.mx-sched__caption p{
  color: var(--c-body);
  font-size: 12.5px;
}

.mx-sched__labels{
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) 110px;
  gap: 24px;
  padding: 11px 22px;
  border-radius: 10px 10px 0 0;
  background:
    var(--mx-sarape) left bottom / 364px 4px repeat-x,
    var(--olive-dark);
  color: rgba(247,241,227,.86);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.mx-sched{
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--mx-line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: var(--mx-card);
}

.mx-sched__day{
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) 110px;
  gap: 24px;
  padding: 20px 22px;
  border-top: 1px solid var(--mx-line);
}

.mx-sched__day:first-child{
  border-top: 0;
}

.mx-sched__when{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mx-sched__no{
  color: var(--mx-blue-d);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  line-height: 1;
}

.mx-sched__no span{
  margin-right: 6px;
  color: var(--mx-earth);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  vertical-align: middle;
}

.mx-sched__date{
  color: var(--olive-dark);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
}

.mx-sched__date span{
  font-size: 13px;
}

.mx-sched__title{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: var(--olive-dark);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
}

.mx-sched__chip{
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--mx-lime-d);
  color: #FFF;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
}

.mx-sched__route{
  margin-top: 10px;
  list-style: none;
}

.mx-sched__route li{
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  gap: 10px;
  padding: 3px 0;
  color: var(--mx-text);
  font-size: 14px;
  line-height: 1.7;
}

.mx-sched__time{
  color: var(--mx-blue-d);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 便名 */
.mx-sched__route b{
  display: inline-block;
  padding: 0 6px;
  border: 1px solid rgba(15,94,138,.35);
  border-radius: 4px;
  color: var(--mx-blue-d);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

.mx-sched__desc{
  margin-top: 8px;
  color: var(--mx-text-sub);
  font-size: 14px;
  line-height: 1.85;
}

.mx-sched__stay{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--mx-lime-d);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.mx-sched__stay::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.mx-sched__meal{
  color: var(--olive-dark);
  font-size: 14px;
  font-weight: 600;
}

.mx-sched__meallabel{
  display: none;
}

/* 釣りの日 */
.mx-sched__day--fish{
  background: linear-gradient(90deg, rgba(61,186,106,.12), transparent 60%);
  box-shadow: inset 5px 0 0 var(--mx-lime);
}

.mx-sched__day--fish .mx-sched__no{
  color: var(--mx-lime-d);
}

/* 見積り内容 */
.mx-terms{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
  margin-top: clamp(40px, 4.5vw, 56px);
}

.mx-terms__col{
  padding: 24px 26px 22px;
  border-radius: 10px;
}

.mx-terms__col--in{
  border: 1px solid rgba(28,122,67,.38);
  border-top: 4px solid var(--mx-lime);
  background: var(--mx-card);
}

.mx-terms__col--out{
  border: 1px solid var(--mx-line);
  background: rgba(233,221,196,.45);
}

.mx-terms__title{
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mx-line);
  color: var(--olive-dark);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .06em;
}

.mx-terms__list{
  list-style: none;
}

.mx-terms__list li{
  position: relative;
  padding-left: 24px;
  color: var(--mx-text);
  font-size: 14px;
  line-height: 1.8;
}

.mx-terms__list li + li{
  margin-top: 6px;
}

/* 含まれるもの：チェックの線 */
.mx-terms__col--in .mx-terms__list li::before{
  content: "";
  position: absolute;
  top: .5em;
  left: 3px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--mx-lime-d);
  border-left: 2px solid var(--mx-lime-d);
  transform: rotate(-45deg);
}

/* 含まれないもの：横線 */
.mx-terms__col--out .mx-terms__list li::before{
  content: "";
  position: absolute;
  top: .9em;
  left: 2px;
  width: 12px;
  height: 2px;
  background: rgba(42,36,23,.4);
}

.mx-terms__note{
  margin-top: 12px;
  color: var(--c-body);
  font-size: 12.5px;
}

/* 旅行代金（金額は出さず、問い合わせへ） */
.mx-price{
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: clamp(40px, 4.5vw, 56px) auto 0;
  padding: 34px 28px 32px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0%, rgba(214,168,79,.2), transparent 60%),
    var(--olive-dark);
  box-shadow: 0 18px 40px rgba(34,39,29,.22);
  color: var(--mx-ivory);
  text-align: center;
}

.mx-price__title{
  color: var(--mx-yellow);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .08em;
}

.mx-price__text{
  margin-top: 10px;
  color: var(--mx-ivory-sub);
  font-size: 14px;
  line-height: 2;
}

.mx-price .staff-button{
  min-width: 290px;
  margin-top: 20px;
}

.mx-tour__note{
  margin-top: 20px;
  color: var(--c-body);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1023px){
  .mx-keyfacts{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .mx-sched__labels,
  .mx-sched__day{
    grid-template-columns: 120px minmax(0,1fr) 96px;
    gap: 18px;
  }
}

@media (max-width: 767px){
  .mx-tour__head{
    grid-template-columns: 1fr;
  }

  .mx-tour__lead{
    font-size: 14px;
  }

  /* 概要：1列の表に */
  .mx-keyfacts{
    grid-template-columns: 1fr;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--mx-line);
    border-radius: 10px;
    background: var(--mx-card);
  }

  .mx-keyfacts__item{
    display: grid;
    grid-template-columns: 96px minmax(0,1fr);
    gap: 12px;
    padding: 13px 14px;
    border: 0;
    border-left: 4px solid var(--k);
    border-radius: 0;
    background: none;
  }

  .mx-keyfacts__item + .mx-keyfacts__item{
    border-top: 1px solid var(--mx-line);
  }

  .mx-keyfacts dt{
    padding-top: 3px;
    font-size: 11.5px;
    letter-spacing: .06em;
  }

  .mx-keyfacts dd{
    margin-top: 0;
    font-size: 15px;
  }

  .mx-keyfacts dd small{
    font-size: 12px;
  }

  /* 日程表：1日ずつ縦に読むカード */
  .mx-sched__labels{
    display: none;
  }

  .mx-sched{
    border-top: 1px solid var(--mx-line);
    border-radius: 10px;
  }

  .mx-sched__day{
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 16px;
  }

  .mx-sched__when{
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }

  .mx-sched__no{
    font-size: 24px;
  }

  .mx-sched__title{
    font-size: 16px;
  }

  .mx-sched__route{
    margin-top: 6px;
  }

  .mx-sched__route li{
    grid-template-columns: 46px minmax(0,1fr);
    gap: 8px;
    font-size: 13.5px;
  }

  .mx-sched__desc{
    font-size: 13.5px;
  }

  .mx-sched__meal{
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--mx-line);
    font-size: 13px;
  }

  .mx-sched__meallabel{
    display: inline;
    color: var(--mx-earth);
    font-weight: 700;
  }

  .mx-terms{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mx-terms__col{
    padding: 20px 18px 18px;
  }

  .mx-terms__list li{
    font-size: 13.5px;
  }

  .mx-price{
    padding: 26px 18px 24px;
  }

  .mx-price__text{
    font-size: 13.5px;
  }

  .mx-price__text br{
    display: none;
  }

  .mx-price .staff-button{
    min-width: 0;
  }

  .mx-tour__note{
    text-align: left;
  }
}


/* =========================================================
   13. FIRST（08 初めての海外遠征でも）
   ========================================================= */
.mx-first{
  --c-num: var(--mx-turquoise);
}

.mx-first__head{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 20px 60px;
  align-items: end;
}

.mx-first__lead{
  color: var(--c-body);
  font-size: 15px;
  line-height: 2.05;
}

/* ルート（成田 → メキシコシティ → ロスモチス → レイクバカラック） */
.mx-route{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: clamp(44px, 5vw, 64px);
  list-style: none;
}

/* 地点をつなぐ点線 */
.mx-route::before{
  content: "";
  position: absolute;
  top: 23px;
  right: 12.5%;
  left: 12.5%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(235,203,134,.7) 0 8px, transparent 8px 16px);
}

.mx-route__stop{
  position: relative;
  padding: 0 6px;
  text-align: center;
}

/* 地点ごとの色（成田＝赤 → メキシコシティ＝ピンク → ロスモチス＝橙 → 湖＝黄） */
.mx-route__stop:nth-child(1){ --k: var(--mx-red); }
.mx-route__stop:nth-child(2){ --k: var(--mx-pink); }
.mx-route__stop:nth-child(3){ --k: var(--mx-orange); }
.mx-route__stop:nth-child(4){ --k: var(--mx-yellow); }

.mx-route__no{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border: 2px solid var(--k, var(--mx-gold-light));
  border-radius: 50%;
  background: var(--mx-green);
  box-shadow: 0 0 0 6px var(--mx-green);
  color: var(--k, var(--mx-gold-light));
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 17px;
}

.mx-route__stop--goal .mx-route__no{
  background: var(--k);
  color: #2B1405;
}

.mx-route__place{
  color: #FFF;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .06em;
}

.mx-route__place span{
  display: block;
  margin-top: 4px;
  color: var(--k, var(--mx-gold));
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
}

.mx-route__text{
  margin-top: 12px;
  color: var(--mx-ivory-sub);
  font-size: 13px;
  line-height: 1.9;
  text-align: left;
}

/* 安心ポイント */
.mx-first__points{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: clamp(40px, 4.5vw, 56px);
  list-style: none;
}

.mx-first__point{
  padding: 20px 20px 18px;
  border: 1px solid rgba(247,241,227,.12);
  border-top: 4px solid var(--k);
  border-radius: 10px;
  background: rgba(5,16,11,.4);
}

.mx-first__point:nth-child(1){ --k: var(--mx-turquoise); }
.mx-first__point:nth-child(2){ --k: var(--mx-lime); }
.mx-first__point:nth-child(3){ --k: var(--mx-yellow); }
.mx-first__point:nth-child(4){ --k: var(--mx-pink); }

.mx-first__point h3{
  color: var(--k);
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: .06em;
}

.mx-first__point p{
  margin-top: 8px;
  color: var(--mx-ivory-sub);
  font-size: 13px;
  line-height: 1.85;
}

.mx-first__photos{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(40px, 4.5vw, 56px);
}

.mx-first__photos .mx-frame{
  aspect-ratio: 4 / 3;
}

@media (max-width: 1023px){
  .mx-first__points{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 767px){
  .mx-first__head{
    grid-template-columns: 1fr;
  }

  .mx-first__lead{
    font-size: 14px;
  }

  /* ルートを縦に */
  .mx-route{
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 36px;
  }

  .mx-route::before{
    display: none;
  }

  .mx-route__stop:not(:last-child)::after{
    content: "";
    position: absolute;
    top: 54px;
    bottom: 6px;
    left: 23px;
    width: 2px;
    background: repeating-linear-gradient(180deg, rgba(235,203,134,.7) 0 8px, transparent 8px 16px);
  }

  .mx-route__stop{
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    column-gap: 16px;
    padding: 0 0 24px;
    text-align: left;
  }

  .mx-route__no{
    grid-row: span 2;
    margin: 0;
  }

  .mx-route__place{
    align-self: center;
    font-size: 17px;
  }

  .mx-route__text{
    grid-column: 2;
    margin-top: 6px;
    font-size: 13.5px;
  }

  .mx-first__points{
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 30px;
  }

  .mx-first__photos{
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
}


/* =========================================================
   14. TACKLE（09 タックルと持ち物）
   ========================================================= */
.mx-tackle{
  --c-num: var(--mx-red-d);
}

.mx-tackle__grid{
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.mx-tackle__lead{
  margin-top: 20px;
  color: var(--c-body);
  font-size: 15px;
  line-height: 2;
}

.mx-tackle__specs{
  margin-top: 26px;
}

.mx-tackle__specs > div{
  display: grid;
  grid-template-columns: 118px minmax(0,1fr);
  gap: 16px;
  align-items: baseline;
  padding: 14px 2px;
  border-top: 1px solid var(--c-line);
}

.mx-tackle__specs > div:last-child{
  border-bottom: 1px solid var(--c-line);
}

.mx-tackle__specs dt{
  color: var(--mx-earth);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.mx-tackle__specs dd{
  color: var(--mx-text);
  font-size: 14.5px;
  line-height: 1.8;
}

.mx-tackle__side .mx-frame{
  aspect-ratio: 16 / 10;
}

/* 持って行くと便利なもの */
.mx-bring{
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--mx-line);
  border-radius: 10px;
  background: var(--mx-card);
}

.mx-bring__title{
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mx-line);
  color: var(--olive-dark);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .05em;
}

.mx-bring__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 6px 16px;
  margin-top: 12px;
  list-style: none;
}

.mx-bring__list li{
  position: relative;
  padding-left: 16px;
  color: var(--mx-text);
  font-size: 13.5px;
  line-height: 1.7;
}

.mx-bring__list li::before{
  content: "";
  position: absolute;
  top: .62em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--k);
}

.mx-bring__list li:nth-child(5n+1){ --k: var(--mx-red); }
.mx-bring__list li:nth-child(5n+2){ --k: var(--mx-orange); }
.mx-bring__list li:nth-child(5n+3){ --k: var(--mx-lime); }
.mx-bring__list li:nth-child(5n+4){ --k: var(--mx-turquoise); }
.mx-bring__list li:nth-child(5n+5){ --k: var(--mx-pink); }

/* 2月の気候（FIELD NOTE） */
.mx-note-box{
  margin-top: clamp(40px, 4.5vw, 56px);
  padding: 24px 28px 20px;
  border: 1px solid rgba(11,122,118,.3);
  border-left: 5px solid var(--mx-turquoise);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(46,196,190,.10), rgba(246,195,67,.08) 55%, transparent),
    #FBF6EC;
}

.mx-note-box__eyebrow{
  color: var(--mx-turquoise-d);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .16em;
}

.mx-note-box__facts{
  margin-top: 8px;
}

.mx-note-box__facts > div{
  display: grid;
  grid-template-columns: 70px minmax(0,1fr);
  gap: 16px;
  align-items: baseline;
  padding: 11px 0;
}

.mx-note-box__facts > div + div{
  border-top: 1px solid var(--mx-line);
}

.mx-note-box__facts dt{
  color: var(--mx-orange-d);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
}

.mx-note-box__facts dd{
  color: var(--mx-text);
  font-size: 14px;
  line-height: 1.8;
}

.mx-note-box__src{
  margin-top: 8px;
  color: var(--mx-text-sub);
  font-size: 11.5px;
}

@media (max-width: 767px){
  .mx-tackle__grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mx-tackle__lead{
    font-size: 14px;
  }

  .mx-tackle__specs > div{
    grid-template-columns: 100px minmax(0,1fr);
    gap: 12px;
    padding: 12px 2px;
  }

  .mx-tackle__specs dd{
    font-size: 13.5px;
  }

  .mx-bring{
    padding: 18px 16px;
  }

  .mx-bring__list{
    grid-template-columns: 1fr;
  }

  .mx-note-box{
    padding: 20px 16px 16px;
  }

  .mx-note-box__facts > div{
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .mx-note-box__facts dd{
    font-size: 13.5px;
  }
}


/* =========================================================
   15. STAFF（10 同行スタッフ）
   ========================================================= */
.mx-staff{
  --c-num: var(--mx-yellow);
}

.mx-staff__grid{
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0,1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.mx-staff__media{
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(214,168,79,.4);
  border-radius: 12px;
  background: #2B2618;
  box-shadow:
    -14px 14px 0 -1px rgba(46,196,190,.8),
    0 20px 44px rgba(0,0,0,.35);
}

.mx-staff__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mx-staff .mx-label{
  margin-bottom: 20px;
}

.mx-staff__role{
  color: var(--mx-turquoise);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
}

.mx-staff__name{
  margin-top: 6px;
  color: #FFF;
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: .14em;
}

.mx-staff__quote{
  margin-top: 12px;
  color: var(--mx-gold-light);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .04em;
}

.mx-staff__text{
  margin-top: 14px;
  color: var(--mx-ivory-sub);
  font-size: 14.5px;
  line-height: 2.05;
}

@media (max-width: 767px){
  .mx-staff__grid{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .mx-staff__media{
    width: min(100%, 260px);
    margin-inline: auto;
  }

  .mx-staff__quote{
    font-size: 15px;
  }

  .mx-staff__text{
    font-size: 13.5px;
  }
}


/* =========================================================
   16. FAQ（11 よくあるご質問）
   ▼ 開閉は <details> の標準機能（JavaScriptなし）
   ========================================================= */
.mx-faq{
  --c-num: var(--mx-pink-d);
}

.mx-faq .mx-h2{
  margin-bottom: clamp(24px, 3vw, 36px);
}

.mx-faq__list{
  max-width: 900px;
  border-top: 1px solid var(--mx-line);
}

.mx-faq__item{
  border-bottom: 1px solid var(--mx-line);
}

.mx-faq__q{
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 20px;
  gap: 14px;
  align-items: center;
  padding: 18px 6px;
  cursor: pointer;
  list-style: none;
}

.mx-faq__q::-webkit-details-marker{
  display: none;
}

.mx-faq__q:focus-visible{
  outline: 3px solid var(--brass-light);
  outline-offset: 2px;
}

/* 開閉の「＋／－」は線で描く */
.mx-faq__q::after{
  content: "";
  justify-self: end;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--mx-pink-d), var(--mx-pink-d)) center / 14px 2px no-repeat,
    linear-gradient(var(--mx-pink-d), var(--mx-pink-d)) center / 2px 14px no-repeat;
  transition: background-size .25s ease;
}

.mx-faq__item[open] .mx-faq__q::after{
  background-size: 14px 2px, 2px 0;
}

.mx-faq__mark{
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 700;
}

/* Qの丸は1問ずつ色を変える */
.mx-faq__item:nth-child(6n+1){ --k: var(--mx-red-d); }
.mx-faq__item:nth-child(6n+2){ --k: var(--mx-orange-d); }
.mx-faq__item:nth-child(6n+3){ --k: var(--mx-lime-d); }
.mx-faq__item:nth-child(6n+4){ --k: var(--mx-turquoise-d); }
.mx-faq__item:nth-child(6n+5){ --k: var(--mx-blue-d); }
.mx-faq__item:nth-child(6n+6){ --k: var(--mx-pink-d); }

.mx-faq__q .mx-faq__mark{
  background: var(--k, var(--olive-dark));
  color: #FFF;
}

.mx-faq__qtext{
  color: var(--olive-dark);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .03em;
  transition: color .2s ease;
}

.mx-faq__q:hover .mx-faq__qtext{
  color: var(--mx-earth);
}

.mx-faq__a{
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 14px;
  padding: 0 40px 22px 6px;
}

.mx-faq__a .mx-faq__mark{
  border: 2px solid var(--k, var(--mx-clay));
  background: none;
  color: var(--k, var(--mx-clay));
}

.mx-faq__a p{
  padding-top: 3px;
  color: var(--mx-text);
  font-size: 14.5px;
  line-height: 2;
}

@media (max-width: 767px){
  .mx-faq__q{
    grid-template-columns: 30px minmax(0,1fr) 16px;
    gap: 12px;
    padding: 16px 2px;
  }

  .mx-faq__mark{
    width: 28px;
    height: 28px;
    font-size: 13px;
  }

  .mx-faq__qtext{
    font-size: 15px;
  }

  .mx-faq__a{
    grid-template-columns: 30px minmax(0,1fr);
    gap: 12px;
    padding: 0 2px 20px;
  }

  .mx-faq__a p{
    font-size: 13.5px;
    line-height: 1.95;
  }
}


/* =========================================================
   17. CTA（最終問い合わせ）
   ▼ 背景写真は HTML の <img class="mx-cta__bg"> で差し替え
   ========================================================= */
.mx-cta{
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 10vw, 140px) 0 clamp(56px, 6vw, 80px);
  background: #1A130B;
  text-align: center;
}

.mx-cta__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 60%;
}

.mx-cta__shade{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(242,140,40,.28), transparent 70%),
    radial-gradient(ellipse 40% 40% at 100% 0%, rgba(232,80,138,.16), transparent 70%),
    linear-gradient(180deg, rgba(23,20,13,.82), rgba(35,22,10,.72) 50%, rgba(23,20,13,.92));
}

.mx-cta__inner{
  position: relative;
  z-index: 1;
}

.mx-cta__eyebrow{
  color: var(--mx-yellow);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .22em;
}

.mx-cta__title{
  margin-top: 14px;
  color: #FFF;
  font-family: var(--font-serif);
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .08em;
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}

.mx-cta__text{
  max-width: 720px;
  margin: 18px auto 0;
  color: rgba(247,241,227,.86);
  font-size: 14.5px;
  line-height: 2;
}

.mx-cta__actions{
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.mx-cta__actions .staff-button{
  min-width: 320px;
  min-height: 58px;
  font-size: 16.5px;
}

.mx-cta__trust{
  margin-top: 20px;
  color: rgba(247,241,227,.62);
  font-size: 11.5px;
  line-height: 1.8;
  letter-spacing: .04em;
}

.mx-cta__terms{
  margin-top: 10px;
  font-size: 12.5px;
}

.mx-cta__terms a,
.mx-cta__back a{
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(247,241,227,.3);
  color: rgba(247,241,227,.75);
  letter-spacing: .05em;
  transition: color .2s ease, border-color .2s ease;
}

.mx-cta__terms a:hover,
.mx-cta__back a:hover{
  border-color: rgba(235,203,134,.6);
  color: var(--mx-gold-light);
}

.mx-cta__back{
  margin-top: 24px;
  font-size: 13px;
}

.mx-cta__note{
  margin-top: 18px;
}

@media (max-width: 767px){
  .mx-cta{
    padding: 68px 0 46px;
  }

  .mx-cta__title{
    font-size: clamp(26px, 7.6vw, 32px);
    letter-spacing: .05em;
  }

  .mx-cta__text{
    font-size: 13.5px;
    text-align: left;
  }

  .mx-cta__text br{
    display: none;
  }

  .mx-cta__actions .staff-button{
    width: 100%;
    min-width: 0;
    min-height: 54px;
    font-size: 15.5px;
  }

  .mx-cta__trust{
    font-size: 10.5px;
  }
}


/* =========================================================
   18. MOTION（スクロールで写真がふわっと上がる）
   ▼ 対応ブラウザだけで動く。非対応でも普通に表示される。
     「視差効果を減らす」設定の端末では動かさない
   ========================================================= */
@keyframes mx-rise{
  from{
    opacity: 0;
    transform: translateY(26px);
  }
  to{
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .mx-reveal{
      animation: mx-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}


/* =========================================================
   日程表：小窓写真
   ========================================================= */
.mx-sched .mx-sched__day .mx-sched__plan > .mx-sched__photo{
  float: right;
  width: 220px;
  max-width: 38%;
  margin: 8px 0 10px 16px;
  overflow: hidden;
  border: 1px solid var(--mx-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(26,31,24,.10);
}

.mx-sched .mx-sched__day .mx-sched__plan > .mx-sched__photo img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* スマホでも「挿絵」サイズに留める */
@media (max-width: 767px){
  .mx-sched .mx-sched__day .mx-sched__plan > .mx-sched__photo{
    float: right;
    width: 150px;
    max-width: 42%;
    margin: 7px 0 8px 12px;
    border-radius: 7px;
  }
}