/* ミライズ法人サイト：寺倉式デザインシステム（ds.css）への最小限の追加。部品は ds.css を優先して使う */
.c-hero--photo{background-color:#333}
.c-hero--photo .c-hero__kicker,.c-hero--photo .c-hero__title,.c-hero--photo .c-hero__sub,.c-hero--photo .c-hero__proof li{color:#fff}
.c-hero--photo .c-breadcrumb a,.c-hero--photo .c-breadcrumb span{color:#ffffffcc}
.p-img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.c-card__media .p-img{aspect-ratio:16/9}
.p-photo{border-radius:var(--r-card);overflow:hidden}
.p-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* 期限から逆算するスケジュール（横の時間軸） */
.p-timeline{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:0;margin-top:32px;border-top:4px solid var(--base-90)}
.p-timeline__item{position:relative;padding:28px 20px 8px 0}
.p-timeline__item::before{content:"";position:absolute;top:-12px;left:0;width:20px;height:20px;border-radius:50%;background:var(--base-0);border:4px solid var(--base-90)}
.p-timeline__item--hl::before{background:var(--primary-50);border-color:var(--primary-50)}
.p-timeline__when{font-size:var(--fs-14);font-weight:700;color:var(--primary-50)}
.p-timeline__title{font-size:var(--fs-20);font-weight:900;margin:4px 0 8px;line-height:1.5}
.p-timeline__text{font-size:var(--fs-14);color:var(--text-sub);line-height:1.8}
.p-timeline__form{display:inline-block;margin-top:10px;font-size:var(--fs-12);font-weight:700;background:var(--base-10);border:1px solid var(--line);padding:2px 10px;border-radius:var(--r-pill)}
@media (max-width:767px){
  .p-timeline{grid-template-columns:1fr;border-top:0;border-left:4px solid var(--base-90);margin-left:8px}
  .p-timeline__item{padding:0 0 28px 24px}
  .p-timeline__item::before{top:4px;left:-12px}
}

/* 事例の成果（数字を大きく） */
.p-result{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 4px}
.p-result b{font-size:28px;font-weight:900;color:var(--primary-50);line-height:1.2;font-family:var(--font-en)}
.p-result span{display:block;font-size:var(--fs-12);color:var(--text-sub);font-weight:700}

/* お問い合わせフォーム（モック） */
.p-form{display:grid;gap:18px;max-width:760px}
.p-form label{display:grid;gap:6px;font-size:var(--fs-14);font-weight:700}
.p-form input,.p-form select,.p-form textarea{font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--base-40);border-radius:var(--r-btn);background:#fff}
.p-form textarea{min-height:140px}
.p-form .p-req{color:var(--primary-50);font-size:var(--fs-12);margin-left:6px}
.p-form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:767px){.p-form__row{grid-template-columns:1fr}}
.p-done{background:var(--primary-10);border:1px solid var(--primary-30);padding:20px;border-radius:var(--r-card);font-weight:700}

/* c-chain を黒地のセクションで使うとき、白い枠の文字が背景色を継いで消えるのを防ぐ */
.c-section--dark .c-chain__item:not(.c-chain__item--hl){color:var(--text)}
.c-section--dark .c-chain__item:not(.c-chain__item--hl) small{color:var(--text-sub)}
.p-form input,.p-form select,.p-form textarea{width:100%;min-width:0;box-sizing:border-box}
.p-form label,.p-form__row>*{min-width:0}
/* 写真ヒーローのパンくず：黒い膜の上でも読めるように */
.c-hero--photo.c-hero--page .c-breadcrumb,.c-hero--photo.c-hero--page .c-breadcrumb a,.c-hero--photo.c-hero--page .c-breadcrumb span,.c-hero--photo.c-hero--page .c-breadcrumb li{color:#ffffffd9}
.c-hero--photo.c-hero--page .c-breadcrumb{position:relative}

/* 料金：公式「プラン・料金」ページと同じ見た目（黒地・角なしの白カード・赤い価格） */
.p-plan{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:32px}
.p-plan__card{position:relative;display:flex;flex-direction:column;gap:12px;background:#fff;color:var(--text);border:1px solid var(--line);padding:32px 24px}
.p-plan__card--hl{outline:2px solid var(--primary-50);outline-offset:-2px}
.p-plan__ribbon{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);white-space:nowrap;background:var(--primary-50);color:#fff;font-size:10px;font-weight:700;padding:3px 12px;border-radius:var(--r-pill)}
.p-plan__name{font-family:var(--font-en);font-size:24px;font-weight:600;line-height:1}
.p-plan__period{font-size:var(--fs-14);font-weight:700}
.p-plan__price{display:flex;align-items:center;gap:4px;color:var(--primary-50);font-family:var(--font-en);line-height:1}
.p-plan__price b{font-size:32px;font-weight:600}
.p-plan__price small{font-family:var(--font-body);font-size:10px}
.p-plan__split{font-size:var(--fs-12);margin-top:-8px}
.p-plan__goal{font-size:var(--fs-14);line-height:1.5;border-top:1px solid var(--line);padding-top:12px}
.p-plan-note{font-size:10px;color:var(--base-40);margin-top:24px}
@media (max-width:1023px){.p-plan{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
@media (max-width:767px){.p-plan{grid-template-columns:minmax(0,1fr)}}

/* 選び方ガイド：公式と同じ、帯つきの4列 */
.p-roadmap{margin-top:32px}
.p-roadmap__bar{height:40px;background:linear-gradient(to right,#fff 0%,#222 100%);clip-path:polygon(0 100%,100% 0,100% 100%)}
.p-roadmap__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.p-roadmap__col{display:flex;flex-direction:column;gap:24px;border-left:1px solid var(--line);padding:16px 24px}
.p-roadmap__when{text-align:right;font-size:var(--fs-14);font-weight:700}
.p-roadmap__body{display:flex;flex:1;flex-direction:column;align-items:center;gap:16px}
.p-roadmap__want{width:100%;font-size:var(--fs-16);font-weight:700;line-height:1.5}
.p-roadmap__body::after{content:"";order:2;margin-top:auto;width:1px;height:24px;background:var(--primary-50)}
.p-roadmap__course{order:3;text-align:center;font-family:var(--font-en);font-size:24px;font-weight:600;color:var(--primary-50);line-height:1.2}
@media (max-width:767px){.p-roadmap__cols{grid-template-columns:minmax(0,1fr);border-top:0}.p-roadmap__col{border-top:1px solid var(--line)}}
/* 公式どおり、PLANは白・「コース・料金」は黄色 */
#plan .c-eyebrow{color:#fff;font-size:32px;letter-spacing:.02em}
#plan .c-eyebrow-ja{color:#f5c400}
#guide .c-eyebrow{color:var(--text);font-size:32px;letter-spacing:.02em}
#plan .c-heading__lead,#guide .c-heading__lead{max-width:none}
/* 見出しの説明文・カードの出典が「す。」「より」だけ次の行に残らないように */
.c-heading__lead,.c-fcard .c-note,.c-pain__text,.c-fcard p{text-wrap:pretty}
/* 3つの確かめ方：見出しの高さ・本文の行・出典の位置を3枚でそろえる */
.p-three .c-fcard{display:flex;flex-direction:column;gap:8px}
.p-three .c-fcard__text,.p-three .c-note{word-break:normal;line-break:strict;text-wrap:wrap}
.p-three .c-note{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.p-three .c-fcard__text{margin-bottom:16px}
.p-three .c-note{box-sizing:content-box;line-height:1.7;min-height:3.4em}

/* 受講生の声を1つ大きく見せる（写真＋引用） */
.p-pickup{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);margin:48px 0 0;border-radius:var(--r-card);overflow:hidden;background:var(--base-10)}
.p-pickup__media{display:block;background:var(--base-20)}
.p-pickup__media img{width:100%;height:100%;object-fit:cover;display:block}
.p-pickup__quote{background:transparent;border-radius:0;padding:40px 40px 36px 72px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.p-pickup__quote::before{left:28px;top:28px;font-size:72px}
.p-pickup__label{font-size:var(--fs-12);font-weight:700;color:var(--primary-50);letter-spacing:.08em}
.p-pickup .c-quote__body{font-size:clamp(18px,2.2vw,24px);font-weight:900;line-height:1.7}
.p-pickup__who{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:var(--fs-14);padding-top:12px;border-top:1px solid var(--line)}
.p-pickup__who span{color:var(--text-mute);font-size:var(--fs-12)}
.p-pickup__more{align-self:flex-start;font-size:var(--fs-14);font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:4px}
.p-pickup__more::after{content:" \2192";color:var(--primary-50)}
@media (max-width:767px){.p-pickup{grid-template-columns:minmax(0,1fr)}.p-pickup__media{aspect-ratio:16/10}.p-pickup__quote{padding:28px 20px 24px 56px}.p-pickup__quote::before{left:14px;top:18px;font-size:56px}}
.p-pickup__media img{object-position:85% 30%}

/* 受講前後の音声（画像が出ると誤解されないよう、音声プレーヤーだけ） */
.p-audio{margin:0;display:grid;gap:12px;padding:20px 24px;border-radius:var(--r-card);background:var(--base-80);border:1px solid var(--base-70)}
.p-audio--after{border-color:var(--primary-50)}
.p-audio__label{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-14);font-weight:700;color:#fff}
.p-audio__label .u-en{font-size:var(--fs-12);letter-spacing:.14em;color:var(--base-40)}
.p-audio--after .p-audio__label .u-en{color:var(--primary-40)}
.p-audio audio{width:100%;display:block}
/* ページ末尾の注記：上下の余白を半分に */
.p-notes{padding-top:calc(var(--sec-y)*.3);padding-bottom:calc(var(--sec-y)*.3)}
#voices .c-tabs__panel{padding-bottom:0}

/* スマホ：改行が多すぎる・窮屈なところの調整（2026-10-20 永田さん） */
@media (max-width:767px){
  .c-hero--page .c-breadcrumb{padding-bottom:40px}
  .c-hero__sub span{display:inline!important}
  .c-hero__sub br{display:none}
  .c-hero__sub,.c-heading__lead,.c-text,.c-footnotes li,.c-dl dd,.c-points li,.c-flow__text{word-break:normal}
  .c-tabs--pill .c-tabs__list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:2px var(--gutter)}
  .c-tabs--pill .c-tabs__list::-webkit-scrollbar{display:none}
  .c-tabs--pill .c-tabs__tab{padding:8px 14px;font-size:var(--fs-14)}
  #when .c-split{gap:40px}
  #when .c-points li{margin-top:8px}
  #when .c-flow__item{padding-bottom:28px}
}
/* スマホ：受講生の声のカードを、小さな写真＋名前・見出しの横並びにして、縦に長くならないように */
@media (max-width:767px){
  #voices .c-card--link{grid-template-columns:88px minmax(0,1fr);column-gap:14px;row-gap:6px;padding:16px}
  #voices .c-card--link .c-card__media{grid-row:1 / span 2;margin:0;border-radius:8px;aspect-ratio:1;align-self:start}
  #voices .c-card--link .c-card__media img{width:100%;height:100%;object-fit:cover}
  #voices .c-card--link .c-card__label{align-self:end;line-height:1.5}
  #voices .c-card--link .c-card__title{font-size:var(--fs-16);align-self:start}
  #voices .c-card--link .c-card__text,#voices .c-card--link .c-card__more{grid-column:1 / -1}
  #voices .c-tabs__panel .c-grid{gap:12px}
}
/* ヘッダー：7項目を1行に収める */
.c-header--official .c-header__nav>a,.c-header--official .c-nav-trigger{white-space:nowrap}
/* スマホ：①「点数だけでは〜」と「音・反射・実戦〜」は無理に改行しない ②受講生の声の絞り込みボタンの上下を半分に */
@media (max-width:767px){
  .c-pain__close span{display:inline!important}
  .c-pain__close br{display:none}
  #what .c-heading__title span[style]{display:inline!important}
  #what .c-heading__title br{display:none}
  #voices .c-heading{margin-bottom:24px}
  #voices .c-tabs__panel{padding-top:0}
}

/* 特長ページ：トレーナーの写真、RSPを試す欄 */
.p-trainer{grid-template-columns:120px minmax(0,1fr)}
.p-trainer .c-profile__img{width:120px;height:120px;overflow:hidden}
.p-trainer .c-profile__img img{width:100%;height:100%;object-fit:cover}
.p-try{background:var(--base-10);border-radius:var(--r-card);padding:32px}
.c-feature__title a{color:inherit;text-decoration:none;border-bottom:2px solid var(--primary-50)}
@media (max-width:767px){.p-trainer{grid-template-columns:minmax(0,1fr)}.p-try{padding:20px}}
/* 黒地のセクションに置く表は、白い面の上に出して読めるようにする */
.c-section--dark .c-table-wrap{background:#fff;border-radius:var(--r-card);color:var(--text)}
.c-section--dark .c-table td,.c-section--dark .c-table tbody th{color:var(--text)}
/* トレーナーの経歴：見出しの幅を詰める */
.p-trainer .c-dl__row{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:8px 0;font-size:var(--fs-14)}

/* 見出しの下の説明文：シャベリッシュ本番と同じ16px・行の高さ28pxにそろえる（2026-10-26 永田さん） */
main .c-heading__lead,main .c-hero__sub{font-size:16px;line-height:1.75}
/* カードの中の文：文節で折り返し、最後に「ます。」だけ残らないようにする（2026-10-26） */
main .c-gear__text,main .c-card__text,main .c-pain__text,main .c-step__text{word-break:auto-phrase;text-wrap:pretty}
/* 事例カードの上の場面名：カードとの間を16pxにそろえる（活用シーンTOPと同じ・2026-10-26 永田さん） */
main .c-grid>.c-stack>.c-h4{margin-bottom:0}
main .c-h4+.c-table-wrap{margin-top:16px}
/* 表：スマホでは横にはみ出さないよう、1行ずつ縦に並べる（2026-10-26） */
@media (max-width:767px){main .c-table:has(td[data-label]){min-width:0;width:100%}main .c-table:has(td[data-label]) thead{display:none}main .c-table:has(td[data-label]) :is(tbody,tr,th,td){display:block;width:auto}main .c-table:has(td[data-label]) tr{padding:14px 0;border-bottom:1px solid var(--line)}main .c-table:has(td[data-label]) tbody th{background:none;padding:0 0 6px;white-space:normal;border:0}main .c-table:has(td[data-label]) td{padding:4px 0;border:0;background:none!important}main .c-table:has(td[data-label]) td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--text-mute)}}