@charset "UTF-8";
/* ============================================================
   OptiFlow LP  ／  v2
   設計：08_ホームページ/デザイン方針_v2_あしらいと配色.md
   ------------------------------------------------------------
   v1 の失敗：色を5色使い、あしらいが皆無で、アクセントを置く場所が
   「背景のベタ塗り」しかなかった。結果、ページ上部が無色になり
   下部に重心が寄った。v2 は「1色を全行に撒く」設計にする。
   ============================================================ */

:root{
  /* --- 画面を貫くアクセント（参考サイトのオレンジの位置） --- */
  --key:        #45B2F6;  /* 崎山さん指定。線画・ラベル・下線・矢印・バッジ・帯 */
  --key-d:      #2AA0EC;  /* ホバー（同色相で少しだけ濃く） */
  --on-key:     #0C3A58;  /* 水色の面に載せる文字（ブランドガイド：水色の上は濃紺） */

  /* --- 面（塗り専用。文字色には使わない） --- */
  --sky:        #75BDEA;
  --gray-1:     #F2F3F4;  /* セクション背景（無彩色） */
  --gray-2:     #EDEEF0;  /* 画像枠の下地（無彩色） */

  /* --- 文字 --- */
  --ink:        #1F2328;  /* 本文・見出し（黒に近いグレー） */
  --ink-sub:    #6B7684;  /* 補足 */

  /* --- 一点だけの熱源 --- */
  --hot:        #C74218;  /* 価格の数字のみ */

  --line:       #E3E8EC;
  --surface:    #FEFFFE;

  --wrap: 1020px;
  --read: 730px;
  --ease: .4s cubic-bezier(.25,.46,.45,.94);

  --sans:  "Noto Sans JP", sans-serif;
  --serif: "EB Garamond", serif;
  --mincho:"Noto Serif JP", serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }

body{
  font-family:var(--sans); font-weight:400;
  font-size:15px; line-height:1.7; color:var(--ink);
  background:var(--surface); overflow-x:hidden;
  opacity:1; transition:opacity .5s ease;
}
body.is-loading{ opacity:0; }
@media (min-width:768px){ body{ font-size:16px; } }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.ta-c{ text-align:center; }
.note{ font-size:12px; line-height:1.7; color:var(--ink-sub); display:block; }
@media (min-width:768px){ .note{ font-size:13px; } }
.sp-only{ display:inline; }
@media (min-width:768px){ .sp-only{ display:none; } }


/* ============================================================
   スクロール表示
   ============================================================ */
.sa{ opacity:0; transition:opacity 1s ease, transform 1s ease; }
.sa.show{ opacity:1; transform:none; }
.sa--left { transform:translate(20px,0); }
.sa--right{ transform:translate(-20px,0); }
.sa--up   { transform:translate(0,20px); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .sa{ opacity:1 !important; transform:none !important; }
  body.is-loading{ opacity:1; }
}


/* ============================================================
   ★ あしらい（ornaments）— 画面全体にアクセントを撒くための部品
   ============================================================ */

/* 01. リンク：下線＋矢印。ホバーで矢印が伸びる */
.lk{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:700; color:var(--ink);
  text-decoration:none; padding-bottom:6px;
  border-bottom:2px solid var(--key);
  transition:color var(--ease), border-color var(--ease);
}
.lk::after{
  content:""; width:22px; height:1px; background:var(--key);
  position:relative; transition:width var(--ease), background var(--ease);
}
.lk:hover{ color:var(--key); }
.lk:hover::after{ width:32px; }

/* 02. 小さいラベル（日付・分類）：アクセント色の13px太字 */
.lb{
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--key); line-height:1.5; display:block;
}
@media (min-width:768px){ .lb{ font-size:13px; } }

/* 03. 見出し左のバー */
.bar{ padding-left:14px; border-left:3px solid var(--key); }

/* 04. 点線の区切り（参考サイトの見出し下） */
.dotted{
  width:180px; height:0; margin:14px auto 0;
  border-top:2px dotted var(--key);
}

/* 05. 番号タグ（丸） */
.num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:24px; border-radius:999px;
  background:var(--key); color:var(--on-key);
  font-family:var(--serif); font-size:14px; font-weight:500; letter-spacing:.08em;
}

/* 06. バッジ（ヘッダー右上・高級感の要）
   ★ヘッダーの下端を越えて、ヒーロー画像の上に乗り出す */
.badge{
  position:relative; z-index:101;
  align-self:stretch; margin-bottom:-30px;  /* ← ヘッダーの下端を30px はみ出して画像に乗る */
  flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--key); color:var(--on-key); text-decoration:none;
  padding:10px 22px 18px; line-height:1.5; text-align:center;
  border-radius:0 0 6px 6px;
  box-shadow:0 3px 10px rgba(12,58,88,.18);
  transition:background var(--ease);
}
.badge:hover{ background:var(--key-d); }
.badge__s{ font-size:11px; letter-spacing:.04em; }
.badge__b{ font-size:14px; font-weight:700; letter-spacing:.02em; }
.badge__r{ width:28px; height:1px; background:rgba(12,58,88,.45); margin:5px 0; }

/* 07. 円形サムネイル */
/* 07. Case のイラスト枠（丸は廃止。他セクションと同じ扱いにする） */
.case-fig{ aspect-ratio:4/3; }
.case-fig img{ object-fit:contain; }

/* 08. 罫線 */
.rule{ height:1px; background:var(--line); border:0; }


/* ============================================================
   ヘッダー
   ============================================================ */
.hd{ position:fixed; inset:0 0 auto 0; z-index:100; background:var(--surface); }
.hd::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--line); }
.hd__inner{
  position:relative;
  max-width:1220px; margin-inline:auto; padding-left:20px;
  display:flex; align-items:stretch; justify-content:space-between; gap:16px;
  min-height:64px;
}

/* ロゴ：マークは作らず、文字ロゴのみ（2026-08-08 崎山さん判断）
   マークがない分、字を少し大きく・字間を広げて、単体でも持つようにする。
   下の水色の短い線が、マークの代わりに左側の重みを作る。 */
.hd__logo{
  display:flex; flex-direction:column; justify-content:center;
  text-decoration:none; color:var(--ink); flex:none;
}
.hd__name{
  display:block; font-size:23px; font-weight:700;
  letter-spacing:.06em; line-height:1.15;
}
.hd__sub{
  display:block; font-size:10px; color:var(--ink-sub);
  letter-spacing:.18em; margin-top:3px; padding-top:4px;
  border-top:2px solid var(--key); align-self:flex-start;
}

.hd__nav{ display:flex; align-items:stretch; }
.hd__nav > ul{ display:flex; align-items:center; }
.hd__nav li + li{ border-left:1px solid var(--line); }   /* ← 縦の区切り線 */
.hd__nav a{
  display:block; text-align:center; text-decoration:none; color:var(--ink);
  padding:0 20px; transition:color var(--ease);
}
.hd__nav a .en{ display:block; font-family:var(--serif); font-size:17px; font-weight:500; line-height:1.2; }
.hd__nav a .ja{ display:block; font-size:10px; color:var(--ink-sub); line-height:1.6; transition:color var(--ease); }
.hd__nav a:hover,.hd__nav a:hover .ja{ color:var(--key); }

.hd__burger{ display:none; background:none; border:0; padding:8px 20px 8px 8px; cursor:pointer; }
.hd__burger span{ display:block; width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--ease), opacity var(--ease); }
.hd__burger span + span{ margin-top:6px; }

@media (max-width:1279px){ .hd__nav a{ padding:0 13px; } .hd__nav a .en{ font-size:15px; } }
@media (max-width:1099px){ .hd__nav a{ padding:0 10px; } .hd__nav a .en{ font-size:14px; } }
@media (max-width:899px){
  .hd__burger{ display:block; }
  .hd__name{ font-size:20px; }
  .hd__inner{ min-height:56px; align-items:center; }
  .hd__nav{
    position:fixed; inset:56px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--surface); border-top:1px solid var(--line); padding:0 20px 20px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--ease), visibility var(--ease), transform var(--ease);
    max-height:calc(100dvh - 56px); overflow-y:auto;
  }
  .hd.is-open .hd__nav{ opacity:1; visibility:visible; transform:none; }
  .hd__nav > ul{ flex-direction:column; align-items:stretch; }
  .hd__nav li + li{ border-left:0; }
  .hd__nav li{ border-bottom:1px solid var(--line); }
  .hd__nav a{ text-align:left; padding:14px 4px; display:flex; align-items:baseline; gap:12px; }
  .hd__nav a .en{ font-size:16px; min-width:78px; }
  .hd__nav a .ja{ font-size:12px; }
  .hd.is-open .hd__burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .hd.is-open .hd__burger span:nth-child(2){ opacity:0; }
  .hd.is-open .hd__burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
  .badge{ padding:8px 12px 14px; margin-bottom:-18px; border-radius:0 0 4px 4px; }
  .badge__b{ font-size:12px; } .badge__s{ font-size:10px; }
  .badge__b{ font-size:12px; } .badge__s{ font-size:10px; }
}


/* ============================================================
   画像プレースホルダー
   ============================================================ */
.ph{
  position:relative; margin:0; overflow:hidden;
  aspect-ratio:var(--ratio,4/3); background:var(--gray-2);
}
/* --pad：線の太さを揃えるための個別スケール。
   ソコストの素材は「モノだけ」の絵ほど線が太い
   （実測：メモ帳とペン=人物の1.74倍、請求書=1.39倍）。
   表示サイズを落として、線の見た目の太さを人物イラストに合わせる。 */
.ph img{ width:100%; height:100%; object-fit:contain; padding:var(--pad,0); opacity:0; transition:opacity .8s ease; }
.ph img.ok{ opacity:1; }
/* 画像が入ったら下地のグレーを消す（未配置のときだけグレーの枠を出す） */
.ph.is-loaded{ background:transparent; }
.ph.is-empty img{ display:none; }
.ph-note{ display:none; }
.ph-guide .ph{ outline:2px dashed var(--key); outline-offset:-2px; }
.ph-guide .ph-note{
  display:block; position:absolute; right:8px; bottom:8px; left:8px;
  font-size:12px; line-height:1.6; color:var(--key);
  background:rgba(254,255,254,.94); padding:8px 10px; border-radius:6px;
}


/* ============================================================
   セクション共通
   ============================================================ */
.sec{ padding:72px 0; }
.sec--pale{ background:var(--gray-1); }
.sec--skypale{ background:var(--gray-1); }
@media (min-width:768px){ .sec{ padding:104px 0; } }

/* セクション見出し */
.p_title{ text-align:center; margin-bottom:40px; font-weight:400; }
.p_title .en{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:34px; line-height:1; letter-spacing:.02em; color:var(--ink);
}
.p_title .s{
  display:block; font-family:var(--mincho); font-weight:600;
  font-size:12px; line-height:1.6; letter-spacing:.1em; color:var(--ink); margin-top:10px;
}
@media (min-width:768px){
  .p_title{ margin-bottom:56px; }
  .p_title .en{ font-size:45px; }
  .p_title .s{ font-size:13px; }
}

.sub_title{ text-align:center; font-size:17px; font-weight:700; margin:64px 0 28px; }

/* リード（ジャンプ率：本文16 → リード21） */
/* ---- 文字階層 ----------------------------------------------
   1 項目名（英字45px）  .p_title .en
   2 項目名（日本語13px） .p_title .s
   3 セクションのサブタイトル（21px w700）  .lead__b   ← v2 に欠けていた段
   4 本文（16px）        body / .lead__s
   ----------------------------------------------------------- */
.lead{ text-align:center; max-width:var(--read); margin:0 auto 44px; }
.lead__b{ font-size:18px; font-weight:700; line-height:1.65; }
.lead__s{ margin-top:18px; font-size:15px; line-height:1.9; color:var(--ink); }
@media (min-width:768px){ .lead__b{ font-size:21px; } .lead__s{ font-size:16px; } }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 30px; border-radius:4px;
  font-size:15px; font-weight:700; text-decoration:none; color:var(--on-key);
  background:var(--key); transition:background var(--ease);
}
.btn::after{ content:""; width:20px; height:1px; background:currentColor; transition:width var(--ease); }
.btn:hover{ background:var(--key-d); }
.btn:hover::after{ width:28px; }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--key); }
.btn--ghost:hover{ background:var(--key); color:var(--on-key); }
@media (max-width:767px){ .btn{ width:100%; } }

/* 2カラム */
.cols2{ display:grid; gap:32px; }
@media (min-width:768px){ .cols2{ grid-template-columns:1fr 1fr; gap:40px; } }


/* ============================================================
   1. ヒーロー（環境写真＋縦書きの色帯）
   ============================================================ */
.hero{ position:relative; padding-top:64px; }
@media (min-width:900px){ .hero{ padding-top:64px; } }

.hero__media{ position:relative; }
.hero__ph{ aspect-ratio:3/4; background:var(--gray-2); position:relative; overflow:hidden; }
/* 16:7 だと書類の山かマグカップのどちらかが切れるため 16:9 にした。
   素材（3:2）の被写体 800px が、16:9 の可視高 864px にちょうど収まる。 */
@media (min-width:768px){ .hero__ph{ aspect-ratio:16/9; } }
.hero__ph img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 78%;             /* 書類の山の上端を残しつつ、手帳とマグを切らない位置 */
  opacity:0; transition:opacity .8s ease;
}
@media (min-width:768px){ .hero__ph img{ object-position:center 88%; } }
.hero__ph img.ok{ opacity:1; }
.hero__ph.is-empty img{ display:none; }

/* 縦書きの帯（アクセント色の塗り。左に配置して画面左の重みを作る） */
.hero__copy{
  position:absolute; top:7%; left:5%; z-index:2;
  display:flex; flex-direction:row-reverse; align-items:flex-start; gap:8px;
  margin:0; font-weight:700;
}
/* 帯は参考サイトに合わせ、ヒーロー高の約6割を占める大きさにする */
.hero__copy span{
  writing-mode:vertical-rl;               /* text-orientation は指定しない（日本語は mixed が正） */
  background:var(--key); color:var(--on-key);
  font-size:18px; line-height:1.45; letter-spacing:.1em;
  padding:16px 10px; white-space:nowrap;
}
.hero__copy span.is-sub{
  font-size:15px; margin-top:34px;   /* 色は変えない。主従はサイズ差だけでつける */
}
@media (min-width:768px){
  .hero__copy{ top:9%; left:6%; gap:10px; }
  .hero__copy span{ font-size:23px; padding:24px 13px; }
  .hero__copy span.is-sub{ font-size:19px; margin-top:48px; }
}

/* 写真の下：肩書きと導線（左右に振り分けてバランスを取る） */
.hero__foot{
  max-width:var(--wrap); margin:22px auto 0; padding-inline:20px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
}
@media (min-width:768px){
  .hero__foot{ flex-direction:row; align-items:center; justify-content:space-between; margin-top:26px; }
}
.hero__name{ font-size:15px; font-weight:700; }
.hero__name .lb{ display:inline-block; margin-right:10px; }
.hero__role{ font-size:12px; font-weight:400; color:var(--ink-sub); }
.hero__arrow{
  display:none; position:absolute; right:6%; bottom:-30px; width:1px; height:56px; background:var(--key);
}
.hero__arrow::after{
  content:""; position:absolute; left:-3px; bottom:0; width:7px; height:7px;
  border-right:1px solid var(--key); border-bottom:1px solid var(--key); transform:rotate(45deg);
}
@media (min-width:768px){ .hero__arrow{ display:block; } }


/* ============================================================
   2. こんな状態では
   ============================================================ */
.problem{ display:grid; gap:36px; align-items:center; }
@media (min-width:768px){ .problem{ grid-template-columns:1.1fr .9fr; gap:52px; } }
.problem__img{ max-width:340px; margin-inline:auto; width:100%; background:transparent; }

.checks li{
  position:relative; padding:15px 0 15px 34px;
  border-bottom:1px solid var(--line); font-size:15px; font-weight:500; line-height:1.7;
}
.checks li:first-child{ border-top:1px solid var(--line); }
.checks li::before{
  content:""; position:absolute; left:4px; top:20px;
  width:14px; height:8px; border-left:2px solid var(--key); border-bottom:2px solid var(--key);
  transform:rotate(-45deg);
}


/* ============================================================
   3. できること
   ============================================================ */
.card h3{ font-size:18px; font-weight:700; margin:20px 0 10px; }
.card p{ font-size:15px; line-height:1.8; }
.card .lk{ margin-top:16px; }
.card .ph{ aspect-ratio:4/3; }

.svc{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:768px){ .svc{ grid-template-columns:1fr 1fr; column-gap:44px; } }
.svc li{ padding:22px 0; border-bottom:1px solid var(--line); }
.svc h4{
  font-size:16px; font-weight:700; margin-bottom:8px; line-height:1.5;
  padding-left:13px; border-left:3px solid var(--key);
}
.svc p{ font-size:15px; line-height:1.8; }
.svc .note{ margin-top:6px; }


/* ============================================================
   4. たとえば（円形サムネ＋アクセント色のラベル）
   ============================================================ */
.cases{ display:grid; gap:36px; }
@media (min-width:768px){ .cases{ grid-template-columns:repeat(3,1fr); gap:40px; } }
.cases > li{ display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:start; align-content:start; }
@media (min-width:768px){ .cases > li{ grid-template-columns:1fr; gap:0; align-content:start; } }
.cases .case-fig{ width:96px; }
@media (min-width:768px){ .cases .case-fig{ width:100%; max-width:200px; margin:0 auto 18px; } }
.cases__q{ font-size:15px; font-weight:700; line-height:1.7; margin-top:8px; }
@media (min-width:768px){ .cases__q{ margin-top:10px; } }
.cases__a{ margin-top:10px; font-size:15px; line-height:1.8; }
.cases .note{ margin-top:6px; }

.cases__more{ margin-top:52px; border-top:1px solid var(--line); }
.cases__more-t{ font-weight:700; font-size:15px; margin:28px 0 4px; text-align:center; }
.cases__more dt{ font-size:14px; font-weight:700; padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }
.cases__more dt:first-of-type{ border-top:0; }
.cases__more dd{ font-size:14px; line-height:1.85; }
@media (min-width:768px){
  .cases__more dl{ display:grid; grid-template-columns:1fr 1.3fr; column-gap:36px; }
  .cases__more dt{ grid-column:1; }
  .cases__more dd{ grid-column:2; padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }
  .cases__more dt:first-of-type,.cases__more dd:first-of-type{ border-top:0; margin-top:0; }
}


/* ============================================================
   5. 進め方と料金
   ============================================================ */
.steps{ display:grid; gap:40px; }
@media (min-width:768px){ .steps{ grid-template-columns:repeat(3,1fr); gap:40px; } }
.steps > li{ text-align:center; }
.steps .ph{ max-width:190px; margin:0 auto 18px; background:transparent; }
.steps__n{ margin-bottom:12px; }
.steps h3{ font-size:17px; font-weight:700; line-height:1.6; margin-top:10px; }
.steps h3 small{ display:block; font-size:12px; font-weight:400; color:var(--ink-sub); margin-top:5px; }
.steps p{ font-size:15px; line-height:1.8; margin-top:12px; text-align:left; }
@media (min-width:768px){ .steps p{ text-align:center; } }

.ba{
  margin:56px auto 0; max-width:var(--read); text-align:center;
  font-size:16px; font-weight:700; line-height:1.85;
  padding:24px 16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}

.price{ margin:48px auto 0; max-width:560px; text-align:center; border:1px solid var(--key); }
.price__t{ font-size:13px; font-weight:700; color:#fff; background:var(--key); padding:9px 12px; }
.price__body{ padding:26px 20px; }
.price__v{ font-size:38px; font-weight:700; line-height:1.2; color:var(--hot); letter-spacing:.01em; }
.price__v span{ font-size:14px; font-weight:400; color:var(--ink); }
.price__n{ margin-top:18px; padding-top:16px; border-top:1px dotted var(--line); font-size:13px; line-height:1.85; }
@media (min-width:768px){ .price__v{ font-size:46px; } }


/* ============================================================
   6. セッション後
   ============================================================ */
.plan__note{ margin-top:40px; text-align:center; }
.plan__note p:first-child{ font-weight:700; font-size:15px; line-height:1.85; }
.plan__note .note{ margin-top:12px; }


/* ============================================================
   7. 崎山麻衣について
   ============================================================ */
.about{ display:grid; gap:32px; align-items:start; }
@media (min-width:768px){ .about{ grid-template-columns:.78fr 1.22fr; gap:48px; } }
.about__img{ max-width:290px; width:100%; margin-inline:auto; position:relative; }
.about__img::before{
  content:""; position:absolute; left:-14px; top:-14px; width:78px; height:78px;
  background:var(--sky); z-index:0;
}
.about__img .ph{ position:relative; z-index:1; background:var(--gray-2); }
.about__name{ font-size:23px; font-weight:700; line-height:1.4; }
.about__name span{ display:block; font-size:11px; font-weight:400; letter-spacing:.12em; color:var(--ink-sub); }
.about__role{ font-size:13px; margin:12px 0 20px; padding-bottom:16px; border-bottom:2px solid var(--key); display:inline-block; }
.about__text p{ font-size:15px; line-height:1.9; }
.about__text p + p{ margin-top:14px; }

.about__msg{ margin-top:48px; max-width:var(--read); margin-inline:auto; }
.about__msg-t{ font-size:19px; font-weight:700; margin-bottom:18px; text-align:center; }
.about__msg p{ font-size:15px; line-height:1.9; }
.about__msg p + p{ margin-top:14px; }
.about__msg hr{ border:0; border-top:1px dotted var(--key); margin:26px 0; }
@media (min-width:768px){ .about__msg-t{ font-size:21px; } .about__msg p{ font-size:16px; } }


/* ============================================================
   9. FAQ（Q が左、矢印が右に縦一列に並ぶ＝左右のバランスを作る）
   ============================================================ */
.faq{ max-width:var(--read); margin-inline:auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; position:relative;
  padding:20px 46px 20px 42px; font-weight:700; font-size:15px; line-height:1.7;
  transition:color var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--key); }
.faq summary::before{
  content:"Q"; position:absolute; left:8px; top:19px;
  font-family:var(--serif); font-size:19px; font-weight:500; color:var(--key); line-height:1.5;
}
.faq summary::after{
  content:""; position:absolute; right:14px; top:26px; width:9px; height:9px;
  border-right:2px solid var(--key); border-bottom:2px solid var(--key);
  transform:rotate(45deg); transition:transform var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:30px; }
.faq details > div{ padding:0 20px 24px 42px; }
.faq details p{ font-size:15px; line-height:1.85; }
.faq details p + p{ margin-top:12px; }
.faq .note{ margin-top:8px; }


/* ============================================================
   11. 対応エリアの帯
   ============================================================ */
.area{ background:var(--gray-1); padding:52px 0; text-align:center; color:var(--ink);
       border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.area__t{ font-size:18px; font-weight:700; line-height:1.65; }
.area .dotted{ margin-bottom:20px; }
.area p{ font-size:15px; line-height:1.9; }
.area .note{ margin-top:12px; }
@media (min-width:768px){ .area{ padding:68px 0; } .area__t{ font-size:21px; } }


/* ============================================================
   12. お問い合わせ
   ============================================================ */
.contact{ text-align:center; }
.contact__lead{ max-width:var(--read); margin:0 auto 34px; font-size:15px; line-height:1.9; }
.contact__btns{ display:grid; gap:14px; max-width:520px; margin:0 auto; }
@media (min-width:768px){ .contact__btns{ grid-template-columns:1fr 1fr; gap:20px; max-width:640px; } }
.contact__mail{ margin-top:26px; font-size:14px; display:flex; flex-direction:column; align-items:center; gap:10px; }
@media (min-width:768px){ .contact__mail{ flex-direction:row; justify-content:center; gap:16px; } }
.copy{
  background:none; border:1px solid var(--key); border-radius:999px;
  padding:6px 16px; font-size:12px; color:var(--key); cursor:pointer;
  transition:background var(--ease), color var(--ease);
}
.copy:hover{ background:var(--key); color:var(--on-key); }
.copy.is-done{ background:var(--sky-pale); }


/* ============================================================
   13. フッター（全幅の色帯で画面下部を締める）
   ============================================================ */
.ft{ background:var(--key); color:var(--on-key); padding:56px 0 32px; }
.ft a{ color:var(--on-key); }
/* フッターも文字ロゴのみ */
.ft__logo{
  font-size:30px; font-weight:700; line-height:1.2; text-align:center;
  letter-spacing:.08em;
}
.ft__logo span{
  display:inline-block; font-size:10px; font-weight:400; opacity:.85;
  letter-spacing:.2em; margin-top:10px; padding-top:8px;
  border-top:1px solid rgba(12,58,88,.4);
}
.ft__t{
  font-family:var(--mincho); font-weight:600; font-size:13px; letter-spacing:.14em;
  text-align:center; margin:40px 0 18px;
}
.ft__info{
  max-width:var(--read); margin-inline:auto; font-size:13px; line-height:1.85;
  border-top:1px solid rgba(12,58,88,.28);
}
.ft__info dt{ font-weight:700; font-size:12px; opacity:.8; padding-top:12px; }
.ft__info dd{ padding-bottom:12px; border-bottom:1px solid rgba(12,58,88,.18); }
@media (min-width:768px){
  .ft__info{ display:grid; grid-template-columns:150px 1fr; }
  .ft__info dt{ padding:13px 0; border-bottom:1px solid rgba(12,58,88,.18); }
  .ft__info dd{ padding:13px 0; }
}
.ft__copy{ margin-top:34px; text-align:center; font-size:11px; opacity:.75; }