/* ============================================================
   pages.css — ページ固有のレイアウト
   部品は dobagaki.css にある。ここはそれを並べる器だけを持つ。
   ============================================================ */

/* ============ 基本 ============ */
body {
  margin: 0;
  background: var(--dg-base);
  color: var(--dg-ink);
  font: 500 13.5px/1.95 var(--dg-font-jp);
  -webkit-font-smoothing: antialiased;
}

.dg-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: 34px;
}

@media (max-width: 767px) {
  .dg-wrap { padding-inline: 16px; }
}

/* ============ セクション見出し ============
   英字2行。2行目は stroke 抜き。 */
.dg-section-head {
  font: 900 46px/1 var(--dg-font-en);
  letter-spacing: -.045em;
  color: var(--dg-ink);
  margin: 0 0 8px;
}

.dg-section-lead {
  font: 500 13.5px/1.95 var(--dg-font-jp);
  color: var(--dg-ink-70);
  margin: 0 0 26px;
}

/* ============ HERO ============ */
.dg-hero {
  position: relative;
  overflow: hidden;
  padding: 40px 0 52px;
  background: var(--dg-base);
  text-align: center;
}

/* 背景の装飾円。実物の値（210px / cyan-50 / left -70px / bottom 40px）。 */
.dg-hero::before {
  content: "";
  position: absolute;
  left: -70px;
  bottom: 40px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--dg-cyan-50);
  z-index: 0;
}

.dg-hero > .dg-wrap { position: relative; z-index: 1; }

.dg-hero__display {
  margin: 0;
  font: 900 104px/.9 var(--dg-font-en);
  letter-spacing: -.055em;
  color: var(--dg-ink);
}

.dg-hero__lead {
  display: inline-block;
  margin: -10px 0 0;
  padding: 10px 24px;
  background: var(--dg-ink);
  color: #fff;
  border-radius: var(--dg-r-pill);
  font: 700 15px var(--dg-font-jp);
  transform: rotate(-2deg);
}

/* コラージュ。左右を中央へ食い込ませ、中央を最前面に置く。 */
.dg-hero__collage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 300px;
  margin-top: 34px;
}

.dg-hero__slot { background: var(--dg-surface); }

.dg-hero__slot--left {
  width: 280px; height: 250px;
  transform: rotate(-7deg);
  margin-right: -30px;
}

.dg-hero__slot--center {
  width: 250px; height: 290px;
  z-index: 2;
  box-shadow: 6px 6px 0 var(--dg-ink);
}

.dg-hero__slot--right {
  width: 280px; height: 240px;
  transform: rotate(6deg);
  margin-left: -30px;
}

/* スロット内で画像を重ね、.active だけを表示する。 */
.dg-hero__slot { position: relative; }

.dg-hero__slot .hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity var(--dg-dur-enter) var(--dg-ease);
}

.dg-hero__slot .hero-slide.active { opacity: 1; }

/* ヒーローにステッカーと値札は置かない。ハンドオフの README には
   「左上にステッカー、右下に値札」とあるが、実装された設計
   （リデザイン案.dc.html の 1b）には存在せず、コラージュの直後が
   そのまま CTA になっている。README と実物が食い違う場合は実物を優先する
   （仕様A §3）。狭幅でコラージュ画像に完全に重なる問題も同時に解消する。
   .dg-sticker / .dg-price-tag の部品自体は dobagaki.css に残っており、
   CAMPAIGN セクションなど他所で使う。 */

.dg-hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 44px;
}

@media (max-width: 767px) {
  .dg-hero__display { font-size: 46px; line-height: .92; }
  .dg-hero__collage { height: 200px; }
  .dg-hero__slot--left   { width: 150px; height: 150px; margin-right: -20px; }
  .dg-hero__slot--center { width: 140px; height: 175px; }
  .dg-hero__slot--right  { width: 150px; height: 145px; margin-left: -20px; }
  .dg-hero__actions { flex-direction: column; align-items: center; }
}

/* style.css:6222/6232 の .hero-slide は scale(1.06) を持ち、.active で
   8秒の heroKenBurns を回す。ラグレキのヒーローは静止したコラージュで、
   3スロットが時差で切り替わる。ズームが重なると落ち着かないので止める。
   透明度のクロスフェード（opacity / transition）はそのまま使う。 */
.dg-hero__slot .hero-slide,
.dg-hero__slot .hero-slide.active {
  transform: none;
  animation: none;
}

/* ============ HEADER ============ */
.dg-header {
  /* style.css:332 は header を position: fixed / z-index: 1000 にしている。
     旧ヒーローは 100vh のフルブリードで、透明なヘッダーの下に潜り込む前提だった。
     新しい .dg-hero はそうではないため通常フローに戻す。
     fixed のままだと、直後のマーキーが y:0 に描画されてヘッダーに覆われて
     完全に見えなくなり、デスクトップではヒーローの見出しも隠れる。 */
  position: relative;
  top: auto;
  z-index: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 34px;
  background: var(--dg-base);
  border-bottom: var(--dg-stroke) solid var(--dg-ink);
}

/* style.css:351 の `header.is-scrolled` (0,1,1) は main.js がスクロールで
   付け外しする .is-scrolled に対して padding: 10px 5% を宣言している。
   .dg-header (0,1,0) だけでは負けるため、.dg-header.is-scrolled (0,2,0) で
   明示的に基準の padding を維持する。スクロール時だけヘッダーの高さと
   余白が % ベースの値に変わってしまうのを防ぐ。 */
.dg-header.is-scrolled { padding: 16px 34px; }

/* style.css:359 の .site-logo-link は height: 70px を宣言している。
   これがヘッダーの高さを決めてしまうため、ラッパーの高さは中身に任せる。 */
.dg-header__logo {
  height: auto;
  display: flex;
  align-items: center;
}

.dg-header__logo img { height: 24px; width: auto; display: block; }

.dg-header__controls { display: flex; align-items: center; gap: 12px; }

.dg-header__sns {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* style.css の `.sns-links .sns-link a` は2クラス+1要素 (0,2,1) で、
   ここが `.dg-header__sns a` (0,1,1) だけだと詳細度で負ける。
   実際に width/height が 48px（min 44px 止まり）、background が
   rgba(255,255,255,.15)、border が rgba(255,255,255,.25)、
   border-radius が 16px（角丸四角）になっており、白背景のヘッダー上では
   ink 縁取りの円バッジが完全に見えなくなっていた（アイコンだけが素で浮く）。
   `.sns-link` を経由させて同じ (0,2,1) に揃え、後読みの pages.css を
   勝たせる。 */
.dg-header__sns .sns-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: 50%;
  background: var(--dg-base);
  overflow: hidden;
}

.dg-header__sns img { width: 20px; height: 20px; object-fit: contain; }

/* style.css:596 の `header nav` は position: fixed / height: 100vh /
   opacity: 0 / visibility: hidden のフルスクリーンオーバーレイで、
   しかもメディアクエリの外にある。つまり現行サイトは全画面幅で
   ハンバーガーのみ。設計ではデスクトップは横並びのバーなので打ち消す。
   クラスセレクタ (0,1,0) は style.css の型セレクタ (0,0,2) より強い。 */
.dg-header__nav {
  position: static;
  width: auto;
  height: auto;
  padding-top: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  visibility: visible;
  overflow: visible;
  z-index: auto;
}

.dg-header__nav ul {
  display: flex;
  /* style.css の `header nav ul` が flex-direction: column を宣言している。
     こちらで宣言しない限り、詳細度に関係なくそれが唯一の宣言として採用される。
     必ず明示すること。 */
  flex-direction: row;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* style.css には `header nav ul` がもう1つある（旧モバイルメニューの
     「中央寄せカード」用: max-width: 460px / border / border-radius: 16px /
     box-shadow / background: #fff / overflow: hidden）。メディアクエリの外に
     あるため、デスクトップの横並びバーにも白い角丸カード＋影として出てしまう。
     宣言しない限り詳細度に関係なく残るため、ここで明示的に打ち消す。 */
  max-width: none;
  overflow: visible;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* 最初の `header nav ul` 側の text-align: center も同様に未宣言のまま残る。
     現状は各項目がタイト幅なので見た目には影響しないが、明示しておく。 */
  text-align: left;
}

/* style.css の `header nav ul li` が width: 100% と border-bottom を宣言している。
   横並びでは各項目が 100% を要求して圧縮され、CJK の「依頼する」は
   文字間で改行できるため1文字ずつ縦に積まれてしまう（ヘッダーが139pxに
   膨らんだ原因）。border-bottom は各項目の下にうっすら罫線を引いてしまう。
   宣言しない限り詳細度に関係なく style.css の値が残るため、両方明示する。 */
.dg-header__nav ul li {
  width: auto;
  border: none;
}

/* デスクトップではハンバーガーを隠す。style.css の .menu-toggle (0,1,0) より
   .dg-header .menu-toggle (0,2,0) が強い。 */
.dg-header .menu-toggle { display: none; }

.dg-header__nav a {
  font: 700 13px var(--dg-font-jp);
  color: var(--dg-ink);
  text-decoration: none;
  /* style.css に `header nav ul li a` が2つあり、後勝ちで padding: 18px 22px
     が実際に適用されている（15px 20px の宣言は上書きされて無効）。
     宣言しない限り詳細度に関係なく残るため明示して打ち消す。
     display: block / position: relative / overflow: hidden も同じ2ルールが
     宣言しているが、幅がタイト化した現状では見た目に影響しないため
     このラウンドでは打ち消していない（判断根拠は報告を参照）。 */
  padding: 0;
}

/* 「依頼する」だけ実物準拠の cyan ボタン。 */
.dg-header__nav a.nav-priority {
  padding: 11px 22px;
  background: var(--dg-cyan);
  /* style.css:5628 が color: #fff を宣言している。cyan 地に白文字は
     コントラスト比 約1.4:1 で WCAG の 4.5:1 を大きく下回る。
     仕様A §11 の「cyan/mint の上に白文字を置かない」に反するため
     明示的に ink へ戻す。ink なら約 7.5:1。 */
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  box-shadow: 3px 3px 0 var(--dg-ink);
  font-size: 12.5px;
  transition: transform var(--dg-dur-fast) ease-out,
              box-shadow var(--dg-dur-fast) ease-out;
}

.dg-header__nav a.nav-priority:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--dg-ink);
}

/* style.css:473/486 は下辺に teal のバーを走らせる。(0,2,2)/(0,3,2)。 */
.dg-header__sns .sns-link a::after,
.dg-header__sns .sns-link a:hover::after { content: none; display: none; }

/* style.css:490 は (0,3,1) で cyan/pink のグラデ・ピンク枠・ぼかし影。 */
.dg-header__sns .sns-link a:hover {
  background: var(--dg-cyan-50);
  border-color: var(--dg-ink);
  transform: translate(2px, 2px);
  box-shadow: none;
}

.dg-header__sns .sns-link a:active { transform: translate(3px, 3px); box-shadow: none; }

/* style.css:455/461/466 は alt 文字列ごとに寸法を指定しており (0,3,2)。
   pages.css:216 の .dg-header__sns img は (0,2,1) で負ける。 */
.dg-header__sns .sns-link a img[alt] {
  width: 20px; height: 20px;
  max-width: none; max-height: none;
  transform: none; filter: none;
}

.dg-header__sns .sns-link a:hover img { transform: none; }

/* style.css:5600 の :focus-visible は旧ティール。 */
.dg-header__sns .sns-link a:focus-visible { outline: 2px solid var(--dg-ink); outline-offset: 2px; }

@media (max-width: 900px) {
  .dg-header { padding: 12px 16px; }
  /* is-scrolled の打ち消しもモバイル幅の基準値に合わせる。 */
  .dg-header.is-scrolled { padding: 12px 16px; }
  .dg-header__sns { display: none; }
  /* display:block が style.css:542 の flex-direction:column を潰し、gap:6px が
     効かなくなって3本の線が密着し1本の棒になっていた（bar間 6px→0px、
     全体 21px→9px）。index / faq / about でも既に出ている。
     この display は 286行の none（デスクトップで隠す）と対になっている。
     メディアクエリは詳細度を上げないので、両者は (0,2,0) 同士の後勝ち。
     つまり「見せる」側の宣言はこの中に無ければならない。ファイル末尾の
     打ち消しブロックで display を宣言すると 900px 超でも出てしまう。 */
  .dg-header .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

  /* 狭幅ではオーバーレイに戻す。utils/templates.js が #main-nav に .open を付け外しする。 */
  .dg-header__nav {
    position: fixed;
    inset: 0;
    height: 100vh;
    padding-top: 80px;
    background: rgba(255, 255, 255, .98);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    z-index: 999;
    transition: opacity var(--dg-dur-base) ease-in-out,
                visibility var(--dg-dur-base) ease-in-out;
  }
  .dg-header__nav.open { opacity: 1; visibility: visible; }
  .dg-header__nav ul { flex-direction: column; gap: 20px; }
}

/* ============ 共通の打ち消し ============
   style.css は要素セレクタ `h2` に text-align / padding-bottom / border-bottom と
   ::after のティール色アクセントバーを当てている（296行・306行、メディアクエリの外）。
   クラス名での grep に一切引っかからないのに、新しい見出しはすべて <h2> なので
   Works・料金・FLOW・FAQ の4セクション全部に漏れる。棚卸しで発見。 */
.dg-wrap h2 {
  position: static;
  text-align: left;
  padding-bottom: 0;
  border-bottom: none;
}

.dg-wrap h2::after { content: none; display: none; }

/* ============ WORKS ============ */
/* ID セレクタはクラスより常に強い。ID を含めた形で打ち消す。 */
#gallery.dg-works { margin-top: 0; padding: 44px 0 52px; background: var(--dg-base); }
#load-more-container.dg-works__more { margin-top: 34px; }

.dg-works { padding: 44px 0 52px; background: var(--dg-base); }

.dg-works__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.dg-works__title {
  margin: 0;
  font: 900 46px/1 var(--dg-font-en);
  letter-spacing: -.045em;
  color: var(--dg-ink);
}

/* 2行目は mint の stroke 抜き。線幅は実物どおり 2px（本文の 2.5px ではない）。 */
.dg-works__title-sub { -webkit-text-stroke: 2px var(--dg-mint); }

.dg-works__lead {
  margin: 0;
  max-width: 420px;
  text-align: right;
  font: 500 13.5px/1.95 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* style.css の .category-tabs は中央寄せ・下罫線・上下の余白を持つ。 */
.dg-works__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  justify-content: flex-start;
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* style.css の .tab-btn::before は白い放射グラデの円で、ホバーと選択時に
   浮き上がって mint / ink の塗りを洗い流す。消す。 */
.dg-works__filter .tab-btn::before,
.dg-works__filter .tab-btn:hover::before,
.dg-works__filter .tab-btn.active::before { content: none; display: none; }

/* style.css の .tab-btn は opacity: .7 とぼかし影を持つ。
   ラグレキはぼかし影を使わず、未選択も減光しない。 */
.dg-works__filter .tab-btn {
  opacity: 1;
  box-shadow: none;
}

/* style.css の .tab-btn:hover は文字色・枠色・浮き上がり・影を変える。
   .dg-chip:hover は background しか宣言していないので他が漏れる。 */
.dg-works__filter .tab-btn:hover {
  border-color: var(--dg-ink);
  transform: none;
  box-shadow: none;
}

.dg-works__filter .tab-btn:hover:not(.active) { color: var(--dg-ink); }

/* style.css の .tab-btn.active は白い2px枠・シアンのグロー・scale(1.03)・
   グラデのアニメを持つ。.dg-chip 側に対応する宣言が無いので明示的に打ち消す。 */
.dg-works__filter .tab-btn.active {
  border: var(--dg-stroke) solid var(--dg-ink);
  box-shadow: none;
  transform: none;
  animation: none;
}

.dg-works__more { text-align: center; margin-top: 34px; }

/* カード。.work-card と .item は main.js の buildCard が生成するため
   クラス名を変えられない。style.css 側のルールを打ち消す。 */
.dg-work-grid .work-card {
  /* margin ショートハンドだと dobagaki の7周期の margin-top まで潰してしまう
     （どちらも (0,2,0) で、後から読まれる pages.css が勝つ）。
     段差は dobagaki に任せ、ここでは他の3辺だけ打ち消す。 */
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.dg-work-grid .item {
  display: block;
  position: relative;
  height: 170px;
  /* style.css:1214 の `.item { aspect-ratio: 16 / 9 }` が生きており、
     height だけ宣言しても比率が残る。content-box なので最小幅が
     170 × 16/9 = 302px に固定され、グリッドが縮まらず横スクロールが出る。 */
  aspect-ratio: auto;
  overflow: hidden;
  border: var(--dg-stroke) solid var(--dg-ink);
  background: var(--dg-surface);
}

.dg-work-grid .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* style.css の .item:hover img が scale(1.028) を掛け、カード側の
   scale(1.03) と重なって約5.9%になる。拡大はカード側だけに任せる。 */
.dg-work-grid .item:hover img { transform: none; }

/* 設計にホバーオーバーレイは無い。buildCard が出力するので隠す。 */
.dg-work-grid .hover-overlay,
.dg-work-grid .card-info { display: none; }

/* style.css の .item:hover::after は画像を最大32%暗くする。
   設計のホバーは rotate(0) scale(1.03) だけでマスクも明度も変えない。 */
.dg-work-grid .item::after,
.dg-work-grid .item:hover::after { content: none; display: none; }

/* style.css の .card-title は上罫線と白い背景帯を持つ。打ち消す。 */
.dg-work-grid .card-title {
  margin: 8px 0 0;
  padding: 0;
  border-top: none;
  background: none;
  font: 700 12.5px/1.5 var(--dg-font-jp);
  color: var(--dg-ink);
  text-align: left;
}

/* マスクの循環。値は dobagaki.css の .dg-mask--* と同じ。
   main.js がクラスを付けないため nth-child で当てる。
   こうすると「もっと見る」で追加されたカードにも自動で当たる。 */
.dg-work-grid > *:nth-child(7n+1) .item { border-radius: 50% 50% 46% 54% / 48% 52% 48% 52%; }
.dg-work-grid > *:nth-child(7n+2) .item { border-radius: 50% 14px 50% 14px; }
.dg-work-grid > *:nth-child(7n+3) .item { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }
.dg-work-grid > *:nth-child(7n+4) .item { border-radius: 999px; }
.dg-work-grid > *:nth-child(7n+5) .item { border-radius: 14px 14px 50% 50% / 14px 14px 45% 45%; }
.dg-work-grid > *:nth-child(7n+6) .item { border-radius: 50%; }
.dg-work-grid > *:nth-child(7n+7) .item { border-radius: 14px; }

@media (max-width: 767px) {
  .dg-works__head { flex-direction: column; align-items: flex-start; }
  .dg-works__title { font-size: 34px; }
  .dg-works__lead { text-align: left; max-width: none; }
}

/* ============ PRICE ============ */
.dg-price { padding: 44px 0 52px; background: var(--dg-base); }

.dg-price__title {
  margin: 0;
  font: 900 46px/1 var(--dg-font-en);
  letter-spacing: -.045em;
  color: var(--dg-ink);
}

.dg-price__lead {
  margin: 12px 0 28px;
  font: 500 13.5px/1.95 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

.dg-price__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dg-price__card { position: relative; }

/* 番号バッジ。カードの右上に少しはみ出す。 */
.dg-price__num {
  position: absolute;
  /* 三つのスタイルシートのどこにも * { box-sizing: border-box } が無い。
     content-box のままだと墨線の分だけ外寸が仕様の 38px を超えるため個別に指定する。 */
  box-sizing: border-box;
  top: -16px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: 50%;
  font: 900 14px var(--dg-font-en);
  color: var(--dg-ink);
}

.dg-price__num--cyan { background: var(--dg-cyan); }
.dg-price__num--mint { background: var(--dg-mint); }
/* ink 塗りの上は白文字でよい。コントラストが十分あるため。 */
.dg-price__num--ink  { background: var(--dg-ink); color: #fff; }

.dg-price__name {
  margin: 0 0 10px;
  font: 700 19px/1.4 var(--dg-font-jp);
  color: var(--dg-ink);
}

.dg-price__desc {
  margin: 0 0 18px;
  font: 500 13px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

.dg-price__amount {
  margin: 0;
  font: 900 30px/1 var(--dg-font-en);
  color: var(--dg-ink);
}

.dg-price__amount small {
  font: 700 13px var(--dg-font-jp);
  margin-left: 2px;
}

.dg-price__note {
  margin: 8px 0 0;
  font: 600 11px var(--dg-font-en);
  /* ink-45 は「キャプション」用。11px/600 の本文で白背景に 2.91:1 しか出ず
     本文色として不適格なので ink-70 (約 5.5:1) に上げる。 */
  color: var(--dg-ink-70);
}

.dg-price__more { text-align: center; margin: 34px 0 0; }

/* --- 以下は price.html のおまとめプラン用。index の #pricing-summary には
       対応する要素が無いので新設した。「人気」の札 .dg-price__tag は
       .price-tab-badge と面が同じなので、下の料金タブの節で相乗りさせている。 --- */

/* 打消線の旧価格。仕様は --dg-ink-45 だったが、白地で実測 2.91:1 で
   AA (4.5:1) を割る。すぐ上の .dg-price__note が同じ理由で ink-70 に
   上げてあるので、それに揃える（ink-70 は白地 5.37:1）。 */
.dg-price__was {
  color: var(--dg-ink-70);
  text-decoration: line-through;
  font: 700 13px var(--dg-font-en);
  margin-right: 8px;
}

.dg-price__arrow {
  margin-right: 8px;
  font: 700 13px var(--dg-font-en);
  color: var(--dg-ink-70);
}

/* CTA の上余白だけを足す。面は dobagaki.css の .dg-btn / .dg-btn--sm が持つ。 */
.dg-price__cta { margin: 22px 0 0; }

@media (max-width: 900px) {
  .dg-price__grid { grid-template-columns: 1fr; gap: 28px; }
  .dg-price__title { font-size: 34px; }
}

/* ============ 料金タブ / 料金パネル（price.html） ============
   main.js:1567-1580 が .price-tab / .price-tab-panel / is-active /
   data-tab / data-panel を参照している。しかも1580行の querySelector に
   null チェックが無いので、1つでも改名するとページが例外で落ちる。
   よってここは新クラスに置き換えず、旧クラス名のまま面だけ入れ替える。
   .price-tab-panel の display:none / .is-active の display:block は
   タブ機構そのものなので、ここでは display を一切宣言しない。 */

.price-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
  border: none;
  background: none;
  /* style.css:5890 の justify-content:center を戻す。見出しが左揃えなので
     タブだけ中央に浮くとそろわない。 */
  justify-content: flex-start;
}

.price-tab {
  /* 3枚のどこにも * { box-sizing: border-box } が無い。style.css:6140 は
     600px 以下で width:100% を当てるので、content-box のままだと
     padding 40px + 墨線 5px ぶん行からはみ出して横スクロールが出る。 */
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 700 13px var(--dg-font-jp);
  box-shadow: none;
  cursor: pointer;
  transition: background var(--dg-dur-fast) ease-out, transform var(--dg-dur-fast) ease-out;
  /* style.css:5899 の flex:1 1 0 を戻す。放っておくと3つのピルが
     行幅いっぱいに伸びて旧テーマのセグメントコントロールのままになる。 */
  flex: 0 0 auto;
  /* 不透明な面の上では効かないが、合成レイヤと包含ブロックだけ作るので落とす。 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.price-tab:hover { background: var(--dg-cyan-50); transform: translate(2px, 2px); box-shadow: none; }

/* cyan の面には必ず color を宣言する（仕様A §11）。
   animation は style.css:5924 の uiGradientShift を止めるため。
   単色の面では見た目に出ないが、無限アニメーションが回り続ける。 */
.price-tab.is-active {
  background: var(--dg-cyan);
  color: var(--dg-ink);
  border-color: var(--dg-ink);
  font-weight: 900;
  transform: none;
  box-shadow: none;
  animation: none;
}

.price-tab:focus-visible { outline: 2px solid var(--dg-ink); outline-offset: 2px; }

.price-tab-icon { font-size: 15px; line-height: 1; }

/* .dg-price__tag はおまとめプランの「人気」の札。面が同じなので相乗り。 */
.price-tab-badge,
.dg-price__tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--dg-mint);
  color: var(--dg-ink);
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 900 10px var(--dg-font-jp);
  letter-spacing: normal;
  vertical-align: middle;
}

.dg-price__tag { margin-left: 8px; }

/* style.css:5944 の .price-tab:not(.is-active) .price-tab-badge は (0,3,0)。
   グラデに白文字で約1.2:1。上の (0,1,0) では勝てないので同詳細度で戻す。 */
.price-tab:not(.is-active) .price-tab-badge {
  background: var(--dg-mint);
  color: var(--dg-ink);
  animation: none;
}

/* --- 料金パネル --- */
.price-panel-card {
  /* 同上。style.css:5975 の max-width:760px を外寸で効かせる。 */
  box-sizing: border-box;
  /* style.css:5976 の margin:0 auto を戻す。見出し・リード・タブは左揃えなので
     カードだけ中央に寄ると 1440px で左端が 100px ほどずれる。 */
  margin: 0;
  padding: 26px;
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-lg);
  box-shadow: var(--dg-shadow-cyan);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* style.css:5983 の padding-bottom:24px と 1px rgba(15,80,86,.12)（白地 1.14:1）
   の区切り線が残る。罫線は .price-panel-list li と同じ ink-25 にそろえる。 */
.price-panel-header {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dg-ink-25);
}

.price-panel-desc {
  margin: 0 0 8px;
  font: 500 13px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* style.css:5997 は #8a9a9f（2.88:1）。棚卸しに受けが無かったので新設。 */
.price-panel-from {
  margin: 0;
  font: 900 11px var(--dg-font-en);
  letter-spacing: .08em;
  color: var(--dg-ink-70);
}

/* style.css:6006 は background-clip:text で 1.21:1。
   -webkit-text-fill-color は color より優先されるので必ず明示する。 */
.price-panel-hero {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--dg-ink);
  font: 900 28px/1.3 var(--dg-font-jp);
  margin: 0 0 6px;
  animation: none;
}

/* style.css:6020 の 22px は 28px の見出しに対して大きすぎる。 */
.price-panel-hero small { font: 700 14px var(--dg-font-jp); }

/* style.css:6024 は cyan 8% の面に #00ced1 の文字（1.81:1）と
   1px rgba(0,206,209,.28) の枠。面ごと墨線のピルに置き換える。 */
.price-panel-delivery {
  margin: 0;
  padding: 8px 14px;
  background: var(--dg-cyan-50);
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 600 12px var(--dg-font-en);
  color: var(--dg-ink-70);
}

.price-panel-list { list-style: none; margin: 0; padding: 0; }

.price-panel-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dg-ink-25);
  border-radius: 0;
}

.price-panel-list li:last-child { border-bottom: none; }
.price-panel-list li:hover { background: none; }

.ppl-name { font: 500 13px/1.7 var(--dg-font-jp); color: var(--dg-ink); }
.ppl-price { font: 900 16px var(--dg-font-en); color: var(--dg-ink); white-space: nowrap; }

/* style.css:6074/6079 は (0,2,0)。ピンク #ff7eb3 は白地 2.33:1。 */
.ppl-option .ppl-name { font: 500 12px/1.7 var(--dg-font-jp); color: var(--dg-ink-70); }
.ppl-option .ppl-price { font: 900 14px var(--dg-font-en); color: var(--dg-ink); }

/* style.css:6084 は padding を !important で持っている。
   ここだけ同じ武器で戻さないと 18px 8px 6px が残り、他の li と左端がずれる。 */
.ppl-group-header {
  display: block;
  margin: 20px 0 6px;
  padding: 0 !important;
  border-bottom: none;
  font: 900 12px var(--dg-font-jp);
  color: var(--dg-ink-70);
  letter-spacing: .08em;
}

/* style.css:6091 の .ppl-group-header span は (0,1,1) のグラデ抜き文字。
   親に color を書いても -webkit-text-fill-color:transparent に負けて
   「ちびキャライラスト」がグラデのまま（約1.2:1）になる。 */
.ppl-group-header span {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  animation: none;
}

.price-panel-note,
.price-panel-notes { margin: 20px 0 0; font: 500 12px/1.9 var(--dg-font-jp); color: var(--dg-ink-70); }

/* .price-panel-notes は注意書きを3件束ねる箱（画像制作タブ）。
   中の1件ごとに 20px 付くと箇条書きが3つの段落に見えるので詰める。 */
.price-panel-notes .price-panel-note { margin: 4px 0 0; }

/* style.css:6117 の ※ は #9ab0b5（白地 2.42:1）。 */
.price-panel-note::before { color: var(--dg-ink-70); }

/* ============ FLOW ============ */
.dg-flow { padding: 44px 0 52px; background: var(--dg-base); }

.dg-flow__title {
  margin: 0 0 8px;
  font: 900 40px/1 var(--dg-font-en);
  letter-spacing: -.04em;
  color: var(--dg-ink);
}

.dg-flow__lead {
  margin: 0 0 26px;
  font: 500 13.5px/1.95 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* 3ブロックを隙間なく連結する。境界の線が二重にならないよう
   2つ目以降の border-left を消す。
   box-sizing は保険。`flex: 1` は `flex: 1 1 0%` に展開され、基準サイズが 0 だと
   border-box でも content-box でも結果は同じ（実測で確認済み）。
   flex-basis を 0 以外にしたときだけ効く。
   なお3ブロックの外寸は 361.33 / 359.34 / 359.33 と揃わないが、これは
   1つ目だけ左の墨線を持つため。中身の幅は 309.33 / 309.34 / 309.33 で揃っており、
   差は帯の左端に出る線1本ぶん。外寸を揃えると逆に文章の幅がずれる。 */
.dg-flow__row { display: flex; align-items: stretch; gap: 0; }

.dg-flow__step {
  box-sizing: border-box;
  flex: 1;
  padding: 24px;
  border: var(--dg-stroke) solid var(--dg-ink);
}

/* 角丸は --dg-r-* の目盛り（14/18/22/26/100）に乗せる。
   直書きの 20px は目盛り外だった。帯は面と墨線を持つカードなので
   --dg-r-lg（22px・トークンの注記が「カード」）を当てる。
   .dg-form / .dg-campaign__hero / .dg-booth__panel と同じ段。 */
.dg-flow__step--1 {
  background: var(--dg-cyan-50);
  border-radius: var(--dg-r-lg) 0 0 var(--dg-r-lg);
}

.dg-flow__step--2 {
  background: var(--dg-mint-50);
  border-left: none;
}

.dg-flow__step--3 {
  background: var(--dg-ink);
  border-left: none;
  border-radius: 0 var(--dg-r-lg) var(--dg-r-lg) 0;
}

.dg-flow__label {
  margin: 0;
  font: 900 11.5px var(--dg-font-en);
  letter-spacing: .14em;
  color: var(--dg-ink);
}

/* 3つ目だけ ink 塗りなので文字色を反転する。ラベルは mint。 */
.dg-flow__step--3 .dg-flow__label { color: var(--dg-mint); }
.dg-flow__step--3 .dg-flow__name,
.dg-flow__step--3 .dg-flow__desc { color: #fff; }

/* price.html の Flow は5段。index は3段。両方成立させる。
   この一群は必ず下の @media (max-width:900px) より前に置く。あの中の
   .dg-flow__step { border-left: ... } と同詳細度 (0,1,0) なので、
   後ろに置くと縦積みのときに4段目・5段目だけ左の墨線が消える。 */
.dg-flow__step--4 { background: var(--dg-mint-50); border-left: none; }
.dg-flow__step--5 { background: var(--dg-ink); border-left: none; border-radius: 0 var(--dg-r-lg) var(--dg-r-lg) 0; }
.dg-flow__step--5 .dg-flow__label { color: var(--dg-mint); }
.dg-flow__step--5 .dg-flow__name,
.dg-flow__step--5 .dg-flow__desc { color: #fff; }

/* 5段のときは3つ目を末尾扱いしない。(0,2,0) なので .dg-flow__step--3 に勝つ。
   面は cyan / mint / cyan / mint / ink の交互。index の3段（cyan / mint / ink）と同じ考え方。 */
.dg-flow__row--5 .dg-flow__step--3 { border-radius: 0; background: var(--dg-cyan-50); }

/* この3本はどれも空振りではない。上の 933-935 行は「3つ目＝ink 塗りの終端」を
   前提にした (0,2,0) で、5段の行でもそのまま当たる。外すと3つ目の
   ラベルが mint、見出しと本文が白のまま cyan-50 の上に乗る（本文で約1.16:1）。
   本文だけ ink ではなく ink-70 に戻す。素の .dg-flow__desc と同じ値で、
   これを ink にすると3つ目の本文だけ隣の4ブロックより濃くなる。 */
.dg-flow__row--5 .dg-flow__step--3 .dg-flow__label,
.dg-flow__row--5 .dg-flow__step--3 .dg-flow__name { color: var(--dg-ink); }
.dg-flow__row--5 .dg-flow__step--3 .dg-flow__desc { color: var(--dg-ink-70); }

.dg-flow__name {
  margin: 10px 0 8px;
  font: 700 19px/1.4 var(--dg-font-jp);
  color: var(--dg-ink);
}

.dg-flow__desc {
  margin: 0;
  font: 500 13px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

.dg-flow__cta { text-align: center; margin: 34px 0 0; }

@media (max-width: 900px) {
  .dg-flow__row { flex-direction: column; }
  .dg-flow__step { border-left: var(--dg-stroke) solid var(--dg-ink); }
  .dg-flow__step--1 { border-radius: var(--dg-r-lg) var(--dg-r-lg) 0 0; }
  .dg-flow__step--2 { border-top: none; border-radius: 0; }
  .dg-flow__step--3 { border-top: none; border-radius: 0 0 var(--dg-r-lg) var(--dg-r-lg); }
  .dg-flow__title { font-size: 32px; }
}

/* 縦積みのときの4段目・5段目。上の @media より後ろに置く必要がある
   （border-radius / border-top を上書きするため）。 */
@media (max-width: 900px) {
  .dg-flow__step--4 { border-top: none; border-radius: 0; }
  .dg-flow__step--5 { border-top: none; border-radius: 0 0 var(--dg-r-lg) var(--dg-r-lg); }
  .dg-flow__row--5 .dg-flow__step--3 { border-radius: 0; }
}

/* ============ FAQ ============ */
/* このセクションだけ旧クラス（.faq-*）を残す。main.js が参照しているため。
   よって style.css の .faq-* ルールは全部生きている。
   Step 0 に挙げた漏れを、宣言漏れなく打ち消す。 */
.dg-faq { padding: 44px 0 52px; background: var(--dg-base); }

.dg-faq__title {
  margin: 0 0 8px;
  font: 900 40px/1 var(--dg-font-en);
  letter-spacing: -.04em;
  color: var(--dg-ink);
}

.dg-faq__lead {
  margin: 0 0 26px;
  font: 500 13.5px/1.95 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* style.css の .faq-container は margin: 24px auto 0 と padding: 0 6px を持ち、
   メディアクエリ内では max-width も持つ（1850行 880px、1803行 100%）。
   どれも (0,1,0) で .dg-faq__list と同詳細度。後から読まれる pages.css を
   勝たせるため、明示的に宣言して打ち消す。 */
.dg-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  max-width: none;
}

/* .faq-item + .faq-item { margin-top: 18px }（767px 以下は 16px）が
   gap 12px に加算されて間隔が二重になる。同詳細度 (0,2,0) で受ける。 */
.dg-faq__item + .dg-faq__item { margin-top: 0; }

/* style.css の .faq-item はぼかし影、:hover は translateY(-2px) と
   さらに強いぼかし影を持つ。ラグレキはどちらも使わない。
   transform を宣言しないと浮き上がりだけ残るので必ず書く。 */
.dg-faq__item,
.dg-faq__item:hover {
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-md);
  background: var(--dg-base);
  box-shadow: none;
  transform: none;
  overflow: hidden;
}

/* 開いている項目は面を cyan-50 にする。main.js は .active と aria-expanded の
   両方を更新するので両方で受ける。上の :hover と同詳細度なので、
   開いた項目にホバーしても cyan-50 が残るよう必ずこの順で書く。 */
.dg-faq__item.active,
.dg-faq__item:has(.faq-question[aria-expanded="true"]) { background: var(--dg-cyan-50); }

/* style.css の .faq-item.active .faq-question は (0,3,0) で
   .dg-faq__item .faq-question (0,2,0) に勝つ。同じ (0,3,0) で受ける。 */
.dg-faq__item.active .faq-question,
.dg-faq__item .faq-question {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 22px 24px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  font: 700 15px/1.5 var(--dg-font-jp);
  color: var(--dg-ink);
}

/* .faq-question:hover は (0,2,0) で背景 #f2fafb とぼかし影を持つ。 */
.dg-faq__item .faq-question:hover { background: none; box-shadow: none; }

/* style.css の :focus-visible は旧ティール。輪郭の役割は保ったまま色だけ墨に寄せる。 */
.dg-faq__item .faq-question:focus-visible { outline-color: var(--dg-ink); }

/* 既存の .faq-number をそのまま Q番号として使う。
   旧デザインはピル型バッジなので、枠・背景・角丸・最小幅・中央寄せを全部落とす。
   min-width はメディアクエリ内にも 36px / 38px があり、いずれも (0,1,0)。 */
.dg-faq__item .faq-number {
  flex-shrink: 0;
  font: 900 13px var(--dg-font-en);
  color: var(--dg-ink);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  min-width: 0;
  text-align: left;
}

/* 767px 以下の .faq-text { font-size: 15px } は子への直接指定なので、
   ボタン側の font-size を継承させるには明示的に inherit させる。 */
.dg-faq__item .faq-text { flex: 1; font-size: inherit; }

/* 767px 以下の .faq-right { align-self: start } がボタンの
   align-items: center を打ち消し、記号だけ上に寄る。 */
.dg-faq__item .faq-right { margin-left: auto; display: flex; align-items: center; align-self: center; }

/* 実物の FAQ にカテゴリタグは無い（仕様A §3 により実物を優先）。
   HTML からは消さず CSS で隠す。 */
.dg-faq__item .faq-tag { display: none; }

/* ▶ を消して ＋ / − に差し替える。 */
.dg-faq__item .faq-icon {
  font-size: 0;
  transform: none;
  background: none;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}

/* style.css は `.faq-tag.tag-delivery + .faq-icon` など6色を (0,3,0) で配る。
   display:none にした要素も隣接兄弟セレクタにはマッチするため、
   タグを隠してもアイコンの色は消えない。同詳細度で受ける。 */
.dg-faq__item .faq-tag + .faq-icon { background: none; }

/* .faq-item.active .faq-icon { transform: translateY(-1px) } は (0,3,0)。 */
.dg-faq__item.active .faq-icon { transform: none; }

/* 親を font-size: 0 にしたので、::after 側で font-size を必ず指定する。
   指定しないと 0 を継承して記号が見えない。 */
.dg-faq__item .faq-icon::after {
  content: "＋";
  font: 900 16px var(--dg-font-en);
  color: var(--dg-ink);
}

.dg-faq__item .faq-question[aria-expanded="true"] .faq-icon::after { content: "−"; }

/* max-height は main.js がインラインで書く。インラインは CSS では上書きできないので
   ここでは一切触らない。開閉アニメーションは今のまま動く。

   縦パディングは「開いているときだけ」当てる。閉じているときも 22px を当てると、
   max-height: 0 が抑えるのは内容ボックスだけでパディングは残るため、
   閉じた項目の下に 22px の死んだ余白ができる（実測: 項目 94px / ボタン 68px）。
   3枚のスタイルシートに * { box-sizing: border-box } は無いので .faq-answer は
   content-box。max-height は内容ボックスにしか効かず、main.js が渡す scrollHeight は
   パディング込みなので、開いたときの上限は常にパディングぶん余る。
   よって縦パディングを開閉で変えても内容が切れることはない（実測 overflow 0px）。 */
.dg-faq__item .faq-answer {
  padding: 0 24px;
  font: 500 13px/2 var(--dg-font-jp);
  color: var(--dg-ink-70);
  background: none;
  border: none;
}

/* .faq-item.active .faq-answer { padding: 10px 16px 16px } は (0,3,0)。 */
.dg-faq__item.active .faq-answer { padding: 0 24px 22px; }

/* 回答の中身。**直接指定は継承に勝つ**ため、.faq-answer 側にいくら強い
   セレクタで色や行間を書いても、p / strong / .faq-list / .faq-note には届かない。
   子要素ごとに個別に打ち消す。 */
.dg-faq__item .faq-answer p { margin: 8px 0; line-height: 2; }

/* 旧デザインは黄色のマーカー。ラグレキの面色に差し替える。
   角丸は style.css:1891 から引き継いだ 4px で目盛り外だったので、
   目盛りの最小値 --dg-r-sm（14px）に乗せる。インライン要素の行ボックスは
   14px 角丸を左右で消化できず、ブラウザが辺長に合わせて縮めるため
   実際には端が半円のマーカー形になる（高さの半分＝約8px）。
   pill と違い縦を潰さないので、これがこの目盛りでの正しい当て先。 */
.dg-faq__item .faq-answer strong {
  background: var(--dg-mint-50);
  color: var(--dg-ink);
  padding: 0 4px;
  border-radius: var(--dg-r-sm);
}

.dg-faq__item .faq-list { color: var(--dg-ink-70); }

/* style.css の .btn-link は cyan→pink→mint のグラデーションに白文字。
   mint 端で 1.16:1、cyan→pink の混色部でも 4.24:1 と、文字色だけでは
   AA に届かない。ラグレキの面に置き換える。
   style.css:1915 は background ショートハンドなので、こちらも
   ショートハンドで書けば background-image は none に戻る。 */
.dg-faq__item .btn-link {
  color: var(--dg-ink);
  /* style.css:251-264 のグループセレクタが .btn-link に --display-font
     （Anzu Moji）を当てている。上の色・面・墨線の上書きでは font-family は
     動かないので、FAQ 回答内の3本だけ Anzu Moji のまま残っていた。 */
  font-family: var(--dg-font-jp);
  background: var(--dg-cyan-50);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  box-shadow: none;
}

/* style.css の .faq-answer p { padding: 0 } は (0,1,1) で .faq-note (0,1,0) に
   勝つため、ノートの内側余白が消える。墨線を足した分、文字が線に接する。 */
.dg-faq__item .faq-note {
  color: var(--dg-ink);
  background: var(--dg-cyan-50);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
  padding: 10px 12px;
}

/* 旧: index.html:210 <div style="text-align:center; margin-top: 28px;"> と
   faq.html:131 <div style="text-align:center; margin-top: 40px;">。
   どちらも #faq セクション末尾の導線リンクを包む同じ器なので、
   .dg-works__more / .dg-price__more / .dg-flow__cta と同じ命名で共有する。
   28 と 40 はどちらも dobagaki の間隔スケール（4/8/12/16/20/26/34/44/52）に
   無い値。同じ役割の上記3クラスが揃って使っている 34px に寄せた。 */
.dg-faq__more { text-align: center; margin-top: 34px; }

@media (max-width: 767px) {
  .dg-faq__title { font-size: 30px; }
  /* 開いた項目は (0,3,0) の font: ショートハンドで 15px が入るため、
     ここも (0,3,0) で受けないと開閉で文字サイズが変わる。 */
  .dg-faq__item.active .faq-question,
  .dg-faq__item .faq-question { padding: 18px 16px; font-size: 14px; }
  .dg-faq__item .faq-answer { padding: 0 16px; }
  .dg-faq__item.active .faq-answer { padding: 0 16px 18px; }
}

/* ============ ABOUT ============ */
.dg-about { padding: 44px 0 52px; background: var(--dg-base); }

.dg-about__inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 46px;
  align-items: center;
}

.dg-about__figure { position: relative; }

/* .dg-mask は overflow:hidden と墨線しか持たない。寸法は自分で書く。 */
.dg-about__photo {
  width: 320px;
  height: 320px;
  box-shadow: 7px 7px 0 var(--dg-mint);
}

/* cyan の pill ネームタグ。写真の右上に少し傾けて乗せる。 */
.dg-about__nametag {
  position: absolute;
  top: -14px;
  right: -18px;
  margin: 0;
  padding: 9px 18px;
  background: var(--dg-cyan);
  /* cyan の面には必ず color を宣言する（仕様A §11）。 */
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 900 12.5px var(--dg-font-jp);
  transform: rotate(-4deg);
}

/* h2 の font-size / font-weight / margin-bottom は .dg-wrap h2 のリセットに
   含まれていない。margin と font: を必ず両方宣言する。 */
.dg-about__title {
  margin: 0 0 14px;
  font: 900 40px/1 var(--dg-font-en);
  letter-spacing: -.04em;
  color: var(--dg-ink);
}

.dg-about__text {
  margin: 0 0 26px;
  font: 500 13.5px/1.95 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* ul / li のリセットは3枚のどこにも無い。箇条書きの点と40pxの
   左インデントが素で出るので自分で消す。 */
.dg-about__sns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
}

/* .sns-link は使わない。style.css:421 の半透明白の円が白地に溶けるため。
   transition は style.css:220 の `all .3s` を打ち消す目的でも宣言している。 */
.dg-about__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: 50%;
  transition: transform var(--dg-dur-fast) ease-out,
              background var(--dg-dur-fast) ease-out;
}

.dg-about__sns-link:hover { background: var(--dg-cyan-50); transform: translate(2px, 2px); }

.dg-about__sns-link img { width: 20px; height: 20px; object-fit: contain; display: block; }

/* style.css:5600 の :focus-visible は旧ティール。cyan の面の上で 1.23:1 になる。 */
.dg-about__sns-link:focus-visible { outline: 2px solid var(--dg-ink); outline-offset: 2px; }

@media (max-width: 900px) {
  .dg-about__inner { grid-template-columns: 1fr; gap: 34px; justify-items: start; }
  .dg-about__photo { width: 260px; height: 260px; }
  .dg-about__title { font-size: 32px; }
}

/* ============ NEWS ============ */
/* style.css:6407 の .news-strip-section は margin:56px 0 0 を持つ。 */
.dg-news { margin: 0; padding: 44px 0 52px; background: var(--dg-base); }

/* main.js:294/304 は「お知らせ0件なら section.hidden = true」とする。
   display を宣言すると 0件のときも空のセクションが出るので受け皿を書く。 */
.dg-news[hidden] { display: none; }

.dg-news__title {
  margin: 0 0 22px;
  font: 900 40px/1 var(--dg-font-en);
  letter-spacing: -.04em;
  color: var(--dg-ink);
}

.dg-news__nav { position: relative; }

/* --- 横スクロールの修復 ---
   style.css:6424 は overflow-x を宣言しておらず（既定 visible）、
   さらに flex-wrap: wrap。そのため main.js:404 の scrollBy が無反応で、
   「横スクロール」という機能が存在しない状態だった。 */
.dg-news__scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  /* style.css:6427 は .news-strip-scroll に justify-content: center を無条件で
     宣言している（計画書に無かった漏れ）。溢れているスクロールコンテナで center
     のままだと左右に同量はみ出し、scrollLeft は負にできないので左側が永久に
     到達不能になる。1440px / 8枚で先頭2枚が到達不能になることを実測した。 */
  justify-content: flex-start;
  gap: 20px;
  padding: 4px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

/* 5件以下のときは main.js が .is-centered を付ける。ただし5件以下でも幅が
   足りなければ溢れる（900px / 4枚で実測）。safe を付けると溢れた瞬間だけ
   start に戻るので、上と同じ到達不能を起こさない。 */
.dg-news__scroll.is-centered { justify-content: safe center; }

/* --- 前後ボタンの修復 ---
   style.css:6420 は無条件で display:none。main.js:393 が .is-visible を
   付けても受け皿の CSS がどこにも無く、矢印は永久に見えなかった。
   左右の配置指定も存在しないので新規に書く。 */
.dg-news__arrow.is-visible { display: flex; }

.dg-news__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: 50%;
  box-shadow: var(--dg-shadow-ink-sm);
  font: 900 18px/1 var(--dg-font-en);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background var(--dg-dur-fast) ease-out;
}

.dg-news__arrow:hover { background: var(--dg-cyan-50); }
.dg-news__arrow:disabled { opacity: .35; cursor: not-allowed; }
.dg-news__arrow:focus-visible { outline: 2px solid var(--dg-ink); outline-offset: 2px; }

.news-nav-prev.dg-news__arrow { left: -12px; }
.news-nav-next.dg-news__arrow { right: -12px; }

/* --- カード ---
   カードは main.js が生成するので旧クラス名がそのまま残る。
   (0,2,0) で受けて style.css:6435 以降を打ち消す。 */
.dg-news__scroll .news-card {
  flex: 0 0 240px;
  max-width: 240px;
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-md);
  box-shadow: var(--dg-shadow-ink-sm);
}

/* style.css:6454 の :hover は 4px 浮いてぼかし影が濃くなる。
   ラグレキは沈んで影が縮む。opacity と transform の出現アニメーションは
   main.js:418 の .is-visible が使うので、:hover 側だけ上書きする。 */
.dg-news__scroll .news-card.is-visible:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--dg-ink);
}

/* style.css:6464 はホバーで枠を薄 cyan に戻す。墨線を保つ。 */
.dg-news__scroll .news-card[data-link].is-visible:hover { border-color: var(--dg-ink); }

/* style.css:6483 の画像 scale(1.05) がカード側の移動と二重にかかる。 */
.dg-news__scroll .news-card[data-link]:hover .news-card-img { transform: none; }

.dg-news__scroll .news-card-img-wrap { background: var(--dg-cyan-50); }

/* style.css:6521 の rgba(15,80,86,.5) は 11px で 2.57:1。
   ink-45 でも 2.9:1 なので ink-70（5.4:1）まで上げる。 */
.dg-news__scroll .news-card-date { color: var(--dg-ink-70); }

/* style.css:6528 の accent-color は白地に 1.94:1。 */
.dg-news__scroll .news-card-arrow { color: var(--dg-ink); }

/* style.css:6487 のプレースホルダは 1.67:1。地は白ではなく
   .news-card-img-wrap の cyan-50 なので、ink-45 でも 2.75:1 にしかならない。 */
.dg-news__scroll .news-card-img-placeholder { color: var(--dg-ink-70); }

.dg-news__scroll .news-card-msg { color: var(--dg-ink); }

@media (max-width: 900px) {
  .dg-news__title { font-size: 32px; }
  .news-nav-prev.dg-news__arrow { left: 0; }
  .news-nav-next.dg-news__arrow { right: 0; }
}

/* 600px 以下では 40px の円が 204px のカードに 36px 被り、
   top:50% と合わさって本文の1行目に乗る。タッチではスワイプで
   送れるので矢印は出さない。
   .dg-news__arrow.is-visible と (0,2,0) で同点なので、ソース順で勝つよう
   必ずその後ろに置くこと。 */
@media (max-width: 600px) {
  .dg-news__arrow,
  .dg-news__arrow.is-visible { display: none; }
}

/* style.css:4663 の flex: 0 0 160px は、2000行後の無条件 6435 に
   カスケード順で負けて死んでいたので (0,2,0) で書き直す。 */
@media (max-width: 480px) {
  .dg-news__scroll .news-card { flex: 0 0 200px; max-width: 200px; }
}

/* ============ 追従CTA の下余白 ============
   追従CTA は position: fixed で画面下に居座る。body にも main にも
   padding-bottom が無いため、フッターと送信ボタンが CTA の下に隠れる。
   CTA が出るのはモバイルだけなので、余白もモバイルだけに足す。 */
@media (max-width: 767px) {
  /* 追従CTA を持つページだけ逃げ場を作る。#sticky-cta は index にしか無い。 */
  body:has(.dg-sticky-cta) { padding-bottom: 84px; }
}

/* ============ CONTACT / FORM ============ */
.dg-contact { padding: 44px 0 52px; background: var(--dg-base); }

/* h2 の font-size / font-weight / margin-bottom は .dg-wrap h2 のリセットに
   含まれていない。margin と font: を必ず両方宣言する。 */
.dg-contact__title {
  margin: 0 0 8px;
  font: 900 40px/1 var(--dg-font-en);
  letter-spacing: -.04em;
  color: var(--dg-ink);
}

/* REQUEST だけ狭幅の縮小指定が無く、他の見出しが 30〜34px まで
   落ちる横で 40px のまま残っていた。ABOUT / NEWS と同じ 32px にする。
   すぐ上の追従CTA用 @media (max-width: 767px) には入れられない。
   あれは .dg-contact__title の定義より前にあり、同詳細度 (0,1,0) では
   後勝ちで上の font: 900 40px に負けて死ぬ。他セクションと同じく
   ベース定義の後ろに置く。 */
@media (max-width: 767px) {
  .dg-contact__title { font-size: 32px; }
}

.dg-contact__lead {
  margin: 0 0 26px;
  font: 500 13.5px/1.95 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* style.css:1365 の .contact-form は外したので当たらない。
   .dg-form は素の <form> に対する新規定義。 */
/* 角丸は目盛り（14/18/22/26/100）に乗せる。直書きの 24px は目盛り外だった。
   --dg-r-xl（26px）はモーダル2枚（.modal-content / .coupon-modal-content）の
   専用にしてあるので、ページ内の面である依頼フォームは --dg-r-lg（22px）。
   同じ 26〜30px パディング＋オフセット影の .dg-campaign__hero /
   .dg-booth__panel / .price-panel-card もすべて --dg-r-lg。 */
.dg-form {
  max-width: 720px;
  margin: 0;
  padding: 30px;
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-lg);
  box-shadow: 8px 8px 0 var(--dg-mint);
}

/* --- プログレスバー --- */
/* style.css:5477 は justify-content:center と gap:0 を持つ。 */
.dg-form .form-progress {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 30px;
  padding: 0;
}

/* style.css:5485 の opacity:0.4 が未到達ステップ全体を40%に沈める。 */
.dg-form .form-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  padding: 8px 16px;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink-25);
  border-radius: var(--dg-r-pill);
}

/* 現在 = cyan 塗り。cyan の面には必ず color を宣言する（仕様A §11）。
   style.css:5510 は白文字で 1.95:1 だった。 */
.dg-form .form-progress-step.is-active {
  background: var(--dg-cyan);
  color: var(--dg-ink);
  border-color: var(--dg-ink);
}

/* 完了 = ink 塗り。ink の上は白文字でよい（約11:1）。 */
.dg-form .form-progress-step.is-done {
  background: var(--dg-ink);
  color: #fff;
  border-color: var(--dg-ink);
}

/* 丸数字を廃してピル内の素の数字にする。
   style.css:5496 は 30px の円に背景色を持つ。 */
.dg-form .progress-num {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: inherit;
  font: 900 13px var(--dg-font-en);
}

.dg-form .form-progress-step.is-active .progress-num,
.dg-form .form-progress-step.is-done .progress-num { background: none; color: inherit; }

.dg-form .progress-label { font: 700 12.5px var(--dg-font-jp); color: inherit; }

/* style.css:5584 は 600px 以下でラベルを消す。ピル3つのデザインでは
   数字だけの小さなピルになって意味が読めないので出したままにする。 */
@media (max-width: 600px) {
  .dg-form .progress-label { display: inline; font-size: 11.5px; }
  .dg-form .form-progress-step { padding: 7px 12px; }
}

/* style.css:5524 の cyan の連結線は使わない。ピルの間隔で表現する。 */
.dg-form .form-progress-line { display: none; }

/* --- ステップ --- */
/* style.css:5538/5542 の .form-step / .is-active は main.js:871 が
   切り替えの拠り所にしている。display を上書きしてはいけない。 */

/* style.css:5551。Step1 は左に空の <span> を置いて右寄せを作っている。 */
.dg-form .form-step-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

/* --- Task 1 の積み残し ---
   ラベルを出したままにしたため、375px でピル3つが 298px になり
   カードの内容幅 279px からはみ出す。320px では3つ目が切れる。
   カード側の overflow:hidden が吸収するのでページの横スクロール検査には
   出ない。折り返しを許可して解決する。 */
.dg-form .form-progress { flex-wrap: wrap; row-gap: 8px; }

/* style.css:5084 の .contact-form .form-row は 1fr 1fr のグリッドだった。
   クラスを外したので display:block に戻り、メールアドレスと名前が縦積みに
   なっている。元は gap:16px だが、行間は .form-group の margin-bottom が
   持つので列方向だけにする。 */
.dg-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

@media (max-width: 600px) {
  .dg-form .form-row { grid-template-columns: 1fr; }
}

/* --- ラベルと注釈 --- */
/* style.css:1380 の .form-group label は (0,1,1) で色と字送りを持つ。 */
.dg-form .form-group { margin-bottom: 22px; }

.dg-form .form-group > label {
  display: block;
  margin: 0 0 8px;
  font: 800 13.5px/1.6 var(--dg-font-jp);
  color: var(--dg-ink);
}

/* .contact-form を外したので .required のピンク丸は消え、HTML の `*` が
   素で出る。装飾だけ足す。 */
.dg-form .required { color: var(--dg-danger-ink); font-weight: 900; margin-left: 4px; }

/* style.css:1412 の .optional は 4.38:1 だった。書き直してついでに直す。 */
.dg-form .optional {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font: 700 11px var(--dg-font-jp);
  color: var(--dg-ink-70);
  background: var(--dg-surface);
  border: 2px solid var(--dg-ink-25);
  border-radius: var(--dg-r-pill);
}

/* style.css:1425 の .field-hint は 3.65:1 だった。 */
.dg-form .field-hint {
  margin: -2px 0 10px;
  font: 500 12px/1.7 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* style.css:5146 の .checkbox-label は .form-group label(0,1,1) に負けて
   display:block になっており、チェックボックスとテキストが縦に並んでいる。
   (0,2,0) で受け直す。 */
.dg-form .form-group .checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font: 600 13px var(--dg-font-jp);
  color: var(--dg-ink);
  cursor: pointer;
}

.dg-form .checkbox-label input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--dg-cyan);
}

/* --- 入力欄 --- */
/* .contact-form を外したので style.css の入力欄ルール4本は当たらない。
   .dg-field(0,1,0) がそのまま効く。ここでは足りない分だけ足す。
   打ち消しではなく素の状態からの定義になるので、宣言漏れが即座に
   ネイティブの見た目として出る（Task 1 で幅145pxになった）。 */
.dg-form .dg-field { width: 100%; box-sizing: border-box; }

/* style.css:4725 の .coupon-apply input[type="text"] は (0,2,1) で
   padding-left:15px を持ち、.dg-field の padding に勝つ。 */
.dg-form .coupon-apply input[type="text"] { padding-left: 16px; }

/* style.css:5171 の invalid 表示も .contact-form 配下だったので消えている。
   ただし元の :placeholder-shown 版には穴がある。date は placeholder を
   持てないため常に false になり、空の必須日付が読み込み直後から赤枠になる。
   :user-invalid は「利用者が触った後」だけに当たるので型を選ばない。 */
.dg-form .dg-field:user-invalid { border-color: var(--dg-danger); }

/* .dg-field は resize を宣言していない。both のままだとカードより広く
   引き伸ばせる。.contact-form-wrap の overflow:hidden が切り取るので
   横スクロール検査には出ない。 */
.dg-form textarea.dg-field { resize: vertical; }

/* style.css:5600 の :focus-visible は旧ティール。cyan の面で 1.23:1。 */
.dg-form :focus-visible { outline: 2px solid var(--dg-ink); outline-offset: 2px; }

/* style.css:5162 の .char-counter は #8a9a9f で 2.92:1。
   なお #message-count の色は main.js:1120 がインラインで書くため
   ここでは直せない。Task 4 で JS を直す。 */
.dg-form .char-counter { font: 600 11.5px var(--dg-font-en); color: var(--dg-ink-70); }

/* #contact-person-group は main.js:798 が hidden を出し入れする。
   .form-group に display を書くと UA の [hidden] に勝ってしまい、
   個人選択時も担当者名欄が出っぱなしになる。受け皿を必ず書く。 */
.dg-form .form-group[hidden] { display: none; }

/* --- ラジオ（依頼者区分・カテゴリ） --- */
/* style.css の .contact-form .radio-group 一式は外したので当たらない。
   ここが唯一の定義になる。
   ただし style.css:1380 の .form-group label(0,1,1) は .contact-form 配下
   ではないので生きており、ラジオのラベルにも当たる（display:block /
   margin-bottom / font-weight / font-size / line-height / color #0f4a5c）。
   下の (0,2,0) で全項目を上書きするので、宣言を1つでも落とすと旧teal文字や
   縦積みが出る。 */
.dg-form .radio-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}

/* 依頼者区分は2択なので列数を変える。 */
.dg-form .radio-group[aria-label="ご依頼者区分"] { grid-template-columns: repeat(2, 1fr); }

/* ラジオ本体を隠す。left:-9999px は使わない。
   その場に残して透明にすることで、フォーカスがラベルの位置に来る。
   position:absolute なのでグリッドの項目にならず、空セルもできない。 */
.dg-form .radio-group input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.dg-form .radio-group label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px 14px;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 700 13px var(--dg-font-jp);
  text-align: center;
  cursor: pointer;
  transition: background var(--dg-dur-fast) ease-out,
              transform var(--dg-dur-fast) ease-out;
}

.dg-form .radio-group label:hover { background: var(--dg-cyan-50); transform: translate(2px, 2px); }

/* 選択時は cyan 塗り。cyan の面には必ず color を宣言する（仕様A §11）。
   墨文字 on cyan で 7.08:1。style.css:1549 は白文字 on グラデーションで
   1.22〜1.95:1 だった。 */
.dg-form .radio-group input[type="radio"]:checked + label {
  background: var(--dg-cyan);
  color: var(--dg-ink);
  border-color: var(--dg-ink);
  font-weight: 900;
}

/* ラジオ本体が視覚的に見えないので、フォーカスをラベルに描く。
   現状はフォーカス位置がどこにも見えない。 */
.dg-form .radio-group input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--dg-ink);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .dg-form .radio-group { grid-template-columns: repeat(2, 1fr); }
}

/* --- 作品の雰囲気 --- */
/* 実物は常時表示のチップ列。トグルは使わない。
   style.css:1609 の .style-options は display:none、
   .open(0,2,0) は display:flex + flex-direction:column。
   (0,2,0) で受けて後読みで勝つ。 */
.dg-form .style-picker-toggle { display: none; }

.dg-form .style-options,
.dg-form .style-options.open {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

/* style.css:1626 は width:100% なので必ず auto に戻す。 */
.dg-form .style-option {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 700 13px var(--dg-font-jp);
  box-shadow: none;
  cursor: pointer;
  transition: background var(--dg-dur-fast) ease-out,
              transform var(--dg-dur-fast) ease-out;
}

.dg-form .style-option:hover {
  background: var(--dg-mint-50);
  border-color: var(--dg-ink);
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* 選択時は mint 塗り。墨文字 on mint で 7.93:1。
   style.css:1649 は白文字 on cyan→mint で
   1.95:1（左端）→ 1.56:1（中央）→ 1.22:1（右端）だった。 */
.dg-form .style-option[aria-selected="true"] {
  background: var(--dg-mint);
  color: var(--dg-ink);
  border-color: var(--dg-ink);
  font-weight: 900;
  box-shadow: none;
  transform: none;
}

.dg-form .style-option:focus-visible { outline: 2px solid var(--dg-ink); outline-offset: 2px; }

/* --- ボタン --- */
/* style.css:5559 は (0,2,0) で padding と border-radius を持つ。
   .dg-btn(0,1,0) では負けるので同詳細度以上で受ける。
   この規則が width:auto を戻しているので、消すと全部フル幅になる。 */
.dg-form .form-step-actions .submit-btn,
.dg-form .form-step-actions .form-next-btn {
  width: auto;
  margin-top: 0;
  padding: 16px 34px;
  font: 900 14px var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-cyan);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  box-shadow: 5px 5px 0 var(--dg-ink);
  text-align: center;
}

.dg-form .form-step-actions .submit-btn:hover,
.dg-form .form-step-actions .form-next-btn:hover {
  background: var(--dg-cyan);
  background-position: 0 0;
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--dg-ink);
}

.dg-form .form-step-actions .submit-btn:active,
.dg-form .form-step-actions .form-next-btn:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 var(--dg-ink);
}

/* style.css:5566 の .form-prev-btn は薄い枠と灰色文字。 */
.dg-form .form-prev-btn {
  padding: 16px 34px;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 900 14px var(--dg-font-jp);
  box-shadow: none;
}

/* style.css:5578 はホバーで teal に戻す。 */
.dg-form .form-prev-btn:hover {
  color: var(--dg-ink);
  border-color: var(--dg-ink);
  background: var(--dg-cyan-50);
  transform: translate(2px, 2px);
}

/* --- 予算クイックボタン --- */
/* style.css:5122 は (0,1,1)。.dg-chip では負ける。 */
.dg-form .budget-quick-btns { justify-content: flex-start; margin: 8px 0 0; }

.dg-form .budget-quick-btns button {
  padding: 9px 18px;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 700 12px var(--dg-font-jp);
}

.dg-form .budget-quick-btns button:hover {
  background: var(--dg-cyan-50);
  border-color: var(--dg-ink);
  transform: translate(2px, 2px);
}

/* style.css:5139 は白文字 on cyan で 1.95:1。 */
.dg-form .budget-quick-btns button.is-active {
  background: var(--dg-cyan);
  color: var(--dg-ink);
  border-color: var(--dg-ink);
  font-weight: 900;
}

/* --- クーポン欄 --- */
.dg-form .coupon-apply .coupon-row { display: flex; gap: 10px; align-items: stretch; }

/* style.css:4731 は (0,2,0)。 */
.dg-form .coupon-apply .secondary-btn {
  padding: 12px 20px;
  background: var(--dg-cyan);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 900 13px var(--dg-font-jp);
  box-shadow: none;
}

.dg-form .coupon-apply .secondary-btn:hover { background: var(--dg-cyan-50); transform: translate(2px, 2px); box-shadow: none; }

.dg-form .coupon-apply .secondary-btn:disabled {
  background: var(--dg-surface);
  color: var(--dg-ink-45);
  border-color: var(--dg-ink-25);
  transform: none;
}

/* style.css:4762 は 4.39:1。 */
.dg-form .coupon-help { color: var(--dg-ink-70); font: 500 12px/1.7 var(--dg-font-jp); }

/* --- クーポンバナー（新規） --- */
.dg-form__coupon-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--dg-mint-50);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-md);
}

/* バナーは featured（仕様B §4）が取れるまで hidden で、main.js が外す。
   直上の display: flex は作者スタイルなので、UA の [hidden] { display: none }
   より必ず強い。属性セレクタで上書きしないと hidden が効かない。 */
.dg-form__coupon-banner[hidden] { display: none; }

.dg-form__coupon-text { margin: 0; font: 700 12.5px/1.7 var(--dg-font-jp); }
/* 見出し側。small と縦に積む（旧マークアップでは裸のテキストノードだった）。 */
.dg-form__coupon-headline { display: block; }
.dg-form__coupon-text small { display: block; font: 500 11.5px/1.6 var(--dg-font-jp); color: var(--dg-ink-70); }

@media (max-width: 600px) {
  .dg-form__coupon-banner { flex-direction: column; align-items: stretch; }
}

/* style.css に .radio-error のルールは1本も無く、#styleError に書かれた
   エラー文が素のまま出る。今は空なので見えないだけ。 */
.dg-form .radio-error { margin: 8px 0 0; font: 600 12px var(--dg-font-jp); color: var(--dg-danger-ink); }

/* エラー文の色を --dg-danger-ink に揃える。style.css の #C0392B と
   混在していた。どちらも 4.5:1 は満たしている。
   style.css:4787 .form-step-error (0,1,0) と 4782 .coupon-status.is-error
   (0,2,0) が出どころ。ここは (0,2,0) / (0,3,0) なので詳細度で勝つ。 */
.dg-form .form-step-error,
.dg-form .coupon-status.is-error { color: var(--dg-danger-ink); }

/* ============ MODAL ============ */
/* display は main.js がインラインで書くので触らない。 */
.dg-modal { background-color: rgba(98, 240, 196, .35); }

.dg-modal .modal-content {
  margin: 6vh auto;
  padding: 0;
  width: 90%;
  max-width: 900px;
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-xl);
  box-shadow: 10px 10px 0 var(--dg-ink);
  overflow: hidden;
}

/* style.css:4232 は float:right と font-size:30px を持つ。
   円の中で記号がずれるので両方打ち消す。#aaa は 2.30:1。 */
.dg-modal .close-btn {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  background: var(--dg-cyan);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: 50%;
  font: 900 20px/1 var(--dg-font-en);
}

/* style.css:4244 は cyan の円に cyan の × を描く。ホバーで消える。
   色の打ち消しは :focus にも要る（style.css が :hover と :focus 両方に書いている）。
   ただし背景まで :focus で薄くすると、開いた瞬間に閉じるボタンへ
   フォーカスを移す仕様のせいで常時薄いままになる。背景は :focus-visible に限る。 */
.dg-modal .close-btn:hover,
.dg-modal .close-btn:focus { color: var(--dg-ink); }

.dg-modal .close-btn:hover,
.dg-modal .close-btn:focus-visible { background: var(--dg-cyan-50); }

.dg-modal .close-btn:focus-visible { outline: 2px solid var(--dg-ink); outline-offset: 2px; }

/* style.css:4249 の .modal-content .modal-title は (0,2,0)。
   .dg-modal__title(0,1,0) では負けるので同詳細度以上で受ける。 */
.dg-modal .modal-content .modal-title {
  margin: 0 0 14px;
  /* パネルの padding を 0 にしたので、見出しの余白は見出し自身が持つ。
     右は閉じるボタン(right:16px + 40px)を避けて 70px。
     左右 30px は .dg-modal .modal-body と揃える。 */
  padding: 26px 70px 0 30px;
  font: 900 30px/1.3 var(--dg-font-jp);
  color: var(--dg-ink);
}

.dg-modal .modal-body { padding: 0 30px 30px; }

/* Step 1 でインラインから移したクラス。
   style.css:4258 の .modal-body img が (0,1,1) で height:auto を持つので、
   クラス1個 (0,1,0) では負ける。.dg-modal で挟んで (0,2,0) にする。 */
.dg-modal .dg-modal__img {
  width: 100%;
  height: 390px;
  object-fit: cover;
  display: block;
  margin: 0 0 24px;
  border-bottom: var(--dg-stroke) solid var(--dg-ink);
}

.dg-modal__subhead {
  margin: 30px 0 14px;
  padding: 0;
  border-top: none;
  text-align: left;
  font: 900 15px var(--dg-font-jp);
  color: var(--dg-ink);
}

/* 元のコードは最後の1枚以外に margin-bottom を条件式で足していた。
   隣接兄弟セレクタに置き換える。 */
.dg-modal .dg-modal__subimg {
  width: 100%;
  height: auto;
  display: block;
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
}

.dg-modal .dg-modal__subimg + .dg-modal__subimg { margin-top: 16px; }

/* 画像版は本文を左寄せにする。動画版の text-align:center は
   インラインのまま残すので当たらない。 */
.dg-modal .modal-detail-content { text-align: left; }

/* --- クーポンモーダル --- */
/* こちらは display を CSS の .is-active で切り替えているので上書きできる。 */
.coupon-modal .coupon-modal-content {
  padding: 30px;
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-xl);
  box-shadow: 10px 10px 0 var(--dg-ink);
}

/* style.css:4392 は background-clip:text で cyan の文字（1.95:1）。
   -webkit-text-fill-color は color より優先されるので必ず明示する。 */
.coupon-modal .coupon-title {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--dg-ink);
  font: 900 22px/1.4 var(--dg-font-jp);
}

.coupon-modal .coupon-desc { color: var(--dg-ink-70); font: 500 13px/1.9 var(--dg-font-jp); }

.coupon-modal .coupon-code-container {
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
}

/* ID セレクタ (1,0,0)。クラスでは勝てないので ID で受ける。
   #19a3b0 on #f7f7f7 = 2.84:1 だった。 */
#couponCode {
  background-color: var(--dg-surface);
  color: var(--dg-ink);
  font: 900 16px var(--dg-font-en);
}

/* style.css:4426 は白文字 on #19a3b0 = 3.04:1。 */
.coupon-modal .copy-btn {
  background-color: var(--dg-cyan);
  color: var(--dg-ink);
  font: 900 13px var(--dg-font-jp);
}

.coupon-modal .copy-btn:hover { background-color: var(--dg-cyan-50); }

/* style.css:4440 は白文字 on #00ced1 = 1.95:1。 */
.coupon-modal .coupon-contact-btn {
  background: var(--dg-ink);
  color: #fff;
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  box-shadow: none;
  font: 900 14px var(--dg-font-jp);
}

.coupon-modal .coupon-close-btn { color: var(--dg-ink); }
.coupon-modal .coupon-close-btn:hover { color: var(--dg-ink); }


/* ============ POLICY（policy.html・利用規約） ============
   仕様A §7.12。情報設計とレイアウトは既存のまま、トークンと部品だけ当てる。
   棚卸し 3d の §3-2。
   セクションの上下は 40/64 で目盛り（4/8/12/16/20/26/34/44/52）から外れて
   いたので、主要7セクション（.dg-works / .dg-price / .dg-flow / .dg-faq /
   .dg-about / .dg-news / .dg-contact）と同じ 44/52 に揃える。 */
.dg-policy { padding: 44px 0 52px; }

/* style.css:1333 の .section-head が持っていた text-align:center を持ち直す。 */
.dg-policy__head { text-align: center; margin: 0 0 18px; }

/* style.css:250 のグループ font-family（Anzu Moji）と 296 の 2.5em/700/
   margin-bottom:50px は .dg-wrap h2 のリセットでは消えない（棚卸し 要注意6）。
   font: ショートハンドと margin を両方書く。text-align は .dg-wrap h2 (0,1,1) と
   同詳細度なので、同じ (0,1,1) で後から宣言して勝たせる。 */
.dg-policy__head h2 {
  margin: 12px 0 6px;
  font: 900 30px/1.4 var(--dg-font-jp);
  color: var(--dg-ink);
  text-align: center;
}

/* style.css:1337 の .section-eyebrow は薄いティールのグラデ面に #0f7a82（4.58:1）。
   .dg-chip と同じ墨線 pill に置き換える。押せない文字なので cursor は付けない。
   text-transform: uppercase は既存の表示（SITE POLICY）を変えないために残す。 */
.dg-policy__eyebrow {
  display: inline-block;
  padding: 7px 18px;
  font: 900 12px/1 var(--dg-font-en);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dg-ink);
  background: var(--dg-mint-50);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
}

.dg-policy__subtitle {
  margin: 0;
  font: 500 13px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* style.css:527 の .cta-btn.outline は border 2px rgba(0,206,209,.45)（白地に 1.40:1）
   とぼかし影を持っていた。墨線の .dg-btn--ghost に載せ替え済み。 */
.dg-policy__cta { margin: 0 0 34px; text-align: center; }

/* 規約は長文を読ませるページ。body の 13.5px は UI 用なので .dg-prose（15px/2）を当てる。
   .dg-prose ul/ol/li のリセットもここで初めて実要素に届く（3枚のどこにも ul/li の
   ルールが無く、点と 40px の左インデントが素で出ていた）。 */
.dg-policy__body { margin: 0; }

/* ============ SEND（send.html・送信完了） ============
   仕様A §7.12。棚卸し 3d の §3-3。
   インライン <style>（6ルール）は丸ごと削除した。うち5つが
   --color-light / --color-primary / --color-heading / --color-text /
   --color-accent という3枚のどこにも定義の無い変数を参照していて、
   カードの面は透明・アイコンと見出しは #333 の継承という状態だった。
   残る1つ（.back-link 13宣言）は当たる要素が1つも無い死にコード。
   セクションの上下は 52/72。72 が目盛り外なのに加えて、主要7セクション
   （.dg-works / .dg-price / .dg-flow / .dg-faq / .dg-about / .dg-news /
   .dg-contact）がすべて 44px 0 52px で揃っているので、上も 52 → 44 にして
   同じ縦リズムに乗せる。52 自体は目盛り上にあり、動かす理由は
   「目盛り外だから」ではなく「7セクションと揃えるため」。
   404.html も同じ .dg-send セクションを使っているので同時に揃う。 */
.dg-send { padding: 44px 0 52px; }

.dg-send__card {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 34px;
  text-align: center;
}

/* 旧 .success-icon は @keyframes bounce（0.8s で2回跳ねる）を持っていた。
   ラグレキはぼかし影も過剰なモーションも使わないので落とす。 */
.dg-send__icon {
  margin: 0 0 18px;
  font-size: 56px;
  line-height: 1;
  color: var(--dg-ink);
}

/* style.css:250 のグループ font-family（Anzu Moji）は h1 にも当たる。
   font: ショートハンドで上書きする。 */
.dg-send__title {
  margin: 0 0 16px;
  font: 900 24px/1.5 var(--dg-font-jp);
  color: var(--dg-ink);
}

.dg-send__card p {
  margin: 0 0 14px;
  font: 500 14.5px/1.95 var(--dg-font-jp);
  color: var(--dg-ink);
}

.dg-send__card strong { font-weight: 900; }

/* 旧: <p style="font-weight: bold; margin-top: 25px;">。
   (0,2,0) で .dg-send__card p (0,1,1) に勝たせる。 */
.dg-send__card .dg-send__wait { margin-top: 26px; font-weight: 900; }

/* 送信後のクーポンの結末（仕様B §5）。main.js の renderCouponVerdict が入れる。
   .dg-send__card p が (0,1,1) なので、クラス単体 (0,1,0) では margin も font も
   color も負ける。.dg-send__wait と .dg-notfound__code がすでに踏んでいる罠なので
   同じ形（0,2,0）で受ける。

   面は --dg-cyan-50 (#EAFCFC)。cyan 系の面には color を必ず書く決まりなので、
   is-ok / is-notice の両方で --dg-ink (#3D3A3A) を明示する（約 11:1）。
   親の text-align: center を左寄せに戻すのは、2〜3行になる文だから。 */
.dg-send__card .dg-send__coupon {
  max-width: 460px;
  margin: 26px auto 0;
  padding: 14px 16px;
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
  background: var(--dg-cyan-50);
  color: var(--dg-ink);
  font: 700 13.5px/1.85 var(--dg-font-jp);
  text-align: left;
}

/* 依頼そのものは届いているので、失敗も「不明」も赤にしない。
   面だけ落ち着かせて、文字色は同じ墨のままにする。 */
.dg-send__card .dg-send__coupon.is-notice {
  background: var(--dg-base);
  color: var(--dg-ink);
  /* 面の違いだけだと拾いにくいので、左辺だけ太くして「注記」に見せる。
     base の border ショートハンドより後に来る (0,3,0) なので勝つ。 */
  border-left-width: 8px;
}

/* .dg-send__card p は display を書いていないので UA の [hidden] でも消えるが、
   .dg-form__coupon-banner で一度踏んでいるので明示しておく
   （あとから display を足した人がここを黙って壊せないように）。 */
.dg-send__card .dg-send__coupon[hidden] { display: none; }

/* 旧: <div style="text-align:center; margin-top:50px"> の中に
   <a style="color:#4A90E2; …">（白地に 3.29:1）。インライン style= は
   CSS では上書きできないので markup から消し、.dg-btn に載せ替えた。 */
.dg-send__actions { margin-top: 40px; }

/* ============ SCHEDULE（info.html・着手スケジュール） ============
   仕様A §7.12。表そのものはページ内の <script type="module"> が
   #schedule-grid に組み立てる。棚卸し 3d の §3-1。
   セクションの上下は 40/64 で目盛り外だったので 44/52 に揃える。 */
.dg-schedule { padding: 44px 0 52px; }

/* style.css:250 のグループ font-family（Anzu Moji）と 296 の 2.5em/700/
   margin-bottom:50px は .dg-wrap h2 のリセットでは消えない（棚卸し 要注意6）。 */
/* text-align は .dg-wrap h2 (0,1,1) が left を宣言しているので、
   クラス1つ (0,1,0) では負ける。(0,2,0) に上げて中央寄せを保つ。 */
.dg-schedule .dg-schedule__title {
  margin: 0 0 8px;
  font: 900 30px/1.4 var(--dg-font-jp);
  color: var(--dg-ink);
  text-align: center;
}

/* 旧 .schedule-lead は rgba(15,80,86,.75)（実測 4.68:1）。 */
.dg-schedule__lead {
  max-width: 70ch;
  margin: 0 auto 22px;
  font: 500 14px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
  text-align: center;
}

/* 旧 .schedule-legend は白 72% の面 + border 1px rgba(15,80,86,.10)（1.18:1）
   + ぼかし影。器の装飾はやめ、項目そのものを .dg-chip 相当の墨線 pill にする。 */
.dg-schedule__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 26px;
}

.dg-schedule__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font: 700 12.5px var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
}

/* 旧 .legend-dot は3種ともティール／オレンジ／グレーのグラデ + ぼかし影。
   面が薄いので墨の輪で境界を出す（--dg-mint は白地に 1.42:1、
   --dg-cyan は 1.59:1 で、輪が無いと丸そのものが見えない）。 */
.dg-schedule__dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--dg-ink);
  border-radius: 50%;
  box-shadow: none;
}
.dg-schedule__dot--ok      { background: var(--dg-mint); }
.dg-schedule__dot--consult { background: var(--dg-cyan); }
.dg-schedule__dot--ng      { background: var(--dg-danger); }

.dg-schedule__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  margin: 0 auto 26px;
}
@media (min-width: 860px) {
  .dg-schedule__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* .dg-card をそのまま当てているが、<table> の padding は枠と最初のセルの
   間に入ってしまうので 0 に戻す。角丸は overflow で切る。 */
.dg-schedule__table {
  width: 100%;
  padding: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.dg-schedule__table th,
.dg-schedule__table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--dg-ink-25);
  vertical-align: middle;
  text-align: left;
}
.dg-schedule__table tbody tr:last-child th,
.dg-schedule__table tbody tr:last-child td { border-bottom: none; }

.dg-schedule__table tbody th {
  width: 58%;
  font: 700 13px/1.6 var(--dg-font-jp);
  color: var(--dg-ink);
}

/* 旧 .schedule-month は var(--ui-grad)。墨線の下罫線 + mint の面にする。 */
.dg-schedule__month {
  position: relative;
  padding: 14px 16px;
  font: 900 18px/1.3 var(--dg-font-jp);
  letter-spacing: .04em;
  color: var(--dg-ink);
  background: var(--dg-mint-50);
  border-bottom: var(--dg-stroke) solid var(--dg-ink);
}

/* 本番データが7月・8月なので今は発火しないが（info.html の
   isCurrent = month === currentMonth）、生きたコードなので意匠は揃える。 */
.dg-schedule__month.is-current::after {
  content: "今月";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 10px;
  font: 900 11px/1.4 var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-mint);
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  box-shadow: none;
}

.dg-schedule__cell { width: 42%; text-align: center; }

/* ステータスの3値。info.html:62 の VALID_STATUSES は ok / consult / ng の
   3つしか出さないが、style.css には .status-ng のルールが1本も無く、
   「受付不可」だけ background: rgba(0,0,0,0) / color: rgb(51,51,51) の
   無装飾で描かれていた（.status-undetermined は逆にどの経路からも出ない）。
   3値とも墨線 pill にし、面の上には必ず color を宣言する。 */
.dg-schedule__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 7px 16px;
  font: 900 13px var(--dg-font-jp);
  color: var(--dg-ink);
  text-decoration: none;
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
}
.dg-schedule__pill--ok      { background: var(--dg-mint); color: var(--dg-ink); }  /* 7.93:1 */
.dg-schedule__pill--consult { background: var(--dg-cyan); color: var(--dg-ink); }  /* 7.08:1 */
/* --dg-danger (#F25A5A) をベタで敷くと墨文字で 3.42:1、白文字でも 3.29:1 で
   どちらも AA を割る（実測）。白地に 45% で落とした #F9B5B5 なら墨文字で
   6.60:1。境界は 2px の墨線が持つので面は薄くてよい。 */
.dg-schedule__pill--ng      { background: rgba(242, 90, 90, .45); color: var(--dg-ink); }

.dg-schedule__pill:hover { background: var(--dg-cyan-50); transform: none; }
.dg-schedule__pill--ok:hover      { background: var(--dg-mint-50); }
.dg-schedule__pill--ng:hover      { background: rgba(242, 90, 90, .22); }

/* API が空配列を返したときと fetch が落ちたときの1行。
   もとは grid.innerHTML の中に style='text-align:center;color:#888;' が
   直書きされていて（白地に 3.54:1）、インライン style= なので CSS では
   直せなかった。文字列側からクラスに変えてある。 */
.dg-schedule__empty {
  margin: 0;
  padding: 26px 0;
  font: 500 14px/1.8 var(--dg-font-jp);
  color: var(--dg-ink-70);
  text-align: center;
}

/* 旧 .schedule-note は白 82% の面 + 1px rgba(15,80,86,.12) + ぼかし影。 */
.dg-schedule__note { max-width: 980px; margin: 0 auto; }
.dg-schedule__note-title {
  margin: 0 0 10px;
  font: 900 16px/1.5 var(--dg-font-jp);
  color: var(--dg-ink);
}
.dg-schedule__note-text {
  margin: 0;
  font: 500 14px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
}
/* 旧 .schedule-cta.submit-btn は var(--ui-grad-strong) に白文字。
   グラデのどの位置を取っても 1.22〜2.36:1 で不合格だった。 */
.dg-schedule__note-cta { display: flex; justify-content: center; margin-top: 18px; }

/* ============ CAMPAIGN / BOOTH（sp-sale.html） ============
   仕様A §7.9。棚卸し 3bcd の §2。
   pages.css には CAMPAIGN のブロックが1本も無かったため全部新規。
   旧 sp-sale.html はインライン <style>（11–610行・100ルール）が意匠を独占しており、
   3枚のスタイルシートより後に来るうえ .sp-sale .sale-card (0,2,0) と
   クラス2つで書かれていたので詳細度でも勝っていた。丸ごと削除した前提で書く。 */
.dg-campaign { padding: 44px 0 8px; background: var(--dg-base); }

/* --- 見出し行（CAMPAIGN + mint の「開催中 N件」pill） --- */
.dg-campaign__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 0 0 26px;
}

.dg-campaign__eyebrow {
  margin: 0 0 6px;
  font: 900 11.5px var(--dg-font-en);
  letter-spacing: .14em;
  color: var(--dg-ink-70);
}

/* style.css:250 のグループセレクタが h1 に --display-font（Anzu Moji・weight 400 のみ）を
   無条件で当てる。pages.css にも dobagaki.css にも受けが無いので、
   見出しクラスには必ず font: ショートハンドを書く。 */
.dg-campaign__title {
  margin: 0;
  font: 900 46px/1 var(--dg-font-en);
  letter-spacing: -.045em;
  color: var(--dg-ink);
}

.dg-campaign__title-jp {
  display: block;
  margin-top: 6px;
  font: 900 24px/1.3 var(--dg-font-jp);
  letter-spacing: normal;
  color: var(--dg-ink);
}

/* mint の面には必ず color を宣言する（仕様A §11）。宣言しないと
   style.css 側の白文字が残って 1.6:1 になる。ink on mint は 7.93:1。 */
.dg-campaign__count {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 20px;
  font: 900 13px var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-mint);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  box-shadow: var(--dg-shadow-ink-sm);
}

/* --- ヒーロー（キャンペーン全体の状態と導線） --- */
.dg-campaign__hero {
  display: grid;
  grid-template-columns: 1fr .82fr;
  align-items: center;
  gap: 30px;
  margin: 0 0 40px;
  padding: 30px;
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-lg);
  box-shadow: var(--dg-shadow-mint);
}

/* 終了の告知。ink ベタ塗りに白文字で 11.26:1。
   ここだけは cyan/mint を使わない ——「押せるもの」でも「良い知らせ」でもないため。 */
.dg-campaign__status {
  display: inline-block;
  margin: 0 0 16px;
  padding: 11px 22px;
  font: 900 14px/1.4 var(--dg-font-jp);
  color: #fff;
  background: var(--dg-ink);
  border-radius: var(--dg-r-pill);
}

.dg-campaign__lead {
  margin: 0 0 12px;
  font: 500 14px/1.95 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

.dg-campaign__note {
  margin: 0 0 20px;
  padding: 12px 16px;
  font: 700 12.5px/1.8 var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-cyan-50);
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
}

.dg-campaign__note a { color: var(--dg-ink); text-decoration: underline; text-underline-offset: 3px; }

.dg-campaign__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dg-campaign__actions .dg-btn { padding: 13px 24px; font-size: 13px; }

.dg-campaign__hero-visual { min-width: 0; }

/* --- カードの器 --- */
.dg-campaign__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  /* 副カード列は2行にまたがる。行の高さを auto のままにすると、
     またぐ側の余りが1行目にも配られて主バナーの下に空きが出る。
     1行目を max-content で主バナーの高さに固定し、余りは2行目に送る。 */
  grid-template-rows: max-content auto;
  align-items: start;
  gap: 26px;
}

/* 主バナー1枚に対して副カードが3枚あるため、素直に組むと左列の下に
   400px 以上の空白が残る。注意事項を左列の2行目に置いて埋める。
   DOM の並びは 主バナー → 副カード → 注意事項 のままなので読み上げ順は動かない。 */
.dg-campaign__col { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 20px; align-content: start; }
.dg-campaign__grid > .dg-campaign__notes { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }

.dg-campaign__card {
  position: relative;
  background: var(--dg-base);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-lg);
  overflow: hidden;
}

.dg-campaign__card--main { box-shadow: 7px 7px 0 var(--dg-cyan); }

.dg-campaign__card--sub {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: stretch;
  box-shadow: var(--dg-shadow-ink-sm);
}

/* --- バナー画像。1920×1080 の既存 PNG は逆光・ピンクでブランド外だが
   作り直さない（仕様A §7.9）。白のマットと墨枠で囲って隣接色との衝突を切る。 --- */
.dg-campaign__media {
  position: relative;
  padding: 12px;
  background: var(--dg-base);
}

/* 罫線はカードの中だけ。ヒーローの画像枠は同じ器を使い回すが独立しているので線を引かない。 */
.dg-campaign__card .dg-campaign__media { border-bottom: var(--dg-stroke) solid var(--dg-ink); }

.dg-campaign__card--sub .dg-campaign__media {
  display: flex;
  align-items: center;
  border-bottom: none;
  border-right: var(--dg-stroke) solid var(--dg-ink);
}
.dg-campaign__card--sub .dg-campaign__frame { width: 100%; }

/* .dg-mask は border と overflow を持つ。高さは器に追従させる。 */
.dg-campaign__frame {
  border-radius: var(--dg-r-sm);
  background: var(--dg-base);
}

/* バナーは 1920×1080 の 16:9 で、価格も見出しも文字としてラスタに焼き込まれている。
   固定高さ + object-fit:cover にすると必ずその文字を切る（仕様の「画像270px」を
   そのまま採ると上下が約10%欠けた）。枠を画像と同じ 16:9 にして contain で置く。 */
.dg-campaign__frame { aspect-ratio: 16 / 9; }
.dg-campaign__frame > img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* img の onerror が .is-missing を足す。旧 markup は
   style="display:none;" のインライン属性でこれをやっていて CSS から触れなかった。 */
.dg-campaign__missing {
  display: none;
  margin: 0;
  font: 700 12px/1.6 var(--dg-font-jp);
  color: var(--dg-ink-70);
  text-align: center;
}
.dg-campaign__media.is-missing .dg-campaign__frame { display: none; }
.dg-campaign__media.is-missing .dg-campaign__missing {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  border: 2px dashed var(--dg-ink-25);
  border-radius: var(--dg-r-sm);
}

/* --- カード本文 --- */
.dg-campaign__body { padding: 22px 24px 24px; }
.dg-campaign__card--sub .dg-campaign__body { padding: 18px 20px 20px; }

.dg-campaign__kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
  font: 900 11.5px var(--dg-font-jp);
  letter-spacing: .1em;
  color: var(--dg-ink-70);
}

.dg-campaign__name {
  margin: 0 0 8px;
  font: 700 19px/1.4 var(--dg-font-jp);
  color: var(--dg-ink);
}
.dg-campaign__card--main .dg-campaign__name { font-size: 22px; }

.dg-campaign__desc {
  margin: 0 0 14px;
  font: 500 13px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* 打消線の旧価格。仕様の --dg-ink-45 は白地で 2.91:1 しか出ないので
   ink-70（白地に 5.37:1、終了カードの面でも 4.96:1）まで上げる。price.html:643 と同じ判断。 */
.dg-campaign__prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 12px;
}

.dg-campaign__was {
  font: 700 13px "Outfit", var(--dg-font-jp);
  color: var(--dg-ink-70);
  text-decoration: line-through;
}

.dg-campaign__now {
  font: 900 26px/1 "Outfit", var(--dg-font-jp);
  color: var(--dg-ink);
}
.dg-campaign__card--main .dg-campaign__now { font-size: 32px; }

.dg-campaign__off {
  padding: 5px 12px;
  font: 900 11.5px var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-mint);
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
}

.dg-campaign__fine {
  margin: 0 0 14px;
  font: 500 12px/1.85 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

/* --- <details>。pages.css:1122 の FAQ と同じ ＋ / － を使う。
   FAQ は <span class="faq-icon"> を font-size:0 にして ::after を出していたが、
   <summary> の記号は UA が描くマーカーなので list-style と
   ::-webkit-details-marker の両方を落としてから ::after を足す。 --- */
.dg-campaign__details {
  margin: 0 0 14px;
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
  overflow: hidden;
}

.dg-campaign__details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  font: 900 12.5px/1.5 var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-cyan-50);
  cursor: pointer;
  list-style: none;
}
.dg-campaign__details summary::-webkit-details-marker { display: none; }
.dg-campaign__details summary::marker { content: ""; }
.dg-campaign__details summary:focus-visible { outline: 2px solid var(--dg-ink); outline-offset: -4px; }

/* 親の font-size を継承させないよう ::after 側で必ず指定する。 */
.dg-campaign__details summary::after {
  content: "＋";
  flex-shrink: 0;
  font: 900 15px/1 var(--dg-font-en);
  color: var(--dg-ink);
}
.dg-campaign__details[open] summary::after { content: "－"; }

.dg-campaign__details-body {
  padding: 14px;
  border-top: 2px solid var(--dg-ink);
  background: var(--dg-base);
}
.dg-campaign__details-body ul { margin: 0; padding-left: 1.3em; }
.dg-campaign__details-body li {
  margin: 0 0 6px;
  font: 500 12.5px/1.8 var(--dg-font-jp);
  color: var(--dg-ink-70);
}
.dg-campaign__details-body li:last-child { margin-bottom: 0; }

/* --- カードのボタン列 --- */
.dg-campaign__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.dg-campaign__foot .dg-btn { padding: 12px 20px; font-size: 12.5px; }

.dg-campaign__link {
  font: 700 12.5px var(--dg-font-jp);
  color: var(--dg-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dg-campaign__link:hover { color: var(--dg-ink); text-decoration-thickness: 2px; }

/* --- 注意事項 --- */
.dg-campaign__notes {
  margin: 0;
  padding: 26px 30px;
  background: var(--dg-surface);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-lg);
}

/* style.css:296 の h2 は text-align:center / font-size:2.5em / margin-bottom:50px /
   #eee の3px下線 / ::after の teal バーを持つ。.dg-wrap h2 が消すのは
   position・text-align・padding-bottom・border-bottom・::after の5つだけで、
   font-family（Anzu Moji）・font-size・font-weight・margin は残る。 */
.dg-campaign__subtitle,
.dg-campaign__notes-title,
.dg-booth__title {
  margin: 0 0 18px;
  font: 900 26px/1.4 var(--dg-font-jp);
  color: var(--dg-ink);
}
.dg-campaign__notes-title { font-size: 18px; margin-bottom: 12px; }

.dg-campaign__notes ul { margin: 0; padding-left: 1.3em; }
.dg-campaign__notes li {
  margin: 0 0 8px;
  font: 500 13px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
}
.dg-campaign__notes li:last-child { margin-bottom: 0; }

/* ============ 終了キャンペーン ============
   仕様A §7.9 は「opacity .55 + filter: grayscale(1) + 終了バッジ」。
   opacity は **バナー画像だけ** に当てる。白地の上で opacity:.55 を文字に掛けると、
   純黒でも 4.76:1 にしかならず（合成後の輝度 0.171）、ink #3D3A3A なら 3.07:1、
   本文の ink-70 なら 2.24:1 まで落ちて AA を確実に割る。
   grayscale(1) はカード全体に当てて cyan / mint の「開催中」感を殺す
   （ink はほぼ無彩色なので文字のコントラストは動かない）。 */
.dg-campaign__card.is-ended,
.dg-campaign__media.is-ended { filter: grayscale(1); }

.dg-campaign__card.is-ended { background: #F5F6F6; }
.dg-campaign__card.is-ended .dg-campaign__media { background: #F5F6F6; }

/* opacity はバナー画像そのものにだけ掛ける。器（墨枠と仕切り線）ごと透かすと
   墨線 2.5px が同じく透けた面に対して 2.94:1 まで落ち、
   WCAG 1.4.11 の 3:1 を割る（実測。白地に対しても 3.07:1 しか出ない）。 */
.dg-campaign__card.is-ended .dg-campaign__frame > img,
.dg-campaign__media.is-ended .dg-campaign__frame > img { opacity: .55; }

/* 終了カードの CTA から cyan を抜く。cyan は「今押せるもの」の色なので、
   終わったキャンペーンに残すと押せる約束をしたままになる。 */
.dg-campaign__card.is-ended .dg-campaign__cta {
  background: var(--dg-base);
  box-shadow: none;
}
.dg-campaign__card.is-ended .dg-campaign__cta:hover {
  transform: none;
  box-shadow: none;
  background: #EDEEEE;
}

/* 終了バッジ。ink ベタ塗り + 白文字で 11.26:1。
   grayscale の中でも輝度は動かないので読み落とさない。 */
.dg-campaign__badge {
  display: inline-block;
  margin: 0;
  padding: 5px 14px;
  font: 900 11.5px/1.4 var(--dg-font-jp);
  letter-spacing: .08em;
  color: #fff;
  background: var(--dg-ink);
  border-radius: var(--dg-r-pill);
}

/* 主バナーは仕様どおり画像の左上に置く（期限バッジの位置）。
   .dg-campaign__media を透かすので、バッジは media の外＝カード直下に置き、
   opacity:.55 の巻き添えを避ける。 */
.dg-campaign__badge--over {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 8px 18px;
  font-size: 13px;
  box-shadow: var(--dg-shadow-ink-sm);
  border: 2px solid #fff;
}

/* ============ BOOTH（sp-sale.html） ============
   仕様A §7.9。markup 自体が存在しなかったので新規。 */
.dg-booth { padding: 12px 0 52px; background: var(--dg-base); }

.dg-booth__panel {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px 26px;
  padding: 26px 30px;
  background: var(--dg-surface);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-lg);
  box-shadow: var(--dg-shadow-ink);
}

.dg-booth__brand { display: flex; align-items: center; gap: 14px; }

.dg-booth__logo {
  width: 132px;
  height: auto;
  display: block;
}

/* 「販売中」は押せるものではないので cyan は使わず mint。ink on mint は 7.93:1。 */
.dg-booth__badge {
  margin: 0;
  padding: 6px 14px;
  font: 900 11.5px/1.4 var(--dg-font-jp);
  color: var(--dg-ink);
  background: var(--dg-mint);
  border: 2px solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  white-space: nowrap;
}

.dg-booth__desc {
  margin: 0;
  font: 500 13px/1.9 var(--dg-font-jp);
  color: var(--dg-ink-70);
}

.dg-booth__cta { flex-shrink: 0; white-space: nowrap; }

/* 「工事中」マーク付きの破線 pill。 */
.dg-booth__wip {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 18px 8px 12px;
  background: var(--dg-base);
  border: 2px dashed var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 700 12.5px/1.5 var(--dg-font-jp);
  color: var(--dg-ink);
}
.dg-booth__wip img { width: 24px; height: 24px; display: block; }

/* ============ CAMPAIGN / BOOTH の狭幅 ============ */
@media (max-width: 900px) {
  .dg-campaign__hero { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .dg-campaign__hero-visual { max-width: 520px; }
  .dg-campaign__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .dg-campaign__col { grid-column: auto; grid-row: auto; }
  .dg-campaign__grid > .dg-campaign__notes { grid-column: auto; grid-row: auto; }
  .dg-booth__panel { grid-template-columns: 1fr; justify-items: start; }
}

@media (max-width: 767px) {
  .dg-campaign { padding-top: 30px; }
  .dg-campaign__title { font-size: 34px; }
  .dg-campaign__title-jp { font-size: 20px; }
  .dg-campaign__subtitle, .dg-booth__title { font-size: 21px; }
  .dg-campaign__card--sub { grid-template-columns: 1fr; }
  .dg-campaign__card--sub .dg-campaign__media {
    border-right: none;
    border-bottom: var(--dg-stroke) solid var(--dg-ink);
  }
  .dg-campaign__card--main .dg-campaign__now { font-size: 27px; }
  .dg-campaign__badge--over { top: 20px; left: 20px; }
  .dg-campaign__notes { padding: 20px 18px; }
  .dg-booth__panel { padding: 20px 18px; }
  .dg-campaign__actions .dg-btn,
  .dg-campaign__foot .dg-btn { padding: 12px 18px; font-size: 12px; }
}

@media (max-width: 380px) {
  .dg-campaign__title { font-size: 28px; }
  .dg-campaign__actions { gap: 8px; }
  .dg-booth__logo { width: 108px; }
}

/* ============ 全ページ共通の打ち消し ============
   9ページすべてに効く。棚卸し 3a の要注意 5・6・8・9・10・11・16。
   いずれも pages.css に受けが無いために旧テーマが残っていたもので、
   index.html でも同じ症状が出ていた。 */

/* style.css:4275 の footer { color:#888 } は 3.25:1。
   footer は裸の要素セレクタなのでクラス grep に映らない。 */
footer {
  color: var(--dg-ink-70);
  border-top: var(--dg-stroke) solid var(--dg-ink);
  font: 500 12.5px/1.9 var(--dg-font-jp);
}

/* style.css:655/668 はホバーで #00ced1 の3px下線を走らせる。
   pages.css:288 の .dg-header__nav a は ::after を宣言していない。 */
.dg-header__nav a::after,
.dg-header__nav a:hover::after { content: none; display: none; }

/* style.css:4307 の .loader は旧ティール #19A3B0（白地に 3.04:1）。
   cyan にすると 1.59:1 でむしろ見えにくくなるうえ、cyan は
   「押せるもの」に予約した色でスピナーには使わない。 */
#loading-overlay .loader { border-top-color: var(--dg-ink); }

/* style.css:1689 の scroll-margin-top:110px は旧固定ヘッダーの遺物。
   pages.css:160 でヘッダーを position:relative にした後も残り、
   main.js の scrollIntoView が開いた項目の上に 110px の空白を作る。 */
.dg-faq__item { scroll-margin-top: 24px; }

/* style.css:1930 の .btn-link:hover は上に 2px 浮く。
   ラグレキのホバーは沈んで影が縮む。 */
.dg-faq__item .btn-link:hover { transform: translate(2px, 2px); }

/* style.css:5600 の :focus-visible は旧ティール。--dg-cyan の面で 1.23:1。
   .dg-btn と .dg-header__nav a のリングが見えていなかった。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-color: var(--dg-ink); }

/* style.css:372 の drop-shadow が白いヘッダーに黒いぼかしを落とす。
   pages.css:194 は height/width/display しか宣言していない。 */
.dg-header__logo img { filter: none; }

/* style.css:542/552/562/569 の .menu-toggle は白地に白枠（1.00:1）。
   pages.css:286/355 は display しか宣言していない。≤900px で見える。 */
.dg-header .menu-toggle {
  background: none;
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-sm);
  backdrop-filter: none;
  color: var(--dg-ink);
}

.dg-header .menu-toggle:hover {
  background: var(--dg-cyan-50);
  border-color: var(--dg-ink);
  box-shadow: none;
  transform: none;
}

/* 規約・案内など長文を読ませるページ用。UI の 13.5px では小さい。
   このタスクではまだ適用しない（適用は各ページのタスク）。 */
.dg-prose { font: 500 15px/2 var(--dg-font-jp); color: var(--dg-ink); }
.dg-prose h2 {
  margin: 40px 0 12px;
  font: 900 20px/1.5 var(--dg-font-jp);
  color: var(--dg-ink);
  /* style.css:296 の中央寄せ・padding-bottom・下罫線と ::after の teal バーは
     .dg-wrap h2 (pages.css:380) でしか消えない。両者は (0,1,1) 同士で
     宣言するプロパティが重ならないため上書き関係にならず、.dg-prose 単体だと
     style.css の装飾がそのまま残る。.dg-wrap で包み忘れても成立するよう自前で持つ。 */
  position: static;
  text-align: left;
  padding-bottom: 0;
  border-bottom: none;
}

.dg-prose h2::after { content: none; display: none; }
/* h3 は style.css に裸の要素セレクタが無く（250行のグループ font-family のみで、
   これは font: ショートハンドが上書きする）、::after も罫線も付かないため
   h2 のような打ち消しは要らない。 */
.dg-prose h3 { margin: 28px 0 10px; font: 900 16px/1.5 var(--dg-font-jp); color: var(--dg-ink); }
.dg-prose p { margin: 0 0 16px; }
.dg-prose ul, .dg-prose ol { margin: 0 0 16px; padding-left: 1.4em; }
.dg-prose li { margin: 0 0 6px; }
.dg-prose a { color: var(--dg-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============ 404 ============
   send.html の .dg-send__* を流用し、404 固有のものだけ足す。 */
/* .dg-send__card p (0,1,1) に負けるので (0,2,0) で受ける。
   同じ罠を .dg-send__wait で一度踏んでいる。 */
.dg-send__card .dg-notfound__code {
  margin: 0 0 6px;
  font: 900 64px/1 var(--dg-font-en);
  letter-spacing: -.05em;
  color: var(--dg-ink);
}

/* ul / li のリセットは3枚のどこにも無い。 */
.dg-notfound__links {
  list-style: none;
  margin: 22px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.dg-notfound__links a {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: var(--dg-base);
  color: var(--dg-ink);
  border: var(--dg-stroke) solid var(--dg-ink);
  border-radius: var(--dg-r-pill);
  font: 700 12.5px var(--dg-font-jp);
  transition: background var(--dg-dur-fast) ease-out, transform var(--dg-dur-fast) ease-out;
}

.dg-notfound__links a:hover { background: var(--dg-cyan-50); transform: translate(2px, 2px); }
.dg-notfound__links a:focus-visible { outline: 2px solid var(--dg-ink); outline-offset: 2px; }

@media (max-width: 600px) {
  .dg-send__card .dg-notfound__code { font-size: 48px; }
}