/* ============================================================
   SOPHIA淡路島  レイアウト
   ------------------------------------------------------------
   2026年8月31日 第一試作（ヘッダーの器 ＋ ①ファーストビュー）
   ------------------------------------------------------------
   ★色は必ず tokens.css の変数を経由します。
     このファイルに hex リテラル・rgb( を1つも書きません。
   ★@media は3個だけです（1023px / 599px / prefers-reduced-motion）。
   ★外部通信を発生させません（http:// https:// は0件）。
   ★画像ファイルを使いません。枠・地はすべてCSSで描きます。
   ★大阪サイトの style.css をコピーしていません。
   ============================================================ */

/* ── 土台 ─────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-kinari);
  color: var(--c-ink);
  font-family: var(--f-gothic);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  overflow-x: hidden;           /* 横スクロールを出さない */
  -webkit-font-smoothing: antialiased;
}

/* コンテンツの幅と左右余白 */
.inner {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 本文の最大幅（1行 40〜45文字） */
.text {
  max-width: var(--w-text);
}


/* ============================================================
   ヘッダー（器のみ）
   ------------------------------------------------------------
   ・ナビゲーションは作っていません（飛び先がまだ存在しないため）
   ・ロゴもリンクにしていません（<a> は0個）
   ・ハンバーガーは見た目のみ。開閉機能を持ちません
   ・①の上に重ねて置いています。スクロールすると一緒に流れます
     （固定・縮小の挙動は②以降に改めて設計します）
   ============================================================ */

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  height: var(--h-header);
  display: flex;
  align-items: center;
  background: transparent;      /* ①のグラデーションを透かす */
}

.header__inner {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* ロゴを外したため、三本線を右端に保つ */
  gap: 16px;
}

/* ロゴ（文字。ベクターデータが未確定のため） */
.logo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--c-on-ai);
}

.logo__mark {
  font-family: var(--f-latin);
  font-size: 22px;
  letter-spacing: 0.24em;
  line-height: 1;
}

.logo__area {
  font-family: var(--f-mincho);
  font-size: 13px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--c-on-ai-mute);
  padding-left: 12px;
  border-left: 1px solid var(--c-champagne-line);
}

/* 電話導線（⑬と同一の確定番号。タップで発信）
   ★①の下の赤い帯。動画の上には重ねません。
     地は無地の赤ワイン #9E2434、文字は不透明の白 #FFFFFF。
     この組み合わせのコントラストは 7.62 : 1（実測）です。 */
.tel-band {
  margin: 0;
  padding: 20px var(--gutter);
  background: var(--c-wine);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.tel-band__link {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: #FFFFFF;
  font-family: var(--f-latin);
  font-size: 24px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.tel-band__area {
  font-family: var(--f-mincho);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #FFFFFF;
}

/* ハンバーガー（開閉します） */
.header__menu {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}

.header__menu span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--c-champagne);
}

/* 三本線 → ×（開いているとき） */
.header__menu.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.header__menu.is-open span:nth-child(2) { opacity: 0; }
.header__menu.is-open span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* メニュー本体。ヘッダーの直下に開きます */
.gnav {
  position: absolute;
  top: 100%;
  right: var(--gutter);
  z-index: 20;
  min-width: 220px;
  padding: 10px 0;
  background: rgba(22, 19, 52, 0.94);
  border: 1px solid var(--c-champagne-line);
}

.gnav[hidden] { display: none; }

.gnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnav__link {
  display: block;
  padding: 13px 26px;
  color: var(--c-on-ai);
  font-family: var(--f-mincho);
  font-size: 15px;
  letter-spacing: 0.10em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.gnav__link:hover {
  background: rgba(211, 181, 131, 0.14);
}

.gnav__link:focus-visible {
  outline: 2px solid var(--c-champagne);
  outline-offset: -3px;
}


/* ============================================================
   ① ファーストビュー
   ------------------------------------------------------------
   ★2026年8月31日 配色見直し（Kaori 決定）
     見直し前：#161334 → #3A2A4E → #1F2450（藍・紫系）
     　→ 実測で画面の 97.82% が青紫系となり、
     　　「赤系デザイン」ではなく「紫・紺系デザイン」に見えていました
     見直し後：#5E1420 → #7A1B27 → #9E2434（赤ワイン系）
     　→ 正式色 #9E2434 が地の主役になります

   ・背景は縦グラデーション3段（暗い赤ワイン → 少し濃い赤ワイン → 赤ワイン）
   ・写真・動画は0点。グラデーションだけで成立します
   ・写真／動画が用意できたら、.fv の中に .fv__media を追加し、
     このグラデーションの上に敷いて、上からスクリムを重ねます
   ・装飾はシャンパンゴールドの細い線と小さな文字だけ。金の塗り面は作りません
   ・★上部を濃くしているのは、金の eyebrow を成立させるためです
     （金 / #9E2434 は 3.89 で不足。金 / #6D1824 なら 5.93・AA）
   ============================================================ */

.fv {
  position: relative;
  min-height: var(--h-fv);
  display: flex;
  align-items: center;
  padding: calc(var(--h-header) + 56px) 0 72px;
  background-image: linear-gradient(
    180deg,
    var(--c-wine-deepest) 0%,
    var(--c-wine-deep)    50%,
    var(--c-wine)         100%
  );
  background-color: var(--c-wine-deep);   /* グラデーションが描けない環境の保険 */
  color: var(--c-on-ai);
}

/* ①の写真・動画（2026年9月21日 Kaori 決定・FV-1 / MV-2）
   写真に brightness(0.45)、上から wine を 0.88 で重ねます。
   写真の画素が真っ白になる最悪時でも 見出し6.44／リード4.54
   （写真なしの現状 6.54／4.54）で、読みやすさを下回りません。 */
.fv__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.fv__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.12);
  display: block;
}

.fv > .inner {
  position: relative;
  z-index: 1;
}

.fv__body {
  max-width: var(--w-text);
}

/* 小見出し */
.fv__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.20em;
  line-height: 1.6;
  color: var(--c-champagne);
}

/* 見出しの上の短い線 */
.fv__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-champagne);
}

/* h1（仮のコピーです） */
.fv__title {
  margin: 0 0 var(--sp-head);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--c-on-ai);
}

/* リード文（仮）
   ★2026年8月31日、読みやすさを上げるため不透明度を 0.72 → 0.78 へ
     （Kaori 指示）。地 #851E2B に対して 4.90 → 5.48・AA になります。
     ロゴの地域表記などに影響させないため、専用のトークンにしています。 */
.fv__lead {
  margin: 0 0 var(--sp-cta);
  font-size: 16px;
  line-height: 2;
  color: var(--c-on-ai-lead);
}

.fv__cta {
  margin: 0;
}

/* ── CTA ──────────────────────────────
   ★サイト全体で1個だけです。
   ★現段階では <span> です。リンクにしていません。
     ⑬お問い合わせが完成し、飛び先が存在することを確認してから
     <a href="#contact"> へ差し替えます。

   ★2026年8月31日 配色見直し（Kaori 決定）
     見直し前：塗り #9E2434 ／ 文字 #FBF8F1 ／ 枠 #D3B583 2px
     　→ ①の地が赤ワインになったため、塗りが背景に溶けます（同色）
     見直し後：塗り #FBF8F1 ／ 文字 #9E2434 ／ 枠 #9E2434 1px
       文字 / 塗り ........ 7.18  AAA
       塗り / 地 #8C202E .. 8.39  AAA
       枠   / 塗り ........ 7.18  AAA
   ★枠に金を使いません（金 / 生成り塗り = 1.85 で見えないため）
   ────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  padding: 17px 46px;
  background: var(--c-kinari-lt);
  color: var(--c-wine);
  border: 1px solid var(--c-wine);
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-align: center;
  text-decoration: none;
}


/* ============================================================
   ② 淡路島での宴会・旅行という世界観
   ------------------------------------------------------------
   ・地は生成り。明るいセクションです
   ・アクセントは赤ワイン #9E2434
   ・★シャンパンゴールドを1箇所も使いません
     （生成りに対し 1.74 で読めないため）
   ・全幅の霞の帯は、将来 21:9 の写真へ差し替えます。
     高さ・上下の罫線・前後の余白を変えずに置き換えられます
   ・★100vw を使いません
     （スクロールバーの分だけ横あふれが出るため）
   ------------------------------------------------------------
   ①の下にあった .next-peek（空の生成りの面）は、
   このセクションの制作により削除しました。
   ============================================================ */

/* ①の下端の色から生成りへ、120px かけて溶ける継ぎ目
   ★2026年8月31日、①の下端が藍 → 赤ワインへ変わったため、
     出発色を var(--c-ai) → var(--c-wine) へ変更しました（Kaori 許可済み）。
     変更したのはこの1語だけで、②の見出し・本文・霞の帯・
     レイアウトには一切触れていません。
     赤ワイン → 生成り は暖色どうしのため、中間色が濁りません
     （#B45761 → #CA8B8E → #E0BEBA。いずれも色相354〜6の赤系） */
.seam {
  position: relative;
}

.seam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  background-image: linear-gradient(
    180deg,
    var(--c-wine)   0%,
    var(--c-kinari) 100%
  );
}

/* 継ぎ目より前面に置く */
.seam > * {
  position: relative;
}

.wv {
  background: var(--c-kinari);
  color: var(--c-ink);
  padding: var(--sp-section) 0 0;
}

.wv__body {
  max-width: var(--w-text);
}

.wv__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.20em;
  line-height: 1.6;
  color: var(--c-wine);
}

.wv__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-wine);
}

.wv__title {
  margin: 0 0 var(--sp-head);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-ai);
}

.wv__text p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 2;
}

.wv__text p:last-child {
  margin-bottom: 0;
}

/* ── 全幅の霞の帯 ──────────────────────
   ★将来ここが 21:9 の写真になります。
     置き換えても前後の余白・罫線は変わりません。
   ────────────────────────────────────── */
.mist-band {
  width: 100%;
  margin-top: var(--sp-section);
  padding: 64px var(--gutter);
  background: var(--c-kasumi);
  /* ②の写真（MB-2）。霞色を 0.88 で重ね、最悪時のコントラスト 8.55。 */
  background-image:
    linear-gradient(rgba(234, 223, 207, 0.88), rgba(234, 223, 207, 0.88)),
    url("../img/band.jpg");
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--c-wine);
  border-bottom: 1px solid var(--c-wine);
}

.mist-band__text {
  max-width: var(--w-content);
  margin: 0 auto;
  font-family: var(--f-mincho);
  font-size: 21px;
  line-height: 1.8;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--c-ai);
}


/* ============================================================
   ③ SOPHIAとは
   ------------------------------------------------------------
   役割 : ②が残した「では、誰が来るのか」という問いに答える
          会社メッセージのセクションです。

   ・地は暗い赤ワイン #5E1420（--c-wine-deepest）
     ★①のグラデーション上端と同じ色です。新しい色を足していません
   ・案L1「中央寄せ・文章のみ・写真なし」（2026年8月31日 Kaori 決定）
     不採用：案L2（左寄せ）／案L4（上下に金の細線を足す額装案）
   ・シャンパンゴールドは eyebrow と 40pxの線だけ。塗り面を作りません

   ★②→③の継ぎ目は作りません（2026年8月31日 Kaori 決定・案A）。
     ②の霞の帯の下端（赤ワイン1pxの線）が、そのまま境目になります。
     霞 #EADFCF と #5E1420 の明暗差は 9.99 で、
     面の切り替わりとして十分に成立します。
     ★①→②の .seam と同じ仕掛けを2回出さないためでもあります。

   ★実測コントラスト
     本文 #F3EDE1 / 地 #5E1420 ..... 11.28  AAA
     金   #D3B583 / 地 #5E1420 ......  6.71  AA
   ============================================================ */
.about {
  background: var(--c-wine-deepest);
  color: var(--c-on-ai);
  padding: var(--sp-section) 0;
}

.about__body {
  max-width: var(--w-text);
  margin: 0 auto;
  text-align: center;
}

.about__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.20em;
  line-height: 1.6;
  color: var(--c-champagne);
}

.about__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 auto 26px;      /* ★中央寄せのため左右 auto */
  border: 0;
  background: var(--c-champagne);
}

.about__title {
  margin: 0 0 var(--sp-head);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-on-ai);
}

.about__text p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 2;
}

.about__text p:last-child {
  margin-bottom: 0;
}


/* ============================================================
   ④ 淡路島への宴会サービス
   ------------------------------------------------------------
   役割 : ③が残した「では、どんなお席で頼めるのか」に答える。
          頼めるサービスの一覧です。

   ★②＝情景の描写／④＝頼めるサービス／⑥＝利用シーン と
     役割を分けています（2026年8月31日 Kaori 決定・判断①A）。
     ②の情景説明を繰り返していません。

   ・地は生成り #F6F1E7（--c-kinari。第9版で確定済み）
   ・見出し・eyebrow・40pxの線は赤ワイン #9E2434（判断⑦）
   ・★シャンパンゴールドを1箇所も使いません
     （生成りに対し 1.74 で読めないため）
   ・★写真0点。画像ファイルを作りません
   ・★<a> を作りません（飛び先がまだ存在しないため）

   ★実測コントラスト（生成り #F6F1E7 の上）
     h2 / eyebrow / 40pxの線  赤ワイン #9E2434 ... 6.77  AA
     リード・項目             墨 #221F1C ........ 14.57  AAA
     小ラベル                 補助 #63594F ....... 6.07  AA
   ============================================================ */

/* ── ③(#5E1420) → ④(生成り) の専用継ぎ目 ──────────
   ★2026年8月31日 Kaori 決定（判断④・案C）。
     ③本体（.about）には一切触れていません。
     受け取る側の④に .seam を付け、出発色だけを差し替えています。
     詳細度は .seam.seam--deep::before = (0,2,1) のため、
     既存の .seam::before = (0,1,1) より確実に優先されます。
     ②は seam--deep を持たないため、②の継ぎ目は変わりません。

   ★出発色を #5E1420 のまま生成りへ2段で溶かすと、中間が
     #9B6C70（彩度19）#AA8384（彩度19）となり灰みがかります。
     そのため正式色 #9E2434 を 40% に挟んだ3段にしています。

   ★実測（120px中の色と HSL）
       0px  #5E1420  350/65/22      48px  #9E2434  352/63/38
      12px  #6E1825  351/64/26      72px  #BB6870  354/38/57
      24px  #7E1C2A  351/64/30      84px  #CA8B8E  357/37/67
      36px  #8E202F  352/63/34     108px  #E7CFC9   12/38/85
                                   120px  #F6F1E7   40/45/94
     最低彩度 37%。色相は350〜6（赤系）から生成りへ。濁りません。
     84px の #CA8B8E は、①→②の継ぎ目の中間色と同一の色です。
   ────────────────────────────────────── */
.seam.seam--deep::before {
  background-image: linear-gradient(
    180deg,
    var(--c-wine-deepest)   0%,
    var(--c-wine)          40%,
    var(--c-kinari)       100%
  );
}

.sv {
  background: var(--c-kinari);
  color: var(--c-ink);
  padding: var(--sp-section) 0;
}

.sv__body {
  max-width: var(--w-text);
}

.sv__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.20em;
  line-height: 1.6;
  color: var(--c-wine);
}

.sv__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-wine);
}

.sv__title {
  margin: 0 0 var(--sp-head);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-wine);      /* ★判断⑦。②の h2（藍）とは別です */
}

.sv__lead p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 2;
}

.sv__lead p:last-child {
  margin-bottom: 0;
}

/* サービス内容／ご依頼いただけるお客様 の小ラベル */
.sv__label {
  margin: 48px 0 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-ink-mute);
}

/* サービス内容 5項目 */
.sv__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-kinari-line);
}

.sv__list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--c-kinari-line);
  font-size: 16px;
  line-height: 1.7;
}

/* ご依頼いただけるお客様 2項目
   ★1〜5は「サービスの内容」、こちらは「ご依頼者の種別」で
     性質が違うため、見た目を変えています（判断②「5＋2」） */
.sv__clients {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
}

.sv__clients li {
  font-size: 16px;
  line-height: 1.7;
}


/* ============================================================
   ⑤ 淡路島の食・温泉・季節
   ------------------------------------------------------------
   役割 : ④のサービス説明から一度離れ、淡路島の食・温泉・旅の
          魅力を感じてもらうセクション。食が主役、温泉が補助。

   ★役割分担
     ② 情景の描写 ／ ④ 頼めるサービス ／ ⑤ 島の魅力 ／ ⑥ 利用シーン
     ★④のサービス項目を繰り返していません。
     ★⑥の利用シーンを先取りしていません（場面を列挙していません）。
     ★観光案内そのものにしていません。宴につながる魅力に絞っています。

   ・地は #7A1B27（--c-wine-deep）
     ★第一試作の色です。実装後に Kaori が実画面で最終判断します。
     ★①のグラデーション中間色と同じで、新しい色を足していません。
   ・eyebrow と 40pxの線はシャンパンゴールド #D3B583
   ・h2 と本文は生成り #F3EDE1（--c-on-ai）
   ・左寄せ（②と同じ。中央寄せは③だけに残します）
   ・★写真0点。空枠・仮画像・春夏秋冬の仮パネルを置いていません
     （2026年8月31日 Kaori 決定・R2）

   ★実測コントラスト（地 #7A1B27 の上）
     h2・本文  #F3EDE1 ..... 8.95  AAA
     金        #D3B583 ..... 5.32  AA

   ★将来、写真を追加するときは次の2つだけで済みます
     1. .taste__layout の grid-template-columns を書き換える
     2. .taste__body の前に .taste__media を追加する
     見出し・本文・装飾・地の色・余白は変更不要です

   ★⑤の下端は単色で終わります。⑤→⑥の継ぎ目は、
     将来⑥を制作するときに⑥側で作ります。
   ============================================================ */

/* ── ④(生成り) → ⑤(#7A1B27) の専用継ぎ目 ──────────
   ★2026年8月31日 Kaori 決定（P1）。
     ④本体（.sv）には一切触れていません。
     受け取る側の⑤に .seam を付け、出発色だけを差し替えています。
     詳細度 .seam.seam--light::before =(0,2,1) は
     既存の .seam::before =(0,1,1) より確実に優先されます。
     ②④は seam--light を持たないため、影響を受けません。

   ★高さは既存の .seam::before をそのまま使います
     （PC 120px ／ SP 72px）。新しい高さ指定を足していません。

   ★正式色 #9E2434 を 60% に挟む理由
     生成り → #7A1B27 を2段で溶かすと中間が #B88687（彩度26）
     となり灰みがかります。3段にすることで最低彩度が37%に保たれます。

   ★実測（120px中の色と HSL）
       0px  #F6F1E7   40/45/94      72px  #9E2434  352/63/38 ← 正式色
      12px  #E7CFC9   12/38/85      84px  #952231  352/63/36
      24px  #D9ADAB    3/38/76      96px  #8C202E  352/63/34
      36px  #CA8B8E  357/37/67     108px  #831D2A  352/64/31
      48px  #BB6870  354/38/57     120px  #7A1B27  352/64/29
      60px  #AD4652  353/42/48
     最低彩度 37%。色相は40〜352（生成りから赤系へ）。濁りません。
     ★0〜72px は、③→④の継ぎ目の 48〜120px を逆向きにしたものと
       同一の色列です。サイト全体で継ぎ目の性格が揃います。
   ────────────────────────────────────── */
.seam.seam--light::before {
  background-image: linear-gradient(
    180deg,
    var(--c-kinari)       0%,
    var(--c-wine)        60%,
    var(--c-wine-deep)  100%
  );
}

.taste {
  background: var(--c-wine-deep);
  color: var(--c-on-ai);
  padding: var(--sp-section) 0;
}

/* ★将来の写真追加のための器。
   いまは1カラムで、見た目は何も変えていません。
   写真を足すときは、この1行を
     grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
   に書き換え、.taste__body の前に .taste__media を追加します。 */
.taste__layout {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* ⑤の写真（TS-4） */
.taste__media img {
  display: block;
  width: 100%;
  height: auto;
}

.taste__body {
  max-width: var(--w-text);
}

.taste__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.20em;
  line-height: 1.6;
  color: var(--c-champagne);
}

.taste__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-champagne);
}

.taste__title {
  margin: 0 0 var(--sp-head);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-on-ai);
}

.taste__text p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 2;
}

.taste__text p:last-child {
  margin-bottom: 0;
}

/* 2つ目の段落のかたまりとの間 */
.taste__text + .taste__text {
  margin-top: 28px;
}


/* ============================================================
   ⑥ 利用シーン
   ------------------------------------------------------------
   役割 : ④で「何を頼めるのか」を知ったお客様が、
          「自分のこの予定でも頼めるのか」を確かめるセクション。

   ・地は生成り #F6F1E7（--c-kinari）
   ・装飾は赤ワイン #9E2434 のみ
     ★シャンパンゴールドを1箇所も使いません（生成りに対し 1.74）
   ・★写真0点・番号なし・カードなし・影なし・CTAなし
   ・レイアウト＝A案（2026年9月1日 Kaori 決定）
       PC・タブレット : ①② / ③④ の2列 ＋ ⑤が2列をまたぐ締め
       SP             : 5項目すべて1列・左寄せ
   ・★左端は ②④⑤ と同じ .inner の左端にそろえます（縦の軸線を保つため）
   ------------------------------------------------------------
   ★実測コントラスト（地 #F6F1E7 の上・④で測定済みの値）
     eyebrow・線・h2・項目名  #9E2434 ..... 6.77  AA
     説明文                  #221F1C ..... 14.57 AAA
   ============================================================ */

/* ⑤ #7A1B27 の下端から生成りへ、120px かけて溶ける継ぎ目
   ★④→⑤（.seam--light）の色列を、そのまま逆向きにしたものです。
     ③→④（.seam--deep）の 48〜120px とも同一の色列になり、
     サイト全体で継ぎ目の性格がそろいます。
   ★詳細度 .seam.seam--wine::before =(0,2,1) は、
     既存の .seam::before =(0,1,1) より確実に優先されます。
     ②④⑤は seam--wine を持たないため影響を受けません。
   ★高さは既存の .seam::before をそのまま使います
     （PC・タブレット 120px ／ SP 72px）。新しい高さ指定を足していません。
   ★⑤本体（.taste）には一切触れていません。 */
.seam.seam--wine::before {
  background-image: linear-gradient(
    180deg,
    var(--c-wine-deep)   0%,    /* #7A1B27 ＝⑤の下端。段差0 */
    var(--c-wine)       40%,    /* #9E2434 ★正式色 */
    var(--c-kinari)    100%     /* #F6F1E7 ＝⑥の地 */
  );
}

.scene {
  background: var(--c-kinari);
  color: var(--c-ink);
  padding: var(--sp-section) 0;
}

/* ★880px。①〜⑤の本文 720px より広いのは、⑥が初の2列のためです。
   左端は .inner にそろえ、右へ広げています（中央寄せにしません）。 */
.scene__body {
  max-width: 880px;
}

.scene__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-wine);
}

.scene__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-wine);
}

/* ★リード文がないため、④の --sp-head 32px より広い 48px を取ります */
.scene__title {
  margin: 0 0 48px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-wine);
}

/* ①〜④＝2列。罫線・枠・背景・影は使わず、余白だけで分けます
   （④の上下罫線リストと見え方を変えるためです） */
.scene__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  row-gap: 56px;
}

.scene__item {
  margin: 0;
}

.scene__name {
  margin: 0 0 8px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--c-wine);
}

.scene__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
}

/* ★⑤「そのほかのお席」＝①〜④の締め
   ・2列をまたぐ  ・幅を 520px に絞る  ・中央に置く
   この3つで「左下に1個余った」ようには見えなくなります。
   ★これは④の「5＋2」（性質の違う項目の見え方を変える）と同じ考え方です。
   ★③の「セクション全体・本文全体の中央寄せ」とは性質が異なります。
     ③の中央寄せの特別性は変更していません（2026年9月1日 Kaori 決定）。 */
.scene__item--other {
  grid-column: 1 / -1;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

/* ①〜④との区切り。80×1px の半透明の赤ワイン。
   ★eyebrow の下の線（40×2px・不透明）とは幅も太さも変えているため、
     同じ装飾の繰り返しには見えません。
   ★<ul> の直下に <hr> を置けないため ::before で描いています。 */
.scene__item--other::before {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  margin: 0 auto 40px;
  background: var(--c-wine-line);
}


/* ============================================================
   ⑦ 選ばれる理由
   ------------------------------------------------------------
   役割 : ①〜⑥を読んだお客様が「なぜSOPHIAに頼むのか」を
          確かめるセクション。

   ・地は暗い赤ワイン #5E1420（--c-wine-deepest）
   ・装飾はシャンパンゴールド #D3B583（eyebrow と 40×2px の線のみ）
     ★塗り面は作りません（金は罫線と小さな文字のみ）
   ・★写真0点・番号なし・カードなし・影なし・CTAなし
   ・レイアウト＝2列×2段（2026年9月1日 Kaori＋ChatGPT 確認済み）
       PC・タブレット : ①② / ③④
       SP             : 4項目すべて1列・左寄せ
   ・★左端は ②④⑤⑥ と同じ .inner の左端にそろえます
   ------------------------------------------------------------
   ★実測コントラスト（地 #5E1420 の上）
     h2・項目名        #F3EDE1 ..... 11.28 AAA
     eyebrow・線       #D3B583 .....  6.71 AA
   ★③も #5E1420 ですが、④⑤⑥の3セクション離れています。
     ③#5E1420 → ⑤#7A1B27 → ⑦#5E1420 と交互になり、
     暗い地が単調になりません。
   ============================================================ */

/* ⑥ 生成りの下端から ⑦ #5E1420 へ、120px かけて溶ける継ぎ目
   ★③→④（.seam--deep）の色列を、そのまま逆向きにしたものです。
     サイト全体で継ぎ目の性格がそろいます。
   ★詳細度 .seam.seam--deepest::before =(0,2,1) は、
     既存の .seam::before =(0,1,1) より確実に優先されます。
     ②④⑤⑥は seam--deepest を持たないため影響を受けません。
   ★高さは既存の .seam::before をそのまま使います
     （PC・タブレット 120px ／ SP 72px）。新しい高さ指定を足していません。
   ★2段で溶かすと中間が #AA8384（彩度19%）で灰みがかるため、
     正式色 #9E2434 を60%に挟んでいます。
   ★⑥本体（.scene）には一切触れていません。 */
.seam.seam--deepest::before {
  background-image: linear-gradient(
    180deg,
    var(--c-kinari)        0%,    /* #F6F1E7 ＝⑥の下端。段差0 */
    var(--c-wine)         60%,    /* #9E2434 ★正式色 */
    var(--c-wine-deepest) 100%    /* #5E1420 ＝⑦の地 */
  );
}

.reason {
  background: var(--c-wine-deepest);
  color: var(--c-on-ai);
  padding: var(--sp-section) 0;
}

/* ★880px。⑥と同じ幅にそろえています（2列のため） */
.reason__body {
  max-width: 880px;
}

.reason__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-champagne);
}

.reason__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-champagne);
}

/* ★リード文がないため、⑥と同じ 48px を取ります */
.reason__title {
  margin: 0 0 48px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-on-ai);
}

/* 2列×2段。罫線・枠・背景・影は使わず、余白だけで分けます
   （④の罫線リスト・⑥の2列×3段と見え方を変えるためです） */
.reason__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  row-gap: 56px;
}

.reason__item {
  margin: 0;
}

.reason__name {
  margin: 0 0 8px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--c-on-ai);
}

.reason__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--c-on-ai-mute);
}


/* ============================================================
   ⑧ ご利用の流れ
   ------------------------------------------------------------
   役割 : ⑦を読んだお客様へ「いつ・どの順番で進むのか」だけを
          伝えるセクション。⑧は時系列の手順です。

   ・地は生成り #F6F1E7（--c-kinari）。②④⑥と同じ地で4回目です
   ・eyebrow・40×2pxの線・番号は赤ワイン #9E2434（--c-wine）
     ★明るい地の上は赤ワイン（色の規則2）。
     ★シャンパンゴールドは生成りの上で 1.74 のため使いません（規則4）
   ・本文は #221F1C（--c-ink）。②④⑥と同じです
   ・★レイアウト＝縦1列・左寄せ・3段階
       ⑥⑦が2列グリッドで2回続いたため、⑧は縦1列にしています。
       列の切り替えがないため @media での列指定は不要です。
   ・★本文幅は --w-text（720px）。①〜⑤と同じ1カラム幅です
       （⑥⑦の880pxとは変えて、見え方の差も付けています）
   ・★番号 01〜03 は①〜⑦で初出です。12px・赤ワインで、
     主役にせず流れを理解するための補助として置いています。
   ・★段をつなぐ縦ラインは 1px・--c-wine-line（赤ワイン45%）。
     ④の横罫線（--c-kinari-line）とは向きも色も変えています。
     ★<li> の直下に <hr> を置けないため ::before で描いています
       （⑥の .scene__item--other::before と同じ手法）。
   ・写真0点・カードなし・影なし・矢印なし・CTAなし・<a> 0個
   ------------------------------------------------------------
   ★実測コントラスト（地 #F6F1E7 の上）
     本文・項目名   #221F1C ..... 15.24 AAA
     eyebrow・番号  #9E2434 .....  6.54 AA
   ★⑦→⑧の継ぎ目は、既存 .seam.seam--deep::before を
     ⑧側で再利用しています（新規CSS 0行）。
     ⑦の下端 #5E1420 → ⑧の地 #F6F1E7 は、③→④とまったく同じ
     色の組み合わせのため、定義をそのまま使えます。
     ★.seam--deep の定義（434〜482行付近）は変更していません。
     ★④（.sv）も同じクラスを使っていますが、CSSを1文字も
       変えていないため④の継ぎ目は不変です。
   ============================================================ */

.step {
  background: var(--c-kinari);
  color: var(--c-ink);
  padding: var(--sp-section) 0;
}

/* ★720px。①〜⑤と同じ1カラム幅です（⑥⑦の880pxとは変えています） */
.step__body {
  max-width: var(--w-text);
}

.step__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-wine);
}

.step__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-wine);
}

/* ★リード文がないため、⑥⑦と同じ 48px を取ります */
.step__title {
  margin: 0 0 48px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-wine);
}

/* 縦1列。罫線で囲まず、番号と縦ラインだけで順序を示します */
.step__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 左に番号の帯（44px）を空け、そこへ番号と縦ラインを置きます */
.step__item {
  position: relative;
  margin: 0;
  padding: 0 0 40px 44px;
}

.step__item:last-child {
  padding-bottom: 0;
}

/* 段と段をつなぐ細い縦ライン。最終段には引きません */
.step__item::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 1px;
  background: var(--c-wine-line);
}

.step__item:last-child::before {
  content: none;
}

/* ★番号は補助です。主役にしないため 12px にしています */
.step__no {
  position: absolute;
  left: 0;
  top: 3px;
  font-family: var(--f-latin);
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 1.6;
  color: var(--c-wine);
}

.step__name {
  margin: 0 0 8px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--c-ink);
}

.step__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--c-ink);
}


/* ============================================================
   ⑨ 料金
   ------------------------------------------------------------
   役割 : ⑧の手順のあとに「いくらかかるのか」を伝えるセクション。

   ・地は生成り #F6F1E7（--c-kinari）。⑧と地続きです
   ・eyebrow・40×2pxの線・列名は赤ワイン #9E2434（--c-wine）
     ★明るい地の上は赤ワイン（色の規則2）。
     ★シャンパンゴールドは生成りの上で 1.74 のため使いません（規則4）
   ・本文・地域名・金額は #221F1C（--c-ink）
   ・税別の補足と注記は #63594F（--c-ink-mute。生成り上 6.07 AA）
   ------------------------------------------------------------
   ★レイアウト（2026年9月9日 Kaori 指示で左右2列へ変更）
       PC・タブレット : 左＝神戸方面 ／ 右＝徳島方面 の2列
       SP             : 神戸方面 → 徳島方面 の上下1列
     ★本文幅は 880px。⑥⑦と同じ「2列のときの幅」にそろえています
       （①〜⑤⑧⑩⑫⑬の720pxとは変えています）
     ★2列にすると1列あたりは PC 420px ／ TB 346px になります。
       地域ごとに、地域名を全幅に置き、その下へ
       「2時間・1名」と「交通費」を 1fr 1fr の2列で並べます。
       1セルは PC 約202px ／ TB 約167px。金額「14,300円（税込）」は
       約149pxのため収まります（文字数からの試算）。
       列名（2時間・1名／交通費）は thead を隠し ::before で補います
       （⑫⑬と同じ作法）。
       ★SP（599px以下）では「2時間・1名」と「交通費」を上下に戻します。
       ★文字を小さくして詰め込む方法や、内容を削る方法は採っていません
   ・★カード・囲み枠・背景ボックス・影・色分けは作りません。
     2列にしても、神戸方面と徳島方面は同じクラス・同じCSSです。
     デザイン上の優劣を付ける指定を1つも書いていません
   ・写真0点・アイコンなし・CTAなし・<a> 0個・JavaScript 0行
   ------------------------------------------------------------
   ★⑧→⑨は同色（生成り）のため .seam を付けていません。
     ⑨→⑩（霞 #EADFCF）も明↔明・コントラスト比1.17のため継ぎ目不要です。
     ★.step / .region / .seam 系の定義には一切触れていません。
   ============================================================ */

.price {
  background: var(--c-kinari);
  color: var(--c-ink);
  padding: var(--sp-section) 0;
}

/* ★880px・左右2列。⑥⑦と同じ「2列のときの幅」です */
.price__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  max-width: 880px;
}

/* 見出し・線・h2・リード文は2列にまたがります */
.price__eyebrow,
.price__rule,
.price__title,
.price__lead,
.price__terms-name,
.price__terms {
  grid-column: 1 / -1;
}

.price__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-wine);
}

.price__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-wine);
}

/* ★リード文があるため、⑩⑬と同じ var(--sp-head) を取ります */
.price__title {
  margin: 0 0 var(--sp-head);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-wine);
}

.price__lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--c-ink);
}

/* 方面ブロック。★左＝神戸方面／右＝徳島方面。2つとも同じ指定です */
.price__plan {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--c-kinari-line);
}

.price__name {
  margin: 0 0 10px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--c-ink);
}

.price__scene {
  margin: 0 0 24px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--c-ink);
}

/* 料金表。★枠線で囲まず、横罫線だけで地域を分けます */
.price__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* ★交通費の条件。方面ごとに1件だけ、料金の上に置きます */
.price__caption {
  caption-side: top;
  margin-bottom: 20px;
  text-align: left;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-ink-mute);
}

/* ★列見出しは画面に出しません。列名は各金額の上に ::before で出します。
   読み上げには <thead> の <th scope="col"> がそのまま残ります */
.price__table thead {
  display: none;
}

.price__table tbody,
.price__area,
.price__cell {
  display: block;
  width: auto;
}

.price__table th,
.price__table td {
  padding: 0;
  text-align: left;
}

/* ★地域ごとの1行。PC・TBでは「2時間・1名」と「交通費」を左右に並べます */
.price__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  width: auto;
}

/* 地域と地域のあいだの細い罫線。最初の地域には引きません */
.price__row + .price__row {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--c-kinari-line);
}

/* 地域名は2列にまたがります */
.price__area {
  grid-column: 1 / -1;
  padding-bottom: 10px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-ink);
}

/* 列名。★HTMLの文字列ではなくCSSで出します（⑫⑬と同じ作法） */
.price__cell::before {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-wine);
}

.price__cell:nth-of-type(1)::before {
  content: "2時間・1名";
}

.price__cell:nth-of-type(2)::before {
  content: "交通費";
}

/* ★税込が主表示です */
.price__amount {
  display: block;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-ink);
}

/* ★税別は主表示の直下に小さく添えます（S2） */
.price__sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-ink-mute);
}

/* ご予算のご相談案内。★両方面に1つずつ置きます */
.price__consult {
  margin: 28px 0 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--c-ink);
}

/* ★延長の注記。神戸方面ブロックの中だけに置きます */
.price__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--c-ink-mute);
}


/* ⑨の料金表の下「ご依頼・お支払いについて」（2026年9月21日 追加）
   ⑪よくある質問から本文へ移した内容です。新しい色は使っていません。 */
.price__terms-name {
  margin: 48px 0 16px;
  font-family: var(--f-mincho);
  font-size: 17px;
  letter-spacing: 0.10em;
  line-height: 1.6;
  color: var(--c-ink);
}

.price__terms {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.price__term {
  padding: 11px 18px;
  border: 1px solid var(--c-wine-line);
  color: var(--c-wine);
  font-size: 15px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}


/* ============================================================
   ⑩ 淡路島の対応地域
   ------------------------------------------------------------
   役割 : ①②が伝えた「淡路島全域」を、淡路市・洲本市・
          南あわじ市 の3市名で具体化するセクション。

   ・地は霞 #EADFCF（--c-kasumi）。★地としては⑩が初出です
     （これまで霞は②の帯だけで使っていました）
   ・eyebrow・40×2pxの線は赤ワイン #9E2434（--c-wine）
     ★明るい地の上は赤ワイン（色の規則2）。
     ★シャンパンゴールドは霞の上で 1.49 のため使いません（規則4）
   ・本文・市名は #221F1C（--c-ink）
   ・★レイアウト＝左寄せ／本文幅 --w-text（720px）
       PC・タブレット : 3市を横3列
       SP             : 3市を縦3段
     ★3市は完全に対等です。同じクラス・同じCSSで、
       強弱の差を付ける指定を1つも書いていません。
       （大阪⑦の .area__tag--main / --sub のような差は作りません）
   ・★カード・囲み枠・背景ボックス・影は作りません。
     余白だけで3市を分けます（⑦⑧と同じ方針）。
   ・写真0点・地図なし・アイコンなし・CTAなし・<a> 0個
   ------------------------------------------------------------
   ★実測コントラスト（地 #EADFCF の上）
     本文・市名   #221F1C ..... 12.46 AAA
     eyebrow・線  #9E2434 .....  5.79 AA
     （参考）#D3B583 ......... 1.49 ★使用不可
   ★⑧→⑩の継ぎ目は置いていません。.seam 系クラスも付けていません。
     ⑧の下端 生成り #F6F1E7 → ⑩の地 霞 #EADFCF は、
     どちらも明るい地で、コントラスト比 1.17（RGB差 12/18/24）。
     境界は自然に読め、グラデーションで溶かす必要がありません。
     ★色の規則12（#9E2434 を挟む3段）は明↔暗の規則のため、
       明↔明のこの組み合わせは対象外です。
     ★⑧本体（.step）・.seam 系の定義には一切触れていません。
   ★将来⑨「料金」を⑧と⑩のあいだへ入れる場合も、
     ⑨が明るい地であれば⑩側の変更は不要です。
   ============================================================ */

.region {
  background: var(--c-kasumi);
  color: var(--c-ink);
  padding: var(--sp-section) 0;
}

/* ★720px。①〜⑤⑧と同じ1カラム幅です */
.region__body {
  max-width: var(--w-text);
}

.region__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-wine);
}

.region__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-wine);
}

.region__title {
  margin: 0 0 var(--sp-head);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-wine);
}

.region__lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--c-ink);
}

/* 3市を横3列。★カード・枠・背景・影は使わず、余白だけで分けます */
.region__list {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 24px;
}

.region__item {
  margin: 0;
}

/* ★3市は完全に対等です。市ごとの差を付ける指定はありません */
.region__name {
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--c-ink);
}


/* ============================================================
   ⑫ よくある質問
   ------------------------------------------------------------
   ★⑩（霞 #EADFCF）→ ⑫（生成り #F6F1E7）は 明 → 明 です。
     コントラスト比 1.17／RGB差 12・18・24。
     ⑧生成り → ⑩霞 とまったく同じ2色の逆順のため、継ぎ目を
     置いていません。.seam 系クラスも付けていません。
     ★⑩本体（.region）には一切触れていません。
   ★開閉は <details>/<summary> のブラウザ標準機能です。
     JavaScript は 0行です。キーボード操作も最初から効きます。
   ★Q・A・＋・− は ::before / ::after の文字です。HTMLの文字列
     には入れていないため、将来 FAQPage の構造化データへ
     そのまま使えます。
   ★シャンパンゴールドは生成り地で 1.74 のため使えません
     （色の規則4）。大阪⑨FAQ の金の罫線・Q印は成立しないため、
     すべて赤ワイン #9E2434（6.77 AA）にしています。
   ★列の切り替えがないため、@media への追記は最小です。
   ============================================================ */

.qa {
  background: var(--c-kinari);
  color: var(--c-ink);
  padding: var(--sp-section) 0;
}

/* ★720px。①〜⑤⑧⑩と同じ1カラム幅です（⑥⑦の880pxとは変えています） */
.qa__body {
  max-width: var(--w-text);
}

.qa__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-wine);
}

.qa__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-wine);
}

/* ★リード文がないため、⑥⑦⑧と同じ 48px を取ります */
.qa__title {
  margin: 0 0 48px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-wine);
}

/* 縦1列。カード・背景ボックス・影は使わず、細い罫線だけで区切ります */
.qa__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-kinari-line);
}

.qa__item {
  margin: 0;
  border-bottom: 1px solid var(--c-kinari-line);
}

/* 質問（開閉のつまみ）。左に24pxのQ帯、右に開閉マークの場所を空けます */
.qa__q {
  position: relative;
  display: block;              /* 既定の三角マーカーを消します */
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 22px 34px 22px 28px;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--c-ink);
}

.qa__q::-webkit-details-marker { display: none; }   /* Safari の三角を消します */

/* 小さな「Q」。⑧の番号（--f-latin 12px）と同じ性格の補助表示です */
.qa__q::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--f-latin);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 2.55;
  color: var(--c-wine);
}

/* 控えめな開閉マーク */
.qa__q::after {
  content: "＋";
  position: absolute;
  right: 0;
  top: 22px;
  font-size: 12px;
  line-height: 2.55;
  color: var(--c-wine);
}

/* ★<li> 直下の <details> は構造上一意のため、専用クラスを作っていません */
.qa__item details[open] .qa__q::after {
  content: "−";
}

/* キーボード操作の目印（①の .fv__pause と同じ書き方） */
.qa__q:focus-visible {
  outline: 2px solid var(--c-wine);
  outline-offset: 2px;
}

/* 回答 */
.qa__a {
  position: relative;
  padding: 0 0 24px 28px;
}

.qa__a::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--f-latin);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.10em;
  line-height: 2.0;
  color: var(--c-ink-mute);
}

.qa__a p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--c-ink-mute);
}


/* ============================================================
   ⑬ お問い合わせ ── 2026年9月8日 Kaori 決定
   ------------------------------------------------------------
   ・地は生成り var(--c-kinari)。⑫と同じ明るいセクションです
   ・装飾は赤ワイン（eyebrow・40pxの線・h2・小見出し）と
     シャンパンゴールド（一覧の「―」）。★新しい色を1つも足していません
   ・大阪の色変数は淡路島に存在しないため、1つも使っていません

   ★⑫（生成り）→⑬（生成り）は同色のため、継ぎ目を置いていません
     （⑩霞 → ⑫生成り とまったく同じ考え方です）。
     ⑫本体（.qa）には一切触れていません。

   ★⑬（生成り）→⑭（最深部）は、既存の
     .seam.seam--footer::before が「生成り → 正式色 → 最深部」で
     受け取ります。★⑭のCSSは1バイトも変更していません。

   ★ヘッダーは position: absolute のため、大阪にある
     scroll-margin-top は不要です（既存でも使用0件）。

   ★列の切り替えはありません（PC・TB・SPとも縦1列）。
     連絡先が確定したら、一覧の右へ連絡先ブロックを足し、
     そのとき初めて .contact__cols（PC2カラム）を作ります。
   ============================================================ */
.contact {
  background: var(--c-kinari);
  color: var(--c-ink);
  padding: var(--sp-section) 0;
}

/* ★720px。①〜⑤⑧⑩⑫と同じ1カラム幅です */
.contact__body {
  max-width: var(--w-text);
}

.contact__eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  color: var(--c-wine);
}

.contact__rule {
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 26px;
  border: 0;
  background: var(--c-wine);
}

/* ★リード文があるため、⑩と同じ var(--sp-head) を取ります */
.contact__title {
  margin: 0 0 var(--sp-head);
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.55;
  letter-spacing: 0.03em;
  color: var(--c-wine);
}

.contact__lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--c-ink);
}

/* ★主役は「こんなこともご相談ください」の一覧です（大阪と同じ考え方） */
.contact__ask-name {
  margin: 48px 0 0;
  font-family: var(--f-mincho);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--c-wine);
}

/* 縦1列。カード・背景ボックス・影は使わず、細い罫線だけで区切ります
   （⑫ .qa__list と同じ作法） */
.contact__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--c-kinari-line);
}

.contact__item {
  margin: 0;
  padding: 16px 0 16px 26px;
  border-bottom: 1px solid var(--c-kinari-line);
  font-size: 15.5px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  position: relative;
}

/* 印は CSS で付けます。HTMLの文字列は相談内容そのものだけです
   （⑫の Q/A・大阪⑫と同じ作法） */
.contact__item::before {
  content: "―";
  position: absolute;
  left: 0;
  color: var(--c-champagne);
}

/* ⑬ 連絡先（2026年9月21日 Kaori 提供の確定情報）
   電話・LINE・Instagram。フォームは作っていません。
   色は既存トークンのみ。赤ワイン/生成り 6.77、生成り最明色/赤ワイン 7.18（いずれもAA達成）。 */
.contact__tel {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  border-top: 1px solid var(--c-kinari-line);
}

.contact__tel-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-kinari-line);
}

.contact__tel-area {
  flex: 0 0 auto;
  min-width: 3.5em;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--c-wine);
}

.contact__tel-num {
  font-family: var(--f-mincho);
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--c-wine);
  text-decoration: none;
}

.contact__hours {
  margin: 20px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--c-ink);
}

.contact__note {
  margin: 6px 0 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--c-ink);
}

.contact__line {
  margin: 28px 0 0;
}

/* ★①のCTAとは別クラスです。btn-primary は①の1個のままです。 */
.btn-line {
  display: inline-block;
  padding: 17px 46px;
  background: var(--c-wine);
  color: var(--c-kinari-lt);
  border: 1px solid var(--c-wine);
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-align: center;
  text-decoration: none;
}

/* ★補助導線。電話・LINEより目立たせません。 */
.contact__sns {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.8;
}

.contact__sns-link {
  color: var(--c-wine);
}


/* ============================================================
   ⑭ フッター（最小構成）── 2026年9月7日 Kaori 決定
   ------------------------------------------------------------
   ・地は最深部 var(--c-ai-deep) #161334（①の上端と同じ色）

   ・★⑫（生成り）→⑭（最深部）は明→暗のため、色の規則12により
     正式色 #9E2434 を60%に挟む3段で溶かします。
     受け取る⑭側に .seam .seam--footer を付けており、
     ⑫本体（.qa）には一切触れていません。

     実測（120px・12px刻み／HSL）
        0px  #F6F1E7   40/45/94      72px  #9E2434  352/63/38 ★正式色
       12px  #E7CFC9   11/39/85      84px  #7C2034  347/59/31
       24px  #D9ADAB    2/37/76      96px  #5A1C34  336/53/23
       36px  #CA8B8E  357/37/67     108px  #381734  307/41/16
       48px  #BB6870  355/38/57     120px  #161334  245/46/14
       60px  #AD4652  353/42/48
     最低彩度 37%。④→⑤・⑥→⑦と同じ基準です。
     ★2段（生成り→最深部）は中間が #BEBABA 彩度3%、#86828E 彩度5%
       となり灰みがかるため採用していません（実測）。

   ・★高さは既存の .seam::before をそのまま使います
     （PC・タブレット 120px ／ SP 72px）。新しい高さ指定を足していません。
   ・詳細度 .seam.seam--footer::before =(0,2,1) は、
     既存の .seam::before =(0,1,1) より確実に優先されます。
     ②④⑤⑥⑦⑧は seam--footer を持たないため影響を受けません。

   ・実測コントラスト（地＝最深部 #161334）
       文字 #F3EDE1 ................ 15.31  AAA
       補助文字（72%）.............. 8.33  AAA
       金の細線（50%）.............. 3.17  非文字 1.4.11 合格
   ・★金を塗り面に使っていません（罫線1本のみ。色の規則5）
   ・★赤ワインを暗い地の文字・線に使っていません（色の規則4）
   ・★会社名は Copyright の1回だけです（2026年9月7日 Kaori 決定）。
     会社名の単独表示（.footer__company）は作っていません。
   ・新しい画像・ボタン・リンクを1つも作っていません。
   ・hex リテラルと rgb 関数を1つも書いていません（すべてトークン経由）。
   ============================================================ */

.seam.seam--footer::before {
  background-image: linear-gradient(
    180deg,
    var(--c-kinari)   0%,    /* #F6F1E7 ＝⑫の下端。段差0 */
    var(--c-wine)    60%,    /* #9E2434 ★正式色 */
    var(--c-ai-deep) 100%    /* #161334 ＝⑭の地 */
  );
}

.footer {
  background: var(--c-ai-deep);
  color: var(--c-on-ai);
  padding: var(--sp-section) 0 0;
}

.footer__inner {
  width: 100%;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer__logo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.footer__mark {
  font-family: var(--f-latin);
  font-size: 22px;
  letter-spacing: 0.24em;
  line-height: 1;
  color: var(--c-on-ai);
}

.footer__area {
  font-family: var(--f-mincho);
  font-size: 13px;
  letter-spacing: 0.16em;
  line-height: 1;
  color: var(--c-on-ai-mute);
  padding-left: 12px;
  border-left: 1px solid var(--c-champagne-line);
}

.footer__copy {
  max-width: var(--w-content);
  margin: 56px auto 0;
  padding: 24px var(--gutter) 32px;
  border-top: 1px solid var(--c-champagne-line);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--c-on-ai-mute);
}


/* ============================================================
   タブレット以下（1023px）
   ============================================================ */

@media (max-width: 1023px) {

  .fv__title {
    font-size: 36px;
  }

  .fv__lead {
    font-size: 15.5px;
  }

  .wv__title {
    font-size: 28px;
  }

  .mist-band__text {
    font-size: 19px;
  }

  .about__title {
    font-size: 28px;
  }

  .sv__title {
    font-size: 28px;
  }

  .taste__title {
    font-size: 28px;
  }

  .scene__title {
    font-size: 28px;
  }

  /* 2列は維持し、余白だけを詰めます */
  .scene__grid {
    column-gap: 48px;
    row-gap: 48px;
  }

  .scene__item--other {
    max-width: 480px;
  }

  .reason__title {
    font-size: 28px;
  }

  /* 2列は維持し、余白だけを詰めます */
  .reason__grid {
    column-gap: 48px;
    row-gap: 48px;
  }

  /* ⑧は縦1列のため、列の指定は不要です。見出しだけを詰めます */
  .step__title {
    font-size: 28px;
  }

  /* ★⑨はTBでも「左＝神戸方面／右＝徳島方面」の2列のままです。
     列の間隔と見出しだけを詰めます（1列あたり 346px） */
  .price__body {
    column-gap: 28px;
  }

  /* ★TBは1セル約167pxのため、行内の列間隔を12pxにします */
  .price__row {
    column-gap: 12px;
  }

  .price__title {
    font-size: 28px;
  }

  /* ⑩は3列を維持し、見出しと列の余白だけを詰めます */
  .region__title {
    font-size: 28px;
  }

  .region__list {
    column-gap: 24px;
  }

  /* ⑫は縦1列のため、列の指定は不要です。見出しだけを詰めます */
  .qa__title {
    font-size: 28px;
  }

  /* ⑬も縦1列のため、列の指定は不要です。見出しだけを詰めます */
  .contact__title {
    font-size: 28px;
  }

  /* ★⑭はTBでも縦1列のままです。列指定も文字サイズの変更も不要です
     （--gutter は 24px のまま。max-width 1120px に対して縦積み1列で、
       はみ出しが起きません） */

}


/* ============================================================
   スマートフォン（599px）
   ============================================================ */

@media (max-width: 599px) {

  :root {
    --gutter: var(--sp-edge-sp);
  }

  .header {
    height: var(--h-header-sp);
  }

  .logo__mark {
    font-size: 18px;
    letter-spacing: 0.20em;
  }

  .logo__area {
    font-size: 11px;
    padding-left: 10px;
  }

  .price__terms { gap: 10px; }
  .price__term { padding: 10px 14px; font-size: 14px; }

  /* 電話の帯はスマホでは2段にする */
  .tel-band { flex-direction: column; gap: 12px; padding: 18px var(--sp-edge-sp); }
  .tel-band__link { font-size: 21px; }
  .tel-band__area { font-size: 14px; }

  .fv {
    min-height: var(--h-fv-sp);
    padding: calc(var(--h-header-sp) + 44px) 0 56px;
  }

  /* スマホは縦長で左右が大きく切れるため、拡大しない */
  .fv__media video { transform: none; }

  .fv__title {
    font-size: 27px;
    letter-spacing: 0.04em;
  }

  .fv__lead {
    font-size: 15px;
    line-height: 1.95;
  }

  .btn-primary {
    display: block;
    width: 100%;
    padding: 16px 20px;
  }

  .btn-line {
    display: block;
    width: 100%;
    padding: 16px 20px;
  }

  .contact__tel-num {
    font-size: 23px;
  }

  .wv {
    padding-top: 72px;
  }

  .seam::before {
    height: 72px;
  }

  .wv__title {
    font-size: 23px;
    letter-spacing: 0.02em;
  }

  .wv__text p {
    font-size: 15px;
    line-height: 1.95;
  }

  .mist-band {
    margin-top: 72px;
    padding: 44px var(--gutter);
  }

  .mist-band__text {
    font-size: 17px;
  }

  .about {
    padding: 72px 0;
  }

  .about__title {
    font-size: 23px;
    letter-spacing: 0.02em;
  }

  .about__text p {
    font-size: 15px;
    line-height: 1.95;
  }

  .sv {
    padding: 72px 0;
  }

  .sv__title {
    font-size: 23px;
    letter-spacing: 0.02em;
  }

  .sv__lead p {
    font-size: 15px;
    line-height: 1.95;
  }

  .sv__label {
    margin-top: 36px;
  }

  .sv__list li,
  .sv__clients li {
    font-size: 15px;
  }

  .taste {
    padding: 72px 0;
  }

  .taste__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .taste__title {
    font-size: 23px;
    letter-spacing: 0.02em;
  }

  .taste__text p {
    font-size: 15px;
    line-height: 1.95;
  }

  .taste__text + .taste__text {
    margin-top: 22px;
  }

  .scene {
    padding: 72px 0;
  }

  .scene__title {
    font-size: 23px;
    letter-spacing: 0.02em;
  }

  /* ★SPは1列。⑤も同じ幅になるため、中央寄せを解いて左寄せに戻します */
  .scene__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .scene__name {
    font-size: 17px;
  }

  .scene__text {
    font-size: 15px;
    line-height: 1.95;
  }

  .scene__item--other {
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .scene__item--other::before {
    margin: 8px 0 28px;
  }

  .reason {
    padding: 72px 0;
  }

  .reason__title {
    font-size: 23px;
    letter-spacing: 0.02em;
  }

  /* ★SPは1列4項目 */
  .reason__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .reason__name {
    font-size: 17px;
  }

  .reason__text {
    font-size: 15px;
    line-height: 1.95;
  }

  /* ★⑧はSPでも縦1列のままです。左の番号帯と余白だけを詰めます */
  .step__item {
    padding: 0 0 32px 38px;
  }

  .step__item::before {
    left: 9px;
    top: 22px;
  }

  .step__no {
    font-size: 11px;
  }

  .step__name {
    font-size: 17px;
  }

  .step__text {
    font-size: 15px;
    line-height: 1.95;
  }

  /* ★⑨はSPでは左右2列をやめ、神戸方面 → 徳島方面 の上下1列にします。
     各方面の中の料金表は、地域ごとの縦積みのままです（横スクロール0） */
  .price__body {
    display: block;
  }

  /* ★SPでは各地域の「2時間・1名」と「交通費」を上下に戻します */
  .price__row {
    display: block;
  }

  .price__cell + .price__cell {
    padding-top: 14px;
  }

  .price__title {
    font-size: 24px;
  }

  .price__lead,
  .price__scene {
    font-size: 15px;
    line-height: 1.95;
  }

  .price__name {
    font-size: 18px;
  }

  .price__amount {
    font-size: 17px;
  }

  .price__sub {
    font-size: 12.5px;
  }

  .price__caption {
    margin-bottom: 16px;
    font-size: 12.5px;
  }

  .price__consult {
    font-size: 15px;
    line-height: 1.95;
  }

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

  /* ★⑩はSPで3市を縦3段にします。3市は対等のままです */
  .region__title {
    font-size: 24px;
  }

  .region__lead {
    font-size: 15px;
    line-height: 1.95;
  }

  .region__list {
    margin-top: 32px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

  .region__name {
    font-size: 17px;
  }

  /* ★⑫はSPでも縦1列のままです。左のQ帯と余白だけを詰めます */
  .qa__title {
    font-size: 24px;
  }

  .qa__q {
    padding: 18px 28px 18px 24px;
    font-size: 16px;
    line-height: 1.75;
  }

  .qa__q::before,
  .qa__q::after {
    top: 18px;
    font-size: 11px;
    line-height: 2.55;
  }

  .qa__a {
    padding: 0 0 20px 24px;
  }

  .qa__a p {
    font-size: 15px;
    line-height: 1.95;
  }

  /* ★⑬はSPでも縦1列のままです。見出しと一覧の余白だけを詰めます */
  .contact__title {
    font-size: 24px;
  }

  .contact__lead {
    font-size: 15px;
    line-height: 1.95;
  }

  .contact__ask-name {
    margin-top: 40px;
    font-size: 18px;
  }

  .contact__item {
    padding: 14px 0 14px 24px;
    font-size: 15px;
  }

  /* ★⑭はSPでも縦1列のままです。継ぎ目が72pxになるため上余白を合わせ、
     文字はヘッダーのロゴと同じSP値へ詰めます（②.wv と同じ作法） */
  .footer {
    padding-top: 72px;
  }

  .footer__mark {
    font-size: 18px;
    letter-spacing: 0.20em;
  }

  .footer__area {
    font-size: 11px;
    padding-left: 10px;
  }

  .footer__copy {
    margin-top: 44px;
    padding: 20px var(--gutter) 28px;
    font-size: 12px;
  }

}


/* ============================================================
   動きを減らす設定（WCAG 2.3.3 / 大阪と同じ配慮）
   ------------------------------------------------------------
   第一試作にアニメーションはありませんが、
   今後追加したときに備えて宣言だけ置いています。
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* 動きを減らす設定のときは FV 動画を出さず、poster の写真だけにする */
  .fv__media video { display: none; }

}