@charset "utf-8";
/* ============================================================
   KOTOHA ── 共通スタイル（全ページで読み込みます）
   色や文字の大きさを変えたいときは、この :root の値を直してください
   ============================================================ */
:root{
  /* 色：赤＝押す・進む、紺＝補足。文字に使う色はすべて白・クリーム地で 4.5:1 以上 */
  --aka:#C63F24; --aka-d:#A9361E; --aka-l:#FDF2EE; --aka-bright:#D9482B;
  --indigo:#2B4A6B; --indigo-d:#213A55; --indigo-l:#EEF3F8;
  --gold:#B08A2E; --gold-t:#7D6019; --gold-l:#F7F0DC;
  --cream:#FFF8F0; --sand:#F5EADB; --ink:#2A2320; --body:#4A413B;
  --gray:#6E655D; --line:#EADFD0; --white:#fff;
  /* 影：ブランドの暗色ベースで2段階 */
  --shadow:0 2px 8px rgba(42,35,32,.06),0 10px 30px rgba(42,35,32,.07);
  --shadow-md:0 6px 16px rgba(42,35,32,.10),0 18px 40px rgba(42,35,32,.12);
  /* 角丸・動き・文字 */
  --r:16px; --r-sm:8px; --r-lg:20px; --t:.18s ease;
  --lh-tight:1.35; --lh-body:1.8; --lh-small:1.7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:clip}
body{margin:0;background:var(--cream);color:var(--body);font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,Meiryo,sans-serif;line-height:var(--lh-body);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--aka)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:var(--lh-tight);margin:0;font-weight:700;letter-spacing:.01em}
h3{font-weight:800}
p{margin:0 0 1em}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- ヘッダー ---------- */
.topbar{height:6px;background:var(--aka-bright)}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,248,240,.94);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{display:flex;align-items:baseline;gap:8px;text-decoration:none}
.logo b{font-family:Inter,sans-serif;font-weight:800;font-size:24px;letter-spacing:.22em;color:var(--aka)}
.logo small{font-size:12px;letter-spacing:.2em;color:var(--indigo);font-weight:700}
nav.main{display:flex;align-items:center;gap:16px}
nav.main a{color:var(--body);text-decoration:none;font-size:14px;font-weight:700;white-space:nowrap}
nav.main a:hover{color:var(--aka)}
nav.main a.active{color:var(--aka);box-shadow:inset 0 -2px 0 var(--aka)}
nav.main a.lang{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.3;border:1px solid var(--line);border-radius:var(--r);padding:4px 12px;box-shadow:none}
nav.main a.lang b{font-size:13px;font-weight:800}
nav.main a.lang small{font-size:12px;color:var(--gray);font-weight:700;letter-spacing:.02em}
nav.main a.lang:hover{border-color:var(--aka);color:var(--aka)}
nav.main a.lang:hover small{color:var(--aka)}
nav.main a.cta{background:var(--aka);color:#fff;padding:8px 16px;border-radius:999px;box-shadow:none}
nav.main a.cta:hover{background:var(--aka-d)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 8px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
@media(max-width:960px){
  nav.main{display:none;position:absolute;left:0;right:0;top:64px;background:var(--cream);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 16px}
  nav.main.open{display:flex}
  nav.main a{padding:12px 0;border-bottom:1px solid var(--line);box-shadow:none}
  nav.main a.active{color:var(--aka)}
  nav.main a.lang{display:block;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0}
  nav.main a.lang b{font-size:14px}
  nav.main a.lang small{display:inline;font-size:12px;margin-left:8px}
  nav.main a.cta{margin-top:12px;text-align:center;border:0}
  .burger{display:block}
}

/* ---------- トップページの大ヒーロー ---------- */
.hero{position:relative;min-height:640px;display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.hero .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,20,18,.82) 0%,rgba(28,20,18,.62) 45%,rgba(28,20,18,.15) 100%)}
.hero .wrap{padding-top:80px;padding-bottom:80px;width:100%}
.hero .inner{max-width:640px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#FBD9CF}
.hero .eyebrow::before{content:"";width:28px;height:2px;background:var(--aka)}
.hero h1{color:#fff;font-size:40px;line-height:1.35;margin:16px 0 16px;font-weight:900;letter-spacing:.01em}
.hero h1 em{font-style:normal;color:#FFB3A0}
.hero p.lead{font-size:18px;color:rgba(255,255,255,.9);margin-bottom:24px}
.hero .btns{display:flex;flex-wrap:wrap;gap:12px}
.hero .tags{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.hero .tags span{font-size:12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:4px 12px;color:rgba(255,255,255,.9)}
.hero .mark{position:absolute;right:6%;bottom:-40px;width:230px;height:230px;border-radius:50%;background:var(--aka-bright);display:flex;align-items:center;justify-content:center;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hero .mark::before{content:"";position:absolute;inset:26px;border-radius:50%;background:#E2624A}
.hero .mark span{position:relative;color:#fff;font-weight:900;font-size:36px;letter-spacing:.25em;padding-left:.25em}
@media(max-width:960px){.hero .mark{width:140px;height:140px;right:-20px;bottom:-30px}.hero .mark::before{inset:16px}.hero .mark span{font-size:22px}}
@media(max-width:560px){.hero{min-height:560px}.hero h1{font-size:32px}.hero .wrap{padding-top:64px;padding-bottom:112px}}

/* ---------- 下層ページの見出し帯 ---------- */
.phero{position:relative;color:#fff;overflow:hidden;isolation:isolate;padding:80px 0 80px}
.phero .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center}
.phero .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(28,20,18,.86) 0%,rgba(28,20,18,.68) 50%,rgba(28,20,18,.3) 100%)}
.phero.blue .shade{background:linear-gradient(90deg,rgba(28,38,52,.9) 0%,rgba(30,45,64,.72) 50%,rgba(30,45,64,.35) 100%)}
.phero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#FBD9CF;letter-spacing:.06em}
.phero .eyebrow::before{content:"";width:26px;height:2px;background:var(--aka)}
.phero h1{color:#fff;font-size:36px;margin:12px 0 12px;font-weight:900;line-height:1.35;max-width:820px}
.phero p{font-size:16px;color:rgba(255,255,255,.9);max-width:720px;margin:0}
.phero .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media(max-width:560px){.phero{padding:48px 0 48px}.phero h1{font-size:28px}}

/* ---------- ボタン ---------- */
.btn{display:inline-block;background:var(--aka);color:#fff;text-decoration:none;font-weight:800;padding:12px 24px;border-radius:999px;font-size:15px;transition:var(--t);border:2px solid var(--aka);text-align:center}
.btn:hover{background:var(--aka-d);border-color:var(--aka-d);transform:translateY(-1px);box-shadow:0 6px 16px rgba(198,63,36,.22)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn.ghost:hover{background:rgba(255,255,255,.14);box-shadow:none}
.btn.ghost.dark{color:var(--aka);border-color:var(--aka)}
.btn.ghost.dark:hover{background:var(--aka-l);box-shadow:none}
.btn.sm{padding:8px 16px;font-size:14px}

/* ---------- セクション ---------- */
section{padding:96px 0}
@media(max-width:768px){section{padding:64px 0}}
section.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.sand{background:var(--sand)}
.sec-label{display:inline-flex;align-items:center;gap:8px;color:var(--aka);font-weight:800;font-size:13px;letter-spacing:.08em}
.sec-label::before{content:"";display:inline-block;width:5px;height:16px;background:var(--aka)}
h2{font-size:32px;margin:12px 0 8px;letter-spacing:.01em;max-width:28em}
.sub{color:var(--indigo);font-weight:700;margin:0 0 32px;font-size:16px;max-width:44em}
@media(max-width:560px){section{padding:64px 0}h2{font-size:24px}}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:960px){.g2{grid-template-columns:1fr}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.card h3{font-size:18px;margin-bottom:8px}
.card p{margin:0;font-size:15px}
.card .tag{font-size:12px;color:var(--gray);margin-bottom:4px;font-weight:700}
.card ul{margin:8px 0 0;padding-left:16px;font-size:14px}
/* カード全体をリンクにする場合 */
a.card{text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:var(--t)}
a.card p{flex:1}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
a.card .to{display:inline-block;margin-top:12px;font-size:14px;font-weight:800;color:var(--aka)}
a.card.indigo .to{color:var(--indigo)}
a.card.gold .to{color:var(--gold-t)}
a.card .to::after{content:" →"}
a.card:hover .to{text-decoration:underline}
.card .thumb{display:flex;align-items:center;justify-content:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--r);height:210px;margin:0 0 16px;padding:16px;overflow:hidden}
.card .thumb img{max-height:100%;max-width:100%;width:auto;border-radius:3px;box-shadow:var(--shadow-md)}
.card .thumb.logo{background:#fff}
.card .thumb.logo img{box-shadow:none;border-radius:0;max-height:72%}
@media(max-width:560px){.card .thumb{height:250px}}
.card li{margin:4px 0}
.band{background:var(--sand);border-left:6px solid var(--indigo);border-radius:var(--r);padding:16px 24px;font-weight:700;color:var(--ink);margin-top:24px;font-size:15px}
  .band>*:last-child{margin-bottom:0}
  .band{max-width:60em}
.band.indigo{border-left-color:var(--indigo)}
.note{font-size:13px;color:var(--gray);margin-top:16px;max-width:64em}
.note a{color:var(--gray)}
.h3s{margin:48px 0 16px;padding-left:12px;border-left:5px solid var(--aka)}
.h3s:first-child{margin-top:0}
.h3s h2{font-size:24px;margin:0;max-width:34em;letter-spacing:.01em}
.h3s p{font-size:14px;color:var(--gray);font-weight:700;margin:2px 0 0;max-width:52em}

/* ---------- ページ内目次（長いページ用） ---------- */
.toc{background:var(--white);border-bottom:1px solid var(--line)}
.toc .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:12px;padding-bottom:12px}
.toc a{white-space:nowrap;font-size:13px;font-weight:700;color:var(--body);text-decoration:none;padding:8px 16px;border-radius:999px;background:var(--cream);border:1px solid var(--line)}
.toc a:hover{border-color:var(--aka);color:var(--aka)}

/* ---------- 写真つきカード ---------- */
.pcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;text-decoration:none;color:inherit}
.pcard img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pcard .body{padding:24px 24px 24px;flex:1}
.pcard .num{font-family:Inter,sans-serif;font-weight:800;color:var(--aka);font-size:13px;letter-spacing:.12em}
.pcard h3{font-size:20px;margin:4px 0 8px}
.pcard p{font-size:15px;margin:0}
.pcard .to{display:inline-block;margin-top:12px;font-size:13px;font-weight:800;color:var(--aka)}
.pcard .to::after{content:" →"}
a.pcard{transition:var(--t)}
a.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:32px 0 0}
.strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
@media(max-width:560px){.strip{grid-template-columns:1fr 1fr}}

/* ---------- 数字 ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.facts{grid-template-columns:1fr 1fr}}
.fact{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 16px}
.fact b{display:block;font-family:Inter,"Noto Sans JP",sans-serif;font-size:40px;color:var(--aka);line-height:1.1;font-weight:800}
.fact b small{font-size:18px;margin-left:2px;font-family:"Noto Sans JP",sans-serif}
.fact span{display:block;font-size:13px;color:var(--ink);font-weight:700;margin-top:4px}
.fact em{display:block;font-style:normal;font-size:12px;color:var(--gray);margin-top:4px}

/* ---------- ベン図（強み） ---------- */
.vennwrap{margin:0 0 40px;text-align:center}
.venn{width:100%;max-width:620px;height:auto;display:block;margin:0 auto}
.venn text{font-family:inherit;fill:var(--ink)}
.venn .setlabel{font-size:19px;font-weight:800}
.venn .setsub{font-size:12.5px;font-weight:500;fill:var(--body)}
.venn .pair{font-size:12.5px;font-weight:700}
.venn .core{font-size:20px;font-weight:800;fill:#fff;letter-spacing:.5px}
.vennwrap figcaption{font-size:12.5px;color:var(--gray);max-width:640px;margin:14px auto 0;line-height:1.85;text-align:left}
/* 画面が狭いと図の文字が小さくなりすぎるため、重なりの説明は消して主要ラベルを大きくする。
   消した内容は figcaption に文章で残してあります */
@media(max-width:760px){
  .venn{max-width:none}
  .venn .pair,.venn .setsub{display:none}
  .venn .setlabel{font-size:31px}
  .venn .core-circle{r:74px}
  .venn .core{font-size:25px}
}

/* ---------- ギャップの図（トップの「いま起きていること」） ---------- */
.gapfig{margin:32px 0 0}
.gaprow{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:0;align-items:stretch}
/* 左右のブロック */
.gapside{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 16px;display:flex;flex-direction:column}
.gapside b{display:block;font-size:18px;margin-bottom:12px}
.gapside.want b{color:var(--indigo)}
.gapside.have b{color:var(--gold-t)}
.gapside ul{margin:0;padding-left:16px;font-size:15px;flex:1}
.gapside li{margin:4px 0}
.gapside small{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--gray);font-weight:700}
/* あいだ（溝と橋） */
.gapmid{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--sand);margin:24px -12px 24px;border-radius:var(--r);padding:16px 24px}
.gapword{font-size:12px;font-weight:800;color:var(--gray);letter-spacing:.24em;margin-bottom:12px}
.gapmid .bridge{background:var(--aka);border-radius:999px;padding:16px 24px;text-align:center;box-shadow:0 8px 20px rgba(198,63,36,.28);width:100%}
.gapmid .bridge b{display:block;color:#fff;font-size:18px;margin-bottom:4px}
.gapmid .bridge span{display:block;color:#FBD9CF;font-size:13px;font-weight:700;line-height:1.6}
/* 両側から橋へ向かう矢印 */
.gapmid::before,.gapmid::after{content:"";position:absolute;top:50%;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent}
.gapmid::before{left:-11px;margin-top:-8px;border-left:11px solid var(--indigo)}
.gapmid::after{right:-11px;margin-top:-8px;border-right:11px solid var(--gold)}
/* たどり着く状態 */
.gapgoal{position:relative;margin:32px auto 0;max-width:820px;background:var(--aka-l);border:2px solid var(--aka);border-radius:var(--r);padding:24px 24px;text-align:center}
.gapgoal::before{content:"";position:absolute;top:-25px;left:50%;margin-left:-8px;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:13px solid var(--aka)}
.gapgoal b{display:block;font-size:22px;color:var(--aka-d);margin-bottom:4px}
.gapgoal span{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.gapfig figcaption{font-size:13px;color:var(--gray);max-width:70em;margin:16px 0 0;line-height:1.85}
/* 狭い画面では縦に積み、矢印も下向きに */
@media(max-width:960px){
  .gaprow{grid-template-columns:1fr;gap:24px}
  .gapmid{margin:0;padding:24px}
  .gapmid::before{left:50%;top:-24px;margin:0 0 0 -8px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:12px solid var(--indigo);border-bottom:0}
  .gapmid::after{right:auto;left:50%;top:auto;bottom:-24px;margin:0 0 0 -8px;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:12px solid var(--gold);border-top:0;border-right-width:9px}
  .gapside.have{order:3}
  .gapgoal{margin-top:40px}
}
@media(max-width:560px){
  .gapgoal b{font-size:20px}
  .gapmid .bridge b{font-size:18px}
}

/* ---------- 循環図 ---------- */
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;counter-reset:c}
.cycle div{position:relative;background:var(--white);border:1px solid var(--line);padding:16px 16px 16px 16px;font-size:14px;font-weight:700;color:var(--ink)}
.cycle div::before{counter-increment:c;content:counter(c);position:absolute;left:-1px;top:-1px;background:var(--aka);color:#fff;font-size:12px;font-weight:800;padding:2px 8px;border-radius:0 0 8px 0}
.cycle div:first-child{border-radius:var(--r) 0 0 12px}.cycle div:last-child{border-radius:0 12px 12px 0}
.cycle div+div{border-left:0}
.cycle small{display:block;font-weight:400;color:var(--body);font-size:13px;margin-top:4px}
@media(max-width:960px){.cycle{grid-template-columns:1fr 1fr}.cycle div{border-radius:0!important;border:1px solid var(--line)}}

/* ---------- 学校ページ ---------- */
.lead-split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-bottom:48px}
.lead-split .photos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lead-split .photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow)}
.lead-split .photos img:nth-child(2){margin-top:32px}
.lead-split p.big{font-size:18px;color:var(--ink)}
@media(max-width:960px){.lead-split{grid-template-columns:1fr;margin-bottom:40px}}
.floors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.floors{grid-template-columns:1fr}}
.floor{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.floor.two{border-top-color:var(--gold)}
.floor .lvl{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--indigo)}
.floor.two .lvl{color:var(--gold-t)}
.floor h3{font-size:20px;margin:4px 0 4px}
.floor .pay{display:inline-block;font-size:12px;font-weight:800;background:var(--indigo-l);color:var(--indigo);padding:3px 8px;border-radius:999px;margin-bottom:8px}
.floor.two .pay{background:var(--gold-l);color:var(--gold-t)}
.floor p{font-size:15px;margin:0}
.merits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:960px){.merits{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.merits{grid-template-columns:1fr}}
.merit{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.merit i{font-style:normal;display:inline-flex;width:40px;height:40px;border-radius:var(--r);background:var(--aka-l);color:var(--aka);font-weight:900;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-size:14px;margin-bottom:8px}
.merit b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.merit p{font-size:14px;margin:0}
.merit .opt{display:inline-block;margin-left:4px;vertical-align:2px;font-size:12px;font-weight:800;color:var(--gold-t);background:var(--gold-l);border-radius:999px;padding:2px 8px;white-space:nowrap}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}
.box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.box.red{border:1px solid var(--indigo);background:var(--indigo-l)}
.box h3,.box h4{font-size:18px;margin-bottom:8px}
.box.red h3,.box.red h4{color:var(--indigo)}
.box ul{margin:0;padding-left:16px;font-size:15px}
.box li{margin:4px 0}
.box li b{color:var(--ink)}
.box.perks li{margin:12px 0}
.box.perks li b{display:block;margin-bottom:2px}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:s}
.steps.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.steps,.steps.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps,.steps.four{grid-template-columns:1fr}}
.step{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.step::before{counter-increment:s;content:"0" counter(s);display:block;color:var(--aka);font-weight:800;font-size:22px;font-family:Inter,sans-serif}
.step b{display:block;color:var(--ink);margin:4px 0 4px;font-size:15px}
.step p{margin:0;font-size:14px}
.step small{display:block;color:var(--gray);font-size:12px;margin-top:8px;font-weight:700}
.persona{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:768px){.persona{grid-template-columns:1fr}}
.persona div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 24px}
.persona b{display:block;color:var(--ink);font-size:15px}
.persona small{display:block;color:var(--gray);font-size:12px;font-weight:700;margin-bottom:4px}
.persona p{font-size:14px;margin:0}
details.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:0 24px;margin-bottom:8px}
details.faq summary{cursor:pointer;font-weight:700;color:var(--ink);padding:16px 0;list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"Q";flex:none;color:var(--aka);font-family:Inter,sans-serif;font-weight:800}
details.faq p{font-size:15px;padding:0 0 16px 24px;margin:0;max-width:52em}

/* ---------- 実例ショーケース（helpmekansai / Canadays） ---------- */
.showcase{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.showcase .acct{display:inline-block;font-size:13px;font-weight:800;color:var(--aka);background:var(--aka-l);padding:4px 12px;border-radius:999px;margin-bottom:12px;font-family:Inter,"Noto Sans JP",sans-serif}
.showcase p{font-size:15px}
.showcase .mini{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 16px}
.showcase .mini div{background:var(--sand);border-radius:var(--r);padding:12px 12px}
.showcase .mini b{display:block;font-family:Inter,"Noto Sans JP",sans-serif;font-weight:800;color:var(--aka);font-size:24px;line-height:1.1}
.showcase .mini span{font-size:12px;color:var(--body)}
.showcase ul{margin:0;padding-left:16px;font-size:15px}
.showcase li{margin:8px 0}
.showcase li b{color:var(--ink)}
.showcase .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media(max-width:960px){.showcase .mini{grid-template-columns:1fr 1fr}}

/* helpmekansai：縦長の投稿2枚 ＋ 本文 */
.showcase.ig{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start}
.showcase.ig .shots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.showcase.ig .shots img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
@media(max-width:960px){.showcase.ig{grid-template-columns:1fr;padding:24px}}

/* Canadays：横長のイベント告知 ＋ 本文 */
.showcase.cd{padding:0;overflow:hidden}
.showcase.cd .banners{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.showcase.cd .banners figure{margin:0;display:flex;flex-direction:column}
.showcase.cd .banners figure+figure{border-left:1px solid var(--line)}
.showcase.cd .banners img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.showcase.cd .banners figcaption{padding:12px 16px 16px;font-size:13px;color:var(--body);background:var(--cream);flex:1}
.showcase.cd .banners figcaption b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
@media(max-width:960px){.showcase.cd .banners{grid-template-columns:1fr}.showcase.cd .banners figure+figure{border-left:0;border-top:1px solid var(--line)}}
.showcase.cd .body{padding:24px 24px 24px}
.showcase.cd .head{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.showcase.cd .head img{width:76px;height:76px;flex:none;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:4px}
@media(max-width:960px){.showcase.cd .body{padding:24px}.showcase.cd .head{gap:12px}.showcase.cd .head img{width:58px;height:58px}}

/* ---------- 店舗向け ---------- */
.worry{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:960px){.worry{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.worry{grid-template-columns:repeat(2,1fr)}}
.worry div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.worry b{display:block;color:var(--ink);font-size:15px}
.worry small{color:var(--body);font-size:12px}
.worry i{font-style:normal;color:var(--aka);font-weight:800;font-size:12px;font-family:Inter,sans-serif}
.collage{grid-template-columns:1fr 1fr;gap:12px}
.collage img{aspect-ratio:1;object-fit:cover;border-radius:var(--r)}
.collage img:nth-child(2){margin-top:24px}
.collage img:nth-child(3){margin-top:-24px}
@media(max-width:560px){.collage img{margin-top:0!important}}
table{width:100%;border-collapse:collapse;background:var(--white);font-size:14px}
th,td{padding:12px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
thead th{background:var(--ink);color:#fff;font-size:13px}
thead th.hi{background:var(--aka)}
tbody th{background:var(--sand);color:var(--ink);font-size:13px;width:20%}
td.hi{color:var(--aka);font-weight:700;background:var(--aka-l)}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.plan-h{font-size:15px;color:var(--ink);margin:24px 0 12px;display:flex;align-items:center;gap:8px}
.plan-h::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--aka);flex:none}
.plan-h:first-of-type{margin-top:8px}
.tcap{caption-side:top;text-align:left;font-size:0;height:0;overflow:hidden}
.price{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.price h3{font-size:16px}
.price .for{display:block;font-size:13px;font-weight:700;color:var(--gray);margin-top:4px}
.price .amt{font-size:28px;color:var(--aka);font-weight:900;margin:4px 0 2px;font-family:Inter,"Noto Sans JP",sans-serif}
.price .amt small{font-size:13px;color:var(--gray);font-weight:700;font-family:"Noto Sans JP",sans-serif}
.price .taxin{font-size:12px;font-weight:700;color:var(--gray);margin:-1px 0 2px}
.price ul{margin:8px 0 0;padding-left:16px;font-size:14px}
.price.std{border:2px solid var(--aka)}
.price{display:flex;flex-direction:column}
.price ul{flex:1}
.price .btn.buy{display:block;margin-top:16px;text-align:center}
.price:not(.std) .btn.buy{background:var(--white);color:var(--aka)}
.price:not(.std) .btn.buy:hover{background:var(--aka-l)}
.kpi b small{font-weight:800;color:var(--aka)}
/* 30日ロードマップ：中身（note へ）と特典を横並びに */
.rm-what{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin:24px 0 4px}
.rm-note{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--indigo-l);border:1px solid var(--line);border-left:6px solid var(--indigo);border-radius:var(--r);padding:24px 24px;transition:var(--t)}
.rm-note:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.rm-note .who{font-size:12px;font-weight:800;color:var(--indigo);letter-spacing:.06em}
.rm-note b{display:block;color:var(--ink);font-size:18px;line-height:1.45;margin:4px 0 8px}
.rm-note p{font-size:14px;margin:0;flex:1}
.rm-note .go{display:inline-block;margin-top:12px;font-size:14px;font-weight:800;color:var(--indigo)}
.rm-note .go::after{content:" →"}
.rm-perks{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px}
.rm-perks>b{display:block;color:var(--ink);font-size:15px;margin-bottom:8px}
.rm-perks ol{margin:0;padding-left:24px}
.rm-perks li{margin:8px 0;font-size:14px;line-height:1.55}
.rm-perks li b{color:var(--ink)}
.rm-perks li span{display:block;font-size:13px;color:var(--gray)}
.rm-perks small{display:block;font-size:12px;color:var(--gray);margin-top:12px;line-height:1.6}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.rm-what{grid-template-columns:1fr}.steps.three{grid-template-columns:1fr}}

.tblwrap.legal tbody th{width:26%;white-space:nowrap}
.tblwrap.legal td{line-height:1.8}
@media(max-width:560px){.tblwrap.legal table,.tblwrap.legal tbody,.tblwrap.legal tr,.tblwrap.legal th,.tblwrap.legal td{display:block;width:auto}.tblwrap.legal tbody th{white-space:normal;padding-bottom:4px}.tblwrap.legal td{border-bottom:0;padding-top:4px}.tblwrap.legal tr{border-bottom:1px solid var(--line)}}

.price .badge{display:inline-block;background:var(--aka);color:#fff;font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:4px}

/* ---------- 実績 ---------- */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px}
@media(max-width:960px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi b{display:block;font-size:36px;color:var(--aka);line-height:1.1;font-family:Inter,"Noto Sans JP",sans-serif;font-weight:800}
.kpi span{font-size:13px;color:var(--body);display:block;margin-top:4px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:560px){.posts{grid-template-columns:1fr}}
.post{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.post img{width:100%;aspect-ratio:9/16;object-fit:cover}
.post div{padding:12px 12px;font-size:13px}
.post div b{display:block;color:var(--ink)}

/* ---------- 代表 ---------- */
.profile{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
@media(max-width:768px){.profile{grid-template-columns:1fr}.profile>div:first-child{max-width:260px}}
.profile img{width:100%;border-radius:var(--r);box-shadow:var(--shadow)}
.profile h2{font-size:24px;max-width:none;margin:0}
.profile h3{font-size:24px}
.profile .kana{color:var(--gray);font-size:13px;margin-bottom:12px}
.tl{list-style:none;padding:0;margin:16px 0 0;font-size:14px}
.tl li{padding:4px 0 4px 16px;border-left:2px solid var(--line);position:relative}
.tl li::before{content:"";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--aka)}
.tl b{color:var(--aka);margin-right:8px;font-family:Inter,sans-serif}
.strengths{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:768px){.strengths{grid-template-columns:1fr}}
.strengths div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.strengths b{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
.strengths small{display:block;color:var(--gray);font-size:12px;font-weight:700;margin-bottom:8px}
.strengths ul{margin:0;padding-left:16px;font-size:14px}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:768px){.team{grid-template-columns:1fr}}
.team div{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px;font-size:14px}
.team b{display:block;color:var(--ink);font-size:16px}
.team small{display:block;color:var(--aka);font-weight:700;font-size:12px;margin-bottom:4px}

/* ---------- 英語ページ ---------- */
.step .bookbtn{display:inline-block;margin:12px 0 2px;padding:8px 16px;border-radius:999px;background:var(--aka);color:#fff;font-size:13px;font-weight:800;text-decoration:none;transition:var(--t)}
.step .bookbtn:hover{background:var(--aka-d)}
.step .bookbtn::after{content:" →"}
/* 予約パネル（英語ページの一番の導線。フォームより目立つように赤ベタ） */
.bookmain{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;align-items:center;margin:64px 0 0;padding:40px 40px;border-radius:var(--r);background:linear-gradient(135deg,#C63F24 0%,#A5321A 100%);box-shadow:0 16px 40px rgba(198,63,36,.22)}
.bookmain .bm-eyebrow{font-family:Inter,sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:8px}
.bookmain h2{color:#fff;font-size:32px;line-height:1.35;margin:0 0 12px}
.bookmain p{font-size:15px;line-height:1.8;color:rgba(255,255,255,.93);margin:0;max-width:34em}
.bookmain .btn{display:block;width:100%;background:#fff;color:var(--aka);border-color:#fff;font-size:18px;padding:16px 24px;box-shadow:var(--shadow-md)}
.bookmain .btn:hover{background:var(--cream);border-color:var(--cream)}
.bm-pts{list-style:none;margin:16px 0 0;padding:0;font-size:13px;font-weight:700;color:rgba(255,255,255,.93)}
.bm-pts li{position:relative;padding-left:24px;margin:8px 0;line-height:1.6}
.bm-pts li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
@media(max-width:960px){.bookmain{grid-template-columns:1fr;gap:24px;padding:32px 24px;margin-top:48px}.bookmain h2{font-size:24px}}
.en-body{font-size:16px}
.en-body h2,.en-body h3{letter-spacing:0}
.en-body ul{padding-left:16px;font-size:16px}
.en-body .card p,.en-body .step p,.en-body details.faq p,.en-body .box li{letter-spacing:0}
.en-body .profile p,.en-body .profile ul{font-size:16px}
.en-body .profile ul{padding-left:16px}
.en-body li{margin:8px 0}

/* ---------- たこ先生（@helpmekansai のキャラクター） ---------- */
/* 法人向けページ用：文脈のある場所に置く小さな静止画 */
.h3s.quiet{margin-top:48px;border-left-color:var(--line)}
.h3s.quiet h2{font-size:18px;color:var(--body)}
.cform.lite{box-shadow:none;padding:24px;max-width:720px}
@media(max-width:560px){.cform.lite{padding:16px}}
.h3s.has-tako{display:flex;align-items:center;gap:16px}
.h3s.has-tako>div{flex:1;min-width:0}
.tako-mark{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;margin:0}
.tako-mark img{width:74px;height:74px;object-fit:contain}
.tako-mark figcaption{font-size:12px;color:var(--gray);font-weight:700;white-space:nowrap}
@media(max-width:560px){.h3s.has-tako{gap:12px}.tako-mark img{width:58px;height:58px}}

/* トップ：4事業のカード（4列のときは少し詰める） */
.biz .pcard .body{padding:16px 16px 24px}
.biz .pcard h3{font-size:18px}
.biz .pcard p{font-size:14px}
.biz .pcard .num{font-size:12px}
/* 実績：Tako Talk の3画面 */
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:4px}
.phones figure{margin:0;text-align:center}
.phones img{width:100%;max-width:300px;margin:0 auto;display:block;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow)}
.phones figcaption{margin-top:12px;font-size:14px;color:var(--body)}
.phones figcaption b{display:block;font-family:Inter,sans-serif;font-weight:800;font-size:20px;color:var(--ink);margin-bottom:4px}
.tt-line{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:24px}
.tt-line span{font-size:13px;color:var(--gray);font-weight:700;max-width:44em}
@media(max-width:768px){.phones{grid-template-columns:1fr;gap:24px}.phones img{max-width:240px}}
/* トップの理念セクション */
.mission-story p{font-size:16px;line-height:1.95}
.origin{background:var(--sand);border-left:6px solid var(--indigo);border-radius:var(--r);padding:24px 24px}
.origin .k{font-family:Inter,sans-serif;font-weight:800;letter-spacing:.24em;color:var(--aka);font-size:24px}
.origin .yomi{display:block;font-size:13px;color:var(--gray);font-weight:700;margin:4px 0 12px}
.origin p{font-size:15px;margin:0}
.mission{margin-top:32px;background:var(--indigo);color:#fff;border-radius:var(--r);padding:32px 32px}
.mission b{display:block;color:#fff;font-size:22px;line-height:1.6}
.mission ul{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mission li{font-size:15px;font-weight:700;color:rgba(255,255,255,.92);border-top:2px solid var(--aka-bright);padding-top:8px}
@media(max-width:768px){.mission{padding:24px 24px}.mission b{font-size:20px}.mission ul{grid-template-columns:1fr}}

/* 30日ロードマップ特設ページ（roadmap.html） */
.rd{max-width:820px}
.rd h2{font-size:24px;margin:48px 0 16px;padding-left:12px;border-left:5px solid var(--aka);line-height:1.4}
.rd p{font-size:16px;line-height:2}
.rd .rd-lead{font-size:18px;font-weight:700;color:var(--ink)}
.rd .rd-quote{font-size:20px;font-weight:800;color:var(--ink);margin:16px 0}
.rd .note{font-size:13px;line-height:1.8}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.reviews figure{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 24px;display:flex;flex-direction:column}
.reviews blockquote{margin:0;font-size:15px;line-height:1.7;color:var(--ink);flex:1}
.reviews blockquote::before{content:"\201C";color:var(--aka);font-family:Inter,serif;font-size:28px;line-height:0;margin-right:4px;vertical-align:-8px}
.reviews figcaption{font-size:13px;color:var(--gray);font-weight:700;margin-top:12px}
.reviews.long{grid-template-columns:1fr 1fr;margin-bottom:12px}
.reviews.long blockquote{font-size:14px;line-height:1.75}
.days{list-style:none;margin:8px 0 16px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.days li{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px}
.days .d{display:inline-block;font-family:Inter,sans-serif;font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--aka);background:var(--aka-l);border-radius:999px;padding:3px 8px;margin-bottom:8px}
.days b{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}
.days small{display:block;font-size:13px;color:var(--body);line-height:1.7}
.checks-inline{list-style:none;margin:4px 0 8px;padding:0}
.checks-inline li{position:relative;padding-left:24px;margin:8px 0;font-size:16px;line-height:1.8}
.checks-inline li::before{content:"";position:absolute;left:4px;top:.75em;width:11px;height:6px;border-left:2.5px solid var(--aka);border-bottom:2.5px solid var(--aka);transform:rotate(-45deg)}
.perks3{margin-top:16px}
.perks3 .card h3{font-size:16px}
.perks3 .card p{font-size:14px}
.rd figure.shot{margin:16px 0 24px}
.rd figure.shot img{width:100%;display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.rd figure.shot figcaption{font-size:13px;color:var(--gray);font-weight:700;margin-top:8px;line-height:1.6}
.rd figure.shot.narrow{max-width:560px}
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.shots2 figure.shot{margin:0 0 4px}
@media(max-width:560px){.shots2{grid-template-columns:1fr}}
.paywall{position:relative;text-align:center;margin:64px 0 8px;scroll-margin-top:96px}
.paywall::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--line)}
.paywall span{position:relative;display:inline-block;background:var(--cream);padding:4px 16px;font-size:13px;font-weight:800;color:var(--gray);letter-spacing:.06em}
.rd .h3s{margin-top:32px}
.rm-card{margin-top:4px;background:var(--white);border-left-color:var(--aka)}
.rm-card .who{color:var(--aka)}
.rm-card .go{color:var(--aka)}
.paywall+.h3s{margin-top:32px}
@media(max-width:768px){.reviews,.reviews.long{grid-template-columns:1fr}.days{grid-template-columns:1fr}.rd h2{font-size:22px}.rd p{font-size:16px}}

/* 学習者ページ用：ヒーロー直下の数字帯（競合の stats bar に相当。誇張せず、事実だけ） */
.proof{background:var(--white);border-bottom:1px solid var(--line)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.proof .wrap>div{padding:16px 16px;border-left:1px solid var(--line)}
.proof .wrap>div:first-child{border-left:0;padding-left:0}
.proof b{display:block;font-family:Inter,"Noto Sans JP",sans-serif;font-weight:800;font-size:28px;color:var(--aka);line-height:1.1}
.proof span{display:block;font-size:13px;color:var(--body);font-weight:700;margin-top:3px;line-height:1.45}
@media(max-width:960px){.proof .wrap{grid-template-columns:1fr 1fr}.proof .wrap>div{padding:12px 16px}.proof .wrap>div:nth-child(odd){border-left:0;padding-left:0}.proof .wrap>div:nth-child(n+3){border-top:1px solid var(--line)}}

/* 学習者ページ用：大手エージェントとの比較表 */
.cmp table{font-size:14px}
.cmp thead th{font-size:13px}
.cmp tbody th{width:19%;font-size:14px}
.cmp td{line-height:1.6}
.cmp td.hi{color:var(--ink);font-weight:700}
@media(max-width:560px){
  .cmp table,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tr{border-bottom:1px solid var(--line)}
  .cmp tbody th{width:auto;padding:12px 16px 4px;background:var(--sand);font-size:13px}
  .cmp td{border-bottom:0;padding:8px 16px 12px 16px}
  .cmp td::before{content:attr(data-col);display:block;font-family:Inter,sans-serif;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);margin-bottom:2px}
  .cmp td.hi::before{color:var(--aka)}
}

/* 学習者ページ用：学校を見るときのチェック項目 */
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:c}
.checks li{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 24px;font-size:14px;color:var(--body);line-height:1.7;position:relative}
.checks li::before{counter-increment:c;content:counter(c,decimal-leading-zero);display:block;font-family:Inter,sans-serif;font-weight:800;font-size:13px;color:var(--aka);letter-spacing:.08em;margin-bottom:8px}
.checks li b{display:block;color:var(--ink);font-size:16px;line-height:1.4;margin-bottom:4px}
@media(max-width:960px){.checks{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.checks{grid-template-columns:1fr}}

/* 学習者ページ用：到着後のサポート（写真＋3枚のカード） */
.after{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:stretch}
.after figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column}
.after figure{align-self:start}
.after figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.after figcaption{padding:12px 16px;font-size:13px;color:var(--gray);font-weight:700;background:var(--white)}
.after-cards{display:grid;gap:12px}
.after-cards .card{padding:16px 24px}
.after-cards .card h3{font-size:18px}
.af-links{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
.af-links a{font-size:13px;font-weight:800;color:var(--aka);text-decoration:none;border:1px solid var(--aka);border-radius:999px;padding:4px 12px}
.af-links a:hover{background:var(--aka-l)}
.af-links a:first-child::after{content:" →"}
@media(max-width:960px){.after{grid-template-columns:1fr}}

/* 学習者ページ用：ヒーローのたこ先生と吹き出し */
.lhero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center}
.lhero .hero-tako{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:260px}
.lhero .hero-tako img{width:min(300px,80%);height:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
.speech-bubble{position:relative;display:inline-block;background:#fff;border:3px solid var(--ink);border-radius:var(--r);padding:8px 16px;font-weight:800;font-size:1.05rem;color:var(--indigo);line-height:1.4;white-space:nowrap}
.speech-bubble::after{content:"";position:absolute;bottom:-11px;left:30px;width:14px;height:14px;background:#fff;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg) skew(10deg,10deg)}
.hero-bubble{position:absolute;top:-6px;left:4%;animation:bubble-pop .4s ease-out both;z-index:2}
.tako-float{animation:tako-float 3.2s ease-in-out infinite;transform-origin:50% 85%}
@media(max-width:960px){.lhero .wrap{grid-template-columns:1fr}.lhero .hero-tako{min-height:0;justify-content:flex-start;padding:48px 0 0 8px;margin-top:4px}.lhero .hero-tako img{width:170px;height:auto}.hero-bubble{left:0;top:0;max-width:100%}.lhero .hero-bubble.speech-bubble{white-space:normal;font-size:.92rem;padding:8px 12px}.lhero .hero-bubble.speech-bubble::after{left:86px}}

/* スクロール表示（少し浮き上がる） */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .55s ease-out,transform .55s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none}

/* スクロールに追従するたこ先生。位置は JS が決め、CSS は見た目と出入りだけ */
.tako-follower{position:fixed;top:0;left:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .35s;will-change:transform}
.tako-follower.show{opacity:1}
.tako-follower img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.tako-follower img.swap{animation:tako-bounce .5s ease}
/* 本文の横に余白が取れない画面幅では、小さくして隅に置く */
.tako-follower.corner img{width:86px;height:86px}
.tako-follower.corner .follower-bubble{font-size:.78rem;padding:4px 8px;max-width:168px}
.follower-bubble{font-size:.88rem;padding:4px 12px;max-width:220px;white-space:normal;text-align:center}
.follower-bubble::after{left:50%;margin-left:-8px}
@media(max-width:768px){.tako-follower img{width:84px;height:84px}.follower-bubble{font-size:.8rem;max-width:170px}}

@keyframes tako-float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}
@keyframes bubble-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes tako-bounce{0%{transform:scale(1)}35%{transform:scale(1.12) rotate(-4deg)}70%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.tako-float,.tako-follower img.swap,.hero-bubble{animation:none}.reveal{opacity:1;transform:none;transition:none}}

/* ---------- 宛先別の入口カード（上の「強み」カードとは別の性質だと分かるように） ---------- */
.audience{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.audcard{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border-radius:var(--r);padding:24px 24px 24px;border:1px solid var(--line);border-left-width:6px;transition:var(--t)}
.audcard.schools{background:var(--indigo-l);border-left-color:var(--indigo)}
.audcard.shops{background:var(--gold-l);border-left-color:var(--gold)}
.audcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.audcard .who{font-size:13px;font-weight:800;letter-spacing:.04em;margin-bottom:8px}
.audcard.schools .who{color:var(--indigo)}
.audcard.shops .who{color:var(--gold-t)}
.audcard b{display:block;font-size:20px;color:var(--ink);line-height:1.5;margin-bottom:8px}
.audcard p{font-size:15px;margin:0;flex:1}
.audcard .go{display:inline-block;margin-top:16px;font-size:14px;font-weight:800}
.audcard.schools .go{color:var(--indigo)}
.audcard.shops .go{color:var(--gold-t)}
.audcard .go::after{content:" →"}
.audcard:hover .go{text-decoration:underline}
@media(max-width:768px){.audience{grid-template-columns:1fr}.audcard{padding:24px 24px 16px}}

/* ---------- CTA 帯 ---------- */
.cta-inline{background:var(--indigo);color:#fff;border-radius:var(--r);padding:32px 32px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:40px}
.cta-inline h3{color:#fff;font-size:22px;margin-bottom:4px}
.cta-inline p{margin:0;font-size:15px;color:rgba(255,255,255,.9)}
.cta-inline .btn{background:#fff;color:var(--indigo);border-color:#fff;white-space:nowrap}
.cta-inline .btn:hover{background:#eef3f8}
@media(max-width:768px){.cta-inline{grid-template-columns:1fr;padding:24px 24px}}

/* ---------- お問い合わせ ---------- */
.contact{background:var(--aka);color:#fff;border-radius:var(--r);padding:48px 32px;text-align:center}
.contact h2{color:#fff}
.contact .sub{color:#FBD9CF}
.contact p{max-width:640px;margin:0 auto 24px}
.contact .who{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:24px auto 32px;max-width:900px;text-align:left}
@media(max-width:768px){.contact .who{grid-template-columns:1fr}.contact{padding:32px 24px}}
.contact .who div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:var(--r);padding:16px 16px;font-size:14px}
.contact .who b{display:block;font-size:15px;margin-bottom:4px}
.contact .btn{background:#fff;color:var(--aka);border-color:#fff}
.contact .btn:hover{background:#FDF2EE}
.contact .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.contact .btn.ghost:hover{background:rgba(255,255,255,.14);box-shadow:none}

/* ---------- お問い合わせフォーム ---------- */
.cform{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow);max-width:840px}
.cform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-row{margin-bottom:24px}
.cform label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px}
.req{display:inline-block;background:var(--aka);color:#fff;font-size:12px;font-weight:800;padding:1px 8px;border-radius:999px;margin-left:8px;vertical-align:2px;letter-spacing:.04em}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform select,.cform textarea{min-height:48px;
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;line-height:1.7;transition:var(--t)}
.cform textarea{resize:vertical;min-height:150px}
.cform select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%236E655D' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;cursor:pointer}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--aka);background:#fff;box-shadow:0 0 0 4px rgba(198,63,36,.18)}
.cform input::placeholder,.cform textarea::placeholder{color:#7A6E63}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
fieldset.cf-row{border:0;padding:0;margin:0 0 24px}
fieldset.cf-row legend{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;padding:0}
.cf-radios{display:grid;gap:8px}
.cf-radios label{display:flex;align-items:flex-start;gap:12px;font-weight:500;font-size:15px;color:var(--body);background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:0;cursor:pointer}
.cf-radios label:hover{border-color:var(--aka)}
.cf-radios label:has(input:checked){border-color:var(--aka);background:var(--aka-l);color:var(--ink);font-weight:700}
.cf-radios input{accent-color:var(--aka);margin:4px 0 0;flex:none;width:17px;height:17px}
.cf-privacy{font-size:13px;color:var(--gray);margin:16px 0}
.cform button{border:0;cursor:pointer;font-family:inherit;width:100%;max-width:340px;font-size:16px;padding:16px 24px}
.cform button:disabled{opacity:.55;cursor:default}
.cf-status{margin:16px 0 0;font-size:15px;font-weight:700;line-height:1.8}
.cf-status.ok{color:#1C6B3E}
.cf-status.ng{color:var(--aka-d)}
.cf-status.ng a{color:var(--aka-d)}
@media(max-width:560px){.cform{padding:24px}.cf-grid{grid-template-columns:1fr}.cform button{max-width:none}}

/* ---------- 次に読むページ ---------- */
@media(max-width:768px){.nextgrid{grid-template-columns:1fr}}

/* ---------- フッター ---------- */
footer{padding:32px 0 40px;font-size:12px;color:var(--gray)}
footer .fnav{display:flex;flex-wrap:wrap;gap:8px 24px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
footer .fnav a{color:var(--body);text-decoration:none;font-size:13px;font-weight:700}
footer .fnav a:hover{color:var(--aka)}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
footer .src{margin-top:16px;font-size:12px;line-height:1.7}