@charset "utf-8";
/* FootLink 提案サイト 共通スタイル
   全ページがこの1枚を読み込みます。色や文字を変えるときはここだけ直せば全ページに反映されます。 */

:root{
  /* 中間色はFootLinkの緑側へ寄せている。もとの生成り(#f7f4ef)・茶がかった罫(#ddd8d0)は
     暖色でロゴの緑・青とかみ合わないため（2026-08-26） */
  --ink:#14201a;          /* 本文・見出し（緑みのある黒） */
  --ink-soft:#556058;     /* 補足文 */
  --paper:#ffffff;
  --cream:#eef4ec;        /* 面（緑みのごく淡い地） */
  --rule:#d3e0d1;         /* 罫線 */
  --accent:#24802f;       /* 緑（ロゴの緑を濃くした色・ボタン/数字） */
  --accent-dark:#1b6624;
  --accent-bright:#38a838;/* ロゴの緑そのまま（罫や小さな印） */
  --forest:#175a20;       /* 濃い緑。文字に使う */
  --brand:#24802f;        /* 面に流すFootLinkの緑。白文字で5.00:1 */
  --brand-blue:#0868b8;   /* 2色目＝ロゴの青。白文字で5.70:1 */
  --logo-blue:#0868b8;    /* ロゴの青 */
  --cta-blue:#0868b8;     /* 申し込み帯の青 */
  --line:#06C755;         /* LINEの色（LINEボタンだけ） */
  --radius:4px;
  --wrap:1060px;
  --serif:"Noto Serif JP",'Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:92px}  /* 固定ヘッダー(78px)に見出しが隠れないように */
body{
  font-family:var(--sans);
  color:var(--ink); background:var(--paper);
  line-height:1.9; font-size:16px; -webkit-text-size-adjust:100%;
  /* 小書き仮名・長音の前で改行しない（koki41.com と同じ設定） */
  line-break:strict;
  overflow-x:hidden; max-width:100%;
  /* 下の固定ボタンの実寸に合わせる。バーを詰めて82px→68pxになったので確保も76pxへ
     （2026-08-27 実測）。iPhoneのホームバー分は .sticky 側と同じく env() で足す */
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
body.no-sticky{padding-bottom:0}   /* 下の固定ボタンを置かないページ */
/* 見出し類だけ行を均等に割り、1〜2文字だけの折り返しを防ぐ。
   本文には text-wrap:pretty も word-break:auto-phrase も入れない
   （Safariで右端が大きく余る／行末が不揃いになる。koki41.com で実機検証済みの方針） */
h1,h2,h3,h4,.sec-head h2,.feature h3,.step h3,.card h3{
  text-wrap:balance; word-break:auto-phrase;
}
/* 短い要素も同じ扱いにする。ボタン・箇条書き・質問見出しは幅300px（＝幸希さんの
   ページズーム相当）で「…申し込／む」のように1文字だけ落ちていた。
   balance は行を均等に割るだけで文章は変えない。長い本文には入れない（上のとおり）。
   word-break:auto-phrase はSafari非対応なので当てにしない（2026-08-27 実測） */
.btn,.btn-line,.nav a.btn-line,
.worry li,.merits li,.price-note li,.faq details summary,summary,
.next-nav a span,.next-nav a b,.sec-head p,
.hero-facts dt,.hero-facts dd,.fact dd{
  text-wrap:balance;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}

/* ── ヘッダー ── */
.header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.header-in{display:flex;align-items:center;gap:16px;min-height:78px}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:38px;width:auto}
@media(max-width:600px){ .brand img{height:30px} }
/* ロゴの横に名乗り（名称＋説明）を置く。フッターと同じ組み方（2026-08-27） */
.brand-note{
  padding-left:16px;margin-left:2px;border-left:1px solid var(--rule);
  display:flex;flex-direction:column;gap:2px;max-width:240px;
  /* 縮ませない。縮むと説明文が「…レッス／ン」と1文字だけ落ちる（2026-08-27 実測） */
  flex:none;
}
/* 改行は<br>だけで決める。途中で折らせない */
.brand-note>span{white-space:nowrap}
.brand-note b{color:var(--ink);font-size:14px;font-weight:700;line-height:1.5}
.brand-note>span{font-size:11.5px;line-height:1.5;color:var(--ink-soft)}
/* ヘッダーの名乗りをスマホで3行に割るための改行。
   メディアクエリより前に置くこと（後ろだと後勝ちで display:inline を潰す） */
.br-hd{display:none}
/* 名乗りを出せるのは「横に空きがある」幅だけ。ロゴ〜アイコン間の実測（2026-08-27）：
     〜619px    入らないので隠す（代わりに引き出しの中 .nav-id で名乗る）
                601〜609pxはロゴが38pxに戻るぶん名乗りが潰れるので、620pxまで隠す
     620〜860px ナビが三本線に畳まれて空くので、ここで出す
     861〜1080px ナビが横一列に戻って名乗りとぶつかる → 隠す
     1081px〜   余裕があるので出す */
@media(max-width:619px){
  /* アイコンを外して空いた幅に説明文を入れる。社名の太字はロゴと重複するので出さない。
     幅320pxでも「出張マンツーマンの／サッカー個別レッスン／小学生〜高校生対象・1回60分」の
     3行が収まり、ヘッダーは79pxのまま（2026-08-27 実測） */
  .brand-note{max-width:none;flex:1 1 auto;min-width:0;padding-left:12px}
  .brand-note b{display:none}
  .brand-note>span{font-size:12.5px}
  .br-hd{display:inline}
}
@media(min-width:861px) and (max-width:1080px){ .brand-note{display:none} }

/* ヘッダーにはSNSアイコンを置かない。その幅は名乗り（.brand-note）に使い、
   Instagram・LINEは引き出しの中に出す（2026-08-27） */
.header-sns{display:none}

/* ナビのInstagram */
.nav-ig{display:inline-flex;align-items:center;gap:7px}
.nav-ig svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
}
.nav-ig svg .dot{fill:currentColor;stroke:none}
/* ── SNSのブランド色（2026-08-27）──
   Instagram は公式のグラデーション、LINE は LINE の緑。
   グラデーションは各ページ先頭の <defs id="ig-grad"> を参照している。 */
.nav-ig:not(.nav-line) svg,
.footer-sns a[aria-label="Instagram"] svg{stroke:url(#ig-grad)}
.nav-ig:not(.nav-line) svg .dot,
.footer-sns a[aria-label="Instagram"] svg .dot{fill:url(#ig-grad)}

/* LINEのマーク。吹き出しをLINE緑で塗り、中の LINE 文字は白で抜く */
.nav-line svg path:first-child,
.footer-sns a[aria-label="LINEで相談する"] svg path:first-child{fill:var(--line);stroke:none}
.nav-line svg path:last-child,
.footer-sns a[aria-label="LINEで相談する"] svg path:last-child{fill:none;stroke:#fff;stroke-width:1.1}

/* 色が付いたので、ホバーで線の色を変える指定は外す */
.footer-sns a:hover svg{stroke:inherit}
@media(min-width:861px){ .nav-ig span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} }
.nav{margin-left:auto;display:flex;align-items:center;gap:20px}
/* 幅が詰まったとき「レッスンについ／て」と語中で折れないようにする */
.nav a{font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);white-space:nowrap}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent);font-weight:700}
.nav a.btn-line[aria-current="page"]{color:#fff}
/* .nav a（詳細度0-1-1）に負けて文字が黒くなるので .nav a.btn-line で上書きする */
.btn-line,
.nav a.btn-line{
  background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:14px;
  padding:12px 22px;border-radius:var(--radius);white-space:nowrap;
}
.btn-line:hover{background:var(--accent-dark);color:#fff}

/* スマホのメニュー（開閉はチェックボックスだけで動かす・JSなし） */
.menu-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.menu-btn{display:none}
/* 引き出しの中の名乗り。引き出しが出ない幅では使わない */
.nav-id{display:none}
@media(max-width:860px){
  .menu-btn{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 9px;cursor:pointer;
  }
  .menu-btn span{display:block;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
  .menu-toggle:checked ~ .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle:checked ~ .menu-btn span:nth-child(2){opacity:0}
  .menu-toggle:checked ~ .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu-toggle:focus-visible ~ .menu-btn{outline:2px solid var(--accent);outline-offset:2px}
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    padding:6px 20px 22px;
  }
  .menu-toggle:checked ~ .nav{display:flex}
  .nav a{padding:16px 2px;font-size:16px;border-bottom:1px solid var(--rule)}
  .nav a.btn-line{margin-top:18px;text-align:center;padding:16px;font-size:16px;border-bottom:none}
  /* 引き出しの一番上で名乗る。ヘッダーの .brand-note は1080px以下で隠れるので、
     スマホはここが名乗りの場所。追従ヘッダーは79pxのまま据え置ける（2026-08-27） */
  .nav-id{
    display:flex;flex-direction:column;gap:3px;
    padding:12px 2px 16px;border-bottom:1px solid var(--rule);
  }
  .nav-id b{color:var(--ink);font-size:15px;font-weight:700;line-height:1.5}
  .nav-id>span{font-size:12.5px;line-height:1.7;color:var(--ink-soft)}
}

/* ── ヒーロー（トップページ） ──
   写真を全面に敷いて、その上に暗い覆いをかけ、文字を白抜きにする。
   覆いは左が濃く右が薄いので、文字は読めたまま写真の主役（子ども）は見える。
   スマホは文字が全幅に広がるので、覆いを縦方向に強くかけ直している。 */
.hero{position:relative;overflow:hidden;background:#0f1c14;color:#fff;isolation:isolate}
.hero-bg{
  /* 素材は1200×1800の縦長。横長の枠に cover で入れると大きく切り取られて
     顔のアップになるため、右半分の正方形に近い枠に収めて切り取り量を減らす。
     左端は覆いでなく画像自体をぼかし消して、暗い地に溶かす。 */
  position:absolute;top:0;right:0;bottom:0;width:58%;height:100%;
  object-fit:cover;object-position:50% 32%;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 30%);
}
.hero-veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(15,28,20,.55) 0%, rgba(15,28,20,.48) 40%,
    rgba(15,28,20,.34) 60%, rgba(15,28,20,.14) 80%, rgba(15,28,20,.05) 100%);
}
.hero-in{
  position:relative;z-index:2;padding:78px 0 70px;
  display:grid;grid-template-columns:minmax(0,1.22fr) .78fr;gap:40px;align-items:center;
}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;padding:52px 0 46px}
  /* スマホは枠が縦長なので、全面に敷いてもほとんど切り取られない */
  .hero-bg{width:100%;object-position:56% 40%;-webkit-mask-image:none;mask-image:none}
  .hero-veil{
    background:linear-gradient(180deg,
      rgba(10,20,12,.86) 0%, rgba(10,20,12,.84) 42%,
      rgba(10,20,12,.66) 68%, rgba(10,20,12,.50) 100%);
  }
}
.tagline{
  display:inline-block;border:1px solid var(--ink);
  font-size:13px;font-weight:500;letter-spacing:.04em;padding:5px 14px;
}
/* 暗い写真の上に載るので、ヒーロー内だけ白抜きにする */
.hero .tagline{border-color:rgba(255,255,255,.65);color:#fff}
/* タグラインはヘッダーのロゴ横に常時出すため、ヒーローには置かない */
.hero h1{
  font-family:var(--serif);
  margin-top:22px;font-size:clamp(25px,3.05vw,35px);font-weight:700;line-height:1.62;letter-spacing:.01em;
}
/* スマホは2行（「〜部分を、」で改行）に収まるサイズまで絞る。25pxのままだと「を、」だけの行が出る */
@media(max-width:600px){ .hero h1{font-size:21px} }
/* 中くらいの明るさの緑は白文字の隣で濁って見えるため、白に寄せた緑にする
   （写真の上で11.06:1・2026-08-27） */
/* 「一人ひとりに合わせて」は強調句なので途中で割らせない。
   幅300pxでも em は210px・行は260px使えるので溢れない（2026-08-27 実測） */
.hero h1 em{font-style:normal;color:#d9f0d5;white-space:nowrap}
.hero p{margin-top:22px;font-size:16px;line-height:1.95;color:#dfe7dd;max-width:34em;
  text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;text-decoration:none;border-radius:var(--radius);padding:17px 30px;font-size:16px;
}
.btn-main{background:var(--accent);color:#fff}
.btn-main:hover{background:var(--accent-dark)}
.btn-sub{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.btn-ghost{border:1px solid var(--ink);color:var(--ink)}
.hero .btn-ghost{border-color:rgba(255,255,255,.75);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14)}
.hero-facts{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:40px;border-top:1px solid rgba(255,255,255,.28);
}
.fact{padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.28)}
.fact + .fact{border-left:1px solid rgba(255,255,255,.28);padding-left:18px}
.fact dt{font-size:12px;color:#b9c8b6;letter-spacing:.04em}
.fact dd{font-size:clamp(15px,2.2vw,17px);font-weight:700;margin-top:2px;color:#fff}
@media(max-width:600px){
  .hero-facts{grid-template-columns:1fr}
  .fact{display:flex;justify-content:space-between;padding:12px 0}
  .fact + .fact{border-left:none;padding-left:0}
  .fact dd{margin-top:0}
}

/* ── 下層ページの見出し ── */
.page-head{background:var(--cream);border-bottom:1px solid var(--rule);padding:40px 0 42px;text-align:center}
.page-head h1{
  font-family:var(--serif);margin-top:14px;
  font-size:clamp(24px,3.4vw,33px);font-weight:700;line-height:1.55;
}
.page-head h1::after{
  content:"";display:block;width:34px;height:2px;background:var(--accent);margin:16px auto 0;
}
.page-head .lead{margin:18px auto 0;font-size:15px;color:var(--ink-soft);max-width:38em}
/* パンくずだけは左のまま。中央に置くと現在地の表示に見えない */
.crumb{font-size:13px;color:var(--ink-soft);text-align:left}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--accent)}

/* ── セクション共通 ── */
section{padding:76px 0}
/* 見出しは中央揃え。英字を大きく置き、その下に日本語を添える組み方
   （cerezo.jp の見出しに合わせた・2026-08-26） */
.sec-head{margin-bottom:38px;text-align:center}
.sec-en{
  display:block;font-family:var(--sans);
  font-size:clamp(26px,4.4vw,40px);font-weight:800;line-height:1.1;
  letter-spacing:.06em;color:var(--accent);
}
.sec-head h2{
  font-family:var(--sans);font-size:clamp(14px,1.7vw,16px);font-weight:700;
  line-height:1.7;margin-top:10px;letter-spacing:.04em;color:var(--ink);
}
.sec-head h2::before{
  content:"";display:block;width:34px;height:2px;background:var(--accent);
  margin:0 auto 12px;
}
.sec-head p{margin:16px auto 0;color:var(--ink-soft);font-size:15px;max-width:44em}
/* 濃い面の中では白抜きにする */
.on-brand .sec-en{color:#fff}
.on-brand .sec-head h2{color:#fff}
.on-brand .sec-head h2::before{background:rgba(255,255,255,.8)}
.on-brand .sec-head p{color:#dff0dd}
.bg-soft{background:var(--cream)}
/* 「詳しく見る」リンク */
.more-wrap{text-align:center}
.more{
  display:inline-flex;align-items:center;gap:8px;margin-top:32px;
  font-size:15px;font-weight:700;text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:4px;
}
.more::after{content:"→";color:var(--accent)}
.more:hover{color:var(--accent)}

/* ── 困りごと ── */
.worry{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 32px}
.worry li{
  list-style:none;font-size:15px;padding:16px 0 16px 22px;position:relative;
  border-bottom:1px solid var(--rule);
}
.worry li::before{content:"";position:absolute;left:0;top:27px;width:10px;height:1px;background:var(--accent)}
.worry-answer{
  margin-top:34px;background:var(--brand);color:#fff;
  padding:28px 30px;font-family:var(--serif);font-size:clamp(16px,2.4vw,20px);font-weight:700;line-height:1.9;
}
.worry-answer .ln{display:block}
.worry-answer .hl{color:#cdefc9}
/* パソコン幅だと2文目が1行に収まらず「す。」だけ次行に落ちる。
   <br>で改行していたころは p 全体に balance をかけても効かなかったので、
   2026-09-01 に文ごとの .ln（block）に分けて、文単位で行を均等に割るようにした。
   760px以下も、当てないと1文目の末尾が56px（＝3文字）だけ残るので全幅に当てる */
.worry-answer .ln{text-wrap:balance}

/* ── 1行チェックの箇条書き（coach-recruit.html）──
   もとは .reasons と共用していたが、トップの REASONS が番号つきカードに
   変わったため 2026-09-01 に分離した。中身は旧 .reasons と同じ */
.merits{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;list-style:none}
.merits li{
  position:relative;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:16px 18px 16px 46px;font-size:16px;font-weight:700;line-height:1.7;
}
.merits li::before{
  content:"";position:absolute;left:20px;top:26px;width:12px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}
@media(max-width:760px){ .merits{grid-template-columns:1fr} }

/* ── 選ばれる理由（index.html・2026-09-01 に番号つきカードへ変更） ──
   1行の箇条書きから「01｜見出し＋説明文」の4枚に。番号は装飾なので
   スクリーンリーダーに読ませない（aria-hidden）。 */
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;list-style:none}
.reasons li{
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  padding:20px 22px;
}
.reasons .no{
  display:block;font-family:var(--serif);font-size:13px;font-weight:700;
  letter-spacing:.14em;line-height:1;color:var(--accent);
}
.reasons h3{
  margin-top:9px;padding-top:9px;border-top:1px solid var(--rule);
  font-size:17px;font-weight:700;line-height:1.7;
}
.reasons p{margin-top:8px;font-size:14px;line-height:1.85;color:var(--ink-soft);text-wrap:balance}
.reasons-lead{
  margin-top:28px;text-align:center;color:var(--forest);
  font-family:var(--serif);font-size:clamp(17px,2.6vw,22px);font-weight:700;line-height:2;
  text-wrap:balance;
}
@media(max-width:760px){ .reasons{grid-template-columns:1fr} }

/* ── レッスンについて ── */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:34px}
.feature{background:transparent;border-top:2px solid var(--ink);padding:22px 0 0}
.feature .no{
  font-family:var(--serif);font-size:26px;font-weight:700;color:var(--accent);line-height:1;
}
.feature h3{margin-top:10px;font-size:19px;font-weight:700;line-height:1.6}
.feature p{margin-top:12px;font-size:15px;color:var(--ink-soft)}
.feature p + p{margin-top:12px}

/* ── 写真 ── */
.photo-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin-top:36px}
.photo-row figure{margin:0;overflow:hidden}
.photo-row img{width:100%;height:230px;object-fit:cover}

/* ── 流れ ── */
.steps{display:grid;gap:0}
.step{
  padding:26px 0;display:flex;gap:26px;align-items:flex-start;
  border-top:1px solid var(--rule);
}
.steps .step:last-child{border-bottom:1px solid var(--rule)}
.step-no{flex:none;min-width:48px}
.step-no b{
  display:block;font-family:var(--serif);font-size:30px;font-weight:700;
  color:var(--accent);line-height:1;
}
.step h3{font-size:18px;font-weight:700}
.step p{margin-top:8px;font-size:15px;color:var(--ink-soft)}

/* ── 料金 ── */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.price{background:var(--paper);padding:28px 22px;text-align:center;position:relative}
.price h3{font-size:16px;font-weight:700}
.price .yen{
  margin-top:14px;font-family:var(--serif);font-size:34px;font-weight:700;
  color:var(--ink);letter-spacing:0;
}
.price .yen small{font-family:var(--sans);font-size:14px;font-weight:700;margin-left:3px}
.price .per{margin-top:8px;font-size:13px;color:var(--ink-soft)}
.price-note{margin-top:24px;font-size:14px;color:var(--ink-soft);line-height:2.1}
.price-note b{color:var(--ink)}

/* ── 体験 ── */
.trial{
  background:var(--brand);color:#fff;
  padding:44px 40px;display:grid;grid-template-columns:1.25fr .75fr;gap:36px;align-items:center;
}
.trial h2{font-family:var(--serif);font-size:clamp(21px,3.2vw,28px);font-weight:700;line-height:1.7}
.trial h2 em{font-style:normal;color:#cdefc9}
.trial ul{margin-top:20px;padding-left:0}
.trial li{list-style:none;font-size:15px;color:#dff0dd;padding-left:20px;position:relative;margin-top:9px}
.trial li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:1px;background:#cdefc9}
/* 線を1本引いただけだと中身のない枠に見えるので、薄い面にして実体を持たせる。
   角は立てたまま（このサイトは角丸をほぼ使わない設計・2026-08-27） */
.trial-box{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.26);
  padding:26px 24px 24px;text-align:center;
}
.trial-box .yen{font-family:var(--serif);font-size:40px;font-weight:700;line-height:1.25}
.trial-box .yen small{font-family:var(--sans);font-size:15px}
.trial-box p{font-size:13px;color:#dff0dd;margin-top:2px}
/* 緑の面では緑ボタンが沈むので白抜きにする */
.trial-box .btn-main{background:#fff;color:var(--brand)}
.trial-box .btn-main:hover{background:#eaf3e8}
.trial-box .btn{margin-top:22px;width:100%}
/* 金額と注記のあいだに細い区切りを入れて、値段の塊とボタンを分ける */
.trial-box p{padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.22)}

@media(max-width:760px){ .trial{grid-template-columns:1fr;padding:30px 24px} }
.br-sp{display:none}
@media(max-width:760px){ .br-sp{display:inline} }  /* スマホだけ改行位置を指定 */
/* フッターの名乗りは、デスクトップは「／」で1行、スマホは改行して2行に分ける。
   区切りと改行を入れ替えないと「高校生対／象」と語中で折れる（2026-08-27 実測） */
@media(max-width:760px){ .footer-name .sep{display:none} }

/* ── コーチ ── */
.coach{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:start}
.coach h3{font-family:var(--serif);font-size:24px;font-weight:700}
.coach h3 small{display:block;font-family:var(--sans);font-size:13px;font-weight:400;color:var(--ink-soft);letter-spacing:.08em;margin-bottom:6px}
.coach p{margin-top:16px;font-size:15px;color:var(--ink-soft)}
.coach-note{margin-top:22px;border-left:2px solid var(--accent);padding:4px 0 4px 18px;font-size:15px}
.coach-photo{margin:0}
.coach-photo img{width:100%;height:340px;object-fit:cover}
.coach-photo figcaption{margin-top:8px;font-size:12px;color:var(--ink-soft)}
@media(max-width:760px){ .coach{grid-template-columns:1fr} .coach-photo img{height:240px} }

/* ── コーチ一覧（顔写真つきカード・2026-08-28 追加） ──
   列数は auto-fit ではなく固定にしている。8名を並べたとき
   幅によって 5+3 のような半端な段になるのを避けるため（4→3→2列）。
   ※コーチが増減したら列数を見直す（2026-09-01 に5列→4列） */
.coach-list{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:30px 20px;margin-top:34px;
}
.coach-card .ph{
  aspect-ratio:4/5;background:var(--cream);
  border:1px solid var(--rule);border-radius:var(--radius);
  overflow:hidden;display:grid;place-items:center;
}
.coach-card .ph img{width:100%;height:100%;object-fit:cover}
.coach-card .ph svg{
  width:42%;height:auto;fill:none;stroke:#b3c9b1;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.coach-card .role{
  display:inline-block;margin-top:12px;
  font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.5;
  color:var(--forest);background:var(--cream);
  border:1px solid var(--rule);padding:1px 8px;border-radius:999px;
}
.coach-card h3{margin-top:8px;font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.5}
.coach-card ul{margin-top:9px;list-style:none;font-size:13px;line-height:1.75;color:var(--ink-soft)}
/* 経歴は1行が短く、幅300px（＝ページズーム相当）で1文字だけ落ちやすい。
   .worry li などと同じく balance で行を割る（2026-08-28 実測して追加） */
.coach-card li{position:relative;padding-left:11px;text-wrap:balance}
.coach-card li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:5px;height:1px;background:var(--accent-bright);
}
/* プロフィール公開前の枠。公開中のサイトに出るので、破線や薄すぎる文字は使わない。
   落ち着かせるだけにして「作りかけ」に見せない（2026-08-28） */
.coach-card.is-soon .ph{background:var(--paper)}
.coach-card.is-soon .role{background:var(--paper);color:var(--ink-soft)}
.coach-card .soon{margin-top:9px;font-size:13px;line-height:1.75;color:var(--ink-soft)}
.coach-list-note{margin-top:22px;font-size:13px;color:var(--ink-soft);text-align:center;text-wrap:balance}
.coach-list-note + .more-wrap{margin-top:26px}
/* 注記を外したので、カードの真下にボタンが付かないよう余白を持たせる（2026-09-01） */
.coach-list + .more-wrap{margin-top:34px}
@media(max-width:900px){ .coach-list{grid-template-columns:repeat(3,1fr)} }
@media(max-width:600px){
  .coach-list{grid-template-columns:repeat(2,1fr);gap:24px 14px}
  .coach-card h3{font-size:16px}
}

/* 横スクロール版（トップで在籍コーチを1本の帯に並べる・Uccleのアスリート紹介と同じ見せ方）。
   .coach-list の grid 指定より詳細度が1段高いので、上のメディアクエリより後ろに置いても
   前に置いても display は flex が勝つ。ただし打ち消しの事故を避けるため後ろに置いている */
.coach-list.is-scroll{
  display:flex;gap:20px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding-bottom:14px;                 /* スクロールバーがカードに重ならないように */
  scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
}
.coach-list.is-scroll::-webkit-scrollbar{height:8px}
.coach-list.is-scroll::-webkit-scrollbar-thumb{background:var(--rule);border-radius:999px}
.coach-list.is-scroll::-webkit-scrollbar-track{background:transparent}
/* 経歴が「松本山雅FC・モ／ンテディオ山形」のように語中で割れていたので
   190px→240px に広げて1行に収める（2026-09-01 実測して変更） */
.coach-list.is-scroll .coach-card{flex:0 0 240px;scroll-snap-align:start;align-self:start}
/* 「まだ右に続く」と分かるように、スマホでは画面の端まで帯を伸ばして次のカードを覗かせる */
@media(max-width:600px){
  .coach-list.is-scroll{
    margin-inline:calc(50% - 50vw);
    padding-inline:12px;gap:14px;
  }
  .coach-list.is-scroll .coach-card{flex-basis:220px}
}
/* coach.html の一覧はスマホで2列＝1枚168pxになり、経歴が
   「松本山雅FC・モ／ンテディオ山形」のように語中で割れていた。
   1列の横並び（写真左・経歴右）にして文字幅を224pxまで広げる。
   帯（.is-scroll）には当てないので :not() で外している（2026-09-01） */
@media(max-width:600px){
  .coach-list:not(.is-scroll){grid-template-columns:1fr;gap:18px}
  .coach-list:not(.is-scroll) .coach-card{
    display:grid;grid-template-columns:112px 1fr;column-gap:14px;align-content:start;
  }
  .coach-list:not(.is-scroll) .coach-card .ph{grid-column:1;grid-row:1/span 3}
  .coach-list:not(.is-scroll) .coach-card .role{grid-column:2;margin-top:0}
  .coach-list:not(.is-scroll) .coach-card h3,
  .coach-list:not(.is-scroll) .coach-card ul,
  .coach-list:not(.is-scroll) .coach-card .soon{grid-column:2}
}

/* さらに狭い（＝文字を拡大している）場合は、写真の右に置いた経歴が
   134pxしか取れず語中で割れる。経歴だけ写真の下に回して全幅を使う（2026-09-01） */
@media(max-width:360px){
  .coach-list:not(.is-scroll) .coach-card{grid-template-columns:96px 1fr;column-gap:12px}
  .coach-list:not(.is-scroll) .coach-card .ph{grid-row:1/span 2}
  .coach-list:not(.is-scroll) .coach-card .role{align-self:end}
  .coach-list:not(.is-scroll) .coach-card h3{align-self:start}
  .coach-list:not(.is-scroll) .coach-card ul{grid-column:1/-1;margin-top:11px}
}

.scroll-hint{
  margin-top:26px;text-align:right;
  font-size:12px;color:var(--ink-soft);
}
.scroll-hint::after{content:" →";color:var(--accent)}
.scroll-hint + .coach-list{margin-top:10px}

/* 節の中の小見出し（トップの代表あいさつの下にコーチ一覧を続けるため） */
.sub-head{margin-top:52px;padding-top:32px;border-top:1px solid var(--rule);text-align:center}
.sub-head h3{font-family:var(--serif);font-size:20px;font-weight:700}
.sub-head p{margin:8px auto 0;font-size:15px;color:var(--ink-soft);max-width:44em}

/* ── 対応エリア（area.html・2026-08-28 追加） ── */
.area-block + .area-block{margin-top:34px}
.area-block h3{font-family:var(--serif);font-size:20px;font-weight:700}
.area-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.area-nav a{
  text-align:center;text-decoration:none;
  border:1px solid var(--accent);color:var(--accent);background:var(--paper);
  border-radius:var(--radius);padding:11px 34px;font-size:15px;font-weight:700;
}
.area-nav a:hover{background:var(--accent);color:#fff}
/* スマホでは指で押しやすいよう2つで幅を分け合う */
@media(max-width:760px){ .area-nav a{flex:1 1 0;padding:11px 16px} }
.area-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;list-style:none}
.area-tags li{
  font-size:14px;line-height:1.7;
  border:1px solid var(--rule);background:var(--cream);
  border-radius:999px;padding:3px 13px;
}
/* 中身が仮のところは破線で囲って、公開前に必ず差し替えると分かるようにする */
.tbd-box{
  margin-top:28px;border:1px dashed var(--rule);border-radius:var(--radius);
  padding:16px 18px;font-size:14px;line-height:1.85;color:var(--ink-soft);
}
@media(max-width:600px){ .area-tags li{font-size:13px;padding:2px 11px} }

/* ── 保護者の声 ── */
.voices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.voices blockquote{margin:0;background:var(--paper);padding:28px 26px}
.voices p{font-size:15px;color:var(--ink-soft);min-height:84px}
.voices cite{display:block;margin-top:14px;font-style:normal;font-size:13px;font-weight:700}

/* ── よくある質問 ── */
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 48px 22px 0;
  font-weight:700;font-size:16px;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"＋";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--accent);font-weight:400;font-size:18px;
}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 24px;font-size:15px;color:var(--ink-soft)}

/* ── お問い合わせ ── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.contact-grid>*{min-width:0}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr} }
.card{background:var(--paper);border:1px solid var(--rule);padding:30px 28px}
.card h3{font-family:var(--serif);font-size:19px;font-weight:700}
.card p{margin-top:12px;font-size:15px;color:var(--ink-soft)}
label{display:block;margin-top:18px;font-size:14px;font-weight:700}
input,select,textarea{
  width:100%;min-width:0;margin-top:8px;padding:13px 14px;font-size:16px;font-family:inherit;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.form-note{margin-top:14px;font-size:13px;color:var(--ink-soft)}
button[type=submit]{
  margin-top:22px;width:100%;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-weight:700;font-size:17px;
  padding:18px;border-radius:var(--radius);font-family:inherit;
}
button[type=submit]:hover{background:var(--accent-dark)}
.contact-line{display:block;margin-top:14px;text-align:center;text-decoration:none}
/* メールアドレスは単語の途中で折り返せないため、狭い画面で枠からはみ出す */
.contact-line{overflow-wrap:anywhere}

/* ── Instagramの埋め込み ──
   embed.js が blockquote に min-width:326px などの直書きスタイルを入れるため、
   狭い画面ではみ出す。!important で上書きして枠に収める（2026-08-27） */
.ig-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:20px;align-items:start;
}
.ig-grid .instagram-media{
  margin:0 !important;min-width:0 !important;
  width:100% !important;max-width:100% !important;
}
.ig-grid iframe{width:100% !important;min-width:0 !important;max-width:100% !important}

/* ── 次のページへの案内 ── */
.next-nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.next-nav a{background:var(--paper);padding:24px 22px;text-decoration:none;display:block}
.next-nav a:hover{background:var(--cream)}
.next-nav b{display:block;font-size:16px;font-weight:700}
.next-nav b::after{content:" →";color:var(--accent)}
.next-nav span{display:block;margin-top:6px;font-size:14px;color:var(--ink-soft)}

/* ── ページ下部の申し込み案内 ── */
.cta-band{background:var(--brand-blue);color:#fff;padding:40px 0;text-align:center}
@media(max-width:600px){ .cta-band{padding:30px 0} }
.cta-band h2{font-family:var(--serif);font-size:clamp(20px,3vw,27px);font-weight:700;line-height:1.7}
.cta-band h2 em{font-style:normal;color:#d9f0d5}
/* #d5e6f4 は青地で4.47:1と基準に届いていなかったため明るくした */
.cta-band p{margin-top:12px;font-size:15px;color:#e3eefa}
.cta-band .btn{margin-top:20px}
.cta-band .btn-main{background:#fff;color:var(--cta-blue)}
.cta-band .btn-main:hover{background:#e8f1f9;color:var(--cta-blue)}

/* ── フッター ──
   PC・スマホとも中央揃え（2026-08-27）。
   上段＝ロゴ｜名称、その下にSNSとお問い合わせ、罫線、下段＝リンクと著作権表示。 */
.footer{
  background:var(--paper);color:var(--ink-soft);
  border-top:1px solid var(--rule);
  padding:40px 0 30px;font-size:14px;text-align:center;
}
.footer a{color:var(--ink)}
.footer-top{display:flex;flex-direction:column;align-items:center;gap:20px}
.footer-id{display:flex;align-items:center;justify-content:center;gap:20px;min-width:0}
.footer-mark{height:44px;width:auto;flex:none}
.footer-name{
  padding-left:20px;border-left:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;text-align:left;
}
.footer-name b{color:var(--ink);font-size:16px;font-weight:700;line-height:1.5}
.footer-name span{font-size:13px;line-height:1.7}

.footer-actions{display:flex;align-items:center;justify-content:center;gap:18px}
.footer-sns{display:flex;gap:6px}
.footer-sns a{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
}
.footer-sns svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.footer-sns svg .dot{fill:var(--ink);stroke:none}
.footer-sns a:hover{background:rgba(36,128,47,.09)}
.footer-sns a:hover svg{stroke:var(--accent)}
.footer-cta{
  display:inline-flex;align-items:center;gap:12px;
  border:1px solid var(--accent);border-radius:999px;color:var(--accent);
  padding:11px 24px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;
}
.footer-cta span:last-child{font-size:17px;line-height:1}
.footer-cta:hover{background:var(--accent);color:#fff}

.footer-bottom{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px}
.footer-links a{text-decoration:none;font-size:14px}
.footer-links a:hover{color:var(--accent);text-decoration:underline}
.footer-copy{font-size:12px;color:#6b746d}

@media(max-width:760px){
  /* ロゴと名前を横に並べるとロゴが幅を食い、名前が変な位置で折れる */
  .footer-id{flex-direction:column;gap:12px}
  .footer-name{padding-left:0;border-left:0;align-items:center;text-align:center}
  .footer-actions{flex-direction:column;align-items:center;width:100%;gap:14px}
  .footer-cta{width:100%;justify-content:center}
  .footer-links{gap:12px 22px}
}

/* ── スマホ固定ボタン ── */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;
  padding:7px 12px calc(7px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--rule);
}
.sticky a{flex:1;padding:12px 8px;font-size:14px}
/* 枠線のある .btn-sub だけ2px広くなり、左右のボタンが揃わなかった。
   透明の枠線で幅を合わせる（2026-08-26） */
.sticky .btn-main{border:1px solid transparent}
@media(max-width:860px){ .sticky{display:flex} }
@media(min-width:861px){ body{padding-bottom:0} }

/* ───────────────────────────────────────────
   スマホ表示の調整（2026-08-26 追加）
   iPhoneの文字サイズを大きめに設定していても崩れないように、
   固定pxで置いていた位置指定をem基準に直し、
   縦に伸びすぎていた余白と料金表を詰めています。
   ─────────────────────────────────────────── */

/* 箇条書きのダッシュ。topを固定pxにしていると文字を拡大したとき
   1行目の中心からずれるので、文字サイズに追随するem基準にする */
.worry li::before{top:calc(16px + .95em)}
.trial li::before{top:.95em}

@media(max-width:600px){
  /* セクション間が上下76pxずつ空いて画面の大半が余白になっていた */
  section{padding:44px 0}
  .sec-head{margin-bottom:26px}
  .hero p{line-height:1.85}
  .worry-answer{padding:22px 20px}

  /* 料金：1枚ずつの中央寄せカードだと縦に長く、4プランの比較に
     何度もスクロールが要るため、スマホでは行型（左=プラン名／右=金額）にする */
  .price-grid{
    display:block;background:transparent;border:0;gap:0;
    border-top:1px solid var(--rule);
  }
  .price{
    display:grid;grid-template-columns:1fr auto;
    column-gap:14px;align-items:baseline;
    text-align:left;padding:14px 0;
    border-bottom:1px solid var(--rule);
  }
  .price h3{grid-column:1;grid-row:1;font-size:16px}
  .price .yen{grid-column:2;grid-row:1;margin-top:0;font-size:25px;line-height:1.3}
  .price .yen small{font-size:13px}
  .price .per{grid-column:1;grid-row:2;margin-top:2px;font-size:13px}
  .price-note{margin-top:18px;line-height:1.95}
}

@media(max-width:600px){
  /* ボタンは文字数で幅が決まるため、ラベルの長さが違うと横幅がバラバラになり
     階段状に見えていた。スマホでは縦に積んで幅を揃える
     （下の固定バーが flex:1 で揃えているのと同じ扱い・2026-08-26） */
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
}

@media(max-width:480px){
  /* 文字を小さくせずに本文の幅を広げるため、左右の余白を20px→12pxに削る
     （koki41.com の .container と同じ方針・2026-08-26） */
  .wrap{width:min(100% - 24px,var(--wrap))}
}

@media(max-width:760px){
  /* 県ボタンが2つ→4つに増えたので、狭い幅では2列に折り返す。
     flex:1 1 0 のままだと4つが1行に詰まってボタンの中で改行し、
     ラベルが1文字だけ次行に落ちていた（2026-08-30）
     ※ .area-nav の基本指定より後ろに置いて、こちらを勝たせている */
  .area-nav a{flex:1 1 calc(50% - 5px);min-width:0;text-align:center}
}

@media(max-width:359px){
  /* 300px 幅では2列でもラベルが折れるため、1列に落とす（2026-08-30） */
  .area-nav a{flex:1 1 100%}
}