@charset "UTF-8";

/* =========================================================================
   theplus.me — PLUS OTT (POTT) デザインシステム
   モノクロ・ミニマル / モバイルファースト / PC でもスマホ幅を中央寄せ。
   ブランドロックアップ「ピクセル十字マーク + WORD」に合わせた幾何学サンセリフ見出し。
   ========================================================================= */

/* ---- トークン ---------------------------------------------------------- */
:root {
  /* 色（純黒でなく墨系。ブランド AI ファイルの #231815 系に寄せる） */
  --ink:      #1a1a1a;
  --ink-70:   #4d4d4d;
  --ink-50:   #7a7a76;
  --paper:    #ffffff;
  --paper-2:  #f4f4f2;
  --line:     #e6e5e1;
  --line-2:   #d8d7d2;

  /* タイポ */
  --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Poppins", "Noto Sans JP", var(--font-body);

  /* レイアウト */
  --wrap: 1120px;          /* ワイド（トップのタイル等） */
  --col: 912px;            /* 本文カラム（2026-09-23 に 680→912px。/report/ccig/about/ で 760px×120% に決定） */
  --gutter: clamp(1.125rem, 5vw, 2rem);
  --header-h: 68px; /* 2026-09-26 に 60px → 68px（ロゴの下に PLUS OVER THE TOP を置いたため） */

  /* 8px スケール */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;   --s-12: 3rem;   --s-16: 4rem;  --s-24: 6rem;

  /* 角丸・影 */
  --r: 16px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.06);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- リセット -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.35; letter-spacing: .01em; }
p { margin: 0 0 var(--s-4); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* ---- ユーティリティ -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: var(--wrap); }
.u-nowrap { display: inline-block; } /* ひとかたまりで折り返す（見出しを全角スペースの位置で改行させる等） */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: -100%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: .6em 1.2em;
  border-radius: 0 0 var(--r-sm) var(--r-sm); z-index: 200;
}
.skip-link:focus { top: 0; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ---- ヘッダ -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--header-h);
}
.site-header__logo { color: var(--ink); flex: 0 0 auto; }
.site-header__logo svg { height: 19.2px; width: auto; } /* 2026-09-25 に 16px → 120% */
/* 上の段：POTT ロゴ＋その右にタグライン（「〜AIの」で改行した2行）／下の段：「PLUS OVER THE TOP」を左寄せ（2026-09-26〜） */
.site-header__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; flex: 0 1 auto; min-width: 0; }
.site-header__row { display: flex; align-items: center; gap: var(--s-4); }
.site-header__logo svg { display: block; }
.site-header__tagline {
  margin: 0; min-width: 0;
  font-size: .6rem; font-weight: 700; line-height: 1.45; letter-spacing: .02em; white-space: nowrap;
  color: var(--ink-70);
}
.site-header__full { color: var(--ink); display: flex; } /* logo-plus-over-the-top.svg */
.site-header__full svg { height: 9px; width: auto; }
@media (max-width: 359px) { .site-header__tagline { display: none; } }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: clamp(.75rem, 2.4vw, 1.75rem); align-items: center; }
.site-nav a {
  font-family: var(--font-display); /* Poppins SemiBold 14px（2026-09-25〜、&SMART のメニューに合わせた） */
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--ink-70);
  padding: .35em 0;
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }

.nav-toggle { display: none; }

/* ---- モバイルナビ -------------------------------------------------- */
@media (max-width: 799px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; cursor: pointer; color: var(--ink);
  }
  .nav-toggle__box { position: relative; width: 22px; height: 14px; }
  .nav-toggle__bar,
  .nav-toggle__bar::before,
  .nav-toggle__bar::after {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: currentColor; transition: transform .28s var(--ease), opacity .2s;
  }
  .nav-toggle__bar { top: 50%; transform: translateY(-50%); }
  .nav-toggle__bar::before { content: ""; top: -6px; }
  .nav-toggle__bar::after  { content: ""; top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(90deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { opacity: 0; }

  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden;
    transition: max-height .32s var(--ease);
  }
  .site-nav.is-open { max-height: 80vh; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) var(--gutter) var(--s-6); }
  .site-nav li { border-bottom: 1px solid var(--line); }
  .site-nav a { display: block; padding: 1em 0; font-size: 1rem; }
  .site-nav a[aria-current="page"] { box-shadow: none; }
}

/* ---- フッタ ------------------------------------------------------- */
/* 波の境目は meijicooker.com のフッタが参考（2026-09-24）。波はフッタと同じ色の SVG を横に流している。背景は 2026-09-26 に水色 #dbe8ee → 白 */
.site-footer {
  --footer-bg: #fff;
  position: relative;
  margin-top: calc(var(--s-12) + 60px); /* 60px＝波の最大の高さ（フッタの上にはみ出して描く） */
  padding: var(--s-12) 0 var(--s-12);
  background: var(--footer-bg);
  color: var(--ink); /* 2026-09-26 に紺 #104070 → 黒（andsmart と同じく文字もロゴも同じ色） */
}
.site-footer__wave {
  position: absolute; left: 0; bottom: calc(100% - 1px); /* 1px 重ねて継ぎ目の隙間を防ぐ */
  display: block; width: 100%;
  height: 15vh; min-height: 30px; max-height: 60px;
  pointer-events: none;
}
.site-footer__wave use {
  fill: var(--footer-bg);
  animation: footer-wave 10s cubic-bezier(.55, .5, .45, .5) infinite;
}
@keyframes footer-wave {
  from { transform: translate3d(-90px, 0, 0); }
  to   { transform: translate3d(85px, 0, 0); }   /* 波1周期ぶん＝つなぎ目なくループ */
}
.site-footer__inner {
  display: grid; gap: var(--s-8);
}
/* 左：+PLUS → サイト紹介文 → +PLUS Partner → パートナー企業のロゴ（ラネット・Hakuhodo DY ONE）／右下：Luidee（2026-09-26〜） */
.site-footer__main { display: grid; gap: var(--s-6); justify-items: start; }
.site-footer__brand { color: var(--ink); } /* フッタのロゴ3つ（+PLUS / Luidee / +PLUS Partner）は黒（2026-09-25〜） */
.site-footer__brand svg { display: block; height: 24px; width: auto; }
.site-footer__about { max-width: 46em; font-size: .82rem; line-height: 1.95; color: var(--ink-70); }
.site-footer__about p { margin: 0; }
.site-footer__about .site-footer__about-lead { margin-bottom: var(--s-2); font-weight: 700; font-size: .9rem; color: var(--ink); }
.site-footer__partners { display: grid; gap: var(--s-3); justify-items: start; margin-top: var(--s-2); }
.site-footer__luidee, .site-footer__partner-title { display: block; line-height: 0; color: var(--ink); }
.site-footer__luidee, .site-footer__partners a { transition: opacity .2s; }
.site-footer__luidee:hover, .site-footer__partners a:hover { opacity: .7; text-decoration: none; }
.site-footer__luidee svg { height: 36px; width: auto; } /* 2026-09-25 に 24px → 150% */
.site-footer__partner-title svg { height: 12.29px; width: auto; } /* 2026-09-25 に 19.2px → 15.36px、2026-09-26 にさらに 80% */
.site-footer__partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5, 1.25rem); }
.site-footer__partner-logos a, .site-footer__partner-logos img { display: block; width: auto; }
.site-footer__partner-logos .is-ranet    { height: 38.4px; } /* 2026-09-25 に 48px → 80% */
.site-footer__partner-logos .is-hakuhodo { height: 32px; }
/* 右下（.site-footer__corp）：Luidee ロゴ／その下にテキストリンク（運営会社・プライバシーポリシー）と ©。andsmart.net のフッタと同じ並び（2026-09-26〜） */
.site-footer__corp { display: grid; gap: var(--s-4); justify-items: start; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) 2.75rem; font-size: .75rem; color: var(--ink); }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--s-2) 2rem; margin: 0; padding: 0; list-style: none; }
.site-footer__legal-links a { color: var(--ink); }
.site-footer__legal-links a:hover { text-decoration: underline; text-underline-offset: .25em; }
.site-footer__copy { font-family: var(--font-display); font-size: inherit; letter-spacing: .01em; }

@media (min-width: 800px) {
  .site-footer__inner { grid-template-columns: 1fr auto; column-gap: var(--s-12); }
  .site-footer__corp { align-self: end; justify-items: end; }
}

/* ---- bare ページ（ヘッダ／フッタ無しの単独ページ。/info/ 等） ---- */
body.bare { background: var(--paper-2); }
body.bare main { min-height: 100dvh; display: flex; align-items: flex-start; }
body.bare .section {
  width: 100%;
  padding-block: clamp(2rem, 8vh, 4.5rem);
}
body.bare .section > .wrap {
  max-width: 34rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.6rem, 5vw, 2.75rem);
}
@media (min-width: 40rem) {
  body.bare main { align-items: center; }
}

/* ---- 準備中スプラッシュ（本番トップのみ） -------------------------- */
body.bare .section > .wrap.coming-soon { max-width: 38rem; }
.coming-soon__brand { text-align: center; margin-bottom: var(--s-8); }
.coming-soon__brand svg { height: 30px; width: auto; margin: 0 auto; color: var(--ink); }
.coming-soon__headline {
  font-size: clamp(1.15rem, 4vw, 1.4rem);
  line-height: 1.55;
  margin-bottom: var(--s-4);
}
.coming-soon__when {
  text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  letter-spacing: .04em; color: var(--ink-70);
  margin-bottom: var(--s-6);
}
.coming-soon__lead { color: var(--ink-70); font-size: .92rem; margin-bottom: var(--s-8); }
.coming-soon__features {
  text-align: center;
  display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none;
}
.coming-soon__features li { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.coming-soon__features li:first-child { padding-top: 0; border-top: 0; }
.coming-soon__features strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: .92rem; margin-bottom: .3em;
}
.coming-soon__features span { display: block; color: var(--ink-70); font-size: .85rem; }
.coming-soon__family { display: flex; justify-content: flex-end; margin: var(--s-8) 0 0; }
.coming-soon__family svg { height: 13px; width: auto; color: var(--ink-50); }

/* ---- セクション見出し（汎用） ------------------------------------- */
.section { padding-block: var(--s-16); }
.section__head { margin-bottom: var(--s-8); }
.section__title {
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  margin-top: var(--s-2);
}

/* ---- ページ本文（テキスト主体のセクションページ） ---------------- */
.prose h2 { font-size: clamp(1.3rem, 4vw, 1.7rem); margin: var(--s-12) 0 var(--s-4); }
.prose h3 { font-size: 1.1rem; margin: var(--s-8) 0 var(--s-3); }
.prose a  { text-decoration: underline; text-underline-offset: .18em; }

/* ---- 会社概要などの key:value 一覧（/ccig/ 等） -------------------- */
.facts {
  margin: var(--s-4) 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper);
}
.facts > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
}
.facts > div + div { border-top: 1px solid var(--line); }
.facts dt { font-weight: 700; font-size: .85rem; color: var(--ink-70); }
.facts dd { margin: 0; font-size: .9rem; }

/* ---- bento グリッド（トップのタイル・一覧に流用） ---------------- */
.bento {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
.card {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
a.card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.card__label {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.05rem; letter-spacing: .02em;
}
.card__label svg { height: 15px; width: auto; color: var(--ink); }
.card__desc { font-size: .85rem; color: var(--ink-70); margin: 0; }
.card__more { margin-top: auto; font-size: .75rem; letter-spacing: .1em; color: var(--ink-50); font-family: var(--font-display); }

@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .bento .card--wide { grid-column: 1 / -1; }
}

/* ---- ボタン ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  letter-spacing: .04em;
  padding: .85em 1.6em;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  transition: transform .2s var(--ease), opacity .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }

/* =========================================================================
   トップページ（構成は PLUSサイト構成260921.pdf、見た目は姉妹サイト &SMART 準拠）
   ★（試してから戻すか判断する項目）は下の2変数だけで戻せる：
     --home-bg … 背景の薄いグレー（戻すなら var(--paper)）
     --img-r   … 画像の角丸（戻すなら 0）
   ========================================================================= */
body.home, body.opc-rich, body.ccig-rich, body.plus-rich, body.tour-page, body.radio-page {
  --home-bg: #efefed;
  --img-r: 10px;
  --home-w: 960px;
  background: var(--home-bg);
}

.home-wrap { max-width: var(--home-w); margin-inline: auto; padding-inline: var(--gutter); }
.home-block { padding-block: var(--s-6); scroll-margin-top: var(--header-h); }

/* ヒーロー（トップ最上部のスライド。2026-09-25〜、brutus.jp のマストヘッドが参考）
   動画・画像そのものが「吹き出し」：画面幅いっぱいの帯＋下中央のとがり（brutus と同じ形）の形に mask で切り抜き、
   とがりの中まで画像が続く。スライドごとの色（--hero-color）は吹き出しの地色（切替のフェード中に見える）と下の操作部に使う。 */
.hero-band {
  --hero-h: clamp(300px, 56.25vw, min(72vh, 680px)); /* 帯の高さ（とがりを除く）。PC は 16:9、画面の高さで頭打ち */
  --hero-tail-w: 80px;
  --hero-tail-h: 40px;
  --hero-inset: max(var(--gutter), calc((100% - var(--home-w)) / 2 + var(--gutter))); /* 文字を本文の左端に揃える */
  margin-bottom: var(--s-8);
}
.hero-band__slides {
  display: grid;
  height: calc(var(--hero-h) + var(--hero-tail-h));
  background-color: var(--hero-color);
  transition: background-color .6s var(--ease);
  /* mask は見た目だけでクリック範囲は四角のまま残る（とがりの左右の見えない所がリンクになり、下の操作部を覆う）。
     clip-path はクリック範囲も切るので、帯＋とがりを覆う三角形で切っておく（見た目の形は mask が決める） */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hero-tail-h)),
    calc(50% + var(--hero-tail-w) / 2) calc(100% - var(--hero-tail-h)), 50% 100%,
    calc(50% - var(--hero-tail-w) / 2) calc(100% - var(--hero-tail-h)), 0 calc(100% - var(--hero-tail-h)));
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--hero-tail-h) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M38.7868 8.7868C44.4129 3.16071 52.0435 0 60 0H0C7.95649 0 15.5871 3.16071 21.2132 8.7868C26.8393 14.4129 30 22.0435 30 30C30 22.0435 33.1607 14.4129 38.7868 8.7868Z'/%3E%3C/svg%3E") bottom center / var(--hero-tail-w) var(--hero-tail-h) no-repeat;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--hero-tail-h) + 1px) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath d='M38.7868 8.7868C44.4129 3.16071 52.0435 0 60 0H0C7.95649 0 15.5871 3.16071 21.2132 8.7868C26.8393 14.4129 30 22.0435 30 30C30 22.0435 33.1607 14.4129 38.7868 8.7868Z'/%3E%3C/svg%3E") bottom center / var(--hero-tail-w) var(--hero-tail-h) no-repeat;
}
/* キャプション（タグ・タイトル・説明）は画像の左下に重ねる（brutus.jp 風）。
   文字色は画像の明るさで反転：data-tone="light"（明るい画像）＝黒文字＋白いぼかし、"dark"（暗い画像・既定）＝白文字＋黒いぼかし。
   data-tone は main.js が画像の左下の明るさを測って付ける（$TOP_HERO の 'tone' で手動固定も可）。 */
.hero-slide { grid-area: 1 / 1; min-height: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide {
  --tone-ink: #fff;
  --tone-sub: rgba(255, 255, 255, .85);
  --tone-scrim: rgba(0, 0, 0, .55);
  --tone-scrim-edge: rgba(0, 0, 0, .3); /* とがりの先端側は薄く（映像が透けて、とがりの形が見えるように） */
}
.hero-slide[data-tone="light"] {
  --tone-ink: var(--ink);
  --tone-sub: var(--ink-70);
  --tone-scrim: rgba(255, 255, 255, .72); /* 真っ白にすると吹き出しの下端がページの地に溶けるので少し透かす */
  --tone-scrim-edge: rgba(255, 255, 255, .25);
}
.hero-slide__link { position: relative; display: block; height: 100%; color: var(--tone-ink); }
.hero-slide__link:hover { text-decoration: none; }
.hero-slide__media { position: relative; height: 100%; overflow: hidden; }
.hero-slide__video { position: absolute; inset: 0; opacity: 0; } /* 複数の動画は重ねて、再生中の1本（.is-on）だけ見せる */
.hero-slide__video.is-on { opacity: 1; }
/* 映像の左上に重ねるロゴ（$TOP_HERO の logo。2026-09-26〜 02 の CCIG ロゴ）。画像に焼き込むと、画面の縦横比によって左上が切り抜かれて見切れるため。
   左端はキャプションと同じ位置（ロゴの SVG はガイドラインの余白込みなので、その分だけ左へ寄せて見た目の端をそろえる） */
.hero-slide__media .hero-slide__logo { /* .hero-slide__media img（枠いっぱい）に勝つよう2クラスで指定 */
  position: absolute; z-index: 1;
  top: clamp(.5rem, 2.5vw, 1.75rem); left: calc(var(--hero-inset) - clamp(20px, 3vw, 38px));
  width: clamp(130px, 18vw, 250px); height: auto;
}
/* 動画の上にポップさせる「+PLUS」ロゴ（$TOP_HERO の pops。2026-09-26〜）。位置は映像の枠に対する %、大きさも枠の幅に比例。
   出方：小さい状態から浮き上がりながら大きくなる（0.7 秒）→ 1 秒そのまま → 1 秒かけてゆっくり消える（出ている時間は POP_HOLD） */
.hero-pop {
  position: absolute; left: var(--x); top: var(--y); z-index: 1;
  width: clamp(63px, 12.75%, 188px); /* 2026-09-26 に clamp(84px, 17%, 250px) の 75% に */
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
}
.hero-pop svg { display: block; width: 100%; height: auto; }
.hero-pop.is-on  { animation: hero-pop-in .7s cubic-bezier(.22, 1, .36, 1) both; }
.hero-pop.is-off { animation: hero-pop-out 1s ease-in-out both; }
@keyframes hero-pop-in {
  0%   { transform: translate(-50%, calc(-50% + 1.6em)) scale(.3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1);                 opacity: 1; }
}
@keyframes hero-pop-out {
  from { transform: translate(-50%, -50%) scale(1);                 opacity: 1; }
  to   { transform: translate(-50%, calc(-50% - .6em)) scale(1);    opacity: 0; }
}
.hero-slide__media img,
.hero-slide__media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.hero-slide__link:hover .hero-slide__media img:not(.hero-slide__logo) { transform: scale(1.02); }
.hero-slide__body {
  /* ぼかしはとがりの先端まで伸ばす（帯の下端で切ると、とがりだけ生の映像になって色が変わって見える）。文字はとがりの上に置く */
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(2.5rem, 10vw, 7rem) var(--hero-inset) calc(clamp(1rem, 3vw, 2.25rem) + var(--hero-tail-h));
  /* 一続きのグラデーション：とがりの先端は薄く → 文字の下で最も濃く → 上に向かって透明（帯ととがりの境目で色が切り替わらない） */
  background: linear-gradient(to top, var(--tone-scrim-edge) 0, var(--tone-scrim) calc(var(--hero-tail-h) + 1.5rem), var(--tone-scrim) 42%, transparent 100%);
  transition: opacity .4s var(--ease);
}
/* 右下に置くスライド（$TOP_HERO の align => 'right'）：文字は右半分、ぼかしは右下の角から */
.hero-slide[data-align="right"] .hero-slide__body {
  padding-left: 34%;
  background: radial-gradient(90% 120% at 100% 100%, var(--tone-scrim) 0%, var(--tone-scrim) 40%, transparent 80%);
}
@media (min-width: 800px) { .hero-slide[data-align="right"] .hero-slide__body { padding-left: 48%; } }
.js .hero-slide:not([data-tone]) .hero-slide__body { opacity: 0; } /* 明るさの判定が済むまで出さない（色のちらつき防止） */
.hero-slide__body .cat { background: var(--paper); color: var(--ink); }                   /* 暗い画像：白地のタグ */
.hero-slide[data-tone="light"] .hero-slide__body .cat { background: var(--ink); color: var(--paper); } /* 明るい画像：黒地のタグ */
/* ヒーローの画像に重ねる文字（見出し・説明）は「コーポレート・ロゴ ver3」（2026-10-05〜。SIL OFL 1.1、assets/fonts/Corporate-Logo-OFL.txt）。
   ヒーローで使う文字＋かな・英数字だけに絞った WOFF2（各 70KB 弱）。ヒーローの文言を変えたら作り直す（手順は CLAUDE.md）。足りない字は本文の書体で出る */
@font-face { font-family: "Corporate Logo Hero"; src: url("../fonts/corporate-logo-bold-hero.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Corporate Logo Hero"; src: url("../fonts/corporate-logo-medium-hero.woff2") format("woff2"); font-weight: 500; font-display: swap; }
.hero-slide__title {
  max-width: 30em;
  font-family: "Corporate Logo Hero", var(--font-body); font-weight: 700;
  /* 文字の見出しの大きさは、ロゴタイプの見出し（下の --svg 版、幅 clamp(240px, 42vw, 560px) 基準）と同じ伸び縮みにする＝03 の文字の高さとそろう（2026-10-05。
     それまでの clamp(1.05rem, 2.8vw, 2rem) だと PC で 03 より 15% ほど小さかった）。.0696＝03 の字の高さ ÷ この書体の漢字の高さ（0.95em）÷ 前半の倍率 1.12 */
  font-size: calc(clamp(240px, 42vw, 560px) * .0696); line-height: 1.45;
  margin: var(--s-2) 0 0;
}
.hero-slide__title--svg { line-height: 0; margin-top: var(--s-3); } /* 見出しがロゴタイプのスライド（$TOP_HERO の title_svg） */
.hero-slide__title--svg svg { display: block; max-width: 100%; height: auto; width: calc(var(--svg-w, 637) / 637 * clamp(240px, 42vw, 560px)); } /* PDF 上の幅に比例（+PLUS プロジェクト始まる＝637 が基準） */
/* マウスを乗せても見出しに下線は出さない（2026-10-05 ユーザー指示） */
.hero-slide__title-lead, .hero-slide__title-rest { display: inline-block; } /* 前半・後半のかたまりで折り返す */
.hero-slide__title-lead { font-size: 1.12em; }  /* 見出しの前半を少し大きく（$TOP_HERO の title_lead） */
.hero-slide__title-rest { font-size: .9em; }
.hero-slide__summary {
  font-family: "Corporate Logo Hero", var(--font-body); font-weight: 500;
  display: none; max-width: 40em;
  margin: var(--s-2) 0 0; font-size: .85rem; line-height: 1.75; color: var(--tone-sub);
}
/* 説明文の2行目が数文字だけになるスライド（$TOP_HERO の summary_wide。2026-10-05〜 02・04）：幅の上限を外して1行に。入りきらない幅では行の長さをそろえて折り返す */
.hero-slide__summary--wide { max-width: none; text-wrap: balance; word-break: auto-phrase; } /* auto-phrase＝文節の切れ目で折り返す（Chrome・Edge。他は従来どおり） */
@media (min-width: 640px) {
  .hero-slide__summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 操作部は吹き出しの下（ページの地の上）。色はスライドごとの --hero-color。PC はとがりの横に並べる */
.hero-band__ui { position: relative; z-index: 2; width: fit-content; display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); color: var(--ink); }
@media (min-width: 800px) { .hero-band__ui { margin-top: calc(var(--s-3) - var(--hero-tail-h)); } }
.hero-band__btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--hero-color);
  background: transparent; color: var(--hero-color); font-size: .95rem; cursor: pointer;
  transition: background-color .2s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.hero-band__btn:hover { background: var(--hero-color); color: #fff; }
.hero-band__count {
  margin: 0; display: flex; align-items: center; gap: .8em;
  font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .08em;
}
.hero-band__bar { position: relative; width: 64px; height: 2px; overflow: hidden; background: var(--line-2); }
.hero-band__bar > span { position: absolute; inset: 0; background: var(--hero-color); transform-origin: left; transform: scaleX(0); transition: transform .1s linear, background-color .6s var(--ease); }

/* 枠の見出し：マーク＋英字＋ ›› 日本語、上下に罫線 */
.home-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3em 1.1em;
  padding-block: var(--s-4);
  margin-bottom: var(--s-8);
  border-block: 1px solid var(--line-2);
}
.home-head__title {
  display: flex; align-items: center; gap: .5em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.25rem, 4vw, 1.6rem); letter-spacing: .08em; line-height: 1;
}
.home-head__mark { width: .72em; height: .72em; flex: 0 0 auto; }
.home-head__sub { font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.home-head__sub::before { content: "›› "; letter-spacing: -.1em; margin-right: .3em; }

/* カテゴリラベル（黒地・角なし） */
.cat {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-weight: 600;
  font-size: .66rem; letter-spacing: .1em; line-height: 1;
  padding: .5em .85em;
  background: var(--ink); color: var(--paper);
}
.cat--inv { background: var(--paper); color: var(--ink); }

/* 記事カード */
.post { display: grid; gap: var(--s-4); align-content: start; color: inherit; } /* 上詰め：並んだカードの高さがそろえられても、画像の下の文字の位置（日付の高さ）がずれない */
a.post:hover { text-decoration: none; }
a.post:hover .post__title { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.post__img {
  overflow: hidden; /* flex/grid 内で aspect-ratio を守る（Chrome 対策） */
  aspect-ratio: 3 / 2;
  border-radius: var(--img-r);
  background: var(--line);
}
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.post:hover .post__img img { transform: scale(1.035); }
.post__body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.post__date { font-family: var(--font-display); font-size: .72rem; color: var(--ink-50); letter-spacing: .04em; margin-bottom: var(--s-2); }
.post__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: 1.05rem; line-height: 1.55; letter-spacing: .01em;
  margin: var(--s-3) 0 var(--s-2);
}
.post__excerpt { margin: 0; font-size: .8rem; line-height: 1.75; color: var(--ink-50); }


.post--row { grid-template-columns: 38% 1fr; gap: var(--s-4); align-items: center; }
.post--row .post__title { font-size: .95rem; margin-top: var(--s-2); }
.post--row .post__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.home-pickup { display: grid; gap: var(--s-12); }
.home-list > li { padding-block: var(--s-6); }
.home-list > li:first-child { padding-top: 0; }
.home-list > li + li { border-top: 1px solid var(--line-2); }
.home-more { margin: var(--s-6) 0 0; text-align: right; font-size: .82rem; font-weight: 700; }

/* OPC LP PR枠（固定）。2026-09-26〜 新しい LP（未公開）のファーストビューの色味：白〜淡いティールの面に CCIG ブルーの強調と青いグラデのボタン。
   角は四角（他の枠と差をつける）。左＝キャッチコピー、右＝カード（900px 未満は縦積み） */
.pr {
  --pr-ink: #00100E;   /* LP の --ink */
  --pr-text: #354341;  /* LP の --text */
  --pr-blue: #100ACE;  /* LP の --cta＝CCIG ブルー */
  --pr-blue-2: #3662D9;
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid var(--pr-blue); /* 2026-09-26〜 青い細線の枠 */
  background:
    radial-gradient(110% 70% at 95% 0%, rgba(42, 171, 159, .16) 0%, transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(42, 171, 159, .10) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F3FAF9 100%);
  color: var(--pr-text);
}
a.pr:hover { text-decoration: none; }
.pr__body { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-8) var(--s-6) var(--s-4); }
.pr__logo { margin: 0; line-height: 0; }
.pr__logo img { /* CCIG ロゴ（スローガン無し）。SVG はガイドラインの余白込みなので、その分だけ左上へ寄せて文字の左端とそろえる */
  --lw: clamp(120px, 14vw, 150px);
  display: block; width: var(--lw); height: auto;
  margin: calc(var(--lw) * -.046) 0 calc(var(--lw) * -.042) calc(var(--lw) * -.064); /* 余白＝上 13・下 12・左 18（viewBox 283.46 幅に対して） */
}
.pr .cat { font-size: .792rem; background: var(--pr-blue); color: #fff; } /* PR マーク：通常のタグ（.66rem）の 120%・CCIG ブルー地（2026-09-26〜） */
.pr__mark { position: absolute; top: 0; left: 0; z-index: 1; } /* 枠の左上の角にくっつける */
.pr__em { color: var(--pr-blue); }
.pr__campaign { margin: var(--s-2) 0 0; font-weight: 700; font-size: clamp(1.25rem, 3.2vw, 1.6rem); line-height: 1.4; letter-spacing: .03em; color: var(--pr-ink); }
.pr__campaign span { display: inline-block; }
.pr__title { margin: var(--s-4) 0 0; font-weight: 700; line-height: 1.15; color: var(--pr-ink); }
.pr__lead { display: block; margin-bottom: .35em; font-size: 1rem; font-weight: 500; line-height: 1.6; color: var(--pr-text); }
.pr__amount { display: block; color: var(--pr-blue); }
.pr__num { font-size: clamp(3.4rem, 9vw, 4.4rem); letter-spacing: -.01em; }
.pr__unit { font-size: clamp(1.4rem, 3.4vw, 1.65rem); }
.pr__get { display: block; margin-top: .3em; font-size: clamp(1.5rem, 3.8vw, 1.8rem); }
.pr__cta { /* LP の CTA と同じ：青のグラデ＋白い縁＋青い影、ホバーで 2px 沈む */
  position: relative;
  margin-top: var(--s-6);
  padding: .95em 3em .95em 2em;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em; line-height: 1.4;
  background: linear-gradient(105deg, var(--pr-blue) 0%, var(--pr-blue-2) 100%); color: #fff;
  border: 3px solid #fff; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(16, 10, 206, .30);
  transition: transform .2s, box-shadow .2s;
}
.pr__cta::after { content: ""; position: absolute; right: 1.3em; top: 50%; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translateY(-50%) rotate(45deg); }
a.pr:hover .pr__cta { transform: translateY(2px); box-shadow: 0 2px 8px rgba(16, 10, 206, .30); }
.pr__img { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); padding: var(--s-6) var(--s-6) 2.5rem; }
/* カードの上に Apple Pay・Google Pay のマーク（2026-09-26〜。assets/img/pay/。どちらも公式素材を同じ高さで） */
.pr__pay { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.pr__pay img { display: block; height: clamp(30px, 3.2vw, 40px); width: auto; }
.pr__card { /* LP と同じく少し傾けて影を付ける */
  width: min(78%, 360px); height: auto;
  border-radius: 3.2% / 4.9%; /* 影をカードの角丸に沿わせる（画像の角は透過済み。半径 66px／2095×1349 に合わせて楕円で指定） */
  transform: rotate(-4deg);
  box-shadow: 0 14px 30px rgba(0, 16, 14, .14), 0 2px 6px rgba(0, 16, 14, .06);
  transition: transform .6s var(--ease);
}
a.pr:hover .pr__card { transform: rotate(-2deg) translateY(-4px); }

@media (min-width: 900px) { /* 横並びは 900px から */
  .pr { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .pr__body { justify-content: center; padding: var(--s-12) var(--s-8) var(--s-12) var(--s-12); }
  .pr__img { padding: var(--s-8) var(--s-12) var(--s-8) var(--s-4); }
  .pr__card { width: min(100%, 380px); }
}

/* PODCAST枠 */
.podcast-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--s-6);
  background: var(--paper);
  border-radius: var(--img-r);
}
.podcast-card .post__title a:hover { text-underline-offset: .2em; }

@media (min-width: 720px) {
  .home-block { padding-block: var(--s-8); }
  .home-pickup { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .post--row { grid-template-columns: 300px 1fr; gap: var(--s-8); }
  .post--row .post__title { font-size: 1.15rem; }
}

/* =========================================================================
   ガイドページ共通（/opc/ 用に作成。命名は汎用なので他セクションのガイドにも流用可）
   ========================================================================= */

/* ---- パンくず ---------------------------------------------------- */
.breadcrumb {
  max-width: var(--wrap); margin-inline: auto;
  padding: var(--s-4) var(--gutter) 0;
  font-size: .72rem; color: var(--ink-50);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .35em .6em; }
.breadcrumb li { display: flex; gap: .6em; align-items: center; }
.breadcrumb li + li::before { content: "/"; color: var(--line-2); }
.breadcrumb a { color: var(--ink-50); }
.breadcrumb a:hover { color: var(--ink); text-decoration: none; }
.breadcrumb [aria-current="page"] { color: var(--ink-70); }

/* ---- ガイド hero ----------------------------------------------- */
/* /report/ 配下のページ上部・左上の「+PLUS レポート」ロゴ（includes/report-mark.php） */
.report-mark { padding-top: var(--s-6); }
.report-mark--wide { max-width: var(--home-w); }
.report-mark__logo { margin: 0; line-height: 0; color: var(--ink); }
.report-mark__logo svg { height: 22px; width: auto; }
/* PR 表記（2026-10-02〜。opc-head.php の $OPC_PR。/about/account/）：hero の上の黒い帯＋hero の説明の下の一文 */
.pr-label { padding-top: var(--s-6); }
.pr-label--wide { max-width: var(--home-w); }
.pr-label p { margin: 0; padding: .7em 1em; background: var(--ink); color: #fff; font-size: .85rem; font-weight: 700; text-align: center; letter-spacing: .02em; }
.pr-note { margin-top: var(--s-3); font-size: .78rem; color: var(--ink-50); }
.guide-hero { padding-block: var(--s-6) var(--s-8); }
.guide-hero__title {
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  line-height: 1.3;
  margin: var(--s-2) 0 var(--s-4);
}
.guide-hero__lead { color: var(--ink-70); font-size: clamp(.9rem, 2.6vw, 1rem); margin: 0; }
.guide-hero .guide-figure { margin-top: var(--s-6); }

/* ---- ガイド本文 ---------------------------------------------- */
.guide-body { padding-bottom: var(--s-8); }
.guide-section { padding-block: var(--s-8); border-top: 1px solid var(--line); }
.guide-section:first-child { border-top: 0; }
.guide-section > h2 {
  font-size: clamp(1.15rem, 3.6vw, 1.45rem);
  margin-bottom: var(--s-4);
}
.guide-section > h2::before {
  content: ""; display: inline-block;
  width: .5em; height: .5em; margin-right: .55em; vertical-align: .12em;
  background: var(--ink);
}

/* ---- 未確定プレースホルダ ------------------------------------ */
.is-todo {
  color: var(--ink-50);
  background: var(--paper-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  font-size: .9rem;
}
.is-todo__note {
  display: block; margin-top: .35em;
  font-size: .78rem; color: var(--ink-50);
}

/* ---- 画像プレースホルダ／実画像 ---------------------------- */
.guide-figure { margin: var(--s-4) 0 0; }
.guide-figure img { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line); }
.guide-figure figcaption { margin-top: var(--s-2); font-size: .76rem; color: var(--ink-50); }
.guide-figure--ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2); text-align: center;
  min-height: 160px; padding: var(--s-6);
  background: repeating-linear-gradient(-45deg, var(--paper-2) 0 10px, #eeede9 10px 20px);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
}
.guide-figure--ph.guide-figure--step { min-height: 120px; }
.guide-figure__tag {
  font-family: var(--font-display); font-weight: 600; font-size: .68rem;
  letter-spacing: .14em; color: var(--ink-50);
  background: var(--paper); border: 1px solid var(--line-2);
  padding: .2em .7em; border-radius: 999px;
}
.guide-figure__note { font-size: .8rem; color: var(--ink-70); max-width: 30em; }

/* ---- 手順（ステップ） -------------------------------------- */
.guide-steps { counter-reset: step; margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.guide-step {
  counter-increment: step;
  display: grid; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
}
.guide-step__text h3 {
  font-size: 1rem; margin: 0 0 var(--s-2);
  display: flex; align-items: baseline; gap: .6em;
}
.guide-step__text h3::before {
  content: counter(step);
  flex: 0 0 auto;
  font-family: var(--font-display); font-size: .8rem; font-weight: 600;
  width: 1.8em; height: 1.8em; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border-radius: 999px;
}
.guide-step .is-todo { margin: 0; }
.guide-step .guide-figure { margin: 0; }

@media (min-width: 640px) {
  .guide-step { grid-template-columns: 1fr 220px; align-items: start; }
}

/* ---- 前後ナビ／戻る ---------------------------------------- */
.guide-pager {
  display: grid; gap: var(--s-3);
  margin-top: var(--s-12);
}
.guide-pager__link {
  display: flex; flex-direction: column; gap: .3em;
  padding: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
a.guide-pager__link:hover { text-decoration: none; border-color: var(--line-2); transform: translateY(-2px); }
.guide-pager__link.is-empty { border: 0; padding: 0; }
.guide-pager__dir { font-family: var(--font-display); font-size: .72rem; letter-spacing: .08em; color: var(--ink-50); }
.guide-pager__link--next { text-align: right; }
.guide-pager__title { font-size: .9rem; font-weight: 500; }
.guide-backlink { margin-top: var(--s-6); font-size: .85rem; }
.guide-backlink a { text-decoration: underline; text-underline-offset: .18em; }

@media (min-width: 640px) {
  .guide-pager { grid-template-columns: 1fr 1fr; }
}

/* ---- ガイド一覧（hub） ------------------------------------- */
.guide-index-head { padding-block: var(--s-16) var(--s-8); }
.guide-index-head__lead { max-width: 40em; color: var(--ink-70); font-size: clamp(.9rem, 2.6vw, 1rem); }

.guide-featured { padding-top: 0; }
.guide-featured__card {
  display: grid; gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
a.guide-featured__card:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow); }
.guide-featured__title { font-size: clamp(1.2rem, 4vw, 1.6rem); margin: var(--s-2) 0 var(--s-3); }
.guide-featured__desc { color: var(--ink-70); font-size: .88rem; margin-bottom: var(--s-3); }
.guide-featured__card .guide-figure { margin: 0; }

@media (min-width: 720px) {
  .guide-featured__card { grid-template-columns: 1fr 300px; align-items: center; }
  .guide-featured__card .guide-figure--ph { min-height: 200px; height: 100%; }
}

.guide-group { padding-block: var(--s-12); }
.guide-group__lead { color: var(--ink-50); font-size: .85rem; margin: var(--s-2) 0 0; }
.guide-cards { counter-reset: guide; }
.guide-cards .card__label { font-size: .98rem; }

/* =========================================================================
   挿絵（includes/illust.php。KARTE のオンボーディング挿絵がお手本）
   配色はここの変数（と body.opc-rich の --accent*）だけで決まる。モノクロに寄せるならグレー系に。
   ========================================================================= */
.illust {
  --il-bg: #e2e2de;       /* 背面の円 */
  --il-accent: var(--accent-soft, #c2dfd9);   /* ブロブ・バー */
  --il-key: var(--accent, #3f9a8d);           /* チェック・ボタン・強調 */
  --il-line: #e4e4e0;     /* テキスト代わりの線 */
  --il-soft: #f4f4f2;     /* カード内の面 */
  display: block; width: 100%; max-width: 440px; height: auto;
  margin: var(--s-8) auto;
  font-family: var(--font-body);
}
.il-bg { fill: var(--il-bg); }
.il-blob { fill: var(--il-accent); }
.il-card { fill: #fff; }
.il-line { fill: var(--il-line); }
.il-soft { fill: var(--il-soft); }
.il-ink { fill: var(--ink); }
.il-key { fill: var(--il-key); }
.il-key-s { fill: none; stroke: var(--il-key); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.il-t { fill: var(--ink); font-weight: 700; }
.il-t-mute { fill: var(--ink-50); font-weight: 700; }
.il-t-key { fill: var(--il-key); font-weight: 700; }
.il-t-inv { fill: #fff; font-weight: 700; }

/* =========================================================================
   OPC ガイド・リッチ版（$bodyClass = 'opc-rich'。/opc/card/ から）
   CCIG の読み物ページも同じ型（$bodyClass = 'ccig-rich'。/report/ccig/about/）、サイト紹介も同じ（'plus-rich'。/about/）
   トーンはトップと同じ（body.home と共通の --home-bg / --img-r）＋挿絵。
   ========================================================================= */
body.opc-rich, body.ccig-rich, body.plus-rich, body.radio-page {
  --accent: #3f9a8d;       /* 挿絵と本文の強調色（チェック・番号・比較表） */
  --accent-soft: #c2dfd9;
  --accent-tint: #e7f3f0;
}
body.opc-rich .breadcrumb, body.ccig-rich .breadcrumb, body.plus-rich .breadcrumb { max-width: var(--home-w); }
body.opc-rich a.guide-pager__link, body.ccig-rich a.guide-pager__link, body.tour-page a.guide-pager__link { background: var(--paper); border-color: transparent; }

.guide-hero--illust { max-width: var(--home-w); display: grid; align-items: center; gap: 0 var(--s-8); padding-block: var(--s-8) var(--s-6); }
.guide-hero--illust .guide-hero__title { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.7rem, 5.6vw, 2.6rem); word-break: auto-phrase; text-wrap: balance; }
/* 見出し中のロゴ（$OPC_TITLE_LOGO）。ロゴの文字（one paretto）が見出しの文字と同じくらいの大きさに見える高さ */
.guide-hero__title-logo { display: inline-block; height: 1em; width: auto; margin: 0 .2em 0 .02em; vertical-align: -.25em; }   /* 支給の文字ロゴ（oneparetto_text.svg）。ベースライン（viewBox の高さの 75% の位置）を見出しにそろえる */
.guide-hero--illust .illust { margin: var(--s-6) auto 0; }
/* ヒーローのロゴ（$CCIG_HERO_LOGO）。CCIG ロゴ（スローガン小横組）はガイドライン上 最小幅170px。SVG は余白込みなので左の余白ぶん少し引く */
.guide-hero__logo { margin: 0 0 var(--s-2) -.6rem; }
.guide-hero__logo img { width: clamp(180px, 40vw, 240px); height: auto; }
/* ブランドロゴのパネル（/report/ccig/about/）：ロゴは白背景に置く（CI ガイドライン） */
.brand-panel { margin: var(--s-8) 0; padding: var(--s-6) var(--s-6) var(--s-8); background: var(--paper); border-radius: var(--img-r); text-align: center; }
.brand-panel img { width: min(100%, 380px); min-width: 180px; height: auto; margin: 0 auto; }
.brand-panel figcaption { max-width: 34em; margin: var(--s-2) auto 0; font-size: .82rem; color: var(--ink-70); line-height: 1.8; }
@media (min-width: 800px) {
  .guide-hero--illust { grid-template-columns: 1.1fr 1fr; }
  .guide-hero--illust .illust { margin: 0; justify-self: end; }
}

.panel { background: var(--paper); border-radius: var(--img-r); padding: var(--s-6); }
.panel__title { font-weight: 700; margin: 0 0 var(--s-2); }
.panel p:last-child { margin-bottom: 0; }

.toc { margin-block: var(--s-4) var(--s-8); }
.toc ol { counter-reset: toc; display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .toc ol { grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-8); } }
.toc li { counter-increment: toc; display: flex; gap: .7em; font-size: .9rem; }
.toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: var(--ink-50); padding-top: .15em; }
.toc a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line-2); }
.toc a:hover { text-decoration-color: var(--ink); }

.rich-sec { padding-block: var(--s-12); border-top: 1px solid var(--line-2); scroll-margin-top: var(--header-h); }
.pr-foot { padding-block: var(--s-12); border-top: 1px solid var(--line-2); } /* 記事の下に置く PR 枠（/report/ccig/about/・office/・/about/plus/） */
.rich-sec__no {
  display: flex; align-items: baseline; gap: .8em; margin: 0 0 var(--s-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1;
}
.rich-sec__no span { font-size: .7rem; letter-spacing: .16em; color: var(--ink-50); }
.rich-sec h2 { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.4rem, 4.4vw, 1.85rem); margin: 0 0 var(--s-6); word-break: auto-phrase; text-wrap: balance; }   /* 長い見出しで最後の1文字だけ次の行に落ちないように */
.rich-sec h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; margin: var(--s-12) 0 var(--s-4); }
.rich-sec h3::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .55em; vertical-align: .12em; background: var(--ink); }
.rich-lead { font-size: clamp(1rem, 2.8vw, 1.1rem); font-weight: 700; line-height: 1.8; }
.rich-sec p strong { background: linear-gradient(transparent 62%, var(--accent-soft) 62%); }

.checks { display: grid; gap: var(--s-2); }
.checks li { position: relative; padding-left: 1.8em; }
.checks li::before {
  content: ""; position: absolute; left: .2em; top: .5em; width: .8em; height: .45em;
  border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg);
}

.tiles { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
.tiles p { font-size: .88rem; color: var(--ink-70); }
.tiles .panel__title { color: var(--ink); font-size: .98rem; }
.tiles .is-wide { grid-column: 1 / -1; }
/* ロゴを並べる白いパネル（/report/ccig/opc/card/ の 04：one paretto・Apple Pay・Google Pay）。Apple Pay・Google Pay の公式マークは同じ高さにそろえる */
.brand-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-4) var(--s-8); margin: var(--s-6) 0; padding: var(--s-6); background: var(--paper); border-radius: var(--img-r); }
.brand-logos img { display: block; height: clamp(34px, 5vw, 42px); width: auto; }
.brand-logos .brand-logos__op { height: clamp(40px, 6vw, 50px); }   /* マーク付きの横組。マークの上下の端までがこの高さ */
@media (max-width: 559px) { .brand-logos li:first-child { flex-basis: 100%; display: flex; justify-content: center; } }   /* スマホは one paretto を1段目、スマホ決済2つを2段目に */
.rich-sec h4 { font-weight: 700; font-size: 1rem; margin: var(--s-8) 0 var(--s-3); padding-left: .8em; border-left: 3px solid var(--accent); line-height: 1.5; }
.tag {
  display: inline-block; margin-bottom: var(--s-3);
  font-family: var(--font-display); font-weight: 700; font-size: .66rem; letter-spacing: .12em; line-height: 1;
  padding: .5em .85em; background: var(--ink); color: var(--paper);
}

.cautions { display: grid; gap: var(--s-3); }
.cautions li {
  position: relative; padding: var(--s-4) var(--s-4) var(--s-4) 3.2rem;
  background: var(--paper); border-radius: var(--img-r); font-size: .88rem; color: var(--ink-70);
}
.cautions li::before {
  content: "!"; position: absolute; left: var(--s-4); top: var(--s-4);
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: .8rem;
}
.cautions strong { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .2em; }
.flow + .cautions { margin-top: var(--s-6); } /* 番号付きの流れの直後に続くと白い箱がくっついて見える（2026-10-02 北國銀行の指摘） */

.table-scroll { overflow-x: auto; margin-top: var(--s-6); border-radius: var(--img-r); }
.compare { width: 100%; border-collapse: collapse; background: var(--paper); font-size: .76rem; line-height: 1.55; }
.compare th, .compare td { padding: .8em .4em; text-align: center; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  .compare { font-size: .85rem; }
  .compare th, .compare td { padding: .85em .9em; }
  .compare tbody th { white-space: nowrap; }
}
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font-weight: 700; font-size: .9rem; }
.compare tbody th { text-align: left; font-weight: 700; color: var(--ink-70); padding-left: .8em; }
.compare .is-key { background: var(--accent-tint); font-weight: 700; }
.compare thead .is-key { background: var(--accent); color: #fff; }
.note { margin-top: var(--s-3); font-size: .76rem; color: var(--ink-50); }

.flow { counter-reset: flow; display: grid; gap: var(--s-3); }
.flow li { counter-increment: flow; position: relative; padding-left: 4.2rem; }
.flow li::before {
  content: counter(flow); position: absolute; left: var(--s-6); top: var(--s-6);
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 999px;
  background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .85rem;
}
.flow p { font-size: .88rem; color: var(--ink-70); margin-bottom: var(--s-2); }
.flow .panel__title { color: var(--ink); font-size: .98rem; }
.flow a { display: inline-block; margin-right: var(--s-4); font-size: .82rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

.faq { display: grid; gap: var(--s-2); }
.faq details { background: var(--paper); border-radius: var(--img-r); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: var(--s-4) 3rem var(--s-4) var(--s-4); font-weight: 700; font-size: .95rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q."; font-family: var(--font-display); margin-right: .5em; color: var(--accent); }
.faq summary::after { content: "+"; position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 400; color: var(--ink-50); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 var(--s-4) var(--s-4); font-size: .88rem; color: var(--ink-70); }

.rich-cta {
  margin-top: var(--s-8); padding: var(--s-8) var(--s-6);
  background: var(--ink); color: var(--paper); border-radius: var(--img-r); text-align: center;
}
.rich-cta .rich-cta__title { color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem, 4vw, 1.6rem); margin-bottom: var(--s-2); }
.rich-cta p { font-size: .88rem; color: color-mix(in srgb, var(--paper) 78%, transparent); }
.rich-cta__btn {
  display: inline-block; margin-top: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: .85rem; letter-spacing: .04em;
  padding: .8em 1.6em; border: 1px solid var(--paper); border-radius: 999px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.rich-cta__btn:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.rich-quote {
  margin: var(--s-8) 0 0; padding: var(--s-6);
  background: var(--paper); border-left: 4px solid var(--accent); border-radius: var(--img-r);
  font-weight: 700; line-height: 1.9;
}
/* =========================================================================
   口座開設フロー（/about/account/。2026-09-30）
   手順ごとに「説明（左）＋申込画面のイメージ（右）」。画面イメージは includes/flow-mock.php の HTML/CSS（.fm-*）
   ========================================================================= */
.step-index { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 var(--s-8); }
.step-index a { display: inline-flex; align-items: center; gap: .5em; padding: .45em .9em; border-radius: 999px; background: var(--paper); font-size: .8rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.step-index a span { font-family: var(--font-display); color: var(--accent); }
.step-index a:hover { background: var(--accent-tint); }
/* 05 お申込みのあと：Apple Pay・Google Pay の記事へのカード（2026-09-30） */
.pay-guides { margin-top: var(--s-8); padding: var(--s-6); background: var(--paper); border-radius: var(--img-r); }
.pay-guides__title { font-weight: 700; font-size: 1.05rem; }
.pay-guides__lead { margin-top: var(--s-2); font-size: .9rem; color: var(--ink-70); }
.pay-guides__list { display: grid; gap: var(--s-4); margin-top: var(--s-4); list-style: none; padding: 0; }
@media (min-width: 640px) { .pay-guides__list { grid-template-columns: 1fr 1fr; } }
.pay-guide { display: flex; align-items: center; gap: var(--s-4); height: 100%; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--img-r); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.pay-guide:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.pay-guide__img { flex: 0 0 38%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: calc(var(--img-r) / 2); }
.pay-guide__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pay-guide__body { display: grid; gap: var(--s-1); }
.pay-guide__name { font-weight: 700; line-height: 1.5; }
.pay-guide__more { font-size: .8rem; font-weight: 700; color: var(--accent); }

.flow-step { display: grid; gap: var(--s-6); padding: var(--s-8) 0; border-top: 1px dashed var(--line-2); scroll-margin-top: var(--header-h); }
.flow-step:first-of-type { border-top: 0; }
@media (min-width: 760px) { .flow-step { grid-template-columns: minmax(0, 1fr) 270px; gap: var(--s-12); align-items: start; } }
.flow-step--wide { grid-template-columns: minmax(0, 1fr) !important; }
.flow-step__no { display: inline-block; margin: 0 0 var(--s-2); padding: .3em .8em; border-radius: 999px; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .08em; line-height: 1.2; }
.rich-sec .flow-step h3 { margin-top: 0; }
.flow-step__text > p:not([class]) { color: var(--ink-70); }
.flow-step__mocks { display: flex; flex-wrap: wrap; gap: var(--s-6); justify-content: center; }
.flow-tip { margin-top: var(--s-4); padding: var(--s-4) var(--s-6); background: var(--paper); border-radius: var(--img-r); font-size: .86rem; color: var(--ink-70); }
.flow-tip strong { background: none; color: var(--ink); }
.flow-tip dl { margin: 0; display: grid; gap: var(--s-3); }
.flow-tip dt { font-weight: 700; color: var(--ink); }
.flow-tip dd { margin: 0; }
.flow-table { width: 100%; border-collapse: collapse; margin-top: var(--s-4); background: var(--paper); border-radius: var(--img-r); overflow: hidden; font-size: .84rem; }
.flow-table th, .flow-table td { padding: .75em .9em; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.flow-table thead th { background: var(--accent-tint); font-size: .8rem; }
.flow-table tbody tr:last-child > * { border-bottom: 0; }
.flow-table td:last-child { white-space: nowrap; font-weight: 700; }
.flow-table.is-wrap td:last-child { white-space: normal; }

/* アプリのストアのバッジ（/about/issue-card/。Apple・Google の公式バッジ assets/img/store/。高さをそろえる） */
.store-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.store-badge { display: block; line-height: 0; transition: opacity .2s; }
.store-badge:hover { opacity: .8; }
.store-badge img { display: block; height: 48px; width: auto; }
.store-links--sm { margin-top: var(--s-2); }
.flow .store-links--sm a { margin-right: 0; }
.store-links--sm .store-badge img { height: 36px; }
.help-link { margin-top: var(--s-3) !important; }
.help-link a { font-weight: 700; font-size: .88rem; color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
/* 画面イメージ（スマホ） */
.flow-mock { margin: 0; justify-self: center; }
.flow-mock figcaption { margin-top: var(--s-2); font-size: .74rem; font-weight: 700; color: var(--ink-50); text-align: center; }
.flow-mock__note { display: block; font-weight: 400; font-size: .68rem; }
.fm {
  --fm-g: var(--accent, #3f9a8d); --fm-tint: var(--accent-tint, #e7f3f0);
  width: 250px; overflow: hidden; background: #fff;
  border: 7px solid #1a1a1a; border-radius: 30px; box-shadow: 0 18px 36px rgba(26, 26, 26, .14);
  font-size: 10.5px; line-height: 1.6; color: var(--ink);
}
.fm--small { width: 200px; font-size: 9.5px; border-width: 6px; border-radius: 26px; }
.fm__bar { display: flex; justify-content: center; padding: 14px 0 8px; }
.fm__bar img { height: 14px; width: auto; }
.fm__title { margin: 0; padding: 10px 14px; background: var(--fm-tint); font-weight: 700; font-size: 1.2em; color: var(--ink); }
.fm__apptitle { margin: 0; padding: 12px 14px 4px; font-weight: 700; text-align: center; }
.fm__body { padding: 10px 14px 16px; display: grid; gap: 8px; }
.fm-steps { display: flex; justify-content: space-between; margin: 0; padding: 10px 10px 2px; list-style: none; }
.fm-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72em; font-weight: 700; color: var(--ink-50); line-height: 1.2; text-align: center; }
.fm-steps span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: #fff; font-size: 1.1em; }
.fm-steps .is-now span { background: var(--fm-g); }
.fm-steps .is-now { color: var(--ink); }
.fm-steps .is-done span { background: var(--ink); }
.fm-text { margin: 0; color: var(--ink-70); }
.fm-strong { text-align: center; font-weight: 700; color: var(--ink); }
.fm-h { margin: 4px 0 0; padding-left: 6px; border-left: 3px solid var(--fm-g); font-weight: 700; }
.fm-note { margin: 0; font-size: .82em; color: var(--ink-50); line-height: 1.5; }
.fm-back { margin: 2px 0 0; text-align: center; font-size: .9em; text-decoration: underline; color: var(--ink-70); }
.fm-links, .fm-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.fm-links li { color: var(--fm-g); font-weight: 700; }
.fm-links li::before { content: "› "; }
.fm-list li { position: relative; padding-left: 10px; }
.fm-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-50); }
.fm-field { display: grid; gap: 3px; }
.fm-label { margin: 0; font-weight: 700; }
.fm-req { display: inline-block; margin-right: 5px; padding: 0 5px; border-radius: 3px; background: var(--fm-g); color: #fff; font-size: .8em; line-height: 1.6; }
.fm-row { display: flex; gap: 5px; align-items: center; }
.fm-input { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 5px; background: var(--fm-tint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-input.is-ph { color: var(--ink-50); }
.fm-input.is-auto { background: var(--line); color: var(--ink-70); }
.fm-input.is-select::after { content: "▾"; float: right; color: var(--fm-g); }
.fm-input.is-secret { letter-spacing: .2em; }
.fm-suffix { flex: none; }
.fm-mini { flex: none; padding: 4px 8px; border: 1px solid var(--fm-g); border-radius: 5px; color: var(--fm-g); font-weight: 700; font-size: .9em; }
.fm-check, .fm-radio { display: flex; gap: 7px; align-items: flex-start; margin: 0; }
.fm-check { padding: 7px 8px; border-radius: 5px; background: var(--fm-tint); font-weight: 700; }
.fm-check span { flex: none; width: 13px; height: 13px; margin-top: 1px; border: 1.5px solid var(--ink-50); border-radius: 3px; background: #fff; }
.fm-check.is-on span { border-color: var(--fm-g); background: var(--fm-g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.fm-radio > span { flex: none; width: 13px; height: 13px; margin-top: 2px; border: 1.5px solid var(--ink-50); border-radius: 50%; background: #fff; }
.fm-radio.is-on > span { border-color: var(--fm-g); box-shadow: inset 0 0 0 2.5px #fff; background: var(--fm-g); }
.fm-radio p { margin: 0; }
.fm-radio .fm-desc { font-size: .85em; color: var(--ink-50); line-height: 1.5; }
.fm-badge { display: inline-block; margin-top: 3px !important; padding: 0 6px; border-radius: 3px; background: var(--fm-g); color: #fff; font-size: .8em; font-weight: 700; }
.fm-btn { margin: 4px 0 0; padding: 8px 10px; border-radius: 7px; text-align: center; font-weight: 700; }
.fm-btn--primary { background: var(--fm-g); color: #fff; }
.fm-btn--outline { border: 1.5px solid var(--fm-g); color: var(--fm-g); background: #fff; }
.fm-btn--off { background: var(--line); color: #fff; }
.fm-btn--app { background: #2bb3d4; color: #fff; border-radius: 4px; }
.fm-box { padding: 8px 10px; border-radius: 6px; background: var(--fm-tint); }
.fm-box__title { margin: 0 0 3px; font-weight: 700; }
.fm-box__title::before { content: "i"; display: inline-grid; place-items: center; width: 13px; height: 13px; margin-right: 5px; border-radius: 50%; background: var(--fm-g); color: #fff; font-size: .8em; font-style: italic; font-family: Georgia, serif; }
.fm-dl { margin: 0; display: grid; gap: 0; }
.fm-dl div { padding: 4px 0; border-bottom: 1px dashed var(--line-2); }
.fm-dl dt { font-size: .85em; font-weight: 700; color: var(--ink-50); }
.fm-dl dd { margin: 0; }
/* 本人確認アプリ（Liquid）側の画面：色味を one paretto の画面と変えて「別のアプリ」とわかるように */
.fm--small { display: flex; flex-direction: column; min-height: 450px; }   /* 並べる小さい画面は縦長にそろえ、ボタン（と下のリンク）を下端に */
.fm--small .fm__body { flex: 1; display: flex; flex-direction: column; }
.fm--small .fm__body > :not(.fm-btn):not(.fm-back) + .fm-btn { margin-top: auto; }
.fm--app .fm__body { gap: 10px; }
.fm-warn { margin: 0; padding: 8px; border: 1.5px solid #e8590c; color: #e8590c; text-align: center; font-weight: 700; }
.fm-warnbar { margin: 0; padding: 8px; background: #e8590c; color: #fff; text-align: center; font-weight: 700; }
.fm-scan { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 12px; background: #f4f4f2; text-align: center; }
.fm-scan svg { width: 90px; height: auto; }
.fm__screen { position: relative; margin: 0; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); text-align: center; font-weight: 700; }
.fm__screen span { position: absolute; right: 14px; color: var(--fm-g); }
.fm__prog { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f7f7f5; }
.fm__prog span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--fm-g); border-right-color: var(--line); font-size: .8em; font-weight: 700; color: var(--fm-g); }
.fm__prog p { margin: 0; font-weight: 700; line-height: 1.45; }
.fm-code, .fm-pin { display: flex; justify-content: center; gap: 5px; }
.fm-code span { display: grid; place-items: center; width: 24px; height: 30px; border: 1px solid var(--line-2); border-radius: 4px; font-weight: 700; }
.fm-code span.is-cur, .fm-pin span.is-cur { border: 2px solid var(--fm-g); }
.fm-pin span { width: 22px; height: 28px; border: 1px solid var(--line-2); border-radius: 4px; position: relative; }
.fm-pin span.is-on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ink); }
.fm-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 4px; padding: 6px; background: #eeeeec; border-radius: 6px; }
.fm-keys span { display: grid; place-items: center; height: 22px; border-radius: 4px; background: #fff; font-weight: 700; }
.fm-keys span:empty { background: transparent; }
.fm-card { position: relative; aspect-ratio: 800 / 505; border-radius: 9px; overflow: hidden; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.fm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fm-card__name { position: absolute; left: 7%; bottom: 9%; font-size: .78em; font-weight: 700; letter-spacing: .06em; color: #1f3346; }
.fm-dialog { padding: 12px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.15); text-align: center; display: grid; gap: 6px; }
.fm-dialog__title { margin: 0; font-weight: 700; color: #e8590c; }
.fm-dialog__btns { display: flex; gap: 6px; }
.fm-dialog__btns span { flex: 1; padding: 6px; border: 1px solid var(--line-2); border-radius: 999px; font-weight: 700; }
.fm-dialog__btns .is-yes { background: var(--fm-g); border-color: var(--fm-g); color: #fff; }
/* YouTube 埋め込み（/report/ccig/about/ のブランド CM。2026-10-01） */
.video-embed { margin: 0 0 var(--s-8); }
.video-embed__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--img-r); background: #000; }
.video-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed figcaption { margin-top: var(--s-2); font-size: .78rem; color: var(--ink-50); text-align: center; }
/* 北國銀行の口座のメリット（/about/account/ の 01。2026-10-01。北國銀行の訴求画像を参考に描き起こし） */
.merit-trio { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-8); }
.merit-card { position: relative; margin: 0; padding: var(--s-6) var(--s-4); background: var(--paper); border-radius: var(--img-r); display: flex; flex-direction: column; align-items: center; text-align: center; }
.merit-card + .merit-card::before { content: "+"; position: absolute; left: 50%; top: calc(var(--s-8) / -2); transform: translate(-50%, -50%); font: 700 2.4rem/1 Poppins, sans-serif; color: var(--accent); }
.merit-card__no { margin: 0; padding: .3em .9em; border-radius: 999px; background: var(--accent); color: #fff; font-size: .74rem; font-weight: 700; line-height: 1.2; }
.merit-card__name { margin: var(--s-2) 0 0; min-height: 3em; font-weight: 700; color: var(--ink); font-size: .95rem; line-height: 1.5; }
.merit-card__name small { font-size: .72em; }
.merit-card__say { position: relative; margin: var(--s-4) 0 var(--s-4); padding: .9em 1.2em; border-radius: 20px; background: var(--accent); color: #fff; font-weight: 700; font-size: .86rem; line-height: 1.6; }
.merit-card__say::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 10px solid transparent; border-bottom: 0; border-top-color: var(--accent); }
.merit-icon { display: block; width: 132px; height: auto; margin-top: auto; }
@media (min-width: 760px) {
  .merit-trio { grid-template-columns: repeat(3, 1fr); }
  .merit-card + .merit-card::before { left: calc(var(--s-8) / -2); top: 50%; }
}
.merit-fee { margin-top: var(--s-6); padding: var(--s-6); background: var(--paper); border-radius: var(--img-r); display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .merit-fee { grid-template-columns: 1.1fr 1fr; align-items: center; padding: var(--s-8); } }
.merit-fee__kicker { margin: 0; font-weight: 800; color: var(--accent); }
.merit-fee__say { margin: var(--s-1, .25rem) 0 0; font-weight: 700; color: var(--ink); }
.merit-fee__row { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.merit-fee__row .merit-icon { width: 92px; margin: 0; flex: none; }
.merit-fee__label { margin: 0; font-weight: 900; font-size: clamp(1.3rem, 4.2vw, 1.75rem); line-height: 1.25; color: var(--ink); }
.merit-zero { flex: none; display: grid; place-items: center; width: 104px; height: 104px; margin: 0 0 0 auto; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.2rem; line-height: 1; box-shadow: inset 0 0 0 5px var(--accent), inset 0 0 0 7px rgba(255,255,255,.7); }
.merit-zero { grid-auto-flow: column; align-items: baseline; place-content: center; }
.merit-zero span { font: 700 3.6rem/1 Poppins, sans-serif; margin-right: .05em; }
@media (max-width: 479px) {
  .merit-fee { padding: var(--s-6) var(--s-4); }
  .merit-fee__row { gap: var(--s-2); }
  .merit-fee__row .merit-icon { width: 60px; }
  .merit-fee__label { font-size: 1.15rem; }
  .merit-zero { width: 80px; height: 80px; font-size: 1rem; }
  .merit-zero span { font-size: 2.7rem; }
}
.merit-fee__cond { margin: var(--s-2) 0 0; font-size: .76rem; color: var(--ink-50); text-align: right; }
.merit-fee__head { margin: 0 0 var(--s-3); font-weight: 700; color: var(--accent); }
.merit-atm { margin: 0; border: 2px solid var(--accent-soft); border-radius: var(--img-r); background: #fff; }
.merit-atm > div { padding: var(--s-3) var(--s-4); }
.merit-atm > div + div { border-top: 2px solid var(--accent-soft); }
.merit-atm dt { font-weight: 700; color: var(--ink); }
.merit-atm dt::before { content: "●"; margin-right: .3em; color: var(--accent); font-size: .8em; }
.merit-atm dd { margin: var(--s-1, .25rem) 0 0; font-size: .86rem; color: var(--ink-70); }
.merit-atm__logos { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5, 1.25rem); }
.merit-atm__logos img { display: block; max-width: 100%; height: auto; } /* 表示サイズは元画像の 60%（img の width/height）＝北國銀行のページと同じ大きさの比 */
.merit-table { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--accent-soft); text-align: center; }
.merit-table th, .merit-table td { padding: .7em .5em; border: 2px solid var(--accent-soft); }
.merit-table th { font-size: .84rem; color: var(--ink); background: var(--accent-tint); }
.merit-table td { font-weight: 900; font-size: 1.5rem; color: var(--accent); }
.merit-table small { font-size: .62rem; font-weight: 700; }

/* 本人確認（eKYC）の画面イメージ用（/about/account/ の「本人確認をくわしく」） */
.fm-store { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: #f4f4f2; }
.fm-store__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #fff; border: 1px solid var(--line); font-weight: 800; font-size: .7em; color: #1f3b73; }
.fm-store__name { margin: 0; font-weight: 700; line-height: 1.3; }
.fm-store__btn { margin-left: auto; padding: 3px 12px; border-radius: 999px; background: #1a73e8; color: #fff; font-weight: 700; font-size: .85em; }
.fm-store__btn.is-get { background: #eef3fd; color: #1a73e8; }
.fm-clip { padding: 12px 10px; border-radius: 12px; background: #fff; box-shadow: 0 -4px 16px rgba(0,0,0,.14); display: grid; gap: 6px; text-align: center; }
.fm-clip__logo { margin: 0; font-weight: 800; font-size: 1.9em; letter-spacing: -.02em; }
.fm-clip__logo span { color: #1a73e8; }
.fm-clip__btns { display: flex; gap: 6px; }
.fm-clip__btns span { flex: 1; padding: 6px 2px; border-radius: 8px; background: #f0f0f0; color: #1a73e8; font-weight: 700; font-size: .85em; }
.fm-clip__btns .is-hit { outline: 2.5px solid #e8590c; outline-offset: 1px; }
.fm-sheet { margin-top: auto; padding: 12px 10px 14px; border-radius: 16px 16px 0 0; background: #fff; box-shadow: 0 -6px 18px rgba(0,0,0,.18); display: grid; justify-items: center; gap: 6px; text-align: center; }
.fm-sheet__title { margin: 0; font-weight: 700; font-size: 1.15em; }
.fm-sheet__ring { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 3px solid #1a73e8; color: #1a73e8; font-size: 20px; font-weight: 700; }
.fm--dim .fm__body { background: #6d6d6d; color: #fff; }
.fm--dim .fm-note, .fm--dim .fm-text { color: #eee; }
.fm--dim .fm-sheet, .fm--dim .fm-clip { color: var(--ink); }
.fm--dim .fm-sheet .fm-note, .fm--dim .fm-clip .fm-note { color: var(--ink-50); }
.fm-sheet__ring svg { width: 22px; height: 22px; }
.ekyc-routes { display: grid; gap: var(--s-3); margin: var(--s-4) 0 var(--s-6); }
@media (min-width: 720px) { .ekyc-routes { grid-template-columns: repeat(3, 1fr); } }
.ekyc-jump { display: inline-block; margin-top: var(--s-2); font-weight: 700; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.ekyc-jump:hover { opacity: .7; }
.ekyc-routes .panel { position: relative; padding-top: var(--s-8); }
.ekyc-routes .panel__title { font-size: .98rem; }
.ekyc-routes p:not(.panel__title) { font-size: .86rem; color: var(--ink-70); }
.ekyc-routes .route-tag { position: absolute; top: var(--s-4); left: var(--s-6); font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .1em; color: var(--accent); }
.fm-done { display: grid; justify-items: center; gap: 6px; padding: 18px 0 8px; text-align: center; font-weight: 700; }
.fm-done span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fm-g); color: #fff; font-size: 22px; }

/* 01 の導入：文章＋アプリのアイコン（左）と、ウォレットの画面キャプチャ（右）。/report/ccig/opc/apple-pay/・google-pay/（2026-09-29） */
.wallet-intro { display: grid; gap: var(--s-8); align-items: center; margin: var(--s-4) 0 var(--s-8); }
@media (min-width: 720px) { .wallet-intro { grid-template-columns: minmax(0, 1fr) 250px; gap: var(--s-12); } }
.wallet-intro__text > p:first-child { margin-top: 0; }
.wallet-app { display: flex; align-items: center; gap: var(--s-3); width: fit-content; margin: var(--s-6) 0; padding: var(--s-3) var(--s-6) var(--s-3) var(--s-3); background: var(--paper); border-radius: 999px; }
.wallet-app img { flex: none; width: 48px; height: 48px; border-radius: 12px; }
.rich-sec .wallet-app strong { display: block; font-size: .95rem; line-height: 1.4; background: none; }   /* 本文の <strong> のマーカーを付けない */
.wallet-app small { display: block; font-size: .74rem; color: var(--ink-50); line-height: 1.4; }
.wallet-intro__label { margin: 0 0 var(--s-2); font-weight: 700; }
.wallet-intro__shot { margin: 0; justify-self: center; width: min(250px, 72vw); }
.wallet-intro__shot img { /* スマホの画面らしく：黒い縁・角丸・影 */
  display: block; width: 100%; height: auto;
  border: 7px solid #1a1a1a; border-radius: 32px;
  box-shadow: 0 20px 40px rgba(26, 26, 26, .16);
  background: #fff;
}
.wallet-intro__shot figcaption { margin-top: var(--s-4); font-size: .74rem; line-height: 1.6; color: var(--ink-50); text-align: center; }
/* 「お店で使う」の支払い方法（/report/ccig/opc/apple-pay/・google-pay/）。銀行との取り組みでタッチ決済を推すため、タッチ決済だけ大きく目立たせる（2026-09-29） */
.pay-methods { display: grid; gap: var(--s-3); margin: var(--s-6) 0; }
.pay-method { background: var(--paper); border-radius: var(--img-r); padding: var(--s-6); }
.pay-method__title { margin: 0 0 var(--s-2); font-weight: 700; color: var(--ink); }
.pay-method p:not(.pay-method__title) { font-size: .9rem; color: var(--ink-70); }
.pay-method--touch {
  display: grid; gap: var(--s-4) var(--s-8); align-items: center;
  padding: var(--s-8) var(--s-6);
  border: 2px solid var(--accent);
  background: linear-gradient(135deg, var(--paper) 30%, var(--accent-tint) 100%);
}
@media (min-width: 640px) { .pay-method--touch { grid-template-columns: 210px 1fr; padding-inline: var(--s-8); } }
.pay-method__mark { margin: 0; text-align: center; }
.pay-method__icon { display: block; width: auto; height: clamp(96px, 16vw, 128px); margin: 0 auto; color: var(--ink); }   /* 電波マーク4本（縦長）。色は黒（2026-09-29 指示） */
.pay-method__mark figcaption { margin-top: var(--s-3); font-size: .74rem; font-weight: 700; color: var(--ink); letter-spacing: .06em; }
.pay-method__badge { display: inline-block; margin-bottom: var(--s-2); padding: .35em .9em; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: .72rem; line-height: 1; }
.pay-method--touch .pay-method__title { font-size: clamp(1.1rem, 3vw, 1.3rem); }
.pay-method--touch .checks { margin-top: var(--s-3); font-size: .9rem; }
.pay-method--sub .pay-method__title { font-size: .95rem; }
/* 記事内の OPC LP の PR 枠（oplp_pr_banner()。/report/ccig/opc/apple-pay/・google-pay/） */
.rich-sec .pr { margin-top: var(--s-6); }
/* 記事末の「あわせて読みたい」 */
.related { margin-top: var(--s-8); }
.related ul { display: grid; gap: var(--s-2); }
.related li { position: relative; padding-left: 1.2em; font-size: .92rem; }
.related li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.related a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--line-2); }
.related a:hover { text-decoration-color: var(--ink); }
.rich-notes { margin-top: var(--s-6); font-size: .72rem; color: var(--ink-50); line-height: 1.7; }

/* =========================================================================
   オフィスツアー（/ccig/office/。$bodyClass = 'tour-page'）
   トーンはトップと共通。エリアごとの写真スライダー＋追従するフロアガイドは
   博報堂の採用サイト（hakusuku.jp）のオフィスツアーが参考。JS は main.js（[data-slider] / [data-scrollspy]）。
   ========================================================================= */
body.tour-page .breadcrumb,
body.tour-page .guide-body,
body.tour-page .guide-pager,
body.tour-page .guide-backlink { max-width: var(--home-w); }

.guide-hero--wide { max-width: var(--home-w); padding-bottom: var(--s-12); }
.guide-hero--wide .guide-hero__title { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.9rem, 6vw, 3rem); }
/* 上部の説明文は1行の文字数を制限しない（2026-09-29〜。以前は max-width: 36em で PC でも途中改行していた） */
.guide-hero__img { margin: var(--s-8) 0 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--img-r); background: var(--line); }
.guide-hero__img img { width: 100%; height: 100%; object-fit: cover; }

.tour-main { min-width: 0; margin-top: var(--s-8); }   /* 1カラム（2026-09-24 に2カラムから変更。目次は .toc を流用しヒーロー直下に配置） */

.tour-sec { padding-block: var(--s-12); border-top: 1px solid var(--line-2); scroll-margin-top: var(--header-h); }
.tour-sec:first-child { padding-top: 0; border-top: 0; }
.tour-sec__no {
  display: flex; align-items: center; gap: .8em; margin: 0 0 var(--s-3);
  font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .16em; color: var(--ink-50);
}
.tour-sec h2 { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.5rem, 4.6vw, 2rem); margin: 0 0 var(--s-3); }
.tour-sec > p:not([class]) { color: var(--ink-70); }

.tour-facts { display: grid; gap: var(--s-2); margin: var(--s-6) 0 0; }
@media (min-width: 480px) { .tour-facts { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); } }
.tour-facts div { background: var(--paper); border-radius: var(--img-r); padding: var(--s-3) var(--s-4); }
.tour-facts dt { font-size: .72rem; font-weight: 700; color: var(--ink-50); }
.tour-facts dd { margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.5; }

/* 写真スライダー：JS 無しでも横スクロール（スワイプ）で見られる。操作 UI は JS があるときだけ出す */
.slider { margin: var(--s-6) 0; }
.slider__track {
  position: relative;
  display: flex; gap: var(--s-3);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--img-r);
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline-offset: 4px; }
.slider__slide {
  flex: 0 0 100%; margin: 0;
  scroll-snap-align: start;
  overflow: hidden; aspect-ratio: 16 / 9;   /* ヒーロー画像（.guide-hero__img）と揃える */
  border-radius: var(--img-r); background: var(--line);
}
.slider__slide img { width: 100%; height: 100%; object-fit: cover; }
.slider__slide.is-portrait img { object-fit: contain; }   /* 縦長写真は切り抜かずに全体を見せる */
.slider__ui { display: none; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.js .slider__ui { display: flex; }
.slider__count { margin: 0 auto 0 0; white-space: nowrap; flex-shrink: 0; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .08em; color: var(--ink-50); }
.slider__count span { color: var(--ink); }
.slider__dots { display: flex; gap: 4px; margin-right: var(--s-2); min-width: 0; }   /* 枚数が多いとドットが縮む（はみ出さない） */
.slider__dot {
  flex: 0 1 24px; min-width: 3px; height: 20px; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(var(--line-2), var(--line-2)) center / 100% 3px no-repeat;
}
.slider__dot[aria-current="true"] { background-image: linear-gradient(var(--ink), var(--ink)); }
.slider__btn {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  font-size: .95rem; cursor: pointer; transition: border-color .2s var(--ease);
}
.slider__btn:hover { border-color: var(--ink); }

/* =========================================================================
   PODCAST「+Radio」（/radio/。2026-10-23 に作り直し。データと描画は includes/radio-data.php）
   レイアウトは andsmart.net/news を1カラムにしたもの：中央に番組の顔 → 最新回を大きく → BACK NUMBER の一覧（トップの NEW CONTENTS 風）。
   地の色・角丸はトップと同じ（body.radio-page）。幅は --home-w。
   ========================================================================= */
body.radio-page .radio-show, body.radio-page .radio-main { max-width: var(--home-w); }

/* 上部：+RADIO ロゴ・紹介・番組をフォロー（中央寄せ。andsmart の「NEWS」の見出しの位置） */
.radio-show { padding-block: var(--s-12) var(--s-8); text-align: center; }
.radio-show__logo { margin: 0; line-height: 0; color: var(--ink); }
.radio-show__logo svg { display: inline-block; width: clamp(200px, 40vw, 300px); height: auto; }
.radio-show__name { margin: var(--s-3) 0 var(--s-6); font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-50); }
.radio-show__desc { max-width: 40em; margin: 0 auto var(--s-4); text-align: left; color: var(--ink-70); font-size: .92rem; }
.radio-show__desc { word-break: auto-phrase; } /* 改行位置は radio-data.php で指定済み。想定外の折り返しだけ文節の切れ目に */
.radio-show__desc .br-pc { display: none; }
@media (min-width: 720px) {
  .radio-show__desc { text-align: center; }
  .radio-show__desc .br-pc { display: inline; }
  .radio-show__desc .br-sp { display: none; }
}
.radio-show__follow { margin-top: var(--s-6); }
.radio-show__follow-title { margin: 0 0 var(--s-3); font-size: .82rem; font-weight: 700; }
.radio-show__follow .radio-badges { justify-content: center; }

/* 配信プラットフォームのバナー（支給の公式バッジ。高さをそろえる） */
.radio-badges { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); }
.radio-badges__item { display: flex; flex-direction: column; align-items: center; gap: .2em; }
.radio-badges__item img { height: 40px; width: auto; }
a.radio-badges__item { transition: opacity .2s var(--ease); }
a.radio-badges__item:hover { opacity: .75; }
.radio-badges__item.is-pending img { opacity: .45; }
.radio-badges__item small { font-size: .66rem; color: var(--ink-50); line-height: 1.4; }
@media (max-width: 479px) { .radio-badges__item img { height: 36px; } }

/* 番号・配信日・長さの行（一覧・各回のページ共通） */
.radio-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em; margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: .72rem; color: var(--ink-50); letter-spacing: .04em; }
.radio-meta .cat { font-size: .72rem; }

/* 一覧の1回分（radio_card()。カード全体が各回のページへのリンク）。出すのは写真・番号・日付・長さ・見出し・ゲスト名だけ */
.radio-main { padding-bottom: var(--s-8); }
.radio-card { display: grid; gap: var(--s-4); align-content: start; color: inherit; }
a.radio-card:hover { text-decoration: none; }
a.radio-card:hover .radio-card__main { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.radio-card__img { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--img-r); background: var(--line); }
.radio-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.radio-card:hover .radio-card__img img { transform: scale(1.035); }
.radio-card__body { min-width: 0; }
.radio-card__title { margin: 0; font-family: var(--font-body); font-weight: 700; line-height: 1.5; }
.radio-card__kicker { display: block; font-size: .8rem; color: var(--ink-70); margin-bottom: .25em; word-break: auto-phrase; text-wrap: pretty; }
.radio-card__main { display: block; font-size: 1rem; word-break: auto-phrase; text-wrap: pretty; }
.radio-card__sub { display: block; margin-top: .35em; word-break: auto-phrase; text-wrap: pretty; }
.radio-card__lead { margin: var(--s-4) 0 0; font-size: .9rem; line-height: 1.8; color: var(--ink-70); }
.radio-card__guests { margin: var(--s-3) 0 0; font-size: .8rem; color: var(--ink-70); }
.radio-card__guests span { margin-right: .7em; font-family: var(--font-display); font-weight: 700; font-size: .62rem; letter-spacing: .14em; color: var(--ink); }

/* 最新回：写真を全幅で大きく、その下に文字（andsmart.net/news の先頭記事） */
.radio-card--feature { gap: var(--s-6); padding-bottom: var(--s-12); }
.radio-card--feature .radio-card__img { aspect-ratio: 16 / 9; }
.radio-card--feature .radio-card__kicker { font-size: clamp(.9rem, 2.6vw, 1.05rem); }
.radio-card--feature .radio-card__main { font-size: clamp(1.5rem, 4.8vw, 2.2rem); line-height: 1.4; }
.radio-card--feature .radio-card__sub { font-size: clamp(.95rem, 2.8vw, 1.15rem); }

/* BACK NUMBER：写真が左・文字が右（トップの NEW CONTENTS と同じ比率） */
.radio-back { padding-top: var(--s-4); }
.radio-back__list > .radio-card--row { padding-block: var(--s-6); }
.radio-back__list > .radio-card--row:first-child { padding-top: 0; }
.radio-back__list > .radio-card--row + .radio-card--row { border-top: 1px solid var(--line-2); }
.radio-card--row { grid-template-columns: 38% minmax(0, 1fr); align-items: center; }
.radio-card--row .radio-card__main { font-size: .92rem; }
@media (max-width: 479px) {
  .radio-card--row .radio-card__kicker { font-size: .72rem; }
  .radio-card--row .radio-meta { gap: .2em .7em; margin-bottom: var(--s-2); }
}
@media (min-width: 720px) {
  .radio-card--row { grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-8); }
  .radio-card--row .radio-card__main { font-size: 1.15rem; }
}

/* 各回のページ（/radio/<no>/。includes/radio-episode.php）：+RADIO ロゴ → 見出し → 写真 → 説明 → 聴く → トピック → 出演 → ほかの回 */
body.radio-page .radio-ep { max-width: var(--home-w); padding-bottom: var(--s-8); }
.radio-ep__mark { margin: 0; padding-top: var(--s-6); line-height: 0; }
.radio-ep__mark a { display: inline-block; color: var(--ink); }
.radio-ep__mark a:hover { opacity: .7; }
.radio-ep__mark svg { height: 22px; width: auto; }
.radio-ep__hero { padding-top: var(--s-8); }
.radio-ep__title { margin: 0; font-family: var(--font-body); font-weight: 700; line-height: 1.4; }
.radio-ep__kicker { display: block; font-size: clamp(.95rem, 2.8vw, 1.1rem); color: var(--ink-70); margin-bottom: var(--s-2); word-break: auto-phrase; text-wrap: pretty; }
.radio-ep__main { display: block; font-size: clamp(1.6rem, 5.4vw, 2.5rem); word-break: auto-phrase; text-wrap: balance; }
.radio-ep__sub { display: block; font-size: clamp(1rem, 3vw, 1.2rem); margin-top: var(--s-3); word-break: auto-phrase; text-wrap: balance; }
.radio-ep__img { margin: var(--s-6) 0 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--img-r); background: var(--line); }
.radio-ep__img img { width: 100%; height: 100%; object-fit: cover; }
.radio-ep__lead { margin: var(--s-6) 0 0; font-size: clamp(1rem, 2.8vw, 1.1rem); font-weight: 700; line-height: 1.85; }

.radio-listen { margin-block: var(--s-8); padding: var(--s-6); background: var(--paper); border-radius: var(--img-r); }
.radio-listen__title { font-family: var(--font-body); font-size: .95rem; font-weight: 700; margin: 0 0 var(--s-4); }

.radio-ep__sec { padding-block: var(--s-8); border-top: 1px solid var(--line-2); }
.radio-ep__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2em .8em; margin: 0 0 var(--s-6); font-family: var(--font-body); font-weight: 700; font-size: clamp(1.15rem, 3.6vw, 1.4rem); }
.radio-ep__h span { font-family: var(--font-display); font-size: .72rem; letter-spacing: .16em; color: var(--ink-50); }

/* トピック（原稿の章見出しだけ。本文は載せない） */
.radio-topics { counter-reset: topic; display: grid; gap: var(--s-2); }
.radio-topics li { counter-increment: topic; display: flex; gap: .9em; padding: var(--s-3) var(--s-4); background: var(--paper); border-radius: var(--img-r); font-weight: 700; font-size: .95rem; line-height: 1.6; }
.radio-topics li::before { content: counter(topic, decimal-leading-zero); flex: 0 0 auto; font-family: var(--font-display); font-size: .78rem; color: var(--ink-50); padding-top: .2em; }
.radio-article { margin: var(--s-6) 0 0; font-weight: 700; }
.radio-article a { text-decoration: underline; text-underline-offset: .2em; }

/* 出演（ゲストのプロフィールと、その回の MC） */
.radio-people { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .radio-people { grid-template-columns: 1fr 1fr; } }
.radio-people__label { display: inline-block; margin: 0 0 var(--s-3); padding: .4em .75em; font-family: var(--font-display); font-weight: 700; font-size: .62rem; letter-spacing: .14em; line-height: 1; border: 1px solid var(--ink); }
.radio-people__name { margin: 0 0 var(--s-1); font-weight: 700; font-size: 1.1rem; }
.radio-people__name span { font-weight: 400; font-size: .78rem; color: var(--ink-50); }
.radio-people__role { margin: 0 0 var(--s-3); font-size: .85rem; font-weight: 700; color: var(--ink-70); }
.radio-people__profile { font-size: .88rem; color: var(--ink-70); word-break: auto-phrase; text-wrap: pretty; }
.radio-people__link { margin: var(--s-3) 0 0; font-size: .85rem; font-weight: 700; }
.radio-people__link a { text-decoration: underline; text-underline-offset: .2em; }
.radio-ep .radio-back { padding-top: var(--s-8); }

/* =========================================================================
   +REWARD（/reward/）
   ========================================================================= */
.reward-status {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .08em;
  padding: .3em .9em; margin: 0 0 var(--s-3);
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-70);
}
.reward-status--open { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.reward-backnumber .reward-status--closed { margin-bottom: var(--s-2); }
.reward-period { font-size: .82rem; color: var(--ink-50); margin: 0 0 var(--s-4); }

/* =========================================================================
   SPECIAL（/sp/）
   ========================================================================= */
.sp-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .08em;
  padding: .3em .9em; margin: 0 0 var(--s-3);
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-70);
}
.sp-date { font-size: .78rem; color: var(--ink-50); margin: 0; }

/* =========================================================================
   フォーム（/info/ お問い合わせ ほか）
   ========================================================================= */
.form-lead { color: var(--ink-70); font-size: clamp(.9rem, 2.6vw, .98rem); margin: var(--s-4) 0 var(--s-8); }
.form-lead__req, .field__req { color: var(--ink); font-weight: 700; }

.form-alert {
  margin: 0 0 var(--s-6);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--ink);
  border-left-width: 4px;
  border-radius: var(--r-sm);
  font-size: .88rem;
}

.form { display: grid; gap: var(--s-6); max-width: 40rem; }

.field { display: grid; gap: var(--s-2); }
.field__label { font-size: .85rem; font-weight: 700; }
.field__input {
  width: 100%;
  font: inherit;
  font-size: 16px; /* iOS のズーム防止 */
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .7em .85em;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, .12);
}
textarea.field__input { resize: vertical; min-height: 8em; line-height: 1.7; }
select.field__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 1.1em center, right .85em center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4em;
}

.field--error .field__input { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.field__error { font-size: .8rem; font-weight: 700; margin: 0; }

.field--checkbox { }
.checkbox { display: flex; gap: .6em; align-items: flex-start; font-size: .88rem; line-height: 1.6; cursor: pointer; }
.checkbox input { margin-top: .25em; flex: 0 0 auto; width: 1.1em; height: 1.1em; accent-color: var(--ink); }
.checkbox a { text-decoration: underline; text-underline-offset: .18em; }

.form .btn { justify-self: start; }
.form-note { font-size: .76rem; color: var(--ink-50); margin: 0; }

/* honeypot：視覚・支援技術・タブ移動すべてから隠す */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-thanks {
  margin-top: var(--s-6);
  padding: var(--s-8);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper-2);
}
.form-thanks h2 { font-size: 1.25rem; margin-bottom: var(--s-3); }
.form-thanks p { margin-bottom: var(--s-2); color: var(--ink-70); }
.form-thanks a { text-decoration: underline; text-underline-offset: .18em; }

.prose__meta { margin-top: var(--s-12); font-size: .78rem; color: var(--ink-50); }

/* ---- マイクロインタラクション（スクロール連動フェードイン） ------ */
/* JS があるときだけ隠す。no-JS / JS 実行前でも本文は必ず見える。 */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .site-footer__wave use { animation: none; transform: none; }
}