/* Layout: 原稿用紙と赤ペン添削。左寄せの紙面に、藍色のインクと朱の添削を一点だけ効かせる */
:root{
  --paper:#f6f8f7;
  --sheet:#ffffff;
  --ink:#17263a;
  --ink-soft:#4a5a6d;
  --rule:#cfdcd8;
  --grid:#9fc2b8;
  --ai:#1f4e79;
  --ai-tint:#e4edf5;
  --pen:#d1352b;
  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
  --s-xs:.8125rem; --s-sm:.9375rem; --s-md:1.0625rem; --s-lg:1.375rem; --s-xl:clamp(1.75rem,3.2vw,2.5rem); --s-xxl:clamp(2.1rem,5.4vw,3.9rem);
  --wrap:1120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f1720; --sheet:#16212d; --ink:#e6ecef; --ink-soft:#a3b1bd; --rule:#2a3a48; --grid:#2f5a52;
    --ai:#8fb8de; --ai-tint:#1b2c3d; --pen:#ff7a6b; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1720; --sheet:#16212d; --ink:#e6ecef; --ink-soft:#a3b1bd; --rule:#2a3a48; --grid:#2f5a52;
  --ai:#8fb8de; --ai-tint:#1b2c3d; --pen:#ff7a6b; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--s-md);line-height:1.85;letter-spacing:.02em}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.35;text-wrap:balance;margin:0;letter-spacing:.04em}
p{margin:0}
a{color:var(--ai)}
:focus-visible{outline:2px solid var(--ai);outline-offset:3px;border-radius:2px}
.label{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ai)}

/* header */
header.site{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--ink)}
.logo b{font-family:var(--f-display);font-size:1.3rem;font-weight:800;letter-spacing:.08em}
.logo small{font-size:var(--s-xs);color:var(--ink-soft)}
nav.main{display:flex;gap:22px;align-items:center;font-size:var(--s-sm)}
nav.main a{color:var(--ink);text-decoration:none}
nav.main a:hover{color:var(--ai)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-body);font-weight:700;font-size:var(--s-sm);padding:12px 22px;border-radius:999px;text-decoration:none;border:1.5px solid var(--ai);cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn-primary{background:var(--ai);color:var(--sheet)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ai)}
.btn-ghost:hover{background:var(--ai-tint)}
@media (max-width:820px){nav.main a:not(.btn){display:none}}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:64px 72px}
.hero h1{font-size:var(--s-xxl);font-weight:800;margin-top:14px}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 68%,color-mix(in srgb,var(--pen) 28%,transparent) 68%)}
.hero .lead{margin-top:22px;max-width:34em;color:var(--ink-soft)}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;padding:0;list-style:none;font-size:var(--s-xs);color:var(--ink-soft)}
.hero .facts li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--grid);margin-right:8px;vertical-align:middle}

/* 原稿用紙 */
.sheet{background:var(--sheet);border:1px solid var(--rule);padding:22px 22px 18px;box-shadow:0 18px 40px -24px color-mix(in srgb,var(--ink) 40%,transparent);position:relative;min-width:0}
.sheet-head{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-soft);margin-bottom:10px;letter-spacing:.08em}
.genko{--cell:clamp(22px,2.4vw,30px);display:grid;grid-template-columns:repeat(14,var(--cell));grid-auto-rows:var(--cell);border-top:1px solid var(--grid);border-left:1px solid var(--grid);width:max-content;max-width:100%;margin:0 auto}
.genko span{border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);display:grid;place-items:center;font-family:var(--f-display);font-size:calc(var(--cell)*.6);line-height:1;position:relative;color:var(--ink)}
.genko span.del{color:var(--ink-soft)}
.genko span.del::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:var(--pen);transform:rotate(-8deg)}
.genko span.ins{color:var(--pen);font-weight:700}
.notes{margin-top:14px;display:grid;gap:6px;font-size:var(--s-xs);color:var(--pen);font-family:var(--f-body)}
.notes p::before{content:"✎ ";}
.stamp{position:absolute;right:-12px;top:-14px;font-family:var(--f-display);font-weight:800;color:var(--pen);border:2px solid var(--pen);border-radius:50%;width:70px;height:70px;display:grid;place-items:center;font-size:.8rem;line-height:1.2;text-align:center;transform:rotate(12deg);background:var(--sheet)}

/* sections */
section.block .wrap{padding-block:80px}
section.block + section.block .wrap{border-top:1px solid var(--rule)}
.sec-head{display:grid;gap:12px;max-width:44em;margin-bottom:44px}
.sec-head h2{font-size:var(--s-xl)}
.sec-head p{color:var(--ink-soft)}

/* about + timeline */
.about-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.compare{width:100%;border-collapse:collapse;font-size:var(--s-sm)}
.compare th,.compare td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.compare th{font-weight:500;color:var(--ink-soft);width:7em}
.compare thead th{font-family:var(--f-mono);font-size:var(--s-xs);letter-spacing:.1em;color:var(--ai)}
.tbl{overflow-x:auto;min-width:0}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:7.5em 1fr;gap:18px;padding:16px 0;border-bottom:1px dashed var(--rule)}
.timeline time{font-family:var(--f-mono);font-size:var(--s-sm);color:var(--ai);font-variant-numeric:tabular-nums;padding-top:2px}
.timeline b{display:block;font-weight:700}
.timeline span{font-size:var(--s-sm);color:var(--ink-soft)}
.timeline li.key time{color:var(--pen);font-weight:500}
.footnote{margin-top:14px;font-size:var(--s-xs);color:var(--ink-soft)}

/* 指導内容 */
.subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.subjects article{background:var(--sheet);padding:28px 26px;display:grid;gap:10px;align-content:start}
.subjects h3{font-size:var(--s-lg)}
.subjects .doc{font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ai);letter-spacing:.06em}
.subjects p{font-size:var(--s-sm);color:var(--ink-soft)}

/* 流れ */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;padding-top:18px;border-top:2px solid var(--ai)}
.steps li::before{content:"STEP " counter(s);font-family:var(--f-mono);font-size:var(--s-xs);color:var(--ai);letter-spacing:.12em}
.steps b{font-family:var(--f-display);font-size:1.15rem}
.steps span{font-size:var(--s-sm);color:var(--ink-soft)}

/* online */
.online{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.online div{display:grid;gap:6px;align-content:start}
.online .num{font-family:var(--f-display);font-size:2.6rem;font-weight:800;color:var(--ai);line-height:1.1;font-variant-numeric:tabular-nums}
.online .num small{font-size:1rem;margin-left:4px}
.online b{font-size:var(--s-md)}
.online p{font-size:var(--s-sm);color:var(--ink-soft)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:var(--sheet);border:1px solid var(--rule);padding:30px 26px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px}
.plan.featured{border:2px solid var(--ai)}
.plan .tag{justify-self:start;font-size:var(--s-xs);font-weight:700;color:var(--sheet);background:var(--ai);padding:2px 10px;border-radius:999px}
.plan .tag.ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--rule)}
.plan h3{font-size:var(--s-lg)}
.price{font-family:var(--f-display);font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.price small{font-family:var(--f-body);font-size:var(--s-xs);font-weight:500;color:var(--ink-soft);margin-left:4px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:var(--s-sm);align-content:start}
.plan li{padding-left:1.3em;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.75em;width:.6em;height:1px;background:var(--ai)}
.plan .for{font-size:var(--s-xs);color:var(--ink-soft);border-top:1px solid var(--rule);padding-top:12px}

/* faq */
.faq{display:grid;gap:0;max-width:820px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q.";font-family:var(--f-display);color:var(--ai);margin-right:10px}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.4rem;color:var(--ai);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px 2em;color:var(--ink-soft);font-size:var(--s-sm)}

/* contact */
.contact{background:var(--ai-tint)}
.contact .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding-block:80px}
form.form{background:var(--sheet);border:1px solid var(--rule);padding:28px;display:grid;gap:18px;min-width:0}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:var(--s-xs);font-weight:700}
.field label i{font-style:normal;color:var(--pen);margin-left:6px;font-weight:500}
input,select,textarea{font:inherit;font-size:var(--s-sm);color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:10px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ai);outline-offset:0;border-color:transparent}
textarea{min-height:110px;resize:vertical}
.form-note{font-size:var(--s-xs);color:var(--ink-soft)}
.form-msg{font-size:var(--s-sm);padding:12px 14px;border-left:3px solid var(--ai);background:var(--ai-tint)}
.contact-points{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;font-size:var(--s-sm)}
.contact-points li{display:flex;gap:10px}
.contact-points li::before{content:"✓";color:var(--ai);font-weight:700}

footer .wrap{padding-block:36px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:var(--s-xs);color:var(--ink-soft)}

@media (max-width:960px){
  .hero .wrap,.about-grid,.contact .wrap{grid-template-columns:1fr;gap:40px}
  .subjects,.plans{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr 1fr}
  .stamp{right:6px}
}
@media (max-width:620px){
  .hero .wrap{padding-block:40px 56px}
  section.block .wrap,.contact .wrap{padding-block:56px}
  .subjects,.plans,.online,.row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .timeline li{grid-template-columns:1fr;gap:2px}
  .genko{--cell:calc((100vw - 32px - 60px) / 14)}
  .stamp{width:58px;height:58px;font-size:.7rem;top:-18px}
}

/* --- サイト単体で配信するための追加 --- */
:root{color-scheme:light}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg.is-error{border-left-color:var(--pen)}
button[disabled]{opacity:.6;cursor:progress}
.mail-line{margin-top:24px;padding-top:18px;border-top:1px solid var(--rule);font-size:var(--s-xs);color:var(--ink-soft)}
.mail-line a{font-family:var(--f-mono);font-size:var(--s-sm);font-weight:500;overflow-wrap:anywhere}
footer a{color:var(--ink-soft)}