@charset "UTF-8";
/* ==========================================================================
rich-layout.css
リッチレイアウト商品ページ 共通スタイル
Backlog #58 / デザイン: .spec/58/260810/premium-renewal.css をWordPressに適用
--------------------------------------------------------------------------
このファイルは特定の商品のものではない。ACF「リッチレイアウト」(rich_layout) が
ONの商品ページすべてで読み込まれる共通のデザイン体系。
商品ごとに違う指定（ヒーロー写真など）はここには書かず、
商品別CSS rich-layout-{商品スラッグ}.css に置くこと（例: rich-layout-premium.css）。
スコープ:
- body.rich-layout-page … リッチレイアウト対象ページ（functions.php の body_class）
- body.rich-layout-{商品スラッグ} … 商品別の出し分け用
- div.product.richLayout-flow … 既存CSSを断ち切るリセットの起点
- クラスは全て richLayout-* 接頭辞。既存サイトのクラスとは衝突しない。
ヒーローは明るいトーン（デザインのBパターン / premium-renewal-b.html）を既定とする。
キービジュアルは woocommerce/assets/img/rich-layout-hero.jpg。
画像・スクリム・文字色はセットで成立しているので、写真を差し替えるときは
スクリムの濃度と文字色も合わせて見直すこと（画像だけの差し替えは不可）。
重厚トーン（Aパターン）の指定は .spec/58/260810/premium-renewal.css に残してある。
方針
- 既存ページのスタイルは一切流用しない。カート由来のレイアウトから切り離す。
- コンテンツ部は .richLayout-flow 配下でリセットをかけ、Storefront / SSCテンプレート /
WooCommerce のCSSが一切届かない状態にしてから、新しい意匠を組む。
- 既存クラス（recommendText / infoTable / points / courseFlow / table.apply /
cmnTtl__type2 / emp / txts / scroll-table / mt* pb* 等）は使わない。
クラス名を全て richLayout-* に付け替えているため、既存のクラスセレクタは構造的に
マッチしない。残るのは要素セレクタと .site-main 系だけで、それはリセットが打ち消す。
- 意匠: 小説・文芸の質感（紙のトーン・ヘアライン・原稿用紙のマス目・広い余白）。
ブランドのティール #00897B は継続して使い、サイト全体との連続性を保つ。
- 書体: ゴシック1書体（Noto Sans JP）のみ導入。明朝は使わない。
読み込み位置: 既存CSS群の最後（storefront-child-style の後ろ）。
functions.php の wp_enqueue_scripts を priority 100 で登録して最後尾に置いている。
単位: 全ページ共通で読み込む parent-style（//enomotomethod.jp/assets/css/style.css）の
html{font-size:62.5%} により 1rem = 10px。この前提が崩れると全サイズがずれる。
========================================================================== */
/* --------------------------------------------------------------------------
1. トークン
-------------------------------------------------------------------------- */
body.rich-layout-page {
/* 紙 ---------------------------------------------------------------- */
--richLayout-paper: #FAF8F5; /* ベース60%。温かみのあるオフホワイト */
--richLayout-paper-alt: #F2EDE6; /* 交互セクション */
--richLayout-card: #FFFFFF;
/* 墨 ---------------------------------------------------------------- */
--richLayout-ink: #24211E; /* 本文。紙色上で 20.6:1 */
--richLayout-ink-mute: #6B635A; /* 補足。紙色上で 5.57:1 */
--richLayout-rule: #DED7CC; /* ヘアライン */
--richLayout-rule-soft: #EBE5DC;
/* ブランド（既存の色相を維持。明度3段） ---------------------------- */
--richLayout-brand: #00897B; /* style(1).css:8291 の --green。大きい文字と罫のみ */
--richLayout-brand-deep: #00695C; /* 小さい文字用。紙色上 6.24:1 */
--richLayout-brand-ink: #0C534C; /* style(1).css:4477周辺の既存値。反転面の地色。白文字 8.91:1 */
/* アクセント（主CV = 無料相談のみ） -------------------------------- */
--richLayout-accent: #FF9900; /* style.css:101 の add-to-cart 実効色 */
--richLayout-accent-dark: #E88900;
--richLayout-accent-ink: #24211E; /* オレンジ上 7.48:1。白は 2.14:1 で不合格 */
/* 形状・余白 -------------------------------------------------------- */
--richLayout-radius: 2px; /* ほぼ角を残さない。紙の直線的な質感に合わせる */
--richLayout-radius-lg: 4px;
--richLayout-s1: 8px; --richLayout-s2: 16px; --richLayout-s3: 24px; --richLayout-s4: 32px;
--richLayout-s5: 40px; --richLayout-s6: 48px; --richLayout-s7: 56px; --richLayout-s8: 64px;
--richLayout-s9: 80px; --richLayout-s10: 96px;
--richLayout-sec: clamp(72px, 9.5vw, 128px);
/* レイアウト -------------------------------------------------------- */
--richLayout-container: 1120px;
--richLayout-narrow: 720px;
--richLayout-gutter: clamp(20px, 5vw, 40px);
/* モーション -------------------------------------------------------- */
--richLayout-ease: cubic-bezier(.16, .84, .44, 1);
--richLayout-dur-ui: 150ms;
--richLayout-dur-sec: 400ms;
/* 書体 -------------------------------------------------------------- */
--richLayout-font: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
"Hiragino Kaku Gothic ProN", "Hiragino Sans",
"Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
/* 原稿用紙のマス目モチーフ（文芸の質感の署名） --------------------- */
--richLayout-kohshi: linear-gradient(to right, rgba(0,105,92,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,105,92,.055) 1px, transparent 1px);
--richLayout-kohshi-size: 22px 22px;
}
/* ==========================================================================
2. リセット — 既存CSSをここで完全に断ち切る
:where() で特異度を (0,2,0) に抑え、この後のコンポーネント定義（同じ 0,2,0 だが
後方に書く）が必ず勝つようにしている。
========================================================================== */
.rich-layout-page .richLayout-flow :where(
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd,
table, caption, thead, tbody, tfoot, tr, th, td,
figure, figcaption, blockquote, section, article, aside, header, footer,
div, span, strong, b, em, i, small, a, button, label, img, svg, form, hr
) {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
font-style: normal;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
text-align: inherit;
text-decoration: none;
text-transform: none;
text-indent: 0;
text-shadow: none;
background: none;
box-shadow: none;
border-radius: 0;
list-style: none;
vertical-align: baseline;
float: none;
clear: none;
position: static;
width: auto;
min-width: 0;
max-width: none;
height: auto;
min-height: 0;
opacity: 1;
transform: none;
box-sizing: border-box;
}
/* 既存の疑似要素（.points li::before の三角、.cmnTtl__type2::before の縦バー、
h1::after の下線、.grayArrow::before の下向き三角）を全て消す。 */
.rich-layout-page .richLayout-flow :where(*)::before,
.rich-layout-page .richLayout-flow :where(*)::after {
content: none;
}
.rich-layout-page .richLayout-flow :where(img) {
display: block;
max-width: 100%;
height: auto;
}
.rich-layout-page .richLayout-flow :where(table) {
border-collapse: collapse;
width: 100%;
}
.rich-layout-page .richLayout-flow :where(button) {
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.rich-layout-page .richLayout-flow :where(svg) {
display: block;
flex: none;
}
/* コンテナ側の制約解除（.col-full 1064px / .content-area 800px / .contentBoxM 800px）
#content > の子セレクタで、ヘッダーとパンくずの .col-full は触らない。 */
.rich-layout-page #content > .col-full { max-width: none; margin: 0; padding: 0; }
.rich-layout-page #content { overflow-x: clip; }
.rich-layout-page .storefront-breadcrumb { margin-bottom: 0; }
.rich-layout-page #main.site-main { margin-bottom: 0; }
/* Storefront が footer に margin-top:100px を与えている。クロージング帯が
フッターに直接接するように、このページでは 0 にする。 */
.rich-layout-page .site-footer { margin-top: 0; }
/* テキスト選択もブランドの淡色で */
.rich-layout-page ::selection { background-color: rgba(0, 137, 123, .20); }
@media screen and (min-width: 768px) {
.rich-layout-page.storefront-full-width-content .content-area {
width: auto;
max-width: none;
float: none;
margin: 0 !important;
}
}
/* ==========================================================================
3. 基礎
========================================================================== */
.rich-layout-page .richLayout-flow {
font-family: var(--richLayout-font);
font-weight: 400;
font-size: 1.6rem;
line-height: 1.95;
letter-spacing: .01em;
color: var(--richLayout-ink);
background-color: var(--richLayout-paper);
font-feature-settings: "palt" 1;
text-align: left;
}
.rich-layout-page .richLayout-inner {
max-width: var(--richLayout-container);
margin-inline: auto;
padding-inline: var(--richLayout-gutter);
}
.rich-layout-page .richLayout-inner--narrow { max-width: var(--richLayout-narrow); }
.rich-layout-page #course-detail { scroll-margin-top: 24px; }
.rich-layout-page .richLayout-section {
padding-top: var(--richLayout-sec);
padding-bottom: var(--richLayout-sec);
}
.rich-layout-page .richLayout-section--alt { background-color: var(--richLayout-paper-alt); }
/* 数字が主役のページ。和欧混植で数字をわずかに大きく（ブリーフ §3） */
.rich-layout-page .richLayout-n {
font-size: 103%;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* 小見出しラベル（アイブロウ）。ヒーロー・ロードマップ・価格の3箇所のみ */
.rich-layout-page .richLayout-label {
display: flex;
align-items: center;
gap: var(--richLayout-s2);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: .18em;
line-height: 1.4;
color: var(--richLayout-brand-deep);
margin-bottom: var(--richLayout-s3);
}
.rich-layout-page .richLayout-label::after {
content: "";
display: block;
flex: 1 1 auto;
height: 1px;
max-width: 72px;
background-color: var(--richLayout-brand);
opacity: .5;
}
.rich-layout-page .richLayout-h2 {
font-size: 2.4rem;
font-weight: 700;
line-height: 1.42;
letter-spacing: .005em;
text-wrap: balance;
word-break: auto-phrase; /* 和文を文節で折り返す。非対応環境は balance のみ効く */
margin-bottom: var(--richLayout-s4);
}
.rich-layout-page .richLayout-h3 {
font-size: 2.0rem;
font-weight: 700;
line-height: 1.5;
margin-bottom: var(--richLayout-s2);
}
.rich-layout-page .richLayout-lead {
font-size: 1.7rem;
line-height: 1.95;
}
.rich-layout-page .richLayout-lead--lg { font-size: 1.7rem; line-height: 2.05; }
@media screen and (min-width: 900px) {
.rich-layout-page .richLayout-lead--lg { font-size: 1.9rem; }
}
.rich-layout-page .richLayout-emp {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.8;
}
.rich-layout-page .richLayout-note {
font-size: 1.4rem;
line-height: 1.85;
color: var(--richLayout-ink-mute);
}
.rich-layout-page .richLayout-flow p + p { margin-top: var(--richLayout-s3); }
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-h2 { font-size: 3.2rem; line-height: 1.4; }
.rich-layout-page .richLayout-h3 { font-size: 2.4rem; }
.rich-layout-page .richLayout-lead { font-size: 1.8rem; }
.rich-layout-page .richLayout-emp { font-size: 2.0rem; }
}
@media screen and (min-width: 1100px) {
/* 広い器（narrow 以外）でだけ一段大きくする */
.rich-layout-page .richLayout-inner:not(.richLayout-inner--narrow) .richLayout-h2 { font-size: 3.8rem; line-height: 1.36; }
/* 価値要約は42%カラムに入るので、3行に折れないサイズに抑える */
.rich-layout-page .richLayout-inner:not(.richLayout-inner--narrow) .richLayout-h2.richLayout-value__h2 { font-size: 3.4rem; }
}
/* 強調 — 流し読みのための装飾
マーカーは行の下半分だけを塗る蛍光ペン調。文字色は変えないのでコントラストは維持される。 */
.rich-layout-page mark.richLayout-mark {
background: linear-gradient(transparent 58%, rgba(0, 137, 123, .26) 58%);
color: inherit;
font-weight: 700;
padding: 0 .08em;
}
/* 反転面・写真上ではブランド色が沈むので白の半透明にする */
.rich-layout-page mark.richLayout-mark--dark {
/* 白帯をグリフに重ねず、ベースライン下に敷く（太いアンダーラインとして読ませる） */
background: linear-gradient(transparent 78%, rgba(255, 255, 255, .38) 78%);
color: inherit;
}
.rich-layout-page .richLayout-flow strong { font-weight: 700; }
/* FAQの回答は1文目だけ太字にして結論から読めるようにする（マークアップは変えない） */
.rich-layout-page .richLayout-faq__a p:first-child { font-weight: 700; }
/* 本文中のテキストリンク */
.rich-layout-page .richLayout-textlink {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1.5rem;
font-weight: 700;
color: var(--richLayout-brand-deep);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
}
.rich-layout-page .richLayout-textlink svg { transition: transform var(--richLayout-dur-ui) var(--richLayout-ease); }
.rich-layout-page .richLayout-textlink:hover svg { transform: translateX(4px); }
/* ==========================================================================
4. ボタン
.button クラスには乗らない。style(3).css:93-102 のグラデーションと
color:#fff!important との衝突を構造的に回避する。
========================================================================== */
.rich-layout-page .richLayout-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--richLayout-s1);
min-height: 60px;
padding: 18px 32px;
border: 1px solid transparent;
border-radius: var(--richLayout-radius);
font-size: 1.7rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .02em;
text-align: center;
transition: background-color var(--richLayout-dur-ui) var(--richLayout-ease),
color var(--richLayout-dur-ui) var(--richLayout-ease),
border-color var(--richLayout-dur-ui) var(--richLayout-ease),
transform var(--richLayout-dur-ui) var(--richLayout-ease);
}
.rich-layout-page .richLayout-btn:active { transform: scale(.97); }
.rich-layout-page .richLayout-btn .richLayout-btn__chev { transition: transform var(--richLayout-dur-ui) var(--richLayout-ease); }
.rich-layout-page .richLayout-btn:hover .richLayout-btn__chev,
.rich-layout-page .richLayout-btn:focus .richLayout-btn__chev { transform: translateX(3px); }
.rich-layout-page .richLayout-btn--primary {
background-color: var(--richLayout-accent);
border-color: var(--richLayout-accent);
color: var(--richLayout-accent-ink);
}
.rich-layout-page .richLayout-btn--primary:hover,
.rich-layout-page .richLayout-btn--primary:focus {
background-color: var(--richLayout-accent-dark);
border-color: var(--richLayout-accent-dark);
}
/* 紙色の上に置く副CTA用のアウトライン。主CV（--primary のオレンジ）と競合させない。
価格ブロックの申込みボタン（.richLayout-cartform button）と同じ見え方に揃える。 */
.rich-layout-page .richLayout-btn--outline {
background-color: transparent;
border-color: var(--richLayout-brand-ink);
color: var(--richLayout-brand-ink);
}
.rich-layout-page .richLayout-btn--outline:hover,
.rich-layout-page .richLayout-btn--outline:focus {
background-color: var(--richLayout-brand-ink);
color: #fff;
}
/* 写真・反転面の上に置く場合は白のアウトラインに反転させる */
.rich-layout-page .richLayout-btn--onDark {
background-color: transparent;
border-color: rgba(255, 255, 255, .55);
color: #fff;
}
.rich-layout-page .richLayout-btn--onDark:hover,
.rich-layout-page .richLayout-btn--onDark:focus {
background-color: #fff;
border-color: #fff;
color: var(--richLayout-brand-ink);
}
.rich-layout-page .richLayout-ctarow {
display: flex;
flex-wrap: wrap;
gap: var(--richLayout-s2);
}
.rich-layout-page .richLayout-ctarow > * { flex: 1 1 260px; }
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-ctarow > * { flex: 0 0 auto; }
}
/* フォーカスリング（style(3).css:77-85 の outline:none を打ち消す） */
.rich-layout-page a:focus-visible,
.rich-layout-page button:focus-visible {
outline: 3px solid var(--richLayout-brand);
outline-offset: 3px;
}
/* 価格セクションは反転面なので白。ヒーローは明るい面なのでブランド色 */
.rich-layout-page .richLayout-price a:focus-visible,
.rich-layout-page .richLayout-price button:focus-visible {
outline-color: #fff;
}
.rich-layout-page .richLayout-hero a:focus-visible {
outline-color: var(--richLayout-brand-ink);
}
/* ==========================================================================
5. hero — 写真背景
========================================================================== */
.rich-layout-page .richLayout-hero {
position: relative;
isolation: isolate;
display: grid;
align-content: end;
min-height: clamp(500px, 70vh, 680px);
padding-top: var(--richLayout-s9);
padding-bottom: var(--richLayout-s7);
/* 写真が読み込めない場合のフォールバックも明るい面にする */
background-color: var(--richLayout-paper);
overflow: hidden;
}
/* 背景写真（リッチレイアウトの既定キービジュアル）。
構図は左が明るい木目、右2/3に被写体（ノートPC・観葉植物・原稿）。
差し替えるときは、写真の明るさに合わせてスクリムと文字色もセットで見直すこと。
商品ごとに変えたい場合は商品別CSS（rich-layout-{商品スラッグ}.css）で上書きする。 */
.rich-layout-page .richLayout-hero__media {
position: absolute;
inset: 0;
z-index: -3;
background-image: url("../img/rich-layout-hero.jpg");
background-size: cover;
/* 被写体が右に寄り、左に文字を置く余白ができる位置 */
background-position: 62% 45%;
background-repeat: no-repeat;
}
/* スクリム。紙色を写真に重ねて、墨色の文字のコントラストを担保する。
墨色 #24211E が AA(4.5:1) を満たすには合成後の背景輝度 L>=0.245。
紙色スクリムは真っ黒な写真の上でも alpha 0.55 で 4.55:1、0.65 で 6.22:1。
文字が乗る帯は 0.65 以上を保つ設計なので、写真を差し替えても崩れにくい。 */
.rich-layout-page .richLayout-hero__scrim {
position: absolute;
inset: 0;
z-index: -2;
background:
linear-gradient(180deg, rgba(250,248,245,.22) 0%, rgba(250,248,245,.58) 34%, rgba(250,248,245,.88) 100%);
}
/* 原稿用紙のマス目。ごく薄く敷いて文芸の質感を出す */
.rich-layout-page .richLayout-hero__motif {
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--richLayout-kohshi);
background-size: var(--richLayout-kohshi-size);
opacity: .6;
mix-blend-mode: normal;
}
.rich-layout-page .richLayout-hero__inner { position: relative; width: 100%; }
.rich-layout-page .richLayout-hero__label {
display: inline-flex;
align-items: center;
gap: var(--richLayout-s2);
font-size: 1.2rem;
font-weight: 700;
letter-spacing: .2em;
line-height: 1.4;
color: var(--richLayout-brand-ink);
margin-bottom: var(--richLayout-s3);
}
.rich-layout-page .richLayout-hero__label::before {
content: "";
display: block;
width: 32px;
height: 1px;
background-color: var(--richLayout-brand);
}
.rich-layout-page .richLayout-hero__display {
font-size: 3.0rem;
font-weight: 700;
line-height: 1.34;
letter-spacing: .005em;
color: var(--richLayout-ink);
text-wrap: balance;
word-break: auto-phrase;
margin-bottom: var(--richLayout-s3);
}
.rich-layout-page .richLayout-hero__br { display: none; }
.rich-layout-page .richLayout-hero__lead {
max-width: 40em;
font-size: 1.6rem;
line-height: 1.9;
color: var(--richLayout-ink);
margin-bottom: var(--richLayout-s6);
}
.rich-layout-page .richLayout-hero__micro {
margin-top: var(--richLayout-s3);
font-size: 1.3rem;
line-height: 1.7;
color: var(--richLayout-ink-mute);
}
@media screen and (min-width: 768px) {
/* 文字が届く左68%までは濃度を保ち、そこから一気に抜いて右の写真を見せる。
明るい写真でもPCの黒い画面が文字の裏に入るため、均等に薄くしない */
.rich-layout-page .richLayout-hero__scrim {
background:
linear-gradient(100deg, rgba(250,248,245,.90) 0%, rgba(250,248,245,.86) 50%, rgba(250,248,245,.70) 64%, rgba(250,248,245,.25) 78%, rgba(250,248,245,0) 92%),
linear-gradient(180deg, rgba(250,248,245,.06) 0%, rgba(250,248,245,.16) 100%);
}
.rich-layout-page .richLayout-hero__inner > * { max-width: 660px; }
.rich-layout-page .richLayout-hero__display { font-size: 4.2rem; line-height: 1.3; max-width: 720px; }
.rich-layout-page .richLayout-hero__br { display: inline; }
.rich-layout-page .richLayout-hero__lead { font-size: 1.7rem; }
}
@media screen and (min-width: 1100px) {
/* 14文字 x 52px = 728px。読点での改行が崩れない幅を確保する */
.rich-layout-page .richLayout-hero__display { font-size: 5.2rem; max-width: 780px; }
.rich-layout-page .richLayout-hero__inner > *:not(.richLayout-hero__display) { max-width: 660px; }
}
/* ==========================================================================
6. ヒーロー内のスペックラベル
旧: ヒーロー直下の深緑の帯。ページ内ナビに見えたので廃止し、
メインコピーの直下にラベルとして収めた。
========================================================================== */
/* ヒーローは明るい面なので、反転面用の意匠をここだけ差し替える
（mark--dark の白帯／btn--onDark の白抜きは、価格セクションではそのまま使う） */
.rich-layout-page .richLayout-hero mark.richLayout-mark--dark {
background: linear-gradient(transparent 58%, rgba(0, 137, 123, .26) 58%);
}
.rich-layout-page .richLayout-hero .richLayout-btn--onDark {
border-color: rgba(36, 33, 30, .5);
color: var(--richLayout-ink);
}
.rich-layout-page .richLayout-hero .richLayout-btn--onDark:hover,
.rich-layout-page .richLayout-hero .richLayout-btn--onDark:focus {
background-color: var(--richLayout-ink);
border-color: var(--richLayout-ink);
color: var(--richLayout-paper);
}
.rich-layout-page .richLayout-hero__specs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--richLayout-s6);
}
.rich-layout-page .richLayout-hero__spec {
padding: 7px 14px;
border: 1px solid rgba(36, 33, 30, .22);
border-radius: 999px;
background-color: rgba(255, 255, 255, .78);
backdrop-filter: blur(2px);
font-size: 1.3rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: .02em;
color: var(--richLayout-ink);
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-hero__spec { font-size: 1.4rem; padding: 8px 16px; }
}
/* ==========================================================================
7. 価値要約 — 見出し左 / 本文右の2カラム
========================================================================== */
.rich-layout-page .richLayout-value__grid { display: grid; gap: var(--richLayout-s6); }
.rich-layout-page .richLayout-value__h2 { margin-bottom: 0; }
.rich-layout-page .richLayout-value__h2::after {
content: "";
display: block;
width: 56px;
height: 2px;
margin-top: var(--richLayout-s4);
background-color: var(--richLayout-brand);
}
.rich-layout-page .richLayout-brpc { display: none; }
.rich-layout-page .richLayout-value__link { margin-top: var(--richLayout-s6); }
@media screen and (min-width: 900px) {
.rich-layout-page .richLayout-value__grid {
grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
gap: var(--richLayout-s9);
align-items: start;
}
.rich-layout-page .richLayout-brpc { display: inline; }
}
/* ==========================================================================
8. こんな方におすすめです — リード左に人アイコン、吹き出しは上向き
========================================================================== */
.rich-layout-page .richLayout-target__ttl {
font-size: 2.2rem;
font-weight: 700;
line-height: 1.5;
text-align: center;
margin-bottom: var(--richLayout-s8);
}
.rich-layout-page .richLayout-target__block + .richLayout-target__block { margin-top: var(--richLayout-s9); }
.rich-layout-page .richLayout-target__lead {
display: flex;
align-items: center;
justify-content: center;
gap: var(--richLayout-s3);
margin-bottom: var(--richLayout-s5);
}
.rich-layout-page .richLayout-target__person {
flex: none;
display: grid;
place-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
color: var(--richLayout-brand-deep);
}
.rich-layout-page .richLayout-target__leadtext {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.7;
color: var(--richLayout-brand-ink);
}
.rich-layout-page .richLayout-target__bubbles { display: grid; gap: var(--richLayout-s4); }
.rich-layout-page .richLayout-target__bubble { display: flex; }
.rich-layout-page .richLayout-target__say {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
padding: var(--richLayout-s3);
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
border-radius: 14px;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.7;
text-align: center;
color: var(--richLayout-ink);
}
/* しっぽは上向き（リードの方を指す）。枠線があるので外側と内側の2枚重ね */
.rich-layout-page .richLayout-target__say::before,
.rich-layout-page .richLayout-target__say::after {
content: "";
position: absolute;
left: 50%;
width: 0;
height: 0;
border-style: solid;
transform: translateX(-50%);
}
.rich-layout-page .richLayout-target__say::before {
top: -12px;
border-width: 0 9px 12px 9px;
border-color: transparent transparent var(--richLayout-rule) transparent;
}
.rich-layout-page .richLayout-target__say::after {
top: -10.5px;
border-width: 0 8px 11px 8px;
border-color: transparent transparent var(--richLayout-card) transparent;
}
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-target__ttl { font-size: 2.8rem; }
.rich-layout-page .richLayout-target__leadtext { font-size: 2.0rem; }
.rich-layout-page .richLayout-target__bubbles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rich-layout-page .richLayout-target__say { min-height: 92px; padding: var(--richLayout-s3) var(--richLayout-s4); }
}
/* ==========================================================================
9. 18ヶ月ロードマップ
========================================================================== */
.rich-layout-page .richLayout-roadmap { position: relative; }
.rich-layout-page .richLayout-roadmap__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-top: var(--richLayout-s8);
border-top: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-roadmap__card {
padding: var(--richLayout-s4) 0;
border-bottom: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-roadmap__num {
display: block;
font-size: 2.8rem;
font-weight: 700;
line-height: 1;
letter-spacing: .06em;
color: var(--richLayout-brand);
font-variant-numeric: tabular-nums;
margin-bottom: var(--richLayout-s2);
}
.rich-layout-page .richLayout-roadmap__name {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
margin-bottom: var(--richLayout-s1);
}
.rich-layout-page .richLayout-roadmap__desc {
font-size: 1.5rem;
line-height: 1.9;
color: var(--richLayout-ink-mute);
}
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-roadmap__list {
grid-template-columns: repeat(5, minmax(0, 1fr));
border-left: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-roadmap__card {
position: relative;
padding: var(--richLayout-s5) var(--richLayout-s3);
border-right: 1px solid var(--richLayout-rule);
/* マス目モチーフをカード内に薄く敷く */
background-image: var(--richLayout-kohshi);
background-size: var(--richLayout-kohshi-size);
}
.rich-layout-page .richLayout-roadmap__num { font-size: 3.4rem; }
/* カード境界に「進む」chevron。矢印はSVGのsingle chevron 1種のみ（ブリーフ §7） */
.rich-layout-page .richLayout-roadmap__card + .richLayout-roadmap__card::before {
content: "";
position: absolute;
left: -13px;
top: 50%;
width: 26px;
height: 26px;
transform: translateY(-50%);
border-radius: 50%;
background-color: var(--richLayout-paper); /* 境界線を切る受け皿 */
z-index: 1;
}
.rich-layout-page .richLayout-roadmap__card + .richLayout-roadmap__card::after {
content: "";
position: absolute;
left: -8px;
top: 50%;
width: 16px;
height: 16px;
transform: translateY(-50%);
background-color: var(--richLayout-brand);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
z-index: 2;
}
}
/* ==========================================================================
10. 詳細カリキュラム
通常コンテナ(1120px)で組む。概要は2カラム、各カリキュラムは見出し付きカード、
受講期間/web面談/受講環境は3カラム。表の列幅は table-layout:fixed で統一する。
========================================================================== */
/* ---- 概要（現行FVから移設した要点＋仕様） ----
導入コピー＋要点3つを横並びで上に、仕様リストを下に置く。
2カラムにすると要点側が短く空きが目立つため縦積みにした。 */
.rich-layout-page .richLayout-overview {
margin-top: var(--richLayout-s7);
padding: var(--richLayout-s4) var(--richLayout-s3);
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-overview__lead .richLayout-emp { margin-bottom: var(--richLayout-s4); }
.rich-layout-page .richLayout-overview__spec {
margin-top: var(--richLayout-s6);
padding-top: var(--richLayout-s6);
border-top: 1px solid var(--richLayout-rule);
}
/* 要点3つ。.richLayout-list は使わないので、リストの点(::before)とは無関係。
チェックアイコン＋本文の2カラムで、アイコンと1行目のベースラインを合わせる。 */
.rich-layout-page .richLayout-points {
display: grid;
gap: var(--richLayout-s3);
margin-top: var(--richLayout-s4);
}
.rich-layout-page .richLayout-points__item {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: var(--richLayout-s2);
align-items: start;
padding: var(--richLayout-s3);
background-color: var(--richLayout-paper);
border: 1px solid var(--richLayout-rule-soft);
}
.rich-layout-page .richLayout-points__check {
margin-top: 4px; /* 1行目のx-heightに合わせる */
color: var(--richLayout-brand-deep);
}
.rich-layout-page .richLayout-points__text {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.8;
}
/* 要点テキスト内の
は3カラムになるPCでのみ効かせる（指定改行）。
1カラムのモバイルでは幅なりに折り返させたいので無効にする。 */
.rich-layout-page .richLayout-points__text br { display: none; }
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--richLayout-s3); }
.rich-layout-page .richLayout-points__item { padding: var(--richLayout-s4) var(--richLayout-s3); }
.rich-layout-page .richLayout-points__text br { display: inline; }
}
/* 現行FVの締めコピーを帯として見せる */
.rich-layout-page .richLayout-banner {
margin-top: var(--richLayout-s6);
padding: var(--richLayout-s5) var(--richLayout-s4);
background-color: var(--richLayout-brand-ink);
color: #fff;
font-size: 1.7rem;
font-weight: 700;
line-height: 1.8;
text-align: center;
}
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-banner { font-size: 2.0rem; }
}
.rich-layout-page .richLayout-detail__body { margin-top: var(--richLayout-s9); }
.rich-layout-page .richLayout-detail__body > * + * { margin-top: var(--richLayout-s4); }
/* 見出しは罫線を1本に絞る。上に短いブランド罫を1本だけ置き、下線は使わない。 */
.rich-layout-page .richLayout-detail__body > .richLayout-h3 {
margin-top: var(--richLayout-s10);
padding-top: var(--richLayout-s3);
border-top: 2px solid var(--richLayout-brand);
font-size: 2.2rem;
}
.rich-layout-page .richLayout-detail__body > .richLayout-h3:first-child { margin-top: 0; }
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-detail__body > .richLayout-h3 { font-size: 2.6rem; }
}
/* ---- カリキュラム（小見出し＋表）----
見出しは表の枠の外に出して、表のヘッダー行に見えないようにする。 */
.rich-layout-page .richLayout-curgroup { margin-top: var(--richLayout-s7); }
.rich-layout-page .richLayout-curgroup:first-of-type { margin-top: var(--richLayout-s5); }
.rich-layout-page .richLayout-curtitle {
margin: 0 0 var(--richLayout-s2);
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: .02em;
color: var(--richLayout-ink);
}
.rich-layout-page .richLayout-curgroup .richLayout-tablewrap {
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-curgroup .richLayout-table { border: 0; }
.rich-layout-page .richLayout-curgroup .richLayout-table th:first-child,
.rich-layout-page .richLayout-curgroup .richLayout-table td:first-child { border-left: 0; }
.rich-layout-page .richLayout-curgroup .richLayout-table th:last-child,
.rich-layout-page .richLayout-curgroup .richLayout-table td:last-child { border-right: 0; }
.rich-layout-page .richLayout-curgroup .richLayout-table tr:last-child td { border-bottom: 0; }
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-curtitle { font-size: 2.0rem; }
}
/* ---- 表 ---- */
.rich-layout-page .richLayout-tablewrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.rich-layout-page .richLayout-table {
min-width: 560px;
table-layout: fixed; /* 列幅を宣言どおりに固定して、表どうしの列位置を揃える */
font-size: 1.5rem;
line-height: 1.75;
background-color: var(--richLayout-card);
}
.rich-layout-page .richLayout-table th,
.rich-layout-page .richLayout-table td {
padding: var(--richLayout-s3);
border: 1px solid var(--richLayout-rule);
text-align: left;
vertical-align: top;
word-break: break-word;
}
.rich-layout-page .richLayout-table thead th {
background-color: var(--richLayout-paper);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: .1em;
color: var(--richLayout-ink-mute);
white-space: nowrap;
padding-top: var(--richLayout-s2);
padding-bottom: var(--richLayout-s2);
}
/* 1列目の幅を全ての表で共通にして、縦の視線を揃える */
.rich-layout-page .richLayout-table--c4 th:nth-child(1) { width: 34%; }
.rich-layout-page .richLayout-table--c4 th:nth-child(2) { width: 14%; }
.rich-layout-page .richLayout-table--c4 th:nth-child(3) { width: 24%; }
.rich-layout-page .richLayout-table--c4 th:nth-child(4) { width: 28%; }
.rich-layout-page .richLayout-table--c3 th:nth-child(1) { width: 34%; }
.rich-layout-page .richLayout-table--c3 th:nth-child(2) { width: 14%; }
.rich-layout-page .richLayout-table--c3 th:nth-child(3) { width: 52%; }
.rich-layout-page .richLayout-table--c2 th:nth-child(1) { width: 34%; }
.rich-layout-page .richLayout-table--c2 th:nth-child(2) { width: 66%; }
/* ---- リスト ---- */
/* li を flex にすると内部の が別の flex アイテムになって
文が分断されるため、点は絶対配置にして本文は通常のインラインの流れに保つ。 */
.rich-layout-page .richLayout-list > li {
position: relative;
padding-left: 22px;
font-size: 1.6rem;
line-height: 1.9;
}
.rich-layout-page .richLayout-list > li + li { margin-top: var(--richLayout-s2); }
.rich-layout-page .richLayout-list > li::before {
content: "";
position: absolute;
left: 0;
top: .82em;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--richLayout-brand);
}
.rich-layout-page .richLayout-list strong { font-weight: 700; color: var(--richLayout-brand-deep); }
.rich-layout-page .richLayout-points { margin-top: var(--richLayout-s3); }
/* ---- 仕様リスト（ラベル/値の定義リスト） ---- */
.rich-layout-page .richLayout-spec { display: grid; gap: 1px; background-color: var(--richLayout-rule); }
.rich-layout-page .richLayout-spec__row {
display: grid;
gap: 4px;
padding: var(--richLayout-s3);
background-color: var(--richLayout-card);
}
.rich-layout-page .richLayout-spec__label {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.5;
color: var(--richLayout-brand-deep);
}
.rich-layout-page .richLayout-spec__value {
font-size: 1.6rem;
line-height: 1.8;
}
.rich-layout-page .richLayout-spec__value strong { font-weight: 700; color: var(--richLayout-brand-deep); }
.rich-layout-page .richLayout-spec__value .richLayout-note { display: block; margin-top: var(--richLayout-s1); }
@media screen and (min-width: 600px) {
.rich-layout-page .richLayout-spec__row {
grid-template-columns: 104px minmax(0, 1fr);
gap: var(--richLayout-s3);
align-items: baseline;
}
.rich-layout-page .richLayout-spec__label { text-align: right; }
}
/* ---- 受講期間 / web面談 / 受講環境 の3カラム ---- */
.rich-layout-page .richLayout-infogrid { display: grid; gap: var(--richLayout-s5); }
.rich-layout-page .richLayout-infogrid__cell {
padding: var(--richLayout-s4) var(--richLayout-s3);
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-infogrid__cell > * + * { margin-top: var(--richLayout-s3); }
.rich-layout-page .richLayout-infogrid .richLayout-h3 {
margin: 0;
padding-bottom: var(--richLayout-s2);
border-bottom: 1px solid var(--richLayout-rule);
font-size: 1.8rem;
}
.rich-layout-page .richLayout-infogrid .richLayout-h3::after { content: none; }
.rich-layout-page .richLayout-infogrid .richLayout-list > li { font-size: 1.5rem; }
@media screen and (min-width: 900px) {
.rich-layout-page .richLayout-infogrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---- オプション枠 ---- */
.rich-layout-page .richLayout-optbox {
margin-top: var(--richLayout-s5);
padding: var(--richLayout-s4) var(--richLayout-s3);
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-optbox > * + * { margin-top: var(--richLayout-s4); }
/* 「オプション」はセクションラベルとして組む（元の【 】は外した） */
.rich-layout-page .richLayout-optbox__label {
display: inline-flex;
align-items: center;
gap: var(--richLayout-s2);
margin: 0;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: .18em;
line-height: 1.4;
color: var(--richLayout-brand-deep);
}
.rich-layout-page .richLayout-optbox__label::before {
content: "";
display: block;
width: 24px;
height: 2px;
background-color: var(--richLayout-brand);
}
/* スキルシートのサンプル図（元の ▼〜▼ は外し、図のキャプションとして組む） */
.rich-layout-page .richLayout-sample { margin-top: var(--richLayout-s6); }
.rich-layout-page .richLayout-sample__cap {
margin-bottom: var(--richLayout-s2);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .06em;
line-height: 1.6;
color: var(--richLayout-ink-mute);
}
.rich-layout-page .richLayout-figure {
display: inline-block;
padding: var(--richLayout-s2);
border: 1px solid var(--richLayout-rule);
background-color: var(--richLayout-paper);
transition: border-color var(--richLayout-dur-ui) var(--richLayout-ease);
}
.rich-layout-page .richLayout-figure:hover { border-color: var(--richLayout-brand); }
.rich-layout-page .richLayout-figure img { max-height: 300px; width: auto; }
.rich-layout-page .richLayout-optbox .richLayout-note { font-size: 1.3rem; }
/* ---- 受講の流れ ---- */
.rich-layout-page .richLayout-steps {
margin-top: var(--richLayout-s6);
border-left: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-step {
position: relative;
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--richLayout-s3);
align-items: start;
padding: 0 0 var(--richLayout-s7) var(--richLayout-s5);
}
.rich-layout-page .richLayout-step:last-child { padding-bottom: 0; }
.rich-layout-page .richLayout-step::before {
content: "";
position: absolute;
left: -4px;
top: 22px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--richLayout-brand);
}
.rich-layout-page .richLayout-step__icon {
padding: 6px;
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
border-radius: 50%;
}
.rich-layout-page .richLayout-step__img { width: 100%; height: auto; }
.rich-layout-page .richLayout-step__num {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.4;
color: var(--richLayout-brand-deep);
margin-bottom: var(--richLayout-s1);
}
.rich-layout-page .richLayout-step__text { font-size: 1.5rem; line-height: 1.95; }
/* ※で始まる注記は本文より一段小さく、色も落として優先度を下げる */
.rich-layout-page .richLayout-step__note {
font-size: 1.3rem;
line-height: 1.85;
color: var(--richLayout-ink-mute);
}
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-step {
grid-template-columns: 72px minmax(0, 1fr);
gap: var(--richLayout-s4);
padding-left: var(--richLayout-s6);
}
.rich-layout-page .richLayout-step__text { font-size: 1.6rem; }
.rich-layout-page .richLayout-step__note { font-size: 1.4rem; }
}
/* ==========================================================================
11. 価格 — このページ唯一の反転面
========================================================================== */
.rich-layout-page .richLayout-price {
background-color: var(--richLayout-brand-ink);
color: #fff;
}
.rich-layout-page .richLayout-price .richLayout-label { color: rgba(255, 255, 255, .82); }
.rich-layout-page .richLayout-price .richLayout-label::after { background-color: rgba(255, 255, 255, .6); }
.rich-layout-page .richLayout-price__grid {
display: grid;
gap: var(--richLayout-s8);
margin-top: var(--richLayout-s8);
}
.rich-layout-page .richLayout-price__includes { border-top: 1px solid rgba(255, 255, 255, .22); }
.rich-layout-page .richLayout-price__row {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: var(--richLayout-s3);
align-items: start;
padding: var(--richLayout-s3) 0;
border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.rich-layout-page .richLayout-price__icon { margin-top: 4px; opacity: .85; }
.rich-layout-page .richLayout-price__term {
display: block;
font-size: 1.6rem;
font-weight: 700;
line-height: 1.6;
}
.rich-layout-page .richLayout-price__desc {
display: block;
font-size: 1.5rem;
line-height: 1.9;
color: rgba(255, 255, 255, .88);
}
.rich-layout-page .richLayout-price__card {
align-self: start;
padding: var(--richLayout-s5) var(--richLayout-s4);
background-color: var(--richLayout-card);
background-image: var(--richLayout-kohshi);
background-size: var(--richLayout-kohshi-size);
color: var(--richLayout-ink);
border-radius: var(--richLayout-radius-lg);
}
.rich-layout-page .richLayout-price__cardlabel {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .16em;
color: var(--richLayout-ink-mute);
margin-bottom: var(--richLayout-s2);
}
.rich-layout-page .richLayout-price__amount {
display: flex;
align-items: baseline;
gap: 2px;
font-size: 1.7rem;
font-weight: 700;
line-height: 1.1;
}
.rich-layout-page .richLayout-price__num {
font-size: 4.4rem;
letter-spacing: .01em;
font-variant-numeric: tabular-nums;
color: var(--richLayout-brand-ink);
}
.rich-layout-page .richLayout-price__tax {
font-size: 1.3rem;
font-weight: 400;
color: var(--richLayout-ink-mute);
margin-left: 4px;
}
.rich-layout-page .richLayout-price__meta {
margin-top: var(--richLayout-s2);
padding-top: var(--richLayout-s3);
border-top: 1px solid var(--richLayout-rule);
font-size: 1.4rem;
line-height: 1.7;
color: var(--richLayout-ink-mute);
}
.rich-layout-page .richLayout-price__card .richLayout-ctarow {
margin-top: var(--richLayout-s5);
flex-direction: column;
}
.rich-layout-page .richLayout-price__card .richLayout-ctarow > * { flex: 1 1 auto; width: 100%; }
.rich-layout-page .richLayout-price__card .richLayout-btn--onDark {
border-color: var(--richLayout-brand-ink);
color: var(--richLayout-brand-ink);
}
.rich-layout-page .richLayout-price__card .richLayout-btn--onDark:hover,
.rich-layout-page .richLayout-price__card .richLayout-btn--onDark:focus {
background-color: var(--richLayout-brand-ink);
color: #fff;
}
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-price__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
align-items: start;
}
.rich-layout-page .richLayout-price__num { font-size: 5.6rem; }
}
/* 本物のカートフォームを価格カードに馴染ませる。
style.css:99-104 の background-color:#FF9900!important を上書きするため
!important が必要。セレクタも 0,4,1 で確実に勝つ。 */
.rich-layout-page .richLayout-price .richLayout-cartform { display: block; }
.rich-layout-page .richLayout-price .richLayout-cartform button.single_add_to_cart_button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--richLayout-s1);
width: 100%;
min-height: 60px;
padding: 18px 32px;
background: none !important;
background-color: transparent !important;
border: 1px solid var(--richLayout-brand-ink);
border-radius: var(--richLayout-radius);
box-shadow: none;
font-family: var(--richLayout-font);
font-size: 1.7rem;
font-weight: 700;
line-height: 1.4;
letter-spacing: .02em;
color: var(--richLayout-brand-ink) !important;
transition: background-color var(--richLayout-dur-ui) var(--richLayout-ease),
color var(--richLayout-dur-ui) var(--richLayout-ease),
transform var(--richLayout-dur-ui) var(--richLayout-ease);
}
.rich-layout-page .richLayout-price .richLayout-cartform button.single_add_to_cart_button:hover,
.rich-layout-page .richLayout-price .richLayout-cartform button.single_add_to_cart_button:focus {
background-color: var(--richLayout-brand-ink) !important;
color: #fff !important;
box-shadow: none;
}
.rich-layout-page .richLayout-price .richLayout-cartform button.single_add_to_cart_button:active {
transform: scale(.97);
}
/* ==========================================================================
12. FAQ
========================================================================== */
.rich-layout-page .richLayout-faq__list {
margin-top: var(--richLayout-s7);
border-top: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-faq__item { border-bottom: 1px solid var(--richLayout-rule); }
.rich-layout-page .richLayout-faq__q {
display: flex;
align-items: flex-start;
gap: var(--richLayout-s3);
width: 100%;
min-height: 60px;
padding: var(--richLayout-s3) 0;
font-family: var(--richLayout-font);
font-size: 1.6rem;
font-weight: 700;
line-height: 1.7;
color: var(--richLayout-ink);
text-align: left;
transition: color var(--richLayout-dur-ui) var(--richLayout-ease);
}
.rich-layout-page .richLayout-faq__q:hover { color: var(--richLayout-brand-deep); }
.rich-layout-page .richLayout-faq__q[aria-expanded="true"] { color: var(--richLayout-brand-ink); }
.rich-layout-page .richLayout-faq__q:hover .richLayout-faq__mark { transform: scale(1.12); }
.rich-layout-page .richLayout-faq__q[aria-expanded="true"]:hover .richLayout-faq__mark { transform: rotate(45deg) scale(1.12); }
.rich-layout-page .richLayout-faq__qmark {
flex: none;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--richLayout-brand-deep); /* #00897B は 3.71:1 でAA不合格。#00695C で 5.68:1 */
margin-top: .25em;
}
.rich-layout-page .richLayout-faq__qtext { flex: 1 1 auto; }
.rich-layout-page .richLayout-faq__mark {
flex: none;
margin-top: .35em;
color: var(--richLayout-brand-deep);
transition: transform var(--richLayout-dur-ui) var(--richLayout-ease);
}
/* ＋ が × に回転する */
.rich-layout-page .richLayout-faq__q[aria-expanded="true"] .richLayout-faq__mark { transform: rotate(45deg); }
.rich-layout-page .richLayout-faq__a {
padding: 0 0 var(--richLayout-s5) calc(1.4rem + var(--richLayout-s3));
font-size: 1.5rem;
line-height: 1.95;
}
.rich-layout-page .richLayout-faq__a p + p { margin-top: var(--richLayout-s2); }
.rich-layout-page .richLayout-faq__a[hidden] { display: none; }
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-faq__q { font-size: 1.8rem; }
.rich-layout-page .richLayout-faq__a { font-size: 1.6rem; }
}
/* ==========================================================================
13. クロージングCTA帯
========================================================================== */
.rich-layout-page .richLayout-closing {
background-color: var(--richLayout-paper-alt);
text-align: center;
background-image: var(--richLayout-kohshi);
background-size: var(--richLayout-kohshi-size);
}
.rich-layout-page .richLayout-closing .richLayout-h2 { margin-bottom: var(--richLayout-s6); }
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-closing .richLayout-h2 { font-size: 3.4rem; }
}
.rich-layout-page .richLayout-closing .richLayout-ctarow { justify-content: center; }
.rich-layout-page .richLayout-closing .richLayout-ctarow > * { flex: 0 1 380px; }
.rich-layout-page .richLayout-closing .richLayout-note { margin-top: var(--richLayout-s3); }
/* ==========================================================================
14. モバイル固定CTAバー
.site{overflow-x:hidden} 配下では position:sticky が不安定なため fixed。
要素は #page の外に置く。
========================================================================== */
.richLayout-stickycta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
display: none;
padding: 12px 16px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
background-color: rgba(250, 248, 245, .97);
border-top: 1px solid #DED7CC;
transform: translateY(110%);
transition: transform var(--richLayout-dur-sec, 400ms) var(--richLayout-ease, ease-out);
}
.richLayout-stickycta.is-in { transform: translateY(0); }
/* 「受講を申し込む」「無料で受講相談」の2ボタンを横並びにする。
バーの高さを1行に収めるため、本文のボタンより高さ・文字サイズを詰める。
申し込みを主にしたいので、幅は 6:4 で「受講を申し込む」側を広く取る。
flex-basis を 0 にしているので flex-grow の比がそのまま幅の比になる。 */
.richLayout-stickycta__row {
display: flex;
align-items: stretch;
gap: 8px;
}
.richLayout-stickycta .richLayout-btn {
flex: 1 1 0;
min-width: 0;
min-height: 52px;
padding: 12px 10px;
font-size: 1.5rem;
letter-spacing: 0;
}
.richLayout-stickycta .richLayout-btn--outline { flex-grow: 6; }
.richLayout-stickycta .richLayout-btn--primary { flex-grow: 4; }
@media screen and (max-width: 767px) {
.rich-layout-page .richLayout-stickycta { display: block; }
.rich-layout-page #page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* デスクトップ用のフローティングバナーはモバイルでは元から hideSp で非表示 */
}
/* 6:4 にすると「無料で受講相談」（全角7文字 = 105px）が狭い端末で4割幅に収まらず
2行に折り返すため、320px 級の端末だけ文字と左右padding を詰めて1行を守る。 */
@media screen and (max-width: 359px) {
.richLayout-stickycta .richLayout-btn { font-size: 1.4rem; padding: 12px 6px; }
}
/* ==========================================================================
15. スクロールリベール
隠す指定は .richLayout-js 配下のみ。JSが動かなくても本文は必ず見える。
========================================================================== */
.richLayout-js .rich-layout-page .richLayout-reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity var(--richLayout-dur-sec) var(--richLayout-ease),
transform var(--richLayout-dur-sec) var(--richLayout-ease);
transition-delay: var(--richLayout-d, 0ms);
}
.richLayout-js .rich-layout-page .richLayout-reveal.is-in { opacity: 1; transform: none; }
/* スタッガー（80ms間隔）はCSSだけで完結させる */
.rich-layout-page .richLayout-hero__spec:nth-child(1),
.rich-layout-page .richLayout-roadmap__card:nth-child(1) { --richLayout-d: 0ms; }
.rich-layout-page .richLayout-hero__spec:nth-child(2),
.rich-layout-page .richLayout-roadmap__card:nth-child(2) { --richLayout-d: 80ms; }
.rich-layout-page .richLayout-hero__spec:nth-child(3),
.rich-layout-page .richLayout-roadmap__card:nth-child(3) { --richLayout-d: 160ms; }
.rich-layout-page .richLayout-hero__spec:nth-child(4),
.rich-layout-page .richLayout-roadmap__card:nth-child(4) { --richLayout-d: 240ms; }
.rich-layout-page .richLayout-hero__spec:nth-child(5),
.rich-layout-page .richLayout-roadmap__card:nth-child(5) { --richLayout-d: 320ms; }
@media (prefers-reduced-motion: reduce) {
.richLayout-js .rich-layout-page .richLayout-reveal { opacity: 1; transform: none; transition: none; }
.rich-layout-page .richLayout-btn,
.rich-layout-page .richLayout-textlink svg,
.rich-layout-page .richLayout-faq__mark,
.rich-layout-page .richLayout-faq__q,
.richLayout-stickycta { transition: none; }
.rich-layout-page .richLayout-btn:active { transform: none; }
}
/* ==========================================================================
16. カード内側余白 — 768px以上で広げる（モバイルは詰めた値のまま）
========================================================================== */
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-overview { padding: var(--richLayout-s6); }
.rich-layout-page .richLayout-infogrid__cell { padding: var(--richLayout-s5); }
.rich-layout-page .richLayout-optbox { padding: var(--richLayout-s6); }
.rich-layout-page .richLayout-price__card { padding: var(--richLayout-s6) var(--richLayout-s5); }
.rich-layout-page .richLayout-target__say { padding: var(--richLayout-s3) var(--richLayout-s4); }
}
@media screen and (min-width: 900px) {
.rich-layout-page .richLayout-overview { padding: var(--richLayout-s8); }
}
/* ==========================================================================
17. WordPress / WooCommerce 側の実装補正
--------------------------------------------------------------------------
デザイン原本（premium-renewal.html）はセクションを div.product の直下に
ベタ書きしていたが、WordPress では ACF「本文（HTML）」の内容が
div.summary.entry-summary の中に出力される。Storefront はこの summary を
商品画像と横並びにするため幅56.5%・右フロートで組むので、その指定を解除して
全幅に戻す。（画像ギャラリー・商品説明タブ自体は functions.php で出力を止めている）
詳細度は body.rich-layout-page.single-product div.product > .summary.entry-summary で
(0,5,2)。Storefront 側の (0,4,1) を上回るので !important は使わない。
========================================================================== */
body.rich-layout-page.single-product div.product > .summary.entry-summary {
width: auto;
max-width: none;
float: none;
clear: both;
margin: 0;
padding: 0;
}
/* div.product 自体（.richLayout-flow が付く）の外側余白を消す。
紙色の背景がヘッダー直下からフッターまで途切れないようにするため。 */
body.rich-layout-page.single-product div.product.richLayout-flow {
margin: 0;
padding: 0;
}
/* 通知エリア（カート追加時のメッセージ）が空のときに余白を作らないようにする */
body.rich-layout-page .woocommerce-notices-wrapper:empty {
display: none;
}
/* ==========================================================================
18. 講座内容（商品説明欄）の既存マークアップ対応
--------------------------------------------------------------------------
「講座内容」は WordPress 標準の本文欄（商品説明）の内容をそのまま使う。
本文のHTMLは書き換えない方針なので、既存クラスのまま
リッチレイアウトの見た目になるようスタイルを当てる。
対応表（左: 本文欄の既存マークアップ / 右: リッチレイアウト側の対応要素）
h2.cmnTtl__type2 → richLayout-detail__body > .richLayout-h3
h4 → .richLayout-curtitle
div.scroll-table → .richLayout-tablewrap
table.apply → .richLayout-table
section.course_detail__content-desc → .richLayout-optbox
ul.course_detail__content-list / ul.disc → .richLayout-list
p.course_detail__content-text → .richLayout-note
ol.courseFlow → .richLayout-steps
li.courseFlow__item → .richLayout-step
p.courseFlow__step → .richLayout-step__num
p.courseFlow__content → .richLayout-step__text
本文欄のクラスが変わった場合はここを更新する。
========================================================================== */
/* ---- 親サイトの余白ユーティリティを打ち消す ----
/assets/css/style.css の .mtS / .mtM / .mtXL / .mbM / .mbMPc などは
すべて !important 付きで定義されている（例: .mtS,.mtSPc{margin-top:16px!important}）。
本文欄の表には class="apply mtS mbMPc" が付いているため、そのままだと
枠の内側に余白が入って白帯になり、見出しの余白もデザインより詰まる。
本文は書き換えない方針なので、リッチレイアウト内でだけ打ち消す。
打ち消した上で、この節の余白指定も !important で当て直している。 */
.rich-layout-page .richLayout-entry :where(
.mtXS, .mtXSPc, .mtXSSp, .mtS, .mtSPc, .mtSSp, .mtM, .mtMPc, .mtMSp,
.mtL, .mtLPc, .mtLSp, .mtXL, .mtXLPc, .mtXLSp
) {
margin-top: 0 !important;
}
.rich-layout-page .richLayout-entry :where(
.mbXS, .mbXSPc, .mbXSSp, .mbS, .mbSPc, .mbSSp, .mbM, .mbMPc, .mbMSp,
.mbL, .mbLPc, .mbLSp, .mbXL, .mbXLPc, .mbXLSp
) {
margin-bottom: 0 !important;
}
.rich-layout-page .richLayout-entry { margin-top: var(--richLayout-s9) !important; }
.rich-layout-page .richLayout-entry > * + * { margin-top: var(--richLayout-s4) !important; }
/* ---- 見出し ---- */
.rich-layout-page .richLayout-entry h2 {
margin-top: var(--richLayout-s10) !important;
margin-bottom: var(--richLayout-s2) !important;
padding-top: var(--richLayout-s3);
border-top: 2px solid var(--richLayout-brand);
font-size: 2.2rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: .02em;
color: var(--richLayout-ink);
}
.rich-layout-page .richLayout-entry > h2:first-child { margin-top: 0 !important; }
.rich-layout-page .richLayout-entry h4 {
margin-top: var(--richLayout-s7) !important;
margin-bottom: var(--richLayout-s2) !important;
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
letter-spacing: .02em;
color: var(--richLayout-ink);
}
/* 中見出しの直後にくる最初の小見出しだけ、上の間隔を詰める
（デザインの .richLayout-curgroup:first-of-type = s5。2つ目以降は s7） */
.rich-layout-page .richLayout-entry h2 + h4 { margin-top: var(--richLayout-s5) !important; }
/* 小見出しと表の間隔はデザインの curtitle と同じ s2 に詰める
（> * + * の s4 が効いてしまうため明示的に上書きする） */
.rich-layout-page .richLayout-entry h4 + .scroll-table { margin-top: var(--richLayout-s2) !important; }
/* ---- 本文・注記 ---- */
.rich-layout-page .richLayout-entry p { font-size: 1.6rem; line-height: 1.9; }
/* 太字はデザインに合わせ、本文中は墨色のまま。リスト内だけブランド色にする
（デザインの .richLayout-flow strong と .richLayout-list strong の使い分け） */
.rich-layout-page .richLayout-entry strong { font-weight: 700; }
.rich-layout-page .richLayout-entry .course_detail__content-list strong,
.rich-layout-page .richLayout-entry ul.disc strong { color: var(--richLayout-brand-deep); }
.rich-layout-page .richLayout-entry .course_detail__content-text {
font-size: 1.4rem;
line-height: 1.85;
color: var(--richLayout-ink-mute);
}
/* 本文欄で .emp が使われているのはスキルシートのサンプル見出しのみ。
デザインの sample__cap（小さめのキャプション）に合わせる。 */
.rich-layout-page .richLayout-entry .emp {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--richLayout-ink-mute);
}
.rich-layout-page .richLayout-entry .center { text-align: center; }
/* ---- 表 ---- */
.rich-layout-page .richLayout-entry .scroll-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-entry table.apply {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
/* 親サイトの table.apply は上下に #ccc の罫を持つ。枠は .scroll-table 側で描くので落とす */
border: 0;
font-size: 1.5rem;
line-height: 1.75;
background-color: var(--richLayout-card);
}
.rich-layout-page .richLayout-entry table.apply th,
.rich-layout-page .richLayout-entry table.apply td {
padding: var(--richLayout-s3);
border: 1px solid var(--richLayout-rule);
text-align: left;
vertical-align: top;
word-break: break-word;
/* 親サイトの .scroll-table は SP で white-space:nowrap。
デザインは列幅を固定して折り返す組み方なので通常に戻す */
white-space: normal;
}
.rich-layout-page .richLayout-entry table.apply thead th {
background-color: var(--richLayout-paper);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: .1em;
color: var(--richLayout-ink-mute);
white-space: nowrap;
padding-top: var(--richLayout-s2);
padding-bottom: var(--richLayout-s2);
}
/* .scroll-table に包まれた表だけ、デザインと同じ最小幅を持たせて横スクロールさせる。
包まれていない表（スキルシートのスコア表）に min-width を付けると
スクロールできる親が無いまま画面からはみ出すため、付けない。 */
.rich-layout-page .richLayout-entry .scroll-table > table.apply { min-width: 560px; }
/* .scroll-table に包まれた表は外枠が二重になるので内側の枠を落とす */
.rich-layout-page .richLayout-entry .scroll-table > table.apply { border: 0; }
.rich-layout-page .richLayout-entry .scroll-table > table.apply th:first-child,
.rich-layout-page .richLayout-entry .scroll-table > table.apply td:first-child { border-left: 0; }
.rich-layout-page .richLayout-entry .scroll-table > table.apply th:last-child,
.rich-layout-page .richLayout-entry .scroll-table > table.apply td:last-child { border-right: 0; }
.rich-layout-page .richLayout-entry .scroll-table > table.apply tr:last-child td { border-bottom: 0; }
/* ---- リスト ---- */
.rich-layout-page .richLayout-entry .course_detail__content-list > li,
.rich-layout-page .richLayout-entry ul.disc > li {
position: relative;
padding-left: 22px;
font-size: 1.6rem;
line-height: 1.9;
}
.rich-layout-page .richLayout-entry .course_detail__content-list > li + li,
.rich-layout-page .richLayout-entry ul.disc > li + li { margin-top: var(--richLayout-s2) !important; }
.rich-layout-page .richLayout-entry .course_detail__content-list > li::before,
.rich-layout-page .richLayout-entry ul.disc > li::before {
content: "";
position: absolute;
left: 0;
top: .82em;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--richLayout-brand);
}
/* ---- オプション枠 ---- */
.rich-layout-page .richLayout-entry .course_detail__content-desc {
display: block;
margin-top: var(--richLayout-s5) !important;
padding: var(--richLayout-s4) var(--richLayout-s3);
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-entry .course_detail__content-desc > * + * { margin-top: var(--richLayout-s4) !important; }
.rich-layout-page .richLayout-entry .course_detail__content-desc > h4:first-child { margin-top: 0 !important; }
/* サンプル画像（スキルシート）。本文側の inline style（高さ300px）はそのまま活かす。
デザインの sample（figcaption ＋ 枠付き画像）と同じ組みにする。
キャプションは左寄せ・小さめ・墨のグレー。本文側は .center と が
付いているので、中央寄せとブランド色を打ち消す。
※注記の p はデザインでも装飾なし＝本文と同じ大きさなので、ここでは触らない。 */
.rich-layout-page .richLayout-entry .course_detail__content-desc > .emp {
margin-top: var(--richLayout-s6) !important;
margin-bottom: var(--richLayout-s2) !important;
text-align: left;
line-height: 1.6;
}
.rich-layout-page .richLayout-entry .course_detail__content-desc > .emp strong {
font-weight: 700;
color: inherit;
}
.rich-layout-page .richLayout-entry .course_detail__content-desc > .emp + a { margin-top: 0 !important; }
.rich-layout-page .richLayout-entry .course_detail__content-desc a {
display: inline-block;
padding: var(--richLayout-s2);
border: 1px solid var(--richLayout-rule);
background-color: var(--richLayout-paper);
transition: border-color var(--richLayout-dur-ui) var(--richLayout-ease);
}
.rich-layout-page .richLayout-entry .course_detail__content-desc a:hover { border-color: var(--richLayout-brand); }
/* ---- 受講の流れ ---- */
.rich-layout-page .richLayout-entry .courseFlow {
margin-top: var(--richLayout-s6) !important;
border-left: 1px solid var(--richLayout-rule);
}
.rich-layout-page .richLayout-entry .courseFlow__item {
position: relative;
padding: 0 0 var(--richLayout-s7) var(--richLayout-s5);
}
.rich-layout-page .richLayout-entry .courseFlow__item:last-child { padding-bottom: 0; }
.rich-layout-page .richLayout-entry .courseFlow__item::before {
content: "";
position: absolute;
left: -4px;
top: 22px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: var(--richLayout-brand);
}
/* アイコン列＋本文列。fBox は既存の float レイアウト用クラスなので grid で上書きする */
.rich-layout-page .richLayout-entry .courseFlow__item > .fBox {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--richLayout-s3);
align-items: start;
}
.rich-layout-page .richLayout-entry .courseFlow__item > .fBox::after { content: none; } /* .cf のクリアフィックス無効化 */
.rich-layout-page .richLayout-entry .courseFlow__item > .fBox > * { float: none; width: auto; }
/* アイコン: 丸い下地（デザインの step__icon）の上に四角いアイコンを重ねる。
丸はあくまで背景で、画像はトリムしない。画像の角が丸から少しはみ出すのが正しい状態。
本文欄側のアイコン列 div（f1of7Pc f1of4Sp）を下地として使う。 */
.rich-layout-page .richLayout-entry .courseFlow__item > .fBox > div:first-child {
padding: 6px;
background-color: var(--richLayout-card);
border: 1px solid var(--richLayout-rule);
border-radius: 50%;
box-sizing: border-box;
/* overflow は visible のまま。ここで hidden にすると四角い角が切れてしまう */
}
.rich-layout-page .richLayout-entry .courseFlow__image {
width: 100%;
height: auto;
border-radius: 0;
}
.rich-layout-page .richLayout-entry .courseFlow__step {
font-size: 1.3rem;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.4;
color: var(--richLayout-brand-deep);
margin-bottom: var(--richLayout-s1) !important;
}
.rich-layout-page .richLayout-entry .courseFlow__content { font-size: 1.5rem; line-height: 1.95; }
/* ---- 本文欄末尾の申込みボタン ----
本文欄には旧デザイン用の「このコースに申し込む」リンクが入っているが、
リッチレイアウトでは価格セクションに申込みフォームがあるため二重になる。
本文は書き換えない方針なので、表示側で隠す。 */
.rich-layout-page .richLayout-entry .form.cart { display: none; }
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-entry .course_detail__content-desc { padding: var(--richLayout-s6); }
}
/* ---- 講座内容: デザインに合わせた細部 ----
本文欄の表には列数を示すクラスが無いため、:has() で列数を判定して
デザインと同じ列幅（34/14/24/28 ほか）を当てる。
:has() が効かない環境では等幅（table-layout:fixed の既定）になるだけで崩れない。 */
.rich-layout-page .richLayout-entry table.apply:has(thead th:nth-child(4)) th:nth-child(1) { width: 34%; }
.rich-layout-page .richLayout-entry table.apply:has(thead th:nth-child(4)) th:nth-child(2) { width: 14%; }
.rich-layout-page .richLayout-entry table.apply:has(thead th:nth-child(4)) th:nth-child(3) { width: 24%; }
.rich-layout-page .richLayout-entry table.apply:has(thead th:nth-child(4)) th:nth-child(4) { width: 28%; }
.rich-layout-page .richLayout-entry table.apply:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) th:nth-child(1) { width: 34%; }
.rich-layout-page .richLayout-entry table.apply:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) th:nth-child(2) { width: 14%; }
.rich-layout-page .richLayout-entry table.apply:has(thead th:nth-child(3)):not(:has(thead th:nth-child(4))) th:nth-child(3) { width: 52%; }
.rich-layout-page .richLayout-entry table.apply:not(:has(thead th:nth-child(3))) th:nth-child(1) { width: 34%; }
.rich-layout-page .richLayout-entry table.apply:not(:has(thead th:nth-child(3))) th:nth-child(2) { width: 66%; }
/* オプション枠の先頭見出し【オプション】は、デザインの optbox__label（罫つきラベル）に合わせる */
.rich-layout-page .richLayout-entry .course_detail__content-desc > h4:first-child {
display: inline-flex;
align-items: center;
gap: var(--richLayout-s2);
margin: 0 !important;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: .18em;
line-height: 1.4;
color: var(--richLayout-brand-deep);
}
.rich-layout-page .richLayout-entry .course_detail__content-desc > h4:first-child::before {
content: "";
display: block;
width: 24px;
height: 2px;
background-color: var(--richLayout-brand);
}
/* デザインは768px以上で見出しを一段大きくする
（detail__body > h3 = 2.6rem / curtitle = 2.0rem）。本文欄の見出しにも同じ値を当てる。 */
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-entry h2 { font-size: 2.6rem; }
.rich-layout-page .richLayout-entry h4 { font-size: 2.0rem; }
}
/* ---- 受講期間 / web面談 / 受講環境（3カラム）----
本文欄には入れ物だけを足してもらう（既存タグは変更しない）:
枠・3カラム・余白はデザイン側の .richLayout-infogrid をそのまま使うので、
ここでは中身の既存タグ（h2.cmnTtl__type2 / ul / p）の見え方だけ合わせる。 */
.rich-layout-page .richLayout-entry .richLayout-infogrid__cell > * + * {
margin-top: var(--richLayout-s3) !important;
}
/* セル内の見出しは、上のブランド罫ではなく下罫の小見出しに切り替える
（デザインの .richLayout-infogrid .richLayout-h3 と同じ） */
.rich-layout-page .richLayout-entry .richLayout-infogrid__cell h2 {
margin: 0 !important;
padding-top: 0;
padding-bottom: var(--richLayout-s2);
border-top: 0;
border-bottom: 1px solid var(--richLayout-rule);
font-size: 1.8rem;
}
.rich-layout-page .richLayout-entry .richLayout-infogrid .course_detail__content-list > li,
.rich-layout-page .richLayout-entry .richLayout-infogrid ul.disc > li { font-size: 1.5rem; }
/* 受講の流れも768px以上でひとまわり大きくする
（デザインの .richLayout-step = アイコン72px / gap s4 / padding-left s6、本文 1.6rem） */
@media screen and (min-width: 768px) {
.rich-layout-page .richLayout-entry .courseFlow__item { padding-left: var(--richLayout-s6); }
.rich-layout-page .richLayout-entry .courseFlow__item > .fBox {
grid-template-columns: 72px minmax(0, 1fr);
gap: var(--richLayout-s4);
}
.rich-layout-page .richLayout-entry .courseFlow__content { font-size: 1.6rem; }
}
/* 本文欄では にクラスを付けなくてもデザインのマーカーになるようにする。
（リセットの対象タグに mark は入っていないため、素の はブラウザ標準の
黄色背景になってしまう。ここでデザインの mark.richLayout-mark と同じ指定を当てる）
クラスを付けて書いても同じ見た目になる。 */
.rich-layout-page .richLayout-entry mark {
background: linear-gradient(transparent 58%, rgba(0, 137, 123, .26) 58%);
color: inherit;
font-weight: 700;
padding: 0 .08em;
}
/* SP時のセル余白。子テーマ style.css の
@media (max-width:767px) .product table.apply tr :is(td,th):first-child { padding-left: 0 }
が詳細度 (0,3,3) でこちらの (0,3,2) を上回り、左右の余白が消えてしまう。
body 起点にして詳細度を上げ、デザインどおりの余白に戻す。 */
body.rich-layout-page .richLayout-entry table.apply tr th,
body.rich-layout-page .richLayout-entry table.apply tr td {
padding: var(--richLayout-s3);
}
body.rich-layout-page .richLayout-entry table.apply thead tr th {
padding-top: var(--richLayout-s2);
padding-bottom: var(--richLayout-s2);
}
/* ページ内リンクのスムーススクロール（JSが動かない場合のフォールバック）。
ネイティブのアンカー移動は #page ではなくドキュメントを動かすので、
スクロールコンテナの影響を受けずに着地する。 */
@media (prefers-reduced-motion: no-preference) {
html:has(body.rich-layout-page) { scroll-behavior: smooth; }
}