のダミー弾を消す */
.sc-cs-about__body .sc-cs-about__ul > .sc-cs-about__li::before,
.sc-cs-about__body ul > li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-primary); }
.sc-cs-about__body .sc-cs-about__ol, .sc-cs-about__body ol { counter-reset: sc-cs-ol; }
.sc-cs-about__body .sc-cs-about__ol > .sc-cs-about__li, .sc-cs-about__body ol > li { counter-increment: sc-cs-ol; }
.sc-cs-about__body .sc-cs-about__ol > .sc-cs-about__li::before,
.sc-cs-about__body ol > li::before { content: counter(sc-cs-ol) "."; position: absolute; left: 0; color: var(--sc-primary); font-weight: var(--sc-fw-bold); }
/* ネストしたリスト: 親 li の下に入れ子の ul/ol が来ても縦積みで詰まらないよう調整 */
.sc-cs-about__body .sc-cs-about__li > .sc-cs-about__ul,
.sc-cs-about__body .sc-cs-about__li > .sc-cs-about__ol,
.sc-cs-about__body li > ul, .sc-cs-about__body li > ol { margin: 4px 0 0; }
.sc-cs-about__body .sc-cs-about__img, .sc-cs-about__body img { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }
.sc-cs-about__body .sc-cs-about__figure, .sc-cs-about__body figure { margin: 16px 0; }
.sc-cs-about__body .sc-cs-about__figcaption, .sc-cs-about__body figcaption { font-size: 13px; color: var(--sc-fg-secondary); margin-top: 6px; }
.sc-cs-about__body .sc-cs-about__hr, .sc-cs-about__body hr { border: 0; border-top: 1px solid var(--sc-border, rgba(255,255,255,.14)); margin: 24px 0; }
/* 引用 */
.sc-cs-about__body .sc-cs-about__blockquote, .sc-cs-about__body blockquote {
margin: 16px 0; padding: 8px 0 8px 16px; border-left: 3px solid var(--sc-primary);
color: var(--sc-fg-secondary); font-style: italic;
}
/* コード */
.sc-cs-about__body .sc-cs-about__code, .sc-cs-about__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--sc-bg-hover-strong, rgba(255,255,255,.08)); padding: 1px 6px; border-radius: 4px; }
.sc-cs-about__body .sc-cs-about__pre, .sc-cs-about__body pre { margin: 16px 0; padding: 16px; overflow-x: auto; background: var(--sc-bg-hover-strong, rgba(255,255,255,.08)); border-radius: 8px; }
.sc-cs-about__body .sc-cs-about__pre .sc-cs-about__code, .sc-cs-about__body pre code { background: none; padding: 0; }
/* テーブル: 横幅超過時は内部スクロール(ページ横スクロールを防ぐ) */
.sc-cs-about__body .sc-cs-about__table, .sc-cs-about__body table {
display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 16px 0; font-size: 14px;
}
.sc-cs-about__body .sc-cs-about__th, .sc-cs-about__body .sc-cs-about__td,
.sc-cs-about__body th, .sc-cs-about__body td { border: 1px solid var(--sc-border, rgba(255,255,255,.14)); padding: 8px 12px; text-align: left; vertical-align: top; }
.sc-cs-about__body .sc-cs-about__th, .sc-cs-about__body th { font-weight: var(--sc-fw-bold); background: var(--sc-bg-hover-strong, rgba(255,255,255,.06)); }
.sc-cs-about__toggle { margin-top: 12px; }
/* ===== Reviews (#90): Tutor 実レビュー連動 (デザイン確定前フォールバック) ===== */
.sc-cs-stars { display: inline-flex; gap: 2px; font-size: 14px; line-height: 1; }
.sc-cs-star { color: var(--sc-primary); }
.sc-cs-star--empty { color: var(--sc-border, rgba(255,255,255,.22)); }
.sc-cs-reviews__summary { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; margin-bottom: 24px; padding: 20px 24px; background: var(--sc-bg-hover-strong, rgba(255,255,255,.05)); border-radius: 12px; }
.sc-cs-reviews__score { display: flex; flex-direction: column; gap: 6px; }
.sc-cs-reviews__avg { font-size: 40px; font-weight: var(--sc-fw-bold); line-height: 1; color: var(--sc-fg); }
.sc-cs-reviews__score .sc-cs-stars { font-size: 16px; }
.sc-cs-reviews__count { font-size: 14px; color: var(--sc-fg-secondary); }
.sc-cs-reviews__bars { flex: 1 1 240px; min-width: 200px; display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }
.sc-cs-reviews__bar { display: flex; align-items: center; gap: 10px; }
.sc-cs-reviews__bar-label { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--sc-fg-secondary); width: 34px; flex: 0 0 auto; }
.sc-cs-reviews__bar-track { position: relative; flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--sc-border, rgba(255,255,255,.14)); overflow: hidden; }
.sc-cs-reviews__bar-fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--sc-primary); border-radius: 3px; }
.sc-cs-reviews__bar-cnt { font-size: 13px; color: var(--sc-fg-secondary); width: 24px; text-align: right; flex: 0 0 auto; }
.sc-cs-reviews__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.sc-cs-review { padding-bottom: 20px; border-bottom: 1px solid var(--sc-border, rgba(255,255,255,.12)); }
.sc-cs-review:last-child { border-bottom: 0; padding-bottom: 0; }
.sc-cs-review__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 6px; }
.sc-cs-review__name { font-size: 15px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }
.sc-cs-review__date { font-size: 13px; color: var(--sc-fg-secondary); }
.sc-cs-review .sc-cs-stars { margin-bottom: 8px; }
.sc-cs-review__body { font-size: 15px; line-height: 1.5; color: var(--sc-fg); margin: 0; }
/* ★ `.sc-cs` 前置きで (0,2,0)。実描画は ``(sc-course-single.php:1382)
* なので :22 の `.sc-cs p { margin: 0 }`(0,1,1) に margin-top を食われる(= #192 と同型)。
* 併記クラスの `.sc-cs .sc-cs-note`(:24) は font-size/color のみで margin を持たないため救われない。
* ※ レビューがあるコースだけ描画されるためローカル未確認(SUSPECTED)。 */
.sc-cs .sc-cs-reviews__more { margin-top: 20px; }
/* ===== Skills (online = check リスト) ===== */
.sc-cs-skills__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sc-cs-skills__list--simple { grid-template-columns: 1fr; }
.sc-cs-skill { display: flex; align-items: flex-start; gap: 8px; }
.sc-cs-skill--simple i { font-size: 20px; color: var(--sc-brand-studio); margin-top: 2px; flex: 0 0 auto; }
.sc-cs-skill__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-cs-skill__text b { font-size: 16px; font-weight: var(--sc-fw-bold); color: var(--sc-fg); }
.sc-cs-skill__text span { font-size: 14px; color: var(--sc-fg-secondary); line-height: 1.4; }
/* ===== Skills (Course/FP = カードグリッド) — Figma 3918:63330 / #107→#146 PC=3Dフリップ SP=モーダル ===== */
/* 采寸(Figma 3918:63330 = "Included item container"): カード 276x232 / radius 12 / border 1px #353739(≒--sc-border-dim) /
* bg #121212(=--sc-bg) / padding 32px 8px / アイコン円 128px / タイトル・本文 Montserrat 16px lh1.4。
* グリッド(2400:79048): 3列 gap 8px(縦横とも)。SP は現状維持(2列/pic96)。
* 表(front)= アイコン+スキル名 / 裏(back)= 説明文。PC のみ __inner を rotateY(180deg) で 3D フリップ。 */
/* grid 既定の align-items:stretch で同一行のカード高さが揃う。 */
/* #138: Skills 見出し下のホバー案内(PC のみ。SP はモーダル+Openボタンなので非表示) */
/* #192: 見出し→hint→グリッドの余白を「他セクションと同じ 16px リズム」に揃える。
* 旧 `margin:-8px 0 0` は見出しの margin-bottom:16px を -8px で打ち消して 8px に詰め、
* さらに hint の下余白 0 でカードグリッドが密着していた(クライアント指摘「余白が詰まっている」)。
* 16px の根拠 = `.sc-cs .sc-cs-sec__title { margin-bottom:16px }`(全 .sc-cs-sec 共通の見出し下余白)。
* ※ hint は SP では display:none(#138)なので SP の見出し→グリッドは従来どおり 12px。 */
/* ★ セレクタは `.sc-cs` を前置きして (0,2,0) にする。理由: 本ファイル冒頭 :22 の
* `.sc-cs h1, .sc-cs h2, .sc-cs h3, .sc-cs p, ... { margin: 0 }`(0,1,1)が
* `.sc-cs-skills__hint` 単体(0,1,0)に**勝ってしまい margin が一切効かない**。
* 実測: 前置き無しだと hint→グリッドの余白が 0px のまま(=指摘の「密着」が直らない)。
* 旧 `margin:-8px 0 0` も同じ理由で元から無効だった(詰まりの真因はこのリセット)。
* 同ファイルの `.sc-cs .sc-cs-sec__title { margin-bottom:16px }`(:207)が同じ対処をしている。 */
.sc-cs .sc-cs-skills__hint { margin: 0 0 16px; font-size: 14px; color: var(--sc-fg-secondary); }
/* #192: 行間(row-gap)のみ 8px → 16px。指摘は「カードの行間」なので、列間は Figma 2400:79048 の
* 3列 gap 8px を維持する(横幅=カード寸法 276px 起点の確定値を崩さない)。16px はカード内の
* gap / padding(.sc-cs-skillcard)や .sc-cs-skills__list の gap と同じスケール値。 */
.sc-cs-skills__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 16px; }
.sc-cs-skillcard {
display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 8px;
background: var(--sc-bg-bright); border-radius: var(--sc-radius-card);
}
/* フリップ土台。SP/base では静的(表面だけを縦積み表示)。PC 用のフリップは下の @media で有効化。 */
.sc-cs-skillcard__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.sc-cs-skillcard__face { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.sc-cs-skillcard__face--back { display: none; } /* SP: 説明はモーダルで表示(裏面は出さない) */
.sc-cs-skillcard__pic { width: 128px; height: 128px; border-radius: 50%; background: var(--sc-bg-hover-strong); flex: 0 0 auto; }
/* #142: アイコン(白ソリッド SVG)を円内中央に。![]()
参照。 */
.sc-cs-skillcard__pic--icon { display: flex; align-items: center; justify-content: center; }
.sc-cs-skillcard__img { width: 56%; height: 56%; object-fit: contain; display: block; }
.sc-cs-skillcard__desc { margin: 0; font-size: 16px; font-weight: var(--sc-fw-medium); line-height: 1.4; color: var(--sc-fg); text-align: center; }
.sc-cs-skillcard__title { margin: 0; text-align: center; font-size: 16px; font-weight: var(--sc-fw-bold); line-height: 1.4; color: var(--sc-fg); }
/* Open ボタンは常にカード下端へ(SP 用。PC は下の @media で非表示)。 */
.sc-cs-skillcard__btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 4px 16px; margin-top: auto;
border: 1px solid var(--sc-border-invert); border-radius: var(--sc-radius-pill); background: var(--sc-bg-invert); cursor: pointer;
color: var(--sc-bg-bright); font-family: var(--sc-font); font-size: 14px; font-weight: var(--sc-fw-bold); line-height: 1.2;
transition: background .15s ease, color .15s ease;
}
.sc-cs-skillcard__btn:hover { background: var(--sc-border-invert); color: var(--sc-primary); }
/* PC (hover デバイス・grid 3列=1025px 基準)で 3D カードフリップ。hover:hover でタッチデバイスを除外(SP はモーダルのまま)。
* 挙動(#18 yuria 2026-07-22): :hover でフリップ / クリックで .is-flipped 固定 / 再クリックで解除。
* 解除直後はポインタが載ったままでも表へ戻すため is-nohover で :hover を打ち消す。
* 背景色(Figma 1704-5446): 表 #272727(--sc-bg-bright)/ 裏 #121212(--sc-bg)/ 枠 1px #353739(--sc-border-dim)。 */
@media (hover: hover) and (min-width: 1025px) {
/* Figma 采寸: 276x232 / radius 12 / padding 32 8。背景・枠は各 face が持つ(表裏で色が異なるため)。 */
/* #18(yuria 2026-07-23): 表面で 2行タイトルがアイコン円と被らないよう高さを 232→256px に。
* height 固定 = 全カード等高(タイトル行数に依らず揃う)。アイコンは上部固定で表裏とも同位置(下記)。 */
.sc-cs-skillcard {
height: 256px; padding: 0; gap: 0; perspective: 1000px;
background: transparent; border: 0; cursor: pointer;
}
.sc-cs-skillcard:focus-visible { outline: 2px solid var(--sc-fg); outline-offset: 2px; }
.sc-cs-skillcard__inner {
position: relative; height: 100%; gap: 0;
transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.sc-cs-skillcard__face {
position: absolute; inset: 0; padding: 32px 8px;
border: 1px solid var(--sc-border-dim); border-radius: var(--sc-radius-card);
backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* 表: 背景 #272727。アイコン円は中央(絶対配置)、スキル名は下端。 */
.sc-cs-skillcard__face--front { background: var(--sc-bg-bright); justify-content: flex-end; }
/* 裏: 背景 #121212。スキル名+説明を中央に。アイコンは同位置で薄く(説明文の背景)。 */
.sc-cs-skillcard__face--back {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
background: var(--sc-bg); transform: rotateY(180deg); overflow: auto;
}
/* #18: アイコン円は表裏で同じ位置 = カード上部に絶対配置(フリップで位置がずれない)。
* #18(yuria 2026-07-23): 中央(top:50%)だと下端寄せのタイトルと被るため上部固定に変更。
* 表=アイコン上部+タイトル下端で余白確保(被らない)/ 裏=同位置で opacity10% の背景に。 */
.sc-cs-skillcard__face .sc-cs-skillcard__pic {
position: absolute; top: 32px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 0;
}
.sc-cs-skillcard__face--front .sc-cs-skillcard__title { position: relative; z-index: 1; width: 100%; }
/* 裏面: アイコンを opacity 10% で説明文の背景に。タイトル/説明は前面。 */
.sc-cs-skillcard__face--back .sc-cs-skillcard__pic { opacity: .1; }
.sc-cs-skillcard__face--back .sc-cs-skillcard__title,
.sc-cs-skillcard__face--back .sc-cs-skillcard__desc { position: relative; z-index: 1; }
/* hover / .is-flipped(クリック固定)で表→裏に反転(表は backface-visibility:hidden で隠れる)。 */
.sc-cs-skillcard:hover .sc-cs-skillcard__inner,
.sc-cs-skillcard.is-flipped .sc-cs-skillcard__inner { transform: rotateY(180deg); }
/* 固定解除直後(is-nohover)は、ポインタが載ったままでも hover フリップを打ち消して表へ戻す。 */
.sc-cs-skillcard.is-nohover:not(.is-flipped):hover .sc-cs-skillcard__inner { transform: none; }
/* Figma(PC): Skills カードに Open ボタンは無い(フリップで説明を表示)。SP はモーダルのため維持。 */
.sc-cs-skillcard__btn { display: none; }
/* アクセシビリティ: モーション低減環境ではフリップのアニメーションを無効化(即時切替)。 */
@media (prefers-reduced-motion: reduce) {
.sc-cs-skillcard__inner { transition: none; }
}
}
/* ===== What's Included (アイコン+テキストの縦リスト) — Figma 2400:79310 ===== */
/* #87: 2状態で寸法が異なる。行間 16px は両状態共通 (Figma 1106:8700 PC / SP)。
* - アイコンあり : 64px 円 + タイトル(18px) + 説明(16px) — Figma 1704-20037 / 1106-8700
* - アイコンなし : 32px ソリッド赤チェック丸 + タイトルのみ (コンパクト) — Figma 1704-20037 / 2400-78625 */
.sc-cs-included__grid { display: flex; flex-direction: column; gap: 16px; }
.sc-cs-inc { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.sc-cs-inc__icon {
display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; flex: 0 0 auto;
border-radius: 50%; background: rgba(240,75,80,.12); color: var(--sc-primary); font-size: 28px;
}
/* #87: アイコン未選択時 (Figma 1704-20037 / 2400-78625) — 32px ソリッド赤丸 + 白チェック。
* 子孫セレクタ (0,2,0) で基底・SP の .sc-cs-inc__icon (0,1,0) を確実に上書き。 */
.sc-cs-inc--check .sc-cs-inc__icon { width: 32px; height: 32px; font-size: 16px; background: var(--sc-primary); color: #fff; }
.sc-cs-inc__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-cs-inc__text b { font-size: 18px; font-weight: var(--sc-fw-bold); line-height: 1.2; color: var(--sc-fg); }
.sc-cs-inc__text span { font-size: 16px; font-weight: var(--sc-fw-medium); color: var(--sc-fg-secondary); }
/* ===== Accordion (curriculum / faq / course content) ===== */
.sc-cs-acc { display: flex; flex-direction: column; gap: 8px; }
.sc-cs-acc__item { background: var(--sc-bg-bright); border-radius: 8px; overflow: hidden; }
.sc-cs-acc__head {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px; border: none; background: transparent; cursor: pointer; text-align: left;
font-family: var(--sc-font); font-size: 16px; font-weight: var(--sc-fw-bold); color: var(--sc-fg);
}
.sc-cs-acc__head i { font-size: 16px; color: var(--sc-fg-secondary); transition: transform .2s ease; }
.sc-cs-acc__item.is-open .sc-cs-acc__head i { transform: rotate(45deg); }
.sc-cs-acc__body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.sc-cs-acc__item:not(.is-open) .sc-cs-acc__body { display: none; }
.sc-cs-acc__body li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--sc-fg-secondary); list-style: none; }
.sc-cs-acc__body li i { color: var(--sc-fg-secondary); }
.sc-cs-acc__body--faq p { font-size: 14px; color: var(--sc-fg-secondary); line-height: 1.5; }
/* #89: Course Content レッスン行 — 左=種別アイコン+タイトル / 右=再生時間+ロック (Figma 1365:27048 / 1704:21793)。 */
.sc-cs-acc__head .sc-cs-acc__headtitle { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.sc-cs-acc__head .sc-cs-acc__headtitle > span:first-child { min-width: 0; }
/* ★ 親 `.sc-cs-acc__body` を前置きして (0,2,0)。レッスン行は `.sc-cs-acc__body` 直下の