/* ============================================================
   福祉タクシー いろは — メインスタイルシート
   配色：パレットG（朱オレンジ×ベージュ）skills/care-taxi-site/design-system/palettes/g-shu-beige.md
   - 赤（電話CTA）と緑（サブ）を使わない。電話CTAも濃いオレンジ
   - ヘッダーはベージュ地、CTA帯はオレンジ（ボタンは白地）、フッターはこげ茶
   見出し（h1・h2）と屋号は Zen Maru Gothic 700
   見出し下の飾りは、車体の屋号マークのスマイルの曲線（実測した円弧を縮小）
   ブレークポイント：〜640 / 641〜1024 / 1025〜（3段階・厳守）
   ============================================================ */

/* ----- CSS変数 ----- */
:root {
  /* 朱オレンジ系（メインカラー）。#F8451A は大きな文字専用（白地3.59:1） */
  --color-primary:       #F8451A;
  --color-primary-light: #FB8F6E;
  --color-primary-dark:  #D23001;   /* 本文サイズのオレンジ・リンク・CTA帯（白地5.04:1／ベージュ地4.51:1） */

  /* アクセント（電話CTA）＝メインの濃色と同じ値。赤は使わない */
  --color-accent:        #D23001;
  --color-accent-light:  #FB8F6E;
  --color-accent-dark:   #A82600;

  /* からし色系（サブカラー） */
  --color-sub:           #7E6212;
  --color-sub-light:     #E3CF62;

  /* 淡色チップ・濃色背景上テキスト */
  --color-primary-pale:  #FFE1D2;
  --color-accent-pale:   #FBEBD0;
  --color-sub-pale:      #F5EFD3;
  --color-on-dark:       #FFD66B;   /* フッター（こげ茶）上の電話番号専用 */

  /* ニュートラル（こげ茶） */
  --color-text:          #352C20;
  --color-text-secondary:#665645;
  --color-text-muted:    #725F4B;
  --color-bg:            #FFFFFF;
  --color-bg-light:      #F9F1E7;
  --color-bg-warm:       #FDF0E6;
  --color-border:        #EADFC8;
  --color-border-strong: #D9C9A0;
  --color-footer-bg:     #352C20;

  /* フォームカラー（全パレット共通） */
  --color-error:         #D9363E;
  --color-success:       #2E8B57;
  --color-warning:       #E8A020;

  --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", 'Noto Sans JP', sans-serif;
  --font-heading: 'Zen Maru Gothic', "Hiragino Maru Gothic ProN", var(--font-sans);
  --font-phone: 'Oswald', 'Noto Sans JP', sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-phone: 38px;

  --leading-tight:  1.4;
  --leading-normal: 1.8;

  --radius: 8px;
  --shadow: 0 2px 14px rgba(53,44,32,0.09);
}

/* ----- Material Symbols ----- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}
.btn .material-symbols-outlined { font-size: 22px; }
.cta-bar-btn .material-symbols-outlined { font-size: 22px; }
/* Google Fonts の CDN が .material-symbols-outlined に font-size:24px を直指定するため、複合セレクタで上書きする */
.material-symbols-outlined.icon-xl { font-size: 48px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }

/* ----- リセット・ベース ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--text-base); scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: var(--leading-normal);
  letter-spacing: -0.01em;
  background: var(--color-bg);
}

/* 見出しは丸ゴシック。字間は標準より強めに詰める */
h1, h2 {
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
}

img { max-width: 100%; height: auto; display: block; }
/* リンクは primary-dark（白地5.04:1）。primary は本文サイズに使えない */
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
ul, ol { list-style: none; }
figure { margin: 0; }

/* ----- レイアウト ----- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 800px; }
/* 他ページからのアンカー着地点。ヘッダーが sticky のため、その分下げる */
.anchor-target { scroll-margin-top: 96px; }

.section { padding: 64px 0; }
.section-alt { background: var(--color-bg-light); }

/* H2は朱オレンジ（28px太字＝大テキスト） */
.section-title {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: var(--leading-tight);
  text-wrap: balance;
}
/* 見出しは HTML の <wbr>（文節の区切り）でだけ折り返す。日本語はどの文字間でも改行でき、
   balance と組むと「こんなときにご／利用ください」のように単語の途中で割れるため（2026-10-15）。
   区切りの間が1行に収まらない極端に狭い幅では、overflow-wrap で例外的にどこでも折り返す */
.section-title, .cta-title, .page-hero-title, .rep-title, .faq-category-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.section-subtitle {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  margin-top: 12px;
}
.section-divider { text-align: center; margin-bottom: 40px; }
/* 見出し下の飾り：車体の屋号マークの「スマイル」の曲線。
   マークを実測した形（開き角およそ136°の円弧・深さは幅の約1/3・線端は丸）を縮小している。
   色は --color-primary（パレットを替えても追従する）。サブタイトルより前に表示するため order で並べ替える */
.section-divider { display: flex; flex-direction: column; align-items: center; }
.section-divider .section-title { order: 1; }
.section-divider::after {
  content: '';
  order: 2;
  display: block;
  width: 44px;    /* 56×22 から一回り（約8割）小さく（2026-10-15 平井の指定）。線の太さも比例して約3.1pxになる */
  height: 17px;
  margin-top: 10px;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 22'%3E%3Cpath d='M2 2A28.08 28.08 0 0 0 54 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 22'%3E%3Cpath d='M2 2A28.08 28.08 0 0 0 54 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.section-divider .section-subtitle { order: 3; }

.subsection-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 12px;
}

/* ----- ヘッダー（ベージュ地＋こげ茶の文字） ----- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-family: var(--font-heading);   /* 見出しと同じ丸ゴシック（車体の屋号に寄せる） */
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.3;
  min-width: 0;
}
.site-logo:hover { text-decoration: none; }
.site-logo small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-secondary);
}
/* マスコットのロゴは白い角丸の上に載せる */
.site-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-bg);
  padding: 2px;
  flex-shrink: 0;
}
.site-logo-mark img { width: 100%; height: 100%; object-fit: contain; }

/* 電話番号：スマホでは非表示（ヒーローに大きな電話番号があるため）。
   パレットGはヘッダーが明るいので、番号は primary-dark（on-dark の黄はベージュ地で読めない） */
.header-phone {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  text-decoration: none;
}
.header-phone:hover { text-decoration: none; }
.header-phone-label { font-size: var(--text-xs); color: var(--color-text-secondary); }
.header-phone-num { font-family: var(--font-phone); font-size: 24px; font-weight: 500; letter-spacing: 0.04em; color: var(--color-primary-dark); }

.site-nav { display: none; }
.site-nav ul { display: flex; gap: 2px; }
.site-nav a {
  display: block;
  padding: 8px 12px;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: border-color 0.15s;
}
.site-nav a:hover { border-bottom-color: var(--color-border-strong); text-decoration: none; }
.site-nav a.active { border-bottom-color: var(--color-primary); }

/* ハンバーガー：白地＋枠線の角丸ボタン（2026-10-14 平井の指定。トップページの試作と同じ見た目） */
.nav-toggle {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: var(--color-bg);
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s, top 0.2s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-nav {
  display: none;
  position: absolute;   /* ヘッダー直下にオーバーレイ（レイアウトシフト防止） */
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  padding: 4px 0 12px;
  box-shadow: 0 8px 16px rgba(53,44,32,0.2);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 14px 24px;
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav a:hover, .mobile-nav a.active { background: var(--color-bg); text-decoration: none; }

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
}
.nav-backdrop.open { display: block; }
/* メニューを開いている間は背面をスクロールさせない（js/main.js が html に付ける）。
   スクロール位置を保ったまま止めるので、iOS Safari のツールバーが伸縮せず固定CTAバーも動かない。
   scrollbar-gutter はスクロールバーが場所を取る環境（PCブラウザのタブレット幅）で、消えた分だけ横にずれるのを防ぐ */
html.menu-open { overflow: hidden; scrollbar-gutter: stable; }

/* ----- ボタン ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
  min-width: 200px;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }

/* 電話CTA：濃いオレンジ（白文字5.04:1） */
.btn-tel {
  background-color: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(210,48,1,0.35), 4px 4px 3px rgba(0,0,0,0.28);
}
.btn-tel:hover { background-color: var(--color-accent-dark); color: #fff; }

/* サブのボタン：白地＋黄みのベージュの枠＋濃いオレンジの文字 */
.btn-outline {
  background-color: #fff;
  color: var(--color-primary-dark);
  border-color: var(--color-border-strong);
  box-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}
.btn-outline:hover { border-color: var(--color-primary-dark); color: var(--color-primary-dark); }

.btn-group { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ----- ヒーロー ----- */
/* スマホ：上に写真、下にピーチ寄りのベージュ地の文字。
   タブレット・PC：写真を幅いっぱいに敷き、文字・ボタンは前面に置く。
   写真（hero.webp）は車体を切り抜いて背景にフィルターをかけたもの */
.hero { position: relative; background: var(--color-bg-warm); overflow: hidden; }
.hero-photo { aspect-ratio: 4 / 3; background: url('../img/hero.webp') center / cover no-repeat; }
/* スマホ：写真の下端を、h2の飾り・屋号マークと同じ「笑った口」の曲線で切る（2026-10-15 平井の指定）。
   横に幅の1.05倍まで張り出した楕円の下側だけを使うので、両端は角にならずに斜めに抜ける。
   中央の深さは写真の高さの約12%（375px幅で約34px） */
.hero-photo { clip-path: ellipse(105% 100% at 50% 0%); }
.hero-inner { position: relative; z-index: 1; padding-top: 28px; padding-bottom: 44px; }
.hero-eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-primary-pale);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 14px;
}
/* 見出しの右にロゴマーク。マークの高さは見出し2行ぶん（文字サイズ×行間1.4×2行）に揃える。
   見出し1行目（10文字）とマークが横に収まるよう、文字サイズを画面幅に連動させる */
.hero { --hero-title-size: clamp(20px, 6.4vw, 30px); }
.hero-heading { display: flex; align-items: center; gap: 12px; }
.hero-title {
  font-size: var(--hero-title-size);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--color-text);
}
.hero-title em { font-style: normal; color: var(--color-primary-dark); }
.hero-mark {
  flex-shrink: 0;
  width: calc(var(--hero-title-size) * 2.8);
  height: calc(var(--hero-title-size) * 2.8);
  object-fit: contain;
}
.hero-sub { margin-top: 14px; color: var(--color-text-secondary); max-width: 25em; }
.hero-phone-block { margin-top: 22px; }
.hero-phone-label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); }
.hero-phone {
  display: inline-block;
  font-family: var(--font-phone);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--color-accent);
  text-decoration: none;
}
.hero-phone:hover { color: var(--color-accent-dark); text-decoration: none; }
.hero .btn-group { justify-content: flex-start; margin-top: 22px; }

/* ----- ご利用の前に（ヒーロー直下の4項目） ----- */
.notice { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.notice-list { display: grid; gap: 10px 28px; padding: 22px 0; }
.notice-list li { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; line-height: 1.6; }
.notice-list .material-symbols-outlined { color: var(--color-sub); font-size: 24px; flex-shrink: 0; }

/* ----- 特徴カード ----- */
.features-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.feature-card {
  background: var(--color-bg);
  border-radius: 10px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow);
}
.feature-icon { margin-bottom: 10px; line-height: 1; }
.feature-icon .material-symbols-outlined { font-size: 40px; color: var(--color-primary); }
.feature-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); margin-bottom: 8px; line-height: var(--leading-tight); }
.feature-text { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.7; text-align: left; }

/* ----- 利用シーン ----- */
.scene-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.scene-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px 18px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.scene-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary-pale);
  display: grid;
  place-items: center;
}
.scene-icon .material-symbols-outlined { font-size: 28px; color: var(--color-primary-dark); }
.scene-title { font-size: var(--text-lg); font-weight: 700; line-height: 1.5; color: var(--color-text); }

/* ----- ステップ ----- */
.steps { display: grid; grid-template-columns: 1fr; gap: 0; position: relative; }
.step { text-align: center; padding: 22px 16px; position: relative; }
.step::after {
  content: '›';
  display: none;
  position: absolute;
  right: -8px;
  top: 34px;
  font-size: 28px;
  line-height: 1;
  color: var(--color-border-strong);
}
.step:last-child::after { display: none; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-phone);
  font-size: var(--text-xl);   /* 朱オレンジ地の白文字は大きく */
  font-weight: 500;
  margin-bottom: 12px;
}
.step-title { font-weight: 700; font-size: var(--text-lg); color: var(--color-text); margin-bottom: 6px; }
.step-text { font-size: var(--text-base); color: var(--color-text-secondary); line-height: 1.7; }

/* ----- 代表（トップ） ----- */
.rep { display: grid; gap: 28px; align-items: center; }
.rep-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow); }
.rep-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.03em; color: var(--color-primary); line-height: var(--leading-tight); margin-bottom: 16px; }
.rep-body p { margin-bottom: 14px; }
.rep-name { font-weight: 700; }
.rep-name small { font-weight: 400; color: var(--color-text-secondary); margin-right: 8px; }
.rep-body .btn-group { justify-content: flex-start; margin-top: 8px; }

/* ----- バッジ ----- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
}
.badge-area { background: var(--color-primary-pale); }
.badge-note { background: var(--color-accent-pale); }
.badge-cert { background: var(--color-sub-pale); }
.badge .material-symbols-outlined { font-size: 18px; color: var(--color-sub); }
.badge-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* ----- 対応エリア ----- */
.area-lead {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  text-align: center;
  margin-bottom: 20px;
}
.area-lead em { font-style: normal; color: var(--color-primary-dark); }
.area-badges { justify-content: center; }
.area-badges .badge-area { font-size: var(--text-lg); padding: 8px 22px; }

/* ----- CTAバナー（オレンジの面。サイトでオレンジを面で使うのはここだけ） ----- */
.cta-banner {
  /* 背景に車両写真（vehicle_01 → img/cta.webp）、手前にキーカラーの半透明フィルター（2026-10-15 平井の指定）。
     標準（primary-dark 0.72 → primary #F8451A 0.66）では白い車体の上で白文字が約2.9:1しかなく、
     明るい側を accent-dark #A82600 に替えて不透明度も上げた：primary-dark 0.88 → accent-dark 0.85。
     白い車体の上でも帯の中央で約4.9:1（左上の角で約4.3:1） */
  background:
    linear-gradient(135deg, rgba(210,48,1,0.88), rgba(168,38,0,0.85)),
    url('../img/cta.webp') center / cover no-repeat;
  background-color: var(--color-primary-dark);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.cta-title { font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-tight); text-wrap: balance; }
.cta-sub { margin-top: 10px; }
/* CTA帯の電話番号は白（on-dark の黄はオレンジの上で3.62:1しかない） */
.cta-phone {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-phone);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
}
.cta-phone:hover { color: #fff; text-decoration: none; }
.cta-banner .btn-group { margin-top: 22px; }
/* 帯の上のボタンは白地（同じオレンジのボタンは帯に溶ける） */
.btn-on-band {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 4px 4px 3px rgba(0,0,0,0.28);
}
.btn-on-band:hover { background: var(--color-bg-light); color: var(--color-primary-dark); }

/* ----- 料金テーブル ----- */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.price-table th, .price-table td { padding: 14px 20px; border-bottom: 1px solid var(--color-border); text-align: left; }
/* 見出し行は primary-dark（#D23001）だと発色が強いため、彩度を抑えたくすみ朱にする（白文字 4.61:1・AA） */
.price-table th { background: #C84D2A; color: #fff; font-weight: 700; }
.price-table tr:last-child td { border-bottom: none; }
.price-table tbody tr:nth-child(even) td { background: var(--color-bg-light); }
.price-table .price-amount { font-weight: 700; color: var(--color-primary-dark); font-size: var(--text-lg); }

/* 狭い画面では横スクロール。項目名・金額の途中改行を防ぐ */
.price-table { min-width: 500px; table-layout: fixed; }
.price-table th, .price-table td { white-space: nowrap; vertical-align: middle; }
.price-table th:nth-child(1), .price-table td:nth-child(1) { width: 34%; white-space: normal; }
.price-table th:nth-child(2), .price-table td:nth-child(2) { width: 24%; }
.price-table th:last-child, .price-table td:last-child { width: 42%; white-space: normal; }

/* 横スクロールのラッパー（scroll-hint）。行の少ない表で縦スクロールが出ないよう縦方向は切る。
   scroll-hint の JS が要素に style="overflow:auto" を書き込むので !important で上書きする */
.js-scrollable { overflow-y: hidden !important; }
.js-scrollable .scroll-hint-icon { top: calc(50% - 45px); }

/* ----- 料金構造の図解 ----- */
.price-structure { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.price-structure-item {
  width: 100%;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}
.price-structure-icon { font-size: 40px; color: var(--color-primary); margin-bottom: 8px; }
.price-structure-label { font-weight: 700; font-size: var(--text-lg); color: var(--color-text); margin-bottom: 4px; }
.price-structure-desc { font-size: var(--text-sm); color: var(--color-text-secondary); }
.price-structure-op {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  transform: rotate(90deg);
}
/* 料金表の見出し行と同じくすみ朱にそろえる（白文字 4.61:1・AA） */
.price-structure-item.price-structure-total { background: #C84D2A; border-color: #C84D2A; }
.price-structure-item.price-structure-total .price-structure-icon,
.price-structure-item.price-structure-total .price-structure-label,
.price-structure-item.price-structure-total .price-structure-desc { color: #fff; }

/* ----- お支払い方法 ----- */
.pay-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
.pay-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pay-item > .material-symbols-outlined { font-size: 36px; color: var(--color-primary); flex-shrink: 0; }
.pay-item h3 { font-size: var(--text-lg); margin-bottom: 4px; }
.pay-item p { font-size: var(--text-base); color: var(--color-text-secondary); }

/* ----- FAQ アコーディオン ----- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--text-base);
  font-family: var(--font-sans);
  color: var(--color-text);
  font-weight: 700;
  line-height: var(--leading-normal);
}
.faq-question:hover { color: var(--color-primary-dark); }
.faq-q-label {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  margin-top: 2px;
}
.faq-q-text { flex: 1; }
.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--color-text-muted);
  transition: transform 0.25s;
}
.faq-item.open .faq-chevron { transform: rotate(180deg); }
/* 開閉は grid-template-rows（0fr → 1fr）のトランジションで行う（JSで高さを測らない）。
   0fr まで縮められるよう、中身は .faq-answer-inner で包み、下余白は末尾の要素に持たせる */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  padding: 0 0 0 40px;
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  transition: grid-template-rows 0.25s ease, visibility 0.25s;
}
.faq-answer.open { grid-template-rows: 1fr; visibility: visible; }
.faq-answer-inner { overflow: hidden; min-height: 0; }
.faq-answer-inner > :last-child { padding-bottom: 20px; }
.faq-answer p + p { margin-top: 12px; }
.faq-answer a { text-decoration: underline; }
.faq-category-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  margin: 44px 0 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border-strong);
}
.faq-category-title:first-of-type { margin-top: 0; }

/* ----- パンくず ----- */
.breadcrumb { padding: 0 0 12px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.breadcrumb a { color: var(--color-primary-dark); text-decoration: underline; }
.breadcrumb span + span::before { content: ' › '; }

/* ----- ページヘッダー（下層） ----- */
/* ピーチ寄りのベージュ地にこげ茶の見出し。右端にヒーロー写真をうっすら見せる */
.page-hero {
  position: relative;
  padding: 24px 0 32px;
  overflow: hidden;
  background: var(--color-bg-warm);
  border-bottom: 4px solid var(--color-primary-pale);
}
.page-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  background: url('../img/hero.webp') center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.55) 100%);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero-title {
  font-size: clamp(28px, 7.4vw, var(--text-3xl));
  text-wrap: balance;
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin-bottom: 6px;
}
.page-hero-sub { font-size: var(--text-base); color: var(--color-text); }

/* ----- プロフィール（運営者情報） ----- */
.profile-block { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.profile-photo { flex-shrink: 0; width: 200px; }
.profile-photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
  border-radius: 50%;
  border: 6px solid var(--color-bg-light);
  box-shadow: 0 8px 20px rgba(53,44,32,0.16);
}
.profile-body p { margin-bottom: 14px; }
.profile-body p:last-child { margin-bottom: 0; }
.profile-name { font-weight: 700; font-size: var(--text-xl); color: var(--color-text); margin-bottom: 12px; }
.profile-name small { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.story p + p { margin-top: 14px; }

.about-photos { display: grid; grid-template-columns: 1fr; gap: 16px; }
.about-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
/* 開業のきっかけ：本文の後に置く代表の写真（scene_01） */
/* 大きさは「お迎えに上がる車両」の写真（.about-photos の1枚）に揃える（2026-10-15 平井の指定）。
   スマホは両方とも全幅。タブレット・PCは車両側が2列なので、その1列分の幅を計算で出して中央に置く。
   幅の基準はセクション自身の幅（cqw）。100vw だとスクロールバーの幅まで含んで、PCブラウザで7〜8px大きくなる */
.section--story { container-type: inline-size; }
.story-photo { margin: 32px auto 0; }
.story-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-photos figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 6px; text-align: center; }

/* ----- 概要テーブル ----- */
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  vertical-align: top;
  font-size: var(--text-base);
  text-align: left;
}
.info-table th { background: var(--color-bg-light); font-weight: 700; width: 34%; }

/* ----- カード ----- */
.card { background: #fff; border-radius: 12px; padding: 28px; box-shadow: var(--shadow); }
.card--accent { border: 1px solid var(--color-primary-dark); box-shadow: none; }
.card-title { font-size: var(--text-xl); font-weight: 700; color: var(--color-text); margin-bottom: 12px; }
.card-title .material-symbols-outlined { font-size: 28px; vertical-align: -5px; color: var(--color-primary-dark); }
.card-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.card-center { text-align: center; }
.card-center > .material-symbols-outlined { color: var(--color-primary); margin-bottom: 8px; }
.card-center h3 { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.card-center p { font-size: var(--text-base); color: var(--color-text-secondary); }
.contact-card { max-width: 520px; margin: 0 auto 32px; }
.contact-card .btn-group { margin-top: 16px; }

/* ----- 機材・車両カード ----- */
.equipment-photo {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.equipment-photo img { width: 100%; height: 100%; object-fit: contain; }
.equipment-photo--cover { padding: 0; }
.equipment-photo--cover img { object-fit: cover; }
.equipment-photo--empty {
  border: 1px dashed var(--color-border-strong);
  flex-direction: column;
  gap: 6px;
  color: var(--color-text-muted);
}
.equipment-photo--empty .material-symbols-outlined { font-size: 48px; }
.equipment-photo-label { font-size: var(--text-xs); }
.equipment-name { font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); margin-bottom: 6px; }
.equipment-desc { font-size: var(--text-base); color: var(--color-text-secondary); }

/* ----- 仕様リスト ----- */
.spec-list { margin-top: 8px; }
.spec-list li { position: relative; padding: 5px 0 5px 28px; font-size: var(--text-base); color: var(--color-text-secondary); }
.spec-list li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-sub);
}

/* ----- 注意書き ----- */
.note { font-size: var(--text-base); color: var(--color-text-muted); padding-left: 1em; text-indent: -1em; }
.note::before { content: '※ '; }
.note-box {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 16px;
}
.note-box-title { font-size: var(--text-base); font-weight: 700; margin-bottom: 8px; color: var(--color-text); }
.note-box li { font-size: var(--text-base); color: var(--color-text-secondary); padding: 3px 0 3px 1.2em; position: relative; }
.note-box li::before { content: '・'; position: absolute; left: 0; }
.note-box .spec-list li { padding-left: 28px; }
.note-box .spec-list li::before { content: ''; }
.note-box--plain { background: var(--color-bg); }

/* ----- フッター（こげ茶） ----- */
.site-footer { background: var(--color-footer-bg, var(--color-primary-dark)); color: rgba(255,255,255,0.82); padding: 44px 0 24px; }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 28px; }
.footer-info { flex: 1; min-width: 220px; }
.footer-name { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-name .site-logo-mark { width: 40px; height: 40px; }
.footer-info p { font-size: var(--text-sm); margin-bottom: 4px; }
.footer-info a { color: #fff; text-decoration: underline; }
.footer-info .footer-phone { font-family: var(--font-phone); font-size: 24px; letter-spacing: 0.04em; margin: 4px 0 8px; }
.footer-phone a { color: var(--color-on-dark); text-decoration: none; }
.footer-nav { flex: 1; min-width: 200px; }
.footer-nav-title { font-size: var(--text-sm); font-weight: 700; color: #fff; margin-bottom: 10px; letter-spacing: 0.08em; }
.footer-nav ul { display: flex; flex-direction: column; gap: 4px 0; }
.footer-nav a { font-size: var(--text-sm); color: rgba(255,255,255,0.82); padding: 3px 0; display: block; }
.footer-nav a:hover { color: #fff; }
.footer-copy {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 16px;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.62);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 10px;
}
.footer-copy a { color: rgba(255,255,255,0.8); text-decoration: underline; }
.footer-copy a:hover { color: #fff; }
.footer-copy-sep { color: rgba(255,255,255,0.3); }
.footer-credit { white-space: nowrap; }

/* ----- プライバシーポリシー ----- */
.policy-intro { margin-bottom: 28px; }
.policy-article { margin-bottom: 28px; }
.policy-article:last-child { margin-bottom: 0; }
.policy-article h2 {
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border-strong);
  line-height: var(--leading-tight);
}
.policy-article h3 { font-size: var(--text-base); color: var(--color-text); margin: 16px 0 6px; }
.policy-article p { margin-bottom: 10px; }
.policy-article p:last-child { margin-bottom: 0; }
.policy-list { margin: 8px 0 0; }
.policy-list li { position: relative; padding: 4px 0 4px 1.2em; }
.policy-list li::before { content: '・'; position: absolute; left: 0; color: var(--color-primary-dark); }
.policy-date { margin-top: 32px; text-align: right; color: var(--color-text-muted); font-size: var(--text-sm); }
/* 長いURLで横スクロールが出ると sticky ヘッダーがずれて見えるため折り返す */
.policy-article a { overflow-wrap: anywhere; }

/* ----- モバイル固定CTAバー（スマホのみ。641px〜は非表示） ----- */
.mobile-cta-bar {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  padding: 10px 16px max(14px, env(safe-area-inset-bottom));
  box-shadow: 0 -3px 16px rgba(53,44,32,0.12);
  z-index: 200;
  text-align: center;
}
.cta-bar-label { font-size: var(--text-xs); color: var(--color-text-secondary); margin-bottom: 6px; }
.cta-bar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 16px;   /* 13px → 9px（2026-10-15 平井の指定）。高さ約58px → 約50px。タップ領域44px以上は保つ */
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-lg);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(210,48,1,0.3), 4px 4px 3px rgba(0,0,0,0.28);
  transition: background-color 0.2s;
}
.cta-bar-btn:hover { background: var(--color-accent-dark); color: #fff; text-decoration: none; }

/* 固定バー分のコンテンツ余白（〜640px）。--cta-bar-h は js/main.js が実測してセットする */
@media (max-width: 640px) {
  body { padding-bottom: var(--cta-bar-h, calc(110px + env(safe-area-inset-bottom))); }
}

/* スマホ（〜640px） */
@media (max-width: 640px) {
  .cta-phone { font-size: 34px; }
  /* 事業概要表：項目名が1〜2文字ずつ折り返すため、スマホでは項目名と内容を縦に積む */
  .info-table th, .info-table td { display: block; width: 100%; }
  .info-table th { border-bottom: none; padding: 8px 16px; }
  .info-table td { border-top: none; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq-answer, .nav-toggle span, .btn { transition: none; }
}

/* ============================================================
   タブレット（641px〜）
   ============================================================ */
@media (min-width: 641px) {
  .container { padding: 0 24px; }
  .header-inner { padding: 10px 24px; }
  .section { padding: 72px 0; }
  .site-logo { font-size: var(--text-xl); }
  .site-logo-mark { width: 48px; height: 48px; }
  .header-phone { display: flex; margin-left: auto; }

  .card-grid, .scene-grid, .pay-list { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .notice-list { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .step::after { display: block; }
  .step:last-child::after { display: none; }
  .about-photos { grid-template-columns: 1fr 1fr; }
  /* 車両写真1列分：(画面幅 − 左右余白24px×2 − 列間16px) ÷ 2 */
  .story-photo { width: calc((100cqw - 64px) / 2); }
  .area-lead { font-size: var(--text-2xl); }
  .price-structure { flex-direction: row; justify-content: center; align-items: stretch; gap: 20px; }
  .price-structure-item { display: flex; flex-direction: column; justify-content: center; }
  .price-structure-op { transform: none; }
  /* 固定CTAバーはスマホだけ。タブレットはヘッダーの電話番号で足りる（平井の指定） */
  .mobile-cta-bar { display: none; }
  .cta-phone { font-size: 48px; }
  .info-table th { width: 240px; }
  .profile-block { flex-direction: row; align-items: flex-start; gap: 40px; }
  .profile-photo { width: 220px; }
  .page-hero { padding: 32px 0 40px; }

  /* ヒーロー：写真を幅いっぱいに敷き、文字・ボタンはその前面に置く（2026-10-14 平井の指定）。
     文字の可読性（フィルター・グラデーション）はこのあと平井が調整する */
  .hero { --hero-title-size: clamp(24px, 3.9vw, 34px); }
  .hero-heading { gap: 16px; }
  .hero-photo {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    clip-path: none;
  }
  .hero-inner { padding-top: 56px; padding-bottom: 56px; }
  /* 文字・ボタンをまとめた半透明のパネル。地色はヒーロー下地と同じピーチ寄りのベージュ（--color-bg-warm #FDF0E6）、
     枠は黄みのベージュ（--color-border-strong #D9C9A0）を薄くしたもの。奥の写真は軽くぼかして馴染ませる。
     幅は中身に合わせる（見出し＋ロゴマークの行がいちばん広い） */
  /* 下側2つの角は、横に幅の半分・縦に56pxの楕円にして、下辺全体を見出し下の飾り（屋号マークのスマイル）と
     同じ「笑った口」の曲線にする。曲線に掛からないよう下の余白を広めに取る */
  .hero-content {
    width: fit-content;
    max-width: 100%;
    padding: 28px 32px 44px;
    background: rgba(253,240,230,0.74);   /* 2026-10-14 0.86→0.74（奥の車体の開口部が見えるように） */
    border: 1px solid rgba(217,201,160,0.55);
    border-radius: 16px 16px 50% 50% / 16px 16px 56px 56px;
    box-shadow: 0 8px 28px rgba(53,44,32,0.14);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
  }
  .hero-phone { font-size: var(--text-phone); }
}

/* ============================================================
   PC（1025px〜）
   ============================================================ */
@media (min-width: 1025px) {
  .container { padding: 0 32px; }
  /* 車両写真1列分：(画面幅 − 左右余白32px×2 − 列間16px) ÷ 2。コンテナ上限1100pxで510pxに止まる */
  .story-photo { width: min(calc((100cqw - 80px) / 2), 510px); }
  .header-inner { padding: 10px 32px; }
  .section { padding: 80px 0; }
  .site-nav { display: block; }
  .nav-toggle, .mobile-nav { display: none; }
  .header-phone { margin-left: 0; }

  .card-grid, .features-grid { grid-template-columns: repeat(3, 1fr); }
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .scene-grid, .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .scene-card { flex-direction: column; text-align: center; padding: 28px 16px; }
  .notice-list { grid-template-columns: repeat(4, auto); justify-content: space-between; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .rep { grid-template-columns: 1fr 1.1fr; gap: 48px; }

  .hero { --hero-title-size: 42px; }
  .hero-inner { padding-top: 72px; padding-bottom: 72px; }
  .hero-content { padding: 36px 40px 52px; border-radius: 16px 16px 50% 50% / 16px 16px 64px 64px; }
}