/*! world-paper — /coaching/ (コーチング). Loaded after works.css + agents.css + coaching.css.
    Ruled paper, Noto Serif JP, an ink-black button; the sheet handed over the next
    day is the picture. Light theme: data-theme="light" on body flips the chrome. */
body[data-world="paper"]{
  --ground:#F3EEE4;--raise:#FFFDF9;
  --ink:#1C1A17;--ink-mid:#4A443B;--ink-dim:#615949;--ink-faint:#716959;
  --line:rgba(28,26,23,.14);--line-firm:rgba(28,26,23,.28);
  --acc:#9A6B1E;--acc-line:rgba(154,107,30,.5);--acc-glow:rgba(154,107,30,.14);--tint:#9A6B1E;
  background-color:#F3EEE4;
  background-image:repeating-linear-gradient(180deg,rgba(28,26,23,.045) 0 1px,transparent 1px 28px);
}
body[data-world="paper"] main{--grad:linear-gradient(96deg,#B8892E 0%,#9A6B1E 100%)}
body[data-world="paper"] :is(.card,.brief,.step,.plan,.spec,.num,.doc,.tread,.form-wrap,.vq-form-msg,.vq-noscript,.qs li){background:#FFFDF9;border-color:var(--line);box-shadow:0 1px 0 rgba(28,26,23,.04)}
body[data-world="paper"] .card:hover{border-color:var(--acc-line);box-shadow:0 18px 40px rgba(60,40,10,.12)}
body[data-world="paper"] .brief{background:#FFFDF9}
body[data-world="paper"] .brief-row{border-bottom-color:var(--line)}
body[data-world="paper"] .chips li{background:rgba(28,26,23,.04);color:var(--ink-dim);border-color:var(--line)}
body[data-world="paper"] :is(input,select,textarea){background:#FFFFFF;border-color:var(--line-firm);color:var(--ink)}
body[data-world="paper"] :is(input,select,textarea):focus{background:#FFFFFF;border-color:var(--acc)}
/* Small print on a light ground. .lbl carries a hard #9CA9BC from works.css
   (2.34:1 here) and the shell's error text is drawn for a dark ground (1.43:1);
   both move to this theme's own tokens / red at the AA floor. */
body[data-world="paper"] .lbl{color:var(--ink-dim)}
body[data-world="paper"] .form-note{color:var(--ink-dim)}
body[data-world="paper"] .vq-form-msg[data-state="error"]{color:#B42318;border-color:rgba(180,35,24,.45)}
body[data-world="paper"] .brief-row.doubt b{color:var(--acc)}
body[data-world="paper"] .btn-ghost{border-color:rgba(28,26,23,.3);color:var(--ink)}
body[data-world="paper"] .btn-ghost:hover{background:rgba(28,26,23,.04);border-color:var(--acc)}
body[data-world="paper"] :is(.btn,.submit,.stair-cta){background:#1C1A17;color:#F3EEE4;box-shadow:0 12px 30px rgba(28,26,23,.18)}
body[data-world="paper"] .plan .pick{color:#F3EEE4;background:#1C1A17}
body[data-world="paper"] .sec h2{font-family:'Noto Serif JP',serif;font-weight:700;letter-spacing:0}
body[data-world="paper"] .p-hero::before{display:none}
/* ── Hero ── */
.w-name--serif{font-family:'Noto Serif JP',serif;font-weight:700;font-size:clamp(44px,6.4vw,92px);line-height:1.1;letter-spacing:.02em}
.w-sheet-wrap{position:relative;width:min(100%,420px);margin:0 0 0 auto;padding:0 18px 22px 0}
.w-sheet-back{position:absolute;left:18px;top:22px;right:0;bottom:0;background:#EEE7DA;border:1px solid rgba(28,26,23,.08);transform:rotate(1.2deg);box-shadow:0 20px 50px rgba(60,40,10,.12)}
.w-sheet{position:relative;background:#FFFDF9;border:1px solid rgba(28,26,23,.08);transform:rotate(-1.5deg);box-shadow:0 30px 60px rgba(60,40,10,.2);padding:30px 36px;display:flex;flex-direction:column;gap:20px;color:#1C1A17;font-size:13px;line-height:1.75;min-height:560px;text-align:left}
.w-sheet .top{display:flex;justify-content:space-between;gap:12px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;color:#9A6B1E}
.w-sheet .ttl{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:2px 0 4px;padding-bottom:12px;border-bottom:1px solid rgba(28,26,23,.14)}
.w-sheet .ttl b{font-family:'Noto Serif JP',serif;font-size:22px;font-weight:700}
.w-sheet .ttl small{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;color:#7A705F}
.w-sheet .blk{display:flex;flex-direction:column;gap:5px}
.w-sheet .blk i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;color:#9A6B1E}
.w-sheet .blk .goal{font-family:'Noto Serif JP',serif;font-size:14px;font-weight:500;line-height:1.7}
.w-sheet ol{margin:0;padding-left:20px}
.w-sheet .end{margin-top:auto;padding-top:12px;border-top:1px solid rgba(28,26,23,.14);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;color:#9A6B1E}
@media (max-width:960px){.w-sheet-wrap{margin:0 auto}}
@media (max-width:620px){.w-sheet,.w-sheet-back{transform:none}.w-sheet{padding:24px 22px;min-height:0}}

/* ── 05 の図解 ────────────────────────────────────────────────────────
   コーチングの用語を、言葉だけでなく図で見せる節。図は SVG で描く（画像を
   置かないので拡大しても崩れず、地の色に合う）。viewBox は 420 幅で、
   スマホでも SVG 内の文字が小さくなりすぎない大きさに揃えてある。 */
.dgm{display:grid;margin-top:clamp(6px,1.4vw,16px)}
.dgm-row{margin:0;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(20px,3.2vw,52px);align-items:center;
  padding:clamp(26px,3.4vw,46px) 0;border-top:1px solid var(--line)}
.dgm-row:first-child{border-top:0;padding-top:clamp(6px,1vw,14px)}
.dgm-row:nth-child(even) .dgm-art{order:2;margin-left:auto}
.dgm-art{width:100%;max-width:520px;padding:clamp(14px,1.8vw,22px);
  background:#FFFDF9;border:1px solid var(--line);box-shadow:0 1px 0 rgba(28,26,23,.04)}
.dgm-svg{display:block;width:100%;height:auto}
.dgm-txt{margin:0}
.dgm-term{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.dgm-term b{font-family:'Noto Serif JP',serif;font-weight:700;font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.02em;color:var(--acc)}
.dgm-term i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.14em;color:var(--ink-dim)}
.dgm-txt h3{margin:0 0 12px;font-family:'Noto Serif JP',serif;font-weight:700;
  font-size:clamp(20px,2.3vw,29px);line-height:1.45;letter-spacing:.01em;color:var(--ink)}
.dgm-txt p{margin:0;font-size:clamp(14px,1.4vw,15.5px);line-height:1.95;color:var(--ink-mid)}
.dgm-txt p.dgm-note{margin-top:15px;padding-top:15px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-dim)}
.dgm-txt p.dgm-note b{font-weight:700;color:var(--acc)}
/* 図の中の線と文字 */
.dg-box{fill:none;stroke:rgba(28,26,23,.26);stroke-width:1}
.dg-off circle{fill:none;stroke:rgba(28,26,23,.2);stroke-width:1.2}
.dg-on,.dg-on circle{fill:#1C1A17}
.dg-acc-f,.dg-acc-f circle{fill:#9A6B1E}
.dg-arrow{fill:none;stroke:rgba(28,26,23,.5);stroke-width:1.4}
.dg-arrow-a{fill:none;stroke:#9A6B1E;stroke-width:1.8}
.dg-cz{fill:rgba(28,26,23,.045);stroke:rgba(28,26,23,.5);stroke-width:1.2}
.dg-cz-new{fill:rgba(154,107,30,.08);stroke:#9A6B1E;stroke-width:1.4;stroke-dasharray:5 4}
.dg-axis{fill:none;stroke:rgba(28,26,23,.28);stroke-width:1}
.dg-dash{fill:none;stroke:rgba(28,26,23,.24);stroke-width:1;stroke-dasharray:4 4}
.dg-line{fill:none;stroke:rgba(28,26,23,.62);stroke-width:1.8;stroke-linecap:round}
.dg-line-a{fill:none;stroke:#9A6B1E;stroke-width:2;stroke-linecap:round}
.dg-gauge{fill:none;stroke:rgba(28,26,23,.26);stroke-width:1.4}
.dg-needle{fill:none;stroke:rgba(28,26,23,.62);stroke-width:1.8;stroke-linecap:round}
.dg-needle-a{stroke:#9A6B1E}
.dg-h{font-family:'Noto Serif JP',serif;font-weight:700;font-size:13px;fill:#1C1A17}
.dg-h-m{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12.5px;letter-spacing:.08em}
.dg-s{font-family:'Zen Kaku Gothic New',sans-serif;font-size:11px;fill:rgba(28,26,23,.62)}
.dg-s-a{fill:#9A6B1E}
@media (max-width:860px){
  .dgm-row{grid-template-columns:1fr;gap:clamp(16px,3vw,24px)}
  .dgm-row:nth-child(even) .dgm-art{order:0;margin-left:0}
  .dgm-art{max-width:none}
}

/* ── 03 の問いを、1冊のノートの見開きにする ──────────────────────────
   カードを6枚並べるのをやめ、余白に朱の罫を1本引いて、番号をその外側へ出す。
   紙の世界の見え方に合わせるためで、文言は変えていない。 */
body[data-world="paper"] .qs{position:relative;gap:0;max-width:54em;
  background:#FFFDF9;border:1px solid var(--line);box-shadow:0 1px 0 rgba(28,26,23,.04);
  padding:clamp(16px,2vw,24px) clamp(20px,2.4vw,34px) clamp(16px,2vw,24px) 64px}
body[data-world="paper"] .qs::before{content:"";position:absolute;left:44px;top:0;bottom:0;
  width:1px;background:rgba(154,107,30,.4)}
body[data-world="paper"] .qs li{position:relative;background:transparent;border:0;border-radius:0;
  box-shadow:none;padding:15px 0;border-bottom:1px dashed var(--line)}
body[data-world="paper"] .qs li:last-child{border-bottom:0}
body[data-world="paper"] .qs li::before{left:-44px;top:19px;color:var(--acc)}
@media (max-width:620px){
  body[data-world="paper"] .qs{padding-left:46px}
  body[data-world="paper"] .qs::before{left:30px}
  body[data-world="paper"] .qs li::before{left:-30px}
}

/* ── 節の頭に置くイラスト ─────────────────────────────────────────────
   罫の紙の上に貼った図版として扱う（絵の地は #F1EBDF で、ページの地とは
   わずかに違う。細い罫で囲うと差が「額」として読める）。切り取りは
   aspect-ratio と object-position で行い、画像そのものは切らずに置いてある
   ので、寄せ直しは CSS の数値だけで済む。スマホでは切り取らず全部見せる。 */
.ill{margin:0 0 clamp(26px,3.4vw,44px);overflow:hidden;
  aspect-ratio:var(--ar,2.5);background:#F1EBDF;
  border:1px solid var(--line);box-shadow:0 1px 0 rgba(28,26,23,.04)}
.ill img{width:100%;height:100%;display:block;object-fit:cover;object-position:center var(--pos,50%)}
.ill--plate{max-width:560px;margin-left:auto;margin-right:auto;aspect-ratio:auto}
.ill--plate img{height:auto}
@media (max-width:720px){
  .ill{aspect-ratio:auto}
  .ill img{height:auto;object-fit:fill}
}

/* ── 縦を詰める・PC は横に広く（2026-10-15 仕様46。/studio/ の仕様45と同じ考え方） ──────────
   中身は最大 1400px、1440px の画面で左右 80px 前後。節の上下の余白は PC 64px ずつ・スマホ 40px ずつ。
   節の番号と英字の見出し、最初の画面の英字の見出し・標語・事実の帯は外した（翌日に届く1枚の絵は残す）。 */
body[data-world="paper"]{--shell:1400px}
@media (min-width:1001px){body[data-world="paper"]{--pad:clamp(56px,5.6vw,80px)}}
body[data-world="paper"] .sec{padding-top:clamp(40px,4.45vw,64px);padding-bottom:clamp(40px,4.45vw,64px)}
body[data-world="paper"] .sec h2{margin:0 0 clamp(20px,1.7vw,24px);font-size:clamp(26px,3vw,42px)}
body[data-world="paper"] .sec-lede{margin:-8px 0 clamp(18px,1.7vw,24px);font-size:clamp(14px,1.2vw,15.5px);line-height:1.85}
body[data-world="paper"] .prose p{line-height:1.9}
.w-hero--paper{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(28px,3vw,40px)}
.w-hero--paper .w-grid{align-items:center}
.w-hero--paper .crumb{margin-bottom:14px}
.w-hero--paper .w-name{margin-bottom:clamp(14px,1.8vh,20px)}
.w-hero--paper .w-lede{margin-bottom:22px}
.w-sheet{min-height:0;gap:16px;padding:26px 32px}
/* 節の頭のイラストは、PC では見出しと一言の横に置く（絵の比はそのまま、幅だけ半分強に） */
@media (min-width:1001px){
  body[data-world="paper"] .sec > .shell:has(> .ill):has(> .sec-lede){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    column-gap:clamp(28px,3vw,48px)}
  body[data-world="paper"] .sec > .shell:has(> .ill):has(> .sec-lede) > *{grid-column:1/-1}
  body[data-world="paper"] .sec > .shell:has(> .ill):has(> .sec-lede) > h2{grid-column:1;grid-row:1;align-self:end}
  body[data-world="paper"] .sec > .shell:has(> .ill):has(> .sec-lede) > .sec-lede{grid-column:1;grid-row:2;align-self:start;margin-top:0}
  body[data-world="paper"] .sec > .shell:has(> .ill):has(> .sec-lede) > .ill{grid-column:2;grid-row:1/span 2;margin-bottom:clamp(20px,2vw,28px)}
}
/* 札：PC で横に並べる（こんなときに・初回の翌朝には 4 列）。札の中も詰める */
body[data-world="paper"] .card{padding:24px clamp(18px,1.7vw,24px) 22px}
body[data-world="paper"] .card .idx{margin-bottom:10px}
body[data-world="paper"] .card h3{margin-bottom:8px;font-size:clamp(17px,1.35vw,19px);line-height:1.42}
body[data-world="paper"] .card p{line-height:1.8}
body[data-world="paper"] :is(#needs,#morning) .g2{grid-template-columns:repeat(4,minmax(0,1fr))}
body[data-world="paper"] .qs li{padding:11px 0}
body[data-world="paper"] .qs li::before{top:15px}
/* 届く1枚・エージェントの報告：PC は報告の横に、読んだあとの一言 */
@media (min-width:1001px){
  body[data-world="paper"] :is(#sheet,#agents) .shell{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(28px,3vw,48px);align-items:end}
  body[data-world="paper"] :is(#sheet,#agents) :is(h2,.sec-lede){grid-column:1/-1}
  body[data-world="paper"] :is(#sheet,#agents) .brief-after{margin:0}
}
body[data-world="paper"] .brief-row{padding:10px 22px}
/* なぜ 90分で：3つの図を PC で横に（図の上、言葉の下） */
@media (min-width:1001px){
  body[data-world="paper"] .dgm{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,2.6vw,40px)}
  body[data-world="paper"] .dgm-row{grid-template-columns:minmax(0,1fr);align-items:start;align-content:start;gap:18px;padding:0;border-top:0}
  body[data-world="paper"] .dgm-row:nth-child(even) .dgm-art{order:0;margin-left:0}
  body[data-world="paper"] .dgm-art{max-width:none}
  body[data-world="paper"] .dgm-txt h3{font-size:clamp(19px,1.6vw,23px)}
}
body[data-world="paper"] .dgm-txt p.dgm-note{margin-top:12px;padding-top:12px}
body[data-world="paper"] .step{padding:20px 20px 18px}
body[data-world="paper"] .step b{font-size:22px;margin-bottom:10px}
body[data-world="paper"] .plan .meta{margin-bottom:12px}
body[data-world="paper"] .plan ul{gap:4px}
body[data-world="paper"] .plan .foot{margin-top:12px;padding-top:10px}
/* よくある質問は PC で 2 列（開いた問いだけが伸びる） */
body[data-world="paper"] .faq{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px 14px}
body[data-world="paper"] .faq summary{padding:16px 22px}
/* 申し込みの節は PC で横に：左に見出しと一言、右にフォーム */
@media (min-width:1001px){
  body[data-world="paper"] #contact .shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    grid-template-rows:auto 1fr;column-gap:clamp(32px,3.4vw,56px);align-items:start}
  body[data-world="paper"] #contact h2{grid-column:1;grid-row:1}
  body[data-world="paper"] #contact .sec-lede{grid-column:1;grid-row:2;margin:0}
  body[data-world="paper"] #contact .form-wrap{grid-column:2;grid-row:1/span 2}
}
body[data-world="paper"] .form-wrap{padding:clamp(20px,2.4vw,32px)}
body[data-world="paper"] .fields{gap:14px}
body[data-world="paper"] .submit{margin-top:20px}
@media (max-width:1180px){
  body[data-world="paper"] :is(#needs,#morning) .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body[data-world="paper"] :is(#needs,#morning) .g2,body[data-world="paper"] .faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .w-hero--paper{padding-top:20px;padding-bottom:24px}
  .w-sheet{padding:22px 20px;gap:14px}
  body[data-world="paper"] .card{padding:20px 18px 18px}
  body[data-world="paper"] .faq summary{padding:14px 18px;gap:12px}
  body[data-world="paper"] .faq .a{padding:0 18px 18px 48px}
  body[data-world="paper"] .form-wrap{padding:18px}
  body[data-world="paper"] .fields{gap:12px}
}