/* ============================================================
   Aidrift コーポレートサイト 共通スタイル

   このファイルは全ページ（index / services / pricing / about / contact）で
   読み込む共通のスタイルです。

   ・配色は「資料/aidrift_master_data_2.md」1-3節のブランドカラー（確定値）に準拠しています。
     HEX値を勝手に変更しないでください。
   ・前半は既存の料金ページ（価格表/aidrift_pricing_4_3.html）のCSSをそのまま流用しています。
     クラス名・CSS変数名も同じものを使い、サイト全体で見た目が揃うようにしています。
   ・後半（「複数ページ用の追加スタイル」以降）が、今回のサイト用に追加した分です。
   ============================================================ */

:root{
  /* Aidrift Compass v1.2_Final「BRAND DESIGN 02 カラーパレット」に準拠した確定値。
     Ink Navy / Aidrift Blue / Aidrift Teal / Blue Wash。ロゴのグラデーションは
     Blue→Tealの2色構成（紫は不使用）。--blue-text / --focus-ring はAidriftBlueを
     白背景での本文コントラスト用に暗めに調整した派生色。 */
  --navy: #0B1220;
  --navy-soft: #26324A;
  --ink: #1A2338;
  --gray: #5B6472;
  --gray-soft: #8A93A3;
  --line: #E6E9F0;
  --bg-soft: #F6F8FC;
  --blue-wash: #EAF2FE;
  --blue: #0E76F5;
  --teal: #0FBBAA;
  --white: #FFFFFF;
  --wave-grad: linear-gradient(100deg, var(--blue) 0%, var(--teal) 100%);
  --wave-grad-deep: linear-gradient(100deg, #0A5CC2 0%, #0C9385 100%);
  --blue-text: #0B5FC7;
  --gray-mid: #66707F;
  --focus-ring: #0B5FC7;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-pill: 999px;
}

*{ box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

html{ overflow-x:hidden; scroll-behavior:smooth; }
body{
  margin:0;
  overflow-x:hidden;
  font-family:"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.8;
}

a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:6px;
}
.on-navy a:focus-visible, .on-navy button:focus-visible{ outline-color:#9FC4FF; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
section{ position:relative; }

h1, h2, h3{ line-height:1.5; margin:0; }

/* 見出しが言葉の途中で折れないようにする（2026-09-15に南望さんが指摘）。
   例：「すでに事業をされている方の、業務／が回る仕組みづくりを支援します」
   　→「すでに事業をされている方の、／業務が回る仕組みづくりを支援します」

   word-break:keep-all は、日本語のひとつながりの語句を途中で折らない指定。
   その結果、「、」や「。」のところで折れるようになる。
   overflow-wrap:anywhere は保険。1行に収まらないほど長い語句があったときだけ、
   途中で折ることを許す（これが無いと画面からはみ出す）。
   ⚠️ 見出しにだけ効かせている。本文に使うと、行の右端が大きく余ることがある。 */
h1, h2, h3, .plan-name, .founder-quote{
  word-break:keep-all;
  overflow-wrap:anywhere;
}

/* ============ Header ============ */
.site-header{
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.site-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:19px;
  color:var(--ink);
  text-decoration:none;
}
.site-logo .mark{
  width:26px; height:26px;
  border-radius:50%;
  background:var(--wave-grad);
  flex:none;
}
.header-cta{
  display:inline-block;
  background:var(--wave-grad-deep);
  color:var(--white);
  text-decoration:none;
  font-weight:700;
  font-size:13.5px;
  padding:11px 22px;
  border-radius:var(--radius-pill);
  white-space:nowrap;
}
@media (max-width:480px){
  .header-cta{ font-size:12.5px; padding:10px 16px; }
}

/* ============ Hero ============ */
.hero{
  min-height:calc(100svh - 79px);
  padding:84px 0 76px;
  display:flex;
  align-items:center;
  background-color:var(--white);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 45%, rgba(255,255,255,0.68) 72%, rgba(255,255,255,0.38) 100%),
    url("img/aidrift-cover.png");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  border-bottom:1px solid var(--line);
}
.hero .wrap{ max-width:1120px; text-align:left; }
.hero-copy{ max-width:620px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:0;
  color:var(--blue-text); background:rgba(14,118,245,0.08);
  padding:6px 16px; border-radius:var(--radius-pill); margin-bottom:22px;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--wave-grad); display:inline-block;
}
.hero h1{
  font-size:72px;
  font-weight:900;
  letter-spacing:0;
}
.hero h1 .sub{
  display:block;
  font-size:28px;
  font-weight:700;
  color:var(--ink);
  margin-top:8px;
}
.hero-lead{
  color:var(--gray);
  font-size:16px;
  max-width:640px;
  margin:22px 0 0;
}
.hero-actions{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:center;
  gap:14px;
}
.btn-primary{
  display:inline-block;
  background:var(--wave-grad-deep);
  color:var(--white);
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  padding:16px 38px;
  min-height:48px;
  border-radius:var(--radius-pill);
  box-shadow:0 12px 28px rgba(47,99,214,0.35);
}
.btn-secondary{
  display:inline-block;
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:14.5px;
  padding:14px 26px;
  min-height:48px;
  border-radius:var(--radius-pill);
  border:1.5px solid var(--line);
}
.hero-microcopy{
  margin:16px 0 0;
  font-size:12.5px;
  color:var(--gray-mid);
}
.hero-service-list{
  margin:28px 0 0;
  padding:18px 0 0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  border-top:1px solid var(--line);
}
.hero-service-list li{
  min-width:0;
  padding-left:14px;
  border-left:3px solid var(--teal);
}
.hero-service-list strong{
  display:block;
  font-size:13px;
  line-height:1.4;
  color:var(--ink);
}
.hero-service-list span{
  display:block;
  margin-top:4px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--gray-mid);
}
.audience-nav{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:20px;
}
.audience-nav a{
  font-size:13.5px;
  font-weight:700;
  color:var(--blue-text);
  text-decoration:none;
}
.audience-nav a:hover{ text-decoration:underline; }

/* ============ Section shell ============ */
.band{ padding:76px 0; }
.band.soft{ background:var(--bg-soft); }
.section-head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.section-head h2{ font-size:30px; font-weight:900; }
.section-head p{ color:var(--gray-mid); font-size:14.5px; margin:14px 0 0; }

/* ============ パソコン以外の相談も受けられる（beyond-pc） ============ */
/* 2026-09-15追加。料金ページのレビューで「Web制作会社の料金表に見える」と
   指摘されていた弱点への対処。入口（使い方サポート）のすぐ下に置いて、
   その先があることを見せる。文案は 会社/ホームページ_直したいことリスト.md 項目3。
   「経営コンサルタント」とは名乗らない（docs/decision-log.md 2026-09-14）。 */

/* お客様の「困りごと」を3つ並べる。実績やお客様の声ではなく、
   まだ相談に来ていない方が自分のこととして読めるようにするためのもの */
/* パソコンの画面では、3つとも1行に収まるようにしている（2026-09-15に南望さんの指示）。
   そのため max-width で狭めず、ページの幅いっぱい（1120px）まで使う。
   いちばん長い「人手が足りず、日々の業務が回らない」が19文字なので、
   文字の大きさ14.5px × 19 ＝ 約276px。カードの中身の幅（約304px）に収まる計算。
   ⚠️ ここに長い文章を足すと2行に戻ります。増やすときは文字数に気をつけてください。 */
.worry-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin:0 auto;
}
.worry-card{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 20px;
  font-size:14.5px;
  line-height:1.9;
  color:var(--ink);
  margin:0;
  text-align:center;
}

/* 経歴と考え方を述べる本文。読みやすさのため幅を絞って中央に置く */
.beyond-copy{
  max-width:720px;
  margin:44px auto 0;
}
.beyond-copy p{
  font-size:14.5px;
  line-height:2;
  color:var(--gray-mid);
  margin:0 0 20px;
}
/* この一行がいちばん伝えたいところなので、少しだけ大きく・濃くしている */
.beyond-copy p.beyond-point{
  font-size:18px;
  font-weight:700;
  line-height:1.8;
  color:var(--ink);
  text-align:center;
  margin:28px 0;
}
.beyond-copy p:last-child{ margin-bottom:0; }

/* ============ Why Aidrift ============ */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.why-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 26px;
  text-align:left;
}
.why-icon{
  width:44px; height:44px;
  border-radius:14px;
  background:var(--wave-grad);
  margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-weight:900; font-size:15px;
}
.why-card h3{ font-size:16.5px; font-weight:700; margin-bottom:10px; }
.why-card p{ font-size:13.5px; color:var(--gray-mid); margin:0; }

/* ============ Services overview grid ============ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.service-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  text-align:left;
  display:flex;
  flex-direction:column;
}

/* 会社概要の「4つの軸」だけ、左右の余白を24px→20pxにしています（2026-09-15）。
   Learn の説明が長く、24pxのままだと5行になって「ます。」だけが最後の行に
   残っていたためです（南望さんの指摘）。20pxにすると4行で収まります。
   文章はマスターデータ1-9節の確定文なので、文章側は変えていません。 */
#service-lines .service-card{ padding:28px 20px; }
.service-card .why-icon{
  width:44px; height:44px; border-radius:14px;
  background:var(--wave-grad); margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-weight:900; font-size:12.5px;
}
.service-card h3{ font-size:15.5px; font-weight:700; margin-bottom:10px; }
.service-card p{ font-size:13px; color:var(--gray-mid); margin:0 0 18px; flex:1; }
.service-link{
  font-size:13px; font-weight:700; color:var(--blue-text); text-decoration:none;
}
.service-link:hover{ text-decoration:underline; }

/* ============ トップページのサービス一覧だけ、横長の帯を縦に並べる ============ */
/* 2026-09-15に南望さんが選択。理由は3つ。
   ① この5つには順番がある（.claude/business.md：1がいちばん入りやすく、下にいくほど
      金額と関与が大きくなる）。横に並べると「どれか選んでね」というメニューに見えるが、
      縦に並べると「上から下への階段」に見え、すぐ上のセクションと話がつながる。
   ② 4列だと1枚が狭く、説明文が4〜6行に折れて読みにくかった。
   ③ スマホでも縦並びになるため、パソコンで見た人と同じ見え方になる。

   ⚠️ この指定は #services（トップページ）だけに効く。
   about.html の「4つの軸」と 404.html の案内は4枚なので、従来の4列のまま。 */
#services .services-grid{
  grid-template-columns:1fr;
  gap:14px;
  max-width:880px;
  margin:0 auto;
}
#services .service-card{
  display:grid;
  /* 左からアイコン・文章・リンクの3列。文章は2行（見出しと説明）に分ける */
  grid-template-columns:44px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title link"
    "icon desc  link";
  align-items:center;
  column-gap:20px;
  padding:22px 26px;
}
#services .service-card .why-icon{ grid-area:icon; margin:0; }
#services .service-card h3{ grid-area:title; margin:0 0 4px; }
#services .service-card p{ grid-area:desc; margin:0; flex:none; }
#services .service-card .service-link{ grid-area:link; white-space:nowrap; }

/* スマホでは3列に分けると文章の幅が足りなくなるため、縦積みに戻す */
@media (max-width:640px){
  #services .service-card{
    grid-template-columns:1fr;
    grid-template-areas:
      "icon"
      "title"
      "desc"
      "link";
    row-gap:10px;
    padding:24px 22px;
  }
  #services .service-card .why-icon{ margin-bottom:6px; }
  #services .service-card .service-link{ justify-self:start; }
}

/* ============ Consultative service detail (SME DX / AI support) ============ */
.service-detail{ max-width:900px; margin:0 auto; }
.service-detail-head{ text-align:center; max-width:640px; margin:0 auto 40px; }
.service-detail-head h2{ font-size:28px; font-weight:900; }
.service-detail-head p{ color:var(--gray-mid); font-size:14.5px; margin:14px 0 0; }
.consult-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:32px; }

/* パソコンの広い画面では、この2列だけ左右に広げる。
   幅が足りないと「…整えておきた／い」のように1文字だけ次の行に残ってしまうため
   （2026-09-15に南望さんが指摘）。900px→1072pxに広げると、2行になる項目が
   7個から1個に減ることを実測で確認した。
   1180px以上でのみ効かせているのは、それより狭いと画面からはみ出すため。 */
@media (min-width:1180px){
  .service-detail .consult-grid{ margin-left:-86px; margin-right:-86px; }
}

/* text-wrap:pretty は「最後の行に1文字だけ残る」のを避ける指定。
   上の幅を広げても収まりきらない文章のための保険として、文章と箇条書きに効かせている。
   対応していないブラウザでは無視されるだけで、害はない。 */
p, li{ text-wrap:pretty; }
.consult-block{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 26px;
}
.consult-block h3{ font-size:14.5px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.consult-block h3::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--wave-grad); flex:none; }
.consult-block ul{ list-style:none; margin:0; padding:0; }
.consult-block li{ position:relative; padding-left:20px; font-size:13.5px; color:var(--gray-mid); margin-bottom:12px; }
.consult-block li:last-child{ margin-bottom:0; }
.consult-block li::before{ content:"・"; position:absolute; left:0; color:var(--gray-soft); }
.service-detail-cta{ text-align:center; }

/* ============ About (Aidriftとはどんな会社なのか) ============ */
.about-layout{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:40px;
  align-items:start;
}
.about-copy h2{ font-size:28px; font-weight:900; margin:16px 0 18px; }
.about-lead{ font-size:14.5px; color:var(--gray-mid); margin:0 0 22px; }
.about-values{ list-style:none; margin:0; padding:0; }
.about-values li{
  position:relative; padding-left:24px; font-size:13.5px; color:var(--ink);
  margin-bottom:12px;
}
.about-values li::before{
  content:""; position:absolute; left:0; top:4px; width:14px; height:14px; border-radius:50%;
  background:var(--wave-grad);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/contain no-repeat;
}

.founder-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 26px;
  text-align:center;
}
.founder-avatar{
  width:72px; height:72px; margin:0 auto 16px;
  border-radius:50%;
  background-color:var(--blue-wash);
  /* 顔写真を入れるときは assets/img/founder.jpg を置くだけでかまいません。
     HTMLを書き換える必要はありません。
     ファイルがまだ無いうちは、上の淡い青の丸が表示されます
     （背景画像なので、画像切れのアイコンは出ません）。 */
  /* ⚠️ 画像のうしろの ?v= は消さないでください（2026-09-15に追加）。
     この写真の枠は2026-09-09から先に作ってあり、写真ファイルは9/15まで
     置かれていませんでした。その間にサイトを見た方のブラウザが
     「このファイルは無い」と記憶してしまい、写真を置いたあとも出ない状態に
     なっていました（南望さんの携帯で発覚）。
     ?v= を付けると別のファイル扱いになるため、記憶に関係なく届きます。
     写真を差し替えるときは、この日付も新しくしてください。 */
  background-image:url("img/founder.jpg?v=20260924c");
  background-size:cover;
  background-position:center;
}
/* 会社概要ページの「代表メッセージ」は、このページの主役なので写真を大きくしている。
   トップページ（about セクション）のほうは、文章が主役なので72pxのまま。 */
#founder .founder-avatar{ width:112px; height:112px; margin-bottom:20px; }

.founder-label{ font-size:12.5px; font-weight:700; letter-spacing:0; color:var(--blue-text); margin:0 0 10px; }
.founder-name{ font-size:14.5px; font-weight:700; color:var(--ink); margin:0 0 18px; }
.founder-quote{
  font-size:14px; font-weight:700; color:var(--ink); margin:0 0 18px; line-height:1.7; text-align:left;
}
.founder-message{ text-align:left; }
.founder-message p{ font-size:13px; color:var(--gray-mid); margin:0 0 12px; line-height:1.8; }
.founder-message p:last-child{ margin-bottom:0; }

/* ============ Vision (Aidriftが目指している世界) ============ */
/* 720px → 820px に広げています（2026-09-15）。
   720pxだと最後の段落が3行になり、3行目に「ます。」だけが残っていたためです
   （南望さんの指摘）。820pxにすると2行に収まります。
   この段落の文章はマスターデータ1-9節の確定文なので、文章側は変えていません。 */
.vision-block{ max-width:820px; margin:0 auto; text-align:center; }
.vision-block h2{
  font-size:32px; font-weight:900; margin:16px 0 24px;
}
.vision-block h2 .vision-en{
  display:block; font-size:.45em; font-weight:700; color:var(--gray-mid); margin-top:12px;
}
.vision-block p{ font-size:14.5px; color:var(--gray-mid); margin:0 0 16px; text-align:left; }
.vision-block p:last-of-type{ margin-bottom:0; }
/* パソコンの広い画面では、この3枚だけ左右に広げる（2026-09-15）。
   Mission・Vision・Value はAidriftの中核の言葉だが、幅が足りず
   「…に変／える。」「…共に／進む」のように2行に割れていた。
   1072pxまで広げると、3つとも1行で読める（実測で確認）。
   1180px以上でのみ効かせているのは、それより狭いと画面からはみ出すため。 */
@media (min-width:1180px){
  .vision-block .mvv-grid{ margin-left:-126px; margin-right:-126px; }
  .mvv-grid .why-card{ padding:32px 22px; }
}

.mvv-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
  margin-top:36px;
  text-align:left;
}
.mvv-grid .why-card p{ font-weight:700; color:var(--ink); }

/* ============ Value compare ============ */
.value-compare{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}
.value-compare h2, .value-compare h3{ font-size:26px; font-weight:900; }
.value-compare > p{ color:var(--gray-mid); font-size:14.5px; margin:18px 0 26px; }
.value-compare-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  text-align:left;
}
.value-compare-list li{
  position:relative;
  padding:16px 20px 16px 46px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  font-size:14px;
}
.value-compare-list li::before{
  content:"";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  background:var(--wave-grad-deep);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/contain no-repeat;
}

/* ============ Pricing ============ */
.tax-note{ text-align:center; font-size:13px; color:var(--gray-mid); margin-bottom:24px; }
.tax-note strong{ color:var(--ink); font-weight:700; }
.notes-list{ max-width:760px; margin:0 auto 56px; padding:0; list-style:none; }
.notes-list li{ position:relative; padding-left:20px; font-size:13px; color:var(--gray-mid); margin-bottom:10px; }
.notes-list li::before{ content:"※"; position:absolute; left:0; top:0; color:var(--gray-mid); }

.plans-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; align-items:stretch; }

.plan-card{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:36px 28px 32px;
  display:flex; flex-direction:column; box-shadow:0 2px 8px rgba(19,27,46,0.04);
}
.plan-card.featured{
  border:none; background:var(--navy); color:var(--white);
  padding-top:44px; box-shadow:0 20px 48px rgba(19,27,46,0.28); transform:translateY(-8px);
}
.plan-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--wave-grad-deep); color:var(--white); font-size:13px; font-weight:700;
  letter-spacing:0; padding:7px 20px; border-radius:var(--radius-pill);
  white-space:nowrap; box-shadow:0 6px 16px rgba(47,99,214,0.4);
}
/* 「Aidrift推奨」を目立たせる帯状バッジ。plan-badgeとの違いは、
   position:absoluteで浮かせずに文章の中にそのまま置けること。
   overflow:hiddenの枠（.learning-plans .plan-card）の中でも欠けずに表示できる
   （2026-09-24：浮かせるバッジだと上端が枠に隠れて文字が切れる不具合があったため） */
.badge-inline{
  display:inline-block; background:var(--wave-grad-deep); color:var(--white);
  font-size:12px; font-weight:700; letter-spacing:0; padding:4px 14px;
  border-radius:var(--radius-pill); white-space:nowrap; vertical-align:middle;
  box-shadow:0 4px 10px rgba(47,99,214,0.3);
}
.plan-name{ font-size:13px; font-weight:700; letter-spacing:0; color:var(--blue-text); margin-bottom:10px; }
.plan-card.featured .plan-name{ color:#9FC4FF; }
.plan-target{ font-size:13.5px; color:var(--gray); margin-bottom:22px; min-height:44px; }
.plan-card.featured .plan-target{ color:#B7BFD4; }
.plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom:4px; }
.plan-price .amount{ font-size:32px; font-weight:900; letter-spacing:0; }
.plan-price .yen{ font-size:16px; font-weight:700; }
.plan-price-note{ font-size:13px; color:var(--gray-mid); margin-bottom:22px; }
.plan-card.featured .plan-price-note{ color:#8891A8; }
.plan-divider{ border:none; border-top:1px solid var(--line); margin:0 0 24px; }
.plan-card.featured .plan-divider{ border-top-color:rgba(255,255,255,0.14); }
.plan-features{ list-style:none; margin:0 0 28px; padding:0; flex:1; }
.plan-features li{ position:relative; padding-left:26px; margin-bottom:13px; font-size:14px; color:var(--ink); }
.plan-card.featured .plan-features li{ color:#E7EAF3; }
.plan-features li::before{
  content:""; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%;
  background:var(--wave-grad);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/contain no-repeat;
}
.plan-specs{ margin:0 0 26px; padding:16px 18px; background:var(--bg-soft); border-radius:var(--radius-md); }
.plan-card.featured .plan-specs{ background:rgba(255,255,255,0.06); }
.plan-specs .spec-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:7px 0; }
.plan-specs .spec-row + .spec-row{ border-top:1px solid rgba(19,27,46,0.06); }
.plan-card.featured .plan-specs .spec-row + .spec-row{ border-top-color:rgba(255,255,255,0.1); }
.plan-specs dt{ color:var(--gray-mid); font-weight:500; flex:none; }
.plan-card.featured .plan-specs dt{ color:#AEB7CC; }
.plan-specs dd{ margin:0; text-align:right; font-weight:700; color:var(--ink); }
/* 括弧の中を途中で折り返さないための指定。
   これが無いと「（合計1時間ま」「で）」のように、括弧の途中で行が変わってしまう
   （2026-09-15に南望さんが指摘）。括弧を1かたまりにすると、括弧の前で折り返す。 */
.nowrap{ white-space:nowrap; }
.plan-card.featured .plan-specs dd{ color:var(--white); }
.plan-cta{
  display:block; text-align:center; text-decoration:none; font-size:14px; font-weight:700;
  padding:15px 20px; min-height:48px; border-radius:var(--radius-pill);
  border:1.5px solid var(--navy); color:var(--navy); transition:opacity .15s ease;
}
.plan-cta:hover{ opacity:.75; }
.plan-card.featured .plan-cta{ background:var(--wave-grad-deep); border:none; color:var(--white); }
.plan-cta-note{ text-align:center; font-size:12px; color:var(--gray-mid); margin-top:10px; }
.plan-card.featured .plan-cta-note{ color:#AEB7CC; }

.entry-plans{ margin-bottom:28px; }

/* ============ 中身が2つの料金枠だけ、横長の帯を縦に並べる ============ */
/* 2026-09-15。.plans-grid は「3つ並べる」前提のため、中身が2つだと
   右に1枠分の空きができて左に寄って見えていた（南望さんの指摘）。
   トップページのサービス一覧と同じ考え方で、横長の帯にしている。

   左に「名前・対象・金額・申し込みボタン」、右に「できること・お持ち帰り」。
   金額とボタンを縦に並べることで、「いくらで、どうすれば頼めるか」が
   ひとまとまりで読めるようにしている。

   ⚠️ この指定は learning-plans が付いた枠だけに効く。
   STEP 0〜2（3つ）と開業DX支援（3つ）は、従来どおり3列のまま。 */
.learning-plans{ grid-template-columns:1fr; gap:16px; }

.learning-plans .plan-card{
  display:grid;
  grid-template-columns:minmax(0, 300px) minmax(0, 1fr);
  column-gap:44px;
  align-items:start;
  padding:32px 34px 32px 42px;

  /* 白い帯が白い背景の上に2本並ぶと、境目が分からなくなるため淡い青にしている
     （2026-09-15に南望さんの指摘）。この色はサイトの他の場所でも使っている
     --bg-soft。面で使うときは淡色を使う、というデザインルールに沿っている
     （.claude/design.md）。他の料金カード（STEP 0〜2・MINIMUM等）は白のままなので、
     結果として「いちばん入りやすい入口の料金」が区別されて見える。 */
  background:var(--bg-soft);
  border-color:#DDE3EF;
  box-shadow:none;
  overflow:hidden;   /* 下の縦ラインを角丸の内側で切るため */
}
/* 左端のブランドカラーの縦ライン（青→ティール）。帯の始まりを示す目印 */
.learning-plans .plan-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:5px;
  background:var(--wave-grad);
}
/* 帯が淡い青になったぶん、中の「お持ち帰りいただくもの」は白にして反転させる。
   いちばん読ませたい「何が手に入るか」が浮き上がる */
.learning-plans .plan-takeaway{ background:var(--white); }
/* 左の列：上から順に固定で置く（自動配置に任せると隙間ができるため） */
.learning-plans .plan-card .plan-name{      grid-column:1; grid-row:1; }
.learning-plans .plan-card .plan-target{    grid-column:1; grid-row:2; }
.learning-plans .plan-card .plan-price{     grid-column:1; grid-row:3; }
.learning-plans .plan-card .plan-price-note{grid-column:1; grid-row:4; }
.learning-plans .plan-card .plan-cta{       grid-column:1; grid-row:5; margin-top:22px; }
.learning-plans .plan-card .plan-cta-note{  grid-column:1 / 3; grid-row:7; margin-top:12px; }
/* 右の列：できること（上）と、お持ち帰りいただくもの（下） */
.learning-plans .plan-card .plan-features{  grid-column:2; grid-row:1 / 5; margin:0; }
.learning-plans .plan-card .plan-takeaway{  grid-column:2; grid-row:5 / 7; margin:0; }
/* 横線は縦積みのときの区切りなので、横長のときは不要 */
.learning-plans .plan-card .plan-divider{ display:none; }

/* スマホ・タブレットでは、元どおり縦積みのカードに戻す */
@media (max-width:860px){
  .learning-plans .plan-card{
    display:flex;
    flex-direction:column;
    /* 左は縦ラインのぶん少し広げる。淡い青と縦ラインはスマホでもそのまま残す */
    padding:36px 28px 32px 34px;
  }
  .learning-plans .plan-card > *{ grid-column:auto; grid-row:auto; }
  .learning-plans .plan-card .plan-divider{ display:block; }
  .learning-plans .plan-card .plan-features{ margin-bottom:24px; }
  .learning-plans .plan-card .plan-takeaway{ margin:0 0 14px; }
  .learning-plans .plan-card .plan-cta{ margin-top:0; }
}
/* 右に「お持ち帰りいただくもの」が無いカード（ステップ1）は、箇条書きが上に詰まって見えるため、
   左の列の高さいっぱいを使って、縦の真ん中に置く（2026-11-07に南望さんの指示） */
.learning-plans .plan-card.no-takeaway .plan-features{ grid-row:1 / 6; align-self:center; }
@media (max-width:860px){
  .learning-plans .plan-card.no-takeaway .plan-features{ align-self:stretch; }
}
.entry-plan-card .plan-target{ min-height:0; }
.entry-plan-card .plan-features{ margin-bottom:24px; }

/* 「お持ち帰りいただくもの」＝相談後に手元に残る成果物。
   無料相談と有料相談の違いを金額以外で示すために表示しています。 */
.plan-takeaway{
  margin:0 0 14px; padding:12px 14px;
  background:var(--bg-soft); border-radius:var(--radius-md);
  font-size:13px; line-height:1.7; color:var(--ink);
}
.plan-takeaway .takeaway-label{
  display:block; font-weight:700; font-size:12px;
  color:var(--blue-text); margin-bottom:3px;
}
.plan-card.featured .plan-takeaway{ background:rgba(255,255,255,0.06); color:#E7EAF3; }
.plan-card.featured .plan-takeaway .takeaway-label{ color:#8FBEFF; }

/* 相談料の充当ルール。「相談だけで終わってもよい」と「進むなら無駄にならない」を
   同時に伝えるための案内で、値引き・キャンペーンとしては見せません。 */
.plan-credit{
  margin:0 0 18px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius-md);
  font-size:13px; line-height:1.7; color:var(--ink);
}
.plan-card.featured .plan-credit{ border-color:rgba(255,255,255,0.24); color:#E7EAF3; }
.entry-after-support{
  max-width:760px;
  margin:28px auto 0;
}

/* ============ Process flow ============ */
.process-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }

/* この枠は「4つ並べる」前提の指定です。
   トップページの「はじめの一歩から、その先まで」だけは中身が3つなので、
   4列のままだと右に1つ分の空きができ、全体が左に寄って見えます。
   そこだけ3列にして、見出しと同じ中心に揃えています（2026-09-15）。
   ※中身を4つに増やしたときは、この2行を消せば元の4列に戻ります。 */
#steps .process-steps{ grid-template-columns:repeat(3,1fr); }
.process-steps li{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px 22px; text-align:left;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--wave-grad-deep); color:var(--white); font-weight:900; font-size:14px;
  margin-bottom:16px;
}
.process-steps h3{ font-size:15px; font-weight:700; margin-bottom:8px; }
.process-steps p{ font-size:13px; color:var(--gray-mid); margin:0; }
.process-note{ text-align:center; font-size:13px; color:var(--gray-mid); margin:28px 0 0; }

/* ============ Info boxes ============ */
.info-box{ margin-top:24px; padding:26px 28px; background:var(--bg-soft); border-radius:var(--radius-lg); }
.info-box h2, .info-box h3{ font-size:15px; font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:8px; color:var(--ink); }
.info-box h2::before, .info-box h3::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--wave-grad); flex:none; }
.info-box p{ font-size:13.5px; color:var(--gray-mid); margin:0 0 12px; }
.info-box p:last-child{ margin-bottom:0; }
.info-box ul{ margin:0; padding:0 0 0 4px; list-style:none; }
.info-box ul li{ position:relative; padding-left:18px; font-size:13px; color:var(--gray-mid); margin-bottom:8px; }
.info-box ul li::before{ content:"・"; position:absolute; left:0; color:var(--gray-mid); }
.info-box ul li:last-child{ margin-bottom:0; }

/* ============ Options / legal ============ */
.options-block{ margin-top:24px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 32px 28px; }
.options-title{ font-size:15px; font-weight:700; margin:0 0 16px; display:flex; align-items:center; gap:8px; }
.options-title::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--wave-grad); }
.options-list{ columns:2; column-gap:32px; margin:0; padding:0; list-style:none; }
.options-list li{ font-size:13.5px; color:var(--gray); break-inside:avoid; padding:6px 0 6px 18px; position:relative; }
.options-list li::before{ content:"・"; position:absolute; left:0; color:var(--gray-soft); }
/* オプション名の下に添える一行説明。何が含まれるかを補うためのもの
   （2026-09-15、LINEを「初期設定」と「構築」に分けたときに追加） */
.options-list .option-note{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.7;
  color:var(--gray-soft);
}

.options-foot{ margin:18px 0 0; font-size:13px; color:var(--gray); border-top:1px solid var(--line); padding-top:18px; }

.legal-notice{
  margin-top:24px; padding:22px 26px; border:1px solid var(--line); border-radius:var(--radius-md);
  font-size:13px; color:var(--gray); display:flex; gap:14px; align-items:flex-start;
}
.legal-notice .icon{
  flex:none; width:20px; height:20px; border-radius:50%; background:var(--bg-soft); color:var(--blue-text);
  font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; margin-top:2px;
}

/* ============ Price ladder table (SME DX / continued support) ============ */
.price-table-block{ margin-top:40px; }
.price-table-heading{ font-size:15px; font-weight:700; margin:0 0 6px; }
.price-table-lead{ font-size:13px; color:var(--gray-mid); margin:0 0 18px; }
.price-table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white);
}
.price-table{ width:100%; border-collapse:collapse; min-width:560px; }
.price-table th, .price-table td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:top; }
.price-table tr:last-child td{ border-bottom:none; }
.price-table th{ color:var(--gray-mid); font-weight:700; font-size:12px; letter-spacing:0; background:var(--bg-soft); }
.price-table td.price-name{ font-weight:700; color:var(--ink); white-space:nowrap; }
.price-table td.price-amount{ font-weight:700; color:var(--blue-text); white-space:nowrap; }
.price-table td.price-desc{ color:var(--gray-mid); }
.price-table tr.price-featured td{ background:var(--blue-wash); }
.price-table-note{ font-size:12.5px; color:var(--gray-soft); margin:12px 2px 0; line-height:1.8; }

/* --- スマホでの料金表 ---
   横スクロールの表のままだと、画面の外にある「内容」列の文章が
   行の高さを決めてしまい、プラン名と料金の間隔がバラバラに見えます。
   スマホでは表をやめて、1プランずつのカードとして縦に並べます。 */
@media (max-width:640px){
  .price-table-wrap{ overflow-x:visible; }
  .price-table{ min-width:0; }
  .price-table thead{ display:none; }          /* 見出し行は不要（各カードに情報が並ぶため） */
  .price-table tr{
    display:block; padding:16px 18px;
    border-bottom:1px solid var(--line);
  }
  .price-table tr:last-child{ border-bottom:none; }
  .price-table td{ display:block; padding:0; border-bottom:none; }
  .price-table td.price-name{
    white-space:normal;                        /* 長いプラン名も折り返す */
    font-size:14.5px; margin-bottom:2px;
  }
  .price-table td.price-amount{
    white-space:normal; font-size:15px; margin-bottom:6px;
  }
  .price-table td.price-desc{ font-size:12.5px; line-height:1.85; }
  .price-table td.price-desc:empty{ display:none; }
  /* 推奨プランの色付けは、セルではなく行全体にかける */
  .price-table tr.price-featured{ background:var(--blue-wash); }
  .price-table tr.price-featured td{ background:transparent; }
}

/* --- 見出しの改行位置 ---
   text-wrap:balance は、見出しの各行の長さをそろえて
   「最後の1文字だけ次の行に落ちる」のを防ぎます。
   対応していないブラウザでは、単に無視されます（害はありません）。 */
h1, h2, h3{ text-wrap:balance; }

/* スマホでだけ改行させたいときに使う。<br class="br-sp"> と書きます。
   パソコンでは改行されません。 */
.br-sp{ display:none; }
@media (max-width:640px){
  .br-sp{ display:inline; }
}

/* ============ FAQ ============ */
.faq-list{ max-width:760px; margin:0 auto; display:grid; gap:12px; }
.faq-item{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:6px 22px;
}
.faq-item summary{
  cursor:pointer; font-weight:700; font-size:14.5px; color:var(--ink);
  list-style:none; padding:16px 28px 16px 0; position:relative;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:0; top:14px; font-size:18px; color:var(--blue-text); font-weight:700;
}
.faq-item[open] summary::after{ content:"−"; }
.faq-item .faq-a{ font-size:13.5px; color:var(--gray-mid); margin:0 0 18px; padding-right:20px; }

/* ============ Continued support ============ */
.continued-support{ margin-top:24px; padding:28px 28px; border:1px solid var(--line); border-radius:var(--radius-lg); text-align:center; background:var(--white); }
.continued-support h2{ font-size:16px; font-weight:700; margin:0 0 10px; color:var(--ink); }
.continued-support p{ font-size:13.5px; color:var(--gray-mid); max-width:560px; margin:0 auto 18px; }
.continued-support .text-link{ color:var(--blue-text); font-size:13.5px; text-decoration:underline; text-underline-offset:3px; }
.continued-support .text-link:hover{ color:var(--navy); }

/* ============ Final CTA ============ */
.cta-block{
  margin-top:0; text-align:center; background:var(--navy); border-radius:var(--radius-lg);
  padding:56px 32px; position:relative; overflow:hidden;
}
.cta-block::after{ content:""; position:absolute; inset:auto 0 0 0; height:3px; background:var(--wave-grad); }
.cta-title{ color:var(--white); font-size:26px; font-weight:900; margin:0 0 14px; }
.cta-desc{ color:#B7BFD4; font-size:14.5px; max-width:520px; margin:0 auto 30px; }
.cta-actions{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.cta-btn{
  display:inline-block; background:var(--wave-grad-deep); color:var(--white); text-decoration:none;
  font-weight:700; font-size:15px; padding:17px 44px; min-height:48px; border-radius:var(--radius-pill);
  box-shadow:0 12px 28px rgba(47,99,214,0.4);
}
.cta-link{ color:#C9D2E6; font-size:13.5px; text-decoration:underline; text-underline-offset:3px; }
.cta-link:hover{ color:var(--white); }
.cta-microcopy{ color:#8891A8; font-size:12px; margin:2px 0 0; }

/* --- 相談の場面の写真（トップページの最後のご案内だけで使う） ---
   写真を入れるときは assets/img/soudan.jpg を置くだけでかまいません。
   HTMLを書き換える必要はありません。
   横長（3:2くらい）の写真を推奨。横1200px以上あればきれいに表示されます。
   ファイルがまだ無いうちは、紺色の四角が表示されます（背景画像なので
   画像切れのアイコンは出ません）。
   .has-photo が付いたブロックにだけ効くので、サービス・料金・会社概要
   ページの同じご案内ブロックには影響しません。 */
.cta-photo{
  width:100%; max-width:420px; margin:0 auto 28px;
  aspect-ratio:3 / 2;
  border-radius:var(--radius-md);
  background-color:var(--navy-soft);
  /* ?v= の意味は .founder-avatar のコメントを参照。
     差し替えるときは日付を新しくしてください。 */
  background-image:url("img/soudan.jpg?v=20260915");
  background-size:cover;
  background-position:center;
}

/* パソコン幅（860px以上）では、写真を左・文章を右の2段組にする。
   スマホ・タブレット幅では今までどおり中央ぞろえのまま、写真だけが上に乗る。 */
@media (min-width:860px){
  .cta-block.has-photo{
    display:grid;
    grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
    gap:44px;
    align-items:center;
    text-align:left;
    padding:48px 44px;
  }
  .cta-block.has-photo .cta-photo{ margin:0; max-width:none; aspect-ratio:4 / 3; }
  .cta-block.has-photo .cta-desc{ margin:0 0 28px; }
  .cta-block.has-photo .cta-actions{ align-items:flex-start; }
}

/* ============ Sticky mobile CTA ============ */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; padding:12px 16px;
  background:rgba(19,27,46,0.97); z-index:50;
  transform:translateY(100%); transition:transform .25s ease;
}
.sticky-cta.visible{ transform:translateY(0); }
.sticky-cta-btn{
  display:block; text-align:center; background:var(--wave-grad-deep); color:#fff;
  font-weight:700; font-size:14px; padding:14px; border-radius:var(--radius-pill); text-decoration:none;
}
@media (min-width:861px){ .sticky-cta{ display:none !important; } }

/* ============ Footer ============ */
.site-footer{ background:var(--navy); color:#AEB7CC; padding:40px 0 28px; margin-top:80px; }
.site-footer .wrap{ display:flex; flex-direction:column; gap:16px; align-items:center; text-align:center; }
.site-footer .foot-logo{ font-weight:900; color:var(--white); font-size:15px; }
.site-footer .foot-links{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; font-size:12.5px; }
.site-footer .foot-links a{ color:#AEB7CC; text-decoration:underline; text-underline-offset:3px; }
.site-footer .foot-links a:hover{ color:var(--white); }
/* SNSの並び。フッターメニューより控えめに見せている
   （サイトの主役はSNSではなく、問い合わせと公式LINEのため）。
   中身は tools/apply_config.py が サイト設定.txt から差し込む。

   2026-10-03に南望さんの指示で、文字リンクからアイコン表示に変更。
   普段は薄いグレーの線画アイコンにして、カーソルを乗せたときだけ
   そのSNSの色になる（派手な色付きバッジにすると、Aidriftの落ち着いた
   配色から浮いてしまうため。design.md「シンプル・高級感」参照）。
   Xは公式のロゴ自体に色が無いため、他のフッターリンクと同じ「白くなる」
   ホバーにしている。 */
.site-footer .foot-sns{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center; }
.site-footer .foot-sns a.sns-icon{ display:inline-flex; color:#AEB7CC; transition:color .15s ease; }
.site-footer .foot-sns a.sns-icon svg{ width:22px; height:22px; fill:currentColor; }
.site-footer .foot-sns a.sns-x:hover{ color:var(--white); }
.site-footer .foot-sns a.sns-instagram:hover{ color:#E1306C; }
.site-footer .foot-sns a.sns-line:hover{ color:#06C755; }

.site-footer .foot-copy{ font-size:12px; color:#7B85A0; }

/* ============ Mobile ============ */
@media (max-width:860px){
  .about-layout{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .worry-grid{ grid-template-columns:1fr; }
  .mvv-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .consult-grid{ grid-template-columns:1fr; }
  .process-steps{ grid-template-columns:1fr 1fr; }
  /* 3つのときは2列だと3つ目が1つだけ余って左に寄るため、縦1列にする */
  #steps .process-steps{ grid-template-columns:1fr; }
  .plans-grid{ grid-template-columns:1fr; }
  .plan-card.featured{ transform:none; }
  .options-list{ columns:1; }
  .band{ padding:56px 0; }
  .hero{
    min-height:auto;
    padding:58px 0 52px;
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.92) 58%, rgba(255,255,255,0.78) 100%),
      url("img/aidrift-cover.png");
    background-position:center bottom;
  }
  .hero .wrap{ text-align:center; }
  .hero-copy{ max-width:640px; margin:0 auto; }
  .hero h1{ font-size:56px; }
  .hero h1 .sub{ font-size:24px; }
  .hero-actions{ justify-content:center; }
  .hero-service-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); text-align:left; }
  .audience-nav{ justify-content:center; }
  .section-head h2,
  .service-detail-head h2,
  .about-copy h2,
  .value-compare h2,
  .value-compare h3,
  .cta-title{ font-size:24px; }
  .vision-block h2{ font-size:26px; }
}
@media (max-width:480px){
  .wrap{ padding:0 18px; }
  .services-grid{ grid-template-columns:1fr; }
  .process-steps{ grid-template-columns:1fr; }
  .plan-card{ padding:32px 22px 26px; }
  .options-block{ padding:26px 20px; }
  .cta-block{ padding:44px 20px; }
  .legal-notice{ flex-direction:column; }
  .info-box{ padding:22px 20px; }
  .continued-support{ padding:24px 20px; }
  .plan-specs{ padding:14px 16px; }
  .faq-item summary{ font-size:13.5px; }
  .hero h1{ font-size:42px; }
  .hero h1 .sub{ font-size:20px; }
  .section-head h2,
  .service-detail-head h2,
  .about-copy h2,
  .value-compare h2,
  .value-compare h3,
  .cta-title{ font-size:22px; }
  .vision-block h2{ font-size:24px; }
  .hero-service-list{ grid-template-columns:1fr; }
  .audience-nav{ flex-direction:column; gap:12px; }
}

/* ============================================================
   ここから下は「複数ページ用の追加スタイル」
   （1ページだけの料金ページには無かった、サイト共通ナビなどの分）
   ============================================================ */

/* ============ グローバルナビゲーション ============ */
/* ハンバーガーメニュー（JavaScriptで開閉するメニュー）はあえて使っていません。
   リンクが5つだけなので、常に見えている方が迷わないためです。 */
.site-header .wrap{
  flex-wrap:wrap;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:26px;
  margin-left:auto;
  margin-right:22px;
}
.site-nav a{
  font-size:13.5px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  padding:6px 0;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.site-nav a:hover{ color:var(--blue-text); }
/* aria-current="page" は「今見ているページ」を表す印。読み上げソフトにも伝わります。 */
.site-nav a[aria-current="page"]{
  color:var(--blue-text);
  border-bottom-color:var(--blue);
}

@media (max-width:860px){
  /* スマホでは、ロゴとCTAを1行目、ナビを2行目に折り返す */
  .site-nav{
    order:3;
    width:100%;
    margin:14px 0 0;
    gap:0;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:10px;
  }
  .site-nav a{ font-size:12.5px; }
}
@media (min-width:561px) and (max-width:860px){
  /* タブレット幅では横に余裕があるため、端まで引き伸ばさず左に寄せる
     （max-width:860px の指定より後に書くことで、こちらが優先されます） */
  .site-nav{ justify-content:flex-start; gap:0 26px; }
}
@media (max-width:380px){
  .site-nav{ gap:0 10px; flex-wrap:wrap; justify-content:flex-start; }
}

/* ============ 下層ページの見出し（ページヒーロー） ============ */
.page-hero{
  padding:56px 0 40px;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
}
.page-hero .wrap{ max-width:820px; }
.page-hero h1{
  font-size:34px;
  font-weight:900;
  margin:14px 0 0;
}
.page-hero p{
  color:var(--gray-mid);
  font-size:14.5px;
  margin:16px 0 0;
  max-width:640px;
}
@media (max-width:860px){
  .page-hero h1{ font-size:30px; }
}
@media (max-width:480px){
  .page-hero h1{ font-size:26px; }
}

/* ============ パンくずリスト ============ */
.breadcrumb{ font-size:12.5px; color:var(--gray-mid); }
.breadcrumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.breadcrumb li::after{ content:"›"; margin-left:8px; color:var(--gray-soft); }
.breadcrumb li:last-child::after{ content:""; margin:0; }
.breadcrumb a{ color:var(--blue-text); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ============ ページ内リンク（同じページの見出しへ飛ぶ目次） ============ */
.page-toc{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:26px;
  /* 中央ぞろえにしておくと、折り返して最後の1つだけ次の行に来たときも
     左に取り残されず、バランスよく見える（2026-09-15に南望さんが指摘） */
  justify-content:center;
}

/* パソコンの広い画面では、この目次だけ本文より横に広げて1行に収める。
   .page-hero .wrap は読みやすさのため820pxに絞っているが、
   目次は文章ではないので、もう少し広げてよい。
   1180px以上でのみ効かせているのは、それより狭いと画面からはみ出すため。 */
@media (min-width:1180px){
  .page-hero .page-toc{ margin-left:-150px; margin-right:-150px; }
}
.page-toc a{
  font-size:13px; font-weight:700; color:var(--blue-text);
  text-decoration:none;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:9px 18px;
}
.page-toc a:hover{ border-color:var(--blue); }

/* ============ 会社概要などの項目表 ============ */
.info-table{ width:100%; border-collapse:collapse; }
.info-table th, .info-table td{
  text-align:left; padding:18px 4px;
  border-bottom:1px solid var(--line);
  font-size:14px; vertical-align:top;
}
.info-table th{
  width:180px; color:var(--gray-mid); font-weight:700; white-space:nowrap;
}
.info-table td{ color:var(--ink); }
@media (max-width:560px){
  /* スマホでは項目名と内容を縦に並べる */
  .info-table th, .info-table td{ display:block; width:auto; padding:14px 4px; }
  .info-table th{ border-bottom:none; padding-bottom:2px; font-size:12.5px; }
}

/* ============ お問い合わせフォーム ============ */
.contact-layout{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:40px;
  align-items:start;
}
@media (max-width:860px){
  .contact-layout{ grid-template-columns:1fr; }
}
.contact-form{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 30px;
}
.form-row{ margin-bottom:22px; }
.form-row label{
  display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:8px;
}
.form-required{
  display:inline-block; margin-left:8px;
  font-size:11px; font-weight:700; color:var(--white);
  background:var(--blue-text); border-radius:4px; padding:2px 7px;
}
.form-optional{
  display:inline-block; margin-left:8px;
  font-size:11px; font-weight:700; color:var(--gray-mid);
  background:var(--bg-soft); border-radius:4px; padding:2px 7px;
}
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  font-family:inherit;
  font-size:15px; /* 16px未満だとiPhoneで入力時に画面が拡大されるため、15px以上を保つ */
  color:var(--ink);
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:var(--radius-md);
  padding:13px 15px;
  min-height:48px;
}
.form-row textarea{ min-height:150px; resize:vertical; line-height:1.8; }
.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-color:var(--blue);
}
.form-hint{ font-size:12px; color:var(--gray-mid); margin:8px 0 0; }
.form-submit{
  display:block; width:100%;
  font-family:inherit; font-size:15px; font-weight:700;
  color:var(--white); background:var(--wave-grad-deep);
  border:none; border-radius:var(--radius-pill);
  padding:17px 20px; min-height:48px;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(47,99,214,0.35);
}
.form-submit:hover{ opacity:.9; }
.form-submit:disabled{
  background:var(--gray-soft);
  box-shadow:none;
  cursor:not-allowed;
}
.form-foot{ text-align:center; font-size:12px; color:var(--gray-mid); margin:14px 0 0; }

/* 準備中のお知らせなど、公開前に消す想定の注意ボックス */
.notice-box{
  background:var(--blue-wash);
  border:1px solid #C9DEFB;
  border-radius:var(--radius-md);
  padding:18px 20px;
  font-size:13.5px;
  color:var(--ink);
  margin-bottom:28px;
}
.notice-box strong{ font-weight:700; }
.notice-box p{ margin:0; }

/* 連絡先カード（電話・メールなど） */
.contact-side .info-box{ margin-top:0; margin-bottom:20px; }
.contact-side .info-box:last-child{ margin-bottom:0; }

/* ============ 法的ページ（プライバシーポリシー・特定商取引法）用 ============ */
/* 文章が中心のページ。読みやすさを優先して、幅を狭めに固定しています。 */
.legal-body{ max-width:760px; margin:0 auto; }
.legal-body h2{
  font-size:17px; font-weight:700; margin:40px 0 14px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.legal-body h2:first-of-type{ margin-top:0; }
.legal-body h3{ font-size:14.5px; font-weight:700; margin:24px 0 10px; }
.legal-body p{ font-size:14px; color:var(--gray-mid); margin:0 0 14px; }
.legal-body ul, .legal-body ol{ margin:0 0 16px; padding-left:0; list-style:none; }
.legal-body li{
  position:relative; padding-left:20px; font-size:14px; color:var(--gray-mid); margin-bottom:10px;
}
.legal-body ul > li::before{ content:"・"; position:absolute; left:0; color:var(--gray-soft); }
.legal-body ol{ counter-reset:legal-item; }
.legal-body ol > li{ counter-increment:legal-item; }
.legal-body ol > li::before{
  content:counter(legal-item) "."; position:absolute; left:0; color:var(--gray-soft); font-weight:700;
}
.legal-body .info-table{ margin-bottom:24px; }
/* まだ記入されていない項目であることが、見ただけで分かるようにする印。
   設定ファイルに値を入れて「設定を反映する」を実行すると、実際の値に置き換わります。 */
.unfilled{
  display:inline-block;
  background:var(--blue-wash);
  border:1px dashed #9EC3F5;
  border-radius:6px;
  padding:2px 10px;
  font-size:12.5px;
  color:var(--blue-text);
  font-weight:700;
}
.legal-updated{ font-size:12.5px; color:var(--gray-soft); margin-top:40px; text-align:right; }

/* ============ 連絡先の小さな一覧（お問い合わせページのサイド） ============ */
.mini-list{ margin:0; }
.mini-list > div{
  display:flex; gap:12px; align-items:baseline;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.mini-list > div:last-child{ border-bottom:none; }
.mini-list dt{
  flex:none; width:72px;
  font-size:12.5px; font-weight:700; color:var(--gray-mid);
}
.mini-list dd{ margin:0; font-size:13.5px; color:var(--ink); word-break:break-all; }
.mini-list dd a{ color:var(--blue-text); }

/* ============ Googleフォームの埋め込み枠 ============ */
/* 枠の中身は別サイト（docs.google.com）の扱いになるため、
   中身の高さに合わせて自動で伸ばすことができません。
   そのため、実際のフォームの高さを測って固定値で指定しています。
   （2026-09-08時点：スマホ幅1744px／PC幅1557px。入力エラー表示のぶん余裕を持たせています）
   フォームの質問を増やしたら、この高さも広げてください。 */
.form-embed{
  display:block;
  width:100%;
  height:1660px;
  border:0;
  border-radius:var(--radius-lg);
  background:var(--white);
}
@media (max-width:767px){
  /* スマホでは項目が縦に伸びるぶん、高さを多めに取る */
  .form-embed{ height:1900px; }
}