/* Noto Sans JP を読み込む。
   ヒラギノを持たないWindowsでは、細いウェイト（300）が
   最寄りの太さに落ちて全体の印象が変わるため、実体を配る。
   使うのは 300（地の文）/ 500（小ラベル）/ 600（見出し）の3つだけ。
   @import は必ずファイルの先頭に置くこと（それ以降だと無視される）。
   表示を速くするなら、テーマの <head> で link + preconnect にしてもよい。 */
/* 300=地の文 / 500=表の見出し / 600=見出し / 700=本文から抜いた一文。
   700は「抜いた一文」専用。見出し（600）より太くして、傾けずに立てる */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;600;700&display=swap");

/* ============================================================
   DUAD PROJECT 記事スタイル
   src/duad/rendering.py が出力するHTMLに対応する。
   このアプリが /assets/duad.css として配信する。

   配色・タイポは config/brand.yaml の visual と対応させてあるので、
   ブランド定義を変えたときはこの :root も合わせて更新する。
   ============================================================ */

:root {
  --duad-ink: #111111;
  --duad-paper: #f4f1ea;
  /* 記事下に並ぶ節見出しの大きさ。写真・言葉・夢中ポイント・関連・出典・
     DUAD SELECT・CLUB・ニュースレターを、この1つで揃える。
     ばらばらだと、記事の終わりに向かって見出しが騒がしくなる。
     一覧の節見出し（duad-site.css の .duad-section__title）も同じ値を使う。

     **「すべて見る」と同じ行に収まる大きさにする。** 1.35rem では
     「マンガ・アニメ｜MANGA & ANIME」のような長い題で幅が足りず、
     右の「すべて見る」が次の行へ落ちていた。ジャンルによって1行だったり
     2行だったりすると、一覧の頭が揃わない。
     下限は**本文（16px）より小さくしない**ところに置く。字を縮めるだけで
     「すべて見る」を1行に収めようとすると、360px幅で見出しが14.76pxまで
     落ちた。記事下の「みんなの写真」「参考資料・出典」まで本文より小さくなり、
     見出しに見えなくなる。幅は英字の呼び名を一段小さく組んで作った
     （duad-site.css の .duad-section__en）。
     値は本番を 360/375/390px で測って決めている。 */
  --duad-section-head: clamp(1.02rem, 4.1vw, 1.22rem);
  --duad-accent: #cc2118;   /* キーカラー（赤） */
  --duad-steel: #4a5560;
  --duad-line: #ddd8cc;
  /* 書体はゴシックで通す。明朝を使わないぶん、
     見出しは太らせて字間を詰め、本文との差をつける。 */
  --duad-display: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
                  "Hiragino Sans", "Yu Gothic", "Helvetica Neue", sans-serif;
  --duad-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ============================================================
   レイアウトはスマホ基準で組み、広い画面は @media で足していく。
   読者は40〜60代。文字は大きめ、行間は広め、タップ領域は広く取る。
   ============================================================ */

/* padding を持つ枠が、幅の指定（100%）に padding を足してはみ出さないようにする。
   テーマ側が border-box を敷いているとは限らないので、DUADの要素は自前で指定する。
   （ヒーロー写真の枠が本文より広くなっていたのはこれが原因） */
[class*="duad-"],
[class*="duad-"]::before,
[class*="duad-"]::after {
  box-sizing: border-box;
}

/* **body の初期マージンを落とす。**
   ブラウザは body に 8px の margin を持たせる。上のリセットはクラス名で
   引いているので body には届かず、ヘッダーの赤帯もフッターの黒地も
   画面の端に着かず、左右に 8px ずつ白が残っていた。
   PCでもスマホでも同じ 8px なので、狭い画面ほど目立つ。
   端まで塗る面（赤帯・黒地・キービジュアル）を持つ作りでは、
   この 8px が「枠のある紙」に見えてしまう。 */
body {
  margin: 0;
}

/* **上のリセットはクラス名で引いているので、クラスの無い子要素に届かない。**
   メール欄は <input type="email" name="email"> でクラスを持たないため
   ブラウザ既定の content-box のまま残り、padding と枠線のぶん幅が増えていた。
   <button> は既定が border-box なので影響を受けず、入力欄だけが器から
   右にはみ出す（左右の余白が揃わない）。フォーム部品をまとめて倒す。 */
[class*="duad-"] input,
[class*="duad-"] button,
[class*="duad-"] select,
[class*="duad-"] textarea {
  box-sizing: border-box;
}

/* ページの土台をゴシックにする。
   **数え上げでは追いつかない。** 下の一覧は「記事を構成するブロック」を
   並べたものだが、一覧に無い要素はブラウザ既定＝明朝で出る。lang="ja" の
   既定は多くの環境で明朝なので、指定漏れは必ず明朝として現れる。
   実際、記事の器の外に置いた要素が明朝で出た。
   サイト全体をこのアプリが配るようになったので、ここで土台ごと倒す。 */
html,
body {
  font-family: var(--duad-body);
  /* **器に入らない一続きの文字列は、途中で折る。**
     「1,290mm→1,295mm→1,295mm→1,290mm→…」のように矢印でつないだ数字の列は、
     矢印に折り返しの機会が無いので1つの長い語として扱われる。
     スマホでは器の幅を116px超えてページごと横に伸び、
     ヘッダーも本文も右へずれて見えていた（プレリュードVOL.3）。
     `break-word` は、**そのままでは溢れる語だけ**を折る。
     普通の文の折り返しは変わらない */
  overflow-wrap: break-word;
}

/* 入力欄とボタンは、既定では書体を受け継がない（OS側の書体で出る）。
   会員登録・投稿フォーム・検索窓が、周りの文と違う書体になる。 */
input,
button,
select,
textarea {
  font-family: inherit;
}

/* 記事を構成するブロック。上の土台があるので、ここは太さ（300）のためと、
   このCSSだけを他所に持ち出したときの保険として残す。 */
.duad-article__header,
.duad-lead,
.duad-toc,
.duad-article__body,
.duad-figure,
.duad-gallery,
.duad-column,
.duad-product-card,
.duad-select,
.duad-club,
.duad-editorial-notes,
.duad-sources,
.duad-newsletter,
.duad-related,
.duad-photos,
.duad-photo-submit,
.duad-disclosure {
  font-family: var(--duad-body);
  /* 全体を一段細く。地の文は既定(400)ではなく300で組む。
     見出しとの差は太さではなく、大きさと字詰めで付ける。 */
  font-weight: 300;
}

/* ---------- 冒頭（ジャンル → タイトル → リード文 → ヒーロー写真） ---------- */

/* タイトルの上の英字ジャンル。ジャンルTOPへの入口 */
.duad-article__genre {
  /* 上の余白は器（.duad-article__layout）が持つ。
     ここに付けると、本文だけが下がって左の欄と頭がそろわない */
  margin: 0 0 .5rem;
  font-size: .72rem;
  letter-spacing: .22em;
  font-weight: 600;
}

/* 見出しの3つ目。メーカーと商品名。
   ジャンルのリンクとは別物なので、色を落として区別する */
.duad-article__product {
  color: var(--duad-steel);
  letter-spacing: .08em;
}

.duad-article__genre a {
  color: var(--duad-accent);
  text-decoration: none;
}
.duad-article__genre a:hover { text-decoration: underline; }

.duad-article__header {
  margin: 0 0 2rem;
}

/* 記事の顔。タイトルの文字から組んだ画を、本文と同じ幅で置く。
   写真の手配を待たずに公開できる。 */
.duad-keyvisual {
  margin: 1.4rem 0 1.6rem;
}

.duad-keyvisual img {
  display: block;
  width: 100%;
  height: auto;
}

/* 読者の投稿写真が入ったときは、こちらがヒーローになる。
   記事の1枚目。横位置で大きく見せる。キャプションは付けない。
   タイトルの「下」、リード文の「上」に来る。
   幅は本文と揃える。画だけ全幅に抜くと、文字の左右ラインが折れて見える。 */
.duad-hero {
  margin: 1.4rem 0 1.6rem;
  width: 100%;
}

.duad-hero .duad-figure__image,
.duad-hero .duad-figure__placeholder {
  width: 100%;
  /* 横位置。縦だとスマホで1枚が画面を占有し、本文まで指が届かない */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.duad-article__title {
  font-weight: 600;
  font-family: var(--duad-display);
  /* タイトルは短い一行として書かれる（「911は、まだ早い。」）。
     説明はサブタイトルに降りているので、ここは思い切り大きく組む。
     大小の差が、そのまま「どちらを先に読むか」の指示になる。

     大きさは記事によらず一定にする。記事ごとに変えると、
     一覧から記事へ移るたびに見出しの大きさが動いて落ち着かない。

     2行になるのは構わないが、語の途中で割れると読めない
     （「白いTシャツが似合／う大人になれたか。」）。
     keep-all で「どこでも折る」を止め、レンダリング時に入れた
     <wbr>（文の区切り）でだけ折らせる。行の長さを揃えるのは balance。
     どうしても収まらないときだけ anywhere で逃がす。 */
  font-size: 2.1rem;
  line-height: 1.32;
  letter-spacing: -.01em;
  margin: 0 0 .6rem;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* サブタイトルは2段。前半の一句を本文より大きく組み、
   型番・年式の羅列はそのあとに小さく続ける。
   全部を同じ大きさで並べると、読み始める手がかりが無くなる。 */
.duad-article__subtitle {
  margin: 0 0 .4rem;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--duad-ink);
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 連載の表示。タイトルとサブタイトルの下に置く。
   サブタイトルより小さく、色も落とす。ここが同じ強さで並ぶと、
   記事の題とシリーズ名のどちらを読めばいいのか分からなくなる */
.duad-article__series {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.7em;
  margin: 0.7rem 0 1.2rem;
}

.duad-article__series-label {
  font-family: var(--duad-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--duad-accent);
}

.duad-article__series-name {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--duad-steel);
}

.duad-article__subtitle-detail {
  display: block;
  margin: 0 0 1.2rem;
  font-size: .92rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--duad-steel);
}

/* リード文。本文より一段大きく組んで、読み始めの負荷を下げる */
.duad-lead {
  font-size: 1.075rem;
  line-height: 2;
  letter-spacing: .01em;
  padding-left: .9rem;
  border-left: 3px solid var(--duad-accent);
}
.duad-lead p { margin: 0 0 1.1em; }
.duad-lead p:last-child { margin-bottom: 0; }

/* ---------- 目次 ---------- */

.duad-toc {
  margin: 2rem 0;
  padding: 1.1rem 1.2rem;
  background: #fff;
  border: 1px solid var(--duad-line);
}

.duad-toc__title {
  font-weight: 600;

  margin: 0 0 .7rem;
  font-family: var(--duad-display);
  font-size: 1.05rem;
  border: none;
  padding: 0;
}

.duad-toc__list {
  margin: 0;
  padding-left: 1.3em;
  counter-reset: none;
}

.duad-toc__list li { margin: 0; }

.duad-toc__list a {
  display: block;
  /* 指で押せる高さを確保する（44px以上） */
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: .35rem 0;
  color: var(--duad-ink);
  text-decoration: none;
  line-height: 1.6;
  border-bottom: 1px solid var(--duad-line);
}
.duad-toc__list li:last-child a { border-bottom: none; }
.duad-toc__list a:hover,
.duad-toc__list a:focus { color: var(--duad-accent); }

/* 目次から飛んだとき、固定ヘッダ（3段・約116px）の下に潜らないようにする */
.duad-article__body h2[id] { scroll-margin-top: 124px; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 本文 ---------- */

.duad-article__body {
  font-family: var(--duad-body);
  color: var(--duad-ink);
  font-size: 1.0625rem;
  line-height: 1.95;      /* 読者は40〜60代。行間は広めに取る */
  letter-spacing: 0.02em;
}

.duad-article__body > p {
  margin: 0 0 1.6em;
}

.duad-article__body h2 {
  font-weight: 600;
  font-family: var(--duad-display);
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 3rem 0 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--duad-accent);
  letter-spacing: 0.01em;
}

.duad-article__body h3 {
  font-weight: 600;

  font-family: var(--duad-display);
  font-size: 1.2rem;
  margin: 2.2rem 0 0.8rem;
  padding-left: 0.6rem;
  border-left: 4px solid var(--duad-accent);
}

.duad-article__body strong { font-weight: 600; }
.duad-article__body em { font-style: normal; color: var(--duad-accent); }

.duad-article__body a {
  color: var(--duad-accent);
  text-underline-offset: 0.2em;
}

.duad-article__body blockquote {
  margin: 2rem 0;
  padding: 0.2rem 0 0.2rem 1.2rem;
  border-left: 3px solid var(--duad-line);
  color: var(--duad-steel);
}

.duad-article__body ul,
.duad-article__body ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.duad-article__body li { margin-bottom: 0.5em; }

/* 数値の比較表。横スクロールで潰れないようにする */
.duad-article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.duad-article__body th,
.duad-article__body td {
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--duad-line);
  text-align: left;
}
.duad-article__body th { background: rgba(0, 0, 0, 0.04); font-weight: 500; }
.duad-article__body td:not(:first-child) { text-align: right; }

/* ---------- 組版のリズム（文字だけで構成する記事のための装置） ----------
   写真を使わないぶん、段落だけが続くと読者の目が止まらない。
   大きな一文と大きな数字を置いて、読み進める調子を作る。
   使う道具は文字の大小と余白だけで、色や飾りは足さない。 */

/* 本文の一文を大きく組んで、読み進む速度を一度落とす枠。
   写真を使わない記事では、ここが唯一の「間」になる。本文と1.5倍しか
   差がないと間として効かないので、はっきり大きく、上下を大きく空ける。
   罫は左に立てず、上に短く引く（キービジュアルの肩の罫と同じ形）。 */
/* 中の文字の大きさを欄の幅から決めるため */
.duad-statement {
  margin: 4rem 0 4.4rem;
  padding: 1.6rem 0 0;
  border-top: 2px solid var(--duad-ink);
}

.duad-statement__text {
  margin: 0;
  font-family: var(--duad-display);
  /* 節見出し（1.5rem / 600）より、大きく・太くする。
     日本語書体に本物の斜体は無く、斜体指定は正体を機械的に傾けるだけなので使わない
     （仮名が歪み、英数字だけ本物の斜体になって傾きが揃わない）。
     見分けるのは大きさと太さ。 */
  /* 抜き出した一文は12字前後で1行になるよう書いている。
     字が大きすぎて12字が入らないと、読点の前で折れる逃げ場が無くなり
     「…ないのに／、所作は」と読点が行頭に落ちる。
     「12字が入る大きさ」を上限として直接書く（枠は画面幅−約50px）。 */
  font-size: min(1.8rem, calc((100vw - 50px) / 12));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  /* 行の長さを揃える。1行目が長く2行目が2文字、を避ける */
  text-wrap: balance;
  /* <wbr> を置いた位置でだけ折る。これが無いと「描けた。そ／れでも」と割れる */
  word-break: keep-all;
  /* 句読点を行頭に送らない。anywhere だと禁則より優先され、
     「…ないのに／、所作は」と読点が次の行の頭に落ちた */
  line-break: strict;
  /* 1語で行幅を超えるとき（長い英数字）だけ、最後の手段として割る。
     break-word は <wbr> と禁則を活かしたうえでの最後の手段になる */
  overflow-wrap: break-word;
}

.duad-number {
  /* **図版の下に、本文と分かれる余白を置く。**
     下線のすぐ次の行から本文が始まり、注記と地の文が続きに見えていた
     （「1日に組み上がったS20の基数」の直後に「それが1967年、」が来る）。
     上下で差を付け、下を厚くする。 */
  margin: 3.2rem 0 3.6rem;
  padding: 1.4rem 0;
  border-top: 2px solid var(--duad-ink);
  border-bottom: 1px solid var(--duad-line);
  text-align: center;
}

.duad-number__value {
  margin: 0;
  font-family: var(--duad-display);
  font-size: 3.6rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.duad-number__unit {
  font-size: 0.36em;
  font-weight: 500;
  margin-left: 0.15em;
  letter-spacing: 0;
}

.duad-number__label {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  font-weight: 500;
}

.duad-number__note {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--duad-steel);
  line-height: 1.7;
}

/* ---------- 図版（写真・図解） ---------- */

/* 1記事20点前後の写真が入る。図版が主役になっても本文が沈まない間隔にする */
.duad-figure {
  margin: 2.2rem 0 2.8rem;
  padding: 0;
}

/* 図解は写真より重いので、前後をやや広く取って区切る */
.duad-figure:not([data-kind="photo"]) {
  margin: 3rem 0;
}

/* 写真が連続したときに、間延びさせない */
.duad-figure[data-kind="photo"] + .duad-figure[data-kind="photo"] {
  margin-top: 1.4rem;
}

.duad-figure__svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--duad-line);
}

.duad-figure__image {
  display: block;
  width: 100%;
  height: auto;
}

/* 写真の向き。枠の比率を先に確保しておくことで、
   実写真を差し込んだ瞬間にレイアウトが跳ねる（CLS）のを防ぐ。 */
.duad-figure__image[data-orientation="portrait"],
.duad-figure__placeholder[data-orientation="portrait"] { aspect-ratio: 3 / 4; }
.duad-figure__image[data-orientation="landscape"],
.duad-figure__placeholder[data-orientation="landscape"] { aspect-ratio: 3 / 2; }
.duad-figure__image[data-orientation="square"],
.duad-figure__placeholder[data-orientation="square"] { aspect-ratio: 1 / 1; }

.duad-figure__image { object-fit: cover; }

/* 写真が未差し込みのとき。空白ではなく「何を撮るか」を残す */
.duad-figure__placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.4rem;
  overflow: hidden;
  background: repeating-linear-gradient(
    45deg, var(--duad-paper), var(--duad-paper) 10px,
    #ece7dc 10px, #ece7dc 20px
  );
  border: 1px dashed var(--duad-steel);
  text-align: center;
}

.duad-figure__placeholder-label {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--duad-steel);
}

.duad-figure__placeholder-direction {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--duad-ink);
}

/* 諸元表 */
.duad-figure__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  background: #fff;
  margin: 0;
}
.duad-figure__table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding: .5rem .7rem;
  background: var(--duad-ink);
  color: var(--duad-paper);
}
.duad-figure__table th,
.duad-figure__table td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--duad-line);
  text-align: left;
}
.duad-figure__table th { font-weight: 500; width: 40%; }

/* 値は**左揃え**の太字。注記はそのうしろに、小さく色を落として置く。
   同じ濃さで並べると、注記の「7,000rpm」が2つ目の値に見えてしまう。

   以前は右揃えだった。数字は右で揃えるのが定石だが、**この表は行ごとに
   単位が違う**（cc / mm / PS / kg-m / kg/cm2）。右で揃えても揃うのは
   単位の末尾で、肝心の数字の書き出しがばらついた。実際に諸元表で
   「66mm」「7.6」「2,220mm」だけが右へ寄って見えていた。
   左で揃えれば、値の頭に1本の縦線が通る。
   桁は tabular-nums で揃える。 */
.duad-figure__table .duad-figure__value {
  text-align: left;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.duad-figure__table .duad-figure__note {
  width: 28%;
  font-size: .84rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--duad-steel);
}
.duad-figure__table tr.is-highlight { background: rgba(204, 33, 24, .08); }
.duad-figure__table tr.is-highlight .duad-figure__value { color: var(--duad-accent); }

/* 本文の表は「1列目以外は右揃え」で組んである。その規則のほうが
   詳しく（0,2,1）、諸元表の指定（0,2,0）に勝ってしまう。
   ここで上書きしないと、値も注記も右へ寄る */
.duad-article__body .duad-figure__table td.duad-figure__value { text-align: left; }
.duad-article__body .duad-figure__table td.duad-figure__note { text-align: left; }

.duad-figure__caption {
  margin-top: .7rem;
  font-size: .85rem;
  line-height: 1.8;
  color: var(--duad-steel);
}

.duad-figure__title {
  display: block;
  font-weight: 600;
  color: var(--duad-ink);
  margin-bottom: .15rem;
}

/* 画像のクレジット。CC BY / BY-SA は表示が条件なので、小さくても必ず出す */
.duad-figure__credit {
  display: block;
  margin-top: .35rem;
  font-size: .72rem;
  color: var(--duad-steel);
  opacity: .85;
}
.duad-figure__credit a { color: inherit; }

.duad-figure__source {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  opacity: .8;
}

/* ---------- 広告表記（景品表示法） ---------- */

.duad-disclosure {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--duad-steel);
}

.duad-disclosure--top {
  margin: 0 0 2rem;
  padding: 0.6rem 0.9rem;
  background: rgba(204, 33, 24, 0.06);
}

.duad-disclosure--bottom {
  margin: 3rem 0 0;
  padding: 1rem 1.1rem;
  border-top: 1px solid var(--duad-line);
  background: rgba(0, 0, 0, 0.02);
}

.duad-disclosure__text { margin: 0 0 0.5em; }
.duad-disclosure__text:last-child { margin-bottom: 0; }

/* 商標・非公式である旨。他の表記と混ざらないよう一段落とす */
.duad-disclosure__text--trademark {
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--duad-line);
  font-size: 0.95em;
}

/* ---------- 商品カード（アフィリエイト導線） ---------- */

.duad-product-card {
  margin: 2.5rem 0;
  padding: 1.3rem 1.4rem;
  background: #fff;
  border: 1px solid var(--duad-line);
  border-top: 3px solid var(--duad-accent);
}

.duad-product-card__lead {
  margin: 0 0 0.7em;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--duad-steel);
}

.duad-product-card__name {
  margin: 0 0 0.4em;
  font-family: var(--duad-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
}

.duad-product-card__price {
  margin: 0 0 0.9em;
  font-size: 0.9rem;
  color: var(--duad-steel);
  font-variant-numeric: tabular-nums;
}

/* ボタンの上下を同じ間隔にする。上が0だと、直前のスペック行に接する */
.duad-product-card__action { margin: 0.6em 0; }

.duad-product-card__link {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  background: var(--duad-ink);
  color: var(--duad-paper) !important;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--duad-ink);
  transition: background 0.15s ease, color 0.15s ease;
}
.duad-product-card__link:hover,
.duad-product-card__link:focus {
  background: var(--duad-accent);
  border-color: var(--duad-accent);
}

/* ASPごとにボタンの色味を変え、遷移先が分かるようにする */
.duad-product-card[data-network="rakuten"] .duad-product-card__link {
  background: #bf0000;
  border-color: #bf0000;
}
.duad-product-card[data-network="rakuten"] .duad-product-card__link:hover {
  background: #8c0000;
  border-color: #8c0000;
}

.duad-product-card__note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--duad-steel);
}

/* ---------- この記事で確かめたこと ---------- */

.duad-editorial-notes {
  margin: 3rem 0;
  padding: 1.4rem 1.5rem;
  background: var(--duad-paper);
  border: 1px solid var(--duad-line);
}

.duad-editorial-notes h2 {
  margin: 0 0 0.9rem;
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  border: none;
  padding: 0;
}

.duad-editorial-notes ul { margin: 0; padding-left: 1.2em; }
.duad-editorial-notes li {
  margin-bottom: 0.5em;
  font-size: 0.95rem;
  line-height: 1.8;
}
.duad-editorial-notes li::marker { color: var(--duad-accent); }

/* 直した日。**目立たせない。**
   記事は公開後も直るので、読者が古い版のままになっていないかを
   確かめられる手がかりだけ置く。囲みの右下に、本文より小さく淡く。 */
.duad-editorial-notes__updated {
  margin: 1rem 0 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--duad-muted, #8a8a8a);
  letter-spacing: 0.02em;
}

/* ---------- 出典 ---------- */

.duad-sources {
  margin: 2.5rem 0;
  font-size: 0.88rem;
}

.duad-sources h2 {
  margin: 0 0 0.7rem;
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  border: none;
  padding: 0;
  color: var(--duad-steel);
}

.duad-sources ul { margin: 0; padding-left: 1.2em; }
.duad-sources li { margin-bottom: 0.4em; line-height: 1.7; }
.duad-sources a { color: var(--duad-steel); word-break: break-all; }

/* 前書き。ここに挙げるのが「調べたもの」ではなく「使ったもの」だと断る */
.duad-sources__lead {
  margin: 0 0 1.4rem;
  color: var(--duad-steel);
  line-height: 1.9;
}

/* 層ごとの束。**見出しを立てすぎない。** 出典は読み物ではないので、
   本文の見出しと同じ強さで並ぶと、記事の構造が二重に見える */
.duad-sources__group { margin: 0 0 1.3rem; }

.duad-sources__tier {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--duad-ink);
}

/* 件数。数えられることが分かればよいので、字は小さく落とす */
.duad-sources__count {
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--duad-steel);
  font-variant-numeric: tabular-nums;
}

.duad-sources__count::before { content: "（"; }
.duad-sources__count::after { content: "件）"; }

/* 百科事典・個人の記録に付ける断り。隠さずに、扱いを書く */
.duad-sources__note {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--duad-steel);
}

.duad-sources__checked {
  margin: 1.2rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--duad-line);
  font-size: 0.8rem;
  color: var(--duad-steel);
  font-variant-numeric: tabular-nums;
}

/* ---------- ニュースレター登録 ---------- */

.duad-newsletter {
  margin: 3.5rem 0;
  padding: 1.8rem 1.6rem;
  background: var(--duad-ink);
  color: var(--duad-paper);
  text-align: center;
}

.duad-newsletter h2 {
  font-weight: 600;

  margin: 0 0 0.5rem;
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  color: var(--duad-paper);
  border: none;
  padding: 0;
}

.duad-newsletter > p {
  margin: 0 0 1.2rem;
  font-size: 0.92rem;
  opacity: 0.85;
}

.duad-newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
}

.duad-newsletter__form input[type="email"] {
  flex: 1 1 16rem;
  max-width: 22rem;
  padding: 0.7rem 0.9rem;
  /* 欄が広いので、左端に寄せると1行の中で文字が迷子になる。
     プレースホルダも入力した文字も中央で揃える */
  text-align: center;
  font-size: 1rem;   /* 16px未満だとiOSで拡大される */
  border: 1px solid var(--duad-line);
  background: #fff;
  color: var(--duad-ink);
}

.duad-newsletter__consent {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.duad-newsletter__form button {
  padding: 0.7rem 1.8rem;
  font-size: 1rem;
  font-weight: 500;
  background: var(--duad-accent);
  color: #fff;
  border: none;
  cursor: pointer;
}
.duad-newsletter__form button:hover { background: #a81a12; }

/* 「.duad-newsletter > p」（詳細度0,1,1）に負けて margin-top が
   0 になり、ボタンと注記がくっついていた。子セレクタで詳細度を上げる */
.duad-newsletter > .duad-newsletter__note {
  margin: 0.9rem 0 0;
  font-size: 0.75rem;
  opacity: 0.7;
}


/* ============================================================
   収益導線。本文とは見た目をはっきり分ける。
   地の文と同じ見た目にすると、記事全体が広告に見える。
   ============================================================ */

/* ---------- 本文の切れ目に差し込むコラム枠 ---------- */

.duad-column {
  margin: 3rem 0;
  padding: 1.4rem 1.3rem 1.1rem;
  background: var(--duad-paper);
  border-top: 2px solid var(--duad-ink);
  border-bottom: 1px solid var(--duad-line);
}

/* 見出しの上の赤い一行。本文中のTIPSコラム（.duad-tips__label）と
   同じ組みにする。並んで出てくる2つの囲みなので、
   別々に持たせると必ずどちらかがずれる */
.duad-column__eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--duad-display);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--duad-accent);
}

/* **詳細度に注意。** `.duad-article__body h3`（0,1,1）は
   このクラス単体（0,1,0）に勝つので、margin-top: 2.2rem が
   そのまま効いて、赤い一行と見出しが35px離れていた。
   本文の中に置かれる部品なので、本文の器から書く */
.duad-article__body .duad-column__title,
.duad-column__title {
  font-weight: 600;
  margin: 0 0 0.7rem;
  font-family: var(--duad-display);
  font-size: 1.15rem;
  line-height: 1.5;
}

.duad-column__lead {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.9;
}

/* 1枠に複数点並ぶので、カード同士の間隔を詰める */
.duad-column__items {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* 枠の中の商品カードは、枠と二重に囲まない */
.duad-column .duad-product-card {
  margin: 0;
  border: none;
  background: #fff;
}

/* ---------- 記事末尾のまとめ枠 DUAD SELECT ---------- */

.duad-select {
  margin: 3.5rem 0;
  padding: 1.8rem 1.5rem 1.5rem;
  background: #fff;
  border: 2px solid var(--duad-ink);
}

.duad-select__heading {
  font-weight: 600;

  margin: 0 0 0.5rem;
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  letter-spacing: 0.14em;
  border: none;
  padding: 0;
}

.duad-select__lead {
  margin: 0 0 1.4rem;
  font-size: 0.9rem;
  color: var(--duad-steel);
}

/* 書籍と物販が混ざるときだけ出る小見出し */
.duad-select__category {
  font-weight: 600;

  margin: 1.6rem 0 0.2rem;
  font-family: var(--duad-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--duad-steel);
  border: none;
  padding: 0;
}
.duad-select__category:first-of-type { margin-top: 1rem; }

.duad-select__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.duad-select__item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--duad-line);
}

.duad-select__name {
  margin: 0 0 0.35rem;
  font-weight: 600;
  line-height: 1.6;
}

.duad-select__reason {
  margin: 0 0 0.8rem;
  font-size: 0.88rem;
  color: var(--duad-steel);
  line-height: 1.8;
}

.duad-select__link {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  background: var(--duad-accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}
.duad-select__link:hover { background: #a81a12; }

.duad-select__note {
  margin: 1.2rem 0 0;
  font-size: 0.72rem;
  color: var(--duad-steel);
  line-height: 1.7;
}

/* ---------- 有料オンラインコミュニティ DUAD CLUB ---------- */

.duad-club {
  margin: 3.5rem 0;
  padding: 1.9rem 1.6rem;
  background: var(--duad-steel);
  color: #fff;
}

.duad-club__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  font-weight: 600;
  opacity: 0.85;
}

.duad-club__heading {
  font-weight: 600;

  margin: 0 0 0.8rem;
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  color: #fff;
  border: none;
  padding: 0;
}

/* 呼びかけの3行。1文ずつ改行して、まとまりとして読ませる。
   段落と同じ余白を空けると、3つの別の話に見える */
.duad-club__intro {
  margin: 0 0 0.15em;
  font-size: 1.05rem;
  line-height: 1.7;
}
/* 呼びかけの最後と、説明のあいだ。
   段落どうしの余白（0.6rem）に揃える。ここだけ広いと、
   3行の呼びかけと本文が別の塊に見える。
   :last-of-type は「pの最後」を指すので、後ろにleadが続くと当たらない */
.duad-club__intro + .duad-club__lead { margin-top: 0.6rem; }

.duad-club__lead {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  line-height: 1.8;
}

.duad-club__description {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.9;
  opacity: 0.9;
}

.duad-club__benefits {
  margin: 0 0 1.2rem;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.9;
}

.duad-club__status {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  opacity: 0.8;
}

.duad-club__action { margin: 0; }

.duad-club__link {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--duad-accent);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}
.duad-club__link:hover { background: #a81a12; }

.duad-club__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.duad-club__form input[type="email"] {
  flex: 1 1 16rem;
  max-width: 22rem;
  padding: 0.7rem 0.9rem;
  /* 欄が広いので、左端に寄せると1行の中で文字が迷子になる。
     プレースホルダも入力した文字も中央で揃える */
  text-align: center;
  font-size: 1rem;   /* 16px未満だとiOSで拡大される */
  border: 1px solid var(--duad-line);
  background: #fff;
  color: var(--duad-ink);
}

.duad-club__consent {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.duad-club__form button {
  padding: 0.7rem 1.8rem;
  font-size: 1rem;
  font-weight: 500;
  background: var(--duad-accent);
  color: #fff;
  border: none;
  cursor: pointer;
}
.duad-club__form button:hover { background: #a81a12; }


/* ---------- 写真ギャラリー（横スクロール） ----------
   写真は1記事20点前後になる。全部を縦に積むと本文の分量に対して画が多すぎる。
   同じ括りの写真は横に流し、縦方向のブロック数を10前後に抑える。 */

/* ギャラリーも本文の幅に収める。横スクロールはこの枠の中で起きる */
.duad-gallery {
  margin: 2.4rem 0;
  width: 100%;
}

.duad-gallery__label {
  margin: 0 0 .6rem;
  font-size: .78rem;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--duad-steel);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.duad-gallery__count {
  font-size: .72rem;
  font-weight: 300;
  opacity: .75;
  white-space: nowrap;
}

.duad-gallery__track {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 1rem;
  scrollbar-width: thin;
}

.duad-gallery__item {
  flex: 0 0 78%;          /* 次の1枚が少し覗く幅。横に続くと分かる */
  max-width: 20rem;
  margin: 0;
  scroll-snap-align: center;
}

.duad-gallery__item .duad-figure__caption {
  padding: 0;
  font-size: .82rem;
}

/* ---------- 画面幅に応じた調整 ----------
   基準はスマホ。広い画面で足りない分だけを足す。 */

/* 表はスマホでは横スクロールさせ、本文の横スクロールは起こさせない */
.duad-article__body table,
.duad-figure__table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* **上の `.duad-article__body table` は、図版の中の <table> にも当たる。**
   そこに display:block が付くと、Safari では行が内容幅まで縮み、
   器は全幅なのに表だけ右端が短い、という見え方になる
   （Chromeは全幅で描くので気づけない）。
   横スクロールは器（.duad-figure__table）が持てば足りるので、
   中の table は table のまま全幅に保つ。 */
.duad-figure__table table {
  display: table;
  width: 100%;
  min-width: 20rem;
}

/* スマホでは、どのブロックも本文と同じ左右ラインに載せる。
   一部だけ画面幅いっぱいに抜くと、記事全体の縦のラインが折れて見える。 */
@media (max-width: 640px) {
  .duad-newsletter__form { flex-direction: column; align-items: stretch; }
  /* 縦並びでは主軸が縦になるので、flex-basis の 16rem が**高さ**として効く。
     入力欄が256px超の白い箱になっていた。縦では伸縮させない */
  .duad-newsletter__form input[type="email"] {
    /* 縦並びでは flex-basis が高さになるので伸縮を止める。

       **幅は明示する。** 以前は align-items: stretch に任せていたが、
       Safari は入力欄の stretch を効かせきらず、器より右へ伸びていた
       （Chromeでは揃うので手元では気づけない）。
       width:100% が使えるのは、フォーム部品を border-box に倒したあと。
       content-box のままだと padding と枠線が足されてはみ出す */
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .duad-club__form button {
    /* ボタンも器に合わせる。入力欄と同じく幅を明示する */
    width: 100%;
    min-width: 0;
  }
  .duad-newsletter__form button {
    /* ボタンも器に合わせる。入力欄と同じく幅を明示する */
    width: 100%;
    min-width: 0;
  }
  .duad-newsletter__consent { justify-content: center; white-space: normal; }
  .duad-product-card__link { display: block; text-align: center; }
  .duad-select__link { display: block; text-align: center; }
  .duad-club__form { flex-direction: column; align-items: stretch; }
  /* 上と同じ理由。縦並びでは flex-basis が高さになる */
  .duad-club__form input[type="email"] {
    /* 縦並びでは flex-basis が高さになるので伸縮を止める。

       **幅は明示する。** 以前は align-items: stretch に任せていたが、
       Safari は入力欄の stretch を効かせきらず、器より右へ伸びていた
       （Chromeでは揃うので手元では気づけない）。
       width:100% が使えるのは、フォーム部品を border-box に倒したあと。
       content-box のままだと padding と枠線が足されてはみ出す */
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
  }
  .duad-club__link { display: block; text-align: center; }
}

/* タブレット以上 */
@media (min-width: 641px) {
  .duad-article__title { font-size: 2.9rem; }
  .duad-article__subtitle { font-size: 1.5rem; }
  .duad-lead { font-size: 1.15rem; padding-left: 1.2rem; }
  .duad-article__body { font-size: 1.075rem; }
  .duad-article__body h2 { font-size: 1.55rem; }
  /* 広い画面では、もう一段大きく */
  .duad-statement__text { font-size: min(2rem, calc((100vw - 50px) / 12)); }

  .duad-hero {
    margin-left: 0;
    margin-right: 0;
    width: auto;
  }
  .duad-hero .duad-figure__image,
  .duad-hero .duad-figure__placeholder {
    aspect-ratio: 16 / 9;
  }

  /* 表を通常表示に戻す */
  .duad-article__body table,
  .duad-figure__table { display: table; width: 100%; }
  .duad-figure__table { display: block; }
  .duad-figure__table table { display: table; }

  /* 縦位置写真は幅を絞る。全幅だと縦に伸びすぎる */
  .duad-figure[data-kind="photo"]:has(.duad-figure__image[data-orientation="portrait"]),
  .duad-figure[data-kind="photo"]:has(.duad-figure__placeholder[data-orientation="portrait"]) {
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 広い画面。タイトルは短い一行なので、ここまで大きくして初めて画になる */
@media (min-width: 961px) {
  .duad-article__title { font-size: 3.2rem; }
}


/* ---------- TIPS（息抜きの小コラム） ----------
   型番と数値が続くと、読者は途中で降りる。
   ここだけは調べなくても分かる話にして、読む速度を戻す。
   本文と地続きに見えないよう、面で囲って別の声だと分からせる。 */

.duad-tips {
  margin: 2.6rem 0 3rem;
  padding: 1.3rem 1.4rem;
  background: var(--duad-paper);
  border-left: 3px solid var(--duad-accent);
}

.duad-tips__label {
  margin: 0 0 .5rem;
  font-family: var(--duad-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--duad-accent);
}

.duad-tips__title {
  margin: 0 0 .5rem;
  font-family: var(--duad-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
}

.duad-tips__body {
  margin: 0;
  font-size: .95rem;
  line-height: 1.9;
  color: var(--duad-steel);
}

/* ---------- 共有ボタン ----------
   タイトルの下に置く。読み終えてから探して戻るより、上にあるほうが押される。 */

.duad-share {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.4rem;
  /* SHAREからアイコンまでを1行に置く。折り返すと2段になって間が抜ける */
  flex-wrap: nowrap;
}

.duad-share__label {
  font-family: var(--duad-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--duad-steel);
}

.duad-share__list {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
  /* 狭い画面で7個が入り切らないときだけ、この行の中で送る */
  overflow-x: auto;
  scrollbar-width: none;
}
.duad-share__list::-webkit-scrollbar { display: none; }

.duad-share__button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 指で押せる大きさ（44px）を確保する */
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--duad-ink);
  cursor: pointer;
  position: relative;
}
.duad-share__button:hover { color: var(--duad-accent); }

/* コピーできたことを、その場で知らせる */
.duad-share__button.is-copied { color: var(--duad-accent); }
.duad-share__button.is-copied::after {
  content: "コピーしました";
  position: absolute;
  top: 100%;
  left: 0;
  padding: .25rem .5rem;
  background: var(--duad-ink);
  color: var(--duad-paper);
  font-size: .68rem;
  white-space: nowrap;
}

/* ---------- 広い画面の2段組み ----------
   本文の左に欄を置く。**この欄は本文と一緒にスクロールしない。**
   画面に貼り付いたまま、欄の中身だけが独立して動く（高さが足りなければ欄内で送る）。
   本文の読み幅は変えない。1行が長くなると、6,000字の記事は読み通せない。 */

.duad-article__layout {
  /* 狭い画面は1段。読み幅はここで決める（器の側で絞らない） */
  display: block;
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: var(--duad-gutter, 1.1rem);
  /* 左の欄と本文が同じ高さから始まるよう、余白は器に持たせる */
  padding-top: 1.6rem;
}

.duad-article__aside {
  display: none;
}

@media (min-width: 1100px) {
  .duad-article__layout {
    display: grid;
    /* 左の欄は固定幅、本文は読み幅の上限まで。
       3列目（余りの空き）は作らない。作ると、その空きのぶん
       中身が左に寄って、ページの中央に来なくなる。 */
    grid-template-columns: 15rem minmax(0, 46rem);
    justify-content: center;   /* 欄＋本文の塊をページの中央に置く */
    gap: 0 3rem;
    align-items: start;
    max-width: 82rem;
  }

  .duad-article__aside {
    display: block;
    grid-column: 1;
    /* 3段ヘッダ（約116px）の下に貼り付ける。
       max-height と overflow で、欄の中だけがスクロールする */
    position: sticky;
    top: 132px;
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* 欄の端で本文まで動かさない */
    scrollbar-width: thin;
    padding-right: .6rem;
    font-size: .82rem;
    line-height: 1.7;
  }

  .duad-article__main {
    grid-column: 2;
  }

  /* 目次は欄に出るので、本文側は畳む */
  .duad-article__main > .duad-toc {
    display: none;
  }
}

.duad-aside__block {
  margin: 0 0 1.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--duad-line);
}
.duad-aside__block:last-child { border-bottom: none; }

.duad-aside__label {
  margin: 0 0 .7rem;
  font-family: var(--duad-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--duad-accent);
}

.duad-aside__ad {
  margin-left: .5em;
  font-size: .62rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--duad-steel);
}

.duad-aside__toc {
  margin: 0;
  padding-left: 1.2em;
}
.duad-aside__toc li { margin: 0 0 .5rem; }
.duad-aside__toc a {
  color: var(--duad-ink);
  text-decoration: none;
}
.duad-aside__toc a:hover { color: var(--duad-accent); text-decoration: underline; }

.duad-aside__related,
.duad-aside__picks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.duad-aside__related-item { margin: 0 0 .9rem; }
.duad-aside__related-item a { text-decoration: none; display: block; }

.duad-aside__related-genre {
  display: block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--duad-steel);
}

.duad-aside__related-title {
  display: block;
  color: var(--duad-ink);
  font-weight: 500;
  line-height: 1.55;
}
.duad-aside__related-item a:hover .duad-aside__related-title { color: var(--duad-accent); }

.duad-aside__pick { margin: 0 0 .6rem; }
.duad-aside__pick a {
  color: var(--duad-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.duad-aside__pick a:hover { color: var(--duad-accent); }

/* 連載の一覧。左の欄では前後の矢印を出さず、回の並びだけにする。
   幅が狭く、矢印と本文が同じ行に入らない */
.duad-aside__series-name {
  margin: 0 0 .7rem;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.6;
}

.duad-aside__volumes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.duad-aside__volume {
  margin: 0 0 .55rem;
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: .1rem .4rem;
  font-size: .78rem;
  line-height: 1.6;
}

.duad-aside__volume a {
  display: contents;
  color: var(--duad-ink);
  text-decoration: none;
}
.duad-aside__volume a:hover { color: var(--duad-accent); }

.duad-aside__vol {
  font-family: var(--duad-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--duad-steel);
  font-variant-numeric: tabular-nums;
}

/* いま読んでいる回。押せないので、下線も色の変化も付けない */
.duad-aside__volume.is-now { font-weight: 600; }
.duad-aside__volume.is-now .duad-aside__vol { color: var(--duad-accent); }

/* まだ出ていない回。順番だけ見せて、押せないことを色で伝える */
.duad-aside__volume.is-planned { color: var(--duad-steel); }

/* FROM DUADISTS の抜粋。左の欄は幅が狭いので、
   件数と直近2件だけ。全部は本文の欄にある */
.duad-aside__duadists-count {
  margin: 0 0 .7rem;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
.duad-aside__duadists-count a {
  color: var(--duad-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.duad-aside__duadists-count a:hover { color: var(--duad-accent); }

.duad-aside__voices {
  margin: 0;
  padding: 0;
  list-style: none;
}

.duad-aside__voice { margin: 0 0 .8rem; }

.duad-aside__voice a {
  display: block;
  padding-left: .6rem;
  border-left: 2px solid var(--duad-accent);
  color: var(--duad-ink);
  text-decoration: none;
  font-size: .78rem;
  line-height: 1.7;
}

.duad-aside__voice a:hover { color: var(--duad-accent); }

.duad-aside__voice-by {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  color: var(--duad-steel);
}

.duad-aside__club {
  background: var(--duad-paper);
  padding: 1rem;
  border-bottom: none;
}

.duad-aside__club-lead {
  margin: 0 0 .8rem;
  color: var(--duad-steel);
  /* 左の欄は狭く、最後の行に「す。」だけが残っていた。
     行の長さを揃え、折るのは <wbr> を置いた位置だけにする */
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.duad-aside__club-link {
  display: inline-block;
  padding: .5rem 1rem;
  background: var(--duad-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: .78rem;
}
.duad-aside__club-link:hover { opacity: .88; }

/* ---------- 印刷 ---------- */

@media print {
  .duad-newsletter { display: none; }
  .duad-product-card__link::after { content: " (" attr(href) ")"; font-size: 0.7rem; }
}

/* 記事ページのジャンル表示も「MOBILITY / CARS」の形にする */
.duad-article__genre-slash {
  margin: 0 0.4em;
  opacity: 0.4;
  font-weight: 400;
}

/* ---------- もっと夢中になりたい人へ ----------
   本文の下に置く関連記事。文字だけで組む。
   左の固定欄は画面が広いときにしか出ないので、
   読み終えた読者の導線は本文の流れの中にも要る。 */

.duad-related {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 2px solid var(--duad-ink);
}

.duad-related h2 {
  margin: 0 0 1.2rem;
  font-size: var(--duad-section-head);
  letter-spacing: 0.04em;
}

.duad-related__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.duad-related__item {
  border-top: 1px solid var(--duad-line);
}
.duad-related__item:first-child { border-top: 0; }

.duad-related__item a {
  display: block;
  padding: 0.95rem 0;
  color: var(--duad-ink);
  text-decoration: none;
}
.duad-related__item a:hover .duad-related__title { color: var(--duad-accent); }

.duad-related__genre {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--duad-steel);
}

.duad-related__title {
  display: block;
  font-size: var(--duad-section-head);
  /* このサイトは600より太くしない（見出しも地の文も同じ決まり） */
  font-weight: 600;
  line-height: 1.45;
  /* 見出しを語の途中で折らない（<wbr> の位置でだけ折る） */
  word-break: keep-all;
}

.duad-related__subtitle {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--duad-steel);
  word-break: keep-all;
}

/* ---------- 読者の写真 ----------
   記事は写真ゼロで完成させ、公開後に読者の投稿で育てる。
   承認された1枚が入るまで、この欄そのものが出ない（photos.py 側で判定）。

   枠は2つ。いいね最多の1枚を大きく、その下に正方形のタイルを横3×縦4。
   13枚目からは縦スクロールで続く。 */

.duad-photos {
  margin: 1.6rem 0 0;
  /* 一覧の高さを欄幅から決めるため、ここを基準にする */
  container-type: inline-size;
}

/* FROM DUADISTS の中に入るので、見出しは1段下げる */
.duad-photos__title {
  margin: 0 0 1.2rem;
  font-size: var(--duad-section-head);
  letter-spacing: 0.04em;
}

/* --- いいね最多の1枚 --- */






/* --- 一覧（横3×縦4） --- */

.duad-photos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 行の高さに引き伸ばさない。stretch だと比率より行の高さが優先される */
  align-items: start;
  gap: 2px;
}

/* 13枚目からは縦スクロール。高さは12枠ぶんで止める。
   1枠の幅＝(欄幅 - 隙間2本)/3、高さはその1.25倍（4:5）。4段ぶん＋隙間3本。
   欄幅は .duad-photos が持つので、そちらを container にしてある */
.duad-photos__grid.is-scrollable {
  max-height: calc((100cqi - 4px) / 3 * 1.25 * 4 + 6px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.duad-photo-tile {
  display: block;
  /* Instagramの一覧と同じ縦長（4:5）。
     container-type を付けると比率の計算が効かなくなり、
     タイルが写真ごとの高さになって並びが崩れる（実際に崩れた）。
     空き枠のロゴは rem で決めるので、container は要らない。 */
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  background: var(--duad-paper);
  cursor: pointer;
  overflow: hidden;
}

.duad-photo-tile img {
  display: block;
  width: 100%;
  height: 100%;
  /* 器が比率を持てない環境でも並びが崩れないよう、画像にも同じ比率を置く */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* --- 開いたときの中身。元の縦横比で出す --- */

.duad-photo-detail {
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--duad-line);
}

.duad-photo__image {
  display: block;
  width: 100%;
  height: auto;   /* aspect-ratio は元の比率で個別に入る */
  background: var(--duad-paper);
}

.duad-photo__meta { margin-top: 0.9rem; }

.duad-photo__by {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.duad-photo__caption {
  margin: 0 0 0.5rem;
  font-size: 0.98rem;
  line-height: 1.75;
}

.duad-photo__tag {
  color: var(--duad-accent);
  text-decoration: none;
}
.duad-photo__tag:hover { text-decoration: underline; }

.duad-photo__link {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--duad-steel);
  word-break: break-all;
}

.duad-photo__date {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 0.82rem;
  color: var(--duad-steel);
}

.duad-photo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.duad-photo__like {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  /* 指で押せる大きさ */
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid var(--duad-line);
  background: #fff;
  color: var(--duad-ink);
  font-size: 0.9rem;
  cursor: pointer;
}
.duad-photo__like::before { content: "♥"; color: var(--duad-line); }
.duad-photo__like.is-liked::before { color: var(--duad-accent); }

/* いいねした人。Instagramと同じく、名前が並ぶ */
.duad-photo__likers {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--duad-steel);
}

/* 区切りの読点はHTML側に入れる。CSSで足すと、コピーしたときに名前が繋がる */
.duad-photo__liker { color: var(--duad-ink); }

.duad-photo__reposts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.duad-photo__repost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--duad-ink);
  cursor: pointer;
}
.duad-photo__repost:hover { color: var(--duad-accent); }
.duad-photo__repost svg { width: 18px; height: 18px; }

/* 開いた写真の置き場。開くまでは中身がすべて hidden なので高さを持たない */
.duad-photos__details { margin: 0; }


/* いいねの数。押した瞬間に数字だけ差し替える */
.duad-photo__like-count { font-variant-numeric: tabular-nums; }

/* 投稿が12枠に満たないぶんの空き。
   枠が欠けたまま並ぶと列が途切れて崩れて見えるので、灰色の箱で埋める。
   押せない箱にして、まだ集まっていないことがそのまま伝わるようにする。 */
.duad-photo-tile--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--duad-line);
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* 空き枠の中央に置くDUAD。箱の左右半分ほどの大きさで薄く敷く。
   画像ファイルにすると12枠ぶん読み込むことになるので、文字で組む。 */
.duad-photo-tile__mark {
  /* 枠の左右半分ほど。3列なので枠幅は版面の約1/3、その半分に収まる大きさ */
  font-size: clamp(0.7rem, 5vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  /* 字間のぶん右に寄るので、その半分だけ戻す */
  text-indent: 0.18em;
  color: var(--duad-paper);
  white-space: nowrap;
}



/* ---------- 写真を送る欄 ----------
   写真が1枚も無い記事にも出す。投稿が集まらないと何も始まらないので、
   入口は常に開けておく。 */

/* ============================================================
   本文に散らす、人気の写真と言葉

   記事下の一覧は「新しい順」、こちらは「いいねの多い順」。
   見出しの区切りに1つずつ置く。まとめて並べると投稿の一覧になり、
   本文の流れが切れる。
   ============================================================ */

.duad-rank {
  margin: 2.4rem 0;
  padding: 1.2rem 1.3rem;
  background: var(--duad-paper);
  border-left: 3px solid var(--duad-accent);
}

.duad-rank__label {
  margin: 0 0 .7rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--duad-display);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--duad-accent);
}

/* 順位。数字だけを丸で囲む */
.duad-rank__no {
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--duad-accent);
  color: #fff;
  font-size: .7rem;
  letter-spacing: 0;
}

/* 写真は画のぶん余白を詰め、言葉は文のぶん残す */
.duad-rank--photo { padding-bottom: .9rem; }
.duad-rank--tip { padding-bottom: 1rem; }

.duad-rank__image {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.duad-rank__image img {
  display: block;
  width: 100%;
  height: auto;
}

.duad-rank__body {
  margin: 0 0 .5rem;
  font-size: .95rem;
  line-height: 1.9;
}

.duad-rank__by {
  margin: .5rem 0 0;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-size: .78rem;
  color: var(--duad-steel);
}

.duad-rank__name { font-weight: 500; color: var(--duad-ink); }

.duad-rank__likes {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.duad-rank__likes::before { content: "♥ "; color: var(--duad-accent); }

/* ============================================================
   FROM DUADISTS

   読者（DUADIST）から届いた声で、記事が育っていく欄。
   写真欄と同じ「読者が出したもの」なので、見出しの作りも揃える。
   ============================================================ */

.duad-duadists {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 2px solid var(--duad-ink);
}

/* この欄の看板。DUAD SELECT・DUAD CLUB と同じ、
   ブランドの名前としての組み（欧文の大文字・字間を広く） */
.duad-duadists__title {
  margin: 0 0 0.6rem;
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--duad-accent);
}

.duad-duadists__lead {
  margin: 0 0 1.2rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--duad-steel);
}

/* 意見の並び。写真の下に置く。
   本文中のTIPSコラム（.duad-tips）とは別物なので、名前を分けてある */
.duad-opinions {
  margin: 2rem 0 0;
}

.duad-opinions__title {
  margin: 0 0 1rem;
  font-size: var(--duad-section-head);
  letter-spacing: 0.04em;
}

.duad-opinions__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* 1件。左の罫だけで区切る。囲みにすると引用が並んで見え、
   記事の一部ではなく貼り付けたものに見える */
.duad-duadist {
  padding-left: 1rem;
  border-left: 3px solid var(--duad-accent);
}

/* 6件目からは縦スクロールで続く。高さは5件ぶんで止める。
   1件は本文2行＋名乗り1行が目安。写真の一覧と同じ考え方で、
   「まだ下に続く」ことが見えるところで切る */
.duad-opinions__list.is-scrollable {
  max-height: 27rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.duad-duadist__body {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  line-height: 1.9;
}

.duad-duadist__by {
  margin: 0;
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  font-size: 0.78rem;
  color: var(--duad-steel);
}

.duad-duadist__name {
  font-weight: 500;
  color: var(--duad-ink);
}

/* いいね。押した端末では色が変わり、二度は押せない */
.duad-duadist__like {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--duad-steel);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}

.duad-duadist__like::before {
  content: "♡";
  font-size: .9rem;
  line-height: 1;
}

.duad-duadist__like:hover { color: var(--duad-accent); }

.duad-duadist__like.is-liked {
  color: var(--duad-accent);
  cursor: default;
}
.duad-duadist__like.is-liked::before { content: "♥"; }

.duad-duadist__like-count { font-variant-numeric: tabular-nums; }

.duad-duadist__date {
  font-variant-numeric: tabular-nums;
}

/* --- 送る欄。写真の投稿欄と同じ組み方にする --- */

.duad-suggest {
  margin: 2rem 0 0;
  padding: 1.4rem;
  background: var(--duad-paper);
}

.duad-suggest h3 {
  margin: 0 0 0.5rem;
  font-size: var(--duad-section-head);
  letter-spacing: 0.04em;
}

.duad-suggest__lead {
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--duad-steel);
}

.duad-suggest__note {
  margin: -0.5rem 0 1.1rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--duad-steel);
}

.duad-suggest__form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.duad-suggest__hint {
  margin: -0.6rem 0 0;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--duad-steel);
}

.duad-photo-submit {
  margin: 2rem 0 0;
  padding: 1.4rem;
  background: var(--duad-paper);
}

.duad-photo-submit h3 {
  margin: 0 0 0.5rem;
  font-size: var(--duad-section-head);
  letter-spacing: 0.04em;
}

.duad-photo-submit__lead {
  margin: 0 0 1.1rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--duad-steel);
}

.duad-photo-submit__form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.duad-photo-submit__form label,
.duad-suggest__form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.duad-photo-submit__form input[type="text"],
.duad-photo-submit__form input[type="url"],
.duad-photo-submit__form input[type="email"],
.duad-photo-submit__form textarea,
.duad-suggest__form textarea {
  /* 幅は flex の stretch に任せる。width:100% を足すと
     padding と二重にかかって器からはみ出す */
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--duad-line);
  background: #fff;
  color: var(--duad-ink);
  font-family: inherit;
  font-size: 1rem;   /* 16px未満だとiOSで拡大される */
  font-weight: 300;
  -webkit-appearance: none;
  appearance: none;
}

.duad-photo-submit__form textarea,
.duad-suggest__form textarea { resize: vertical; }

/* 写真の選択。
   input[type=file] の「Choose File / no file selected」は
   ブラウザの言語で描かれ、::file-selector-button の外側は
   文言もフォントも触れない。だから入力欄は幅ゼロで隠し、
   見えているものを label の中に組み直す。
   input を display:none にしないのは、required の検証で
   ブラウザが「この欄を入力してください」を指す先を残すため。 */
.duad-photo-submit__label {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: -0.6rem;   /* form の gap を label と同じ 0.3rem に詰める */
}

/* .duad-photo-submit__form label より詳細度を上げないと column に負ける */
.duad-photo-submit__form .duad-photo-submit__file {
  display: flex;
  flex-direction: row;      /* 他の label と違い、横に並べる */
  justify-content: flex-start;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--duad-line);
  background: #fff;
  cursor: pointer;
}

.duad-photo-submit__file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.duad-photo-submit__file-button {
  flex: 0 0 auto;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--duad-line);
  background: var(--duad-paper);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.duad-photo-submit__file:hover .duad-photo-submit__file-button {
  background: var(--duad-ink);
  color: var(--duad-paper);
  border-color: var(--duad-ink);
}

.duad-photo-submit__file-name {
  /* ファイル名は長い。器を割らずに省略する */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--duad-ink-light);
}

/* 選んだあとは本文と同じ濃さにして、選択済みだと分かるようにする */
.duad-photo-submit__file-name[data-selected] {
  color: var(--duad-ink);
  font-weight: 500;
}

.duad-photo-submit__file:focus-within {
  outline: 2px solid var(--duad-ink);
  outline-offset: 2px;
}

/* 同意の行だけは、チェックと文字を横に並べる */
.duad-photo-submit__consent,
.duad-suggest__consent {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.5rem !important;
  font-weight: 300 !important;
  line-height: 1.6;
}
.duad-photo-submit__consent input,
.duad-suggest__consent input {
  flex: 0 0 auto;
  margin-top: 0.2em;
  /* 既定のままだとOSの青が出る。サイトに青は使わない */
  accent-color: var(--duad-accent);
}

.duad-photo-submit__form button,
.duad-suggest__form button {
  min-height: 2.75rem;
  border: 0;
  background: var(--duad-ink);
  color: #fff;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.duad-photo-submit__form button:hover,
.duad-suggest__form button:hover { background: var(--duad-accent); }

/* 紹介する商品の数値。名前と「良い」だけでは、
   読者が自分の条件に当てはめられない。
   本文より一段小さく、色を落として、読み飛ばせる形で置く。 */
.duad-select__spec,
.duad-product-card__spec {
  margin: 0.3rem 0 0.6em;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--duad-steel);
  font-variant-numeric: tabular-nums;
}

/* 送る欄の但し書きと、確認事項の見出し */
.duad-photo-submit__note {
  margin: -0.5rem 0 1.1rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--duad-steel);
}

.duad-photo-submit__confirm-label {
  margin: 0.4rem 0 -0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
}

/* SNSアカウントの欄の見出し。任意の項目がここから始まる、という区切り。
   「確認事項」と同じ見え方にして、フォームの中の段が揃うようにする */
.duad-photo-submit__group-label {
  margin: 0.6rem 0 -0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
}


/* ============================================================
   連載の目次（記事の最後）
   「BACK」は前のページへ戻る操作に見えるので使わない。
   前後の回を指すなら PREV / NEXT が正確になる。
   ============================================================ */

.duad-series-nav {
  margin: 3rem 0 0;
  padding-top: 1.4rem;
  border-top: 2px solid var(--duad-ink);
  font-family: var(--duad-body);
}

/* 片側しか無くても位置は動かさない。NEXTは常に右端 */
.duad-series-nav__arrows {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.6rem;
}

.duad-series-nav__slot {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 0;
  color: var(--duad-ink);
  text-decoration: none;
}
.duad-series-nav__slot--prev { text-align: left; align-items: flex-start; }
.duad-series-nav__slot--next { text-align: right; align-items: flex-end; }
/* 片方が空でも、残った側は左右の定位置から動かさない */
.duad-series-nav__slot--prev:empty, .duad-series-nav__slot--next:empty { flex: 0 0 auto; }

.duad-series-nav__dir {
  font-family: var(--duad-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--duad-accent);
}

/* 行き先の題も出す。矢印だけでは、次に何を読むのかが分からない */
.duad-series-nav__peek {
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.duad-series-nav__slot:hover .duad-series-nav__peek { text-decoration: underline; }

.duad-series-nav__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.7em;
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.duad-series-nav__eyebrow {
  font-family: var(--duad-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--duad-accent);
}

.duad-series-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* NOW・VOL・題の3列。NOWの幅は常に確保して、題の頭を揃える。
   行ごとの罫線は引かない。上の2px罫と広告表記の罫に挟まれるので、
   細い線を3本足すと、太さの違う横線が短い間隔で並んでしまう */
.duad-series-nav__row {
  display: grid;
  grid-template-columns: 3.2em 4.2em 1fr;
  align-items: baseline;
  gap: 0 0.6em;
  padding: 0.42rem 0;
  font-size: 0.95rem;
}

.duad-series-nav__now {
  font-family: var(--duad-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--duad-accent);
}

.duad-series-nav__vol {
  font-family: var(--duad-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--duad-steel);
}

.duad-series-nav__title { min-width: 0; }
.duad-series-nav__title a { color: var(--duad-ink); text-decoration: none; }
.duad-series-nav__title a:hover { text-decoration: underline; }

/* いま読んでいる回は、リンクではなく現在地として太らせる */
.duad-series-nav__row--current .duad-series-nav__title { font-weight: 600; }
.duad-series-nav__row--current .duad-series-nav__vol { color: var(--duad-ink); }

/* まだ書かれていない回。押せないことが、色で分かるようにする */
.duad-series-nav__row--planned .duad-series-nav__title { color: var(--duad-steel); }

@media (max-width: 640px) {
  .duad-series-nav__row {
    grid-template-columns: 2.8em 3.8em 1fr;
    font-size: 0.9rem;
  }
  .duad-series-nav__peek { display: none; }
}


/* ============================================================
   投稿写真のコメント
   会話として読むので、新しい順ではなく書かれた順に積む。
   ============================================================ */

.duad-photo-comments {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--duad-line);
}

.duad-photo-comments__list {
  margin: 0 0 .8rem;
  padding: 0;
  list-style: none;
  /* 数が増えても写真の下が伸びきらないようにする */
  max-height: 14rem;
  overflow-y: auto;
}

.duad-photo-comment {
  display: flex;
  gap: 0 .6em;
  align-items: baseline;
  padding: .35rem 0;
  font-size: .88rem;
  line-height: 1.7;
}

.duad-photo-comment__by {
  flex: none;
  font-weight: 600;
  color: var(--duad-ink);
}

.duad-photo-comment__body {
  min-width: 0;
  color: var(--duad-steel);
  overflow-wrap: anywhere;
}

.duad-photo-comments__empty {
  margin: 0 0 .8rem;
  font-size: .84rem;
  color: var(--duad-steel);
}

/* 書き込む欄。1行で置き、送信は右端に固定する */
.duad-photo-comments__form {
  display: flex;
  gap: .5rem;
  align-items: stretch;
}

.duad-photo-comments__form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .6rem .7rem;
  font-family: inherit;
  font-size: .9rem;
  color: var(--duad-ink);
  background: #fff;
  border: 1px solid var(--duad-line);
}

.duad-photo-comments__form button {
  flex: none;
  padding: .6rem 1.1rem;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--duad-paper);
  background: var(--duad-ink);
  border: none;
  cursor: pointer;
}
.duad-photo-comments__form button:hover { background: var(--duad-accent); }


/* ============================================================
   DUAD VOICES｜それぞれの夢中

   人が書いたものを載せる欄。自動生成の記事と違い、
   目次も図版も商品導線も無い。持っているのは文と写真だけなので、
   組みも文だけで成立する形にする。
   ============================================================ */

.duad-voice {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2.6rem var(--duad-gutter, 1.2rem) 4rem;
}

.duad-voice__header { margin: 0 0 2.2rem; }

.duad-voice__kind {
  margin: 0 0 .8rem;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-family: var(--duad-display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--duad-accent);
}
.duad-voice__kind span {
  letter-spacing: .08em;
  color: var(--duad-steel);
}

.duad-voice__title {
  margin: 0 0 .8rem;
  font-family: var(--duad-display);
  font-size: clamp(1.7rem, 5.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.45;
}

.duad-voice__subtitle {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--duad-steel);
}

.duad-voice__by {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--duad-line);
  font-size: .85rem;
}
.duad-voice__author { font-weight: 600; }

/* 読む量の目安。1000〜5000字を想定しているので、
   読み始める前に分かるようにしておく */
.duad-voice__read {
  color: var(--duad-steel);
  font-variant-numeric: tabular-nums;
}
.duad-voice__date {
  margin-left: auto;
  color: var(--duad-steel);
  font-variant-numeric: tabular-nums;
}

/* 目次。見出しが3つ以上あるときだけ出る。
   記事側の目次と違い、左に固定しない——VOICESは通しで読むものなので、
   本文の前に1度だけ置いて、あとは邪魔をしない */
.duad-voice__toc {
  margin: 0 0 2.4rem;
  padding: 1.1rem 1.3rem;
  background: var(--duad-paper);
}

.duad-voice__toc ol {
  margin: 0;
  padding-left: 1.3em;
  font-size: .88rem;
  line-height: 1.9;
}

.duad-voice__toc a {
  color: var(--duad-ink);
  text-decoration: none;
}
.duad-voice__toc a:hover { color: var(--duad-accent); text-decoration: underline; }

/* 本文。取り込みで残るのは p / h2〜h4 / ul / ol / strong / em / figure だけ */
.duad-voice__body { font-size: 1rem; line-height: 2; }
.duad-voice__body p { margin: 0 0 1.5em; }
.duad-voice__body h2 {
  margin: 2.6rem 0 .9rem;
  font-family: var(--duad-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.6;
}
.duad-voice__body h3 { margin: 2rem 0 .7rem; font-size: 1.05rem; font-weight: 600; }
.duad-voice__body h4 { margin: 1.6rem 0 .6rem; font-size: .98rem; font-weight: 600; }
.duad-voice__body ul,
.duad-voice__body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.duad-voice__body li { margin: 0 0 .5em; }
.duad-voice__body blockquote {
  margin: 0 0 1.5em;
  padding-left: 1rem;
  border-left: 3px solid var(--duad-line);
  color: var(--duad-steel);
}

.duad-voice__figure { margin: 2rem 0; }
.duad-voice__figure img { display: block; width: 100%; height: auto; }

/* 書いた人。本文のあとに置く。読む前に経歴を出すと、
   中身より肩書きで読まれてしまう */
.duad-voice__author-box {
  margin: 3rem 0 0;
  padding: 1.4rem;
  background: var(--duad-paper);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.duad-voice__author-photo {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
  object-fit: cover;
  border-radius: 50%;
}

.duad-voice__author-text { min-width: 0; }

.duad-voice__author-name {
  margin: 0 0 .3rem;
  font-size: .95rem;
  font-weight: 600;
}
.duad-voice__author-name span {
  margin-left: .6rem;
  font-size: .8rem;
  font-weight: 400;
  color: var(--duad-steel);
}

.duad-voice__author-bio {
  margin: 0;
  font-size: .85rem;
  line-height: 1.8;
  color: var(--duad-steel);
}

/* --- 横並びの一覧。ジャンルページとTOPにも同じものを置く --- */

.duad-voices {
  margin: 3rem 0 0;
  padding-top: 1.6rem;
  border-top: 2px solid var(--duad-ink);
}

.duad-voices__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.duad-voices__title {
  margin: 0;
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  font-weight: 600;
  letter-spacing: .22em;
  white-space: nowrap;
  color: var(--duad-accent);
}

.duad-voices__more {
  margin-left: auto;
  font-size: .78rem;
  white-space: nowrap;
  color: var(--duad-steel);
}

.duad-voices__lead {
  margin: .3rem 0 1.2rem;
  font-size: .85rem;
  color: var(--duad-steel);
}

/* DUAD STORE。自分の店の商品なので、アフィリエイトの器とは分ける。
   段組みは他の帯と同じにして、並べたときに高さが揃うようにする */
/* 値段は桁を揃える。並べたときに数字が踊らない */
.duad-shop-card .duad-voice-card__by {
  font-variant-numeric: tabular-nums;
}

.duad-shop-card a:hover .duad-voice-card__title { color: var(--duad-accent); }

.duad-shop__note {
  margin: .9rem 0 0;
  font-size: .78rem;
  line-height: 1.8;
  color: var(--duad-steel);
}

/* 横スクロール。縦に積むと記事一覧と見分けが付かなくなる */
.duad-voices__list {
  margin: 0;
  padding: 0 0 .6rem;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 15rem);
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}

.duad-voice-card { scroll-snap-align: start; }

/* 段組みは**どのカードでも同じ**にする。
   種類 → 中身 → 題名 → 名乗り。

   写真のあるカードと無いカードで要素の数や順番が変わると、
   横に並べたときに題名の高さが揃わず、スクロールのたびに
   上下にぶれて見える（実際にそう見えた）。 */
.duad-voice-card a {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  height: 100%;
  gap: .4rem;
  text-decoration: none;
  color: var(--duad-ink);
}
.duad-voice-card a:hover .duad-voice-card__title { color: var(--duad-accent); }

/* 中身の段。写真も文も同じ高さに収める。
   4:3 は写真側の比率で、文はその高さで切る */
.duad-strip-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--duad-paper);
}
.duad-strip-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真の無いカード（言葉・写真の無い寄稿）は、同じ枠に文字を流す */
.duad-voice-card--text .duad-strip-card__media,
.duad-strip-card--tip .duad-strip-card__media {
  padding: .9rem 1rem;
  display: flex;
  align-items: flex-start;
}

.duad-strip-card__body {
  font-size: .86rem;
  line-height: 1.8;
  /* 入りきらない分は切る。カードの高さを揃えるため */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.duad-voice-card__kind {
  font-family: var(--duad-display);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--duad-accent);
}

.duad-voice-card__title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.6;
}

.duad-voice-card__by {
  font-size: .78rem;
  color: var(--duad-steel);
}

/* ============================================================
   系譜表（グレードとマイナーチェンジ）

   **棚ではなく、記事の中身。** 枝ごとに棚を分けるとリンクが3倍になり、
   しかもメルカリでは出品者がグレードまで書かないので結果が絞れない。
   一方「NA6CEとNA8Cで何が変わったか」は読み物の主題になる話。
   だから本文の直後、買う場所のずっと前に置く。広告表記もかけない。
   ============================================================ */

.duad-lineage {
  margin: 2.4rem 0;
}

.duad-lineage__title {
  margin: 0 0 .7rem;
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* 列が5つまで増えるので、狭い画面では表だけを横に流す。
   **本文ごと横に動かさない。** ページ全体が横スクロールすると、
   読んでいる場所を見失う */
.duad-lineage__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.duad-lineage__table {
  width: 100%;
  min-width: 22rem;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.7;
}

.duad-lineage__table th,
.duad-lineage__table td {
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--duad-line);
  text-align: left;
  vertical-align: top;
}

/* 見出し行。表の中で唯一の地色。行の頭（グレード名）は地色を敷かない */
.duad-lineage__table thead th {
  border-bottom: 1px solid var(--duad-ink);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--duad-steel);
}

/* 行の頭はグレードの正式名称。ここだけ太くして、目で行を追えるようにする。

   **折り返させない。** 「1.8 SスペシャルII」が3行に割れると、その行だけ
   高さが3倍になり、隣の年と価格が上端に取り残されて対応が読めなくなる。
   はみ出す分は器（__scroll）が横に流す。 */
.duad-lineage__table tbody th {
  font-weight: 600;
  white-space: nowrap;
  color: var(--duad-ink);
}

/* 折り返してよいのは「変わったところ」だけ。ここは文なので、
   むしろ折り返さないと1行が画面より長くなる */
.duad-lineage__table td:last-child {
  min-width: 11rem;
}

/* 年と価格。桁を揃えて読ませる。折り返すと幅の比較ができない */
.duad-lineage__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.duad-lineage__model {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--duad-steel);
}

/* 層の見出し（通常グレード／特別仕様／限定）。

   **1つの表に混ぜない。** 通常グレードと特別仕様と限定を同じ表に並べると、
   台数の決まった本当の限定車が、常設の特別仕様に埋もれる。
   層が1つしか無い品では、この見出しは出ない（何も分けていないため）。 */
.duad-lineage__group + .duad-lineage__group {
  margin-top: 1.4rem;
}

.duad-lineage__subhead {
  margin: 0 0 .4rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--duad-steel);
}

/* ============================================================
   記事末尾の棚（探す／売る）

   DUAD SELECT は編集部が選んだ数点。こちらは「その題材を、いま自分で
   探す／売る」ための面。役割が違うので出し方も分ける。

   **囲まない。** 3面のうち2面が審査待ちで空という状態が当分続くので、
   枠を組むと中身1つの大きな箱になる。本文の終わりに罫線1本と行だけを
   置けば、リンクが1本でも10本でも形が変わらない。

   中古は検索結果へ送る。個体のURLは売れた瞬間に死ぬため。
   ============================================================ */

.duad-shelf {
  margin: 2.2rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--duad-ink);
}

/* 品名。**正式名称をそのまま出す。**
   商品マスターに正式名称があればそれ、無ければ記事の検索語 */
.duad-shelf__name {
  /* 下の余白は「探す」「売る」の行間（.85rem）と揃える。
     ここだけ広いと、品名が棚から浮いて見える */
  margin: 0 0 .85rem;
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.9;
  color: var(--duad-steel);
}

.duad-shelf__name b {
  display: block;
  margin: 0 0 .1rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--duad-ink);
}

/* 発売年と当時の価格。**これがDUADの1行。**
   「1969年〜1972年・1,500,000円〜1,800,000円」があるから相場に意味が出る。
   桁を揃えて読ませたいので等幅の数字にする */
.duad-shelf__spec {
  font-variant-numeric: tabular-nums;
}

/* 「探す」「売る」。**どちらも同じ組み方にする。**
   もとは横並びにしていたため、リンクが1本だけの「売る」では見出しと
   リンクが同じ行に並び、リンクが多い「探す」では折り返して下に落ちた。
   同じ意味の2行が違う形で出ていた。見出しは必ず上、リンクは必ず下。 */
.duad-shelf__line {
  margin: 0 0 .85rem;
}

/* 「探す」「売る」。**英字ラベルと日本語を二重に出さない。**
   もとは「BUY／いま買う」と同じことを2回言い、色も2つ使っていた。

   **売るを赤にしない。** 赤は本文の強調に使うキーカラーで、記事の終わりで
   いちばん色がついているのが「売る」という状態は、押している印象になる。
   読者にとって主なのは「探す」のほうで、読む順も先。色は本文に取っておく。 */
.duad-shelf__verb {
  display: block;
  margin: 0 0 .3rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--duad-steel);
}

/* 行間を揃える。リンクの行送りと、折り返したときの縦の間隔を
   同じ数字（1.9）で持つ。ばらけると2行目以降だけ詰まって見える */
.duad-shelf__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.9;
}

.duad-shelf__link {
  font-size: .86rem;
  line-height: 1.9;
  color: var(--duad-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--duad-line);
}

.duad-shelf__link:hover {
  color: var(--duad-accent);
  border-bottom-color: var(--duad-accent);
}

/* 広告表示。**行の下に、文として置く。**
   もとは品名の右端にぶら下がっていて、何にかかる断りか読み取りにくかった */
.duad-shelf__ad {
  /* 最後の行（.85rem）に .15rem 足しただけ。
     断りだけ大きく空けると、棚から切り離されて読まれる */
  margin: .15rem 0 0;
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.9;
  color: var(--duad-steel);
}

/* ============================================================
   タイアップの表示（ステマ規制）

   **記事の頭に出す。** 末尾だけだと、読み終えるまで広告と分からない。
   アフィリエイトの表記（duad-disclosure）とは別物。あちらは
   「リンク経由で買われたら紹介料」、こちらは「対価を受けて作った記事」。
   ============================================================ */

.duad-pr {
  display: flex;
  align-items: baseline;
  gap: .7em;
  margin: 0 0 1rem;
  padding: .5rem .9rem;
  background: var(--duad-ink);
  color: #fff;
  font-size: .78rem;
  line-height: 1.6;
}

.duad-pr__label {
  font-weight: 600;
  letter-spacing: .16em;
}

.duad-pr__by {
  color: rgba(255, 255, 255, .78);
}

/* --------------------------------------------------------------------------
   本文中の逐語引用
   --------------------------------------------------------------------------
   **「参考にした」と「引用した」を、読者が見て区別できるようにする。**
   記事末に一覧を並べるだけでは、どの文が他人の書いたものか分からない。
   著作権法32条の引用は、引用部分が本文と明確に区別されていることを
   前提にしていて、48条が出所の明示を求めている。

   **ただし、読みを邪魔しない。** 地の文に「出典」の文字を挟むと、
   読んでいる途中に語が割り込んで文が切れる。左に赤い罫を引くと、
   引用のほうが本文より強く見える。印は引用そのものに付けて、
   灰色の点線の下線だけにする。出所は引用自体のリンクで辿れる。 */
.duad-quote {
  quotes: "「" "」";
  text-decoration: underline dotted var(--duad-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  color: inherit;
}

/* 引用そのものがリンク。色も下線も足さない（点線は q 側が持っている）。
   **`.duad-article__body a` が本文のリンクを赤くしている。**
   詳細度が (0,1,1) なので、クラスだけの (0,1,0) では勝てず、
   引用が赤い字で出た。同じ器で書いて上書きする */
.duad-quote__link,
.duad-article__body a.duad-quote__link {
  color: inherit;
  text-decoration: none;
}

.duad-quote__link:hover .duad-quote,
.duad-article__body a.duad-quote__link:hover .duad-quote {
  text-decoration-color: var(--duad-steel);
}

@media print {
  /* 紙では飛べない。点線だけ残す */
  .duad-quote__link { color: inherit; }
}