/* ============================================================
   Protagonist — /media/（メディアプロモーション）ページ固有 CSS
   共有トークン・コンポーネント（page-hero / .appr / .philo / page-cta）は
   design-system.css を参照。ここには本ページ固有の構造のみ。
   ============================================================ */

/* hero stats */
.page-hero .stats{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,60px);margin-top:clamp(28px,3.6vw,40px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--line)}
.page-hero .s-val{font-family:var(--disp);font-weight:200;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.page-hero .s-val sup{font-size:.4em;font-weight:300;vertical-align:.7em;margin-left:.04em}
.page-hero .s-lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.6rem;display:block}

/* interview examples（ダークバンド内のカード） */
.i-intro{color:#a7a9b0;max-width:46ch;font-size:1rem;margin-top:1rem}
.i-grid{display:grid;gap:clamp(16px,2vw,28px);margin-top:clamp(36px,5vw,56px)}
@media(min-width:760px){.i-grid{grid-template-columns:repeat(3,1fr)}}
.icard{display:block;background:var(--dark-2);border:1px solid var(--dark-line);overflow:hidden;transition:border-color .4s var(--e1)}
.icard:hover{border-color:#3a3c42}
.icard .i-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--dark-line)}
.icard .i-img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.02);transition:filter .5s,transform .6s var(--e1)}
.icard:hover .i-img img{filter:grayscale(0);transform:scale(1.03)}
.icard .i-cat{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:rgba(15,16,19,.66);padding:.34rem .6rem;backdrop-filter:blur(4px)}
.icard .i-body{padding:clamp(18px,2vw,24px)}
.icard .i-co{font-family:var(--jp);font-weight:500;font-size:1.02rem;color:var(--paper);line-height:1.4}
.icard .i-cta{font-family:var(--disp);font-weight:500;font-size:.82rem;color:#a7a9b0;margin-top:.8rem;display:inline-flex;align-items:center;gap:.4rem}
.i-foot{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:clamp(36px,5vw,56px)}

/* plans & pricing */
.plans{display:grid;gap:clamp(18px,2vw,28px);align-items:stretch}
@media(min-width:1000px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{position:relative;background:var(--surface);border:1px solid var(--line);padding:clamp(28px,3vw,40px);display:flex;flex-direction:column}
.plan.featured{border-color:var(--ink);box-shadow:0 24px 60px -30px rgba(15,16,20,.28)}
.plan .p-ribbon{position:absolute;top:0;right:clamp(20px,3vw,32px);transform:translateY(-50%);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .8rem}
.plan .p-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.plan .p-name{font-family:var(--jp);font-weight:700;font-size:1.28rem;letter-spacing:-.01em;margin:.6rem 0 1rem}
.plan .p-price{font-family:var(--disp);font-weight:200;font-size:clamp(2.1rem,4vw,2.8rem);letter-spacing:-.03em;line-height:1;color:var(--ink)}
.plan .p-price .unit{font-size:.32em;font-weight:400;letter-spacing:0;margin-left:.1em}
.plan .p-note{font-family:var(--mono);font-size:.62rem;color:var(--muted);margin-top:.6rem;display:block}
.plan .p-desc{color:var(--graphite);font-size:.92rem;line-height:1.8;margin:1.4rem 0;padding-top:1.4rem;border-top:1px solid var(--line)}
.plan .p-feats{list-style:none;display:grid;gap:.7rem;margin-bottom:1.7rem}
.plan .p-feats>li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;font-size:.89rem;color:var(--ink-2);line-height:1.6}
.plan .p-feats .mk{font-family:var(--mono);color:var(--ink);font-size:.82rem;line-height:1.7}
.plan .p-feats li.muted,.plan .p-feats li.muted .mk{color:var(--muted)}
.plan .p-sub{list-style:none;grid-column:2;margin-top:.45rem;display:grid;gap:.3rem}
.plan .p-sub li{font-size:.82rem;color:var(--graphite);padding-left:.9rem;position:relative}
.plan .p-sub li::before{content:"–";position:absolute;left:0;color:var(--hair)}
.plan .p-cta{margin-top:auto}
.plan .btn{width:100%;justify-content:center}
.plans-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--muted);text-align:center;line-height:1.9;margin-top:clamp(24px,3vw,36px)}

/* how it works（4 ステップ） */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:560px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps .st{background:var(--paper);padding:clamp(26px,2.6vw,34px)}
.steps .st-num{font-family:var(--disp);font-weight:200;font-size:clamp(2rem,3vw,2.6rem);letter-spacing:-.03em;line-height:1;color:var(--graphite);display:block;margin-bottom:1rem}
.steps .st-title{font-family:var(--jp);font-weight:700;font-size:1.05rem;letter-spacing:-.005em;margin-bottom:.7rem}
.steps .st-body{color:var(--graphite);font-size:.9rem;line-height:1.7}

/* FAQ（native details/summary。JS 不要） */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:clamp(20px,2.4vw,28px) 0;font-family:var(--jp);font-weight:500;font-size:1.02rem;line-height:1.5;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq .q-icon{flex:none;width:18px;height:18px;position:relative}
.faq .q-icon::before,.faq .q-icon::after{content:"";position:absolute;background:var(--ink);transition:transform .35s var(--e1),opacity .35s}
.faq .q-icon::before{top:50%;left:0;width:100%;height:1.5px;transform:translateY(-50%)}
.faq .q-icon::after{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%)}
.faq details[open] .q-icon::after{transform:translateX(-50%) scaleY(0);opacity:0}
.faq .a{padding:0 0 clamp(20px,2.4vw,28px);color:var(--graphite);font-size:.95rem;line-height:1.85;max-width:64ch}