に iv-figure--w{50,60,70,80,90} を付与
*
* 
*
*
* YouTube などの埋め込み: iv-figure--embed を併記（iframe の16:9固定）
*
*
*
*
* スマホ（≤640px）は常に100%（モディファイア無効）
* ========================================================= */
.iv-figure { margin: var(--space-8) 0; }
.iv-figure img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
/* ラッパーで画像をリンク化する場合のサポート
* 例:
* ![]()
*
* を block 化して img の margin:auto 中央寄せを効かせる。 */
.iv-figure a {
display: block;
width: 100%;
text-decoration: none;
color: inherit;
}
/* 埋め込み（YouTube / Vimeo など） */
.iv-figure--embed iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
margin: 0 auto;
border: 0;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
}
/* PC のみ 幅モディファイア（img / iframe 共通 / ラッパー越しでも効くよう子孫セレクタ） */
@media (min-width: 641px) {
.iv-figure.iv-figure--w50 img,
.iv-figure.iv-figure--w50 iframe { width: 50%; }
.iv-figure.iv-figure--w60 img,
.iv-figure.iv-figure--w60 iframe { width: 60%; }
.iv-figure.iv-figure--w70 img,
.iv-figure.iv-figure--w70 iframe { width: 70%; }
.iv-figure.iv-figure--w80 img,
.iv-figure.iv-figure--w80 iframe { width: 80%; }
.iv-figure.iv-figure--w90 img,
.iv-figure.iv-figure--w90 iframe { width: 90%; }
}
.iv-figure-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin: var(--space-8) 0;
}
.iv-figure-grid .iv-figure { margin: 0; }
@media (max-width: 640px) {
.iv-figure-grid { grid-template-columns: 1fr; }
/* スマホは常に100%幅（モディファイア無効化） */
.iv-figure img,
.iv-figure--embed iframe { width: 100%; }
}
/* =========================================================
* 8. Tips ボックス
* ========================================================= */
.iv-tips {
margin: var(--space-10) 0;
padding: var(--space-10);
background: color-mix(in srgb, var(--iv-intro-color, var(--color-accent-2)) 8%, var(--color-base-1));
border-radius: var(--radius-md);
border-left: 4px solid var(--iv-intro-color, var(--color-accent-2));
}
.iv-tips__head {
display: flex;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px dashed var(--color-border);
}
.iv-tips__badge {
display: inline-block;
padding: 0.25em 0.8em;
background: var(--iv-intro-color, var(--color-accent-2));
color: var(--color-text-inverse);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
letter-spacing: 0.05em;
}
.iv-tips__title {
margin: 0;
font-size: var(--font-size-base);
line-height: 1.5;
}
.iv-tips__body {
display: grid;
gap: var(--space-4);
}
.iv-tips--with-image .iv-tips__body {
grid-template-columns: 200px 1fr;
align-items: start;
}
.iv-tips__figure { margin: 0; }
.iv-tips__figure img {
width: 100%;
height: auto;
border-radius: var(--radius-sm);
display: block;
}
.iv-tips__text p {
margin: 0 0 var(--space-3);
line-height: 1.85;
}
.iv-tips__text p:last-child { margin-bottom: 0; }
.iv-tips__link {
display: inline-flex;
align-items: center;
gap: 0.3em;
color: var(--iv-intro-color, var(--color-accent-2));
text-decoration: underline;
}
.iv-tips__link:hover { opacity: 0.8; }
@media (max-width: 640px) {
.iv-tips { padding: var(--space-6); }
.iv-tips--with-image .iv-tips__body { grid-template-columns: 1fr; }
}
/* =========================================================
* 8-2. 本文中の箇条書き（行頭記号付き）
*
* base.css が `ul, ol { list-style: none; }` でサイト全体の
* デフォルト行頭記号を消しているため、記事本文で「普通の箇条書き」
* を出したい時だけ明示的に .iv-list を付与する。
*
* - 標準は disc（黒丸）
* - 番号付きにしたい場合は
-
* - 行間は本文の他ブロック（iv-a / iv-tips__text p）と同じ 1.85
* - 記号色はテーマカラー（--iv-intro-color）に追従。未設定時は
* --color-accent-2 にフォールバック。
* ========================================================= */
.iv-list {
list-style: disc;
padding-left: var(--space-6);
margin: var(--space-6) 0;
color: inherit;
}
.iv-list > li {
margin-bottom: var(--space-2);
line-height: 1.85;
}
.iv-list > li:last-child { margin-bottom: 0; }
.iv-list > li::marker {
color: var(--iv-intro-color, var(--color-accent-2));
}
.iv-list--ordered { list-style: decimal; }
.iv-list--ordered > li::marker {
font-weight: var(--font-weight-bold);
}
/* ネストは一段だけ circle にする（読み物用途では深いネストは想定しない） */
.iv-list .iv-list {
margin: var(--space-2) 0 var(--space-3);
list-style: circle;
}
/* ---- 角丸ボックス変種（.iv-list--boxed） ----
「まとめ」「この記事のポイント」のような束ねたいリストを、
薄いテーマカラー地の角丸四角で囲む。.iv-quote と色味を合わせる。 */
.iv-list--boxed {
padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + var(--space-6));
background: color-mix(in srgb, var(--iv-intro-color, var(--color-accent-2)) 8%, var(--color-base-1));
border-radius: var(--radius-md);
margin: var(--space-8) 0;
}
@media (max-width: 640px) {
.iv-list--boxed {
padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + var(--space-5));
}
}
/* =========================================================
* 8-3. アイコン＋吹き出し（Talk）
*
* 取材相手やキャラクターのアイコン＋セリフ吹き出しブロック。
* .iv-qa（テキストのみの一問一答）とは別系統で、
* ビジュアル重視のセリフ表示に使う。
*
* 基本構造:
*
* ![]()
*
*
*
* 修飾子:
* .iv-talk--right ... アバターを右側に出す（対話の切り返し演出用）
*
* 吹き出しの三角は ::before / ::after の2層構造で描画
* （border 色 → 塗り色の順に重ねて境界線を出す）。
* ========================================================= */
.iv-talk {
display: grid;
grid-template-columns: 100px 1fr;
gap: var(--space-5);
align-items: start;
margin: var(--space-8) 0;
}
.iv-talk__avatar {
width: 100px;
height: 100px;
}
.iv-talk__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.iv-talk__bubble {
position: relative;
padding: var(--space-6) var(--space-8);
background: var(--color-base-1);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
line-height: 1.85;
box-shadow: var(--shadow-sm);
}
.iv-talk__bubble::before,
.iv-talk__bubble::after {
content: "";
position: absolute;
top: 32px;
width: 0;
height: 0;
border-style: solid;
}
.iv-talk__bubble::before {
left: -11px;
border-width: 8px 11px 8px 0;
border-color: transparent var(--color-border) transparent transparent;
}
.iv-talk__bubble::after {
left: -10px;
border-width: 8px 11px 8px 0;
border-color: transparent var(--color-base-1) transparent transparent;
}
.iv-talk__bubble p {
margin: 0 0 var(--space-5);
}
.iv-talk__bubble p:last-child { margin-bottom: 0; }
/* ---- アバター右配置（.iv-talk--right） ---- */
.iv-talk--right {
grid-template-columns: 1fr 100px;
}
.iv-talk--right .iv-talk__avatar { order: 2; }
.iv-talk--right .iv-talk__bubble { order: 1; }
.iv-talk--right .iv-talk__bubble::before {
left: auto;
right: -11px;
border-width: 8px 0 8px 11px;
border-color: transparent transparent transparent var(--color-border);
}
.iv-talk--right .iv-talk__bubble::after {
left: auto;
right: -10px;
border-width: 8px 0 8px 11px;
border-color: transparent transparent transparent var(--color-base-1);
}
@media (max-width: 640px) {
.iv-talk {
grid-template-columns: 64px 1fr;
gap: var(--space-3);
}
.iv-talk--right {
grid-template-columns: 1fr 64px;
}
.iv-talk__avatar { width: 64px; height: 64px; }
.iv-talk__bubble {
padding: var(--space-5) var(--space-6);
}
.iv-talk__bubble::before,
.iv-talk__bubble::after {
top: 20px;
}
}
/* =========================================================
* 8-4. 脚注アンカー（u-note-ref のジャンプ先）
*
* 本文中の *1 から
* 参考文献ブロックの などへジャンプしたとき、
* 着地位置の固定ヘッダ分オフセットは html の scroll-padding-top（base.css）で共通化。
* ここでは :target のハイライト表示のみを扱う。
* ========================================================= */
.article-detail__content [id^="note-"]:target {
background: color-mix(in srgb, var(--iv-intro-color, var(--color-accent-2)) 18%, transparent);
border-radius: var(--radius-sm);
padding: 0 0.2em;
}
/* =========================================================
* 9. ユーティリティ（共通: u-*）
* ========================================================= */
.u-marker {
background: linear-gradient(
transparent 60%,
color-mix(in srgb, var(--iv-intro-color, var(--color-accent-2)) 12%, transparent) 60%
);
padding: 0 0.1em;
font-weight: inherit;
}
/* --main / --accent / --accent-2 はいずれも記事テーマ色（--iv-intro-color）に追従。
未設定時のフォールバックだけ用途別に変える（--main はブランド主色、--accent は濃緑、--accent-2 は青緑）。 */
.u-strong--main { color: var(--iv-intro-color, var(--color-main-dark)); font-weight: var(--font-weight-bold); }
.u-strong--accent { color: var(--iv-intro-color, var(--color-accent-1)); font-weight: var(--font-weight-bold); }
.u-strong--accent-2 { color: var(--iv-intro-color, var(--color-accent-2)); font-weight: var(--font-weight-bold); }
.u-strong--pink { color: var(--color-thread-detail-best-ribbon); font-weight: var(--font-weight-bold); }
/* クラス指定なしの素の はテーマカラー（iv-intro-color）を適用 */
.article-detail__content strong:not([class]) {
color: var(--iv-intro-color, var(--color-accent-2));
font-weight: var(--font-weight-bold);
}
/* 導入文ブロック内は白文字ベースなので除外（文字色は親の white を継承） */
.iv-intro strong:not([class]) { color: inherit; }
/* Tips の も基本は本文同等の扱いだが、バッジやタイトルには影響させない */
/* クラス指定なしの素の （参考文献リンク・本文中のインライン参照リンク等）は
テーマカラー（--iv-intro-color）に揃える。base.css のサイトデフォルトでは
--color-main（明るい青緑）が当たり、Tips 本文では薄すぎて視認性が低いため。
クラス付き （.iv-toc__link / .u-note-ref / .iv-profile__link 等）は
それぞれの色指定を維持できるよう :not([class]) で除外。
iv-toc / iv-intro の内部はいずれも白文字ベースで、生の は置かれない想定。 */
.article-detail__content a:not([class]) {
color: var(--iv-intro-color, var(--color-accent-2));
text-decoration: underline;
text-underline-offset: 0.2em;
}
.article-detail__content a:not([class]):hover,
.article-detail__content a:not([class]):focus-visible {
opacity: 0.8;
}
/* 白抜きブロック内部は親の白文字を継承させる */
.iv-intro a:not([class]),
.iv-toc a:not([class]) { color: inherit; }
.u-text--sm { font-size: var(--font-size-sm); }
.u-text--xs { font-size: var(--font-size-xs); }
.u-text--muted { color: var(--color-text-secondary); }
.u-note-ref {
display: inline-block;
font-size: 0.7em;
vertical-align: super;
line-height: 1;
margin-inline: 0.15em;
color: var(--color-accent-2);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
/* =========================================================
* 本文内テーブル（デフォルト）
* article-detail__content 配下の素の ...
| を使うパターン）のセルが改行禁止になり、列が内容全部の幅まで * 引き伸ばされて、本文 td 側が極端に狭くなる。 * - 長い和文/URL のはみ出し対策として overflow-wrap: anywhere を付与。 * ========================================================= */ .article-detail__content table { width: 100%; border-collapse: collapse; margin: var(--space-8) 0; font-size: var(--font-size-sm); line-height: 1.7; table-layout: auto; } .article-detail__content th, .article-detail__content td { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); vertical-align: top; text-align: left; overflow-wrap: anywhere; } .article-detail__content th { background: color-mix(in srgb, var(--iv-intro-color, var(--color-accent-2)) 10%, var(--color-base-1)); font-weight: var(--font-weight-bold); } @media (max-width: 640px) { .article-detail__content table { font-size: var(--font-size-xs); } .article-detail__content th, .article-detail__content td { padding: var(--space-2) var(--space-3); } } |
|---|