:root{
  --bg:#ffffff;
  --bg-soft:#f5f5f7; /* Apple-like soft gray */
  --surface: rgba(15,17,21,.045);
  --surface2: rgba(15,17,21,.028);
  --text:#0b0c0f;
  --muted: rgba(11,12,15,.62);
  --muted2: rgba(11,12,15,.44);
  --accent:#0071e3;
  --line: rgba(11,12,15,.10);
  --line-soft: rgba(11,12,15,.06);
  --shadow: 0 70px 200px rgba(0,0,0,.18);
  --radius: 28px;
  --max: 1120px;
  --max-wide: 1440px;
  
  /* Mini page layout (Personal Page) */
  --mini-max: 1360px;
  --mini-side: 32px;
  --mini-gap: 40px;

  /* One unified modern sans stack (no serif mix) */
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro Display", "Segoe UI",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
    "Yu Gothic", Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  padding-top:60px;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(circle at 50% -22%, rgba(0,113,227,.10), transparent 62%),
    linear-gradient(180deg, rgba(11,12,15,.028), transparent 360px),
    var(--bg);
  color: var(--text);
}

/* Dynamic background (Wa-Modern Museum Wall)
   - Canvas is fixed behind the whole site.
   - This does NOT affect the “block” concept (it is purely visual).
*/
canvas#bg-museum-wall{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  z-index: -1;
  pointer-events:none;
  filter: contrast(104%) saturate(102%);
  opacity: 1;
  transition: opacity .45s ease;
}

/* When the mini page overlay is open, hide the default background so the mini
   page can have its own dedicated animated backdrop. */
body.overlay-open canvas#bg-museum-wall{
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  canvas#bg-museum-wall{ display:none; }
}

a{color: var(--accent); text-decoration: none;}
a:hover{text-decoration: underline;}


/* Accessibility helpers */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Focus ring (keyboard only) */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible{
  outline: 2px solid rgba(0,113,227,.75);
  outline-offset: 3px;
}
:where(button, summary, .toc-link, .toc-item, .chip):focus-visible{
  box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}

.container{max-width: var(--max); margin:0 auto; padding:0 20px;}

/* Header */
.site-header{
  position: fixed;
  top:0;
  left:0;
  right:0;
  z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner{
  height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{display:flex; align-items:baseline; gap:10px;}
.brand-mark{
  position: relative;
  display:inline-block;
  padding-left: calc(22px + 8px);
  font-weight:800;
  letter-spacing:.02em;
}
.brand-mark::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width: 22px;
  height: 22px;
  background: url("./assets/kazera_mark_x.png") center/contain no-repeat;
  opacity: .92;
  transform: translateY(-50%);
}
.brand-tag{font-size:12px; color: var(--muted2);}

@media (max-width: 520px){
  .brand-mark{ padding-left: calc(20px + 8px); }
  .brand-mark::before{ width:20px; height:20px; }
}

.nav{display:flex; align-items:center; gap:14px;}
.nav-link{
  font-size:13px;
  color: rgba(11,12,15,.72);
  padding:8px 8px;
  border-radius: 999px;
  position:relative;

  /* ensure buttons match links */
  font-family: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.nav-link:hover{color: rgba(11,12,15,.92); text-decoration:none;}
.nav-link.active{
  color: rgba(11,12,15,.92);
  font-weight:700;
}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:4px;
  height:2px;
  border-radius:999px;
  background: rgba(11,12,15,.90);
}

/* Header dropdown (Services...) */
.nav-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.nav-dd-trigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.nav-dd-caret{
  width:7px;
  height:7px;
  border-right:1.5px solid rgba(11,12,15,.55);
  border-bottom:1.5px solid rgba(11,12,15,.55);
  transform: rotate(45deg) translateY(-1px);
  opacity:.85;
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-dropdown:hover .nav-dd-caret,
.nav-dropdown:focus-within .nav-dd-caret{
  transform: rotate(-135deg) translateY(1px);
  opacity:1;
}

.nav-dd-panel{
  position:absolute;
  top: calc(100% + 10px);
  left:50%;
  transform: translate(-50%, -8px);
  min-width: 200px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 18px 40px rgba(10,14,22,.12);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  z-index: 80;
}

/* bridge the hover gap */
.nav-dd-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}

.nav-dropdown:hover .nav-dd-panel,
.nav-dropdown:focus-within .nav-dd-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform: translate(-50%, 0);
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-dd-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(11,12,15,.72);
  text-decoration:none;
  transition: background 180ms ease, color 180ms ease;
}

.nav-dd-item:hover{
  background: rgba(255,255,255,.72);
  color: rgba(11,12,15,.92);
  text-decoration:none;
}

.nav-dd-item.active{
  background: rgba(11,12,15,.06);
  color: rgba(11,12,15,.92);
  font-weight:700;
}

/* Hero (Top AI) */
.hero{padding: 0;}
.hero-inner{min-height:auto;}

.ai-hero{
  width:100%;
  min-height: clamp(560px, 74vh, 900px); /* 余白を増やして堂々と */
  padding: 92px 0 72px;                 /* 上を厚めにして少し下げる */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 32px;
  text-align:center;
}

.ai-stage{
  position:relative;
  width:100%;
  max-width: 980px;   /* 少しワイド */
  padding: 78px 0 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 12px;
}

/* AI presence (soft dotted sphere) */
.ai-stage::before{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  transform: translate(-50%,-50%);
  width: min(520px, 78vw);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 42%, rgba(0,113,227,.16), rgba(0,113,227,0) 62%),
    radial-gradient(circle, rgba(0,113,227,.26) 1px, transparent 1px);
  background-size: auto, 11px 11px;
  opacity: .92;
  pointer-events:none;
  z-index:-1;
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.92) 34%, rgba(0,0,0,.55) 52%, rgba(0,0,0,0) 72%);
  mask-image: radial-gradient(circle, rgba(0,0,0,.92) 34%, rgba(0,0,0,.55) 52%, rgba(0,0,0,0) 72%);
}

.ai-stage::after{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  transform: translate(-50%,-50%) rotate(-8deg);
  width: min(820px, 94vw);
  height: min(560px, 74vw);
  border-radius: 999px;
  border: 1px solid rgba(11,12,15,.05);
  pointer-events:none;
  z-index:-2;
}

.ai-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.16em;
  color: rgba(11,12,15,.52);
}
.ai-dot{
  --eng: 12px;                 /* 見える最小ライン。11〜14で調整可 */
  width: var(--eng);
  height: var(--eng);
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;

  /* 土台はミニマル（ほんの少しだけハイライト） */
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255,255,255,.75) 0 18%,
      rgba(255,255,255,0) 45%),
    var(--accent);

  /* 外側の“存在感”は維持（既存と同じ思想） */
  box-shadow:
    0 0 0 7px rgba(0,113,227,.10),
    inset 0 -1px 1px rgba(0,0,0,.18);

  transform: translateZ(0);
}

/* 外リング：ブレード（大きい形＝小さくても動きが見える） */
.ai-dot::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;

  background: conic-gradient(from 0deg,
    rgba(255,255,255,.95) 0 26deg,
    rgba(255,255,255,0) 26deg 120deg,
    rgba(255,255,255,.70) 120deg 142deg,
    rgba(255,255,255,0) 142deg 240deg,
    rgba(255,255,255,.85) 240deg 262deg,
    rgba(255,255,255,0) 262deg 360deg
  );

  /* リング化（真ん中は抜く） */
  -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 44% 84%, transparent 84%);
  mask: radial-gradient(circle, transparent 0 44%, #000 44% 84%, transparent 84%);

  opacity: .92;
  animation: aiEngineSpin .52s linear infinite;
  will-change: transform;
}

/* 内リング：逆回転（“中で別パーツが回ってる”＝エンジン感） */
.ai-dot::after{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: inherit;
  pointer-events:none;

  background: conic-gradient(from 90deg,
    rgba(255,255,255,0) 0 210deg,
    rgba(255,255,255,.70) 210deg 245deg,
    rgba(255,255,255,0) 245deg 360deg
  );

  -webkit-mask: radial-gradient(circle, transparent 0 38%, #000 38% 70%, transparent 70%);
  mask: radial-gradient(circle, transparent 0 38%, #000 38% 70%, transparent 70%);

  opacity: .58;
  animation: aiEngineSpin2 .92s linear infinite reverse;
  will-change: transform;
}

@keyframes aiEngineSpin { to { transform: rotate(360deg); } }
@keyframes aiEngineSpin2 { to { transform: rotate(360deg); } }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ai-dot::before,
  .ai-dot::after{ animation: none !important; }
}
.ai-name{color: rgba(11,12,15,.86); letter-spacing:.02em;}
.ai-sub{font-weight:600; color: rgba(11,12,15,.42); letter-spacing:.02em;}
.ai-kicker-label{
  letter-spacing: inherit;
  text-transform: uppercase;
  color: rgba(11,12,15,.56);
}

.hero-tagline{
  margin: 0;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  color: rgba(11,12,15,.68);
}

.hero-title{
  margin: 6px 0 0;
  font-weight: 260;
  font-size: clamp(44px, 6.2vw, 80px);
  letter-spacing: 0.16em;
  line-height: 1.02;
}
/* ---- Hero: subtle light sweep (title) ---- */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  body[data-page="home"] .hero-title{
    background: linear-gradient(110deg,
      rgba(11,12,15,.92) 0%,
      rgba(11,12,15,.92) 42%,
      rgba(255,255,255,.92) 50%,
      rgba(11,12,15,.92) 58%,
      rgba(11,12,15,.92) 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    animation: heroShine 7.2s ease-in-out infinite;
  }
}

@keyframes heroShine{
  0%, 72% { background-position: 0% 50%; }  /* 長めに停止 */
  100% { background-position: 100% 50%; }   /* たまに流れる */
}
.hero-lead{
  margin:0;
  color: var(--muted);
  line-height:1.85;
  max-width: 56ch;
  font-size:15px;
}

.ai-controls{
  width:100%;
  max-width: 980px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
}

.chips-wrap{
  width:100%;
  max-width: 980px;
  margin: 0 auto;
}

.chips{
  display:flex;
  flex-wrap:nowrap;              /* ★ 1段固定 */
  justify-content:center;        /* 収まるときは中央 */
  gap:10px;
  margin:0;
  padding: 6px 14px;

  overflow-x:auto;               /* ★ 横スクロール */
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scroll-snap-type: x proximity;
  scrollbar-width: none;

  /* 端がうっすらフェードして“横に続く感”が出る（対応ブラウザのみ） */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.chips::-webkit-scrollbar{ display:none; }

/* Auto marquee state (JS adds .is-marquee)
   - keep it minimal: the motion itself is the hint.
   - pause on hover/focus is handled in JS.
*/
.chips.is-marquee{
  justify-content:flex-start;
  scroll-snap-type: none;
  cursor: grab;
}
.chips.is-marquee:active{ cursor: grabbing; }
.chip{
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: center;

  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(11,12,15,.035);
  color: rgba(11,12,15,.72);
  font-size:13px;
  cursor:pointer;
  user-select:none;
  border: 1px solid rgba(11,12,15,.035);
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover{
  transform: translateY(-1px);
  background: rgba(0,113,227,.10);
  border-color: rgba(0,113,227,.12);
  color: rgba(11,12,15,.92);
}

.ask{
  width:100%;
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  margin-top: 2px;
}
.ask input{
  flex: 1;
  min-width: 240px;
  padding: 16px 18px;
  border:none;
  border-radius: 999px;
  background: rgba(11,12,15,.035);
  color: var(--text);
  outline:none;
  font-size:16px;
  box-shadow: inset 0 0 0 1px rgba(11,12,15,.045);
}
/* ---- Hero: subtle light sweep (input) ---- */
body[data-page="home"] .ask input{
  background: linear-gradient(110deg,
    rgba(11,12,15,.035) 0%,
    rgba(11,12,15,.03) 40%,
    rgba(0,113,227,.10) 50%,
    rgba(11,12,15,.03) 60%,
    rgba(11,12,15,.035) 100%);
  background-size: 240% 100%;
  background-position: 0% 50%;
  animation: fieldShine 8.2s ease-in-out infinite;
}

/* タイピング中は止めて集中できるように */
body[data-page="home"] .ask input:focus{
  animation: none;
  background: rgba(11,12,15,.035);
}

@keyframes fieldShine{
  0%, 65% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.ask input::placeholder{color: rgba(11,12,15,.35);}
.ask input:focus{
  box-shadow:
    inset 0 0 0 1px rgba(0,113,227,.42),
    0 0 0 6px rgba(0,113,227,.10);
}

.ask-btn{
  width:50px;
  height:50px;
  padding:0;
  border: 1px solid rgba(11,12,15,0.18);
  border-radius:999px;
  background: rgba(255,255,255,0.58);
  color: rgba(11,12,15,0.86);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: transform 150ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}
.ask-btn svg{
  width:18px;
  height:18px;
  display:block;
}
.ask-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(11,12,15,0.26);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.ask-btn:active{
  transform: translateY(0px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.ai-footnote{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(11,12,15,.56);
  letter-spacing: .02em;
  line-height: 1.7;
  text-align: center;
}

/* Page head */
.page-head{padding: 72px 0 18px; text-align:center;}
.page-title{
  margin:0 0 12px;
  font-size: 13px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(11,12,15,.60);
  font-weight:700;
}
.page-lead{margin:0 auto; color: var(--muted); line-height:1.95; max-width: 70ch; font-size:14px;}
.page-cta{margin: 12px 0 0;}
.link-cta{color: rgba(11,12,15,.88); font-weight:700;}
.link-cta:hover{color: var(--accent); text-decoration:none;}

/* Services subpages */
.subpage-nav{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 8px;
}
.subpage-link{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,12,15,.12);
  background: rgba(255,255,255,.55);
  color: rgba(11,12,15,.72);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.subpage-link:hover{
  text-decoration:none;
  color: rgba(11,12,15,.92);
  border-color: rgba(11,12,15,.18);
  background: rgba(255,255,255,.70);
}
.subpage-link.active{
  font-weight:700;
  color: rgba(11,12,15,.92);
  border-color: rgba(11,12,15,.22);
  background: rgba(255,255,255,.80);
}

/* Normal blocks */
.site-content{padding: 18px 0 86px;}
.block{
  padding: 92px 0;
  position: relative;
  text-align:center;
  scroll-margin-top: 86px;
}
.block:first-child{padding-top: 70px;}

.block-head{
  max-width: 900px;
  margin:0 auto 22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/*
  Sony-like section heading:
  - thin English (large)
  - small Japanese (subtitle)
  Note: keep layout intact (centered); only typography changes.
*/
.block-head .block-kicker{
  margin: 0;
  font-size: clamp(40px, 5.6vw, 84px);
  font-weight: 220;
  letter-spacing: .02em;
  line-height: 1.06;
  text-transform: none;
  color: rgba(11,12,15,.30);
  text-wrap: balance;
}

/* Kicker typewriter: only the EN title ("Overview", "Service", etc.) */
.block-kicker.tw{
  display: inline-block;
  position: relative;
  white-space: pre-wrap;
  transform: translateZ(0);
}

.block-kicker.tw .tw-char{
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .22em, 0) scale(.985);
  filter: blur(.8px);
  transition:
    opacity 360ms var(--ease-out),
    transform 360ms var(--ease-out),
    filter 360ms var(--ease-out);
}

.block-kicker.tw.tw-run .tw-char{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Kicker typewriter: no caret (requested) */
.block-kicker.tw::after{
  content: none !important;
}
.block-head.has-kicker{gap: 10px;}
.block-head.no-kicker{gap: 0;}

.block-head .block-jp{
  margin: 0;
  font-family: 'Hiragino Sans', 'Noto Sans JP', var(--font-ui);
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 560;
  letter-spacing: .26em;
  line-height: 1.9;
  color: rgba(11,12,15,.62);
  text-wrap: pretty;
  font-feature-settings: "palt" 1;
}

/* ---------- Chapter ask chips (once per chapter) ---------- */
/* 章の先頭ブロックの「末尾」に置く前提：横並び・控えめ・1行で締める */
.chapter-ask{
  max-width: 920px;
  margin: 16px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 1; /* wide bandの上に出す */
}

.chapter-ask__label{
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(11,12,15,.42);
  white-space: nowrap;
}

.chapter-ask__chips{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* heroのchipより控えめに */
.chip--chapter{
  padding: 8px 11px;
  font-size: 11px;
}

/* Large glyph (tag icon)
   - Used as a tiny 'image substitute' for text-only blocks
   - Inline SVG, stable on file:// and doesn't rely on external fonts
*/

/* ---------------------------------------------------------
   Block diagram (icon-based mini illustrations)
   - Used for text-only blocks (no image / no embed)
   - Avoid large frames/borders (site-wide direction)
   --------------------------------------------------------- */
.block-diagram{
  width: min(640px, 92%);
  margin: 0 auto 6px;
  color: rgba(11,12,15,.58);
  opacity: .98;
  pointer-events: none; /* purely decorative */
}
.block-diagram svg{
  width: 100%;
  height: auto;
  display: block;
}

.block-glyph{
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  border-radius: clamp(16px, 2vw, 20px);
  display:flex;
  align-items:center;
  justify-content:center;
  /* Neutral (gray) — keep glyphs calm so they don't fight with the kicker title */
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(17,17,17,.06);
  color: rgba(17,17,17,.78);
  margin: 10px 0 6px;
  flex: 0 0 auto;
  box-shadow: 0 14px 40px rgba(0,0,0,.04);
}
.block-glyph svg{
  width: clamp(24px, 2.8vw, 30px);
  height: clamp(24px, 2.8vw, 30px);
}

/* Keep all glyphs neutral for a cleaner, calmer composition */

.block .body{max-width: 900px; margin: 0 auto;}
.block p{
  margin:0 auto;
  color: rgba(11,12,15,.74);
  line-height:2.05;
  max-width: 70ch;
  font-size:16px;
}
/* Japanese-friendly line breaking (kinsoku)
   - Avoid awkward breaks like leading ー, broken compounds, or punctuation issues
   - Progressive enhancement: auto-phrase / pretty / balance where supported
*/
.block p, .block li, .reveal-body p, .reveal-body li, .mini-body p, .mini-body li{
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
@supports (word-break: auto-phrase){
  .block p, .block li, .reveal-body p, .reveal-body li, .mini-body p, .mini-body li{
    word-break: auto-phrase;
  }
}
@supports (text-wrap: pretty){
  .block p, .block li, .reveal-body p, .reveal-body li, .mini-body p, .mini-body li{
    text-wrap: pretty;
  }
}
@supports (text-wrap: balance){
  .block .title-en,
  .block .block-jp{
    text-wrap: balance;
  }
}
.block p + p{margin-top:16px;}

/* =========================================================
   Home manifesto (wind message)
   - Designed to be readable over the light-blue base tone
   - Keep it calm (no heavy cards / borders)
   ========================================================= */
.wind-manifesto{
  max-width: 72ch;
  margin: 0 auto;
}
.block .wind-manifesto__lead{
  margin: 0 auto 14px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 650;
  letter-spacing: .02em;
  line-height: 1.22;
  color: rgba(11,12,15,.90);
  text-wrap: balance;
}
.block .wind-manifesto__text{
  margin: 0 auto;
  max-width: 70ch;
  color: rgba(11,12,15,.74);
  line-height: 2.05;
  font-size: 16px;
}
.block .wind-manifesto__en{
  margin: 18px auto 0;
  max-width: 70ch;
  color: rgba(11,12,15,.52);
  font-size: 12px;
  letter-spacing: .12em;
  line-height: 1.5;
}
.block .wind-manifesto__lead + .wind-manifesto__text{ margin-top: 0; }
.block .wind-manifesto__text + .wind-manifesto__text{ margin-top: 12px; }
/* Typesetting helper: keep Japanese chunks together
   (prevents awkward wraps like "こ / とです" or "設 / 計")
*/
.ja-token{
  display: inline-block;
  white-space: nowrap;
}
.block ul{
  margin:18px auto 0;
  padding-left: 18px;
  display:inline-block;
  text-align:left;
  color: rgba(11,12,15,.74);
  line-height:2.0;
  max-width: 70ch;
  font-size:16px;
}
.block a{font-weight:700;}

/* =========================================================
   Wide blocks v2 (band background + consistent alignment)
   - Apply by setting: @layout: wide
   ========================================================= */

/* media breakout width (desktop) */
:root{
  --media-max: 1180px; /* ここを 1120〜1320 で好みに合わせてOK */
  --media-pad: 20px;
}

html{ overflow-x: hidden; }
body{ overflow-x: hidden; } /* 念のため（横スクロール事故防止） */

/* --- Normal page wide blocks: “band” only (センター基準は崩さない) --- */
.block--wide{
  text-align: center; /* ここ重要：ワイドだけズレない */
}

/* full-bleed background band */
.block--wide::before{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform: translateX(-50%);
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 360px at 50% -140px, rgba(0,113,227,.14), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
}

/* keep content above the band + slightly wider shell */
.block--wide .block-head,
.block--wide .body{
  position:relative;
  z-index:1;
  max-width: 1100px;
}

/* --- Mini page wide sections: feature card (no viewport breakout) --- */
.mini-section--wide{
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(0,113,227,.12), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  border: 1px solid rgba(11,12,15,.06);
  border-radius: 22px;
  padding: 22px 22px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* mini-section の全幅セパレーター線を、カードには出さない */
.mini-section--wide::before{ display:none; }

/* ミニページは “列レイアウトがある” ので、画像ブレイクアウトは禁止 */
.mini-section--wide .mini-body .media{
  margin: 16px 0 0;
  max-width: 100%;
  padding: 0;
}

/* In wide mini sections, keep PDF decks at the “normal embed” width */
.mini-section--wide .mini-body .media.media--deck{
  width: min(100%, 980px);
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.mini-section--wide .mini-body .media img{
  width:100%;
  max-width: 100%;
  border-radius: 18px;
}

/* Media in blocks */
.media{margin: 18px auto 0; max-width: 980px;}
.media img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
}
/* Embedded frames (Google Map / Calendar etc.) */
.embed-frame{
  width:100%;
  border:0;
  display:block;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
}
/* Tone down Google Maps (iframe) */
.embed-frame--map{
  filter: saturate(.5) contrast(.95) brightness(1.02);
}
/* PDF deck */
.embed-frame--pdf{
  height: 820px;
  background: #fff;
}
/* Google Form */
.embed-frame--form{
  height: 880px;
  background: #fff;
}
/* Website demo embed */
.embed-frame--site{
  background: #fff;
  border: 0;
  width: 100%;
  display: block;
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
}
/* ---------------------------------------------------------
   Scaled embed viewport (for site-in-iframe cases)
   - Makes iframe "virtual viewport" wider to prevent breakpoints/layout glitches.
   --------------------------------------------------------- */
.embed-viewport{
  --embed-scale: 1;      /* 1 = normal, 0.90 = show smaller but render as wider */
  --embed-h: 860px;      /* panel height (shared) */
  position: relative;
  height: var(--embed-h);
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
}

/* remove radius/shadow from iframe itself inside the viewport wrapper */
.embed-viewport .embed-frame{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* core trick: enlarge iframe size then scale down */
.embed-viewport .embed-frame--site{
  width: calc(100% / var(--embed-scale));
  height: calc(var(--embed-h) / var(--embed-scale));
  border: 0;
  display: block;
  transform: scale(var(--embed-scale));
  transform-origin: 0 0;
  background: #fff;
}
.media figcaption{margin-top:12px; font-size:12px; color: rgba(15,17,21,.55);}

/* External embeds can be blocked by X-Frame-Options / CSP depending on the environment.
   When JS detects the embed cannot render, we hide the frame area to avoid an empty panel. */
figure.media.embed-off{display:none !important;}

/* Desktop: images feel wider (統一して“横幅”を出す) */
@media (min-width: 900px){
  /* 通常ページのみ（ミニページoverlayではやらない） */
  body:not(.overlay-open) .block .media{
    max-width:none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 var(--media-pad);
    text-align: center;
  }
  body:not(.overlay-open) .block .media img{
    width: min(100%, var(--media-max));
    margin-left:auto;
    margin-right:auto;
  }
  body:not(.overlay-open) .block .media figcaption{
    max-width: min(100%, var(--media-max));
    margin-left:auto;
    margin-right:auto;
  }

  /* Keep PDF decks contained (avoid full-bleed iframe)
     - Decks are meant to be “readable” rather than “full-bleed”. */
  body:not(.overlay-open) .block .media.media--deck{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }
}

/* Inline action buttons inside block bodies */
.inline-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; justify-content:center;}
.cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(11,12,15,.92);
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  border:none;
  cursor:pointer;
}
.cta:hover{opacity:.92; text-decoration:none;}
.cta.secondary{background: rgba(11,12,15,.045); color: rgba(11,12,15,.86);}

/* Accordion */
.accordion{
  margin:18px auto 0;
  max-width: 760px;
  border-radius: 18px;
  background: rgba(11,12,15,.028);
  padding: 14px 16px;
  text-align:left;
}
.accordion summary{
  cursor:pointer;
  font-weight:800;
  color: rgba(11,12,15,.84);
  list-style:none;
}
.accordion summary::-webkit-details-marker{display:none;}
.accordion summary::after{
  content:"＋";
  float:right;
  color: rgba(11,12,15,.40);
}
.accordion[open] summary::after{content:"−";}
.accordion .accordion-body{
  margin-top:12px;
  color: rgba(11,12,15,.74);
  line-height:2.0;
}

/* Highlight when jumping back */
.block-highlight{
  background: linear-gradient(90deg, rgba(0,113,227,.10), transparent 60%);
  box-shadow: inset 3px 0 0 rgba(0,113,227,.55);
  border-radius: 22px;
}

/* Footer */
.footer{padding: 26px 0 56px;}
.footer-line{height:1px; background: var(--line-soft);}
.footer-text{margin-top:12px; color: var(--muted); font-size:12px;}

/* Overlay (Mini page) */

/* When the generated mini page is open, hide the normal site content.
   This avoids "text bleeding" through translucent layers while keeping the moving background visible. */
body.overlay-open .site-header,
body.overlay-open main{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.995);
  filter: blur(14px) saturate(90%);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}
.overlay{
  position:fixed;
  inset:0;
  z-index:50;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.overlay.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity .24s ease;
}

.overlay-backdrop{
  position:absolute;
  inset:0;
  /* ミニページは白ベース（下のページ背景を透かさない） */
  background: #ffffff;
  overflow: hidden;
}

/* Remove the old static gradient backdrop so the mini page can use its own
   lightweight animated background. */
.overlay-backdrop::before{
  content:none;
}

/* Mini page exclusive animated background */
.mini-bg-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  /* 白地の上で“模様だけ”が薄く見えるよう、JS側でαを制御します */
  opacity: 1;
  filter: none;
}

.mini-bg-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(0,0,0,.06) 0 1px, transparent 1px);
  background-size: 52px 52px;
  /* うっすら質感だけ。濃くなると灰色っぽく見えるので控えめに */
  opacity: .05;
  mix-blend-mode: normal;
}

.mini-bg-vignette{
  position:absolute;
  inset:-15%;
  pointer-events:none;
  background: radial-gradient(closest-side at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 70%, rgba(0,0,0,.14) 100%);
  /* 灰色化の原因になりやすいので無効化 */
  display: none;
}

.mini-bg-fade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.44) 46%, rgba(255,255,255,.18) 72%, rgba(255,255,255,0) 100%);
  /* ミニ背景はシンプルに（白ベース + うっすら模様） */
  display: none;
}

.overlay-panel{
  isolation:isolate;
  position:absolute;
  inset: 0;
  width: 100%;
  overflow:hidden;
  border-radius: 0;
  /* Fully opaque so the mini page never inherits any background artifacts */
  background: #fff;
  border: none;
  /* 透過・ブラーは灰色化しやすいので無効化（軽量化にも） */
  backdrop-filter: none;
  box-shadow: none;
  display:flex;
  flex-direction:column;
  transform: translateY(18px) scale(.995);
  filter: blur(10px);
  opacity:0;
  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    filter .42s cubic-bezier(.2,.8,.2,1),
    opacity .24s ease;
}
.overlay.show .overlay-panel{
  transform: translateY(0) scale(1);
  filter: blur(0);
  opacity:1;
}

/* top “energy line” */
.overlay-panel::before{
  content:"";
  position:absolute;
  top:0;
  left:-20%;
  height:2px;
  width:140%;
  background: linear-gradient(90deg, transparent, rgba(0,113,227,.65), transparent);
  z-index:2;
  opacity:.55;
}

/* Kazera watermark (subtle, but readable) */
.overlay-panel::after{
  content:"";
  position:absolute;
  inset: -8%;
  pointer-events:none;
  z-index:0;
  /* Cool-toned watermark to harmonize with the site’s airy blue base */
  background-image: url("./assets/kazera_logo_x_wm.png");
  background-repeat: no-repeat;
  /* Centered and slightly stronger for better readability while staying subtle */
  background-position: 50% 56%;
  /* use the overlay’s full viewport width (without touching the content layout) */
  background-size: clamp(720px, 92vw, 1400px);
  opacity: .07;
  /* The tint is baked into the asset (no warm/beige cast) */
  filter: none;
  transform: none;
}


.overlay.building .overlay-panel::before{
  opacity:1;
  animation: sweep 1.2s ease infinite;
}
@keyframes sweep{
  0%{transform: translateX(-18%);} 
  100%{transform: translateX(18%);} 
}

.overlay-header{
  position: sticky;
  top: 0;
  z-index: 5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  padding: 12px var(--mini-side);
  background: rgba(255,255,255,.96);
  backdrop-filter: none;
  border-bottom: 0;
  box-shadow: 0 14px 40px rgba(11,12,15,.04);
}

.overlay-brand{
  display:flex;
  align-items:baseline;
  gap: 10px;
  min-width: 180px;
}

.overlay-brand-mark{
  position: relative;
  display:inline-block;
  padding-left: calc(20px + 8px);
  font-weight: 900;
  letter-spacing: -0.01em;
}

.overlay-brand-mark::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width: 20px;
  height: 20px;
  background: url("./assets/kazera_mark_x.png") center/contain no-repeat;
  opacity: .90;
  transform: translateY(-50%);
}

.overlay-brand-tag{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,12,15,.48);
  font-weight: 900;
}

.overlay-header-right{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.overlay-title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: rgba(11,12,15,.62);
  max-width: min(52vw, 560px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overlay-close{
  border:none;
  background: rgba(11,12,15,.05);
  color: rgba(11,12,15,.78);
  border-radius: 999px;
  width:42px;
  height:42px;
  cursor:pointer;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .16s ease, background .16s ease;
}
.overlay-close:hover{background: rgba(11,12,15,.08); transform: scale(1.03);}

.overlay-body{
  position:relative;
  z-index:1;
  flex:1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

.overlay-intro{
  padding:14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(11,12,15,.06);
  color: rgba(11,12,15,.76);
  line-height:1.85;
  font-size:14px;
}

.overlay-intro .intro-kicker{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(11,12,15,.55);
  font-weight:900;
}
.overlay-intro .intro-main{
  margin-top:8px;
  font-size:14px;
}
.overlay-intro .intro-main strong{font-weight:900;}
.overlay-intro .intro-foot{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.04em;
  color: rgba(11,12,15,.55);
}

.plan-switch{display:flex; gap:12px; align-items:center; margin:14px 0 10px; flex-wrap:wrap;}

/* Segmented control (A/B) */
.plan-group{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(11,12,15,.05);
  box-shadow: inset 0 0 0 1px rgba(11,12,15,.05);
}
.plan-btn{
  padding:10px 14px;
  border-radius:999px;
  border:none;
  background: transparent;
  color: rgba(11,12,15,.72);
  cursor:pointer;
  font-weight:800;
  letter-spacing:.02em;
}
.plan-btn.active{
  background: rgba(255,255,255,.82);
  color: rgba(11,12,15,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.plan-hint{color: var(--muted); font-size:13px;}

.mini-meta{
  color: rgba(11,12,15,.52);
  font-size:12px;
  margin:10px 0 12px;
}

/* Mini page (generated) */
.mini-page{
  width: min(var(--mini-max), calc(100% - (var(--mini-side) * 2)));
  margin: 0 auto;
  padding: 28px 0 72px;
}

/* Cover */
.mini-cover{
  /* Give the first contact (question → AI answer) generous breathing room
     and keep the detailed page below out of the first view. */
  padding: 78px 0 56px;
  min-height: clamp(460px, 62vh, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Background is provided by the dedicated animated mini page backdrop. */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.mini-cover-kicker{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,12,15,.42);
  text-align: center;
}

.mini-cover-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(11,12,15,.05);
  border: 1px solid rgba(11,12,15,.06);
  color: rgba(11,12,15,.62);
  font-weight: 900;
  letter-spacing: .12em;
}

.mini-cover-brand{
  font-weight: 900;
  color: rgba(11,12,15,.50);
}

.mini-cover-title{
  margin: 18px 0 0;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-align: center;
}

.mini-cover-lead{
  margin: 12px auto 0;
  max-width: 64ch;
  font-size: 14px;
  color: rgba(11,12,15,.62);
  text-align: center;
  line-height: 1.7;
}

/* Mini cover intro (AI answer first) */
/* (v5) The first screen should be: question -> AI answer.
   Keep layout simple and centered; avoid verbose labels/boxes. */

.mini-answer{
  width: min(72ch, 100%);
  margin: 0 auto;
  padding-top: 38px;
  display:flex;
  flex-direction: column;
  align-items:center;
  flex: 1;
}

/* Mark: show this is the assistant speaking without avatars/names */
.mini-answer-mark{
  display:flex;
  justify-content:center;
  margin-top: 10px;
}

.ai-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(0,113,227,.10);
  border: 1px solid rgba(0,113,227,.14);
  color: rgba(0,113,227,.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ai-pill svg{
  width: 16px;
  height: 16px;
  display:block;
}

.ai-pill-label{
  display:inline-flex;
  align-items:center;
  line-height: 1;
}

.mini-answer-byline{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.mini-answer-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
}

.mini-answer-meta-text{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
}

.mini-avatar{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(0,113,227,.92);
  background: rgba(0,113,227,.12);
  border: 1px solid rgba(0,113,227,.18);
}

.mini-answer-name{
  font-weight: 900;
  letter-spacing: -0.01em;
}

.mini-answer-sub{
  font-size: 12px;
  color: rgba(11,12,15,.50);
  margin-top: 2px;
}

.mini-answer-text{
  position: relative;
  margin: 28px auto 0;
  max-width: 60ch;
  color: rgba(11,12,15,.78);
  line-height: 1.95;
  font-size: 19px;
  text-align: center;
}

/* A subtle “quote” cue: implies speech without adding words */
.mini-answer-text::before{
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  top: -64px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 92px;
  line-height: 1;
  font-weight: 900;
  color: rgba(0,113,227,.14);
  pointer-events: none;
}

.mini-answer-text p{
  margin: 0 0 12px;
}

.mini-answer-text ul{
  margin: 8px 0 12px 1.2em;
}

.mini-answer-text li{
  margin: 4px 0;
}

.mini-answer-text b{
  font-weight: 900;
  color: rgba(11,12,15,.86);
}

.mini-answer-text .ans-tip{
  color: rgba(11,12,15,.62);
  font-size: 13px;
}

.mini-answer-actions{
  margin-top: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.mini-suggest{
  margin-top: 0;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggest-chip{
  border: 1px solid rgba(11,12,15,.08);
  background: rgba(255,255,255,.72);
  color: rgba(11,12,15,.76);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.suggest-chip:hover{
  transform: translateY(-1px);
  border-color: rgba(0,113,227,.24);
  background: rgba(255,255,255,.85);
}

.mini-quick{
  margin-top: 0;
  display:flex;
  gap: 8px;
}

/* One-line chip row: avoid multi-line “button stacks” */
.mini-chip-row{
  margin-top: 26px;
  justify-content:center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 2px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mini-chip-row::-webkit-scrollbar{display:none;}

.mini-quick-btn{
  /* Treat as “answer attachments” (chips), not primary buttons */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(11,12,15,.08);
  background: rgba(255,255,255,.70);
  color: rgba(11,12,15,.74);
  text-decoration: none;
  cursor:pointer;
  font-size: 12px;
  font-weight: 800;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.mini-quick-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.86);
  border-color: rgba(0,113,227,.22);
}
.mini-quick-btn.primary{
  background: rgba(11,12,15,.90);
  border-color: rgba(11,12,15,.90);
  color: rgba(255,255,255,.96);
}
.mini-quick-btn.primary:hover{
  background: rgba(11,12,15,.98);
}

.mini-answer-foot{
  margin-top: 12px;
  font-size: 11px;
  color: rgba(11,12,15,.48);
}

/* Scroll cue: show there's a page continuing below, without explanatory text */
.mini-scrollcue{
  margin: auto auto 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(11,12,15,.34);
  background: rgba(11,12,15,.03);
  border: 1px solid rgba(11,12,15,.06);
  user-select:none;
  animation: miniScrollCue 2.4s ease-in-out infinite;
}

.mini-scrollcue::before{
  content: "\2304"; /* down arrowhead */
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}

@keyframes miniScrollCue{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* Mode switch in the side navigation: keep it light */
.mini-aside-mode{margin-bottom: 14px;}
.mini-aside .mini-mode{
  width: 100%;
  justify-content: space-between;
  box-shadow: none;
  background: rgba(11,12,15,.03);
  border: 1px solid rgba(11,12,15,.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mini-aside .mini-mode-btn{height: 32px; padding: 0 14px;}

.mini-visual{
  margin: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
}

.mini-visual-hero{
  width: min(980px, 100%);
  margin: 0 auto;
}

.mini-visual img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 26px;
  background: rgba(11,12,15,.03);
}

.mini-visual figcaption{
  margin-top: 12px;
  padding: 0;
  font-size: 12px;
  color: rgba(11,12,15,.52);
}

/* Bottom close (inside generated page) */
.mini-end{
  margin: 60px 0 8px;
  padding: 28px 0 10px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
  gap: 14px;
}

/* The final AI comment should read like a “closing message” */
.mini-end .mini-ai-note{
  width: min(720px, 100%);
}

.mini-end-close{
  appearance:none;
  border: 1px solid rgba(11,12,15,.12);
  background: transparent;
  color: rgba(11,12,15,.76);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 900;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.mini-end-close:hover{
  transform: translateY(-1px);
  background: rgba(11,12,15,.04);
  border-color: rgba(11,12,15,.18);
}

/* Mini footer band (light / minimal) */
.mini-footer{
  width: min(860px, 100%);
  border: 1px solid rgba(11,12,15,.10);
  background: rgba(255,255,255,.74);
  border-radius: 18px;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

.mini-footer-brand{
  display:flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

.mini-footer-brand strong{
  font-size: 13px;
  font-weight: 900;
  color: rgba(11,12,15,.84);
  letter-spacing: -0.01em;
}

.mini-footer-brand span{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11,12,15,.52);
}

.mini-footer-note{
  flex: 1;
  text-align:center;
  font-size: 12px;
  color: rgba(11,12,15,.56);
  line-height: 1.6;
}

.mini-footer-right{
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
}

/* “相談する” は薄いブルーで差別化（押し付けない強さ） */
.mini-footer-consult{
  border-color: rgba(0,113,227,.28);
  background: rgba(0,113,227,.10);
  color: rgba(0,113,227,.92);
}

.mini-footer-consult:hover{
  background: rgba(0,113,227,.14);
  border-color: rgba(0,113,227,.38);
}

/* =========================
   Mini footer (full width)
   ========================= */

.mini-footer-wide{
  grid-column: 1 / -1; /* ← これでミニページ横幅いっぱい */
  margin-top: 18px;
  padding: 16px 0 18px;
  border-top: 1px solid rgba(11,12,15,.10);
  background: rgba(255,255,255,.72); /* 白の軽い帯 */
}

.mini-footer-wide__inner{
  max-width: 1360px;           /* mini-layout の最大幅に合わせる（240 + 860 + 180 + gap*2） */
  margin: 0 auto;
  padding: 0 18px;

  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  gap: var(--mini-gap);
  align-items: center;
}

.mini-footer-brand{
  display:flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.mini-footer-brand strong{
  font-size: 12px;
  font-weight: 900;
  color: rgba(11,12,15,.84);
  letter-spacing: -0.01em;
}
.mini-footer-brand span{
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(11,12,15,.52);
}

.mini-footer-note{
  text-align:center;
  font-size: 12px;
  color: rgba(11,12,15,.56);
  line-height: 1.6;
}

.mini-footer-right{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  white-space: nowrap;
}

/* 相談する：薄いブルーで差別化（押し付けない） */
.mini-footer-consult{
  border-color: rgba(0,113,227,.28);
  background: rgba(0,113,227,.10);
  color: rgba(0,113,227,.92);
}
.mini-footer-consult:hover{
  background: rgba(0,113,227,.14);
  border-color: rgba(0,113,227,.38);
}

.mini-footer-legal{
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 11px;
  color: rgba(11,12,15,.52);
  text-align: center;
}

.mini-cover-controls{
  margin-top: 22px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Plan switch (glass) */
.mini-mode{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(11,12,15,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

.mini-mode-btn{
  position: relative;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-weight: 900;
  color: rgba(11,12,15,.62);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}

.mini-mode-btn:hover{transform: translateY(-1px);}
.mini-mode-btn:active{transform: translateY(0);}

.mini-mode-btn.active{
  background: rgba(11,12,15,.92);
  color: rgba(255,255,255,.96);
}

.mini-mode-btn[data-rec="1"]::after{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,113,227,.92);
  position:absolute;
  top: 6px;
  right: 8px;
  opacity: .95;
}

/* Meta line */
.mini-meta-line{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 12px;
  color: rgba(11,12,15,.52);
}

.mini-meta-sep{opacity: .28;}

/* Layout */
.mini-layout{
  margin-top: 0;
  display: grid;
  grid-template-columns: 240px minmax(0, 860px) 180px;
  gap: var(--mini-gap);
  align-items: start;
  justify-content: center;
  padding-top: 44px;
  position: relative;
  /*
    Mini page (Personal Page) should read as a clean, neutral document.
    A blue “sky” gradient at the very top was unintentionally introduced
    during previous iterations and is not part of the requirements.
    Keep the overlay watermark (handled on .overlay-panel::after) but
    remove the top blue wash here.
  */
  background: transparent;
}

.mini-main{min-width:0;}

/* Hero (question + AI answer) lives inside the page grid.
   This makes the personal page feel like a real website from the first view:
   left nav (contents) + a clean intro area. */
.mini-hero{
  position: relative;
  padding: 10px 0 74px;
  text-align:center;
}
.mini-hero::before{
  content:"";
  position:absolute;
  top: -120px;
  left: 50%;
  width: 100%;
  height: 520px;
  transform: translateX(-50%);
  pointer-events:none;
  z-index:0;
  /* Remove the unintended blue gradients that tinted the hero area. */
  background: none;
}

/*
  Centering wrapper for the hero.
  When a left TOC column is present, centering strictly inside .mini-main
  can read as “shifted right”. This wrapper counterbalances the TOC width
  so the hero reads centered against the whole mini-page.
*/
.mini-hero-center{
  /* 240px (aside) + 28px (gap) = 268px */
  width: calc(100% + 268px);
  /*
    Shift the hero block left by the full TOC width so that the hero's center
    matches the page/viewport center (not the .mini-main column center).
  */
  margin-left: -268px;
  display: flex;
  justify-content: center;
}

.mini-hero-art{
  position:absolute;
  right: -8px;
  top: 16px;
  width: 420px;
  max-width: 48%;
  /* Keep the symbol, but make it quieter so the center alignment reads correctly. */
  opacity: .12;
  filter: saturate(0.95);
  z-index: 0;
  pointer-events:none;
}

.mini-hero-art img{
  width: 100%;
  height: auto;
  display:block;
}

.mini-hero-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  text-align: center;
}

.mini-hero-titlewrap{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.mini-hero-kicker{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 14px;
  color: rgba(11,12,15,.56);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mini-hero-kicker::before,
.mini-hero-kicker::after{
  content:"";
  height: 1px;
  width: clamp(18px, 5vw, 64px);
  background: linear-gradient(90deg, rgba(0,113,227,.22), rgba(0,113,227,0));
  opacity: 0.9;
}

.mini-hero-kicker::after{
  transform: scaleX(-1);
}

.mini-hero-kicker-mark{
  display: inline-flex;
  width: 14px;
  height: 14px;
  opacity: 0.62;
}

.mini-hero-kicker-mark svg{
  width: 14px;
  height: 14px;
  display:block;
}

.mini-hero-kicker-ja{
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: none;
}

.mini-hero-title{
  margin: 0 auto;
  max-width: min(30ch, 92vw);
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.15;
  font-weight: 720;
  letter-spacing: -0.015em;
  color: rgba(11,12,15,.92);
  text-wrap: balance;
}

.mini-hero-titlewrap::after{
  content:"";
  display:block;
  width: min(260px, 54vw);
  height: 1px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, rgba(0,113,227,0), rgba(0,113,227,.18), rgba(0,113,227,0));
  opacity: 0.95;
}

.mini-hero-answer{
  margin-top: 22px;
}

/* A subtle signal that implies “assistant speaking” without avatars or labels. */
.mini-hero-signal{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  color: rgba(0,113,227,.80);
}

.mini-hero-signal svg{
  width: 18px;
  height: 18px;
  display:block;
}

.mini-hero-line{
  width: 64px;
  height: 1px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(0,113,227,.40), rgba(0,113,227,0));
}

.mini-hero-byline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,113,227,.08);
  border: 1px solid rgba(0,113,227,.12);
  color: rgba(11,12,15,.70);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  margin: 0 auto 14px;
}

.mini-hero-ai{
  display: inline-flex;
  width: 14px;
  height: 14px;
  opacity: 0.75;
}

.mini-hero-ai svg{
  width: 14px;
  height: 14px;
  display: block;
}

.mini-hero-bytext{
  white-space: nowrap;
}

.mini-hero-text{
  margin: 0 auto;
  max-width: 68ch;
  font-size: 20px;
  line-height: 1.9;
  color: rgba(11,12,15,.72);
}

.mini-hero-text p{margin: 0;}

/* Mini hero AI typewriter (intro line) */
.mini-hero-text b,
.mini-hero-strong{
  font-weight: 900;
  color: rgba(11,12,15,.86);
}

.mini-hero-typed{
  display: inline;
  white-space: pre-wrap;
}

.mini-hero-typed.mini-typing::after{
  content:"";
  display:inline-block;
  width: 7px;
  height: 1.05em;
  margin-left: 4px;
  border-radius: 2px;
  background: rgba(0,113,227,.55);
  vertical-align: -0.12em;
  animation: miniCaretBlink 1s steps(1,end) infinite;
}

@keyframes miniCaretBlink{
  50%{ opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .mini-hero-typed.mini-typing::after{
    animation: none;
    opacity: 0;
  }
}


/* A quieter, more “website-like” scroll cue */
.mini-hero-cue{
  position: relative;
  width: 26px;
  height: 30px;
  margin: 34px auto 0;
  opacity: .50;
  animation: miniScrollCue2 2.8s ease-in-out infinite;
}

.mini-hero-cue::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(11,12,15,.22);
}

.mini-hero-cue::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 12px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid rgba(11,12,15,.22);
  border-bottom: 2px solid rgba(11,12,15,.22);
  border-radius: 1px;
}

@keyframes miniScrollCue2{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

.mini-aside{
  position: sticky;
  top: 14px;
  align-self: start;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}


.mini-rail{
  position: sticky;
  top: 14px;
  align-self: start;
  padding: 0;
}

.mini-rail-art{
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  opacity: 0.08;
  filter: saturate(0.85);
  pointer-events: none;
}

.mini-rail-art img{
  width: 180px;
  max-width: 100%;
  height: auto;
  display: block;
}

.mini-aside-title{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,12,15,.38);
  margin: 0 0 10px;
}

.mini-toc{
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.toc-item{
  appearance:none;
  width:100%;
  text-align:left;
  background: transparent;
  border: 0;
  border-radius: 12px;
  padding: 10px 10px;
  color: rgba(11,12,15,.72);
  font-weight: 800;
  cursor:pointer;
  transition: background .16s ease, transform .16s ease, color .16s ease;
}

.toc-item:hover{
  background: rgba(11,12,15,.04);
  transform: translateY(-1px);
}
.toc-item.active{
  background: rgba(0,113,227,.10);
  border-color: rgba(0,113,227,.22);
  color: rgba(0,113,227,.92);
}
.toc-item.active .toc-sub{
  color: rgba(0,113,227,.70);
}
.toc-item.active .toc-no{
  background: rgba(0,113,227,.16);
  border-color: rgba(0,113,227,.22);
  color: rgba(0,113,227,.92);
}


.toc-item:active{transform: translateY(0);}

.mini-content{min-width:0;}

.mini-sections{
  display:flex;
  flex-direction: column;
  gap: 64px;
  padding-bottom: 34px;
}

/* Sections – no nested “cards” (avoid Heisei frames) */
.mini-section{
  position: relative;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-margin-top: 18px;
}


.mini-section:not(:first-child)::before{
  content:"";
  position:absolute;
  top: -32px;
  left: 50%;
  width: 100%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(11,12,15,.08), transparent);
  pointer-events:none;
}

.mini-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 18px;
}

.mini-kicker{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,12,15,.40);
  margin-bottom: 10px;
}

.mini-title{
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mini-submeta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  font-size: 12px;
  color: rgba(11,12,15,.52);
}

.mini-source,
.mini-tags{
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}

.mini-dot{opacity: .34;}

.mini-actions{
  display:flex;
  align-items:center;
  gap: 10px;
}

.mini-jump{
  background: transparent;
  border: 0;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,113,227,.92);
  cursor:pointer;
}

.mini-jump:hover{
  text-decoration: underline;
}

.mini-body{
  position: relative;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(11,12,15,.72);
  max-width: 100%;
}

.mini-body .media{
  width: min(100%, 980px);
  max-width: 980px;
}

/* Mini section “generating” overlay (real-time feel)
   - Sections are rendered statically, but we “unlock” them on scroll
   - Keeps layout stable (content is already in the DOM)
*/
.mini-body-inner{position: relative;}

.mini-gen-overlay{
  position:absolute;
  inset: -6px -2px -6px -2px;
  border-radius: 18px;
  padding: 16px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.80));
  border: 1px solid rgba(11,12,15,.06);
  box-shadow: 0 20px 60px rgba(0,0,0,.06);
  display:flex;
  flex-direction: column;
  justify-content:center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.mini-gen-row{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,12,15,.54);
}

.mini-gen-mark{
  position: relative;
  display:inline-flex;
  width: 20px;
  height: 20px;
  opacity: .92;
  color: rgba(0,113,227,.72);
}

/* Ring spinner (more visible than a tiny rotating glyph) */
.mini-gen-mark::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid rgba(0,113,227,.16);
  border-top-color: rgba(0,113,227,.58);
  border-right-color: rgba(0,113,227,.34);
}

.mini-section[data-gen="1"] .mini-gen-mark::before{
  animation: miniGenRing .9s linear infinite;
}

@keyframes miniGenRing{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.mini-gen-mark svg{width: 13px; height: 13px; display:block; margin:auto; opacity: .86;}

.mini-gen-skel{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.mini-gen-line{
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(11,12,15,.07), rgba(0,113,227,.20), rgba(11,12,15,.07));
  background-size: 260% 100%;
  animation: shimmer .95s linear infinite, miniGenPulse 1.05s ease-in-out infinite;
}

@keyframes miniGenPulse{
  0%, 100%{opacity: .62;}
  50%{opacity: 1;}
}

.mini-gen-line.w80{width:80%;}
.mini-gen-line.w70{width:70%;}
.mini-gen-line.w60{width:60%;}

.mini-section[data-gen="1"] .mini-gen-overlay{
  opacity: 1;
  pointer-events: auto; /* blocks accidental clicks while “loading” */
}

.mini-section[data-gen="1"] .mini-body-inner{
  visibility: hidden;
}

/* When unlocked, softly “appear” */
.mini-section:not([data-gen="1"]) .mini-body-inner{
  animation: miniBodyIn .28s ease both;
}

@keyframes miniBodyIn{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .mini-gen-overlay{transition:none;}
  .mini-section[data-gen="1"] .mini-gen-mark::before{animation:none;}
  .mini-section:not([data-gen="1"]) .mini-body-inner{animation:none;}
}


/* Mini AI notes (editor comments)
   - Types on scroll (same typewriter as the hero)
*/
.mini-ai-note{
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,113,227,.045);
  border: 1px solid rgba(0,113,227,.10);
  color: rgba(11,12,15,.72);
}

.mini-ai-note__label{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,12,15,.44);
  margin: 0 0 8px;
}

.mini-ai-note__mark{
  display:inline-flex;
  width: 14px;
  height: 14px;
  opacity: .62;
}

.mini-ai-note__mark svg{width: 14px; height: 14px; display:block;}

.mini-ai-note__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

.mini-ai-note--final{
  margin: 0 0 16px;
}

/* Notes inserted AFTER the body should not stick too close */
.mini-body + .mini-ai-note{
  margin-top: 14px;
  margin-bottom: 0;
}



/* Q&A inside sections */
.mini-qa{
  margin-top: 16px;
  border-radius: 16px;
  background: rgba(11,12,15,.035);
  border: none;
  padding: 14px 16px;
}

.mini-qa summary{
  font-weight: 900;
  cursor: pointer;
}

.mini-qa p{margin: 10px 0 0;}

@media (max-width: 1240px){
  .mini-layout{grid-template-columns: 240px minmax(0, 1fr);}
  .mini-rail{display:none;}
  .mini-footer-wide__inner{
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .mini-footer-right{
    grid-column: 2;
    justify-content: flex-end;
  }
  .mini-footer-note{
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

@media (max-width: 860px){
  .mini-cover-controls{justify-content:center;}
  .mini-meta-line{justify-content:center;}
  .mini-layout{grid-template-columns: 1fr; padding-top: 22px;}
  .mini-aside{position:relative; top:auto; order:2; display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px;}
  .mini-aside-title{grid-column: 1 / -1; text-align:left;}
  .mini-toc{grid-column: 1 / -1; display:flex; flex-wrap:wrap;}
  .toc-item{flex: 1 1 calc(50% - 8px);}
  .mini-main{order:1;}
  .mini-hero{padding-bottom: 34px;}
  .mini-hero::before{content:none;}
  .mini-rail{display:none;}
  .mini-nav{grid-template-columns:1fr;}
  .mini-section{padding: 26px 0;}
  .mini-section-title{font-size: 26px;}
  .mini-section-title-row{gap: 10px;}
  .mini-head{grid-template-columns: 40px 1fr;}
  .mini-icon{width: 44px; height: 44px;}
  .mini-ref{justify-self:start;}
  .mini-accordion summary{grid-template-columns: 1fr auto; gap: 12px;}
  .mini-accordion summary .hint{display:none;}
  .mini-end{margin-top: 42px;}
  .mini-end-close{width: 100%;}
  .mini-footer-wide__inner{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .mini-footer-left{
    display:flex;
    justify-content:center;
  }
  .mini-footer-note{ text-align:center; }
  .mini-footer-right{
    justify-content:center;
    flex-direction: column;
    align-items: stretch;
  }
  .mini-footer-legal{ text-align:center; }
  .mini-footer{
    flex-direction: column;
    align-items: stretch;
  }
  .mini-footer-note{
    text-align: left;
  }
  .mini-footer-right{
    flex-direction: column;
    align-items: stretch;
    white-space: normal;
  }
  .mini-hero-chips{justify-content:center;}
  .mini-actions{justify-content:center;}
  .mini-inline-tags{justify-content:center;}
  .mini-footnote{padding: 10px 12px; border-radius: 999px;}
  .mini-hero-art{display:none;}
}

.skeleton{margin-top:16px;}
.skeleton-line{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.60), rgba(255,255,255,.22));
  background-size: 220% 100%;
  animation: shimmer 1.2s ease infinite;
  margin-top: 10px;
}
.skeleton-line.w60{width:60%;}
.skeleton-line.w80{width:80%;}
.skeleton-line.w40{width:40%;}
@keyframes shimmer{
  0%{background-position: 0% 0;}
  100%{background-position: 100% 0;}
}

.debug{margin-top:18px; padding-top: 12px; color: rgba(11,12,15,.60);}
.debug summary{cursor:pointer; font-weight:800;}
.debug pre{white-space:pre-wrap; font-family: var(--mono); font-size:12px; line-height:1.55; margin:10px 0 0;}

/* =========================
   Mini AI NOTE — no box / annotation style
   ========================= */

/* 既存の“枠カード”を無効化して、注釈（インライン）へ */
.mini-ai-note{
  margin: 10px 0 14px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  color: rgba(11,12,15,.72);
}

/* ラベル行：アイコン＋AI NOTE＋横に伸びるスキャンライン */
.mini-ai-note__label{
  display:flex;
  align-items:center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(11,12,15,.46);
}

.mini-ai-note__mark{
  display:inline-flex;
  width: 16px;
  height: 16px;
  opacity: .62;
}
.mini-ai-note__mark svg{ width: 16px; height: 16px; display:block; }

/* 横線（＝枠の代わりの“次世代”記号） */
.mini-ai-note__label::after{
  content:"";
  flex: 1;
  height: 1px;
  margin-left: 12px;

  /* ベースの細線 + スキャン用のハイライト（2レイヤ） */
  background-image:
    linear-gradient(90deg, rgba(0,113,227,.28), rgba(11,12,15,.12), transparent),
    linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
  background-repeat: no-repeat;
  background-size: 100% 1px, 18% 1px;
  background-position: 0 0, -30% 0;
  opacity: .9;
}

/* noteが発火したら（JSが data-note-done="1" を付ける）軽くスキャン */
.mini-ai-note[data-note-done="1"] .mini-ai-note__label::after{
  animation: aiNoteScan 1.8s ease-in-out 2;
}

@keyframes aiNoteScan{
  0%{ background-position: 0 0, -30% 0; }
  100%{ background-position: 0 0, 130% 0; }
}

/* 本文：枠なしでも “コメント” として成立させる */
.mini-ai-note__text{
  margin: 10px 0 0;
  padding-left: 24px; /* アイコンと揃える */
  font-size: 14px;
  line-height: 1.85;
  position: relative;
}

.mini-ai-note__text::before{
  content:"";
  position:absolute;
  left: 6px;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0,113,227,.30);
  box-shadow: 0 0 0 6px rgba(0,113,227,.08);
}

/* bodyの直後に入るnoteの余白は維持 */
.mini-body + .mini-ai-note{
  margin-top: 14px;
  margin-bottom: 0;
}

/* 終端の AI COMMENT（final）は “締めのメッセージ” としてカードのまま残す */
.mini-ai-note--final{
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,113,227,.045);
  border: 1px solid rgba(0,113,227,.10);
}

/* reduced motion：スキャンは止める */
@media (prefers-reduced-motion: reduce){
  .mini-ai-note__label::after{ animation: none !important; }
}

/* Final AI COMMENT should be unboxed as well */
.mini-ai-note--final{
  margin: 10px 0 14px;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

@media (max-width: 900px){
  /* block-head の見出し（.block-jp）ではなく、本文側の見出しだけを対象にする */
  .block .body h3{font-size:32px;}
}
@media (max-width: 760px){
  .ai-hero{min-height:auto; padding-top: 44px;}
  /* Keep the brand/title legible on mobile (override old JP headline sizing) */
  .hero-title{font-size:40px;}
  .ai-stage{padding-top: 46px;}
  .ask{flex-direction:column; align-items:stretch;}
  .ask-btn{width:48px; height:48px;}
  .overlay-panel{
    inset: 0;
    width: 100%;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; animation:none !important; transition:none !important;}
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-title,
  body[data-page="home"] .ask input{
    animation: none !important;
  }
}


/* Mini page enhancements (Personal Page) */
.toc-item{
  width: 100%;
  text-align:left;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(11,12,15,.06);
  background: rgba(255,255,255,.45);
  cursor:pointer;
  font-size: 13px;
  color: rgba(11,12,15,.76);
  display:flex;
  align-items:center;
  gap: 10px;
}
.toc-item:hover{
  background: rgba(255,255,255,.65);
  border-color: rgba(0,113,227,.14);
}
.toc-no{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 900;
  color: rgba(0,113,227,.86);
  background: rgba(0,113,227,.12);
  border: 1px solid rgba(0,113,227,.16);
  flex: 0 0 auto;
}
.toc-text{
  display:flex;
  flex-direction:column;
  gap: 2px;
  min-width:0;
}
.toc-sub{
  font-size: 11px;
  color: rgba(11,12,15,.42);
}

.mini-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.mini-head-left{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  min-width: 0;
}
.mini-head-text{min-width:0;}

.mini-icon{
  width: 44px;
  height: 44px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Neutral (gray) — keep icons calm so they don't compete with section titles */
  border: 1px solid rgba(17,17,17,.10);
  background: rgba(17,17,17,.06);
  color: rgba(17,17,17,.78);
  flex: 0 0 auto;
  box-shadow: 0 14px 40px rgba(0,0,0,.04);
}
.mini-icon svg{
  width: 22px;
  height: 22px;
}

/* Keep all mini icons neutral for a cleaner, calmer composition */

/* =========================================================
   Wide tone (subtle moving "white museum wall")
   - Wideブロックだけ「トーン違い＋微動」を入れて、横幅の質を上げる
   ========================================================= */

:root{
  --wide-tone-opacity: .22;          /* ← 強すぎたら .14〜.20 に下げる */
  --wide-tone-grid: rgba(0,113,227,.06);
  --wide-tone-ink1: rgba(0,113,227,.16);
  --wide-tone-ink2: rgba(0,113,227,.12);
}

/* Wide blocks (normal pages): overlay animated tone on top of the band */
.block--wide{
  position: relative;
}

/* 既存の ::before（帯背景）に“重ねる”ための ::after */
.block--wide::after{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform: translateX(-50%);
  pointer-events:none;
  z-index:0;
  opacity: var(--wide-tone-opacity);

  /* 白ベース＋薄いグリッド＋淡い光の漂い（CSSのみ） */
  background-image:
    repeating-linear-gradient(0deg,
      var(--wide-tone-grid) 0,
      var(--wide-tone-grid) 1px,
      transparent 1px,
      transparent 140px),
    repeating-linear-gradient(90deg,
      var(--wide-tone-grid) 0,
      var(--wide-tone-grid) 1px,
      transparent 1px,
      transparent 180px),
    radial-gradient(900px 320px at 22% 22%,
      var(--wide-tone-ink1),
      transparent 70%),
    radial-gradient(980px 360px at 82% 72%,
      var(--wide-tone-ink2),
      transparent 72%),
    radial-gradient(720px 260px at 50% 0%,
      rgba(255,255,255,.85),
      transparent 68%);

  /* 動かすために「タイル」化 */
  background-size:
    auto,
    auto,
    1200px 720px,
    1300px 820px,
    1000px 560px;

  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;

  /* 端をうっすらフェードさせて“帯”っぽく上品に */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);

  animation: wideToneDrift 38s linear infinite;
}

/* ワイド内のテキスト等は必ず上に */
.block--wide .block-head,
.block--wide .body{
  position:relative;
  z-index:1;
}

@keyframes wideToneDrift{
  from{
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to{
    background-position: 220px 160px, -180px 120px, 120% 10%, -90% 90%, 60% -10%;
  }
}

/* Mini page wide: “feature card”内にも同系統の薄い質感 */
.mini-section--wide{
  position: relative;
  overflow: hidden; /* カードからはみ出さない */
}

.mini-section--wide::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity: .18;

  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,113,227,.055) 0,
      rgba(0,113,227,.055) 1px,
      transparent 1px,
      transparent 140px),
    repeating-linear-gradient(90deg,
      rgba(0,113,227,.045) 0,
      rgba(0,113,227,.045) 1px,
      transparent 1px,
      transparent 180px),
    radial-gradient(720px 260px at 18% 18%,
      rgba(0,113,227,.14),
      transparent 70%),
    radial-gradient(760px 300px at 82% 72%,
      rgba(0,113,227,.10),
      transparent 72%);

  background-size: auto, auto, 980px 640px, 1000px 700px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: wideToneDriftMini 42s linear infinite;
}

.mini-section--wide > *{
  position:relative;
  z-index:1;
}

@keyframes wideToneDriftMini{
  from{ background-position: 0 0, 0 0, 0 0, 0 0; }
  to  { background-position: 160px 110px, -140px 90px, 115% 10%, -85% 85%; }
}

@media (prefers-reduced-motion: reduce){
  .block--wide::after,
  .mini-section--wide::after{
    animation: none !important;
  }
}

/* =========================================================
   WIDE TONE v3 (visible / frosted blueprint)
   - paste at the END of styles.css
   ========================================================= */

:root{
  /* 0.45〜0.75くらいで調整（まずは 0.62 推奨） */
  --wide-tone-opacity: .62;

  /* 色の濃さ（必要ならここを上げる） */
  --wide-tone-dot:  rgba(0,113,227,.14);
  --wide-tone-grid: rgba(0,113,227,.10);
  --wide-tone-glow1: rgba(0,113,227,.34);
  --wide-tone-glow2: rgba(0,113,227,.22);
}

/* 1) 下地（= グローバル背景を少し消す） */
.block--wide::before{
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(0,113,227,.10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(255,255,255,.55);
}

/* frosted glass（対応ブラウザだけ強化） */
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))){
  .block--wide::before{
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* 2) “見える” 質感（ドット + グリッド + グロー） */
.block--wide::after{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform: translateX(-50%);
  pointer-events:none;
  z-index:0;

  opacity: var(--wide-tone-opacity);

  background-image:
    /* dot matrix */
    radial-gradient(circle at 1px 1px, var(--wide-tone-dot) 1.15px, transparent 1.35px),

    /* thin grid */
    repeating-linear-gradient(0deg,  var(--wide-tone-grid) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, var(--wide-tone-grid) 0 1px, transparent 1px 160px),

    /* soft glow blobs */
    radial-gradient(900px 320px at 18% 22%, var(--wide-tone-glow1), transparent 70%),
    radial-gradient(1100px 380px at 82% 70%, var(--wide-tone-glow2), transparent 72%);

  background-size:
    22px 22px,
    auto,
    auto,
    1400px 900px,
    1500px 950px;

  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;

  filter: saturate(115%);
  animation: wideToneDrift 22s ease-in-out infinite alternate;
}

@keyframes wideToneDrift{
  0%{
    background-position:
      0 0,
      0 0,
      0 0,
      0% 0%,
      100% 100%;
  }
  100%{
    background-position:
      180px 120px,
      0 60px,
      80px 0,
      100% 0%,
      -60% 120%;
  }
}

@media (prefers-reduced-motion: reduce){
  .block--wide::after{ animation: none; }
}

/* mini page wide も同じトーンに（上書き） */
.mini-section--wide::before{
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(0,113,227,.10), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.88));
}
.mini-section--wide::after{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform: translateX(-50%);
  pointer-events:none;
  z-index:0;

  opacity: calc(var(--wide-tone-opacity) * .9);

  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,113,227,.13) 1.05px, transparent 1.25px),
    repeating-linear-gradient(0deg,  rgba(0,113,227,.09) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(0,113,227,.09) 0 1px, transparent 1px 160px),
    radial-gradient(900px 320px at 20% 20%, rgba(0,113,227,.28), transparent 70%),
    radial-gradient(1100px 380px at 80% 75%, rgba(0,113,227,.18), transparent 72%);
  background-size: 22px 22px, auto, auto, 1400px 900px, 1500px 950px;
  animation: wideToneDrift 22s ease-in-out infinite alternate;
}
.mini-section--wide .mini-head,
.mini-section--wide .mini-body{
  position:relative;
  z-index:1;
}

/* =========================
   Wide block: fixed band + motion from underlying canvas
   (no horizontal drifting rectangle)
   ========================= */

.block--wide{
  position: relative;
  isolation: isolate;
}

/* Base: a glassy band (static). The motion comes from what's behind it. */
.block--wide::before{
  content:"";
  position:absolute;

  /* extend a bit so the edge doesn't read as a “card frame” */
  inset: -52px 0;

  left: 50%;
  width: 100%;
  transform: translateX(-50%);

  /* stronger than before: blue-tinted glass */
  background: linear-gradient(
    180deg,
    rgba(225,241,255,0.82),
    rgba(250,253,255,0.78)
  );

  /* make the existing animated background visible, but refined */
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);

  /* soften top/bottom boundary (avoid “rect panel” feeling) */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);

  pointer-events:none;
  z-index:-1;
}

/* Overlay: dots + gentle glow (breath only, no X/Y drift) */
.block--wide::after{
  content:"";
  position:absolute;
  inset: -52px 0;

  left: 50%;
  width: 100%;
  transform: translateX(-50%);

  background:
    radial-gradient(
      900px 520px at 50% 0%,
      rgba(0,113,227,0.18),
      transparent 60%
    ),
    radial-gradient(
      circle,
      rgba(0,113,227,0.10) 1px,
      transparent 1.6px
    );
  background-size: auto, 16px 16px;
  background-position: 50% 0, 0 0;

  opacity: 0.82;
  pointer-events:none;
  z-index:-1;

  animation: wideBreath 10s ease-in-out infinite;
}

@keyframes wideBreath{
  0%,100%{ opacity: 0.72; }
  50%{ opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce){
  .block--wide::after{ animation:none; }
}

/* =========================
   Mini page wide section: fill the content column (NOT 100vw)
   ========================= */

.mini-section--wide{
  /* override the default 900px clamp */
  max-width: none;
  width: 100%;
  position: relative;
  isolation: isolate;
}

/* keep actual text width the same (so it doesn’t become too wide) */
.mini-section--wide .mini-head,
.mini-section--wide .mini-body{
  max-width: 900px;
  margin: 0 auto;
}

/* background band (static) */
.mini-section--wide::before{
  content:"";
  position:absolute;

  /* slightly taller than content */
  inset: -28px 0;

  left: 0;
  width: 100%;

  background: linear-gradient(
    180deg,
    rgba(225,241,255,0.84),
    rgba(250,253,255,0.80)
  );

  backdrop-filter: blur(16px) saturate(1.10);
  -webkit-backdrop-filter: blur(16px) saturate(1.10);

  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);

  pointer-events:none;
  z-index:-1;
}

/* dots + glow (breath only) */
.mini-section--wide::after{
  content:"";
  position:absolute;
  inset: -28px 0;

  left: 0;
  width: 100%;

  background:
    radial-gradient(
      700px 420px at 50% 0%,
      rgba(0,113,227,0.18),
      transparent 60%
    ),
    radial-gradient(
      circle,
      rgba(0,113,227,0.10) 1px,
      transparent 1.6px
    );
  background-size: auto, 16px 16px;
  background-position: 50% 0, 0 0;

  opacity: 0.82;
  pointer-events:none;
  z-index:-1;

  animation: wideBreath 10s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .mini-section--wide::after{ animation:none; }
}

/* =========================================================
   WIDE PATCH (stabilize + minimal, no "card" frames)
   - Mini wide: remove card artifacts + fix ::before display/transform
   - Normal wide: remove legacy borders that can read as bugs
   - Rhythm: breakout media only inside wide blocks (desktop)
   ========================================================= */

/* 1) Mini page wide: keep the "no card" philosophy */
.mini-section--wide{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

/* Ensure pseudo elements actually render and never inherit old transforms */
.mini-section--wide::before,
.mini-section--wide::after{
  display: block;
  transform: none;
  border: 0;
  border-radius: 0;
}

/* 2) Wide band: remove legacy borders/frames */
.block--wide::before,
.mini-section--wide::before{
  border: 0;
  box-shadow: none;
}

/* 3) Desktop: breakout media ONLY in wide blocks */
@media (min-width: 900px){
  /* reset: non-wide blocks keep the centered media width */
  body:not(.overlay-open) .block:not(.block--wide) .media{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
  }

  /* wide blocks: allow media to feel wide */
  body:not(.overlay-open) .block--wide .media{
    max-width:none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 var(--media-pad);
    text-align: center;
  }
  body:not(.overlay-open) .block--wide .media img{
    width: min(100%, var(--media-max));
    margin-left:auto;
    margin-right:auto;
  }
  body:not(.overlay-open) .block--wide .media figcaption{
    max-width: min(100%, var(--media-max));
    margin-left:auto;
    margin-right:auto;
  }
}


/* =========================================================
   Background Variants + Switcher UI
   - museum (existing): #bg-museum-wall
   - white-ink:         #bg-particles
   - geo:               .geo-motion-bg / #geoBg
   ========================================================= */

/* White Ink (WebGL2) */
canvas#bg-particles{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: -1;
  pointer-events: none;
  filter: saturate(110%) contrast(112%);
  opacity: 1;
  transition: opacity .45s ease;
}

/* Geometric motion (2D) */

/* =========================================================
   FIX: Wide band edge overlap
   - Prevent .block--wide background bands from bleeding into
     the previous section (causes an unwanted “line/underline”
     behind text at the boundary).
   - We only change the pseudo-element inset. No layout / assets.
   ========================================================= */

.block--wide::before,
.block--wide::after{
  inset: 0 !important; /* was negative inset in some variants */
}
.geo-motion-bg{
  position: fixed;
  inset: 0;
  display: none;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: #fff;
  opacity: 1;
  transition: opacity .45s ease;
}
.geo-motion-bg > canvas{
  width: 100%;
  height: 100%;
  display: block;
}

/* Variant routing */
body[data-bg-variant="museum"] canvas#bg-museum-wall{ display:block; opacity:1; }
body[data-bg-variant="museum"] canvas#bg-particles{ display:none; }
body[data-bg-variant="museum"] .geo-motion-bg{ display:none; }

body[data-bg-variant="white-ink"] canvas#bg-museum-wall{ display:block; opacity:0; }
body[data-bg-variant="white-ink"] canvas#bg-particles{ display:block; }
body[data-bg-variant="white-ink"] .geo-motion-bg{ display:none; }

body[data-bg-variant="geo"] canvas#bg-museum-wall{ display:block; opacity:0; }
body[data-bg-variant="geo"] canvas#bg-particles{ display:none; }
body[data-bg-variant="geo"] .geo-motion-bg{ display:block; }

/* Overlay open: match existing behavior (fade backgrounds) */
body.overlay-open canvas#bg-particles,
body.overlay-open .geo-motion-bg{
  opacity: 0;
}

/* Reduced motion: hide backgrounds */
@media (prefers-reduced-motion: reduce) {
  canvas#bg-particles,
  .geo-motion-bg{ display:none !important; }
}

/* ===== Switcher UI (minimal, no frames) ===== */
.bg-picker{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
.bg-picker__label{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(11,12,15,.42);
}
.bg-picker__btn{
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 12px;
  color: rgba(11,12,15,.62);
  background: transparent;
  border: 0;
  padding: 8px 6px;
  cursor: pointer;
}
.bg-picker__btn:hover{
  color: rgba(11,12,15,.92);
}
.bg-picker__btn.is-active{
  color: rgba(11,12,15,.92);
  font-weight: 700;
}
.bg-picker__sep{
  font-size: 12px;
  color: rgba(11,12,15,.30);
  user-select: none;
}

@media (max-width: 720px){
  .bg-picker__label{ display:none; }
  .bg-picker{ gap:6px; }
  .bg-picker__btn{ padding-inline:4px; }
}



/* ===== Cursor FX (Pointer gimmick) =====
   - Minimal "AI Sense Glass" decoration layer.
   - JS limits the effect to header / rails only.
   - Disabled on touch/coarse pointers, prefers-reduced-motion, and while the Personal Page overlay is open.
*/
.cursor-fx{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 120;
}

body.overlay-open .cursor-fx{ display:none !important; }

/* Never run cursor FX on touch/coarse pointers */
@media (pointer: coarse){
  .cursor-fx{ display:none !important; }
}

/* Reduced motion: hide the FX layer */
@media (prefers-reduced-motion: reduce){
  .cursor-fx{ display:none !important; }
}

/* =========================================================
   Meaningful Block Enhancements (no decorative frames)
   - Disclosure lists (＋) / Steps / Micro diagram
   - Adds interaction without relying on borders/lines/cards.
   ========================================================= */

.md-spacer{ height: 26px; }

.reveal-list,
.qa-list,
.steps{
  max-width: 70ch;
  margin: 20px auto 0;
  text-align: left;
}

.reveal,
.step{
  margin-top: 10px;
}

.reveal summary,
.step summary{
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  user-select: none;
}

.reveal summary::-webkit-details-marker,
.step summary::-webkit-details-marker{
  display:none;
}

.reveal summary:hover .reveal-label,
.step summary:hover .step-title{
  color: rgba(11,12,15,.94);
}

.reveal-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: rgba(11,12,15,.46);
  margin-top: 2px;
}
.reveal-icon svg{ width:100%; height:100%; display:block; }

.reveal-label{
  font-weight: 850;
  color: rgba(11,12,15,.86);
  line-height: 1.5;
}

.reveal summary::after,
.step summary::after{
  content:"＋";
  margin-left:auto;
  color: rgba(11,12,15,.38);
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease;
}

.reveal[open] summary::after,
.step[open] summary::after{
  transform: translateY(1px) rotate(45deg);
  opacity: .85;
}

.reveal-body{
  margin-top: 10px;
  padding-left: 28px;
  color: rgba(11,12,15,.74);
  line-height: 2.0;
}
.reveal-body p{ margin:0; max-width:70ch; }
.reveal-body p + p{ margin-top: 14px; }

.reveal[open] > .reveal-body,
.step[open] > .reveal-body{
  animation: revealIn .18s ease both;
}

@keyframes revealIn{
  from{ opacity:0; transform: translateY(-4px); }
  to{ opacity:1; transform: translateY(0); }
}

.micro-flow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin: 2px 0 10px;
  color: rgba(11,12,15,.56);
  font-size: 13px;
  letter-spacing: .02em;
}
.flow-node{ font-weight: 800; }
.flow-arrow{ opacity:.45; }

.step-num{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(11,12,15,.045);
  display: inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 12px;
  color: rgba(11,12,15,.78);
  flex: 0 0 auto;
}
.step-title{
  font-weight: 850;
  color: rgba(11,12,15,.86);
  line-height: 1.55;
}
.step-body{ padding-left: 38px; }

/* Paragraph-only blocks: "read more" */
.md-more{ margin-top: 18px; }

/* Slightly different accent for Q&A */
.qa-item .reveal-icon{ color: rgba(0,113,227,.42); }

@media (max-width: 720px){
  .reveal-list, .qa-list, .steps{ margin-top: 16px; }
  .reveal-body{ padding-left: 24px; }
  .step-body{ padding-left: 34px; }
  .step-num{ width: 26px; height: 26px; }
}



/* =========================================================
   BIG FOOTER (full-bleed black, wide layout)
   - No decorative lines / frames; structure is typography + spacing
   ========================================================= */

.container-wide{
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 20px;
}

.site-footer{
  margin-top: clamp(96px, 10vw, 160px);
  padding: clamp(72px, 8vw, 120px) 0 56px;
  background: #0b0c0f;
  color: rgba(255,255,255,.72);
  position: relative;
  z-index: 5;
}

.site-footer a{
  color: rgba(255,255,255,.72);
  text-decoration: none;
}
.site-footer a:hover{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}

.site-footer__top{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(18px, 4vw, 56px);
  align-items: start;
}

.sf-logo{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.95);
}

.sf-logo::before{
  content:"";
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  background: url("./assets/kazera_mark_x.png") center/contain no-repeat;
  filter: invert(1) saturate(0) brightness(1.35);
  opacity: .92;
  transform: translateY(1px);
}

@media (max-width: 520px){
  .sf-logo::before{ width:22px; height:22px; }
}
.sf-tag{
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.46);
}
.sf-lead{
  margin: 16px 0 0;
  max-width: 54ch;
  color: rgba(255,255,255,.76);
  line-height: 1.9;
  font-size: 13px;
}

/* Footer copy: keep short phrases together (avoid lonely characters like "で。") */
.sf-nowrap{ white-space: nowrap; }

.sf-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.sf-btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}
.sf-btn:hover{
  background: rgba(255,255,255,.18);
}
.sf-btn--ghost{
  background: rgba(255,255,255,0);
  color: rgba(255,255,255,.82);
}
.sf-btn--ghost:hover{
  background: rgba(255,255,255,.10);
}

.sf-meta{
  display:grid;
  gap: 12px;
}
.sf-kv{
  display:flex;
  gap: 14px;
  align-items: baseline;
}
.sf-k{
  width: 86px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.sf-v{
  flex: 1;
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.9;
  display:flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.sf-copy{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.sf-copy:hover{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.sf-chips{
  gap: 8px;
}
.sf-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 700;
}
.sf-chip:hover{
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
}

.site-footer__grid{
  margin-top: clamp(34px, 4vw, 56px);
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px 18px;
}

.sf-col-title{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 10px;
}
.sf-link{
  display:block;
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
}
.sf-link:hover{
  color: rgba(255,255,255,.95);
}

.site-footer__bottom{
  margin-top: clamp(34px, 4vw, 52px);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.sf-small{
  font-size: 12px;
  color: rgba(255,255,255,.42);
  line-height: 1.7;
}
.sf-small--right{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

.sf-mini{
  font-size: 12px;
  color: rgba(255,255,255,.46);
}
.sf-mini:hover{
  color: rgba(255,255,255,.92);
}

.sf-top{
  margin-left: auto;
  border: 0;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 800;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.sf-top:hover{
  background: rgba(255,255,255,.16);
}

@media (max-width: 980px){
  .site-footer__top{
    grid-template-columns: 1fr;
  }
  .site-footer__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sf-k{
    width: 78px;
  }
}

@media (max-width: 520px){
  .site-footer__grid{
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   /* =========================================================
   PAGE RAILS + CHAPTERS (Layout layer)
   - 2030 minimal: whitespace + subtle glass light-field
   - Avoid "frames": no bordered cards for side rails
   - Fix: wide/chapter bands span across rails (no seam)
   ========================================================= */

:root{
  /* Keep rails visually balanced so the main content stays centered */
  --rail-left-w: 280px;
  --rail-right-w: 280px;
  --rail-gap: 28px;
  --rail-gap-left: var(--rail-gap);
  --rail-gap-right: var(--rail-gap);

  /* Visual viewport height (JS sets px; fallback = 100vh) */
  --vvp: 100vh;

  /* Legacy helper (1% unit). Keep for compatibility. */
  --vvh: 1vh;

  /* Rail sticky metrics */
  --rail-sticky-top: 86px;

  /* Bottom safety gap for the right rail (JS may increase if needed) */
  --rail-sticky-bottom-gap: 24px; /* legacy alias */
  --rail-right-bottom-gap: var(--rail-sticky-bottom-gap);
}

.page-shell{
  position: relative;
  z-index: 5;
  /* Bring side elements closer to the viewport edge without killing breathing room */
  padding: 0 clamp(14px, 2.2vw, 34px);
}

.page-grid{
  display: grid;
  grid-template-columns: var(--rail-left-w) minmax(0, 1fr) var(--rail-right-w);
  grid-template-areas: "left main right";
  gap: var(--rail-gap);
  align-items: start;
}

.rail-left{ grid-area: left; }
.page-main{ grid-area: main; min-width: 0; }
.rail-right{ grid-area: right; }

/* Rails: sticky, but NOT a “panel card” (no frame / no nested scroll) */
.rail{
  position: sticky;
  top: var(--rail-sticky-top); /* header height + breathing */
  z-index: 10;

  padding: 0;
  max-height: none;
  overflow: visible;

  background: none;
  border-radius: 0;
  box-shadow: none;

  transform: none;
  will-change: auto;
  isolation: auto;
}

/* Soft edge veil under rails (not a rectangle/card) */
.rail::before{
  content:"";
  position:absolute;
  inset: -24px -18px;
  pointer-events:none;
  z-index: -1;
  opacity: .95;

  mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}

.rail-left::before{
  background: linear-gradient(90deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.78) 42%,
    rgba(255,255,255,0) 100%);
}

.rail-right::before{
  background: linear-gradient(270deg,
    rgba(255,255,255,.92) 0%,
    rgba(255,255,255,.78) 44%,
    rgba(255,255,255,0) 100%);
}

.rail-inner{ padding: 6px 6px; }

/* ---------- Right bottom remote (icon-only) ---------- */

/* Right rail height: keep within the *visible* viewport (avoid 100vh mismatch / scrollbar differences) */
.rail.rail-right{
  height: calc(var(--vvp, 100vh) - var(--rail-sticky-top) - var(--rail-right-bottom-gap));
  max-height: calc(var(--vvp, 100vh) - var(--rail-sticky-top) - var(--rail-right-bottom-gap));
}

/* 右レール内を「上：カード群」「下：リモコン」に分ける */
.rail-right .rail-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 上側（カード群）だけをスクロール領域に */
.rail-right-stack{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 10px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* リモコンは常に最下部（欠けない） */
.rail-remote{
  flex: 0 0 auto;
  margin-top: 0;
  padding: 16px 6px calc(6px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: flex-end;
}

/* 画面高が極端に低い場合は 3列×2段にして高さを抑える */
@media (max-height: 560px){
  .rail-remote{ padding-top: 10px; }
  .rail-remote-grid{ grid-template-columns: repeat(3, 50px); }
}

/* 2列×3段（Topを右下に置ける） */
.rail-remote-grid{
  display: grid;
  grid-template-columns: repeat(2, 50px); /* ask-btnが50px */
  gap: 10px;
}

/* アイコンボタンのhoverで下線が出ないように（念のため） */
.rail-remote a.ask-btn:hover{ text-decoration: none; }

/* --- override: AI PERSONAL PAGE dot (minimal thought engine) --- */
.ai-dot{
  --eng: 12px; /* 11〜14で調整可 */
  width: var(--eng);
  height: var(--eng);
  border-radius: 999px;
  position: relative;
  background: transparent;

  /* “立体”は作らない：フラットな輪郭だけ */
  border: 1px solid rgba(11,12,15,.16);
  box-shadow: none;
}

/* rotor（回転するリングの一部） */
.ai-dot::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;

  /* 太めの“部品”を回す（小さくても動きが見える） */
  background: conic-gradient(from 0deg,
    rgba(0,113,227,.55) 0 44deg,
    rgba(0,0,0,0)      44deg 214deg,
    rgba(11,12,15,.22) 214deg 252deg,
    rgba(0,0,0,0)      252deg 360deg
  );

  /* リング（ドーナツ）化 */
  -webkit-mask-image: radial-gradient(circle,
    transparent 0 52%,
    #000 52% 84%,
    transparent 84%);
  mask-image: radial-gradient(circle,
    transparent 0 52%,
    #000 52% 84%,
    transparent 84%);

  animation: aiThinkRotor .78s linear infinite;
  will-change: transform;
}

/* orbit（燃料/信号が周回している感じ＝思考が回ってる） */
.ai-dot::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;

  background: radial-gradient(circle at 50% 16%,
    rgba(0,113,227,.58) 0 1.4px,
    transparent 1.5px);

  animation: aiThinkOrbit 1.18s linear infinite;
  will-change: transform;
}

@keyframes aiThinkRotor{ to{ transform: rotate(360deg); } }
@keyframes aiThinkOrbit{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .ai-dot::before,
  .ai-dot::after{
    animation: none !important;
  }
}


/* Hide rails when the mini overlay is open (focus on the generated page) */
body.overlay-open .rail{
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
}

/* ---------- Left: TOC (accordion groups for long pages) ---------- */

.toc-title{
  margin: 12px 8px 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(11,12,15,.56);
}

.toc-group{ margin-top: 10px; }

.toc-group-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 8px;
  border: 0;
  background: transparent;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: background .16s ease, transform .16s ease;
}

.toc-group-btn:hover{
  background: rgba(11,12,15,.035);
  transform: translateY(-1px);
}

.toc-group-title{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(11,12,15,.42);
}

.toc-toggle{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(11,12,15,.05);
  color: rgba(11,12,15,.55);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  transition: transform .18s ease, background .18s ease, color .18s ease;
  opacity: .78;
}

.toc-group.toc-group--open .toc-toggle{
  transform: rotate(45deg); /* "+" -> "×" */
  background: rgba(0,113,227,.10);
  color: rgba(0,113,227,.85);
}

.toc-links{
  display:flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 4px 6px;

  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height .30s ease, opacity .20s ease, transform .20s ease;
}

.toc-group--open .toc-links{
  max-height: 520px;
  opacity: 1;
  transform: none;
}

/* Cases: TOC項目が多く/長く、520px固定だと下が見切れるため */
body[data-page="services-cases"] .toc-group--open .toc-links{
  max-height: calc(100vh - 220px); /* 画面高に追従（ヘッダ/余白ぶん差し引き） */
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 14px;
}

.toc-link{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 10px;
  border-radius: 14px;
  color: rgba(11,12,15,.68);
  text-decoration: none;
  transition: background .16s ease, transform .16s ease, color .16s ease;
}

.toc-link:hover{
  background: rgba(11,12,15,.04);
  transform: translateY(-1px);
}

.toc-link.active{
  background: rgba(0,113,227,.10);
  color: rgba(11,12,15,.92);
  font-weight: 900;
}

.toc-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(11,12,15,.14);
  margin-top: 7px;
  flex: 0 0 auto;
}

.toc-link.active .toc-dot{
  background: rgba(0,113,227,.75);
  box-shadow: 0 0 0 6px rgba(0,113,227,.12);
}

.toc-text{ font-size: 13px; line-height: 1.55; }

/* ---------- Right: actions + now/next (chips/buttons are the “surfaces”) ---------- */

.rail-card{ padding: 8px 6px; }
.rail-card + .rail-card{ margin-top: 14px; }

.rail-kicker{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(11,12,15,.46);
}

.rail-actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.rail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(11,12,15,.88);
  color: #fff;
  text-decoration:none;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .04em;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
}

.rail-btn:hover{ opacity: .92; transform: translateY(-1px); }

.rail-btn--ghost{
  background: rgba(11,12,15,.06);
  color: rgba(11,12,15,.82);
}

.rail-btn--ghost:hover{ background: rgba(11,12,15,.09); opacity: 1; }

.rail-now-title{
  margin-top: 10px;
  font-size: 15px;
  font-weight: 950;
  color: rgba(11,12,15,.92);
  line-height: 1.42;
}

.rail-now-meta{
  margin-top: 10px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.rail-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.32);
  color: rgba(11,12,15,.62);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rail-now-actions{ margin-top: 10px; }

.rail-mini-btn{
  border: 0;
  background: rgba(11,12,15,.06);
  color: rgba(11,12,15,.74);
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
}

.rail-mini-btn:hover{ background: rgba(11,12,15,.09); }

.rail-next{
  margin-top: 10px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}

.rail-next-link{
  text-decoration:none;
  color: rgba(11,12,15,.72);
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.22);
  transition: background .16s ease, transform .16s ease, color .16s ease;
}

.rail-next-link:hover{
  background: rgba(255,255,255,.32);
  transform: translateY(-1px);
  color: rgba(11,12,15,.86);
}

.rail-next-title{
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px){
  /* 片側レールだけ残ると、wide画像のブレイクアウトが非対称になって崩れて見えるため、
     1180px以下は左右レールを両方OFFにして「1カラム」に統一する */
  :root{
    --rail-left-w: 0px;
    --rail-right-w: 0px;
    --rail-gap-left: 0px;
    --rail-gap-right: 0px;
  }
  .page-grid{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main";
    gap: 0;
  }
  .rail-left,
  .rail-right{
    display:none;
  }
}

/* =========================================================
   Access/Contact page: disable side rails (avoid wide embeds overlap)
   ========================================================= */
body[data-page="info-access"]{
  --rail-left-w: 0px;
  --rail-right-w: 0px;
  --rail-gap-left: 0px;
  --rail-gap-right: 0px;
}

body[data-page="info-access"] .page-grid{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main";
  gap: 0;
}

body[data-page="info-access"] .rail-left,
body[data-page="info-access"] .rail-right{
  display: none;
}

/* Map tone-down (no class required) */
body[data-page="info-access"] iframe[src*="google.com/maps"]{
  filter: saturate(.50) grayscale(.08) contrast(.95) brightness(1.02) !important;
}

@media (max-width: 980px){
  .page-shell{ padding: 0 20px; }
}

@media (max-width: 520px){
  .page-shell{ padding: 0 14px; }
}

/* ---------- Chapter “bands” behind groups of blocks ---------- */

.chapter{ position: relative; }

.page-grid .chapter::before{
  content:"";
  position:absolute;
  inset:0;
  left: calc(-1 * (var(--rail-left-w) + var(--rail-gap-left)));
  width: calc(100% + var(--rail-left-w) + var(--rail-gap-left) + var(--rail-right-w) + var(--rail-gap-right));
  right: auto;
  pointer-events:none;
  z-index:0;
}

.page-grid .chapter > *{ position: relative; z-index: 1; }

.page-grid .chapter--tone1::before{
  background:
    radial-gradient(1200px 520px at 16% 0%, rgba(0,113,227,.10), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.52));
}

.page-grid .chapter--tone2::before{
  background:
    radial-gradient(980px 460px at 88% 12%, rgba(11,12,15,.07), rgba(255,255,255,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.50));
}

.page-grid .chapter--tone3::before{
  background:
    radial-gradient(1100px 520px at 52% -8%, rgba(0,113,227,.08), rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.50));
}

/* Wide “bands” (block--wide) must also span across rails in the new grid layout */
.page-grid .block--wide::before{
  left: calc(-1 * (var(--rail-left-w) + var(--rail-gap-left)));
  width: calc(100% + var(--rail-left-w) + var(--rail-gap-left) + var(--rail-right-w) + var(--rail-gap-right));
  right: auto;
  transform: none;
}


/* ---------- Scroll reveal (in-view) ---------- */
/*
  NOTE:
  `.reveal` は「＋で開く詳細（details）」用のクラスとして既に使っているため、
  スクロール表示のアニメーションは data-reveal 属性にスコープする。
  `.reveal` を隠すと、本文が「抜け落ちた」ように見える不具合が発生する。
*/

html.js [data-reveal]{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(10px);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform, filter;
}

html.js [data-reveal].is-inview{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  html.js [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ---------- Pointer Ripples (move + click) ---------- */
:root{
  /* 彩度控えめの空色（少しだけ存在感を戻す） */
  --pp-accent-rgb: 88, 152, 205;
}

/* 画面固定の波紋レイヤー：本文/ミニページの上に出す */
.pointer-ripple-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;

  /* header(100)より下 / overlay(50)より上 / cursor-fx(120)より下 */
  z-index: 90;
}

.pointer-ripple{
  position: absolute;
  left: 0;
  top: 0;

  /* ベースは小さめ（拡大はscaleで） */
  width: 12px;
  height: 12px;
  border-radius: 999px;

  /* 中心の薄いグロー + 太めのリング（calc乗算を使わずJSで変数を渡す） */
  background:
    radial-gradient(circle,
      rgba(var(--pp-accent-rgb), var(--rg, 0.00)) 0%,
      rgba(var(--pp-accent-rgb), 0) 46%),
    radial-gradient(circle,
      rgba(var(--pp-accent-rgb), 0) 50%,
      rgba(var(--pp-accent-rgb), var(--ra, .16)) 55%,
      rgba(var(--pp-accent-rgb), var(--ra2, .08)) 64%,
      rgba(var(--pp-accent-rgb), 0) 72%);

  transform: translate(-50%, -50%) scale(.12);
  opacity: .95;
  will-change: transform, opacity;
  animation: pp-ripple 860ms ease-out forwards;
}

@keyframes pp-ripple{
  to{
    transform: translate(-50%, -50%) scale(var(--rmax, 30));
    opacity: 0;
  }
}

/* motion配慮＆タッチ端末では無効 */
@media (prefers-reduced-motion: reduce){
  .pointer-ripple-layer{ display:none !important; }
}
@media (hover: none), (pointer: coarse){
  .pointer-ripple-layer{ display:none !important; }
}


/* ---- Command Palette (⌘K / Ctrl+K) ---- */
.cmdk-overlay{
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 84px 18px 24px;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(10px);
}
.cmdk-overlay[hidden]{ display:none !important; }

.cmdk-panel{
  width: min(720px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,12,15,.10);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.12);
  padding: 16px;
}

.cmdk-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cmdk-title{
  font-size: 13px;
  letter-spacing: .18em;
  font-weight: 800;
  color: rgba(11,12,15,.70);
}
.cmdk-hint{
  font-size: 12px;
  color: rgba(11,12,15,.40);
}

.cmdk-input{
  width: 100%;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(11,12,15,.10);
  padding: 0 14px;
  font-size: 16px;
  background: rgba(255,255,255,.88);
  outline: none;
}
.cmdk-input:focus{
  border-color: rgba(0,113,227,.40);
  box-shadow: 0 0 0 3px rgba(0,113,227,.14);
}

.cmdk-list{
  margin-top: 12px;
  max-height: min(46vh, 420px);
  overflow:auto;
  border-radius: 12px;
}

.cmdk-item{
  width: 100%;
  text-align: left;
  display:flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.cmdk-item:hover{
  background: rgba(11,12,15,.04);
}
.cmdk-item.is-active{
  background: rgba(0,113,227,.06);
  border-color: rgba(0,113,227,.18);
}

.cmdk-item-main{
  font-weight: 850;
  color: rgba(11,12,15,.86);
}
.cmdk-item-sub{
  font-size: 12px;
  color: rgba(11,12,15,.55);
}

.cmdk-empty{
  padding: 14px 12px;
  color: rgba(11,12,15,.48);
  font-size: 13px;
}

/* =========================================================
   Background visibility tweak
   - Reduce long “paper-white” runs on pages with 1 chapter
   - Make chapter/wide bands more translucent (glass-like)
   - Mobile/desktop both
   ========================================================= */

:root{
  /* Chapter band (the big background behind a whole chapter) */
  --chapter-white-top: .60;
  --chapter-white-bot: .34;

  /* Wide band (per block @layout: wide) */
  --wide-glass-top: .66;
  --wide-glass-bot: .46;
  --wide-overlay-opacity: .56;

  /* Lower blur => background lines stay visible */
  --wide-blur: 10px;

  /* How much the top/bottom edge fades (bigger => more background peek) */
  --wide-edge: 22%;
}

/* ---------- Chapter bands (this is what becomes “all-white” when a page has only 1 chapter) ---------- */
.page-grid .chapter--tone1::before{
  background:
    radial-gradient(1200px 520px at 16% 0%, rgba(0,113,227,.12), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,
      rgba(255,255,255,var(--chapter-white-top)),
      rgba(255,255,255,var(--chapter-white-bot))
    );
}
.page-grid .chapter--tone2::before{
  background:
    radial-gradient(980px 460px at 88% 12%, rgba(11,12,15,.06), rgba(255,255,255,0) 62%),
    linear-gradient(180deg,
      rgba(255,255,255,.58),
      rgba(255,255,255,.32)
    );
}
.page-grid .chapter--tone3::before{
  background:
    radial-gradient(1100px 520px at 52% -8%, rgba(0,113,227,.10), rgba(255,255,255,0) 66%),
    linear-gradient(180deg,
      rgba(255,255,255,.59),
      rgba(255,255,255,.33)
    );
}

/* ---------- Wide blocks: make the “white panel” see-through and less monotonous ---------- */
.block--wide::before{
  /* Stop vertical overlap that kills “gaps” */
  top: 0 !important;
  bottom: 0 !important;

  background: linear-gradient(
    180deg,
    rgba(225,241,255,var(--wide-glass-top)),
    rgba(250,253,255,var(--wide-glass-bot))
  ) !important;

  -webkit-backdrop-filter: blur(var(--wide-blur)) saturate(1.10);
  backdrop-filter: blur(var(--wide-blur)) saturate(1.10);

  /* Softer top/bottom boundary => background can peek between sections */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent,
    #000 var(--wide-edge),
    #000 calc(100% - var(--wide-edge)),
    transparent
  );
  mask-image: linear-gradient(
    180deg,
    transparent,
    #000 var(--wide-edge),
    #000 calc(100% - var(--wide-edge)),
    transparent
  );
}

.block--wide::after{
  top: 0 !important;
  bottom: 0 !important;

  opacity: var(--wide-overlay-opacity) !important;

  /* Keep a gentle blueprint feel but not “solid white” */
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(0,113,227,0.14), transparent 62%),
    radial-gradient(circle, rgba(0,113,227,0.08) 1px, transparent 1.6px) !important;

  background-size: auto, 16px 16px !important;
  background-position: 50% 0, 0 0 !important;
}

/* In the 3-column grid layout, make BOTH wide layers span across rails */
.page-grid .block--wide::before,
.page-grid .block--wide::after{
  left: calc(-1 * (var(--rail-left-w) + var(--rail-gap-left)));
  width: calc(100% + var(--rail-left-w) + var(--rail-gap-left) + var(--rail-right-w) + var(--rail-gap-right));
  right: auto;
  transform: none;
}

/* =========================
   Mini right rail — A) Constellation + C) Seal
   ========================= */

.mini-rail{
  /* 既存の sticky はそのままでOK */
}

/* 右側の中身を“縦に整列” */
.mini-rail-inner{
  width: 180px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  padding-top: 6px;
}

/* A) Constellation panel（ガラスっぽい極薄） */
.mini-constellation-panel{
  width: 180px;
  max-width: 100%;
  border: 1px solid rgba(11,12,15,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
  box-shadow: 0 18px 60px rgba(0,0,0,.06);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  padding: 12px 12px 10px;
}

.mini-constellation-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: rgba(11,12,15,.46);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  user-select: none;
}

.mini-constellation-mark{
  display: inline-flex;
  width: 14px;
  height: 14px;
  opacity: .70;
}

.mini-constellation-label{
  opacity: .92;
}

.mini-constellation{
  width: 100%;
  height: 220px;        /* 見栄え最優先の固定高 */
  display: block;
  border-radius: 12px;
  pointer-events: none; /* 装飾なので操作させない */
}

/* C) Seal panel（枠なし寄り。下に“刻印”が置かれているだけの感じ） */
.mini-seal-panel{
  width: 180px;
  max-width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 2px;
}

.mini-seal-svg{
  width: 132px;
  height: 132px;
  display: block;
  pointer-events: none;
  color: rgba(11,12,15,.42);
  opacity: .92;
  filter: saturate(1.08);
}

/* reduced motion：見た目は残すが、余計な変化はさせない */
@media (prefers-reduced-motion: reduce){
  .mini-constellation-panel{ backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* =========================================================
   Mini TOC — frameless / modern refinement
   (remove “boxed list” feel; keep it functional)
   ========================================================= */

.mini-aside-title{
  display: flex;
  align-items: center;
  gap: 12px;
}

.mini-aside-title::after{
  content:"";
  flex: 1;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(0,113,227,.22), rgba(11,12,15,.10), transparent);
  opacity: .85;
}

/* Ensure no panel styling sneaks in */
.mini-toc{
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.mini-toc::before{content:none !important;}

/* Items: no borders, no “cards”, just subtle hover/active */
.toc-item{
  position: relative;
  padding: 10px 10px 10px 8px;
  border-radius: 14px;
  background: transparent;
}

.toc-item:hover{
  background: rgba(11,12,15,.03);
}

.toc-item.active{
  background: rgba(0,113,227,.07);
  color: rgba(0,113,227,.92);
}

.toc-item.active::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(0,113,227,.92), rgba(0,113,227,.34));
  opacity: .9;
}

/* Number badge: keep, but remove borders and heaviness */
.toc-no{
  background: rgba(11,12,15,.05);
  border: none;
  color: rgba(11,12,15,.46);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.toc-item.active .toc-no{
  background: rgba(0,113,227,.14);
  color: rgba(0,113,227,.92);
}

.toc-sub{color: rgba(11,12,15,.40);}
.toc-item.active .toc-sub{color: rgba(0,113,227,.62);}

/* =========================================================
   Mini footer — include certificate seal
   ========================================================= */
.mini-footer-legal{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
}

.mini-footer-seal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  opacity: .68;
  transform: translateY(-1px);
}

.mini-footer-seal .mini-seal-svg{
  width: 34px;
  height: 34px;
  display:block;
  color: rgba(11,12,15,.36);
  opacity: 1;
  filter: none;
}

.mini-footer-legal-text{
  display:inline-block;
}


/* Kazera mark in mini footer brand (avoid baseline shift) */
.mini-footer-brand strong{
  position: relative;
  display:inline-block;
  padding-left: calc(16px + 8px);
}
.mini-footer-brand strong::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width: 16px;
  height: 16px;
  background: url("./assets/kazera_mark_x.png") center/contain no-repeat;
  opacity: .82;
  transform: translateY(-50%);
}
/* =========================================================
   Mini Aside — ultra minimal (NO boxes)
   - Remove the blue vertical bar
   - Remove item “cards” and borders
   - Mode switch becomes plain text tabs
   ========================================================= */

/* Mode switch: text-only (no pill / no border) */
.mini-aside-mode{
  margin-bottom: 12px;
  display:flex;
  justify-content:flex-end;
}

.mini-aside .mini-mode{
  width: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mini-aside .mini-mode-btn{
  position: relative;
  height: auto !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-weight: 900;
  color: rgba(11,12,15,.48) !important;
  transition: color .16s ease;
}

.mini-aside .mini-mode-btn:hover{
  transform: none !important;
  color: rgba(11,12,15,.78) !important;
}

.mini-aside .mini-mode-btn:active{
  transform: none !important;
}

.mini-aside .mini-mode-btn.active{
  background: transparent !important;
  color: rgba(11,12,15,.92) !important;
}

.mini-aside .mini-mode-btn.active::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: rgba(0,113,227,.72);
  opacity: .92;
}

/* Keep the recommendation dot, but make it micro and unobtrusive */
.mini-aside .mini-mode-btn[data-rec="1"]::after{
  top: 2px !important;
  right: -10px !important;
  width: 5px !important;
  height: 5px !important;
  opacity: .92;
}

/* TOC list: no “cards” (no borders / no rounded rectangles) */
.mini-aside .mini-toc{
  gap: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.mini-aside .toc-item{
  position: relative;
  width: 100%;
  flex: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
  padding: 14px 8px !important;
  display:flex !important;
  align-items:flex-start !important;
  gap: 12px !important;
}

.mini-aside .toc-item:hover{
  background: transparent !important;
}

.mini-aside .toc-item:active{
  transform: none !important;
}

/* Remove any left bars (including prior implementations) */
.mini-aside .toc-item::before,
.mini-aside .toc-item.active::before{
  content: none !important;
}

/* Hairline separators instead of boxes */
.mini-aside .toc-item::after{
  content:"";
  position:absolute;
  left: 44px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: rgba(11,12,15,.08);
  opacity: .70;
}
.mini-aside .toc-item:last-child::after{display:none;}

/* Number badge: minimal */
.mini-aside .toc-no{
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  border: 0 !important;
  background: rgba(11,12,15,.05) !important;
  color: rgba(11,12,15,.46) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  margin-top: 2px;
}

.mini-aside .toc-text{
  display:flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.25;
  color: rgba(11,12,15,.74);
}

.mini-aside .toc-sub{
  display:block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(11,12,15,.40);
}

/* Active state: color only (no background boxes) */
.mini-aside .toc-item.active{
  background: transparent !important;
}

.mini-aside .toc-item.active .toc-text{color: rgba(0,113,227,.92);}
.mini-aside .toc-item.active .toc-sub{color: rgba(0,113,227,.62);}
.mini-aside .toc-item.active .toc-no{
  background: rgba(0,113,227,.12) !important;
  color: rgba(0,113,227,.92) !important;
}
.mini-aside .toc-item.active::after{
  background: rgba(0,113,227,.16);
  opacity: .90;
}

/* Focus ring (keyboard only): keep accessible, but subtle */
.mini-aside .toc-item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,113,227,.14);
  border-radius: 14px;
}