/* =====================================================================
* BROWDIA article.css — 記事系ページ専用（フェーズ5）
* base -> layout -> components の後に読む。salon/school/job の .css とは同時に読まない。
*
* ★カンプ実測（docs/decisions/2026-08-06-article-comp.md）:
* 本文カラム 850（x200..1049）／ サイドバー 300（x1100..1399）／
* H2デザイン01 = サロン・スクール・求人の見出しの帯とまったく同じもの
*
* ★2026-08-07（フェーズ6）: .c-detail-title は components.css へ1本化した。
* .list-layout / .list-cards は**あえて1本化していない**（下の注記）。
* ===================================================================== */
/* ★.c-detail-title の定義は components.css にある（4本の重複を1本化した）。
★.list-layout はここに残す。同じ名前だが salon.css は
「SPは1カラム・PCでグリッド」と形が違い、salon-list.php は条件付きで
クラスを足す。school/job は .school-layout / .job-layout の別名も持つ。
まとめると10か所のテンプレートを直すことになり、得るものが少ない。
★.list-cards も1本化しない。溝がカンプ実測でページごとに違う
（サロン16 / スクール15→33 / 求人15→21）。同じ名前だが同じ部品ではない。 */
/* 2段組。★本文も minmax にする（求人で踏んだ。850px固定だと
1024〜1239px でサイドバー列が潰れて中身がはみ出す） */
.list-layout { display: grid; gap: 30px; padding-block: 20px 0; }
@media (min-width: 1024px) {
.list-layout {
grid-template-columns: minmax(0, 850px) minmax(0, 300px);
gap: 50px;
align-items: start;
}
}
.list-main { min-width: 0; }
/* ---------------------------------------------------------------- 一覧カード
★記事一覧ページそのもののカンプは無い（PC/デザイン にあるのは
トップ・サロン・スクール・求人・投稿記事・固定記事の6枚だけ）。
いちばん近いのはトップページの「Art Makeup Column」節の記事カードなので、
そこから測った値を当てている（2026-08-07 実測。PC/デザイン/Browdia.jpg y9279..9659）:
カード 370幅・溝45（3列で1200＝本文の全幅）
写真 370x278（4:3）／ タグ 14 ／ 見出し 18・行送り28（2行）
★ただしトップの節には**日付と抜粋が無い**。一覧ページのカードには両方ある。
どちらに寄せるかは中身の判断なので、勝手に消していない。発注者に確認中。 */
.art-cards { display: grid; gap: 20px; }
@media (min-width: 768px) { .art-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .art-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 45px; } }
/* 関連記事は本文の下なので2列まで */
@media (min-width: 1024px) { .art-cards--rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.art-card { display: grid; gap: 10px; min-width: 0; }
.art-card__media { display: block; }
.art-card__img,
.art-card__media .is-empty {
display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: var(--r-card); background: var(--c-bg-alt);
}
/* アイキャッチが無い記事はロゴの面にする（2026-08-19 発注者）。空の箱だけだと
「読み込みに失敗した」ように見える。ロゴの指定は base.css の --noimage-logo が正本 */
.art-card__media .is-empty { background: var(--c-bg-alt) var(--noimage-logo); }
.art-card__body { display: grid; gap: 6px; min-width: 0; }
.art-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; }
.art-card__date { color: var(--c-text); font-family: var(--font-en); letter-spacing: .04em; }
.art-card__tag { color: var(--c-primary); text-decoration: none; }
.art-card__tag:hover { text-decoration: underline; }
.art-card__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 22px; }
.art-card__title a { color: var(--c-navy); text-decoration: none; }
.art-card__title a:hover { text-decoration: underline; }
/* 抜粋（.art-card__text）は 2026-08-07 に出すのをやめた。理由は article-card.php の注記。
指定は残す。戻すのはテンプレートの1行だけで済むようにしておく。 */
.art-card__text { margin: 0; font-size: 14px; line-height: 1.8; color: var(--c-text); }
@media (min-width: 1024px) {
.art-card__meta { font-size: 14px; }
.art-card__title { font-size: 18px; line-height: 28px; }
}
/* ---------------------------------------------------------------- 記事ヘッダー */
.art-detail { display: grid; gap: 24px; align-content: start; min-width: 0; }
@media (min-width: 1024px) { .art-detail { gap: 40px; } }
/* ---------------------------------------------------------------- 見出しの帯（日付・タグ・題）
投稿記事・固定ページ共通（app/templates/parts/article-head.php）。2026-08-18 発注者の指摘で
カンプどおりに作り直した。それまでは本文の列の中に日付と題を素で置いていて、
全幅の薄紫の帯・時計のアイコン・サイドバーが帯の下から始まる並びが無かった。
カンプ実測（PC/デザイン/Browdia_投稿記事ページ.jpg・Browdia_固定記事ページ.jpg。SPは÷2）:
帯 … 全幅 #F7F0F7。PC y171..330（160高）／SP 89.5..207.5（118高）
時計 … PC 26px（x200..225 y213..238）／SP 15px。#E589B4（--c-pink）線2px・針は9時
日付 … 16px Regular Tracking75 紺／SP 11px。時計との間 PC11／SP4
タグ … 16px Light Tracking50 紫／SP 13px。日付との間 PC23／SP19.5。タグどうしは1字ぶん
題 … 30px Bold Tracking50 紺、時計の下端から25／SP 20px 行送り30
帯の下端 → アイキャッチ PC40／SP30 ＝ .list-layout の上余白20 ＋ この帯の margin-bottom 20／10
★日付の書体はカンプが NotoSansCJKjp（英字書体ではない）。前は --font-en で出していた。 */
.art-headband { background: #F7F0F7; margin-bottom: 10px; }
.art-head { display: grid; gap: 8px; padding-block: 20px 15px; }
.art-head__meta {
display: flex; flex-wrap: wrap; align-items: center;
gap: 4px 6.5px;
margin: 0;
font-size: 13px; line-height: 1.4;
letter-spacing: .05em;
}
.art-head__date {
display: inline-flex; align-items: center; gap: 4px;
margin-right: 13px; /* タグとの間 19.5 ＝ 6.5 ＋ 13 */
font-size: 12px; letter-spacing: .075em;
color: var(--c-navy);
}
.art-head__date::before {
content: ''; flex: none;
width: 15px; height: 15px;
background: url("/assets/img/icon-clock.svg") no-repeat center / contain;
}
.art-head__tag { font-weight: 300; color: var(--c-primary); text-decoration: none; }
.art-head__tag:hover { text-decoration: underline; }
.art-head__title {
margin: 0;
font-size: 20px;
font-weight: 700;
line-height: 30px;
letter-spacing: var(--ls-wide);
color: var(--c-navy);
}
@media (min-width: 1024px) {
.art-headband { margin-bottom: 20px; }
.art-head { gap: 20px; padding-block: 41px 31px; }
.art-head__meta { gap: 6px 8px; font-size: 16px; }
.art-head__date { gap: 11px; margin-right: 15px; font-size: 16px; } /* タグとの間 23 ＝ 8 ＋ 15 */
.art-head__date::before { width: 26px; height: 26px; }
.art-head__title { font-size: 30px; line-height: 1.35; }
}
/* ★アイキャッチは 850 x 640（85:64）。16/9 ではない。
2026-08-07 に2枚のカンプを走査線で測り直して直した。
投稿記事・固定ページとも x200..1049 / y371..1010 でまったく同じ。
固定ページ側はPSDのレイヤー名も「固定ページ見出しバナー」850x640 で一致する。
16/9 だと 850x478 になり、下が162px足りなかった。 */
.art-eyecatch__img,
.art-eyecatch .is-empty {
display: block; width: 100%; aspect-ratio: 85 / 64; object-fit: cover;
border-radius: var(--r-card); background: var(--c-bg-alt);
}
/* ---------------------------------------------------------------- 監修者・ライター・書き手
カンプ実測（2026-08-10。投稿記事ページ PC y1331..1795 / SP y1773..2220）。
決定記録 docs/decisions/2026-08-06-article-comp.md §5-13。
| | PC | SP（カンプ÷2） |
|----------------|-----------------------------|----------------------|
| 枠 | x200..1049（850＝本文の幅） | x30..719（345） |
| 線 | 2px `#E3E2F0`・角丸10 | 1.5px・角丸5 |
| 内側の余白 | 上28 右27 下24 左18 | 13.5 |
| 丸写真 | 120 | 100 |
| 写真と文字の間 | 30 | 16 |
| 札 | 60x26・角丸3・地`--c-accent`| 50x20 |
| 肩書き | 16 / 行送り26 / `--c-accent`| 13 |
| 名前 | 18 Bold / 28 / `--c-navy` | 14 |
| 紹介文 | 14 / 24 / `#585858` | 12 / 17 |
| SNS | 20 の3つ・間14・右上 | 18・間9.5・名前の下 |
| カードとカードの間 | 20 | 10 |
★**SNSの位置がPCとSPで違う。**PCは札と同じ行の右端、SPは名前の下。
PCの縮小ではないので、grid-template-areas を組み替える。
★**紹介文もPCとSPで置き場所が違う。**PCは写真の右の段、SPは写真の下の全幅。
★札の文言はカンプが「監修者」「ガイド」。**「ガイド」は使わない。**
2026-08-07 に発注者が「ライター」へ変えている（カンプのほうが古い）。
★紹介文の色は本文（`#333333`）ではなく `#585858`。
PCのカンプは字が細くて濃い画素が出ないので、**SPカンプ（2倍）で確かめた**
— 濃い画素の最頻が #585858 が2250、#8D8D8D が700。SNSのマークも同じ色。 */
.art-authors { display: grid; gap: 10px; }
@media (min-width: 1024px) { .art-authors { gap: 20px; } }
.art-author {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
grid-template-areas: "photo badge" "photo title" "photo name" "photo sns" "bio bio";
/* ★写真（100）より文字の段が低いときの余りは SNS の段（4段目）に寄せる。書かないと空の段（肩書き無し）にも
等分に配られて、札と名前の間が空く（2026-08-18 発注者「スマホ表示の際にくずれています」の直しで露見） */
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
align-content: start;
column-gap: 16px; row-gap: 2px;
padding: 13.5px;
border: 1.5px solid #E3E2F0; border-radius: 5px;
background: var(--c-white);
/* ★palt を入れること。入れないと字幅がカンプより広くなる（base.css の注記）。
肩書き「アートメイクアーティスト」の字面は カンプ175 に対し、
palt 無しだと 195 になった（12文字ぶんで20px広い）。 */
font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) {
.art-author {
grid-template-columns: 120px minmax(0, 1fr);
grid-template-areas: "photo badge" "photo title" "photo name" "photo bio";
grid-template-rows: none; /* SPの段の指定を戻す（PCは4段。紹介文の段が伸びる） */
column-gap: 30px; row-gap: 3px;
padding: 28px 27px 24px 18px;
border-width: 2px; border-radius: 10px;
}
}
/* 写真。SPは上ぞろえ、PCは縦中央。
PCのカンプは写真の上50・下49（内側219のうち）で、文字の段のほうが背が高い。
★grid-row: 1 / -1 を書かないこと（2026-08-18 発注者「スマホ表示の際にくずれています」）。
SPは紹介文が写真の**下**の全幅の段（"bio bio"）なので、最後の段まで通すと写真がその段にも
居座って紹介文の頭に重なる（肩書き・SNSが無く上の段が写真より低いときに露見）。
マスは grid-template-areas の photo（SP=1〜4段目・PC=全段）に任せる。 */
.art-author__photo { grid-area: photo; align-self: start; }
@media (min-width: 1024px) { .art-author__photo { align-self: center; } }
.art-author__img,
.art-author__photo .is-empty {
display: block; width: 100px; height: 100px; object-fit: cover;
border-radius: 50%; background: var(--c-bg-alt);
}
@media (min-width: 1024px) { .art-author__img, .art-author__photo .is-empty { width: 120px; height: 120px; } }
/* 札。★行送りを1にして箱の高さを直接決める。継ぐと字の大きさぶん箱が伸びる（この罠は5回目）。
★SPは写真より4.5px下から始まる（カンプ実測: 写真の上13.5・札の上18）。 */
.art-author__badge {
grid-area: badge; justify-self: start;
display: flex; align-items: center; justify-content: center;
min-width: 50px; height: 20px; padding: 0 6px; margin-top: 4.5px;
border-radius: 3px; background: var(--c-accent);
color: var(--c-white); font-size: 12px; line-height: 1; letter-spacing: .05em;
}
@media (min-width: 1024px) {
.art-author__badge { min-width: 60px; height: 26px; margin-top: 0; font-size: 14px; }
}
/* SNS。★PCは札と**同じマス**に入れて右端へ寄せる（段を増やさない）。 */
.art-author__sns {
grid-area: sns; justify-self: start; align-self: start;
display: flex; align-items: center; gap: 9.5px; margin-top: 4.5px;
}
@media (min-width: 1024px) {
.art-author__sns { grid-area: badge; justify-self: end; align-self: start; gap: 14px; margin-top: 0; }
}
.art-author__sns-link {
display: block; width: 18px; height: 18px;
background: #585858;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
@media (min-width: 1024px) { .art-author__sns-link { width: 20px; height: 20px; } }
.art-author__sns-link:hover { opacity: .65; }
/* ★3つとも**仮のマーク**（自分で描いた）。LINEのときと同じで、公式のマークは商標なので
ガイドラインに沿った素材の支給を待つ。届いたら svg を差し替えるだけで済む。 */
.art-author__sns-link--instagram {
-webkit-mask-image: url("/assets/img/icon-instagram.svg"); mask-image: url("/assets/img/icon-instagram.svg");
}
.art-author__sns-link--x {
-webkit-mask-image: url("/assets/img/icon-x.svg"); mask-image: url("/assets/img/icon-x.svg");
}
.art-author__sns-link--tiktok {
-webkit-mask-image: url("/assets/img/icon-tiktok.svg"); mask-image: url("/assets/img/icon-tiktok.svg");
}
/* 肩書き。★札の下だけ間が広い（カンプ実測 8.2）。row-gap は3なので差の5を足す。 */
.art-author__title {
grid-area: title; margin-top: 4px;
font-size: 13px; line-height: 18px; letter-spacing: .05em; color: var(--c-accent);
}
@media (min-width: 1024px) { .art-author__title { margin-top: 5px; font-size: 16px; line-height: 26px; } }
.art-author__name {
grid-area: name;
font-size: 14px; font-weight: 700; line-height: 20px;
letter-spacing: var(--ls-narrow); color: var(--c-navy);
}
@media (min-width: 1024px) { .art-author__name { font-size: 18px; line-height: 28px; } }
/* 紹介文。★SPは写真の下の全幅なので、上の間を写真ぶん空ける（カンプ実測 20）。 */
.art-author__bio {
grid-area: bio; margin-top: 14.5px;
font-size: 13px; font-weight: 300; line-height: 18px;
letter-spacing: var(--ls-narrow); color: #585858;
}
@media (min-width: 1024px) {
/* ★PCの上の間は row-gap(3) だけでは 1px 足りない（カンプの行送りの差 3.7）。 */
.art-author__bio { margin-top: 1px; font-size: 14px; line-height: 24px; }
}
/* ---------------------------------------------------------------- 本文の基本
カンプ実測（2026-08-07）。固定記事ページの地の文（PSD #490「アートメイクは、
皮膚の浅い層に…」ほか）は PC・SPとも次の値で揃っていた。
| | PC | SP |
|---|---|---|
| 字 | 16 | 13 |
| 行送り | 26 | 18 |
| 字送り | Tracking50（.05em） | 同じ |
★前は 15px / line-height 2（＝30px）で、字も行送りもカンプと違っていた。
★ブロック同士の上下の間はカンプから1つに決められない。実測した4か所で
24.5 / 27 / 15.5 / 33.5 とばらついている（見出しの前後だけ広い）。
いまの 1.6em（＝PC25.6）はその真ん中なので変えていない。
★palt を入れること。入れないと字幅がカンプより広くなる（base.css の注記）。 */
.art-body {
/* ★SPは 15px/24px（2026-08-19 発注者「スマホで見た時、フォントが小さいように思う」）。
SPカンプは 26px@750（＝13px/18px）で、そのとおり組んでいたが、実機で読むと詰まる。
見出し・リストの印も一緒に上げた（下）。PCは変えていない */
font-size: 15px; line-height: 24px;
letter-spacing: .05em;
font-feature-settings: "palt" 1;
min-width: 0;
}
@media (min-width: 1024px) { .art-body { font-size: 16px; line-height: 26px; } }
.art-body > * { margin-block: 0 1.6em; }
.art-body > *:last-child { margin-bottom: 0; }
/* ★「>」を外さないこと。`.art-body p`（詳細度 0,1,1）は
`.blk-salon__meta`（0,1,0）のような部品側の指定より強いので、
ブロックの中の 全部に 1.6em が乗って、部品の余白指定が黙って効かなくなる
（2026-08-07 に実測で発覚。サロン紹介カードのバッジと名前の間が
12px の指定に対して 69px 開いていた）。 */
.art-body > p { margin-block: 0 1.6em; }
/* ★段落の間を戻すのは自由HTMLだけでよい。ほかのブロックの中身は
sanitize_inline() が b/i/mark/br/a しか通さないので
は入らない
（2026-08-07 に allowlist を確認）。自由HTMLだけ素通しなので、
ここが「>」に変えたことで唯一ふるまいが変わる場所。 */
.art-body .blk-raw p { margin-block: 0 1.6em; }
.art-body .blk-raw p:last-child { margin-bottom: 0; }
/* ★`:not(:where(.btn))` が要る。`.art-body a`（0,1,1）は `.btn--solid` / `.btn--gradient`（0,1,0）
より強いので、**本文の中のボタンの字がリンク色（藤）になる**。カンプは白。
2026-08-07 に下線だけ `.blk-salon__cta .btn { text-decoration: none }` で消していて、
色のほうが残っていた（2026-08-10 に発注者のスクリーンショットで気づいた）。
★ボタンを1つずつ打ち消して回らないこと。ブロックを増やすたびに同じ穴が空く。
★**`:where()` で包むのが肝。**素の `:not(.btn)` にすると詳細度が (0,1,1) → (0,2,1) に上がり、
`.toc__item a` / `.blk-salon__name a`（どちらも 0,1,1・下線なし）を追い越して、
目次とサロン名に下線が出る（2026-08-10 に実際に出した）。
`:where()` の中は詳細度0なので、この指定は前と同じ (0,1,1) のままになる。 */
/* ★内部リンクのカード（.blk-link・2026-08-19）も除く。カード全体が で、字の色と下線は中の要素が持つ */
.art-body a:not(:where(.btn, .blk-link)) { color: var(--c-primary); text-decoration: underline; }
.art-body mark { background: #FBEFA0; padding: 0 2px; }
/* 強調の色（本文の中）。カンプ（固定記事ページ y6921 / y7024 ほか）の強調は
**太字＋色つきの文字**で、地色は敷いていない。走査の最頻 #C076A7 ＝ --c-accent。
★紫は 2026-08-10 発注者の指示で足した色。カンプには無い。
★クラス名は app/render/blocks.php の ARTICLE_EM_CLASSES と対。片方だけ変えない。 */
.art-body b.em-accent { color: var(--c-accent); }
.art-body b.em-purple { color: var(--c-primary); }
/* ★画像・引用・番号リストはカンプに描かれていない（2026-08-07 に2枚とも確認）。
決定記録§3.11が「そのほか」として名前だけ挙げているブロック。
ここは実測ではなく、実測で決まった本文の字（PC16/26・SP13/18）に
合わせて揃えているだけ。カンプが来たら測り直す。 */
.article-img { margin-block: 0 1.6em; }
.article-img img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
/* リンク付きの画像（バナー・CTA。2026-08-19）。下線や色は要らない。押せることは触れば分かる程度に薄くする */
.art-body .article-img__link { display: block; text-decoration: none; transition: opacity .2s; }
.art-body .article-img__link:hover { opacity: .85; }
.article-img figcaption { margin-top: 8px; font-size: 13px; color: var(--c-text); text-align: center; }
@media (min-width: 1024px) { .article-img figcaption { font-size: 14px; } }
/* 箇条書き。カンプ実測（固定記事ページ PC y1704.. / SP y2274..）:
ピンクの✓（PC 24x18 / SP 15x11・#E689B3）＋ 文字は左から PC50 / SP27.5。
行と行の間は PC11 / SP9.5。
★文字は**太字**（2026-08-07 発注者の指示）。カンプの2項目とも
NotoSansCJKjp-Bold（PSD #483 / #479）だったので、例外ではなく箇条書きの意匠。
★**色は紺ではない。** 最暗画素 #313131・濃い画素の最頻 #333333 で、
すぐ下の本文（#333333）と同じ。前に「紺の太字」と書いたのは目視の記憶違い。
色は本文から継ぐ（ここでは指定しない）。
★太字は ul だけ。番号リスト（ol）はカンプに無い。2026-08-18 発注者の指示
「番号リストもデザインしてください。紫の背景で、文字カラーは白、①②みたいな」で、
番号を**紫の丸に白い数字**にした（大きさは✓の場所に合わせて PC24 / SP18）。太さは既定のまま。 */
.article-list { padding-left: 27.5px; }
@media (min-width: 1024px) { .article-list { padding-left: 50px; } }
.article-list li { position: relative; }
.article-list--ul li { font-weight: 700; }
.article-list li + li { margin-top: 9.5px; }
@media (min-width: 1024px) { .article-list li + li { margin-top: 11px; } }
.article-list--ul li::before {
content: ''; position: absolute; top: 6px; /* 行送り24pxの1行目に合わせる（2026-08-19） */
left: -27.5px;
width: 16px; height: 12px;
background: #E689B3;
-webkit-mask: url("/assets/img/icon-check.svg") no-repeat center / contain;
mask: url("/assets/img/icon-check.svg") no-repeat center / contain;
}
@media (min-width: 1024px) {
.article-list--ul li::before { top: 5px; left: -50px; width: 24px; height: 18px; }
}
/* 番号リスト: ①②…のように紫の丸に白い数字（CSSカウンタ。10以上も丸に収まる字の大きさ） */
.article-list--ol { list-style: none; counter-reset: art-ol; }
.article-list--ol li { counter-increment: art-ol; }
.article-list--ol li::before {
content: counter(art-ol);
position: absolute; top: 2px; left: -27.5px; /* 行送り24pxの1行目の中心に（2026-08-19） */
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: var(--c-primary); color: var(--c-white);
font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0;
font-feature-settings: "palt" 0, "tnum" 1;
}
@media (min-width: 1024px) {
.article-list--ol li::before { top: 1px; left: -50px; width: 24px; height: 24px; font-size: 13px; }
}
/* ---------------------------------------------------------------- 語句と説明のリスト
カンプ実測（固定記事ページ PC y5132..5340 の3行 / SP y8291..。2026-08-07）。
★上の .article-list とは**別の部品**。同じページにリストが2つの形で描かれている。
こちらを作るために .article-list を触らないこと（あちらは y1704 の素のほうに合っている）。
| | PC | SP（÷2で見た値） |
|------------|-----------------------------|------------------------|
| 組み | 横に2枚（左230・溝5・右615）| 縦に積む（全幅345） |
| 桃色の面 | `#FFF4FA` | 同じ・最低40 |
| 灰の面 | `#F2F2F4` | 同じ |
| 行の最低高 | 60 | 桃40 ／ 灰は中身なり |
| 行の間 | 5 | 項目間10・組の中2.5 |
| 角丸 | **なし**（y5132 で x200 から面）| 同じ |
| ○ | 20x20・線3・`#E689B3`・塗りなし | 15x15・線1.5 |
| 語句 | 16px Bold・Tracking 100 | 13px・行送り15 |
| 説明 | 16 / 26 | 13 / 18 |
★左右の面は**同じ高さ**（カンプの走査線が2列とも同じ境界を返す）。
面を伸ばして、中身を面の中で縦中央にする。面ごとに高さを持たせない。
★説明が2行になると行が80になり、そのとき語句も縦中央へ動く
（カンプ実測: 2行目の語句のインク上端 5229 ＝ 5197 + (80-26)/2 + 5）。
padding 14 ＋ 最低高60 ＋ 中央そろえで、この数がそのまま出る。
★説明の左右の余白は**対称ではない**（左25・右18）。
カンプの左のインクは460（面435から25）、いちばん長い行の右のインクは1031
（面1049から18）で、使える幅は 572 になる。
左右25（幅565）にすると2行目の「を」が入りきらず、カンプと**折り返し位置が1字ずれた**
（2026-08-07 に並べて確認）。7pxの差だが、カンプと重ねると1行の切れ目が違って見える。 */
.blk-terms {
display: grid;
gap: 10px; /* SP: 項目と項目 */
margin-block: 1.8em 1.6em;
padding: 0;
}
@media (min-width: 1024px) { .blk-terms { gap: 5px; } }
.blk-terms__row { display: grid; gap: 2.5px; } /* SP: 桃色と灰のあいだ */
@media (min-width: 1024px) {
.blk-terms__row {
grid-template-columns: 230px minmax(0, 1fr);
gap: 5px;
min-height: 60px;
}
}
.blk-terms__term,
.blk-terms__desc {
display: flex;
align-items: center; /* ★面の中で縦中央。行が伸びても字は真ん中に残る */
margin: 0;
color: var(--c-text);
}
.blk-terms__term {
gap: 10px;
min-height: 40px;
padding: 8px 15px;
background: #FFF4FA;
font-size: 14px;
font-weight: 700;
line-height: 16px;
letter-spacing: var(--ls-wide); /* Tracking 100 */
}
@media (min-width: 1024px) {
.blk-terms__term { gap: 7px; min-height: 0; padding: 14px 20px; font-size: 16px; line-height: 26px; }
}
/* ★PCの語句の折り返しは文節で（2026-08-18）。230px の面で「仕上がりは技術に左右される」が
「…技術に左／右される」と割れていた。カンプは「仕上がりは／技術に左右される」で手折り。
auto-phrase（Chrome/Edge 119+）なら同じ位置で折れる。未対応のブラウザは従来どおり字で折れる。
SPは345幅に収まるので折れない（SPカンプも1行）。 */
@media (min-width: 1024px) { .blk-terms__term { word-break: auto-phrase; } }
/* ○ は塗りのない輪。✓（.article-list の印）と同じピンクだが形が違う */
.blk-terms__term::before {
content: '';
flex: none;
width: 15px; height: 15px;
border: 1.5px solid #E689B3;
border-radius: 50%;
}
@media (min-width: 1024px) {
.blk-terms__term::before { width: 20px; height: 20px; border-width: 3px; }
}
/* × 版（デメリット・注意点。2026-08-18）。固定記事ページ y5730..6090 の実測:
語句の面 #F3F4F9（○版の桃色 #FFF4FA の代わり）／ 印は青 #6B85C2 の×（PC 約20x18・線3 ／ SP はその3/4）。
形・寸法・説明の面（#F2F2F4）は○版と同じ。 */
.blk-terms--x .blk-terms__term { background: #F3F4F9; }
.blk-terms--x .blk-terms__term::before {
border: 0; border-radius: 0;
width: 15px; height: 15px;
background:
linear-gradient(45deg, transparent calc(50% - 1.1px), #6B85C2 calc(50% - 1.1px), #6B85C2 calc(50% + 1.1px), transparent calc(50% + 1.1px)),
linear-gradient(-45deg, transparent calc(50% - 1.1px), #6B85C2 calc(50% - 1.1px), #6B85C2 calc(50% + 1.1px), transparent calc(50% + 1.1px));
}
@media (min-width: 1024px) {
.blk-terms--x .blk-terms__term::before {
width: 20px; height: 20px;
background:
linear-gradient(45deg, transparent calc(50% - 1.5px), #6B85C2 calc(50% - 1.5px), #6B85C2 calc(50% + 1.5px), transparent calc(50% + 1.5px)),
linear-gradient(-45deg, transparent calc(50% - 1.5px), #6B85C2 calc(50% - 1.5px), #6B85C2 calc(50% + 1.5px), transparent calc(50% + 1.5px));
}
}
.blk-terms__desc {
padding: 11.5px 15px;
background: #F2F2F4;
font-size: 14px;
line-height: 19px;
letter-spacing: .05em;
font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) {
.blk-terms__desc { padding: 14px 18px 14px 25px; font-size: 16px; line-height: 26px; }
}
/* ★説明の中身は span 1つ（.blk-terms__descbody）にまとめてある。
この面は display:flex（縦中央そろえ）なので、 などを直に置くと
**要素ごとに別のフレックス項目**になり、横に並んで段組みのように割れる
（2026-08-31 に実際に崩れた）。span を外さないこと（app/render/blocks.php）。
min-width:0 は、切れない長い語（URL等）が入ったときに面からはみ出させないため。 */
.blk-terms__descbody { min-width: 0; }
.article-quote {
margin-block: 0 1.6em;
padding: 14px 18px;
border-left: 4px solid var(--c-accent);
background: #FCFAFD;
font-size: 14px;
}
@media (min-width: 1024px) { .article-quote { font-size: 16px; } }
.article-quote p { margin: 0; }
.article-quote cite { display: block; margin-top: 6px; font-size: 13px; color: var(--c-text); font-style: normal; }
/* ---------------------------------------------------------------- 概要の枠（項目：内容）
固定記事ページの「調査概要」の箱（2026-08-18）。カンプ実測は app/render/blocks.php の
render_block_summary_box() の注記（PC 600x180・枠3px #E5E3F1・16/26・余白 26/30/25 ／
SP 345x133.5・枠1.5px・13/18・余白 14/15/12・項目と内容の2列）。
★PCも同じ2列グリッド。項目の列は max-content（＝いちばん長い項目）に揃うので、
「：」が全行で縦に揃う（カンプは全角スペースで揃えていた）。 */
.blk-summary {
margin: 0 0 1.6em;
padding: 14px 15px 12px;
border: 1.5px solid #E5E3F1;
background: var(--c-white);
font-size: 14px;
line-height: 19px;
letter-spacing: .05em; /* Tracking 50 */
}
.blk-summary__row {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
column-gap: 10px;
}
.blk-summary__label {
display: flex; justify-content: space-between; gap: 6px;
font-weight: 700;
color: var(--c-text);
}
.blk-summary__label::after { content: '：'; }
.blk-summary__value { margin: 0; }
@media (min-width: 1024px) {
.blk-summary {
/* ★カンプ実測は 600px だったが、本文カラム（850px）いっぱいに広げた
（2026-08-28 発注者「ワイズ広げようかな」）。
600px のままだと内容が2行に折り返し、項目の列が空いたまま縦に伸びていた。
表・注意書き・STEPはどれも850pxなので、この箱だけ狭いと差し込まれて見える。
★狭く戻すなら max-width: 600px を復活させること。 */
padding: 26px 30px 25px;
border-width: 3px;
font-size: 16px;
line-height: 26px;
}
.blk-summary__row { column-gap: 12px; }
}
/* ---------------------------------------------------------------- 見出し6デザイン
★2026-08-07 に6つとも実測して入れ直した。それまでは決定記録§3.1の
「言葉での説明」だけから組んでいて、罫の太さ・色・箱の高さ・文字の左位置が
どれもカンプと違っていた（決定記録§4-5が「実装するときに測る」と
書いたまま測っていなかった）。
測り方: PC/デザイン/Browdia_投稿記事ページ.jpg（y2185..2770）と
SP/デザイン/Browdia_投稿記事ページ_sp.jpg（y3193..3871）の走査線＋
PC/PSD・SP/PSD の文字レイヤー。SPは750px幅＝CSS375なので÷2。
★紫の罫・バーは6つとも同じ色だった。走査の最頻値で #CEAFD9
（＝H2-01の帯のグラデの左端と同じ色）。実装が使っていた #C0A0D8 /
var(--c-primary)（#8D5CA6）はどちらもカンプに無い色。
★H2-03の右側の罫は #E4E3F1（走査で100%一致）。サイトの標準の枠線と同じ。
実測値（PC ／ SP。単位はCSS px）:
| | PC | SP |
|---|---|---|
| H2の字 | 24 / Tracking50（.05em） | 17 |
| H3の字 | 20 / Tracking50 | 15 |
| H2-01 | 帯60・文字は左から28.5 | 帯40・左14 |
| H2-02 | 上下とも罫3px・罫の間70・文字は左から19.5 | 罫2px・間46・左8.25 |
| H2-03 | 罫3px（左149が紫・残りが#E4E3F1）・文字の下18・左19.5 | 罫2px（左100が紫）・左8.25 |
| H3-01 | 面60（#F5F0F7・x215..1049）・左バー15・文字は面の左から19.5 | 面40・バー7.5・14.25 |
| H3-02 | 罫3px・幅850・文字の下11 | 罫2px・幅345 |
| H3-03 | 左バー4・高さ60・文字はバーの右から16.5 | バー3・高さ34・14.75 |
★箱の高さは min-height ＋ flex の中央寄せで作る。padding で作ると、
見出しが2行になったときにカンプの高さを割って詰まる。
★ブロック同士の上下の間（margin）はここでは変えていない。カンプのこの部分は
見出しだけを並べた見本帳で、見出しの直後にまた見出しが来る。実際の記事の
並び（見出し→本文）ではないので、この region からは間を決められない。 */
/* ★字の大きさは 2026-08-10 に発注者の指示で**カンプから外した**。
カンプは H2 24 / H3 20（SP 17 / 15）で、差が4pxしかなく、
しかも箱の高さが両方60なので「H3のほうが小さい」と読めなかった。
→ H3 を 20 → 18（SP 15 → 13.5）に下げて差を6pxにした。**H2はカンプのまま。**
★アンケートの見出し（.blk-survey__title / .blk-rank__title）は
カンプで H3-01 とまったく同じ意匠なので、**一緒に下げる**。
片方だけ変えると、同じ見た目の帯が2つの大きさで並ぶ。
★上下の余白は同じにした（2026-08-10 発注者の指示）。前は上が下の2倍。
em なので見出しの字の大きさに追随する。下側は次のブロックの上マージン
（1.8em ＝ 28.8px）と相殺されるが、この値のほうが大きいので上下そろう。 */
.art-body .hd { line-height: 1.5; letter-spacing: .05em; color: var(--c-navy); scroll-margin-top: 90px; }
.art-body h2.hd { font-size: 19px; font-weight: 700; margin-block: 1.8em; } /* SP 17→19（2026-08-19。本文15pxに合わせた） */
.art-body h3.hd { font-size: 16px; font-weight: 700; margin-block: 1.8em; } /* SP 13.5→16（同上） */
@media (min-width: 1024px) {
.art-body h2.hd { font-size: 24px; }
.art-body h3.hd { font-size: 18px; }
}
/* H2-01 … 紫グラデの帯。.c-detail-title と同じもの
★字は帯の**まん中**。上下に padding を振り分けないこと（2026-08-10 発注者の指示）。
前は `padding: 12px 28.5px 0` と書いてあり、align-items: center と足し合わさって
字が帯の中心より5px下に落ちていた（実測 上17.6 / 下7.4）。
カンプ（PC/デザイン/Browdia_投稿記事ページ.jpg・帯 y2185..2244）のインクは
y2205..2225 ＝ 上20 / 下19 でまん中。左右の 28.5 は動かさない。 */
/* ★上下 padding は2行に折り返したときのため（2026-08-20 発注者「見出しが2行になったとき、窮屈に見える」）。
1行のときは min-height の中央寄せが効くので見た目は変わらない。行間も 1.2→1.4 に */
.art-body .hd-2-1 {
display: flex; align-items: center; min-height: 40px; line-height: 1.4;
padding: 8px 14px; border-radius: 5px;
background: linear-gradient(90deg, #CEAFD9 0%, #DCC0D9 100%);
color: var(--c-white);
}
@media (min-width: 1024px) { .art-body .hd-2-1 { min-height: 60px; padding: 10px 28.5px; } }
/* H2-02 … 上下に同じ太さ・同じ色の罫。文字は罫の間の中央 */
.art-body .hd-2-2 {
display: flex; align-items: center;
min-height: 50px; /* 罫2 + 間46 + 罫2 */
padding-top: 8px; padding-bottom: 8px; /* 2行に折り返したとき罫にくっつかないように（2026-08-20） */
padding-left: 8.25px;
border-top: 2px solid #CEAFD9;
border-bottom: 2px solid #CEAFD9;
}
@media (min-width: 1024px) {
.art-body .hd-2-2 {
min-height: 76px; /* 罫3 + 間70 + 罫3 */
padding-left: 19.5px;
border-top-width: 3px; border-bottom-width: 3px;
}
}
/* H2-03 … 下だけ。1本の罫の左側だけが紫で、そこから先は薄いグレー。
★border では2色にできないので、罫そのものを背景で描く */
.art-body .hd-2-3 {
padding-bottom: 12px; padding-left: 8.25px;
background-image: linear-gradient(90deg, #CEAFD9 0 100px, #E4E3F1 100px);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 2px;
}
@media (min-width: 1024px) {
.art-body .hd-2-3 {
padding-bottom: 18px; padding-left: 19.5px;
background-image: linear-gradient(90deg, #CEAFD9 0 149px, #E4E3F1 149px);
background-size: 100% 3px;
}
}
/* H3-01 … 薄紫の面。左のバーは面の外側（面は x215 から。バーは x200..214） */
.art-body .hd-3-1 {
display: flex; align-items: center;
min-height: 40px; padding-left: 14.25px;
border-left: 7.5px solid #CEAFD9;
background: #F5F0F7;
}
@media (min-width: 1024px) {
.art-body .hd-3-1 { min-height: 60px; padding-left: 19.5px; border-left-width: 15px; }
}
/* H3-02 … 下に罫だけ。★左の字下げはこれだけ 20.5（他は19.5）。
PSDの原点が H2-02/03 は x219.5、H3-02 は x220.5 で1px違う。丸めずにそのまま入れる */
.art-body .hd-3-2 { padding-bottom: 8px; padding-left: 9.25px; border-bottom: 2px solid #CEAFD9; }
@media (min-width: 1024px) { .art-body .hd-3-2 { padding-bottom: 11px; padding-left: 20.5px; border-bottom-width: 3px; } }
/* H3-03 … 左のバーだけ（面なし）。バーの高さもカンプに合わせる */
.art-body .hd-3-3 {
display: flex; align-items: center;
min-height: 34px; padding-left: 14.75px;
border-left: 3px solid #CEAFD9;
}
@media (min-width: 1024px) {
.art-body .hd-3-3 { min-height: 60px; padding-left: 16.5px; border-left-width: 4px; }
}
/* ---------------------------------------------------------------- 目次
カンプ実測（投稿記事ページ PC y1837..2112 / SP y2749..3152。2026-08-07）。
| | PC | SP |
|------------|----------------------|-----------|
| 枠 | 500幅（左寄せ）・2px --c-accent | 345幅・1px |
| 内側の余白 | 上25 / 左右28 / 下21 | 上15 / 左右15 / 下13 |
| 「目次」 | 22 / 紺・太字・左寄せ | 15 |
| 「閉じる」 | 61x24・地#F7F0F7・字14 | 60x17・字12 |
| 番号 | 18 / --c-accent | 14 |
| H2の行 | 16 / 紺・太字 | 14 |
| H3の行 | 14 / 本文色 | 13 |
| 行送り | 26 | 21 |
| 行の間 | 8（H3どうしだけ0） | 5 |
★見出しは左寄せ。中央寄せではなかった（前の実装は中央）。
★枠の色はカンプの走査で #C16CA5 ＝ --c-accent。前の #E4DDEC はカンプに無い。
★地は白。前の #FBF9FC はカンプに無い。 */
/* ★角は丸めない（2026-08-10 発注者の指示）。**カンプもそうだった。**
走査すると左上は完全な直角（x200 の縦線と y1837 の横線がそのまま交わる）。
前の border-radius: 8px はカンプに無い値だった。
★線の太さもカンプは PC 3px（x200..202 / y1837..1839 が枠色）／
SP 3カンプpx ＝ **1.5 CSS px**（x30..32 / y2749..2751）。前は 2px / 1px だった。 */
.toc {
margin-block: 0 1.6em;
padding: 15px;
border: 1.5px solid var(--c-accent);
background: var(--c-white);
}
@media (min-width: 1024px) { .toc { width: 500px; padding: 25px 28px 21px; border-width: 3px; } }
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
@media (min-width: 1024px) { .toc__head { margin-bottom: 11px; } }
.toc__title {
margin: 0;
font-size: 15px; font-weight: 700; line-height: 21px;
letter-spacing: .05em;
color: var(--c-navy);
}
@media (min-width: 1024px) { .toc__title { font-size: 22px; line-height: 26px; } }
/* 「閉じる／開く」。article.js が足す（JSが無ければ目次は開いたまま） */
.toc__toggle {
flex: none;
min-width: 60px; height: 17px;
padding: 0 8px;
border: 0;
border-radius: var(--r-pill);
background: #F7F0F7;
color: var(--c-accent);
font-size: 13px;
letter-spacing: .05em;
cursor: pointer;
}
@media (min-width: 1024px) { .toc__toggle { min-width: 61px; height: 24px; padding: 0 8px; font-size: 14px; } }
.toc__toggle:hover { opacity: .8; }
.toc.is-closed .toc__list { display: none; }
.toc__list { list-style: none; margin: 0; padding: 0; }
.toc__item { margin-top: 5px; }
@media (min-width: 1024px) { .toc__item { margin-top: 8px; } }
/* H3どうしは詰めて並ぶ（カンプ実測: 行送りぶんだけ） */
.toc__item--sub + .toc__item--sub { margin-top: 0; }
.toc__item a {
display: flex; gap: 8px; align-items: baseline;
color: var(--c-navy); text-decoration: none;
font-size: 15px; font-weight: 700; line-height: 23px;
letter-spacing: .05em;
}
@media (min-width: 1024px) { .toc__item a { gap: 10px; font-size: 16px; line-height: 26px; } }
.toc__item a:hover .toc__text { text-decoration: underline; }
/* ★行送りは1にする。行box（26px）を継ぐと字が大きいぶんベースライン揃えで
行が3px伸び、カンプの行ピッチ34を割る（実測37になった）。 */
.toc__no { flex: 0 0 auto; line-height: 1; font-family: var(--font-en); font-weight: 600; font-size: 15px; color: var(--c-accent); }
@media (min-width: 1024px) { .toc__no { font-size: 18px; } }
.toc__item--sub { padding-left: 22px; }
@media (min-width: 1024px) { .toc__item--sub { padding-left: 26px; } }
.toc__item--sub a { font-size: 14px; font-weight: 400; color: var(--c-text); }
@media (min-width: 1024px) { .toc__item--sub a { font-size: 14px; } }
/* ---------------------------------------------------------- こんな方にオススメ
★2026-08-07 に実測して入れ直した（それまでは§3.2の言葉の説明だけで組んでいた）。
PCカンプ実測（PC/デザイン/Browdia_投稿記事ページ.jpg・走査線＋PSD）:
枠 x200..749（**550**）／ y2850..3035（186）／ 枠線 2px #61C1BD
★本文カラム850いっぱいではない。550で止まる
ラベル x220..419（200 x 40）／ y2830..2869（枠の上端を20またぐ）
文字18px・Tracking100・白／ 文字の左は枠の左から37
✓ x231から・線の太さ4px・#61C1BD
本文 16px・Tracking100／ 文字の左は枠の左から70／ 行ピッチ43
SPカンプ実測（÷2）:
枠 x30..719（**345＝全幅**）／ y3956..4285（165）／ 枠線1.5px
★PCだけ550に狭まる。SPは全幅。
★以前の値（枠850・枠線1px・#3EB6A9・ラベル13px・本文14px）はカンプに無い。 */
.blk-recommend {
position: relative;
margin-block: 1.8em 1.6em;
padding: 30px 18px 22px;
border: 1.5px solid #61C1BD;
border-radius: 8px;
}
@media (min-width: 1024px) {
/* 上43 は「枠の内側の上端 -> 1行目の行箱の上」。ラベル（高さ40・20はみ出す）が
ちょうど収まる。下24 は最終行の行箱の下 -> 枠の内側の下端。
左28 は 枠線2 と足して30。本文はさらに li の padding-left 40 で x270 に来る */
.blk-recommend { max-width: 550px; padding: 43px 30px 24px 28px; border-width: 2px; }
}
.blk-recommend__label {
position: absolute;
top: -16px; left: 16px;
display: flex; align-items: center;
min-height: 32px;
margin: 0;
padding: 0 14px;
border-radius: 5px;
background: #61C1BD;
color: var(--c-white);
font-size: 15px;
font-weight: 700;
letter-spacing: var(--ls-wide);
}
@media (min-width: 1024px) {
/* ★left は枠線の内側から測られる。枠の左200 -> ラベルの左220 にしたいので
20 ではなく 18（枠線2ぶんを引く）。高さ40・文字18 */
.blk-recommend__label { top: -20px; left: 18px; min-height: 40px; padding: 0 17px; font-size: 18px; }
}
.blk-recommend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.blk-recommend__list li {
position: relative;
padding-left: 32px;
font-size: 15px;
line-height: 1.7;
letter-spacing: var(--ls-wide);
}
@media (min-width: 1024px) {
/* 行ピッチ43 ＝ 行箱（16 x 1.7 ≒ 27）＋ gap16。文字の左は枠の左から70
＝ padding 30 ＋ ここの 40 */
.blk-recommend__list { gap: 16px; }
.blk-recommend__list li { padding-left: 40px; font-size: 16px; }
}
/* ✓ はCSSで描く（アイコン素材を増やさない）。線の太さはカンプ実測4px */
.blk-recommend__list li::before {
content: '';
position: absolute; left: 2px; top: .35em;
width: 16px; height: 9px;
border-left: 3px solid #61C1BD;
border-bottom: 3px solid #61C1BD;
transform: rotate(-45deg);
}
@media (min-width: 1024px) {
.blk-recommend__list li::before {
left: 1px; width: 20px; height: 11px;
border-left-width: 4px; border-bottom-width: 4px;
}
}
/* ---------------------------------------------------------------- 注意事項
カンプ実測（投稿記事ページ PC y4404..4589 / SP y6626..6947。2026-08-07）。
| | PC | SP |
|------------|-----------------|-----------|
| 面 | 850x186・#F7F0F7・角丸8 | 345 |
| 内側の余白 | 上31 / 左右32 / 下23 | 上17 / 左右16 / 下16 |
| 見出し | ⚠アイコン32x29 ＋ 20px / Tracking100 / 紺 | 15px |
| 本文 | 16 / 行送り26 | 13 / 18 |
| ■ の色 | --c-accent | 同じ |
★見出しは中央寄せ。文字色は紺（--c-navy）で、紫ではなかった。
★項目どうしの間はカンプでは無し（行送りだけ）だったが、カンプの項目は2行に折り返す長文で、
行送りが目の余白になっていた。1行の短い項目（2026-08-20 スクールガイドの「必ず確認したい4点」）だと
びっしり詰まって見えるため、項目間 7px・SPの見出し下 12px を足した（2026-08-20 発注者「スマホの表示が崩れている」）。
★⚠アイコンは見出しの帯と同じグラデ（#CEAFD9→#DCC0D9）で塗られている。
形は仮（書き出しデータに無い）。支給されたら icon-notice.svg を差し替える。 */
.blk-notice {
margin-block: 1.8em 1.6em;
padding: 17px 16px 13px;
border-radius: 8px;
background: #F7F0F7;
}
@media (min-width: 1024px) { .blk-notice { padding: 31px 32px 23px; } }
/* 見出し下は 5→12→18px（2026-08-20 発注者「窮屈に見えるので、見出しの下に余白を」） */
.blk-notice__title {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin: 0 0 18px;
font-size: 16px; font-weight: 700; line-height: 22px;
letter-spacing: var(--ls-wide);
color: var(--c-navy);
}
@media (min-width: 1024px) { .blk-notice__title { gap: 15px; margin-bottom: 24px; font-size: 20px; line-height: 28px; } }
.blk-notice__title::before {
content: ''; flex: none;
width: 24px; height: 22px;
background: url("/assets/img/icon-notice.svg") no-repeat center / contain;
}
@media (min-width: 1024px) { .blk-notice__title::before { width: 32px; height: 29px; } }
.blk-notice__list { list-style: none; margin: 0; padding: 0; }
.blk-notice__list li + li { margin-top: 7px; }
.blk-notice__list li {
position: relative;
padding-left: 20px;
font-size: 14px; line-height: 19px;
letter-spacing: .05em;
font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) { .blk-notice__list li { padding-left: 25px; font-size: 16px; line-height: 26px; } }
/* ★top は1行目の高さに固定する。50% にすると、2行に折り返した項目で
■ だけが真ん中まで落ちる（SPは3項目とも2行になる）。 */
.blk-notice__list li::before {
content: ''; position: absolute; left: 0; top: 5px;
width: 9px; height: 9px;
background: var(--c-accent);
}
@media (min-width: 1024px) { .blk-notice__list li::before { top: 8px; width: 11px; height: 11px; } }
/* ---------------------------------------------------------------- STEP
カンプ実測（投稿記事ページ PC y4667..4810 / SP y7005..7291。2026-08-07）。
| | PC | SP |
|--------------|-------------------------|-----------|
| 丸 | 90径 | 60径 |
| 丸の塗り | 90deg #CEAFD9 → #DCC0D9（見出しの帯と同じ） | 同じ |
| 丸の文字 | STEP 18 / 番号 24・Tracking100・白 | 12 / 16 |
| 丸→カード | 50 | 20.5 |
| カード | 710幅・白・1px #E4E3F1・角丸8 | 265幅 |
| 三角 | 19x16（左向き・見出しの高さ） | 15x15 |
| カードの余白 | 28 | 15 |
| 見出し | 20 / 行送り28 | 15 / 20 |
| 本文 | 16 / 行送り26 | 13 / 18 |
| 段の間 | 31 | 15 |
★丸の塗りは .c-detail-title と同じグラデ。前の実装の 135deg #C9A5DE→#B98FD0 は
カンプに無い色だった。
★丸と丸の間は縦の点線でつながる。最後の段には出さない。 */
.blk-steps {
--step-size: 60px; /* 丸の直径 */
--step-gap: 15px; /* 段の間 */
list-style: none; margin-block: 1.8em 1.6em; padding: 0;
display: grid; gap: var(--step-gap);
}
@media (min-width: 1024px) { .blk-steps { --step-size: 90px; --step-gap: 31px; } }
.blk-step {
position: relative;
display: grid; grid-template-columns: var(--step-size) minmax(0, 1fr);
gap: 20.5px;
align-items: start;
}
@media (min-width: 1024px) { .blk-step { gap: 50px; } }
/* 丸と丸をつなぐ縦の点線。★最後の段には出さない（行き先が無い） */
.blk-step:not(:last-child)::after {
content: '';
position: absolute;
left: calc(var(--step-size) / 2);
top: var(--step-size);
bottom: calc(-1 * var(--step-gap));
width: 3px;
transform: translateX(-50%);
background: repeating-linear-gradient(to bottom, #CEAFD9 0 3px, transparent 3px 11px);
}
@media (min-width: 1024px) {
.blk-step:not(:last-child)::after {
width: 4px;
background: repeating-linear-gradient(to bottom, #CEAFD9 0 4px, transparent 4px 16px);
}
}
.blk-step__no {
display: grid;
place-content: center;
width: var(--step-size); height: var(--step-size);
border-radius: 50%;
background: linear-gradient(90deg, #CEAFD9 0%, #DCC0D9 100%);
color: var(--c-white);
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1.15;
letter-spacing: var(--ls-wide);
text-align: center;
}
@media (min-width: 1024px) { .blk-step__no { font-size: 24px; } }
.blk-step__no span { display: block; font-size: .75em; }
.blk-step__body {
position: relative;
padding: 12px 15px;
border: 1px solid #E4E3F1;
border-radius: 8px;
background: var(--c-white);
min-width: 0;
}
@media (min-width: 1024px) { .blk-step__body { padding: 28px; } }
/* 左向きの三角。カンプでは見出しの行の高さに来る。
★三角にもカードと同じ1pxの枠線が回っている（カンプを8倍に拡大して確認）。
白1枚だと白地に白で消えるので、枠色の三角を1px大きく後ろに敷く。 */
.blk-step__body::before,
.blk-step__body::after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent var(--c-white) transparent transparent;
}
.blk-step__body::before {
left: -17px; top: 13px;
border-width: 8.5px 17px 8.5px 0;
border-right-color: #E4E3F1;
}
.blk-step__body::after {
left: -15px; top: 14px;
border-width: 7.5px 15px 7.5px 0;
}
@media (min-width: 1024px) {
.blk-step__body::before { left: -21px; top: 33px; border-width: 9px 21px 9px 0; }
.blk-step__body::after { left: -19px; top: 34px; border-width: 8px 19px 8px 0; }
}
.blk-step__title {
margin: 0; font-size: 16px; font-weight: 700; line-height: 21px;
letter-spacing: var(--ls-wide);
color: var(--c-navy);
}
@media (min-width: 1024px) { .blk-step__title { font-size: 20px; line-height: 28px; } }
/* 見出しの字面の下端から本文の字面の上端まで、カンプは PC20 / SP13。
行ボックスの差ぶんを引いて margin-top を決めてある。 */
.blk-step__text {
margin-top: 9px;
font-size: 14px; line-height: 19px;
letter-spacing: .05em;
font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) { .blk-step__text { margin-top: 12px; font-size: 16px; line-height: 26px; } }
/* STEPの中の箇条書き（2026-08-20）。「・」の行はレンダラーがこのリストに変換する。
折り返しても点の右で揃う（ぶら下げ）。点はアクセントの丸 */
.blk-step__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.blk-step__list li { position: relative; padding-left: 14px; line-height: 21px; }
.blk-step__list li::before {
content: ''; position: absolute; left: 0; top: 8px;
width: 6px; height: 6px; border-radius: 50%;
background: var(--c-accent);
}
@media (min-width: 1024px) {
.blk-step__list { gap: 8px; }
.blk-step__list li { padding-left: 17px; line-height: 26px; }
.blk-step__list li::before { top: 10px; width: 7px; height: 7px; }
}
.blk-step__text p { margin: 0; }
/* ---------------------------------------------------------- 症例カルーセル
カンプ実測（PC 投稿記事 y3096..3645 / SP 投稿記事_sp y4346..5065）。
★SPカンプは750px＝CSS375pxなので、下の「SP」欄はカンプ実測値の1/2。
突き合わせるときは --w=375 --dsf=2 で撮る（÷2の暗算をしない）。
| | SPカンプ | SP CSS | PC（カンプ＝CSS） |
|---------------|----------|--------|------------------|
| 本文カラム | 690 | 345 | 850 |
| カード幅 | 630 | 315 | 600 |
| カード同士の間 | 30 | 15 | 30 |
| 左右の見切れ | 30 | 15 | 125 |
| 内側の余白 | 30 | 15 | 30 |
| 見出し | 34 | 17 | 24 |
| 写真 | 260x160 | 130x80 | 245x150 |
| 写真の間 | 50 | 25 | 50 |
| キャプション帯 | 60 | 30 | 40 |
| 三角 | 20x50 | 10x25 | 20x50 |
| 表ラベル列 | 220 | 110 | 150 |
| 表の1行 | 80 | 40 | 60 |
| 表の文字 | 26 | 13 | 16 |
| 矢印の丸 | 46 | 23 | 36 |
色（rect の最頻値）: 地 #F7F0F7 ／ 表ラベル列 #E4E3F1 ／ 表の値 #FFFFFF
三角 #D0B1DA ／ 矢印 --grad-btn（左#C583B3・右#BB7EB9を実測）
★カードは「中央に1枚、左右が見切れる」。カンプは左右に前後のカードが
125（PC）／15（SP）ぶん覗いている。track の padding-inline がその値。
★矢印はカードの左右の辺の上に重なる（丸の中心＝カードの辺）。
カンプでは縦はカードのちょうど中央（PC y3370.5 = (3096+3645)/2）。 */
.blk-case {
position: relative;
margin-block: 1.8em 1.6em;
/* ★見切れ幅は「カラム幅 − カード幅」の半分。850カラムなら125（＝カンプ）。
1024〜1239px ではカラムが850より狭くなるので、固定の125だとカードが
右にはみ出して矢印がカードの真ん中に乗る。max() で下限だけ決める。 */
--case-w: 315px;
--case-arrow: 23px;
--case-peek: max(15px, calc((100% - var(--case-w)) / 2));
}
@media (min-width: 1024px) { .blk-case { --case-w: 600px; --case-arrow: 36px; } }
.blk-case__view { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
/* ★右の余りは padding ではなく空の flex アイテムで作ること。理由は2つ:
・Chrome はスクロール箱の中の flex コンテナの「末尾の padding」を
scrollWidth に数えない。padding-inline で書くと最後のカードが
中央まで来られない（2026-08-07 実測: 中央より105px左で止まった）
・flex-basis に % を書くと、幅が中身で決まる flex コンテナでは
解決先が定まらず値が化ける（同日、63pxという根拠の無い幅になった）
なので固定値。カラムが850のときの見切れ幅（PC125 / SP15）をそのまま置く。
カラムがそれより狭いときは余りが多めになるが、スナップ先はカードの中央なので
行き過ぎて止まることはない。 */
/* ★カード同士の間は **カンプの30（SP15）から広げてある**（2026-08-10 発注者の指示）。
見切れているカードとの境目が分かりにくかったため、PC60 / SP30（倍）にした。
カードの幅・内側の余白・写真の大きさはカンプのまま（実測で1pxも違わない）。 */
.blk-case__track { display: flex; gap: 30px; padding-inline-start: var(--case-peek); }
.blk-case__track::after { content: ''; flex: 0 0 15px; }
@media (min-width: 1024px) {
.blk-case__track { gap: 60px; }
.blk-case__track::after { flex-basis: 125px; }
}
.blk-case__card {
flex: 0 0 var(--case-w);
scroll-snap-align: center;
padding: 15px;
border-radius: 4px;
background: #F7F0F7;
}
@media (min-width: 1024px) { .blk-case__card { padding: 30px; } }
.blk-case__title {
margin: 0 0 6px;
font-size: 17px; font-weight: 700; line-height: 1.2;
letter-spacing: var(--ls-narrow); /* Tracking 75 */
color: var(--c-navy);
}
@media (min-width: 1024px) { .blk-case__title { margin-bottom: 11px; font-size: 24px; } }
/* 写真2枚。★三角はカンプに在るので入れる（前→後の向き）。
写真が1枚しか無いときは .is-pair が付かないので出ない。 */
.blk-case__media {
position: relative;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px;
}
@media (min-width: 1024px) { .blk-case__media { gap: 50px; } }
.blk-case__media.is-pair::after {
content: '';
position: absolute; left: 50%; top: 50%;
width: 0; height: 0;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 12.5px 0 12.5px 10px;
border-color: transparent transparent transparent #D0B1DA;
}
@media (min-width: 1024px) {
.blk-case__media.is-pair::after { border-width: 25px 0 25px 20px; }
}
.blk-case__shot { margin: 0; }
.blk-case__shot img {
display: block; width: 100%; aspect-ratio: 49 / 30; object-fit: cover;
background: var(--c-bg-alt);
}
.blk-case__shot figcaption {
display: flex; align-items: center; justify-content: center;
min-height: 30px;
background: var(--c-white);
font-size: 13px; letter-spacing: var(--ls-narrow);
color: var(--c-navy);
}
@media (min-width: 1024px) {
.blk-case__shot figcaption { min-height: 40px; font-size: 16px; }
}
/* 表。★行数は固定しない（施術によって項目が違う）。min-height で受ける。
★罫の色が列で違う: ラベル列は白、値の列は #E4E3F1。最後の行には罫が無い。
★ラベル列の白い罫だけ **カンプの1pxから太くしてある**（2026-08-10「白の区切りが
見えてません。マージンいれますか？」）。カンプ実測（PC/デザイン/Browdia_投稿記事ページ.jpg
走査線 y3436）: ラベル列 x355..504 が白1px ／ 値の列 x505..894 が #E3E3ED 1px ／ 行60。
実装もそのとおり1pxで出ていた（実測: #E4E3F1 の面に #FFFFFF が1px）。
ただし #E4E3F1 と白のコントラストは 1.14:1 しかなく、1pxでは事実上見えない。
ラベルの札と札の間の「空き」として読めるところまで太くした（PC3 / SP2）。
★値の列（#E4E3F1 1px）は触らない。あちらは白地の上なので1pxでも見える。
★太くしたぶん padding を減らすこと。border-box でも
「文字の行送り + padding上下 + 罫」が min-height を超えると行が伸びる
（PCは 26 + 16*2 + 3 = 61 で1px乗る。だから 15 にしてある）。 */
.blk-case__spec {
display: grid; grid-template-columns: 110px minmax(0, 1fr);
margin: 10px 0 0;
font-size: 14px; line-height: 1.4;
}
@media (min-width: 1024px) {
.blk-case__spec { grid-template-columns: 150px minmax(0, 1fr); margin-top: 20px; font-size: 16px; line-height: 1.625; }
}
/* ★padding は「行の高さ − 文字の行送り − 罫1px」で決める。17 にすると
border-box でも 17+26+17+1 = 61 になり、カンプの60行に1pxずつ乗る。 */
.blk-case__spec dt,
.blk-case__spec dd { display: flex; align-items: center; min-height: 40px; padding-block: 6px; }
/* ★説明の中身は span 1つ（.blk-case__specbody）にまとめてある。この面は display:flex なので、
などを直に置くと**要素ごとに別のフレックス項目**になり、横に並んで割れる
（語句と説明の表で 2026-08-31 に実際に起きた）。span を外さないこと（app/render/blocks.php）。 */
.blk-case__specbody { min-width: 0; }
@media (min-width: 1024px) {
.blk-case__spec dt,
.blk-case__spec dd { min-height: 60px; padding-block: 16px; }
}
.blk-case__spec dt {
justify-content: center; padding-inline: 8px;
background: #E4E3F1; color: var(--c-navy);
border-bottom: 2px solid var(--c-white);
}
@media (min-width: 1024px) {
.blk-case__spec dt { border-bottom-width: 3px; padding-block: 15px; }
}
.blk-case__spec dd {
margin: 0; padding-inline: 15px;
background: var(--c-white);
border-bottom: 1px solid #E4E3F1;
overflow-wrap: anywhere;
}
@media (min-width: 1024px) { .blk-case__spec dd { padding-inline: 30px; } }
.blk-case__spec dt:nth-last-of-type(1),
.blk-case__spec dd:nth-last-of-type(1) { border-bottom: 0; }
/* ---------------------------------------------------------- サロン紹介カード
カンプ実測（PC 投稿記事 y3706..4373 / SP 投稿記事_sp y5127..6595）。
| | SPカンプ | SP CSS | PC（カンプ＝CSS） |
|-------------|---------|---------|------------------|
| カード | 690幅 | 345幅 | 850幅 |
| 内側の余白 | 30/30/41| 15/15/20| 29/29/46 |
| 写真 | 630x474 | 315x237 | 255x192 |
| 写真の位置 | 名前の下（全幅） | 左（右に文字） |
| 写真の比 | 85:64（アイキャッチと同じ） | |
| エリアバッジ| 100x50 | 50x25 | 60x30 #8585C1 |
| 名前 | 33 | 17 | 24 |
| キャッチ | 32/40 | 16/20 | 20/30 |
| 説明 | 26/36 | 13/18 | 16/26 |
| ボタン | 630x90 | 315x45 | 330x70 ＋ 430x70 |
| ボタンの間 | 30 | 15 | 30（縦も横も） |
★PCは「写真＋右の見出し」だけが2段組。キャッチ・説明・ボタンは全幅。
右の3行（バッジ／名前／タグ）は写真に対して縦中央（カンプ実測: 写真の中心
3830.5 と文字の中心 3830 が一致）。
★カンプのボタンは2行あるが、これは「Web予約のとき」と「LINEのとき」の
出し分けを1枚に描いたもの。実装は行き先に応じて1行だけ出す。 */
.blk-salon {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "media" "catch" "desc" "cta";
row-gap: 0;
margin-block: 1.8em 1.6em;
padding: 14px 14px 20px;
border: 1px solid #E4E3F1;
border-radius: 8px;
background: var(--c-white);
}
@media (min-width: 1024px) {
.blk-salon {
grid-template-columns: 255px minmax(0, 1fr);
grid-template-areas: "media head" "catch catch" "desc desc" "cta cta";
align-items: center;
column-gap: 40px;
padding: 29px 29px 46px;
}
.blk-salon.is-nophoto {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "catch" "desc" "cta";
}
}
/* ★段の間はカンプの「字面どうしの隙間」から逆算した値を1つずつ入れる。
row-gap で一律にすると、キャッチ→説明（PC18）だけ広がって見える。 */
.blk-salon__media { grid-area: media; display: block; margin-top: 16px; }
@media (min-width: 1024px) { .blk-salon__media { margin-top: 0; } }
.blk-salon__img,
.blk-salon__media .is-empty {
display: block; width: 100%; aspect-ratio: 85 / 64; object-fit: cover;
border-radius: 5px; background: var(--c-bg-alt);
}
.blk-salon__head { grid-area: head; display: grid; gap: 8px; min-width: 0; }
@media (min-width: 1024px) { .blk-salon__head { gap: 10px; } }
.blk-salon__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin: 0; font-size: 13px; }
@media (min-width: 1024px) { .blk-salon__meta { gap: 21px; font-size: 16px; } }
/* エリアバッジ。★components.css の .c-badge はピル・#c-badge 色なので、
カンプ（角丸3の四角・#8585C1・50x25/60x30）に上書きする */
.blk-salon__meta .c-badge {
justify-content: center;
min-width: 50px; height: 25px; padding: 0 10px;
border-radius: 3px;
background: #8585C1;
font-size: 13px; letter-spacing: var(--ls-wide);
}
@media (min-width: 1024px) { .blk-salon__meta .c-badge { min-width: 60px; height: 30px; font-size: 16px; } }
/* 駅からの距離。★ピンは components.css の .c-station を使う。
大きさ（PC 18x24 / SP 11x15）と色（#E689B5）だけカンプに合わせる。 */
.blk-salon__station { gap: 10px; font-size: inherit; }
.blk-salon__station::before { width: 11px; height: 15px; background: #E689B5; }
@media (min-width: 1024px) {
.blk-salon__station { gap: 11px; }
.blk-salon__station::before { width: 18px; height: 24px; }
}
.blk-salon__name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: var(--ls-narrow); }
@media (min-width: 1024px) { .blk-salon__name { font-size: 24px; } }
.blk-salon__name a { color: var(--c-navy); text-decoration: none; }
.blk-salon__name a:hover { text-decoration: underline; }
/* サロン名の下のタグ行。カンプ実測（2026-08-07・salons.tags を足して出せるようにした）:
PC L=525 T=3867 R=669 B=3881 ／ 14px NotoSansCJKjp-**Light** ／ Tracking 50
SP L=63 T=5276 R=307 B=5299 ／ 24px（＝CSS 12px）／ Tracking 50
色は最暗画素 #8A5CA5・濃い画素の最頻 #8C5DA5 → --c-primary（#8D5CA6）。
サロン名の紺（#414167）とは別の色。
★Light（300）は build-fonts.php が 300;400;500;700 を落としているので実在する。
太さを持たない環境で合成されると字幅が変わるので、来たら実測し直す。
★line-height を 1 にする。.blk-salon__head の行送りを継ぐと、
字が小さいぶん行箱だけが伸びて名前との間がカンプより開く（この罠は4回目）。 */
.blk-salon__tags {
/* ★名前との間は .blk-salon__head の行間（SP8 / PC10）だけでは合わない。
行送りを1にしたぶん、この行には行箱の余白が無いため。
カンプのインクどうしの距離（PC19 / SP9）に合わせて差を足し引きする:
PC … 名前インク下端3848 → タグインク上端3867 の 19 に対し 15 だったので +4
SP … 同 5258 → 5276 の 18（＝CSS9）に対し 15.5 だったので -2.5
★SPが負なのは、名前の行送り1.3で下に2.8の余白が残っているぶん。
.blk-salon__head の行間そのものを変えないこと。バッジ→名前は合っている。 */
margin: -2.5px 0 0;
font-size: 13px;
font-weight: 300;
line-height: 1;
letter-spacing: .05em;
color: var(--c-primary);
}
@media (min-width: 1024px) { .blk-salon__tags { margin-top: 4px; font-size: 14px; } }
.blk-salon__catch {
grid-area: catch; margin: 13px 0 0;
font-size: 16px; font-weight: 700; line-height: 1.25;
letter-spacing: var(--ls-wide);
color: var(--c-navy);
}
@media (min-width: 1024px) { .blk-salon__catch { margin-top: 26px; font-size: 20px; line-height: 1.5; } }
.blk-salon__desc { grid-area: desc; margin-top: 10px; font-size: 14px; line-height: 1.38; }
@media (min-width: 1024px) { .blk-salon__desc { margin-top: 18px; font-size: 16px; line-height: 1.625; } }
.blk-salon__cta { grid-area: cta; display: grid; gap: 15px; margin: 12px 0 0; }
@media (min-width: 1024px) {
/* カンプ: 詳細 330 ＋ 間 30 ＋ 予約 430 ＝ 790（内側の幅そのもの） */
.blk-salon__cta { grid-template-columns: 330px minmax(0, 1fr); gap: 30px; margin-top: 26px; }
/* ★予約先（予約URL・LINE）を入れていないサロンではボタンが**1つ**になる。
カンプにその状態は描かれていない（2行とも右にボタンがある見本）。
右の430を空けたままにすると、幅の半分に穴が空いて詰まって見えるので、
1つのときは全幅790を使う。SPは元から1列なので同じ見え方になる。 */
.blk-salon__cta .btn:only-child { grid-column: 1 / -1; }
}
/* ★text-decoration を消すこと。`.art-body a`（0,1,1）が `.btn`（0,1,0）より強く、
ボタンの文字に下線が出る（2026-08-07 実測）。 */
.blk-salon__cta .btn {
min-width: 0; width: 100%; text-decoration: none;
min-height: 45px; padding-block: 11px;
font-size: 15px; line-height: 1.5;
--btn-ls: var(--ls-wide); /* Tracking 100 */
/* ★palt。カンプの「詳細はこちら」の字面は PC 121（x334..454）。
palt 無しだと 131 になり、絵と字のかたまりが左へずれる（実測で確かめた）。 */
font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) { .blk-salon__cta .btn { min-height: 70px; font-size: 20px; } }
/* ボタンの中の絵。**記事の中のカードだけ大きい**（カンプ実測 2026-08-10）:
PC 暦 22x22（x715..735 / y4181..4204）／LINE 27x26（x697..723 / y4282..4307）／字との間 21
SP 暦 17x17（x236..269÷2） ／LINE 18x17.5（x215..250÷2） ／間 15.5
★間は `gap` ではなく `margin-right` で持つ。`.btn__icon`（components.css）が
もともと `margin-right: .7em` を持っているので、gap を足すと二重になる
（実測でカンプの21に対し39.5開いた）。
★SPの大きさは components.css の既定（17x17 / 18x17）と同じなので、上書きはPCだけ。
components.css の `.btn__icon--calendar` 自体を大きくしないこと。
サロン詳細の予約カードまで一緒に太る。 */
.blk-salon__cta .btn__icon { margin-right: 15.5px; }
@media (min-width: 1024px) {
.blk-salon__cta .btn__icon { margin-right: 21px; }
.blk-salon__cta .btn__icon--calendar { width: 22px; height: 22px; }
.blk-salon__cta .btn__icon--comment { width: 27px; height: 26px; }
}
/* ★.btn--solid は一覧の小さいボタン（PC 130x34）。ここは記事の中の大きいボタンなので
高さ・文字サイズを上書きする。太字もカンプどおり戻す */
.blk-salon__cta .btn--solid { height: auto; font-weight: 700; }
/* LINEの緑。★カンプの実測は #00B300（LINEの2020年以前の緑）だが、
現行のブランドガイドラインの #06C755 を使う。
2026-08-07 に発注者が「#06C755 で」と決めた。カンプの色に戻さないこと。 */
.btn--line { background: #06C755; color: var(--c-white); border: 0; }
.btn--line:hover { opacity: .85; }
/* ---------------------------------------------------------------- 案内人のコメント
カンプ実測（固定記事ページ PC y2355..2533 ほか計4か所 / SP y3441..。2026-08-07）。
| | PC | SP（÷2で見た値） |
|--------------|---------------------------|----------------------|
| 顔写真 | 120 x 120 の丸（x200..319）| 70 x 70（x15..85） |
| 名前 | 14px・行送り20・2行・中央 | 12px・行送り17 |
| 吹き出し | x374..1049（676）・高179 | x110..360（250） |
| 地色 | #DDECF1（枠線なし） | 同じ |
| 角丸 | 15 | 同じ |
| しっぽ | 29 x 21・上端から49下 | 14.5 x 10.5・24.5下 |
| 本文 | 16 / 26 ・Tracking 50 | 13 / 18 |
| 本文の色 | #333333（本文と同じ） | 同じ |
★写真と吹き出しの上端はそろっている（PC 2355 と 2356）。縦中央ではない。
★しっぽは「上辺が水平・頂点が左上」の直角三角形。二等辺ではない。
border の三角は、幅0高さ0の箱に右と下だけ枠を付けると
頂点が左上・底辺が右の縦線になる。カンプと同じ向き。
★誰が喋るかは設定（navigator_name / navigator_image）。ブロックは文章だけ持つ。 */
.blk-navi {
--navi-face: 70px;
--navi-gap: 24.5px;
--navi-tail-w: 14.5px;
--navi-tail-h: 10.5px;
--navi-tail-top: 24.5px;
display: grid;
grid-template-columns: var(--navi-face) minmax(0, 1fr);
column-gap: var(--navi-gap);
align-items: start;
margin-block: 1.8em 1.6em;
}
@media (min-width: 1024px) {
.blk-navi {
--navi-face: 120px;
--navi-gap: 54px;
--navi-tail-w: 29px;
--navi-tail-h: 21px;
--navi-tail-top: 49px;
}
}
.blk-navi__who { display: grid; justify-items: center; }
.blk-navi__face {
display: block;
width: var(--navi-face); height: var(--navi-face);
border-radius: 50%;
object-fit: cover;
background: var(--c-bg-alt);
}
/* ★行送りは 17/20 を px で指定する。カンプは2行で、字の大きさに対して行が詰まっている。
本文の行送り（PC26）を継ぐと2行で52になり、写真との間が10px開く。 */
/* ★max-width で折り返し位置を作る。カンプは「ブロウディア / 案内人」の2行。
写真の幅（PC120）に任せると1行に8文字入って「ブロウディア案内 / 人」になる。
6.8em＝95px なら6文字（87.5）が入って7文字（102）が入らない。
SPは列が70pxなので、この指定は効かず、そのままでも6文字で折れる。
★
を埋め込まない。名前は設定で変えられるので、別の名前で変な位置に改行が残る。
★PCだけ palt を切る。**カンプの2枚で字組みが違う**（同じ文字列なのに）:
PC カンプ 6文字のインク 86 … 全角送り（14 x 6 ＋ 字間 3.5 ＝ 87.5）
SP カンプ 6文字のインク 131（＝CSS 65.5）… palt の詰め送り
.art-body から継ぐ palt をPCで当てると 78 になり、カンプより8px細い。
本文の palt は外さない（外すと本文の行が伸びる）。ここだけの打ち消し。 */
.blk-navi__name {
max-width: 6.8em;
/* 写真の下端 → 名前のインク上端が カンプ PC18 / SP21（＝CSS10.5）になる値（実測） */
margin: 6.5px 0 0;
font-size: 13px;
line-height: 18px;
letter-spacing: .05em;
text-align: center;
color: var(--c-text);
}
@media (min-width: 1024px) {
.blk-navi__name {
margin-top: 14px; font-size: 14px; line-height: 20px;
font-feature-settings: normal; /* ↑の理由。SPは palt のまま */
}
}
.blk-navi__bubble {
position: relative;
padding: 8px 13.5px;
border-radius: 15px;
background: #DDECF1;
font-size: 14px;
line-height: 19px;
letter-spacing: .05em;
font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) { .blk-navi__bubble { padding: 24.5px 25px; font-size: 16px; line-height: 26px; } }
.blk-navi__bubble > *:first-child { margin-top: 0; }
.blk-navi__bubble > *:last-child { margin-bottom: 0; }
/* しっぽ。★地色と同じ色を1枚だけ。枠線が無いので二重に敷く必要はない
（STEPの吹き出しは枠線があったので2枚重ねだった。あれと混ぜない）。 */
.blk-navi__bubble::before {
content: '';
position: absolute;
top: var(--navi-tail-top);
left: calc(-1 * var(--navi-tail-w));
width: 0; height: 0;
border-style: solid;
border-width: 0 var(--navi-tail-w) var(--navi-tail-h) 0;
border-color: transparent #DDECF1 transparent transparent;
}
/* ---------------------------------------------------------------- Q&A
カンプ実測（固定記事ページ PC y8955..9123 / SP y15488..15723。2026-08-07）。
| | PC | SP |
|------------|---------------------|-----------|
| カード | 850幅・#FCFAFD・角丸8 | 345幅 |
| カードの間 | 20 | 15 |
| 内側の余白 | 上30 / 左右30 / 下24 | 15 |
| Q の丸 | 36径・塗り --c-accent | 25径 |
| A の丸 | 36径・1px枠のみ | 25径 |
| 質問 | 18 / 行送り26・紺・太字 | 14 |
| 答え | 16 / 行送り26 | 13 / 18 |
| 質問→答え | 32 | 20 |
★地色は #F7F6F8 ではなく #FCFAFD（アンケートのパネルと同じ）。
★丸の色は紫（--c-primary）ではなくピンク（--c-accent）。走査の最頻値 #C26AA7。 */
.blk-faq { display: grid; gap: 15px; margin-block: 1.8em 1.6em; }
@media (min-width: 1024px) { .blk-faq { gap: 20px; } }
.blk-faq__item { padding: 15px; border-radius: 8px; background: #FCFAFD; }
@media (min-width: 1024px) { .blk-faq__item { padding: 30px 30px 24px; } }
.blk-faq__q {
display: flex; gap: 12px; align-items: center;
margin: 0;
font-size: 15px; font-weight: 700; line-height: 21px;
letter-spacing: .05em;
color: var(--c-navy);
}
@media (min-width: 1024px) { .blk-faq__q { gap: 15px; font-size: 18px; line-height: 26px; } }
.blk-faq__a {
display: flex; gap: 12px; align-items: flex-start;
/* ★丸どうしの間で測る（行の高さは丸で決まる）。カンプ PC20 / SP12 */
margin-top: 12px;
font-size: 14px; line-height: 19px;
letter-spacing: .05em;
font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) { .blk-faq__a { gap: 15px; margin-top: 20px; font-size: 16px; line-height: 26px; } }
.blk-faq__a p { margin: 0; }
.blk-faq__mark {
flex: 0 0 auto;
display: grid; place-content: center;
width: 25px; height: 25px;
border-radius: 50%;
background: var(--c-accent);
color: var(--c-white);
font-family: var(--font-en);
font-weight: 600;
font-size: 15px;
letter-spacing: var(--ls-narrow);
}
@media (min-width: 1024px) { .blk-faq__mark { width: 36px; height: 36px; font-size: 20px; } }
.blk-faq__mark--a { background: transparent; border: 1px solid var(--c-accent); color: var(--c-accent); }
/* ---------------------------------------------------------------- 料金表
カンプ実測（固定記事ページ PC y6446..6855 / SP y11373..11851。2026-08-07）。
| | PC | SP |
|--------------|-----------------------|---------------|
| 表 | 600幅（左寄せ） | 345幅（全幅） |
| 1列目の幅 | 340（56.7%） | 同じ割合 |
| 見出し行 | 高さ60・#E4E3F1 | 高さ40 |
| 本文の行 | 高さ70 | 高さ40 |
| 枠と罫 | 1px #E5E3F1 | 同じ |
| 見出しの区切り | 1px 白 | 同じ |
| 見出しの字 | 16 / Tracking100 | 13 |
| 部位 | 16 / Tracking50 | 13 |
| 金額 | 数字20＋単位16 | 15＋13 |
| 注記 | 14 / Tracking75・左寄せ | 12 |
★中身は左右とも中央寄せ。前の実装は左寄せ＋1列目に面（#F7F0F7）で、
カンプとは別物だった。
★見出し行の2つのセルの間だけ白で切れている（本文の行は #E5E3F1）。 */
.blk-price-wrap { margin-block: 1.8em 1.6em; }
.blk-price {
width: 100%;
border-collapse: collapse;
font-size: 14px;
letter-spacing: .05em;
text-align: center;
color: var(--c-navy);
}
/* ★PCは本文カラムいっぱいに（2026-08-24 発注者「表のワイズを広げようかな」。
600px固定だと「59,800円（通常料金69,800円）」が2行に折れていた） */
@media (min-width: 1024px) { .blk-price { width: 100%; font-size: 16px; } }
.blk-price caption { margin-bottom: 10px; font-weight: 700; color: var(--c-navy); text-align: left; }
.blk-price th,
.blk-price td {
height: 40px;
padding: 6px 10px;
/* ★行送りを明示する。.art-body の 2 を継ぐと、SPで行の高さがカンプの40を超える */
line-height: 1.4;
border: 1px solid #E5E3F1;
text-align: center;
font-weight: 400;
}
@media (min-width: 1024px) { .blk-price td, .blk-price tbody th { height: 70px; padding: 10px 16px; } }
.blk-price thead th {
background: #E4E3F1;
border-color: #E4E3F1;
letter-spacing: var(--ls-wide);
}
@media (min-width: 1024px) { .blk-price thead th { height: 60px; } }
/* ★見出し行のセルの間だけ白。本文の行は #E5E3F1 のまま */
.blk-price thead th:first-child { border-right-color: var(--c-white); }
.blk-price tbody th { width: 56.7%; }
.blk-price td { font-size: 15px; }
@media (min-width: 1024px) { .blk-price td { font-size: 20px; } }
/* 「万円」だけ1段小さい（block_price_value() が で囲む） */
.blk-price td small { font-size: .867em; }
.blk-price__note {
margin: 10px 0 0;
font-size: 13px; line-height: 15px;
letter-spacing: var(--ls-narrow);
color: var(--c-text);
}
@media (min-width: 1024px) { .blk-price__note { margin-top: 21px; font-size: 14px; line-height: 28px; } }
/* ---------------------------------------------------------- 比較表（項目｜A｜B）
2026-08-18。コラム「韓国でアートメイク資格は必要？」の 日本／韓国 の表のために足した。
専用のカンプは無い。色は料金表（.blk-price）から: 見出し行 #E4E3F1・罫 #E5E3F1・紺の字。
★中身は文章なので左寄せ（料金表は中央寄せ）。1列目（項目）は太字で薄い面。
★SPで3列を保つため字は 12/17（PC 15/24）。長い文は入れない（1セル20字前後まで）。 */
.blk-compare-wrap { margin-block: 1.8em 1.6em; overflow-x: auto; }
.blk-compare {
width: 100%;
border-collapse: collapse;
font-size: 13px; line-height: 18px;
letter-spacing: .03em;
color: var(--c-navy);
table-layout: fixed;
}
@media (min-width: 1024px) { .blk-compare { font-size: 15px; line-height: 24px; letter-spacing: .05em; } }
.blk-compare caption { margin-bottom: 10px; font-weight: 700; color: var(--c-navy); text-align: left; }
.blk-compare th,
.blk-compare td {
padding: 8px 8px;
border: 1px solid #E5E3F1;
text-align: left;
vertical-align: top;
font-weight: 400;
word-break: normal; overflow-wrap: anywhere;
}
@media (min-width: 1024px) { .blk-compare th, .blk-compare td { padding: 12px 16px; } }
.blk-compare thead th {
background: #E4E3F1;
border-color: #E4E3F1;
font-weight: 700;
text-align: center;
letter-spacing: var(--ls-wide);
}
/* 見出し行のセルの間だけ白（料金表と同じ） */
.blk-compare thead th + th { border-left-color: var(--c-white); }
/* ★1列目の幅は thead の th にも効かせる（table-layout: fixed は最初の行の幅で列を決める） */
.blk-compare th:first-child { width: 26%; }
@media (min-width: 1024px) { .blk-compare th:first-child { width: 22%; } }
.blk-compare tbody th { background: #F7F5FA; font-weight: 700; }
/* ★長い表はSPで縦積みにする（2026-08-28 発注者「テーブルが見にくいですね。。。
1行でまとめてほしい」）。1023px以下で **.blk-compare--stack だけ**行ごとに縦へ積む。
★付けるかどうかは render_block_compare_table が中身から決める（16字超か
入り）。
短い語句だけの表は3列のまま。縦積みにすると行数が3倍になり、かえって読みにくい。
値が画面幅いっぱい（約25文字）使えるので、いまの文量ならほぼ1行に収まる。
★列の名前は td の data-h から出す（render_block_compare_table が head_a / head_b を入れる）。
thead は隠す。見出しの無い表では data-h が付かないので、名前の行も出ない。
★PC（1024px以上）は3列の表のまま。カンプは無いが、PCでは横に比べられるほうが速い。 */
@media (max-width: 1023px) {
.blk-compare--stack,
.blk-compare--stack tbody,
.blk-compare--stack tr,
.blk-compare--stack th,
.blk-compare--stack td { display: block; width: auto; }
.blk-compare--stack { border-collapse: separate; border-spacing: 0; table-layout: auto; }
.blk-compare--stack thead { display: none; }
.blk-compare--stack tbody tr { border: 1px solid #E5E3F1; }
.blk-compare--stack tbody tr + tr { margin-top: 10px; }
.blk-compare--stack tbody th,
.blk-compare--stack tbody td { border: 0; padding: 8px 12px; }
/* ★:first-child の幅指定（26%）より強く書く。でないと項目が細い札のまま残る */
.blk-compare--stack tbody th,
.blk-compare--stack tbody th:first-child { width: auto; background: #E4E3F1; letter-spacing: var(--ls-wide); }
.blk-compare--stack tbody td + td { border-top: 1px solid #E5E3F1; }
.blk-compare--stack tbody td[data-h]::before {
content: attr(data-h);
display: block;
margin-bottom: 2px;
font-size: 11px; line-height: 16px;
letter-spacing: var(--ls-wide);
font-weight: 700;
color: var(--c-accent);
}
}
/* ---------------------------------------------------------- 内部リンクのカード
2026-08-20 発注者「内部リンクはこんな感じにしたいです」＝minforの**ブログカード**の形。
枠線の箱: 左に写真（4:3。PC 200x150 / SP 110x82）、右に題名（太字・2行まで）・本文の抜粋（SPも出す・2行まで）・
下に「▶ リンク先を見る」（下線）。全体が1つのリンク。色はBROWDIAの持ち色（題名=紺・▶=アクセント・リンク文字=紫。
見本（minfor）は青リンク＋赤▶だった）。種別ラベル（コラム／ガイド…）の行は廃止（見本に無い。__label は外部ボタン用に残る）。
写真が無い行き先（求人一覧など）はロゴの面。 */
.blk-link {
display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 14px;
margin-block: 1.4em 1.6em; padding: 14px;
border: 1px solid #E4E3F1; border-radius: 6px; background: var(--c-white);
color: inherit; text-decoration: none;
transition: box-shadow .2s;
}
.blk-link:hover { box-shadow: 0 4px 16px rgba(65, 65, 103, .12); }
@media (min-width: 1024px) { .blk-link { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px 20px; } }
.blk-link__thumb { display: block; min-width: 0; }
.blk-link__img,
.blk-link__thumb .is-empty {
display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: var(--c-bg-alt);
}
/* 写真が無いときはロゴ */
.blk-link__thumb .is-empty {
background: var(--c-bg-alt) url("/assets/img/logo-footer.svg") no-repeat center / 62% auto; /* 紫のロゴ（白地用の logo.svg は白い） */
}
.blk-link__body { display: grid; gap: 6px; min-width: 0; }
.blk-link__label { font-size: 12px; line-height: 1.3; letter-spacing: .05em; color: var(--c-primary); }
.blk-link__title {
font-size: 15px; font-weight: 700; line-height: 21px; letter-spacing: var(--ls-narrow); color: var(--c-navy);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.blk-link:hover .blk-link__title { text-decoration: underline; }
.blk-link__desc {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
font-size: 12px; line-height: 19px; color: #585858; font-weight: 300;
}
/* 「▶ リンク先を見る」。▶はアクセント色、文字は紫＋下線（押せることの印） */
.blk-link__more { justify-self: start; font-size: 12px; line-height: 1.4; color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.blk-link__more::before { content: "▶"; margin-right: 6px; font-size: .8em; color: var(--c-accent); display: inline-block; }
@media (min-width: 1024px) {
.blk-link__label { font-size: 12px; }
.blk-link__title { font-size: 17px; line-height: 25px; }
.blk-link__desc { font-size: 13px; line-height: 21px; }
.blk-link__more { font-size: 13px; }
}
/* --- 外部リンクのボタン（link_card の外部URL。2026-08-19 発注者「ここのデザインを変えたいな」）
写真の無いカードが2枚重なる形をやめ、丸いアイコン＋ラベル＋名前の**小さなボタン**（錠剤形）にした。
続けて置いたものは render_blocks が .blk-links に束ねるので横に並ぶ（入り切らなければ折り返す）。
アイコンの面は Instagram ならピンク→紫のグラデーション（サイトの色。公式の色は使わない）、
それ以外は紫。マークは author カードと同じ仮の svg（icon-instagram.svg）と外部リンクの矢印（icon-external.svg）。
右端の小さな矢印は「別のサイトへ行く」の印。 */
.blk-links { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 1.4em 1.6em; }
.blk-links:last-child { margin-bottom: 0; }
.blk-link--ext {
display: inline-grid; grid-template-columns: 34px minmax(0, 1fr) 12px; align-items: center; gap: 10px;
margin: 0; padding: 6px 14px 6px 6px; max-width: 100%;
border-radius: 999px;
}
.blk-link__icon {
position: relative; display: block; width: 34px; height: 34px; border-radius: 50%;
background: var(--c-primary);
}
.blk-link__icon::before {
content: ""; position: absolute; inset: 8px; background: var(--c-white);
-webkit-mask: url("/assets/img/icon-external.svg") no-repeat center / contain; mask: url("/assets/img/icon-external.svg") no-repeat center / contain;
}
.blk-link--instagram .blk-link__icon { background: linear-gradient(135deg, var(--c-accent), var(--c-primary)); }
.blk-link--instagram .blk-link__icon::before {
inset: 7px;
-webkit-mask-image: url("/assets/img/icon-instagram.svg"); mask-image: url("/assets/img/icon-instagram.svg");
}
.blk-link--ext .blk-link__body { gap: 0; }
.blk-link--ext .blk-link__label { font-size: 11px; line-height: 15px; }
.blk-link--ext .blk-link__title { font-size: 15px; line-height: 19px; }
.blk-link__ext {
display: block; width: 12px; height: 12px; background: #9A9AB0;
-webkit-mask: url("/assets/img/icon-external.svg") no-repeat center / contain; mask: url("/assets/img/icon-external.svg") no-repeat center / contain;
}
@media (min-width: 1024px) {
.blk-links { gap: 12px; }
.blk-link--ext { grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 12px; padding: 7px 18px 7px 7px; }
.blk-link__icon { width: 40px; height: 40px; }
.blk-link__icon::before { inset: 10px; }
.blk-link--instagram .blk-link__icon::before { inset: 9px; }
.blk-link--ext .blk-link__label { font-size: 11px; line-height: 15px; }
.blk-link--ext .blk-link__title { font-size: 15px; line-height: 21px; }
.blk-link__ext { width: 14px; height: 14px; }
}
/* ---------------------------------------------------------------- アンケート
カンプ実測（固定記事ページ PC y1843..2314 / SP y2455..3400）。2026-08-07。
§3.7 の言葉での説明から組んでいたぶんを、走査線とPSD/PSBの文字レイヤーで
全部入れ直した。SPカンプは750px＝CSS375なので下の「SP」欄は実測値の1/2。
★質問の帯は見出しH3-01とまったく同じ意匠だった。
面 #F5F0F7 ＋ 左に紫のバー、文字は面の左から19.5（PC）。
色も太さも一致するので、値は見出し節の表と同じものを使う。
前の実装は 6px #C0A0D8（どちらもカンプに無い値）だった。
| | PC | SP |
|----------------|-----------------|-----------|
| 帯 | 面60・バー15 | 面36・バー7.5 |
| 帯の文字 | 20 / 行送り1.5 | 15 |
| 帯→パネル | 30 | 22 |
| パネル | 850x382・padding 40 | 345・padding 15 |
| パネルの地 | #FCFAFD・角丸8 | 同じ |
| ドーナツ | 外径300・穴140（環80） | 外径150・穴70（環40） |
| 並び | 左ドーナツ／右凡例・間55 | 上下 |
| 上位3件 | ラベル20・票14・％の数20＋記号16・行ピッチ36 | 15・12・15+13・23 |
| 4件目以降 | 16・14・16+12・行ピッチ30 | 13・12・13+11・20 |
★系列の色は9本。カンプの■の実測（前の実装の8色はどれもカンプに無い値）。 */
.blk-survey { margin-block: 1.8em 1.6em; }
.blk-survey__title,
.blk-rank__title {
display: flex; align-items: center;
min-height: 36px;
margin: 0 0 22px;
padding: 7px 12px 7px 14.25px;
border-left: 7.5px solid #CEAFD9;
background: #F5F0F7;
/* ★H3（.art-body h3.hd）と同じ大きさにそろえる。カンプでは同じ意匠の帯なので、
片方だけ 2026-08-10 の指示（H3を小さく）から外すと2つの大きさが並ぶ。 */
font-size: 16px; font-weight: 700; line-height: 1.5; /* SP 13.5→16。H3と一緒（2026-08-19） */
letter-spacing: .05em;
color: var(--c-navy);
}
@media (min-width: 1024px) {
.blk-survey__title,
.blk-rank__title {
min-height: 60px; margin-bottom: 30px;
padding: 15px 20px 15px 19.5px;
border-left-width: 15px;
font-size: 18px; /* ★カンプは20。H3と一緒に下げた（2026-08-10 発注者の指示） */
}
}
.blk-survey__body {
display: grid; gap: 20px;
padding: 19.5px 15px;
border-radius: 8px;
background: #FCFAFD;
}
@media (min-width: 1024px) {
.blk-survey__body {
grid-template-columns: 300px minmax(0, 1fr);
gap: 51px;
align-items: center;
padding: 40px;
}
}
.blk-survey__donut { display: block; width: 150px; max-width: 100%; margin-inline: auto; }
@media (min-width: 1024px) { .blk-survey__donut { width: 300px; } }
/* ★-90deg 回して12時から始める。stroke-dasharray は3時から始まるため。
原点はビューボックス（300x300）の中心に合わせること。 */
.blk-survey__donut circle { transform: rotate(-90deg); transform-origin: 150px 150px; }
.blk-survey__legend { list-style: none; margin: 0; padding: 0; }
.blk-survey__row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
/* ★カンプの■と文字の間は約7.5、文字と％の間は10。8にすると上位1件目が
1px足りずに折り返す（SPで実測）。 */
column-gap: 7px;
font-size: 14px;
line-height: 22px; /* カンプの行ピッチ（SP20 / PC30） */
letter-spacing: .05em;
/* ★palt を入れること。Photoshopの日本語組版はプロポーショナル字形が既定で、
切ったままだとSPで1行に収まらず折り返す（base.css の注記と同じ理由）。 */
font-feature-settings: "palt" 1;
}
@media (min-width: 1024px) { .blk-survey__row { column-gap: 10px; font-size: 16px; line-height: 30px; } }
/* 上位3件だけ大きく・太い。カンプは行ピッチも別（SP23 / PC36） */
.blk-survey__row.is-top { font-size: 15px; font-weight: 700; line-height: 23px; }
@media (min-width: 1024px) { .blk-survey__row.is-top { font-size: 20px; line-height: 36px; } }
/* 上位3件の最後と4件目の間だけカンプが少し空く（SP22 / PC20） */
.blk-survey__row.is-top + .blk-survey__row:not(.is-top) { margin-top: 2px; }
@media (min-width: 1024px) { .blk-survey__row.is-top + .blk-survey__row:not(.is-top) { margin-top: 3px; } }
.blk-survey__chip { width: 12px; height: 12px; }
.is-top .blk-survey__chip { width: 15px; height: 15px; }
@media (min-width: 1024px) {
.blk-survey__chip { width: 12px; height: 12px; }
.is-top .blk-survey__chip { width: 15px; height: 15px; }
}
.blk-survey__label { min-width: 0; overflow-wrap: anywhere; }
/* 票数は本文より1段小さい。カンプは PC14 / SP12 で、上位3件でも大きくならない */
/* ★行送りは1にする。行box(line-height 20/30px)を継ぐと、字が小さいぶん
半行送りが増えて行が2pxずつ伸び、カンプの行ピッチを割る（実測）。 */
.blk-survey__votes { font-size: 13px; font-weight: 400; line-height: 1; }
@media (min-width: 1024px) { .blk-survey__votes { font-size: 14px; } }
.blk-survey__pct { justify-self: end; font-weight: 700; color: var(--c-navy); white-space: nowrap; }
.blk-survey__pct small { font-size: .8em; line-height: 1; }
/* ランキング（カンプ実測 PC y3555..4004 / SP y5592..6407。2026-08-07）。
帯はドーナツと同じもの（上の .blk-survey__title と共通の指定）。
| | PC | SP |
|------------|-----------------------|-------------------|
| パネル | 850x360・横paddingなし | 345・padding 15 |
| 列 | 5列 × 170 | 3列 × 115（最後の行は中央寄せ）|
| 王冠 | 21x16 | 同じ |
| No.n | 18 / Tracking75 | 14 |
| 部位名 | 20 / Tracking50 | 15 |
| 丸 | 120径 #D9BCDA | 60径 |
| ％ | 数20＋記号16 | 数15＋記号13 |
| 票数 | 14 | 12 |
| 注記 | 14 / 右寄せ | 同じ |
★列の間に縦の罫は無い（決定記録§3.8は「縦の細い罫」と書いていたが、
走査すると列の間はパネルの地色そのもの。前の実装の border-left は消した）。
★王冠の色は順位ごとに違う（実測）。No.4・No.5 は同じ。 */
.blk-rank { margin-block: 1.8em 1.6em; }
/* ★横のpaddingは0。カンプは列がパネルの幅をそのまま5等分（PC170）・3等分（SP230）する */
.blk-rank__panel { padding: 21px 0 14px; border-radius: 8px; background: #FCFAFD; }
@media (min-width: 1024px) { .blk-rank__panel { padding: 36px 0 18px; } }
.blk-rank__list {
list-style: none; margin: 0; padding: 0;
/* ★grid ではなく flex。カンプのSPは3列2行で、2行目（2件）が中央に寄る。
grid だと余った列に左詰めされて中央に来ない。 */
display: flex; flex-wrap: wrap; justify-content: center;
row-gap: 20px;
}
.blk-rank__col {
flex: 0 0 33.333%;
/* ★段の間は gap ではなく1つずつ margin で入れる。カンプの間隔が
No.→部位名 6 / 部位名→丸 7.5 / 丸→％ 6（SP）とばらばらで、
一律の gap だと必ずどこかがずれる。 */
display: grid; gap: 0; justify-items: center; text-align: center;
}
@media (min-width: 1024px) { .blk-rank__col { flex-basis: 20%; } }
.blk-rank__no {
display: flex; align-items: center; gap: .5em;
margin: 0;
font-family: var(--font-en); font-weight: 600; font-size: 14px;
letter-spacing: var(--ls-narrow);
line-height: 14px;
color: #9B9B9B;
}
@media (min-width: 1024px) { .blk-rank__no { font-size: 18px; line-height: 28px; } }
/* 王冠。★これは仮の形（カンプの書き出しデータに王冠が無い）。
支給されたら icon-crown.svg を差し替える。大きさ21x16はカンプ実測。 */
.blk-rank__crown {
flex: none;
/* ★em で持つ。カンプは PC 21x16（18px）／ SP 15.5x12（14px）と字に連れて変わる */
width: 1.17em; height: .89em;
background: currentColor;
-webkit-mask: url("/assets/img/icon-crown.svg") no-repeat center / contain;
mask: url("/assets/img/icon-crown.svg") no-repeat center / contain;
}
.blk-rank__col:nth-child(1) .blk-rank__no { color: #BAA145; }
.blk-rank__col:nth-child(2) .blk-rank__no { color: #9B9B9B; }
.blk-rank__col:nth-child(3) .blk-rank__no { color: #A06B5B; }
.blk-rank__col:nth-child(4) .blk-rank__no,
.blk-rank__col:nth-child(5) .blk-rank__no { color: var(--c-accent); }
.blk-rank__label {
margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 18px;
letter-spacing: .05em; color: var(--c-navy);
}
@media (min-width: 1024px) { .blk-rank__label { margin-top: 4px; font-size: 20px; line-height: 36px; } }
.blk-rank__icon {
display: grid; place-content: center;
margin-top: 7.5px;
width: 60px; height: 60px;
border-radius: 50%;
background: #D9BCDA;
}
@media (min-width: 1024px) { .blk-rank__icon { margin-top: 10.5px; width: 120px; height: 120px; } }
/* 中の線画。★大きさは**pxで書く**。`70%` にすると、親が
`display: grid; place-content: center` なので「トラックの幅は中身で決まる／
中身の幅は親の70%」という循環になり、Chromeは 0 に落とす（絵が消える）。
2026-08-10 に線画を入れるまでは中身が空だったので、この穴に気づけなかった。
★カンプ実測: 丸120 に対し線画の字面は約80（眉 x47.5..127.5）。70%＝84 で合わせる。 */
.blk-rank__icon img { display: block; width: 42px; height: 42px; object-fit: contain; }
@media (min-width: 1024px) { .blk-rank__icon img { width: 84px; height: 84px; } }
.blk-rank__pct {
margin: 6px 0 0; font-weight: 700; font-size: 15px; line-height: 20px; color: var(--c-navy);
}
@media (min-width: 1024px) { .blk-rank__pct { margin-top: 15.5px; font-size: 20px; line-height: 30px; } }
.blk-rank__pct small { font-size: .8em; }
.blk-rank__votes { margin: 0; font-size: 13px; line-height: 22px; color: var(--c-navy); }
@media (min-width: 1024px) { .blk-rank__votes { font-size: 14px; line-height: 30px; } }
.blk-rank__note { margin: 14px 15px 0 0; font-size: 15px; line-height: 32px; color: var(--c-text); text-align: right; }
@media (min-width: 1024px) { .blk-rank__note { margin: 0 23px 0 0; } }
/* 自由HTML。中身はレイアウトを持たないので、はみ出しだけ抑える */
.blk-raw { margin-block: 1.8em 1.6em; max-width: 100%; overflow-x: auto; }
.blk-raw iframe, .blk-raw img, .blk-raw video { max-width: 100%; }
/* ---------------------------------------------------------------- 記事の下 */
.art-target { display: flex; justify-content: center; margin: 0; }
.art-target .btn { min-width: 0; width: 100%; max-width: 360px; }
.art-related { display: grid; gap: 0; }
/* ---------------------------------------------------------------- 固定ページの Related article
2026-08-18 発注者の依頼「記事下に関連記事を…固定ページの5本の記事で。バランスよく3つ」。
部品: app/templates/parts/page-related.php（数値の出典もそこ）。
カンプ実測（PC 固定記事ページ y10023..10812 / SP 固定記事ページ_sp y17194..18543）:
帯 --c-bg-alt（#F5F0F7）全幅、上下 PC80 / SP40。2段組の下・フッターの上
カード 白・角丸10。PC 3列 376・溝36 ／ SP 2列・溝15。画像 376:283（=4:3）
本文 padding PC 22 20 24 / SP 13 12 14 ／ タグ 14(12) Light 紫 ／ 題名 18/28(14/19) Medium #333・3行まで
★.c-sec-title（components.css）をそのまま使う。PCの見出し下は実測 36（既定28を上書き） */
/* ★main の padding-bottom（40/80）を打ち消してフッターに接する（カンプは帯の直下がフッター） */
.page-rel { background: var(--c-bg-alt); padding-block: 40px; margin-top: 40px; margin-bottom: -40px; }
.page-rel .c-sec-title { margin-bottom: 20px; }
.page-rel__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
@media (min-width: 1024px) {
.page-rel { padding-block: 80px; margin-top: 60px; margin-bottom: -80px; }
.page-rel .c-sec-title { margin-bottom: 36px; }
.page-rel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } /* 376*3 + 36*2 = 1200 */
}
.rel-card { min-width: 0; }
.rel-card__link {
display: flex; flex-direction: column; height: 100%;
background: var(--c-white); border-radius: 10px; overflow: hidden;
color: inherit; text-decoration: none;
}
.rel-card__link:hover .rel-card__title { text-decoration: underline; }
.rel-card__media { display: block; }
.rel-card__img,
.rel-card__media .is-empty {
display: block; width: 100%; aspect-ratio: 376 / 283; object-fit: cover; background: var(--c-bg-alt);
}
/* アイキャッチが無いページ。帯と同じ色だと消えるので、少しだけ濃い紫の面にする。
★その上にBROWDIAのロゴを敷く（2026-08-19 発注者）。指定は base.css の --noimage-logo が正本 */
.rel-card__media .is-empty { background: #ECE4F0 var(--noimage-logo); }
.rel-card__body { display: grid; gap: 3px; padding: 13px 12px 14px; }
.rel-card__tags { display: flex; flex-wrap: wrap; gap: 0 10px; margin: 0; }
.rel-card__tag { font-size: 13px; font-weight: 300; line-height: 15px; letter-spacing: .05em; color: var(--c-primary); }
.rel-card__title {
margin: 0; font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: var(--ls-narrow); color: var(--c-text);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; /* カンプは3行 */
}
@media (min-width: 1024px) {
.rel-card__body { padding: 22px 20px 24px; }
.rel-card__tag { font-size: 14px; line-height: 28px; }
.rel-card__title { font-size: 18px; line-height: 28px; }
}
/* ---------------------------------------------------------------- サイドバー
カンプ実測（投稿記事ページ PC x1100..1399・y741..。2026-08-07）。
| | カンプ実測 |
|---|---|
| 「Ranking」 | 40px・--c-primary・**左寄せ** |
| タブ | 高さ32・2つで列を埋める・字18 |
| 写真 | 300x225（**4:3**） |
| エリアバッジ | 写真の右上に重なる |
| 王冠＋No. | **写真の下**・18px |
| サロン名 | 18px・紺・太字 |
| 最寄り駅 | 12px・ピンつき |
★No. は写真の上ではなく下。前の実装は写真の左上に半透明の箱で載せていた。
★写真の比は 4:3。前の 3:2 だと下が25px足りない。
★「Ranking」は左寄せ。前は中央寄せだった。
★SPではサイドバーは本文の下に回る（幅はそのとき本文カラムと同じ）。 */
/* ★入れ物（.art-side / __listing）とカード（写真・名前）の定義は
components.css の .side-card* へ移した（2026-08-07）。
求人・スクールのサイドバーと見た目を揃えるため。ここに書き戻さないこと。
ここに残すのは記事サイドバー固有のもの（タブ・王冠つきの順位）だけ。 */
.art-side__block { display: grid; gap: 12px; }
.art-side__title {
font-family: var(--font-en);
font-size: 40px;
font-weight: 600;
line-height: 1.2;
color: var(--c-primary);
letter-spacing: .05em;
}
.art-side__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.art-side__tab {
height: 35px;
padding: 0 10px;
border: 1px solid var(--c-primary);
border-radius: var(--r-pill);
background: var(--c-white);
color: var(--c-primary);
font-family: var(--font-en);
font-size: 18px;
font-weight: 600;
letter-spacing: var(--ls-wide);
cursor: pointer;
}
.art-side__tab.is-current { background: var(--c-primary); color: var(--c-white); }
/* カンプ実測: カードとカードのあいだ28（スクール一覧のカンプ y2199 -> 2227） */
.art-side__rank, .art-side__new { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
/* ★JSが無いときは最初の国だけ出す（中身が消えるより良い）。
JSが動けば data-side-tabs が is-hidden を付け外しする */
.art-side__rank[data-side-panel]:not(:first-of-type),
.art-side__more[data-side-panel]:not(:first-of-type) { display: none; }
.art-side__rank.is-hidden, .art-side__more.is-hidden { display: none !important; }
.art-side__rank.is-shown { display: grid !important; }
.art-side__more.is-shown { display: block !important; }
.art-side__more { margin: 0; text-align: center; font-size: 14px; }
.art-side__more a { color: var(--c-primary); text-decoration: underline; }
/* ★クラス名は art-rank。side-rank にしないこと。salon.css の .side-rank は
トップ／サロンのサイドバーの（タブ付きの入れ物）で、こちらのとは
まったく別の部品。同じ名前だと、片方に足したルールがもう片方に効いてしまう
（2026-08-07 に改名。それまで .side-rank が2つの意味で使われていた）。 */
/* ★写真の下。前は写真の左上に半透明の箱で載せていた（カンプに無い） */
.art-rank__no {
display: flex; align-items: center; gap: 6px;
/* カンプ実測「写真の下端1083 → No.のインク上端1101 の18」
「No.のインク上端1101 → 名前のインク上端1129 の28」に合わせた値。
★上の7が要るのは、この行が行送り1（18pxの箱）で、
カードの内側の余白（12）だけでは11しか空かないため。
スクール・求人のカードは1行目が名前（28pxの箱）なので、余白12だけで17になる。 */
margin: 7px 0 3px;
font-family: var(--font-en);
font-size: 18px;
font-weight: 600;
line-height: 1;
letter-spacing: var(--ls-narrow);
color: #9B9B9B;
}
.art-rank__crown {
flex: none;
width: 1.17em; height: .89em;
background: currentColor;
-webkit-mask: url("/assets/img/icon-crown.svg") no-repeat center / contain;
mask: url("/assets/img/icon-crown.svg") no-repeat center / contain;
}
.art-rank:nth-child(1) .art-rank__no { color: #BAA145; }
.art-rank:nth-child(2) .art-rank__no { color: #9B9B9B; }
.art-rank:nth-child(3) .art-rank__no { color: #A06B5B; }
.art-rank:nth-child(4) .art-rank__no,
.art-rank:nth-child(5) .art-rank__no { color: var(--c-accent); }
.art-rank__station { font-size: 13px; line-height: 24px; }
/* 固定ページ（本文がブロックではなく素のテキストのとき） */
.page-body { font-size: 15px; line-height: 2; }
@media (min-width: 1024px) { .page-body { font-size: 15px; } }
/* カルーセルの左右ボタン（article.js が足す。JSが無ければ指で流す）。
カンプ実測: 丸の直径 SP 46→23 / PC 36。塗りは --grad-btn（左の丸で #C583B3、
右の丸で #BB7EB9 を実測。どちらも同じグラデを当てた値と一致する）。
★丸の中心が「真ん中のカードの左右の辺」に乗る。
カードの辺までの距離＝track の padding-inline（SP15 / PC125）なので、
left/right はそこから半径を引く。縦はカードのちょうど中央。 */
.blk-case__arrow {
position: absolute; top: 50%;
width: 23px; height: 23px;
transform: translateY(-50%);
border: 0;
border-radius: 50%;
background: var(--grad-btn);
cursor: pointer;
z-index: 1;
}
.blk-case__arrow--prev { left: calc(var(--case-peek) - var(--case-arrow) / 2); }
.blk-case__arrow--next { right: calc(var(--case-peek) - var(--case-arrow) / 2); }
@media (min-width: 1024px) { .blk-case__arrow { width: 36px; height: 36px; } }
.blk-case__arrow::before {
content: ''; position: absolute; inset: 0; margin: auto;
width: 6px; height: 6px;
border-top: 1.5px solid var(--c-white);
border-right: 1.5px solid var(--c-white);
}
@media (min-width: 1024px) {
.blk-case__arrow::before { width: 9px; height: 9px; border-width: 2px; }
}
.blk-case__arrow--prev::before { transform: translateX(1.5px) rotate(-135deg); }
.blk-case__arrow--next::before { transform: translateX(-1.5px) rotate(45deg); }
.blk-case__arrow:hover { opacity: .85; }
/* ---------------------------------------------------------------- 商品CTA（Amazon・楽天・アフィ）
2026-08-21 発注者「アマゾンのCTAと楽天のCTAボックス」→ 同日
「商品画像／軽く詳細／アマゾンボタン（オレンジ）+楽天ボタン（赤）+アフィボタン（紺色）
の３談構造にしましょう」。
上から 画像 → 商品名とひとこと → ボタンの列 の縦積み。
★ボタンの色: Amazon=橙 #E47911 / 楽天=紅 #BF0000（公式色。ブランドの識別が目的なので
サイトのトークンにしない）／アフィ=紺（--c-navy）。 */
.art-body .blk-product {
display: grid; justify-items: center; gap: 12px;
margin: 24px 0; padding: 20px 16px;
border: 1px solid #E4E3F1; border-radius: 8px; background: var(--c-white);
}
.blk-product__media { display: block; }
.blk-product__img {
display: block; width: 200px; max-width: 100%; height: auto; object-fit: contain;
border-radius: 6px; background: #FAF8FB;
}
.blk-product__body { min-width: 0; width: 100%; }
.blk-product__name { font-weight: 700; color: var(--c-navy); line-height: 1.5; margin: 0; text-align: center; }
.blk-product__desc { font-size: 13px; line-height: 1.7; color: #6B6B7B; margin: 6px 0 0; text-align: center; } /* ★中央（2026-08-21 発注者「詳細も中央揃えにして」） */
.blk-product__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 0; width: 100%; }
/* ★.art-body a の下線と色に負けないよう .art-body 付きで書く（本文中に置かれるため） */
.art-body .blk-product__btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 42px; padding: 0 20px; border-radius: 999px;
font-size: 14px; font-weight: 700; color: #fff; text-decoration: none;
transition: opacity .15s;
}
.art-body .blk-product__btn:hover { opacity: .85; color: #fff; }
.art-body .blk-product__btn--amazon { background: #E47911; }
.art-body .blk-product__btn--rakuten { background: #BF0000; }
.art-body .blk-product__btn--qoo10 { background: #E8344E; }
.art-body .blk-product__btn--affi { background: var(--c-navy); }
@media (max-width: 1023px) {
/* ★SPはボタンを縦に全幅で積む。横に3つ並べると文言が窮屈になる */
.blk-product__btn { flex: 1 1 100%; }
}
/* 記事のPR表示（migrations/033）。サロンの .detail-card__pr と同じ見た目 */
.art-head__pr {
display: flex; align-items: center; gap: 6px;
margin: 8px 0 0;
font-size: 11px; line-height: 1.4; letter-spacing: .04em; color: #6B6B6B;
}
.art-head__pr-label {
padding: 1px 6px; border: 1px solid #B9B9C4; border-radius: 3px;
font-weight: 700; font-size: 10px; letter-spacing: .08em; color: #55555F;
}
/* ---------------------------------------------------------------- Shorts
Instagramのリールの帯（2026-08-28 発注者「インスタのリールには力入れていると思うので、
露出できるようにしてほしい」）。ブロック shorts → app/render/blocks.php。
★記事ページは salon.css を読まない（app/pages/article.php の注意書き）ので、
.short* の見た目をここにも持つ。同時に読まれることは無いので衝突しない。
★salon.css の同じ規則を直すときは、こちらも直すこと。
★矢印は出さない（salon.js を読まないため）。はみ出しは横スクロールで見る。 */
/* ★矢印を重ねるので position: relative（2026-08-28 発注者
「ショートを左右クリックできるやつ付けてほしいです」）。 */
.blk-shorts { position: relative; margin: 20px 0; }
.blk-shorts__track {
display: flex; gap: 5px; justify-content: safe center;
overflow-x: auto; scrollbar-width: none;
}
.blk-shorts__track::-webkit-scrollbar { display: none; }
.blk-shorts .short { flex: 0 0 170px; }
@media (min-width: 1024px) { .blk-shorts .short { flex: 0 0 250px; } }
.blk-shorts .short__facade { position: relative; display: block; }
/* 埋め込みを「絵」として敷く版。iframe は枠より背が高く、はみ出しは枠で切る。
狭い枠だとInstagram側のヘッダーが詰まるので、--embed-w の幅で描いて --embed-s で縮める */
.blk-shorts .short__facade--embed {
overflow: hidden; aspect-ratio: 9 / 16; background: var(--c-bg-alt);
--embed-w: 250px; --embed-s: calc(170 / 250);
}
@media (min-width: 1024px) { .blk-shorts .short__facade--embed { --embed-s: 1; } }
.blk-shorts .short__embed {
position: absolute; top: 0; left: 0;
display: block; width: var(--embed-w); height: 720px; border: 0;
transform: scale(var(--embed-s)); transform-origin: 0 0;
pointer-events: none;
}
.blk-shorts .short__facade--embed::after {
content: ""; position: absolute; inset: auto 0 0; height: 56px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .95) 100%);
pointer-events: none;
}
.blk-shorts .short__link { position: absolute; inset: 0; z-index: 1; }
.blk-shorts .short__img,
.blk-shorts .short__facade .is-empty {
display: block; width: 100%; aspect-ratio: 9 / 16;
object-fit: cover; background: var(--c-bg-alt);
}
.blk-shorts .short__play {
position: absolute; inset: 0; margin: auto;
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255, 255, 255, .9);
}
.blk-shorts .short__play::before {
content: "";
position: absolute; inset: 0; margin: auto;
width: 0; height: 0;
border-left: 14px solid var(--c-primary);
border-block: 9px solid transparent;
translate: 2px 0;
}
.blk-shorts .short__channel { font-size: 13px; margin-top: 6px; text-align: center; }
.blk-shorts .short__account { font-size: 12px; color: #8a85a8; text-align: center; }
/* ---- 左右の送り矢印（2026-08-28 発注者「ショートを左右クリックできるやつ付けてほしいです」）
★見た目はサロン詳細の .detail-shorts__nav と同じ値にそろえる。
記事ページは salon.css を読まないので、値をここにも書く必要がある。
片方だけ直すとサロンと記事で矢印の形が変わる。両方直すこと。
★hidden で出発し、はみ出しているときだけJSが出す（押しても動かない矢印を残さない）。 */
.blk-shorts__nav {
position: absolute; top: 50%; translate: 0 -50%;
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0;
border: 0; border-radius: 50%; background: #C282B6;
cursor: pointer;
/* ★z-index は .short__link（各ショートを覆う透明なリンク。z-index:1）より上にする。
同じ 1 だとトラック側のリンクが勝ち、矢印は**見えているのに押せない**
（2026-08-18 にサロン詳細で踏んだ。同じ形なので同じ手当てをしておく）。 */
z-index: 2;
}
.blk-shorts__nav[hidden] { display: none; }
.blk-shorts__nav[disabled] { opacity: .35; cursor: default; }
.blk-shorts__nav--prev { left: 4px; }
.blk-shorts__nav--next { right: 4px; }
.blk-shorts__nav::before {
content: ""; display: block; width: 9px; height: 9px;
border-top: 2px solid var(--c-white); border-right: 2px solid var(--c-white);
}
/* 山形は「く」の字で見た目の重心が線の側に寄る。丸の中心に見えるよう2pxずらす */
.blk-shorts__nav--prev::before { rotate: -135deg; translate: 2px 0; }
.blk-shorts__nav--next::before { rotate: 45deg; translate: -2px 0; }
/* ---- クリニックのページでの見え方（2026-08-28 発注者「サロン詳細ページには、
こーやってのりますってのも入れたい」）。掲載イメージのページの中で使う。
★中身のHTMLは app/templates/parts/artist-cards.php（サロン詳細と同じ部品）。
★★下の .detail-stylists / .stylist* は assets/css/salon.css からの**写し**。
記事ページは salon.css を読まないので、ここにも同じ値が要る。
**片方だけ直さないこと。**値は salon.css を正本として写す（差分を取れるように
並びも同じにしてある）。 */
.clinic-preview {
border: 1px solid #E4E3F1; border-radius: 8px;
padding: 16px; margin: 16px 0; background: var(--c-white);
}
/* ★「これはクリニック側のページの絵です」と分かる見出し。
枠が無いと、band とカードがこのページの1節に見える。 */
.clinic-preview__cap {
font-size: 12px; line-height: 1.6; letter-spacing: .06em;
color: #6B6B6B; margin-bottom: 10px;
}
.clinic-preview__note { font-size: 12px; line-height: 1.8; color: #6B6B6B; margin-top: 18px; }
.clinic-preview .c-detail-title { margin-bottom: 16px; }
/* ↓ここから salon.css の写し（.stylist の一式） */
.detail-stylists { display: grid; gap: 15px; }
.stylist { display: grid; grid-template-columns: 135px minmax(0, 1fr); column-gap: 15px; align-items: start; }
.stylist__img,
.stylist .is-empty {
display: block; width: 100%; aspect-ratio: 1;
object-fit: cover; border-radius: 3px; background: var(--c-bg-alt);
}
.stylist .is-empty {
background: var(--c-bg-alt) url("/assets/img/stylist-placeholder.svg?v=2") no-repeat center / 100% auto;
}
.stylist__role { font-size: 13px; font-weight: 500; line-height: 22px; letter-spacing: .05em; color: var(--c-navy); }
.stylist__name { font-size: 14px; font-weight: 500; line-height: 21px; letter-spacing: .05em; color: var(--c-navy); }
.stylist__desc { font-size: 13px; line-height: 18px; letter-spacing: .1em; color: var(--c-text); margin-top: 8px; }
.detail-lead { font-size: 13px; line-height: 22px; letter-spacing: .06em; color: var(--c-text); margin-bottom: 15px; }
.stylist__days { font-size: 12px; line-height: 18px; letter-spacing: .06em; color: var(--c-text); margin-top: 4px; }
.stylist__pr {
display: inline-block; margin-left: 6px; padding: 1px 6px;
border: 1px solid #B9B9C4; border-radius: 3px;
font-weight: 700; font-size: 10px; letter-spacing: .08em; color: #55555F;
}
.stylist__more { margin-top: 8px; }
.stylist__link {
display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; line-height: 20px; letter-spacing: .06em;
font-weight: 500; color: var(--c-accent); text-decoration: underline;
}
.stylist__link::after { content: "›"; font-size: 15px; line-height: 1; }
@media (min-width: 1024px) {
.detail-stylists { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stylist { display: block; }
.stylist__role { font-size: 14px; line-height: 26px; text-align: center; margin-top: 13px; }
.stylist__name { font-size: 18px; line-height: 26px; text-align: center; }
.stylist__desc { font-size: 14px; line-height: 24px; margin: 9px 12px 0; }
.detail-lead { font-size: 14px; line-height: 24px; margin-bottom: 20px; }
.stylist__days { font-size: 13px; line-height: 20px; text-align: center; margin-top: 5px; }
.stylist__more { text-align: center; }
}
/* ↑ここまで salon.css の写し */
/* ---- フリーランス施術者の一覧の絞り込み（2026-08-28）
★.filters は管理画面のクラス。公開側には無いので、素の の中で
ボタンが縦に積まれて全幅になっていた（実際に描画して気づいた）。 */
.artist-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.artist-filters .btn { padding: 6px 18px; font-size: 14px; min-width: 0; width: auto; }
.artist-filters .btn.is-current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.list-lead { margin: 12px 0 4px; font-size: 14px; line-height: 1.8; }
.list-empty { margin: 24px 0; }
/* ---- 外部リンクのボタンのアイコン（2026-08-28 発注者「アイコンを入れれますか？それぞれ」）
★それまでは Instagram だけ専用で、X・TikTok・LINE は外部リンクの汎用アイコンだった。
★素材はフッターのSNS欄と同じもの（assets/img/icon-x.svg / icon-tiktok.svg / icon-comment.svg）。
★LINEは公式マークを使わない（商標）。汎用の吹き出しにする。
サロン詳細のLINEボタン（.btn__icon--comment）と同じ扱い。 */
.blk-link--x .blk-link__icon { background: #111; }
.blk-link--x .blk-link__icon::before {
inset: 9px;
-webkit-mask-image: url("/assets/img/icon-x.svg"); mask-image: url("/assets/img/icon-x.svg");
}
.blk-link--tiktok .blk-link__icon { background: #111; }
.blk-link--tiktok .blk-link__icon::before {
inset: 8px;
-webkit-mask-image: url("/assets/img/icon-tiktok.svg"); mask-image: url("/assets/img/icon-tiktok.svg");
}
.blk-link--line .blk-link__icon { background: #06C755; }
.blk-link--line .blk-link__icon::before {
inset: 8px;
-webkit-mask-image: url("/assets/img/icon-comment.svg"); mask-image: url("/assets/img/icon-comment.svg");
}
@media (min-width: 768px) {
.blk-link--x .blk-link__icon::before { inset: 11px; }
.blk-link--tiktok .blk-link__icon::before { inset: 10px; }
.blk-link--line .blk-link__icon::before { inset: 10px; }
}