/* 第3版の見た目（2026-11-15）。base.css と theme.css のあとに読む。
   G2の指摘：ボタンの角丸が大きすぎる／講義の箱の二重の線／悩みの吹き出しが整いすぎ／3つの丸の図／C07の上下の余白。
   参考に見たサイト：frictio.ai、goodpatch.com、studio.design、super.so、webflow.com、durable.co（designbookmark.com の website-builders から）。
   共通していた点：ボタンの角丸は小さめ（4〜8px）、カードは線1本か面だけ、見出しは大きく細め、冒頭は写真や画面のカードを重ねる。 */

/* 角丸を小さく：ボタン 6px、カード 10〜12px、大きな面 16px */
.btn{border-radius:6px;min-height:52px;padding:0 28px}
.hd .btn{min-height:40px;padding:0 18px}
.pausebtn,.ring .ctlbar button,.replay button,.form .radios label{border-radius:6px}
.syllabus li,.pcard,.pair>div,.prof img,.flow li{border-radius:10px}
.panel,.mockgrid,.cta,.stage,.ring{border-radius:16px}
dialog.work{border-radius:14px}
.pcard .flag{border-radius:4px}
.chain li{border-radius:6px}

/* 見出し：大きく、太さを一段落とす */
.h-sec{font-weight:600;letter-spacing:-0.005em;line-height:1.3;word-break:auto-phrase}
.tagline{font-weight:700}
section{padding:96px 0}
@media (max-width:760px){section{padding:64px 0}}

/* 講義のテーマ（C02）：箱と左の帯（二重の線に見えていた）をやめ、線1本で区切る一覧にする */
.syllabus{gap:0;border-top:1px solid var(--line)}
.syllabus li,html[data-theme] .syllabus li{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:18px 0;box-shadow:none!important}
.syllabus .no{font-size:15px;font-weight:700;letter-spacing:.06em}

/* 悩み（C03）第4版：傾けない（0度）。四角い吹き出しを、悩みの数より多く、重なり気味にポポポと出す（G2の見本画像の雰囲気）。
   ?と!だけの小さな吹き出しは lp.js が足す（飾り。読み上げからは隠す）。位置は lp.js の WORRY_POS で決める */
.worries{position:relative;list-style:none;margin:40px 0 0;padding:0;height:560px}
.worries li{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:2;background:var(--surface,#fff);border:1.5px solid var(--ink);border-radius:3px;padding:16px 18px;font-weight:500;font-size:15px;line-height:1.6;color:var(--ink);box-shadow:none}
.worries li::after{content:"";position:absolute;bottom:-9px;left:var(--t,28px);right:auto;width:14px;height:14px;background:var(--surface,#fff);border:0;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:skewX(-25deg) rotate(45deg)}
.worries li.deco{z-index:1;width:auto;min-width:var(--s);height:var(--s);padding:0 10px;display:grid;place-items:center;font:800 calc(var(--s) * .42)/1 var(--font-d);background:var(--surface,#fff)}
.worries li.deco::after{width:10px;height:10px;bottom:-6px;left:var(--t,10px)}
.worries li.deco.big{z-index:0}
.js .worries [data-rv]{opacity:0;transform:scale(.4)}
.js .worries [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .worries [data-rv]{opacity:1;transform:none}}
@media (max-width:860px){
  .worries{height:auto;display:flex;flex-direction:column;gap:22px;padding:8px 0 24px}
  .worries li:not(.deco){position:relative;left:auto;top:auto;width:84%}
  .worries li:not(.deco):nth-child(even){align-self:flex-end}
  .worries li.deco{position:absolute;left:var(--mx);top:var(--my)}
  .worries li.deco.big{display:none}
}

/* デザイン顧問とは（C04）：丸の図をやめ、3つの特徴を大きな文字の一覧にする */
.pillars{list-style:none;margin:0;padding:0;align-self:center;border-top:1px solid var(--line)}
.pillars li{display:grid;grid-template-columns:3.2em 1fr;align-items:baseline;gap:12px;padding:22px 0;border-bottom:1px solid var(--line)}
.pillars .no{font:700 14px/1 var(--font);letter-spacing:.06em;color:var(--acc-text,var(--mid))}
.pillars b{font:600 clamp(22px,2.6vw,32px)/1.3 var(--font-d);color:var(--navy);letter-spacing:-0.005em}
.panel{padding:56px}
@media (max-width:760px){.panel{padding:28px 20px}}

/* なぜ（C07）：上下の余白を詰める */
section.bg2:has(.why){padding:64px 0}
.why .q{font-size:clamp(18px,2.2vw,24px);margin:0}
.why .a{margin:12px 0 16px}
.why p{margin:0}
.whydiag{margin-top:28px;max-width:760px}
@media (max-width:760px){section.bg2:has(.why){padding:48px 0}}

/* 冒頭：写真のカードを3枚重ねる（frictio のように、写真に短い説明を載せる）。色の案があるときだけ出す */
.hcards{display:none}
html[data-theme] .hero .media{display:none}
html[data-theme] .hcards{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.25fr 1fr;gap:12px;list-style:none;margin:0;padding:0;
  position:absolute;right:calc(max(var(--gut),(100% - var(--wrap)) / 2));top:56px;bottom:56px;width:min(44%,520px)}
html[data-theme] .hcards li{position:relative;overflow:hidden;border-radius:12px;background:var(--bg2)}
html[data-theme] .hcards li:first-child{grid-column:1 / 3}
html[data-theme] .hcards img{width:100%;height:100%;object-fit:cover}
html[data-theme] .hcards li:first-child img{object-position:50% 30%}
html[data-theme] .hcards span{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;color:#fff;font:600 14px/1.45 var(--font);background:linear-gradient(transparent,rgba(var(--shade),.82))}
html[data-theme] .hcards li:first-child span{font-size:16px;padding:40px 18px 16px}
html[data-theme] .hero .wrap>*{max-width:min(48%,580px)}
@media (max-width:860px){
  html[data-theme] .hcards{position:relative;inset:auto;right:auto;width:auto;margin:24px var(--gut) 0;height:340px;top:auto;bottom:auto}
  html[data-theme] .hero .wrap>*{max-width:none}
}
@media (max-width:480px){html[data-theme] .hcards{height:280px}html[data-theme] .hcards span{font-size:12px;padding:20px 10px 8px}}

/* 冒頭のローンチセールの札、カードの影を控えめに */
html[data-theme] .hero .badge{border-radius:8px}
.cta{padding:56px}