/* ============================================================
   DUAD PROJECT サイト全体のスタイル（記事の外側）
   src/duad/site.py が出力するHTMLに対応する。

   assets/duad.css を先に読み込むこと（配色・書体のトークンと
   記事本体のスタイルはそちらにある）。

   構成の下敷きは Monocle。ただし、あちらの目印になっている要素
   （識別色の帯、犬のイラスト、本のマーク＋所要時間）は使わない。
   書体はゴシックで通し、見出しは太さと字詰めで立てる。
   - 見出しの上に必ずジャンルと日付が付く
   - 大きい1本 → 均等なグリッド → ジャンルごとの列、と粒度を落とす
   - 節の右肩に「すべて見る」
   - 物販を読み物と同じ面に混ぜる
   スマホ基準で組み、広い画面で列を増やす。
   ============================================================ */

/* ---------- ヘッダ（3段） ----------
   1段目 実用バー / 2段目 ロゴ / 3段目 ジャンル。
   Monocleと同じ積み方。3段目は入り切らない分を横に流す。

   3段まとめてスクロールに追従させる。
   透かすのは**文字の背景（白地）だけ**で、文字と罫線は透かさない。
   薄く敷いた白と blur で下の写真の情報量を落とし、
   その上に不透明の文字を置く——という重ね方にしてある。 */

/* 紙面の左右の余白。帯・一覧・フッターで同じ値を使う。
   ここを揃えないと、広い画面でヘッダーだけが端に張り付く。

   幅を絞らない代わりに、画面が広いほど余白を取る。
   1.1remのままだと、大きな画面で文字が端まで詰まって窮屈に見える。 */
:root {
  --duad-gutter: 1.1rem;
}

/* ハンバーガーのパネルの上端。max-height を実寸で引くために持つ */
:root { --duad-menu-top: 6rem; }
@media (min-width: 641px) {
  :root { --duad-menu-top: 7.5rem; }
}

@media (min-width: 641px) {
  :root { --duad-gutter: 1.8rem; }
}

@media (min-width: 961px) {
  :root { --duad-gutter: 2.6rem; }
}

@media (min-width: 1440px) {
  :root { --duad-gutter: 3.6rem; }
}

.duad-site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  font-family: var(--duad-display);
  font-weight: 300;
  /* すりガラス。**彩度を持ち上げすぎない。**
     saturate(170%) だと、下を通るキービジュアルの赤が
     ピンクの染みになってロゴの周りに散った。下の白も 0.5 では薄く、
     赤が透けすぎる。彩度は等倍にして、白を厚くする */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* backdrop-filter が効かない環境では、透過を弱めて可読性を優先する */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .duad-utility { background: var(--duad-accent); }
  .duad-masthead,
  .duad-nav { background: #fff; }
}

.duad-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* 帯は全幅のまま、中身だけ記事一覧（最大1080px）の左右に揃える */
  padding-block: 0.45rem;
  padding-inline: var(--duad-gutter);
  /* 指定色そのまま。透過させると下地が混ざって色がくすむ */
  background: var(--duad-accent);
  color: #fff;              /* 文字は透かさない */
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.duad-utility__links { margin: 0; white-space: nowrap; }
.duad-utility__links a { color: #fff; text-decoration: none; }
.duad-utility__links a:hover { text-decoration: underline; }
.duad-utility__sep { color: rgba(255, 255, 255, 0.55); margin: 0 0.2em; }

.duad-utility__tagline {
  margin: 0;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* flexの子は既定で中身より小さくならない。min-width を0にしないと
     狭い画面でこの1行がはみ出し、ページ全体が横に溢れる */
  min-width: 0;
}

/* ロゴの段。左にメニュー、中央にロゴ、右にニュースレター */
.duad-masthead {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  padding-block: 0.7rem;
  padding-inline: var(--duad-gutter);
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--duad-line);   /* 罫線は透かさない */
}

.duad-masthead__logo {
  justify-self: center;
  line-height: 0;
}

/* 背景が透けるので、ロゴは白地を抜いたPNG（assets/duad-logo.png）を使う。
   白地のままだと、透過した帯の上に白い箱が浮く。 */
.duad-masthead__logo img {
  display: block;
  width: 150px;
  height: auto;
}

.duad-masthead__mail {
  justify-self: end;
  color: var(--duad-ink);
  line-height: 0;
}
.duad-masthead__mail svg { width: 22px; height: auto; }

/* メニュー。JavaScriptなしで開閉する */
.duad-menu { justify-self: start; }

.duad-menu > summary {
  list-style: none;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
}
.duad-menu > summary::-webkit-details-marker { display: none; }

.duad-menu__bars,
.duad-menu__bars::before,
.duad-menu__bars::after {
  display: block;
  width: 19px;
  height: 1.5px;   /* ロゴと封筒に合わせて、線も一段細く */
  background: var(--duad-ink);
  content: "";
}
.duad-menu__bars { position: relative; }
.duad-menu__bars::before { position: absolute; top: -6px; }
.duad-menu__bars::after { position: absolute; top: 6px; }

.duad-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;   /* ジャンルの段より前に出す */
  background: #fff;
  border-bottom: 1px solid var(--duad-line);
  padding: 1rem 1.1rem 1.4rem;

  /* **中身は7束41ジャンル＋検索。画面より高くなる。**
     絶対配置なので、後ろの本文が動いてもパネルは動かない。
     max-height と overflow が無いと、下のほうの束に指が届かなかった。
     100dvh はスマホのアドレスバーの出入りで高さが変わるのを吸収する
     （100vh だと、バーが出ているときに下がはみ出す）。 */
  /* **百分率を使わない。** `calc(100dvh - 100%)` の 100% は
     包含ブロックの高さに対する割合で、その高さが auto のときは
     max-height ごと効かなくなる環境がある（Chromeでは効いたが、
     効かない環境があると下の束に指が届かないまま戻る）。
     パネルの上端は実測で 95px（スマホ）／マストヘッドぶん。
     少し多めに引いておけば、足りないより安全 */
  max-height: calc(100dvh - var(--duad-menu-top));
  overflow-y: auto;
  overscroll-behavior: contain;   /* 端まで来ても後ろの本文を動かさない */
  -webkit-overflow-scrolling: touch;
}

/* 束ごとに1行。左の1列が見出し、右の2列にジャンルを流す。
   一続きのグリッドに見出しを混ぜていたころ、見出しが列のどちらかに
   入り込んで、その下のジャンルと段が合わなくなっていた */
.duad-menu__group {
  display: grid;
  grid-template-columns: 4.6rem 1fr 1fr;
  gap: 0 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--duad-line);
}

.duad-menu__group:first-child {
  border-top: none;
  padding-top: 0.2rem;
}

.duad-menu__panel ul {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 画面が狭いと、見出しの列を取ると本文が2字で折り返す。
   その幅では見出しを上の段に回す */
@media (max-width: 359px) {
  .duad-menu__group { grid-template-columns: 1fr 1fr; }
  .duad-menu__panel ul { grid-column: 1 / -1; }
}

.duad-menu__panel a { text-decoration: none; color: var(--duad-ink); }
.duad-menu__en {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--duad-accent);
}
.duad-menu__ja { display: block; font-size: 0.95rem; }

/* ジャンルの段。縦棒で区切って横一列 */
.duad-nav {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--duad-line);   /* 罫線は透かさない */
}

.duad-nav > ul {
  display: flex;
  /* **center にすると、束を開いたときに他のラベルが宙に浮く。**
     開いた束のパネルが行の高さを押し広げるので、閉じている束の
     文字だけが開いたパネルの真ん中あたりに並んで、読みにくかった。
     閉じているときは1行なので、start でも見た目は変わらない */
  align-items: flex-start;
  margin: 0;
  padding-block: 0.35rem;    /* 案内の段なので、帯は薄く抑える */
  padding-inline: var(--duad-gutter);
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

  /* 束は7つあり、狭い画面では横に流れる。スクロールバーを隠している
     ので、**続きがあることが分からない。** 左右の端をぼかして示す。

     ぼかす幅は端の余白（gutter）と同じにする。止まっているときは
     1文字目が余白の外にいるのでぼけず、動かしたときだけ端にかかる。 */
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, #000 var(--duad-gutter),
    #000 calc(100% - var(--duad-gutter)), transparent 100%);
  mask-image: linear-gradient(
    to right, transparent 0, #000 var(--duad-gutter),
    #000 calc(100% - var(--duad-gutter)), transparent 100%);
}
.duad-nav > ul::-webkit-scrollbar { display: none; }

/* li 側も同じ理由で start。開いた束の見出しを行の上端に留める */
.duad-nav > ul > li { display: flex; align-items: flex-start; white-space: nowrap; }

/* 区切りの縦棒。カテゴリーの間にだけ入れる（プルダウンの中には入れない） */
.duad-nav > ul > li + li::before {
  content: "";
  width: 1px;
  height: 0.95em;
  margin: 0 0.85rem;
  background: var(--duad-line);
}

.duad-nav > ul > li > a,
.duad-nav__group > summary {
  color: var(--duad-ink);     /* 文字は透かさない */
  text-decoration: none;
  /* 束は7つある。横に流れる段なので、一回り小さくして本数を稼ぐ */
  font-size: 0.84rem;
  font-weight: 300;   /* 大文字が並ぶ列なので、細いほうが締まる */
  letter-spacing: 0.06em;
}
.duad-nav > ul > li > a:hover,
.duad-nav > ul > li > a[aria-current="page"] { color: var(--duad-accent); }

/* 固定ヘッダ（実用バー+ロゴ+ナビ ≒ 116px）の下に、
   アンカーで飛んだ先が潜らないようにする */
.duad-home [id],
.duad-genre [id] { scroll-margin-top: 124px; }


/* ---------- ジャンルナビのプルダウン ----------
   メインカテゴリーを押すと、サブカテゴリーが下に開く。
   触れただけで開く作りにはしない。隣を押そうとしただけで別の段が開く。 */

.duad-nav__item { position: relative; }

.duad-nav__group > summary {
  display: flex;
  align-items: center;
  gap: .3em;
  cursor: pointer;
  list-style: none;
}
.duad-nav__group > summary::-webkit-details-marker { display: none; }

.duad-nav__group > summary::after {
  content: "";
  width: .32em;
  height: .32em;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .55;
}
.duad-nav__group[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.duad-nav__group > summary[aria-current="page"] { color: var(--duad-accent); }

.duad-nav__panel {
  /* 狭い画面ではナビが横スクロールする器なので、浮かせると切られる。
     その場に開いて下へ押し出す */
  position: static;
  min-width: 0;
  border: none;
  border-top: 1px solid var(--duad-line);
  padding: .7rem 0 .3rem;
}

@media (min-width: 961px) {
  .duad-nav__panel {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    z-index: 50;
    /* **下限は中身から決める。** 以前は 12rem（192px）で、
       いちばん長い項目より50pxも広く、右側が空いて見えていた。
       実測（.duad-nav__en は .62rem＋字間.14em、.duad-nav__ja は .85rem）で
         英字  MANGA & ANIME  … 92px
         和文  滑る・乗る・潜る … 109px（ブラウザで実測）
       左右の padding 1rem×2 を足して141px。9remだと内寸110pxで**1pxしか余らない**。
       書体が変われば溢れるので、半文字ぶん足して 9.5rem（152px・内寸118px）にする。
       これより長い束が出れば、絶対配置なので中身に合わせて自分から広がる */
    min-width: 9.5rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid var(--duad-line);
    border-top: 1px solid var(--duad-line);
  }
}

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

.duad-nav__panel li { margin: 0 0 .45rem; }
.duad-nav__panel li:last-child { margin-bottom: 0; }

.duad-nav__panel a {
  color: var(--duad-ink);
  text-decoration: none;
  font-size: .82rem;
  white-space: nowrap;
}
.duad-nav__panel a:hover { color: var(--duad-accent); }

/* ---------- 本体の器 ----------
   Monocleは本文まわりも含めて明朝（セリフ）で通している。
   見出し・前文・ナビを同じ書体で揃えると、一覧が「紙面」に見える。 */

.duad-home,
.duad-genre {
  /* 幅は絞らない。帯と同じ左右の余白だけを取って、画面いっぱいに使う */
  margin: 0 auto;
  padding: 0 var(--duad-gutter) 3rem;
  font-family: var(--duad-display);
  font-weight: 300;   /* 地の文は一段細く */
  color: var(--duad-ink);
}

/* ---------- 節 ---------- */

.duad-section { margin: 2.6rem 0; }

.duad-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* 見出しも但し書きも、語の途中では折らない。
     横に並べきれないときは、但し書きを次の行へ落とす */
  flex-wrap: wrap;
  /* 横の隙間は詰める。**ここが1remあると、狭い画面で「すべて見る」が
     落ちる最後の一押しになっていた。** 題と但し書きは字の大きさで
     見分けがつくので、間を空けて区切る必要がない */
  gap: 0.2rem 0.4rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--duad-ink);
}

.duad-section__title {
  margin: 0;
  /* 記事下の節見出しと同じ値（assets/duad.css の :root）。
     一覧と記事で見出しの大きさが違うと、回遊したときに別のサイトに見える */
  font-size: var(--duad-section-head);
  font-weight: 600;
  letter-spacing: 0.02em;
  /* 見出しは折らない。狭い画面で「DUAD／SELECT」と2行に割れていた。
     詰められる側は右の但し書きなので、そちらを折る */
  white-space: nowrap;
  flex: 0 0 auto;
}

/* 英字の呼び名。日本語名と同じ大きさで並べると、狭い画面で
   「すべて見る」が1行に入らない。同じものの2つめの呼び名なので、
   一段小さく、字間を開けて添える */
.duad-section__en {
  font-size: 0.7em;
  /* 字間は広げすぎない。0.08em では13字で5pxほど増え、
     いちばん長い「滑る・乗る・潜る｜ACTION SPORTS」が360px幅で収まらなかった */
  letter-spacing: 0.05em;
  color: var(--duad-steel);
}

.duad-section__more {
  /* 見出しと同じ行に収めるぶん、こちらも少し詰める */
  font-size: 0.7rem;
  white-space: nowrap;
  color: var(--duad-steel);
}

/* 広告の但し書き。出す義務はあるが、見出しと競わせない。
   語の途中で折ると「アフィリエイトリン／ク」と割れて読みにくいので、
   折らずに次の行へ落とす（親の flex-wrap が受ける）。
   margin-left:auto は、行が変わっても右端に置くため */
.duad-section__note {
  font-size: 0.68rem;
  line-height: 1.6;
  white-space: nowrap;
  margin-left: auto;
  color: var(--duad-steel);
}

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

/* ---------- 見出しの上下に付くもの ---------- */

/* ジャンル。大文字・字間広め・小さめ */
.duad-card__eyebrow {
  margin: 0.9rem 0 0.45rem;
  font-size: 0.74rem;
  font-weight: 600;   /* 記事ページのジャンル表示と同じ太さ */
  letter-spacing: 0.1em;
}

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

.duad-card__sep {
  opacity: 0.45;
  margin: 0 0.15em;
}

.duad-card__eyebrow time { color: var(--duad-steel); }

/* ジャンルの下の1行。「ホンダ シティ ターボII」。
   見出しは含意で書くので、一覧では何の記事か分からない。
   ジャンルより目立たせず、見出しより先に読ませる位置に置く */
/* トップの1本目。ジャンルと同じ行に置くので、色だけ落として区別する */
.duad-card__product-inline {
  color: var(--duad-steel);
}

.duad-card__product {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--duad-steel);
  letter-spacing: 0.02em;
}

/* ---------- 大きい1本 ----------
   文章が先、画像が後。何の話かが画像を待たずに決まる。 */

.duad-lead-story {
  margin: 1.6rem 0 0;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--duad-ink);
}

/* リード記事の下線と、続くカードの隙間。
   節見出しは margin-bottom で 1.1rem 空けているが、リード記事は
   0 だったため、次の行のキービジュアルが罫線に貼り付いていた */
.duad-lead-story + .duad-grid { margin-top: 1.6rem; }

.duad-lead-story .duad-card__eyebrow { margin-top: 0; }

.duad-lead-story__title {
  margin: 0 0 0.7rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;   /* ゴシックの太い見出しは詰めたほうが締まる */
  /* 折り返しは <wbr>（文の区切り）でだけ。語の途中で割らない */
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 見出しは下線付きのリンク。Monocleと同じく、押せることを字で示す */
.duad-lead-story__title a,
.duad-card__title a {
  color: var(--duad-ink);
  /* 下線も文字と同じ黒。赤はジャンル表示やボタンだけに絞る */
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
.duad-lead-story__title a:hover,
.duad-card__title a:hover { color: var(--duad-accent); }

/* 「シリーズで読む」の枠だけ、サブタイトルの下に連載名を置く。
   1行に収まる大きさにする。2行に折り返すと、そのカードだけ背が伸びて
   隣の列と文字の位置が揃わなくなる */
.duad-card__series {
  display: flex;
  align-items: baseline;
  gap: 0 0.55em;
  margin: 0.5rem 0 0;
  min-width: 0;
  white-space: nowrap;
}

.duad-card__series-label {
  flex: none;
  font-family: var(--duad-display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--duad-accent);
}

.duad-card__series-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;   /* 長い連載名が来ても、行は増やさない */
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--duad-steel);
}

/* 見出し（600・大）→ サブタイトル（500・中）→ 前文（300・小）の3段。
   同じ太さ・近い大きさで積むと、どれから読むのか分からなくなる。 */
.duad-lead-story__subtitle {
  margin: 0 0 .5rem;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--duad-ink);
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.duad-lead-story__excerpt {
  /* 画の上（サブタイトルとの間）と同じだけ空ける。
     0にすると、画に文章がくっついて見える */
  margin: 1.1rem 0 0;
  font-size: .95rem;
  font-weight: 300;
  color: var(--duad-steel);
  line-height: 1.85;
}

.duad-lead-story__link { display: block; margin-top: 1.1rem; }

.duad-lead-story__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--duad-paper);
}

/* タイポグラフィの画は切り落とさない。写真と違い、端が欠けると語が読めない */
.duad-lead-story__image--type,
.duad-card__image--type {
  object-fit: contain;
}

/* ---------- カードのグリッド ----------
   隙間ではなく罫線で区切る。紙面の段組みと同じ見え方になる。
   スマホでも2列（Monocleの並び）。 */

.duad-grid {
  display: grid;
  /* minmax(0,…) にしないと、折り返さない見出し（word-break: keep-all）を
     持つ列だけが広がり、列幅が揃わなくなる */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* **列の間は隙間で取り、罫線はその中心に引く。**
     以前はカードの左右paddingで間を作り、カードの境界に線を引いていた。
     だが両端を節見出しの罫と揃えるには端の外側を0にする必要があり、
     そのぶん内側を2倍にして中身の幅を揃えていた。結果、線は
     絵と絵の中心から左右に約10pxずれる。隙間にすれば中心に置ける。 */
  column-gap: var(--duad-col-gap, 2.4rem);
}

/* 2列で最後の1枚が余ると、その行の罫線が半分で切れる。
   右隣の空きに、線の続きだけを描く */
.duad-card { position: relative; }
/* **最後の行に空きマスが出たとき、縦罫を空きマスの側まで通す。**
   縦罫はカードの `::before` が引いているので、カードが無い場所には出ない。
   そこで**空きマスぶんの面を1枚置き、列の幅ごとに線を繰り返す**。
   線の位置は隙間の中心なので、埋めるカードがあるときと同じ見え方になる。

   横罫（行の境目）はここでは引かない。隣のカードが `border-top` で
   引いているので、重ねると空きマスの上だけ二重に見える。

   **判定は「実際の列数」で行う。** `data-columns` はPC基準の値（3や4）で、
   3列・4列の指定は `min-width: 961px` の中だけ。スマホは常に2列。 */
.duad-grid > .duad-card:last-child:nth-child(2n + 1)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + var(--duad-col-gap, 2.4rem) / 2);
  width: 100%;
  border-left: 1px solid var(--duad-line);
}

@media (min-width: 961px) {
  .duad-grid[data-columns="3"] > .duad-card:last-child::after,
  .duad-grid[data-columns="4"] > .duad-card:last-child::after {
    content: none;
  }

  /* 空きマス1つ */
  .duad-grid[data-columns="3"] > .duad-card:last-child:nth-child(3n + 2)::after,
  .duad-grid[data-columns="4"] > .duad-card:last-child:nth-child(4n + 3)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + var(--duad-col-gap) / 2);
    border-left: 1px solid var(--duad-line);
  }

  /* 空きマス2つ以上は、列の幅ごとに繰り返す */
  .duad-grid[data-columns="3"] > .duad-card:last-child:nth-child(3n + 1)::after,
  .duad-grid[data-columns="4"] > .duad-card:last-child:nth-child(4n + 2)::after,
  .duad-grid[data-columns="4"] > .duad-card:last-child:nth-child(4n + 1)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(100% + var(--duad-col-gap) / 2);
    width: calc(100% + var(--duad-col-gap));
    background: repeating-linear-gradient(
      to right,
      var(--duad-line) 0 1px,
      transparent 1px calc(100% + var(--duad-col-gap))
    );
  }

  .duad-grid[data-columns="4"] > .duad-card:last-child:nth-child(4n + 1)::after {
    width: calc(200% + var(--duad-col-gap) * 2);
  }
}

/* **縦罫は、左の隙間のちょうど真ん中に引く。**
   以前はカードの `border-left` が引いていたが、両端を節見出しの罫と
   揃えるため端の外側を0にし、そのぶん内側を2倍にしていた。
   その結果、線は絵と絵の中心から左右に約10pxずれていた（実測）。
   隙間（column-gap）を作り、その中心に置けば必ず真ん中に来る。 */
.duad-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--duad-col-gap, 2.4rem) / -2);
  border-left: 1px solid var(--duad-line);
}

.duad-card { margin: 0;
  /* カードの幅を基準に、中の文字の大きさを決められるようにする */
  container-type: inline-size;
  padding: 1.2rem 0 1.6rem;
  border-top: 1px solid var(--duad-line);
}

/* 外周には罫線を出さない（列数ごとに先頭を打ち消す）。
   外周の余白を落としたぶんは内側に足す。落としたままだと、
   端の列だけ中身が広くなり、キービジュアルの大きさが列ごとに変わる。 */
.duad-card:nth-child(2n + 1)::before { content: none; }

.duad-card:nth-child(-n + 2) { border-top: none; padding-top: 0; }

.duad-card__link { display: block; }

.duad-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--duad-paper);
}

.duad-card__title {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 2行で固定する。3行になるとカードの高さが揃わず、並びが崩れる。
     サブタイトルは18〜24字と決めてあるので、通常は切り詰めは起きない
     （起きるのは規約を外れた長さのときだけ）。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  /* サブタイトルは「1行12字×2行」で書く決まり。
     カードが狭い画面では、1remのままだと10字しか入らず末尾が「…」で切れる。
     カード幅の1/12を上限に字を詰めて、24字が2行に必ず収まるようにする。 */
  font-size: min(1rem, 8.2cqw);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.005em;
}

/* 一覧のカードに前文は出さない（Monocleと同じく見出しだけで並べる）。
   前文が入ると1件が縦に伸び、2列の並びが崩れる。 */

/* ---------- DUAD SELECT（記事横断） ---------- */

.duad-select-strip {
  margin: 3.5rem 0;
  padding: 1.6rem 1.3rem;
  background: var(--duad-paper);
}

.duad-select-strip .duad-section__head { border-bottom-color: var(--duad-ink); }

/* DUAD SELECT と DUAD CLUB は、節の名前ではなく**ブランドの名前**。
   欧文の大文字なので字間を広く取る。同じ字間を日本語の節見出し
   （「最新の記事」など）に当てると間延びするので、この2つにだけ当てる。

   text-indent は中央寄せの帯にだけ足す。字間は最後の字のうしろにも入るので、
   中央に置くとその分だけ右へ寄る。左揃えのSELECT側に足すと、逆にずれる。 */
.duad-select-strip .duad-section__title,
.duad-club-strip__label {
  font-family: var(--duad-display);
  font-size: var(--duad-section-head);
  font-weight: 600;
  letter-spacing: .22em;
}

.duad-select-strip__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.duad-select-strip__item {
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid var(--duad-line);
}

.duad-select-strip__kind {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--duad-accent);
}

.duad-select-strip__name {
  margin: 0 0 0.3rem;
  font-weight: 600;
  line-height: 1.6;
}

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

.duad-select-strip__link {
  display: inline-block;
  padding: 0.5rem 1.4rem;
  background: var(--duad-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}
.duad-select-strip__link:hover { background: #a81a12; }

/* ---------- ジャンルTOP ---------- */

.duad-genre__head {
  margin: 2rem 0 2.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--duad-ink);
}

.duad-genre__en {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--duad-accent);
}

.duad-genre__title {
  margin: 0 0 0.5rem;
  font-family: var(--duad-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

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


/* ---------- DUAD CLUB（一覧の最後） ----------
   記事ページの案内より簡素にする。一覧は記事を探しに来る場所なので、
   特典まで並べると記事より説明のほうが長くなる。 */

.duad-club-strip {
  margin: 3.5rem 0 0;
  padding: 2.4rem var(--duad-gutter);
  /* **キービジュアルと同じ地にする。** 黒で敷いていたころ、一覧の最後で
     いきなり面が反転し、記事が終わったのではなく別のサイトに移ったように
     見えた。記事の画と同じグレーなら、同じ紙の続きとして読める。
     値は keyvisual.py が使っている地の色と同じ（#EDECE9）。 */
  background: #edece9;
  color: var(--duad-ink);
  text-align: center;
}

/* この帯には見出しが無く、この行が見出しの役をしている。
   前置き（eyebrow）の大きさのままだと、下の一文に負けて
   小見出しにも説明にも見えない。節見出しと同じ大きさに上げる。
   字間を広く取るので、最後の字のうしろに入る分だけ左へ戻して中央に置く */
.duad-club-strip__label {
  margin: 0 0 .8rem;
  /* 中央寄せなので、字間の最後の1つ分だけ左へ戻す */
  text-indent: .22em;
}

.duad-club-strip__lead {
  margin: 0 0 1.4rem;
  font-size: 1.05rem;
  line-height: 1.8;
  /* 狭い欄では最後の行に「す。」だけが残った。
     行の長さを揃えて、1字だけ送られる形を避ける */
  text-wrap: balance;
  /* <wbr> を置いた位置で折る。無いと語の途中で割れる */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.duad-club-strip__link {
  display: inline-block;
  padding: .8rem 2.4rem;
  background: var(--duad-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.duad-club-strip__link:hover { opacity: .88; }

.duad-club-strip__note {
  margin: 1rem 0 0;
  font-size: .78rem;
  opacity: .7;
}

/* 最下部の著作権表示 */
.duad-site-footer__copyright {
  margin: 1.2rem 0 0;
  font-size: .75rem;
  /* ロゴほど開かず、本文ほど詰めない。字間だけが目立たない程度に */
  letter-spacing: .05em;
  opacity: .55;
}

/* ---------- フッター ---------- */

.duad-site-footer {
  margin-top: 4rem;
  padding: 2.5rem var(--duad-gutter) 2rem;
  background: var(--duad-ink);
  color: var(--duad-paper);
  font-family: var(--duad-body);
}

/* 節は開閉式。ジャンルが10個あるので、開いたまま並べると
   スマホではフッターだけで画面3枚ぶんになる */
.duad-site-footer__sections {
  /* 下の注記までが空きすぎると、フッターが2つに割れて見える */
  margin: 0 0 1.4rem;
}

.duad-site-footer__section {
  border-bottom: 1px solid rgba(244, 241, 234, 0.2);
}

.duad-site-footer__section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
  font-family: var(--duad-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  list-style: none;
}
.duad-site-footer__section summary::-webkit-details-marker { display: none; }

.duad-site-footer__section summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.duad-site-footer__section[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

/* **段組み（columns）ではなくグリッドで組む。**
   `columns: 2` は中身の高さを見て左右に振り分けるので、左右の行が
   互い違いにずれる。「クルマ」の右に「乗り物」が来ず、
   「クルマ」と「バイク・自転車」の中間の高さに浮いていた。
   グリッドなら、左右が必ず同じ行に並ぶ。 */
.duad-site-footer__section ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 行の高さを揃える。項目の文字数で高さが変わると、
     次の行から左右がずれていく */
  grid-auto-rows: min-content;
  gap: 0.5rem 1rem;
  align-items: start;
  margin: 0;
  padding: 0 0 1rem;
  list-style: none;
}

/* 日本語と英字は同じ分類の2行。**必ず一緒に置く** */
.duad-site-footer__section li {
  margin: 0;
}

.duad-site-footer__section a {
  color: var(--duad-paper);
  text-decoration: none;
  opacity: 0.8;
  font-size: 0.85rem;
}
.duad-site-footer__section a:hover { opacity: 1; text-decoration: underline; }

.duad-site-footer__cta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.2rem 0 0;
  flex-wrap: wrap;
}

.duad-site-footer__join {
  padding: 0.6rem 1.4rem;
  background: var(--duad-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
}
.duad-site-footer__join:hover { opacity: 0.88; }

.duad-site-footer__sub {
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--duad-paper);
  color: var(--duad-paper);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.85rem;
}
.duad-site-footer__sub:hover { background: var(--duad-paper); color: var(--duad-ink); }

/* 広告の窓口。**読者向けの2本と、わざと見た目を変える。**
   同じボタンの形で3本並べると、読者が広告の相談窓口を押してしまう。
   ここは押しボタンにせず、小さな下線の1行にする。 */
/* ナビの最後の行（運営情報）の下に置く。
   `__sections` が下に 1.4rem を持っているので、ここは上を足さない。
   足すと区切り線から離れすぎて、どこにも属さない1行に見える。
   下は `__legal` の区切り線までの間隔。 */
.duad-site-footer__biz {
  margin: 0 0 1.4rem;
  font-size: .74rem;
  line-height: 1.7;
}

.duad-site-footer__biz a {
  color: var(--duad-line);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  padding-bottom: 1px;
}

.duad-site-footer__biz a:hover {
  color: var(--duad-paper);
  border-bottom-color: var(--duad-paper);
}

/* 狭い画面では、2つの導線がロゴの下に独立した行として落ちる。
   そのとき文字の左右幅に合わせて2分割する。
   内容ぶんの幅のままだと、右端だけが下の区切り線より内側で終わり、
   フッターの右の縦のラインが揃わない。 */
@media (max-width: 640px) {
  .duad-site-footer__cta {
    width: 100%;
    flex-wrap: nowrap;
  }
  .duad-site-footer__join,
  .duad-site-footer__sub {
    /* 同じ幅で割る。文字数が違っても、端は左右の本文幅に着く */
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    text-align: center;
    white-space: nowrap;
  }
}

.duad-site-footer__brand {
  margin: 0 auto 1.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.duad-site-footer__logo { line-height: 0; }

.duad-site-footer__logo img {
  display: block;
  width: 92px;
  height: auto;
  /* 黒のワードマークを白に転ばせる（別ファイルを増やさない） */
  filter: brightness(0) invert(1);
}

.duad-site-footer__tagline {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  /* ロゴと並べて1つの塊に見せる。沈めすぎると添え物になる */
  opacity: 0.86;
}

.duad-site-footer__legal {
  /* **罫線は引かない。** もとは広告の窓口との区切りだったが、
     間にSNSが入ったことで、アイコンの真下に線が出た。
     区切りは空きで足りる。線が続くと、フッターだけ段が多く見える。 */
  margin: 1.6rem auto 0;
  font-size: 0.75rem;
  line-height: 1.8;
  opacity: 0.7;
}

/* ---------- 画面幅に応じた調整 ---------- */

@media (min-width: 641px) {
  .duad-lead-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
    align-items: start;
  }
  /* 文字は全部左の段に積み、画は右の段いっぱいに置く。
     並び順まかせにすると見出しだけが右の段（画の上）に飛ぶ。

     行の割り当ては明示する。画は4行ぶんにまたがるので、
     まかせると文字の行まで引き伸ばされて下に落ちる。
     最後の行を 1fr にして、余りはそこ（前文の下）に集める。 */
  .duad-lead-story {
    grid-template-rows: auto auto auto 1fr;
  }
  .duad-lead-story > .duad-card__eyebrow { grid-area: 1 / 1; }
  .duad-lead-story__title { grid-area: 2 / 1; }
  .duad-lead-story__subtitle { grid-area: 3 / 1; }
  .duad-lead-story__excerpt { grid-area: 4 / 1; margin-top: 0; }
  .duad-lead-story__link {
    grid-area: 1 / 2 / 5 / 3;
    align-self: start;
    margin-top: 0;
  }
  /* ジャンルの並びは中央に寄せる。狭い画面では横スクロールなので、
     入り切る幅になってから中央にする（先頭が隠れないように）。

     カテゴリーが18あるので1行には入らない。横スクロールのままだと、
     プルダウンで開いた欄が器（overflow）に切られて見えなくなる。
     折り返して2段にし、器からはみ出せるようにする。 */
  /* カテゴリー18項目を1行に収める。折り返すと帯が2段になって重い。
     字の大きさと区切りの余白を画面幅に連動させ、狭くなるほど詰める。
     器（overflow）は付けない。付けるとプルダウンが切られる。 */
  .duad-nav > ul {
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;

    /* **マスクも外す。** 端をぼかしているのは、狭い画面で横に流れる
       ことを示すため。ここでは流れないので要らない——だけではなく、
       **外さないとプルダウンが消える。**
       マスクの掛かった要素は、その箱の外に描かれたものが切り落とされる。
       961px以上ではパネルが position:absolute になって箱の下へ出るので、
       開いても何も見えなかった（狭い画面では箱の中に開くので見えていた）。
       overflow だけ visible にしても、マスクが残っていれば同じことになる */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .duad-nav > ul > li > a,
  .duad-nav__group > summary {
    font-size: clamp(.58rem, .92vw, .92rem);
    letter-spacing: .02em;
  }

  .duad-nav > ul > li + li::before {
    margin: 0 clamp(.22rem, .6vw, .85rem);
  }

  .duad-nav__group > summary::after {
    width: .3em;
    height: .3em;
  }
  .duad-lead-story__title { font-size: 1.85rem; }
  .duad-lead-story__subtitle { font-size: 1.25rem; }
  .duad-select-strip__list { grid-template-columns: repeat(2, 1fr); }
  .duad-menu__group { grid-template-columns: 6rem repeat(4, 1fr); }
  .duad-menu__panel ul { grid-template-columns: repeat(4, 1fr); }
  .duad-masthead__logo img { width: 176px; }
}

@media (min-width: 961px) {
  /* 3列。先頭の打ち消しも3列ぶんに張り替える */
  .duad-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* どの列も左右あわせて2.4rem。端の列は外側を0にして、そのぶん内側に寄せる */
  .duad-grid[data-columns="3"] { --duad-col-gap: 2.4rem; }
  /* **2列用の打ち消しを、いったん全部戻す。**
     `.duad-card:nth-child(2n + 1)::before { content: none }` は列数で
     絞れない（`data-columns` は3や4のまま）。そのままだと3列・4列でも
     奇数番目（3枚目・5枚目）の罫が消えていた。
     戻してから、実際の先頭列だけを消す。 */
  .duad-grid[data-columns="3"] .duad-card::before { content: ""; }
  .duad-grid[data-columns="3"] .duad-card:nth-child(3n + 1)::before { content: none; }
  
  .duad-grid[data-columns="3"] .duad-card:nth-child(-n + 3) { border-top: none; padding-top: 0; }

  .duad-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .duad-grid[data-columns="4"] { --duad-col-gap: 2rem; }
    .duad-grid[data-columns="4"] .duad-card::before { content: ""; }
  .duad-grid[data-columns="4"] .duad-card:nth-child(4n + 1)::before { content: none; }
  
  .duad-grid[data-columns="4"] .duad-card:nth-child(-n + 4) {
    border-top: none;
    padding-top: 0;
  }

  .duad-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duad-grid[data-columns="2"] { --duad-col-gap: 2.4rem; }
  .duad-grid[data-columns="2"] .duad-card:nth-child(2n + 1)::before { content: none; }
  
  .duad-grid[data-columns="2"] .duad-card:nth-child(-n + 2) {
    border-top: none;
    padding-top: 0;
  }

  .duad-lead-story__title { font-size: 2.2rem; }
  .duad-select-strip__list { grid-template-columns: repeat(4, 1fr); }
}

/* 見出し階層の頂点。画としては出さないが、読み上げと検索には要る。
   display:none だと読み上げからも消えるので、幅1pxに畳んで隠す。 */
.duad-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ジャンル／サブカテゴリー。「MOBILITY / MOTORCYCLES」が最長で22字。
   カード幅（2列時は約半分）でも折り返さないよう、字間を詰めて収める。
   折り返すとジャンルとサブカテゴリーが上下に割れ、別々の情報に見える。 */
.duad-card__eyebrow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duad-card__slash {
  margin: 0 0.4em;
  opacity: 0.4;
  font-weight: 400;
}

.duad-card__sub { color: var(--duad-steel) !important; }
.duad-card__sub:hover { color: var(--duad-accent) !important; }

/* 最長は「MOBILITY / MOTORCYCLES」の22字。スマホの2列（カード幅は
   実測で約150px）では0.74remだと約165px要り、確実にはみ出す。
   画面幅ではなく**カード幅**で決める（.duad-card が container）。
   同じ画面では全カードが同じ大きさになるので、記事ごとに
   文字の大きさが変わることはない。 */
.duad-card__eyebrow {
  font-size: clamp(0.52rem, 6.6cqw, 0.74rem);
  letter-spacing: 0.04em;
}

/* ---------- メニュー内の検索 ----------
   Monocleと同じく、3本線の中に入れる。
   常時出しておくと、18分類のナビと並んで読者の視線が割れる。 */

.duad-menu__search {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--duad-line);
}

.duad-menu__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--duad-line);
  background: #fff;
  color: var(--duad-ink);
  font-size: 1rem;   /* 16px未満だとiOSで拡大される */
  -webkit-appearance: none;
  appearance: none;
}

/* Monocleと同じく「GO」。日本語の「検索」だと欄の中で幅を取り、
   入力欄が狭くなる。2文字の英字なら指で押せる大きさに収まる */
.duad-menu__search button {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--duad-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.duad-menu__search button:hover { background: var(--duad-ink); }

/* 欄と丸ボタンを縦中央で揃える */
.duad-menu__search { align-items: center; }

/* ---------- 検索結果 ----------
   一覧と同じカードで出す。検索から来た人にだけ
   別の見え方をさせる理由がない。 */

.duad-search { padding-inline: var(--duad-gutter, 1.1rem); }

.duad-search__head {
  margin: 1.6rem 0 1.2rem;
  padding-bottom: 1.2rem;
  border-bottom: 2px solid var(--duad-ink);
}

.duad-search__en {
  margin: 0 0 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--duad-steel);
}

.duad-search__title {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-word;
}

.duad-search__lead {
  margin: 0;
  font-size: 0.95rem;
  color: var(--duad-steel);
}

/* 結果の頭にも同じ欄を置く。探し直すたびにメニューを開かせない */
.duad-search__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.6rem;
}

.duad-search__form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--duad-line);
  background: #fff;
  color: var(--duad-ink);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.duad-search__form button {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--duad-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.duad-search__form button:hover { background: var(--duad-ink); }

/* 横串（軸）のページ。ブランド・作り手・年代など、ジャンルをまたぐ束。
   検索結果と同じ組み方なので .duad-search をそのまま使い、
   ここでは「同じ軸のほかの値へ渡る帯」だけを足す。
   **この帯が軸ページの本体である。** 「日産の記事」を読み終えた人が
   その場で「1970年代」へ渡れないなら、札を付けた意味がない。 */
.duad-axis__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.6rem 0 0;
  padding-inline: var(--duad-gutter, 1.1rem);
}
.duad-axis__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.3em 0.7em;
  border: 1px solid var(--duad-rule, #ddd8cc);
  color: inherit;
  font-size: 0.8rem;
  text-decoration: none;
}
.duad-axis__chip span {
  color: var(--duad-accent, #cc2118);
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
}
.duad-axis__chip:hover { border-color: var(--duad-ink); }
/* いま見ている値。一覧の中で自分の居場所が分かるようにする */
.duad-axis__chip--on {
  background: var(--duad-ink);
  border-color: var(--duad-ink);
  color: var(--duad-paper, #fff);
}
.duad-axis__chip--on span { color: inherit; opacity: 0.7; }

/* フッターのジャンルに併記する英字。
   ナビと記事の見出しは英字で出ているので、フッターだけ日本語だと
   同じ分類だと分からない。日本語を主、英字を従で組む。 */
.duad-site-footer__en {
  display: block;
  margin-top: 0.15em;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0.55;
}


/* ============================================================
   起動の1枚。カセットが出てきて、2秒で消える。

   アニメーションはCSSだけで完結させ、最後に非表示で固定する。
   JavaScriptが動かない環境でも、画面が塞がったままにならない。
   ============================================================ */

.duad-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 天地の真ん中より、少し上に置く。
     視線は画面の中央よりわずかに上で止まる */
  padding-bottom: 9vh;
  background: var(--duad-paper);
  /* 出ているあいだも、押した指は下の記事へ届く。
     2秒とはいえ、押せない時間を作らない */
  pointer-events: none;
  /* 出ている長さ。ジャンルの1枚はこれを上書きして短くする */
  --duad-splash-time: 2.8s;
  /* せり上がってくる距離。カセットは**デッキから出てくる**ものなので、
     下から大きく動かす。ジャンルの絵は動きを小さく保つ（下記の上書き） */
  --duad-splash-rise: 3.6rem;
  animation: duad-splash-out var(--duad-splash-time) ease forwards;
}

/* ジャンルの1枚は短く。ブランドの1枚は初回だけだが、こちらは
   分類を渡り歩くたびに出る。2.8秒のままだと、回遊の邪魔になる */
.duad-splash--genre {
  --duad-splash-time: 1.5s;
  /* 絵は「浮かび上がる」。カセットと同じ距離を動かすと、
     1.5秒では慌ただしく見える */
  --duad-splash-rise: 1.1rem;
}

/* 絵と名前をひとまとめにして動かす。
   絵だけに動きを掛けると、名前が動かずに取り残される */
.duad-splash__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  /* 立ち上がりを緩くする。cubic-bezier(.22,.9,.3,1) は
     最初の一瞬で一気に進むので、跳ねて見えた */
  animation: duad-splash-eject var(--duad-splash-time)
    cubic-bezier(.25, .1, .25, 1) forwards;
}

.duad-splash__art {
  /* 実物と同じ比率。幅は画面に合わせ、大きくなりすぎないところで止める */
  width: min(41vw, 20rem);
}

/* ジャンルの絵（src/duad/illustrations.py）。
   置かれた箱の幅に合わせる。大きさは置いた側で決める */
.duad-illust {
  display: block;
  width: 100%;
  height: auto;
}

/* 分類名。絵だけだと、クワガタや富士山が何を指しているのか伝わらない */
.duad-splash__label {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
}

.duad-splash__en {
  font-family: var(--duad-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .3em;
  /* letter-spacing の分だけ右に寄るので、半分戻して中央に置く */
  text-indent: .3em;
  color: var(--duad-accent);
}

.duad-splash__ja {
  font-size: 1.02rem;
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--duad-ink);
}

/* 出てきて、少し止まって、消える */
/* 出てきて、少し止まって、消える。
   動きは小さく、時間は長く。移動量を減らしてぼかしを添えると、
   「せり出す」ではなく「浮かび上がる」に変わる。
   0→32%で入るので、前の版（0→22%）より立ち上がりが緩い。
   上がってくる距離は --duad-splash-rise（カセットは大きく、絵は小さく） */
@keyframes duad-splash-eject {
  0%   {
    opacity: 0;
    transform: translateY(var(--duad-splash-rise)) scale(.985);
    filter: blur(8px);
  }
  32%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  74%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-.5rem) scale(1.006); filter: blur(4px); }
}

/* 面ごと消えるほう。80%から引き始めて、最後まで20%かけて抜く */
@keyframes duad-splash-out {
  0%, 80%  { opacity: 1; visibility: visible; }
  100%     { opacity: 0; visibility: hidden; }
}

/* 動きを減らす設定のときは、出さない */
@media (prefers-reduced-motion: reduce) {
  .duad-splash { display: none; }
}


/* ============================================================
   一覧ページに置く2つの帯

   FROM DUADISTS（読者が出したもの）と DUAD VOICES（人が書いたもの）。
   組みは同じにする。並んで出てくるので、違えると段が揃わない。
   ============================================================ */


/* 記事の下に置く欄と違い、一覧では上の罫を細くする。
   記事一覧の区切りと同じ太さにすると、帯が記事の一部に見える */
.duad-duadists-strip { border-top-width: 1px; }

/* ジャンルページの絞り込み。
   サブカテゴリーはナビから外し、着いてから絞る形にした。
   入り切らない分は横に流す——縦に折り返すと見出しから離れる */
.duad-genre__filter {
  margin: .9rem 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.duad-genre__filter ul {
  margin: 0;
  padding: 0 0 .3rem;
  list-style: none;
  display: flex;
  gap: .4rem;
  width: max-content;
}
.duad-genre__filter a {
  display: block;
  padding: .25rem .7rem;
  font-size: .7rem;
  letter-spacing: .08em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--duad-steel);
  border: 1px solid var(--duad-line);
}
.duad-genre__filter a:hover,
.duad-genre__filter a.is-all {
  color: var(--duad-ink);
  border-color: var(--duad-ink);
}

/* ナビの束を開いたとき。英字と日本語を2段で出す */
.duad-nav__en {
  display: block;
  font-size: .62rem;
  letter-spacing: .14em;
  color: var(--duad-accent);
}
.duad-nav__ja {
  display: block;
  font-size: .85rem;
}

/* メニューの中の束の見出し */
.duad-menu__bundle {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--duad-accent);
}

.duad-menu__star {
  margin-right: .35em;
  color: var(--duad-accent);
}

/* --------------------------------------------------------------------------
   お気に入り

   記事の末尾に置く。読み終えた人が押すものなので、本文の途中に置かない。
   未ログインのときは details の開閉で案内を出す（JavaScriptを使わない）。
   -------------------------------------------------------------------------- */

.duad-menu__mine {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--duad-line);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.duad-menu__mine a {
  color: var(--duad-ink);
  text-decoration: none;
  font-weight: 600;
}

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

.duad-fav {
  margin: 3rem auto 0;
  max-width: 34rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--duad-line);
  text-align: center;
}

.duad-fav form {
  margin: 0;
}

/* summary と button の両方に当てる。未ログインでは summary が
   ボタンの見た目を持つので、同じ形にしておく */
.duad-fav__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--duad-ink);
  background: #fff;
  color: var(--duad-ink);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;   /* summary の三角を消す */
}

.duad-fav__button::-webkit-details-marker {
  display: none;
}

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

.duad-fav__button--on {
  background: var(--duad-ink);
  color: #fff;
}

.duad-fav__button--on:hover {
  background: var(--duad-accent);
  border-color: var(--duad-accent);
  color: #fff;
}

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

.duad-fav__button--on .duad-fav__star {
  color: #fff;
}

.duad-fav__note {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  color: var(--duad-steel);
}

.duad-fav__prompt {
  display: inline-block;
}

.duad-fav__panel {
  margin-top: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--duad-line);
  background: #fff;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.9;
}

.duad-fav__panel p {
  margin: 0 0 0.6rem;
}

.duad-fav__register {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.6rem 1.4rem;
  background: var(--duad-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   ランキングの帯（トップの1本目の下）

   クラス名は duad-ticker。duad-rank は記事の中のランキング枠が使っていて、
   あちらは赤い縦線と赤い丸数字を持つ。同じ名前だとそれを引き継ぐ。

   横スクロールとして持ち、スクリプトが少しずつ送る。指で動かすのは
   ブラウザの仕事にできるので、掴んで動かす処理を自前で書かずに済む。
   -------------------------------------------------------------------------- */

.duad-ticker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 2rem;
  padding: 0.45rem 0;
  /* 上はリード記事の下罫（墨1px）が受け持つ。こちらは下だけを同じ墨で引き、
     帯が上下の罫で挟まれた1本の帯として見えるようにする */
  border-bottom: 1px solid var(--duad-ink);
  overflow: hidden;
}

.duad-ticker__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--duad-accent);
}

.duad-ticker__window {
  flex: 1 1 auto;
  min-width: 0;
  /* 指で左右に動かせるようにする。動かすのはブラウザの仕事にできる */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;            /* 帯なので、つまみは出さない */
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  /* 端で切れるのではなく、消えていくように見せる */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.2rem, #000 calc(100% - 1.2rem), transparent);
}

.duad-ticker__window::-webkit-scrollbar { display: none; }
.duad-ticker__window.is-grabbing { cursor: grabbing; }

/* **流すのはCSSでやる。** はじめは JavaScript で scrollLeft を送っていたが、
   読み込み側がスクリプトを止める場所（プレビューなど）では帯が固まる。
   同じ列を2本並べて -50% まで動かし、そこで先頭に戻せば切れ目が見えない。 */
.duad-ticker__track {
  display: flex;
  width: max-content;
  animation: duad-ticker-scroll 45s linear infinite;
}

/* 触れているあいだは止まる。iOSでも、指を置いた時点で :hover が当たる。
   止まっているあいだに指で左右へ動かせて、離せばまた流れ出す */
.duad-ticker:hover .duad-ticker__track,
.duad-ticker:focus-within .duad-ticker__track,
.duad-ticker:active .duad-ticker__track {
  animation-play-state: paused;
}

@keyframes duad-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* 2本目の先頭が1本目の位置に来る */
}

.duad-ticker__copy { display: flex; }

.duad-ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  padding: 0 1.1rem;
  border-right: 1px solid var(--duad-line);
  white-space: nowrap;
  text-decoration: none;
  color: var(--duad-ink);
  font-size: 0.78rem;
  line-height: 1.9;
}

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

/* 数字だけ。丸も塗りも置かない（記事の中のランキング枠と役割が違う） */
.duad-ticker__no {
  font-size: 0.8rem;
  /* 600 が見出しと同じ最大の太さ。700 は本文から抜いた一文だけに使う
     （tests/test_site.py がその規則を見ている） */
  font-weight: 600;
  color: var(--duad-accent);
  font-variant-numeric: tabular-nums;   /* 1桁と2桁で字送りが崩れない */
  line-height: 1;
}

.duad-ticker__genre {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--duad-steel);
}

.duad-ticker__title { font-weight: 400; }

/* 動きを減らす設定の人には流さない（スクリプト側でも止めている）。
   押して動かせる帯としては残る */
@media (prefers-reduced-motion: reduce) {
  .duad-ticker__track { animation: none; }
  .duad-ticker__copy { display: none; }   /* 流さないなら2本目は要らない */
}

/* --------------------------------------------------------------------------
   まだ記事の無いジャンル

   隠さずに出す。DUADが何を扱う場所なのかは、41の名前が並んで初めて伝わる。
   ただし押せない。押して空のページに着くほうが、押せないより悪い。
   記事が1本入れば、この見た目は自動で外れる。
   -------------------------------------------------------------------------- */

.duad-nav__closed,
.duad-menu__closed {
  color: var(--duad-steel);
  opacity: 0.45;
  cursor: default;
}

.duad-nav__closed { display: block; }

.duad-menu__closed { display: block; }

/* 英字の赤も落とす。赤いままだと、押せるものと見分けが付かない */
.duad-nav__closed .duad-nav__en,
.duad-menu__closed .duad-menu__en {
  color: inherit;
}

/* --------------------------------------------------------------------------
   法務文書のページ（利用規約・プライバシーポリシー）

   読ませる文書なので、記事より行間を広く、幅を狭く。
   表が多いので、狭い画面では横に流す。
   -------------------------------------------------------------------------- */

.duad-legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.4rem 1.2rem 4rem;
}

.duad-legal__title {
  margin: 0 0 2rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.duad-legal__body {
  font-size: 0.92rem;
  line-height: 2;
}

.duad-legal__body h2 {
  margin: 2.4rem 0 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--duad-line);
  font-size: 1.05rem;
  font-weight: 600;
}

.duad-legal__body h3 {
  margin: 1.6rem 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.duad-legal__body p { margin: 0 0 1rem; }
.duad-legal__body ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.duad-legal__body li { margin: 0 0 0.3rem; }

.duad-legal__body blockquote {
  margin: 0 0 1.2rem;
  padding: 0.8rem 1.1rem;
  border-left: 3px solid var(--duad-accent);
  background: var(--duad-paper);
}

.duad-legal__body code {
  padding: 0.1em 0.35em;
  background: var(--duad-paper);
  font-size: 0.88em;
}

/* 表は狭い画面で横に流す。畳むと、対応する見出しが分からなくなる */
.duad-legal__table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 0 0 1.4rem;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.duad-legal__table th,
.duad-legal__table td {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--duad-line);
  text-align: left;
  vertical-align: top;
  white-space: normal;
}

.duad-legal__table th {
  background: var(--duad-paper);
  font-weight: 600;
}

.duad-legal__rule {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid var(--duad-line);
}

.duad-legal__others {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--duad-line);
}

.duad-legal__others ul { margin: 0; padding: 0; list-style: none; }
.duad-legal__others a { color: var(--duad-ink); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   単発のページ（ニュースレター・お問い合わせ）

   法務文書ほど長くないので、幅はやや狭く、文字は少し大きく。
   -------------------------------------------------------------------------- */

.duad-page {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2.4rem 1.2rem 4rem;
}

.duad-page__title {
  margin: 0 0 1.6rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.duad-page__body {
  font-size: 0.95rem;
  line-height: 1.95;
}

.duad-page__body p { margin: 0 0 1.1rem; }

.duad-page__body h2 {
  margin: 2.2rem 0 0.7rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--duad-line);
  font-size: 1.02rem;
  font-weight: 600;
}

.duad-page__table {
  width: 100%;
  margin: 0 0 1.4rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.duad-page__table td {
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid var(--duad-line);
  vertical-align: top;
}

/* 左の見出し列は、入るなら1行で。**入らないときは折る。**
   nowrap を効かせたままだと、「広告・コラボレーションについてpartners@duad.jp」が
   1行ぶんの幅を要求して表が器を24px超え、/contact/ のページごと横に伸びていた。
   表は auto レイアウトなので、広い画面では指定を外しても1行のまま収まる */
.duad-page__table td:first-child { padding-right: 1.2rem; }

/* ============================================================
   媒体資料（/media/）

   **PDFにしない。** 数字が動くたびに作り直して配り直すことになり、
   古い版が相手の手元に残る。ページなら、いつ見ても最新。

   読むのは広告主で、読者ではない。**記事より事務的に組む。**
   節に番号を振るのは、電話しながら「03の表ですが」と指せるようにするため。
   ============================================================ */

.duad-kit {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.4rem 1.2rem 5rem;
}

.duad-kit__hero {
  padding: 0 0 1.6rem;
  border-bottom: 2px solid var(--duad-ink);
}

.duad-kit__eyebrow {
  margin: 0 0 .6rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--duad-accent);
}

.duad-kit__title {
  margin: 0 0 .5rem;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
}

.duad-kit__tagline {
  margin: 0 0 .8rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--duad-accent);
}

.duad-kit__mission {
  margin: 0;
  font-size: .88rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--duad-steel);
}

.duad-kit__block {
  padding: 2rem 0 0;
}

.duad-kit__block + .duad-kit__block {
  margin-top: 1.6rem;
  border-top: 1px solid var(--duad-line);
}

/* 節の番号。電話しながら「03の表ですが」と指せるように */
.duad-kit__no {
  margin: 0 0 .2rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--duad-steel);
  font-variant-numeric: tabular-nums;
}

.duad-kit__head {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.5;
}

.duad-kit p {
  margin: 0 0 1rem;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.95;
}

.duad-kit strong { font-weight: 600; }

.duad-kit__lead {
  font-size: .98rem !important;
  font-weight: 400 !important;
}

/* 数字の並び。**桁を揃える。** 3つ以上並ぶと表のように読まれる */
.duad-kit__facts {
  display: grid;
  gap: 1px;
  background: var(--duad-line);
  border: 1px solid var(--duad-line);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 0 0 1.2rem;
}

.duad-kit__facts > div {
  background: #fff;
  padding: .8rem .9rem 1rem;
}

.duad-kit__k {
  display: block;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--duad-steel);
  margin-bottom: .2rem;
}

.duad-kit__v {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.duad-kit__v small {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: .1em;
}

.duad-kit__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2rem;
  font-size: .86rem;
  font-weight: 300;
  line-height: 1.8;
  background: #fff;
}

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

.duad-kit__table thead th {
  border-bottom: 1px solid var(--duad-ink);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--duad-steel);
}

.duad-kit__table tbody th {
  width: 34%;
  font-weight: 600;
  color: var(--duad-ink);
}

/* 宛先の表。**用件を左、アドレスを右。**
   文中に混ぜると、どれが自分の用件の宛先か読み取るのに一度考える。
   ここは読ませる場所ではなく、探して写す場所 */
.duad-kit__table--contact tbody th {
  width: 52%;
  font-weight: 400;
  color: var(--duad-steel);
}

.duad-kit__addr {
  font-size: 1rem;
  font-weight: 600;
  color: var(--duad-accent) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--duad-accent);
  /* アドレスは折り返さない。途中で切れると写し間違える */
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* 狭い画面では2列が窮屈になる。用件を上、アドレスを下に積む */
  .duad-kit__table--contact tbody th,
  .duad-kit__table--contact tbody td {
    display: block;
    width: auto;
  }
  .duad-kit__table--contact tbody th {
    border-bottom: 0;
    padding-bottom: .1rem;
    font-size: .78rem;
  }
}

.duad-kit a { color: var(--duad-ink); }

.duad-kit__note {
  font-size: .76rem !important;
  color: var(--duad-steel);
  padding-top: .8rem;
  border-top: 1px solid var(--duad-line);
}

@media (min-width: 720px) {
  .duad-kit { padding: 3.2rem 1.5rem 6rem; }
  .duad-kit__title { font-size: 2.1rem; }
}

/* --------------------------------------------------------------------------
   SNSのアイコン
   メニューとフッターの2か所に、同じ並びで出る（並び順は config/brand.yaml）。
   地の色が違うので、色は currentColor で親から継がせる。
   -------------------------------------------------------------------------- */
.duad-sns {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
}

.duad-sns a {
  display: block;
  /* 指で押せる大きさを確保する。見た目の丸は置かない */
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
  opacity: .75;
  transition: opacity .15s;
}

.duad-sns a:hover,
.duad-sns a:focus-visible { opacity: 1; }

.duad-sns svg { display: block; width: 100%; height: 100%; }

/* メニューでは「あなたの夢中」と同じ行に置く。
   お気に入りが左、SNSが右。行を増やさずに空きを使う */
.duad-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  /* 検索欄の下線・ジャンルの区切りと同じ幅で通す */
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--duad-line);
}

/* **罫線は行のほうが持つ。** もともと `__mine` が border-bottom を
   持っていたが、flexの中に入れた時点で幅が文字の長さまで縮み、
   検索欄やジャンルの区切りより短い線になった。
   線を引くのは行の役目で、中の要素の役目ではない。 */
.duad-menu__row .duad-menu__mine {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* フッターは黒地。ジャンルの一覧と広告の窓口のあいだで、
   左右に振らず中央に置く（両側の行がどちらも左揃えなので、
   同じ揃えにすると区切りに見えない） */
/* 広告の窓口の下。**罫線は引かない。**
   この位置は上下をすでに線で挟まれていて、さらに1本足すと
   区切りだけが3本並ぶ */
.duad-sns--footer {
  justify-content: center;
  gap: 1.4rem;
  margin: 1.6rem 0 0;
}

/* メニューは白地。フッターほど詰めず、お気に入りの行に寄り添わせる */
.duad-sns--menu {
  gap: 1rem;
}

/* ジャンルの節は、題そのものが行き先の名前。押せるようにする。
   **下線は引かない。** 題のすぐ下に節の罫線があり、2本並ぶと段が増えて見える。
   色も変えない。ここは見出しであって、本文中のリンクではない。
   押せることは、指を置いたときに赤へ変わることで示す */
.duad-section__title a {
  color: inherit;
  text-decoration: none;
}

.duad-section__title a:hover,
.duad-section__title a:focus-visible {
  color: var(--duad-accent);
}

/* 設定を変えたことを、その場で見せる短い帯。
   **黙って効く仕掛けを作らない。** 内部除外の印は見た目が変わらないので、
   付けたのか付いていないのかを確かめる手段が無かった。 */
.duad-notice {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 70;                       /* 同意バナー(60)より上 */
  max-width: calc(100vw - 2rem);
  background: var(--duad-accent);
  color: var(--duad-paper);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.6;
  padding: .7rem 1.4rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .22);
  opacity: 1;
  transition: opacity .6s;
}
.duad-notice--out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .duad-notice { transition: none; }
}

/* フッターの「この端末でのアクセス解析を停止する」。
   まわりの注記と同じ見え方にする。**ボタンらしく目立たせない。**
   止めることを勧める画面ではなく、探した人が見つけられればよい。 */
.duad-site-footer__consent {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}