/*
Theme Name: AXION Theme
Description: AXION PMS
Version: 3.7.2
Author: REPUNIT
*/

  :root {
    --void: #050609;
    --champagne: #E3C387;
    --gold: #B08D4A;
    /* 配色の運用ルール:
       金(champagne/gold) = 装飾・強調・世界観のベース
       シアン(cyan)        = AI関連の要素のみ(AIバッジ・AI返信パネル)
       緑(ok)              = 稼働ステータス(LIVE表示など)のみ
       これ以外の用途でシアン/緑を装飾に使わないこと(金との喧嘩を防ぐ) */
    --cyan: #6FD6DE;
    --platinum: #DCE1EB;
    --text: #F4F2EC;
    --mist: #A8B1C4;
    --hairline: rgba(227,195,135,.26);
    --ok: #7FD8A4;
    --orange: #E8A063;
    --blue: #6FA8E8;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--void);
    color: var(--text);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- Preloader ---------- */
  #loader {
    position: fixed; inset: 0; z-index: 100;
    background: var(--void);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 26px;
  }
  #loader img { height: 40px; opacity: 0; animation: loaderIn 1.6s ease forwards .2s; }
  #loader .sub {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: .4em; text-indent: .4em;
    color: var(--mist);
    opacity: 0;
    animation: loaderIn 1.6s ease forwards .6s;
  }
  /* PIN解錠演出: 4桁が順に揃い、解錠して開幕する(スマートロックの暗喩) */
  #loader .pinpad {
    display: flex; gap: 18px;
    animation: pinUnlock .5s ease forwards 1.5s;  /* 4桁揃った後、全体がふっと沈んで解錠 */
  }
  #loader .pin-d {
    width: 13px; height: 13px;
    border-radius: 50%;
    border: 1px solid rgba(227,195,135,.4);
    background: transparent;
    animation: pinFill .3s ease forwards;
  }
  #loader .pin-d:nth-child(1) { animation-delay: .25s; }
  #loader .pin-d:nth-child(2) { animation-delay: .55s; }
  #loader .pin-d:nth-child(3) { animation-delay: .85s; }
  #loader .pin-d:nth-child(4) { animation-delay: 1.15s; }
  #loader .unlock-line {
    display: block;
    width: 0; height: 1px;
    margin: -10px 0;  /* pinpadとキャプションの間に細く収める */
    background: linear-gradient(90deg, transparent, var(--champagne), transparent);
    animation: unlockSweep .55s cubic-bezier(.22,1,.36,1) forwards 1.55s;  /* 解錠の一閃 */
  }
  /* 再訪時(quick-loader): 解錠演出を約1/3の時間に圧縮 */
  .quick-loader #loader .pin-d { animation-duration: .12s; }
  .quick-loader #loader .pin-d:nth-child(1) { animation-delay: .05s; }
  .quick-loader #loader .pin-d:nth-child(2) { animation-delay: .15s; }
  .quick-loader #loader .pin-d:nth-child(3) { animation-delay: .25s; }
  .quick-loader #loader .pin-d:nth-child(4) { animation-delay: .35s; }
  .quick-loader #loader .pinpad { animation-delay: .48s; animation-duration: .25s; }
  .quick-loader #loader .unlock-line { animation-delay: .5s; animation-duration: .3s; }

  @keyframes loaderIn { to { opacity: 1; } }
  @keyframes pinFill {
    to {
      background: var(--champagne);
      border-color: var(--champagne);
      box-shadow: 0 0 14px rgba(227,195,135,.8);
    }
  }
  @keyframes pinUnlock {
    50% { transform: translateY(3px); opacity: 1; }
    100% { transform: translateY(0); opacity: .25; }
  }
  @keyframes unlockSweep { to { width: 230px; } }

  /* ---------- Layers ----------
     z: webgl 0 < vignette/grain 1 < css3dパネル 3 < story 4 < nav 10 */
  #webgl { position: fixed; inset: 0; z-index: 0; }
  #webgl canvas { display: block; }
  .vignette {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 58%, rgba(2,3,5,.5) 100%);
  }
  .grain {
    position: fixed; inset: -50%; z-index: 1; pointer-events: none;
    width: 200%; height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .03;
    animation: grain 8s steps(10) infinite;
  }
  @keyframes grain {
    0%,100% { transform: translate(0,0); } 10% { transform: translate(-5%,-8%); }
    30% { transform: translate(3%,-4%); } 50% { transform: translate(-7%,5%); }
    70% { transform: translate(6%,8%); } 90% { transform: translate(-3%,3%); }
  }
  /* パネル接近時にシーンを沈めるディム */
  #dim {
    position: fixed; inset: 0; z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(2,3,5,.75) 0%, rgba(2,3,5,.92) 100%);
    opacity: 0;
  }
  #css3d {
    position: fixed; inset: 0; z-index: 3;
    pointer-events: none;
    overflow: hidden;
  }
  /* 回廊のミニマップ: 進捗バー+11章の目盛り(目盛り位置はJSが章の実配分から算出) */
  #progress-track {
    position: fixed; top: 0; left: 0; right: 0; z-index: 12;
    height: 2px;
    background: rgba(255,255,255,.05);
  }
  #progress {
    position: absolute; top: 0; left: 0;
    height: 100%; width: 0%;
    background: linear-gradient(to right, var(--gold), var(--champagne));
    box-shadow: 0 0 8px rgba(227,195,135,.5);
  }
  #progress-track .seg {
    position: absolute; top: 0;
    width: 1px; height: 5px;
    background: rgba(227,195,135,.45);
  }
  #scroller { position: relative; z-index: -1; width: 1px; }

  /* ---------- Story narration layer ---------- */
  #story {
    position: fixed; inset: 0; z-index: 4;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 22px;
    pointer-events: none;
    opacity: 0;
    text-align: center;
    padding: 0 24px;
  }
  #story .chap {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: .5em; text-indent: .5em;
    color: var(--gold);
  }
  #story .line {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 600;
    font-size: clamp(24px, 3.6vw, 44px);
    line-height: 1.7;
    letter-spacing: .08em;
    color: var(--text);
    text-shadow: 0 4px 40px rgba(0,0,0,.9);
    max-width: 900px;
  }
  #story .line em { font-style: normal; color: var(--champagne); }
  #story .rule {
    width: 1px; height: 52px;
    background: linear-gradient(to bottom, var(--champagne), transparent);
  }

  /* ---------- 1) ナレーションの一文字ずつの浮かび上がり ---------- */
  #story .line .st-ch {
    display: inline-block;
    opacity: 0;
    transform: translateY(.35em);
    filter: blur(7px);
    animation: stCh .7s cubic-bezier(.22,1,.36,1) forwards;
  }
  #story .line .st-ch.em { color: var(--champagne); }
  @keyframes stCh { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

  /* ---------- 7) フィナーレ: 鍵の受け渡し ---------- */
  #welcome {
    position: fixed; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.4s ease;
    padding: 0 24px;
  }
  #welcome.on { opacity: 1; }
  #welcome .card {
    display: flex; flex-direction: column;
    align-items: center; gap: 22px;
    text-align: center;
    padding: 40px clamp(28px, 6vw, 64px);
    background: rgba(4,5,9,.86);
    border: 1px solid rgba(227,195,135,.4);
    border-radius: 12px;
    box-shadow: 0 20px 70px rgba(0,0,0,.6), 0 0 60px rgba(227,195,135,.1);
    backdrop-filter: blur(2px);
  }
  #welcome .pin {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(22px, 4vw, 32px);
    letter-spacing: .5em; text-indent: .5em;
    color: var(--champagne);
    text-shadow: 0 0 24px rgba(227,195,135,.6);
  }
  #welcome .msg {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 600;
    font-size: clamp(16px, 2.2vw, 22px);
    letter-spacing: .08em; line-height: 1.9;
    color: var(--text);
    max-width: 520px;
  }

  /* ---------- 1)PC・10)PC: 見出しリビール+光沢スイープ(iOS負荷回避のためPC限定) ---------- */
  /* sheenは全環境でabsolute(空要素がパネルの高さ計測に影響しないように) */
  .holo-panel .sheen {
    position: absolute; inset: 0;
    border-radius: 10px;
    overflow: hidden;
    pointer-events: none;
  }
  @media (min-width: 761px) {
    .holo-panel.active h1, .holo-panel.active h2 {
      animation: hReveal .9s cubic-bezier(.22,1,.36,1) .15s both;
    }
    .holo-panel .sheen::after {
      content: '';
      position: absolute; top: -60%; bottom: -60%;
      width: 42%; left: -70%;
      background: linear-gradient(75deg,
        transparent,
        rgba(255,235,190,.07) 42%,
        rgba(255,235,190,.20) 50%,
        rgba(255,235,190,.07) 58%,
        transparent);
      transform: skewX(-12deg);
    }
    .holo-panel.active .sheen::after {
      animation: sheenSweep 1.5s ease .3s 1 both;
    }
  }
  @keyframes hReveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 -2% 0 0); }
  }
  @keyframes sheenSweep { from { left: -70%; } to { left: 135%; } }

  @media (pointer: fine) {
    .cursor-dot, .cursor-ring {
      position: fixed; top: 0; left: 0; z-index: 50; pointer-events: none;
      border-radius: 50%; transform: translate(-50%,-50%);
    }
    .cursor-dot { width: 4px; height: 4px; background: var(--champagne); }
    .cursor-ring {
      width: 34px; height: 34px;
      border: 1px solid rgba(227,195,135,.4);
      transition: width .25s ease, height .25s ease, border-color .25s ease;
    }
    /* 特定タグの列挙ではなく全要素を対象にし、カード型divなど列挙漏れの要素で
       矢印カーソルが復活してカスタムの丸と二重表示になるのを防ぐ */
    body.cursor-on, body.cursor-on * { cursor: none !important; }
    body.hovering .cursor-ring { width: 56px; height: 56px; border-color: rgba(227,195,135,.9); }
  }

  /* ---------- Nav ---------- */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px clamp(24px, 5vw, 64px);
    background: linear-gradient(to bottom, rgba(2,3,5,.85), transparent);
  }
  .logo img { height: 32px; display: block; }
  .nav-links { display: flex; align-items: center; gap: 26px; }
  .nav-links a {
    font-size: 12.5px; letter-spacing: .12em;
    color: var(--platinum); text-decoration: none;
    transition: color .25s ease;
  }
  .nav-links a:hover { color: var(--champagne); }
  .nav-links a.cta-mini {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: .2em;
    color: var(--champagne);
    padding: 11px 22px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    transition: background .3s ease, color .3s ease;
  }
  .nav-links a.cta-mini:hover { background: var(--champagne); color: var(--void); }
  @media (max-width: 900px) { .nav-links a:not(.cta-mini) { display: none; } }
  @media (max-width: 700px) { .nav-links { display: none; } }
  /* スマホでは.nav-links全体が消えるため、ブログへの導線だけロゴ横に常設する */
  .nav-blog-mobile { display: none; }
  @media (max-width: 700px) {
    .nav-blog-mobile {
      display: block;
      font-size: 11px; letter-spacing: .16em;
      color: var(--champagne); text-decoration: none;
      border: 1px solid rgba(227,195,135,.5);
      border-radius: 999px;
      padding: 7px 14px;
    }
  }

  /* ---------- Dot navigation ---------- */
  #dotnav {
    position: fixed; right: 26px; top: 50%; transform: translateY(-50%);
    z-index: 11;
    display: flex; flex-direction: column; gap: 14px;
  }
  #dotnav button {
    position: relative;
    width: 8px; height: 8px; border-radius: 50%;
    border: 1px solid rgba(227,195,135,.45);
    background: transparent;
    padding: 0;
    transition: background .3s ease, transform .3s ease;
  }
  #dotnav button.on { background: var(--champagne); transform: scale(1.3); box-shadow: 0 0 10px rgba(227,195,135,.6); }
  #dotnav button span {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px; letter-spacing: .2em;
    color: var(--champagne);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  #dotnav button:hover span, #dotnav button.on span { opacity: .9; }
  @media (max-width: 700px) {
    #dotnav { right: 8px; gap: 2px; }
    #dotnav button span { display: none; }
    /* タップ領域を拡大(見た目の点は同じまま、指で押しやすくする) */
    #dotnav button { padding: 7px 10px; }
  }

  /* ---------- Gate pass flash ---------- */
  #flash {
    position: fixed; inset: 0; z-index: 4;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(255,226,170,.5) 0%, rgba(227,195,135,.12) 45%, transparent 70%);
    opacity: 0;
  }

  /* =====================================================
     HOLO PANELS — 可読性優先
  ===================================================== */
  .holo-panel {
    width: min(820px, 94vw);
    background: linear-gradient(160deg, #0A0D16, #060810 55%, #080A12);
    border: 1px solid rgba(227,195,135,.4);
    border-radius: 10px;
    padding: 48px 52px;
    /* 周囲を暗く沈めるハローで背景タワーの光を遮る */
    box-shadow:
      0 0 0 1px rgba(227,195,135,.07),
      0 30px 90px rgba(0,0,0,.7),
      0 0 90px 40px rgba(2,3,5,.92),
      0 0 220px 120px rgba(2,3,5,.55);
    backface-visibility: hidden;
    transition: opacity .2s linear;
    opacity: .16;
    pointer-events: none;
  }
  .holo-panel.active { pointer-events: auto; animation: holoIn .8s ease; }
  @keyframes holoIn {
    0% { filter: brightness(2.1); }
    18% { filter: brightness(.9); }
    32% { filter: brightness(1.6); }
    100% { filter: brightness(1); }
  }
  .holo-panel::before, .holo-panel::after {
    content: '';
    position: absolute; width: 24px; height: 24px;
    border: 1px solid var(--champagne);
    opacity: .8;
  }
  .holo-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 10px 0 0 0; }
  .holo-panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 10px 0; }
  .holo-panel .panel-no {
    position: absolute; top: -34px; left: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: .34em;
    color: var(--gold);
  }
  .holo-panel.wide { width: min(1060px, 96vw); }

  .eyebrow {
    display: flex; align-items: center; gap: 14px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; letter-spacing: .3em;
    color: var(--gold);
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .eyebrow::before {
    content: ''; width: 36px; height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
  }
  h1, h2 {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .05em;
  }
  h1 { font-size: clamp(28px, 3.8vw, 46px); font-weight: 700; }
  h2 { font-size: clamp(22px, 2.6vw, 32px); }
  h1 em, h2 em { font-style: normal; color: var(--champagne); }
  .latin { font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: .05em; }
  .lead {
    margin-top: 20px;
    font-size: 14.5px;
    line-height: 2.15;
    color: var(--mist);
  }
  .lead strong { color: var(--text); font-weight: 400; }

  .btn-gold, .btn-ghost {
    display: inline-block;
    font-size: 13.5px; letter-spacing: .18em; text-indent: .09em;
    text-decoration: none;
    padding: 15px 36px;
    border-radius: 2px;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
  }
  .btn-gold { color: var(--void); background: linear-gradient(135deg, var(--champagne), #CBA562); font-weight: 500; }
  .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(227,195,135,.28); }
  .btn-ghost { color: var(--champagne); border: 1px solid var(--hairline); }
  .btn-ghost:hover { background: rgba(227,195,135,.1); }

  .spec { margin-top: 26px; border-top: 1px solid var(--hairline); }
  .spec li {
    list-style: none;
    display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
    padding: 13px 2px;
    border-bottom: 1px solid rgba(227,195,135,.12);
    font-size: 13.5px;
  }
  .spec .k { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .2em; color: var(--gold); flex: none; }
  .spec .v { color: var(--platinum); text-align: right; }

  /* Hero */
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
  .hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
  .hero-badges span {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px; letter-spacing: .12em;
    color: var(--platinum);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 8px 15px;
  }
  .hero-badges i { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 8px var(--champagne); animation: blink 2.2s ease infinite; }
  .hero-badges i.g { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
  .hero-badges i.c { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
  @keyframes blink { 50% { opacity: .3; } }
  .hero-stats { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 34px; border-top: 1px solid var(--hairline); padding-top: 24px; }
  .hero-stats .n { font-family: 'Cormorant Garamond', serif; font-size: 36px; color: var(--champagne); line-height: 1; }
  .hero-stats .l { margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .18em; color: var(--mist); }
  .scroll-cue {
    margin-top: 30px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: .4em;
    color: var(--mist);
  }
  .scroll-cue i { color: var(--champagne); font-style: normal; animation: cueDown 2.2s ease infinite; display: inline-block; }
  @keyframes cueDown { 0%,100% { transform: translateY(0);} 50% { transform: translateY(5px);} }

  /* Console */
  .titlebar {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 20px;
    border-bottom: 1px solid rgba(227,195,135,.14);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px; letter-spacing: .22em;
    color: var(--mist);
  }
  .titlebar .live { display: flex; align-items: center; gap: 8px; color: var(--ok); }
  .titlebar .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); animation: blink 2.2s ease infinite; }
  .demo-cta { margin-top: 26px; text-align: center; }
  .demo-note { margin-top: 11px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .1em; color: var(--mist); }

  /* 料金カードのホバー傾き(PC限定): 「選ぶ」行為に手触りを */
  .plan { transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
  @media (min-width: 761px) {
    .plan:hover {
      transform: perspective(700px) rotateY(-2.5deg) translateY(-5px);
      border-color: rgba(227,195,135,.55);
      box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 24px rgba(227,195,135,.12);
    }
    .plan.hero-plan:hover {
      transform: perspective(700px) rotateY(2deg) translateY(-6px) scale(1.012);
    }
  }

  /* スクリーンリーダー・SEO用の不可視見出し */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
  }

  /* ハニーポット(botのみが入力する罠フィールド。人間には見えない) */
  .hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  /* フォームのプライバシーポリシー同意文言 */
  .form-consent {
    margin: 14px 0 4px;
    font-size: 11px;
    line-height: 1.9;
    color: var(--mist);
  }
  .form-consent a { color: var(--champagne); text-decoration: underline; }

  /* 料金パネルの簡易FAQ */
  .faq {
    margin-top: 22px;
    border-top: 1px solid var(--hairline);
    padding-top: 16px;
    display: grid;
    gap: 12px;
  }
  .faq-item { font-size: 12px; line-height: 1.9; }
  .faq-q {
    color: var(--champagne);
    font-weight: 500;
    margin-bottom: 2px;
  }
  .faq-a { color: var(--mist); }

  /* 実画面スクリーンショット */
  .shot {
    margin-top: 20px;
    border: 1px solid rgba(227,195,135,.35);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0,0,0,.55), 0 0 40px rgba(227,195,135,.08);
    position: relative;
    /* 比率は各画像の実寸に合わせてindex.php側でインラインstyle指定(一律16:10だと
       横長のカレンダー画像などで余白ができてしまうため) */
    background: linear-gradient(100deg, #0A0D16 30%, #12161F 50%, #0A0D16 70%);
    background-size: 200% 100%;
    animation: shotSkeleton 1.6s ease-in-out infinite;
  }
  @keyframes shotSkeleton { to { background-position: -200% 0; } }
  .shot img {
    display: block; width: 100%; height: auto;
    opacity: 0;
    transition: opacity .4s ease;
  }
  .shot img.loaded { opacity: 1; }
  .shot:has(img.loaded) { animation: none; background: none; }
  .shot .cap {
    position: absolute; top: 10px; right: 12px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8.5px; letter-spacing: .22em;
    color: var(--champagne);
    background: rgba(5,6,9,.75);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 5px 12px;
  }

  /* pain / solution */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 38px; margin-top: 6px; }
  .pain-list { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
  .pain-item {
    display: flex; gap: 10px; align-items: baseline;
    font-size: 12.5px; color: var(--mist);
    padding: 11px 14px;
    border: 1px solid rgba(227,195,135,.14);
    border-radius: 5px;
    line-height: 1.7;
  }
  .pain-item b { color: var(--platinum); font-weight: 400; flex: none; }
  .check-list { margin-top: 20px; }
  .check-list div {
    position: relative;
    padding: 11px 0 11px 26px;
    font-size: 13.5px; color: var(--platinum);
    border-bottom: 1px solid rgba(227,195,135,.12);
  }
  .check-list div::before { content: '✓'; position: absolute; left: 2px; color: var(--champagne); font-family: 'Cormorant Garamond', serif; }

  /* features */
  .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
  .feature { padding: 17px 15px; border: 1px solid rgba(227,195,135,.16); border-radius: 5px; transition: border-color .3s ease; }
  .feature:hover { border-color: rgba(227,195,135,.5); }
  .feature .ic { font-size: 17px; }
  .feature .nm { margin-top: 8px; font-family: 'Shippori Mincho B1', serif; font-size: 13px; letter-spacing: .04em; }
  .feature .ds { margin-top: 6px; font-size: 10.5px; line-height: 1.8; color: var(--mist); }

  /* tax */
  .tax-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
  .tax-chips span { font-size: 12.5px; color: var(--platinum); border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 16px; }
  .tax-chips span.muted { color: var(--mist); border-style: dashed; }
  .tax-receipt { border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
  .tax-receipt .hd { padding: 13px 18px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--mist); border-bottom: 1px solid rgba(227,195,135,.14); }
  .tax-receipt .row { display: flex; justify-content: space-between; padding: 12px 18px; font-size: 13px; border-bottom: 1px solid rgba(227,195,135,.1); }
  .tax-receipt .row .l { color: var(--mist); }
  .tax-receipt .row .v { font-family: 'IBM Plex Mono', monospace; color: var(--platinum); }
  .tax-receipt .row.hl { background: rgba(127,216,164,.06); }
  .tax-receipt .row.hl .l, .tax-receipt .row.hl .v { color: var(--ok); }
  .tax-note { margin-top: 14px; font-size: 11px; line-height: 1.9; color: var(--mist); }

  /* roles */
  .roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
  .role { padding: 26px 22px; border: 1px solid var(--hairline); border-radius: 5px; }
  .role .ic { font-size: 22px; }
  .role .nm { margin-top: 12px; font-family: 'Shippori Mincho B1', serif; font-size: 17px; letter-spacing: .08em; }
  .role .ds { margin-top: 10px; font-size: 11.5px; line-height: 1.95; color: var(--mist); }
  .role .perms { margin-top: 15px; display: flex; flex-direction: column; gap: 7px; }
  .role .perms span { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .08em; color: var(--ok); }
  .role .perms span::before { content: '○ '; }
  .role .perms span.no { color: var(--mist); }
  .role .perms span.no::before { content: '✗ '; }

  /* integration */
  .int-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
  .int-card {
    padding: 26px 24px;
    border: 1px solid transparent;
    border-radius: 5px;
    background:
      linear-gradient(rgba(6,8,14,.5), rgba(6,8,14,.5)) padding-box,
      linear-gradient(135deg, rgba(227,195,135,.55), rgba(227,195,135,.06), rgba(227,195,135,.4)) border-box;
  }
  .int-card .tag { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .22em; color: var(--gold); }
  .int-card .nm { margin-top: 9px; font-family: 'Cormorant Garamond', serif; font-size: 27px; }
  .int-card .ds { margin-top: 10px; font-size: 11.5px; line-height: 1.95; color: var(--mist); }
  .int-card .badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
  .int-card .badges span { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .06em; color: var(--platinum); border: 1px solid var(--hairline); border-radius: 999px; padding: 5px 11px; }
  .int-card a { display: inline-block; margin-top: 15px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--champagne); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }
  .int-others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
  .int-other { padding: 15px; border: 1px solid rgba(227,195,135,.16); border-radius: 5px; font-size: 10.5px; line-height: 1.85; color: var(--mist); }
  .int-other b { display: block; font-weight: 400; font-size: 12.5px; color: var(--platinum); margin-bottom: 5px; }

  /* pricing */
  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
  .plan { position: relative; padding: 26px 22px; border: 1px solid var(--hairline); border-radius: 5px; }
  .plan.hero-plan {
    background:
      linear-gradient(rgba(6,8,14,.5), rgba(6,8,14,.5)) padding-box,
      linear-gradient(135deg, rgba(227,195,135,.7), rgba(227,195,135,.08), rgba(227,195,135,.5)) border-box;
    border: 1px solid transparent;
  }
  .plan .name { font-family: 'Shippori Mincho B1', serif; font-size: 16px; letter-spacing: .08em; }
  .plan .name small { font-size: 10px; color: var(--mist); font-family: 'Noto Sans JP', sans-serif; display: block; margin-top: 4px; }
  .plan .num { margin-top: 14px; font-family: 'Cormorant Garamond', serif; font-size: 38px; color: var(--champagne); line-height: 1; }
  .plan .num small { font-size: .32em; color: var(--mist); }
  .plan .camp { margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .12em; color: var(--ok); }
  .plan ul { margin-top: 15px; }
  .plan ul li { list-style: none; font-size: 11.5px; line-height: 2; color: var(--mist); padding-left: 14px; position: relative; }
  .plan ul li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
  .pricing-note { margin-top: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .08em; line-height: 2; color: var(--mist); }

  /* flow */
  .flow { display: flex; gap: 0; margin-top: 26px; flex-wrap: wrap; }
  .step { flex: 1; min-width: 150px; padding: 22px 15px 19px; border: 1px solid var(--hairline); border-left: none; text-align: center; }
  .step:first-child { border-left: 1px solid var(--hairline); border-radius: 6px 0 0 6px; }
  .step:last-child { border-radius: 0 6px 6px 0; }
  .step .no { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: var(--gold); }
  .step .t { margin-top: 7px; font-family: 'Shippori Mincho B1', serif; font-size: 13px; letter-spacing: .05em; }
  .step .d { margin-top: 7px; font-size: 10.5px; line-height: 1.85; color: var(--mist); }

  /* contact */
  .contact-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 34px; margin-top: 6px; }
  .contact-info { margin-top: 22px; border-top: 1px solid var(--hairline); }
  .contact-info div { display: flex; gap: 16px; align-items: baseline; padding: 12px 2px; border-bottom: 1px solid rgba(227,195,135,.12); font-size: 13px; }
  .contact-info .k { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .2em; color: var(--gold); width: 52px; flex: none; }
  .contact-info .v { color: var(--platinum); }
  .contact-info .v a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
  .contact-info .v a:hover { color: var(--champagne); border-bottom-color: currentColor; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  .fg { margin-bottom: 12px; }
  .fg label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .16em; color: var(--gold); margin-bottom: 7px; }
  .fg input, .fg select, .fg textarea {
    width: 100%;
    background: rgba(5,6,9,.7);
    border: 1px solid rgba(227,195,135,.2);
    border-radius: 3px;
    color: var(--text);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 13px; font-weight: 300;
    padding: 10px 12px;
    transition: border-color .25s ease;
  }
  .fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: rgba(227,195,135,.6); }
  .fg textarea { min-height: 66px; resize: vertical; }
  .fg select option { background: #0B0D13; }
  .btn-submit {
    width: 100%;
    border: none;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 13.5px; letter-spacing: .18em; text-indent: .09em;
    color: var(--void);
    background: linear-gradient(135deg, var(--champagne), #CBA562);
    padding: 14px;
    border-radius: 2px;
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(227,195,135,.28); }
  .form-error {
    margin-top: 14px;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--orange);
    background: rgba(232,160,99,.08);
    border: 1px solid rgba(232,160,99,.3);
    border-radius: 5px;
  }
  .form-error a { color: var(--champagne); text-decoration: underline; }
  .form-success { text-align: center; padding: 32px 0; display: none; }
  .form-success .ok-ic { font-size: 28px; }
  .form-success .t1 { margin-top: 12px; font-family: 'Shippori Mincho B1', serif; font-size: 15px; }
  .form-success .t2 { margin-top: 8px; font-size: 11.5px; color: var(--mist); }
  .footer-line {
    margin-top: 28px; padding-top: 18px;
    border-top: 1px solid var(--hairline);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px; letter-spacing: .1em; line-height: 2;
    color: var(--mist);
  }

  @media (max-width: 760px) {
    /* iOSのGPUメモリ対策:
       巨大なぼかし影(220px等)は各パネルのレイヤーを3倍解像度で肥大化させ
       Safariのコンテンツプロセスをクラッシュさせるため、スマホでは軽量な影に置換。
       全画面200%のアニメーショングレインも同様に無効化(opacity .03で視覚差なし)。 */
    .grain { display: none; }
    .holo-panel {
      padding: 32px 26px;
      box-shadow:
        0 0 0 1px rgba(227,195,135,.07),
        0 14px 40px rgba(0,0,0,.72);
    }
    /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動ズームして表示が壊れるため */
    .fg input, .fg select, .fg textarea { font-size: 16px; }
    /* 縦長パネルは62vhにクリップして下端をフェード、全文は「詳細を表示」で見る */
    .holo-panel.clipped {
      max-height: 62vh;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 97%);
              mask-image: linear-gradient(to bottom, #000 74%, transparent 97%);
    }

    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .duo, .contact-wrap, .int-grid { grid-template-columns: 1fr; }
    .roles-grid, .plans { grid-template-columns: 1fr; gap: 10px; }
    .int-others { grid-template-columns: repeat(2, 1fr); }
    .step { min-width: 46%; border-left: 1px solid var(--hairline); border-radius: 6px !important; margin: 3px; }
    .form-row { grid-template-columns: 1fr; }
  }

  /* ---------- Mobile 拡大ビュー: 画面下部固定の開くボタン ---------- */
  #ov-open {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 12;
    display: none;
    padding: 14px 28px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    letter-spacing: .16em;
    white-space: nowrap;
    color: var(--void);
    background: linear-gradient(135deg, var(--champagne), #CBA562);
    border: none;
    border-radius: 999px;
    box-shadow: 0 10px 32px rgba(0,0,0,.55), 0 0 24px rgba(227,195,135,.25);
  }
  #ov-open.on { display: block; }

  /* ---------- Mobile 拡大ビュー(3D外の2Dオーバーレイ) ---------- */
  #overlay {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(3,4,7,.95);
    display: none;
  }
  #overlay.on { display: block; }
  #overlay .ov-scroll {
    position: absolute; inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 66px 12px 48px;
  }
  #overlay .holo-panel {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%; max-width: 680px;
    margin: 0 auto;
    pointer-events: auto;
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  #ov-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--hairline);
    background: rgba(6,8,14,.92);
    color: var(--champagne);
    font-size: 17px; line-height: 1;
  }

  /* ---------- Flat story headers (モバイル/reduced motion) ---------- */
  .flat-story { text-align: center; padding: 14px 20px 0; max-width: 700px; }
  .flat-story .chap {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; letter-spacing: .4em; text-indent: .4em;
    color: var(--gold);
    margin-bottom: 12px;
  }
  .flat-story .line {
    font-family: 'Shippori Mincho B1', serif;
    font-weight: 600;
    font-size: clamp(20px, 5.6vw, 30px);
    line-height: 1.8; letter-spacing: .06em;
    text-shadow: 0 4px 30px rgba(0,0,0,.9);
  }
  .flat-story .line em { font-style: normal; color: var(--champagne); }
  body.flat #flat-wrap { padding-top: 110px; gap: 52px; }
  body.flat .holo-panel { box-shadow: 0 20px 60px rgba(0,0,0,.6); }

  /* ---------- Flat fallback (reduced motion) ---------- */
  body.flat #css3d, body.flat #scroller, body.flat #dotnav, body.flat #story { display: none; }
  body.flat #flat-wrap {
    position: relative; z-index: 4;
    display: flex; flex-direction: column; align-items: center; gap: 70px;
    padding: 140px 20px 90px;
  }
  body.flat .holo-panel { opacity: 1; pointer-events: auto; position: relative; }
  #flat-wrap { display: none; }
  body.flat #flat-wrap { display: flex; }
  @media (prefers-reduced-motion: reduce) {
    .grain, .hero-badges i, .titlebar .live::before, .scroll-cue i { animation: none; }
    #loader { display: none; }
  }


/* ================================================================
   v3 エレガンス・レイヤー — 引き算の気品
   パネルは闇に直接浮かび、区切りは細い罫1本。箱・枠・飾りを排し、
   金は「アクセント」(eyebrow・強調・価格・CTA・リンク)に限定する。
   ================================================================ */

/* パネル: 箱をやめ、闇の溜まりの上に浮かぶ
   (完全透明だと奥のパネルが透けて混線するため、
    縁が透明に溶ける柔らかいスクリムで背後だけを沈める) */
.holo-panel {
  background: radial-gradient(ellipse 115% 105% at 50% 42%,
    rgba(5, 6, 9, .92) 0%,
    rgba(5, 6, 9, .74) 52%,
    rgba(5, 6, 9, 0) 80%);
  border: none;
  box-shadow: none;
}
.holo-panel::before,
.holo-panel::after { display: none; }
.holo-panel .sheen { display: none; }

/* タイポの節制: 小さく・細く・字間を広く。静かに語る */
.holo-panel h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 500; letter-spacing: .14em; }
.holo-panel h2 { font-size: clamp(20px, 2.2vw, 29px); font-weight: 500; letter-spacing: .12em; }
.eyebrow { font-size: 9.5px; letter-spacing: .4em; }
.lead { font-size: 12.5px; line-height: 2.35; }
#story .line { letter-spacing: .18em; font-weight: 500; }

/* カード類: 枠の箱 → 罫1本の区切りへ */
.feature,
.role,
.int-card,
.plan,
.step {
  background: none;
  border: none;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
}
.step:first-child { border-left: none; border-radius: 0; }
.step:last-child { border-radius: 0; }
.plan:hover { transform: translateY(-4px); box-shadow: none; border-color: rgba(227,195,135,.4); }
.plan.hero-plan:hover { transform: translateY(-5px); }
.plan.hero-plan { border-top: 1px solid rgba(227,195,135,.7); background: none; }

/* 金の使用をアクセントに限定(構造ラベルは無彩色へ) */
.spec .k { color: rgba(233, 228, 216, .4); }
.plan ul li::before { color: rgba(233, 228, 216, .3); }
.int-card .tag { color: rgba(233, 228, 216, .4); }

/* CTA: 塗りのボタン → 細枠のゴースト(ホバーで満ちる) */
.btn-gold {
  background: none;
  color: var(--champagne);
  border: 1px solid rgba(227, 195, 135, .55);
  font-weight: 400;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--champagne), #CBA562);
  color: var(--void);
  border-color: transparent;
}
.btn-submit {
  background: none;
  color: var(--champagne);
  border: 1px solid rgba(227, 195, 135, .55);
  font-weight: 400;
  transition: background .35s ease, color .35s ease;
}
.btn-submit:hover {
  background: linear-gradient(135deg, var(--champagne), #CBA562);
  color: var(--void);
}

/* フォーム: 箱の入力欄 → 下線1本 */
.fg input, .fg select, .fg textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding-left: 0;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color: transparent;
  border-bottom-color: rgba(227, 195, 135, .7);
}

/* 実画面: 額装は細い罫のみ */
.shot {
  border: 1px solid var(--hairline);
  box-shadow: none;
}


/* ---------- ナレーションの可読性(改行位置の制御とスマホ最適化) ---------- */
/* 句読点までを1つのまとまりとして扱い、単語の途中で折り返させない */
.st-seg { display: inline-block; white-space: nowrap; }

@media (max-width: 760px) {
  /* スマホは字間を詰めて1行に収まる文字数を増やし、行間で読みやすさを確保 */
  #story .line {
    font-size: 20px;
    letter-spacing: .04em;
    line-height: 1.95;
    max-width: 100%;
  }
  #story { padding: 0 18px; gap: 16px; }
  #story .chap { font-size: 9.5px; letter-spacing: .38em; text-indent: .38em; }
  /* 背景が明るい章でも文字が沈まないよう、影を少し強める */
  #story .line { text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 42px rgba(0,0,0,.7); }
}


/* ================================================================
   AXION JOURNAL — ブログの共通スタイル(LPの世界観を引き継ぐ読み物レイヤー)
   ================================================================ */
body.blog-doc {
  background: #050609;
  color: #C6CBD6;
  font-family: 'Noto Sans JP', sans-serif;
  min-height: 100vh;
}
body.blog-doc #loader, body.blog-doc #webgl, body.blog-doc .vignette,
body.blog-doc .grain, body.blog-doc #dim, body.blog-doc #css3d,
body.blog-doc #story, body.blog-doc #welcome, body.blog-doc #progress,
body.blog-doc #progress-track, body.blog-doc #dotnav,
body.blog-doc .cursor-ring, body.blog-doc .cursor-dot { display: none !important; }

.blog-wrap { max-width: 820px; margin: 0 auto; padding: 34px 24px 90px; }

.blog-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 56px;
}
.blog-home-link { flex-shrink: 0; }
.blog-home-link img { height: 30px; width: auto; display: block; }
.blog-cta {
  flex-shrink: 0; white-space: nowrap;
  font-size: 12px; letter-spacing: .18em;
  color: var(--champagne); text-decoration: none;
  border: 1px solid rgba(227,195,135,.55);
  border-radius: 999px; padding: 9px 20px;
  transition: background .35s ease, color .35s ease;
}
.blog-cta:hover { background: linear-gradient(135deg, var(--champagne), #CBA562); color: var(--void); }
.blog-cta.big { font-size: 13px; padding: 13px 30px; display: inline-block; margin-top: 14px; }

.blog-head { margin-bottom: 46px; }
.blog-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .4em; color: var(--champagne);
  margin-bottom: 14px;
}
.blog-head h1 {
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 500; font-size: clamp(26px, 4.5vw, 38px);
  letter-spacing: .1em; color: #E9E4D8; margin: 0 0 14px;
}
.blog-lede { font-size: 13px; line-height: 2.1; color: #9AA3B6; max-width: 560px; }

/* v3.6.5まで: タイトルの改行を句読点までのまとまりに限定(nowrap)していたが、
   ブログの記事タイトルは句読点間の1塊が長くなりやすく、画面幅を超えても折り返せず
   右端で見切れる不具合があった(LPの短いナレーションでは問題にならなかった)。
   標準の折り返し(文字間ならどこでも改行可)に戻す。 */

.post-list { display: grid; gap: 0; }
.post-card { border-top: 1px solid rgba(255,255,255,.09); }
.post-card:last-child { border-bottom: 1px solid rgba(255,255,255,.09); }
.post-card-link { display: block; padding: 26px 6px; text-decoration: none; transition: background .3s ease; }
.post-card-link:hover { background: rgba(255,255,255,.025); }
.post-meta {
  display: flex; gap: 14px; align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: .16em; color: #7A8296;
  margin-bottom: 10px;
}
.post-cat { color: var(--champagne); text-decoration: none; }
.post-title {
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 500; font-size: clamp(17px, 2.6vw, 22px);
  letter-spacing: .06em; line-height: 1.7;
  color: #E9E4D8; margin: 0 0 10px;
}
.post-excerpt { font-size: 12.5px; line-height: 2; color: #9AA3B6; margin: 0 0 12px; }
.post-more { font-size: 11px; letter-spacing: .2em; color: var(--champagne); }

.blog-pagination { margin-top: 40px; text-align: center; }
.blog-pagination .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
/* LP本編の `.nav-links a:not(.cta-mini) { display:none }` (900px以下で非表示)は、
   同じ「nav-links」というクラス名を使うWordPress標準のページネーション出力にも
   意図せず適用され、900px以下(ほぼ全スマホ)で「2」「次へ」のリンクが消えていた
   (「1」は<span>で<a>ではないため巻き込まれず残っていた)。
   ブログのページネーション内のリンクだけ、常に表示されるよう明示的に上書きする。 */
body.blog-doc .blog-pagination .nav-links a { display: inline-block; }
.blog-pagination .page-numbers {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: #9AA3B6; text-decoration: none;
  padding: 8px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover { color: var(--champagne); border-color: rgba(227,195,135,.5); }

.blog-empty { color: #9AA3B6; font-size: 13px; padding: 40px 0; }

@media (max-width: 480px) {
  .blog-wrap { padding: 24px 18px 70px; }
  .blog-top { margin-bottom: 40px; }
  .blog-home-link img { height: 24px; }
  .blog-cta { font-size: 10.5px; letter-spacing: .1em; padding: 7px 14px; }
}

.blog-foot {
  margin-top: 70px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 11.5px; color: #7A8296;
}
.blog-foot a { color: var(--champagne); text-decoration: none; letter-spacing: .1em; }

/* ---------- 記事ページ ---------- */
.article-wrap { max-width: 760px; }
.article-title {
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 500; font-size: clamp(24px, 4.2vw, 34px);
  letter-spacing: .08em; line-height: 1.8;
  color: #E9E4D8; margin: 12px 0 26px;
}
.article-hero { margin: 0 0 34px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; }
.article-hero img { display: block; width: 100%; height: auto; }

.art-body { font-size: 14.5px; line-height: 2.25; color: #C6CBD6; }
.art-body h2 {
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 500; font-size: 21px; letter-spacing: .08em;
  color: #E9E4D8; margin: 54px 0 18px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(227,195,135,.3);
}
.art-body h3 {
  font-family: 'Shippori Mincho B1', serif;
  font-weight: 500; font-size: 17px; letter-spacing: .06em;
  color: #E9E4D8; margin: 40px 0 12px;
}
.art-body p { margin: 0 0 1.6em; }
.art-body a { color: var(--champagne); }
.art-body ul, .art-body ol { padding-left: 1.5em; margin: 0 0 1.6em; }
.art-body li { margin-bottom: .5em; }
.art-body img { max-width: 100%; height: auto; border-radius: 6px; }
.art-body blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 20px;
  border-left: 2px solid rgba(227,195,135,.5);
  color: #9AA3B6;
}
.art-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.8em; font-size: 13px; }
.art-body th, .art-body td { border: 1px solid rgba(255,255,255,.14); padding: 10px 12px; text-align: left; }
.art-body th { color: #E9E4D8; background: rgba(255,255,255,.04); font-weight: 500; }
.art-body code {
  font-family: 'IBM Plex Mono', monospace; font-size: .88em;
  background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 3px;
}

.article-cta {
  margin: 64px 0 0; padding: 30px 26px;
  border-top: 1px solid rgba(227,195,135,.4);
  border-bottom: 1px solid rgba(255,255,255,.09);
  text-align: center;
}
.article-cta-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .34em; color: var(--champagne);
  margin-bottom: 12px;
}
.article-cta p { font-size: 13px; line-height: 2.1; color: #C6CBD6; margin: 0; }

/* LP本編の共通セレクタ `nav { position:fixed; padding:...; background:... }` は
   タグ名指定のため、ブログページ内のあらゆる<nav>要素に意図せず継承されてしまう。
   前回は記事の前後ナビ(.article-nav)だけを個別にリセットしたが、WordPress標準の
   ページネーション機能(the_posts_pagination)も内部的に<nav>タグで出力されるため、
   同じ不具合(固定表示になりロゴ・ボタンと重なる)が再発していた。
   個別対応ではなく、ブログページ内の<nav>すべてを一括でリセットする。 */
body.blog-doc nav {
  position: static; top: auto; left: auto; right: auto; z-index: auto;
  padding: 0; background: none;
}

.article-nav {
  position: static; top: auto; left: auto; right: auto; z-index: auto;
  padding: 0; background: none;
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 44px; font-size: 12.5px;
}
.article-nav > div { max-width: 48%; }
@media (max-width: 480px) {
  /* 前後の記事タイトルが長いとスマホ幅で窮屈になるため、縦積みに切り替える */
  .article-nav { flex-direction: column; gap: 14px; }
  .article-nav > div { max-width: 100%; }
  .article-nav-next { text-align: left; }
}
.article-nav a { color: #9AA3B6; text-decoration: none; line-height: 1.8; }
.article-nav a:hover { color: var(--champagne); }
.article-nav-next { text-align: right; }