/* site.css — telepo.jp 公開サイト（05_デザイン設計書のトークン）。
   和文: Noto Sans JP / 欧文・数字: Inter。色は OKLCH 由来の近似 HEX（実測は QA_REPORT.md）。 */
:root{
  --ink-950:#0B1620; --ink-800:#24323D; --ink-600:#4E5C67;
  --paper-50:#F7F5F0; --white:#fff; --line-200:#E2DED5;
  --signal-700:#0B6673; --signal-500:#1795A6; --signal-100:#DDF0F2;
  --amber-500:#E39A2E; --danger-600:#C0392B;
  --r-input:8px; --r-card:12px; --r-panel:20px;
  --shadow:0 1px 2px rgba(11,22,32,.06),0 8px 24px -12px rgba(11,22,32,.18);
  --font-ja:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  --font-en:"Inter","Noto Sans JP",system-ui,sans-serif;
  --wrap:1200px; --gutter:24px;
}
@media (max-width:640px){:root{--gutter:16px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper-50);color:var(--ink-800);font:400 16px/1.8 var(--font-ja);font-feature-settings:normal;overflow-wrap:anywhere;word-break:auto-phrase;line-break:strict;overflow-x:clip}
img,svg,video,audio{max-width:100%;height:auto}
a{color:var(--signal-700);text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--signal-500);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink-950);color:#fff;padding:12px 16px;z-index:100;border-radius:8px}
.skip:focus{top:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.num{font-family:var(--font-en);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-600);font-size:14px;line-height:1.7}

/* ---- 見出し ---- */
h1,h2,h3,h4{font-feature-settings:"palt";color:var(--ink-950);line-height:1.35;text-wrap:balance;word-break:auto-phrase}
.h1{font-size:clamp(32px,5.2vw,56px);font-weight:700;line-height:1.2;letter-spacing:.02em;margin:0 0 16px}
h2{font-size:clamp(24px,3vw,31px);font-weight:700;margin:64px 0 16px}
h3{font-size:20px;font-weight:700;margin:32px 0 8px}
.eyebrow{font:600 14px/1.4 var(--font-en);letter-spacing:.06em;color:var(--signal-700);margin:0 0 12px}
.lead{font-size:18px;line-height:1.9;max-width:44em;color:var(--ink-800);margin:0}

/* ---- ボタン ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:10px;border:2px solid transparent;font:700 16px/1.2 var(--font-ja);text-decoration:none;cursor:pointer;transition:transform .2s ease-out,background-color .2s ease-out,border-color .2s ease-out}
.btn--primary{background:var(--signal-700);color:#fff}
.btn--primary:hover{background:#08525c;transform:translateY(-1px)}
.btn--primary:active{transform:none}
.btn--ghost{background:transparent;color:var(--signal-700);border-color:var(--signal-700)}
.btn--ghost:hover{background:var(--signal-100)}
.btn--on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--on-dark:hover{background:rgba(255,255,255,.1)}
.btn--sm{min-height:44px;padding:8px 16px;font-size:14px}
.btn--lg{min-height:56px;padding:16px 32px;font-size:18px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}

/* ---- ヘッダー ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:background-color .2s,border-color .2s}
.site-header.is-scrolled{background:var(--paper-50);border-bottom-color:var(--line-200)}
.site-header__in{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-950);font-weight:700;font-size:20px}
.gnav{display:flex;align-items:center;gap:20px;margin-left:auto}
.gnav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.gnav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink-800);text-decoration:none;font-weight:500;font-size:15px;border-radius:8px}
.gnav a:not(.btn):hover{background:var(--signal-100)}
.gnav a[aria-current=page]{color:var(--signal-700);font-weight:700}
.menu-btn{display:none;margin-left:auto;width:48px;height:48px;border:0;background:transparent;border-radius:10px;cursor:pointer;position:relative}
.menu-btn__bar,.menu-btn__bar::before,.menu-btn__bar::after{position:absolute;left:12px;right:12px;height:2px;background:var(--ink-950);content:"";transition:transform .2s ease-out}
.menu-btn__bar{top:23px}.menu-btn__bar::before{top:-8px;left:0;right:0}.menu-btn__bar::after{top:8px;left:0;right:0}
.menu-btn[aria-expanded=true] .menu-btn__bar{background:transparent}
.menu-btn[aria-expanded=true] .menu-btn__bar::before{transform:translateY(8px) rotate(45deg)}
.menu-btn[aria-expanded=true] .menu-btn__bar::after{transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1040px){
  /* backdrop-filter は中の position:fixed の基準を「画面」から「ヘッダー(高さ68px)」に変えてしまい、メニューが高さ48pxに潰れる。スマホ幅では外す */
  .site-header,.site-header.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper-50)}
  .menu-btn{display:block}
  .gnav{position:fixed;inset:68px 0 0 0;background:var(--paper-50);flex-direction:column;align-items:stretch;gap:16px;padding:16px var(--gutter) 32px;margin:0;overflow:auto;display:none}
  .gnav.is-open{display:flex}
  .gnav ul{flex-direction:column}
  .gnav a:not(.btn){display:flex;min-height:52px;font-size:17px;border-bottom:1px solid var(--line-200);border-radius:0}
  .gnav__cta{width:100%}
}

/* ---- ヒーロー（トップ） ---- */
.hero{padding:56px 0 80px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.hero .h1{font-size:clamp(34px,5.4vw,60px)}
.hero__lead{font-size:18px;line-height:1.9;margin:0 0 24px;max-width:36em}
.hero__tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px;max-width:34em}
.tab-link{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border:2px solid var(--line-200);background:var(--white);border-radius:var(--r-card);text-decoration:none;color:var(--ink-950);font-weight:700;min-height:64px;justify-content:center;transition:border-color .2s,transform .2s}
.tab-link small{font-weight:400;color:var(--ink-600);font-size:13px}
.tab-link:hover{border-color:var(--signal-500);transform:translateY(-1px)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.hero__note{font-size:14px;color:var(--ink-600);max-width:40em;margin:0}
@media (max-width:960px){.hero{padding:32px 0 56px}.hero__grid{grid-template-columns:1fr;gap:32px}.hero__tabs{grid-template-columns:1fr}}

/* ---- LiveCallCard（署名要素） ---- */
.live-card{background:var(--ink-950);color:#EAF2F5;border-radius:var(--r-panel);padding:20px 20px 16px;box-shadow:var(--shadow);position:relative}
.live-card__bar{display:flex;justify-content:space-between;align-items:center;font:600 14px/1 var(--font-en);margin-bottom:12px}
.live-card__status{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ja)}
.live-card__status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--signal-500);box-shadow:0 0 0 0 rgba(23,149,166,.6);animation:pulse 1.6s infinite}
.live-card__time{font-variant-numeric:tabular-nums;color:#B8C7CF}
.live-card__wave{width:100%;height:56px;display:block;margin-bottom:12px}
.live-card__wave rect{fill:var(--signal-500);transform-box:fill-box;transform-origin:center;transition:transform .12s linear,fill .2s}
.live-card__wave rect.is-amber{fill:var(--amber-500)}
.live-card__lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-height:236px}
.live-line{display:grid;grid-template-columns:44px 1fr;gap:8px;font-size:14px;line-height:1.7;opacity:0;transform:translateY(6px);transition:opacity .2s ease-out,transform .2s ease-out}
.live-line.is-shown{opacity:1;transform:none}
.live-line__who{font:700 12px/1.9 var(--font-en);letter-spacing:.04em;color:#7FD3DE}
.live-line--them .live-line__who{color:var(--amber-500)}
.live-card__chip{margin:12px 0 4px;padding:10px 14px;border-radius:999px;background:var(--amber-500);color:var(--ink-950);font-weight:700;font-size:14px;line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity .2s ease-out,transform .2s ease-out}
.live-card__chip.is-shown{opacity:1;transform:none}
.live-card__note{margin:8px 0 0;font-size:12px;color:#B8C7CF}
.live-card.is-static .live-line,.live-card.is-static .live-card__chip{opacity:1;transform:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(23,149,166,0)}100%{box-shadow:0 0 0 0 rgba(23,149,166,0)}}
@media (prefers-reduced-motion:reduce){.live-card__status::before{animation:none}.live-line,.live-card__chip,.btn{transition:none}html{scroll-behavior:auto}}

/* ---- セクション ---- */
.section{padding:96px 0}
.section--tight{padding:64px 0}
.section--white{background:var(--white)}
.section--dark{background:var(--ink-950);color:#E6EEF1}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark a{color:#8ADCE6}
.section__head{max-width:46em;margin-bottom:40px}
.section__head h2{margin-top:0}
.section__head p{margin:0}
@media (max-width:640px){.section{padding:64px 0}.section--tight{padding:48px 0}h2{margin-top:48px}}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:28px}}

/* ---- 製品カード・カード ---- */
.product-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:760px){.product-cards{grid-template-columns:1fr}}
.product{background:var(--white);border:1px solid var(--line-200);border-radius:var(--r-panel);overflow:hidden;display:flex;flex-direction:column}
.product__media{aspect-ratio:3/2;background:linear-gradient(135deg,var(--ink-950),#16303C);color:#fff;display:flex;align-items:flex-end;padding:20px;position:relative}
.product__media span{font:700 clamp(28px,4vw,40px)/1.2 var(--font-ja)}
.product__media--in{background:linear-gradient(135deg,#0B3A44,var(--signal-700))}
.product__media::after{content:"";position:absolute;right:20px;top:20px;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.35)}
.product__body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.product__body h3{margin:0;font-size:24px}
.product__body p{margin:0}
.product__price{font-weight:700;color:var(--ink-950)}
.product__body .btn{margin-top:auto;align-self:flex-start}
.card-grid{list-style:none;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--white);border:1px solid var(--line-200);border-radius:var(--r-card)}
.card__link{display:flex;flex-direction:column;gap:6px;padding:20px;text-decoration:none;color:var(--ink-800);height:100%;border-radius:var(--r-card);transition:box-shadow .2s,transform .2s}
.card__link:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card__tag{font:600 12px/1.4 var(--font-en);letter-spacing:.06em;color:var(--signal-700)}
.card__tag:empty{display:none}
.card__title{font-weight:700;font-size:17px;color:var(--ink-950);line-height:1.5}
.card__text{font-size:14px;line-height:1.7;color:var(--ink-600)}

/* ---- ステップ ---- */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps li{counter-increment:s;position:relative;padding-top:56px}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;font:700 44px/1 var(--font-en);color:var(--signal-700)}
.steps li::after{content:"";position:absolute;top:22px;left:48px;right:-12px;height:2px;background:var(--line-200)}
.steps li:last-child::after{display:none}
.steps h3{margin:0 0 6px;font-size:18px}
.steps p{margin:0;font-size:15px;line-height:1.8}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:20px}.steps li{padding:0 0 0 64px;min-height:48px}.steps li::after{display:none}}

/* ---- 機能行・信頼グリッド ---- */
.feature-rows{display:grid;gap:12px}
.feature-row{display:grid;grid-template-columns:72px 1fr auto;gap:20px;align-items:center;padding:20px 24px;background:var(--white);border:1px solid var(--line-200);border-radius:var(--r-card);text-decoration:none;color:var(--ink-800)}
.feature-row:hover{box-shadow:var(--shadow)}
.feature-row__no{font:700 28px/1 var(--font-en);color:var(--signal-700)}
.feature-row__t{font-weight:700;color:var(--ink-950);display:block}
.feature-row__d{font-size:15px;color:var(--ink-600);display:block}
.feature-row__go{font-weight:700;color:var(--signal-700);white-space:nowrap}
@media (max-width:640px){.feature-row{grid-template-columns:44px 1fr}.feature-row__go{display:none}}
.trust-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:860px){.trust-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trust-grid{grid-template-columns:1fr}}
.trust{padding:20px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card);background:rgba(255,255,255,.04)}
.trust h3{margin:0 0 6px;font-size:17px}
.trust p{margin:0;font-size:15px;line-height:1.75;color:#D5E1E6}
.fine{font-size:13px;line-height:1.7;margin-top:24px;color:#B8C7CF}

/* ---- ページ共通（柱・記事） ---- */
.page-head{padding:32px 0 40px;border-bottom:1px solid var(--line-200);background:var(--white)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0 0 20px;padding:0;font-size:14px}
.crumbs li+li::before{content:"›";margin-right:4px;color:var(--ink-600)}
.crumbs a{color:var(--ink-600)}
.page-body{padding:40px var(--gutter) 80px}
.page-body--toc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:960px){.page-body--toc{grid-template-columns:1fr;gap:16px}}
.toc{position:sticky;top:88px;font-size:14px;border-left:3px solid var(--line-200);padding-left:16px}
.toc__h{font-weight:700;margin:0 0 8px}
.toc ol{margin:0;padding-left:20px;line-height:1.7}
.toc li{margin:6px 0}
@media (max-width:960px){.toc{position:static}}
.prose{max-width:46em;min-width:0}
.prose p{margin:0 0 1.2em}
.prose ul,.prose ol{margin:0 0 1.4em;padding-left:1.4em}
.prose li{margin:.3em 0}
.prose h2:first-child{margin-top:0}
.prose blockquote{margin:1.5em 0;padding:4px 20px;border-left:4px solid var(--signal-500);color:var(--ink-600)}
.prose code{background:var(--signal-100);padding:.1em .4em;border-radius:4px;font-size:.92em}
.prose hr{border:0;border-top:1px solid var(--line-200);margin:2.5em 0}
.table-wrap{overflow-x:auto;margin:1.5em 0;border:1px solid var(--line-200);border-radius:var(--r-card);background:var(--white)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;line-height:1.7}
th,td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-200)}
thead th{background:var(--signal-100);color:var(--ink-950);font-weight:700}
tbody th{font-weight:700;color:var(--ink-950);background:#FBFAF7}
tr:last-child>*{border-bottom:0}
.price-table td small{display:block;font:400 13px/1.6 var(--font-ja);color:var(--ink-600)}
.price-table td.num{font-size:20px;font-weight:700;color:var(--ink-950)}
.definition{background:var(--white);border:1px solid var(--line-200);border-left:6px solid var(--signal-700);border-radius:var(--r-card);padding:20px 24px;margin:0 0 24px}
.definition__label,.summary-box__label,.unique-point__label{font:700 12px/1.4 var(--font-en);letter-spacing:.08em;color:var(--signal-700);margin:0 0 6px!important}
.definition__text{font-size:19px;line-height:1.8;font-weight:500;color:var(--ink-950);margin:0!important}
.summary-box,.unique-point{background:var(--signal-100);border-radius:var(--r-card);padding:20px 24px;margin:0 0 32px}
.summary-box p,.unique-point p{margin-bottom:.5em}
.summary-box ul{margin:0}
.note{background:#FFF6E5;border:1px solid #F0D9A8;border-radius:var(--r-card);padding:14px 20px;margin:0 0 1.4em;font-size:15px;color:#4A3512}
.note p:last-child{margin:0}
.cta-box{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--ink-950);color:#E6EEF1;border-radius:var(--r-card);padding:24px;margin:2em 0}
.cta-box p{margin:0}
.faq details{background:var(--white);border:1px solid var(--line-200);border-radius:var(--r-card);margin:0 0 10px}
.faq summary{cursor:pointer;list-style:none;padding:16px 48px 16px 20px;font-weight:700;color:var(--ink-950);position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:700 22px/1 var(--font-en);color:var(--signal-700)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 20px 18px}
.author-box{margin:48px 0 0;padding:20px 24px;border:1px solid var(--line-200);border-radius:var(--r-card);background:var(--white);font-size:15px}
.author-box p{margin:0 0 .4em}
.author-box__badge,.chip{display:inline-block;font:700 12px/1 var(--font-ja);padding:6px 10px;border-radius:999px;background:var(--signal-100);color:var(--signal-700)}
.sources ol,.sources ul{font-size:14px}

/* ---- CTAセクション・料金・シミュレーター ---- */
.cta-section{background:var(--ink-950);color:#E6EEF1;padding:72px 0}
.cta-section h2{color:#fff;margin:0 0 8px;font-size:clamp(24px,3.4vw,34px)}
.cta-section p{margin:0;max-width:40em}
.cta-section__in{display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-section__btns{display:flex;gap:12px;flex-wrap:wrap}
.cta-section .btn--primary{background:var(--amber-500);color:var(--ink-950)}
.cta-section .btn--primary:hover{background:#F0AA45}
.rules{margin:1em 0 1.5em;padding-left:1.3em}
.sim{margin:2em 0;background:var(--white);border:1px solid var(--line-200);border-radius:var(--r-panel);padding:8px 24px 24px}
.sim fieldset{border:0;margin:0;padding:0}
.sim legend{font-weight:700;font-size:20px;color:var(--ink-950);padding:16px 0 8px}
.sim__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:8px 0 16px}
.sim label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:15px}
.sim input{min-height:48px;padding:10px 12px;border:1.5px solid #8A9AA5;border-radius:var(--r-input);font:500 18px var(--font-en);font-variant-numeric:tabular-nums;background:#fff;color:var(--ink-950)}
.sim input:hover{border-color:var(--ink-600)}
.sim input[aria-invalid=true]{border-color:var(--danger-600)}
.sim__err{color:var(--danger-600);font-weight:700;margin:0 0 12px}
.sim__out{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0 0 12px}
.sim__out div{background:var(--paper-50);border-radius:var(--r-card);padding:14px 16px}
.sim__out dt{font-size:13px;color:var(--ink-600);line-height:1.5}
.sim__out dd{margin:4px 0 0;font:700 22px/1.3 var(--font-en);font-variant-numeric:tabular-nums;color:var(--ink-950)}
.sim__total{color:var(--signal-700)!important;font-size:26px!important}

/* ---- デモ・ブログ ---- */
.demo-list{display:grid;gap:20px;margin:1.5em 0}
.demo-item{background:var(--white);border:1px solid var(--line-200);border-radius:var(--r-card);padding:20px 24px}
.demo-item h3{margin:0 0 10px}
.demo-item audio{display:block;width:100%;height:54px;margin-bottom:12px}   /* height:auto（上の img,svg,video,audio）だと操作部が 0px に潰れて見えなくなる */
.demo-item__pending{font-size:14px;color:var(--ink-600);margin:0 0 12px}
.transcript{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.transcript__line{display:grid;grid-template-columns:48px 1fr;gap:8px;font-size:15px;line-height:1.75}
.transcript__line span:first-child{font-weight:700;color:var(--signal-700);font-size:13px}
.transcript__line--them span:first-child{color:#8A5A12}
.post-meta{display:flex;flex-wrap:wrap;gap:12px;font-size:14px;color:var(--ink-600);margin:0 0 16px}
.lead-time{background:var(--signal-100);border-radius:var(--r-card);padding:14px 18px;font-weight:700;color:var(--ink-950)}

/* ---- フッター ---- */
.site-footer{background:#08111A;color:#C9D6DC;padding:64px 0 32px;font-size:14px;line-height:1.8}
.site-footer a{color:#C9D6DC}
.site-footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
@media (max-width:1000px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer__grid{grid-template-columns:1fr}}
.site-footer__brand{font-weight:700;font-size:20px;color:#fff;margin:0 0 4px}
.site-footer__lead{margin:0 0 16px}
.site-footer__h{font-weight:700;color:#fff;margin:0 0 8px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li a{display:inline-block;padding:6px 0;text-decoration:none}
.site-footer li a:hover{text-decoration:underline}
.site-footer address{font-style:normal}
.site-footer__note{border-top:1px solid rgba(255,255,255,.14);margin:40px 0 8px;padding-top:20px;font-size:13px;color:#B8C7CF}
.site-footer__copy{margin:0;font-size:13px;color:#B8C7CF}

/* ---- 画像スロット（画像生成までのタイポグラフィ型プレースホルダー。IMAGE_QUEUE.md 参照） ---- */
.media-slot{margin:0;border-radius:var(--r-panel);overflow:hidden;aspect-ratio:4/3;background:linear-gradient(135deg,#DDF0F2 0%,#F7F5F0 100%);border:1px solid var(--line-200);display:flex;align-items:flex-end}
.media-slot__ph{padding:24px;font:700 clamp(20px,2.4vw,28px)/1.5 var(--font-ja);color:var(--ink-950);max-width:16em}
.media-slot img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- メディア（記事カード・フィルタ・ページ送り）と タイポグラフィ型アイキャッチ（HTML/CSS・無料） ---- */
.card-grid--posts{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.eyecover{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:16/9;border-radius:8px;padding:14px 16px;background:var(--ink-950);color:#fff;overflow:hidden;margin-bottom:6px;position:relative}
.eyecover span{font:700 12px/1.4 var(--font-en);letter-spacing:.06em;color:#7FD3DE}
.eyecover b{font:700 clamp(15px,1.6vw,18px)/1.5 var(--font-ja);text-wrap:balance;word-break:auto-phrase;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.eyecover--news::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--amber-500)}
.eyecover--glossary,.eyecover--guide,.eyecover--legal{background:var(--paper-50);color:var(--ink-950);border:1px solid var(--line-200)}
.eyecover--glossary span,.eyecover--guide span,.eyecover--legal span{color:var(--signal-700)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.filters a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--line-200);border-radius:999px;background:var(--white);color:var(--ink-800);text-decoration:none;font-weight:500;font-size:14px}
.filters a:hover{border-color:var(--signal-500)}
.filters a[aria-current=page]{background:var(--signal-700);border-color:var(--signal-700);color:#fff;font-weight:700}
.pager{display:flex;gap:8px;justify-content:center;margin:32px 0}
.pager a,.pager span{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1.5px solid var(--line-200);background:var(--white);text-decoration:none;font-weight:700}
.pager span[aria-current=page]{background:var(--signal-700);color:#fff;border-color:var(--signal-700)}

/* ---- 2026-10-09 QA で直した点（スクショ確認） ---- */
.prose .card-grid,.prose .transcript{padding-left:0}
.prose .card-grid li,.prose .transcript li{margin:0}
.sim__out{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.sim__out{grid-template-columns:1fr}}
.lead,.prose p,.hero__lead{text-wrap:pretty}
.site-footer li a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.site-footer address a{display:inline-flex;align-items:center;min-height:44px}
.brand{min-height:44px}
.product__media{background-color:#0B1620}
.product__media--in{background-color:#0B3A44}
.site-footer li a{min-width:44px}
.hero-fig{position:relative;margin:28px 0 0;border-radius:var(--r-panel);overflow:hidden;aspect-ratio:21/9;background:var(--ink-950)}
.hero-fig img{width:100%;height:100%;object-fit:cover;display:block}
.ai-img-note{position:absolute;right:10px;bottom:10px;font:500 11px/1 var(--font-ja);color:#fff;background:rgba(11,22,32,.72);padding:5px 8px;border-radius:999px}
.media-slot{position:relative}
.product__media--img{background-size:cover;background-position:center}
.product__media--img::after{display:none}

/* Instagram リール（クリックで読み込む）— site.js の data-ig-reel / Site::igReel() */
.ig-reel{margin:24px 0 0;max-width:360px}
.ig-reel__stage{position:relative;aspect-ratio:4/5;border-radius:var(--r-panel);overflow:hidden;background:var(--ink-950);box-shadow:var(--shadow)}
.ig-reel__stage.is-loaded{aspect-ratio:auto;background:var(--white)}
.ig-reel__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;color:#fff;text-decoration:none;background:linear-gradient(160deg,#0B3A44,var(--ink-950) 72%)}
.ig-reel .ig-reel__play,.ig-reel .ig-reel__play:hover{color:#fff}
.ig-reel__play:focus-visible{outline:3px solid var(--amber-500);outline-offset:-6px}
.ig-reel__icon{transition:transform .2s ease-out}
.ig-reel__play:hover .ig-reel__icon{transform:scale(1.06)}
.ig-reel__t{font:700 17px/1.5 var(--font-ja);max-width:18em;text-wrap:balance}
.ig-reel__s{font:400 13px/1.6 var(--font-ja);color:#C9D6DC;max-width:20em}
.ig-reel iframe{display:block;width:100%;border:0;background:var(--white)}
.ig-reel__cap{margin-top:12px;font:400 13px/1.7 var(--font-ja);color:var(--ink-600)}
.ig-reel__open{display:flex;align-items:center;min-height:44px}
.section--dark .ig-reel__cap{color:#C9D6DC}
.section--dark .ig-reel__cap a{color:var(--signal-100)}
@media (prefers-reduced-motion:reduce){.ig-reel__icon{transition:none}}