/* ==========================================================
   自動生成（06_wordpress/_tools/build_wp.py）— 手で直さない
   元：05_coding/assets/css/pages/top.css
   変更点：各セレクタの頭に :is(.kk-wp, .editor-styles-wrapper) を足しただけ（値は同じ）。.kk-wp は SWELL の #body_wrap に付く
   SWELL の .post_content h2 などより詳細度を上げ、管理画面のエディタにも同じ見た目を出すため
   ========================================================== */
/* ==========================================================
   pages/top.css — トップページ固有（.kk-p-top-*）
   ヒーローとオープニングは 01_reference/opening_draft/style.css の値をそのまま移植（tokens.json の hero と同じ値）
   ========================================================== */
/* ---------- ヒーロー（Figma 38:5542 / 38:5661） ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero {
  position: relative;
  min-height: var(--kk-hero-h);
  padding-bottom: 120px;
  overflow: hidden;
  isolation: isolate;
  background: var(--kk-gradient-hero);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
}
/* WebGL が使えない／動きを減らす設定：案の実画面を書き出した静止画 */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero.is-still .kk-p-top-hero__canvas {
  background: url("../../img/hero-bg-pc.webp") center / cover no-repeat;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__noise {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--kk-gradient-hero-overlay-pc);
}

:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__content {
  position: relative;
  z-index: 2;
  width: var(--kk-hero-content-w);
  margin-left: clamp(26px, 7.2vw, var(--kk-hero-content-x));
  padding-top: calc(var(--kk-header-h-top) + clamp(80px, 12vh, 135px));
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--kk-hero-gap-eyebrow-to-h1);
  font-family: var(--kk-ff-en);
  font-size: var(--kk-fs-label);
  font-weight: var(--kk-fw-en-medium);
  letter-spacing: var(--kk-ls-eyebrow);
  line-height: 1;
  color: var(--kk-color-accent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--kk-color-main); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__title {
  font-family: var(--kk-ff-heading);
  font-size: var(--kk-fs-fluid-display);
  font-weight: var(--kk-fw-heading-display);
  letter-spacing: var(--kk-ls-display);
  line-height: var(--kk-lh-display);
  text-shadow: var(--kk-shadow-hero-text);
}
/* 改行は「課題と可能性の／翻訳社」で固定（2026-10-19 ユーザー指示。旧：課題と可能／性の翻訳社） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__title > span { display: block; white-space: nowrap; }
/* 助詞（と・の）を小さくして漢字を際立たせる */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__particle { font-size: 0.62em; letter-spacing: 0.02em; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__lead {
  margin-top: var(--kk-hero-gap-h1-to-lead);
  font-size: var(--kk-fs-fluid-lead);
  font-weight: var(--kk-fw-medium);
  letter-spacing: var(--kk-ls-lead);
  line-height: var(--kk-lh-lead);
  color: rgba(244, 239, 230, .94);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__note {
  margin-top: var(--kk-hero-gap-lead-to-note);
  font-size: var(--kk-fs-fluid-hero-note);
  letter-spacing: var(--kk-ls-hero-note);
  line-height: var(--kk-lh-intro);
  color: rgba(244, 239, 230, .62);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--kk-hero-gap-actions-gap);
  margin-top: var(--kk-hero-gap-to-actions);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__actions .kk-c-button--primary { width: min(360px, max(30vw, 300px)); } /* 丸アイコンで1行に収まる幅 2026-10-16 */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__link {
  display: inline-flex; /* 矢印を文字の上下中央に（2026-10-16） */
  align-items: center;
  gap: 6px;
  padding-block: 10px;
  border-bottom: 1px solid rgba(183, 154, 104, .45);
  font-size: var(--kk-fs-caption);
  letter-spacing: var(--kk-ls-caption);
  line-height: var(--kk-lh-label);
  color: rgba(244, 239, 230, .68);
  transition: color var(--kk-dur-fast) var(--kk-ease-base);
}
/* 当たり判定 44px（tokens tapTarget・QA B-2）。見た目は変えない */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__link { position: relative; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--kk-tap-target));
  height: max(100%, var(--kk-tap-target));
  transform: translate(-50%, -50%);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__link:hover,
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__link:focus-visible { color: var(--kk-color-accent-light); }

/* 装飾（aria-hidden） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__focus {
  position: absolute;
  left: 57.5%;
  top: calc(50% + 12px);
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  width: 144px;
  transform: translateX(-50%);
  font: var(--kk-fw-en-medium) var(--kk-fs-micro)/1 var(--kk-ff-en);
  letter-spacing: var(--kk-ls-micro);
  color: rgba(244, 239, 230, .38);
  pointer-events: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__focus i {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  height: 1px;
  background: linear-gradient(90deg, rgba(221, 90, 31, .8), transparent);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__scroll {
  position: absolute;
  left: var(--kk-header-px);
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 14px;
  font: var(--kk-fw-en-medium) var(--kk-fs-micro-label)/1 var(--kk-ff-en);
  letter-spacing: var(--kk-ls-micro-label);
  color: rgba(244, 239, 230, .5);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__scroll i {
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--kk-color-main) 40%, transparent);
  animation: kk-scroll-pulse var(--kk-dur-scroll-cue) var(--kk-ease-loop) infinite;
}
@keyframes kk-scroll-pulse {
  0%, 100% { opacity: .25; transform: scaleY(.45); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

@media (max-width: 1050px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__content { width: 63vw; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__title { font-size: clamp(46px, 6.6vw, 70px); } /* 2026-10-19 大きく（旧 clamp(43px, 5.5vw, 62px)） */
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__focus { display: none; }
}
@media (max-height: 760px) and (min-width: 761px) {
  :is(.kk-wp, .editor-styles-wrapper).kk-p-top .kk-c-header--top { height: 96px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__content { padding-top: calc(96px + 45px); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__title { font-size: clamp(50px, 5.2vw, 78px); } /* 2026-10-19 大きく（旧 clamp(46px, 4.8vw, 70px)） */
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__lead { margin-top: 24px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__actions { margin-top: 25px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__actions .kk-c-button--primary { min-height: 60px; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero.is-still .kk-p-top-hero__canvas { background-image: url("../../img/hero-bg-sp.webp"); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero::after { background: var(--kk-gradient-hero-overlay-sp); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__content {
    width: auto;
    margin: 0 var(--kk-hero-content-x);
    padding-top: calc(var(--kk-header-h-top) + clamp(68px, 10vh, 92px));
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__eyebrow { gap: 11px; font-size: var(--kk-fs-label); } /* tokens label（SP 11）。旧 10px（QA B-3） */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__eyebrow::before { width: 25px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__title {
    font-size: var(--kk-fs-fluid-display-sp);
    letter-spacing: var(--kk-ls-display-sp);
    line-height: var(--kk-lh-display-sp);
  }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__lead { margin-right: -9px; font-size: var(--kk-fs-lead); } /* Figma の文字枠は 340px（本文幅 331 より 9px 広い）→ 2行目を「見つける。」で折り返さない */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__note { font-size: var(--kk-fs-hero-note); }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__actions { flex-direction: column; align-items: stretch; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__actions .kk-c-button--primary { width: 100%; min-height: var(--kk-btn-primary-h); } /* 2026-10-16 ほかのボタンと同じ高さ */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__link { align-self: flex-start; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-hero__scroll { display: none; }
}

/* ---------- オープニング（灯と煙）・「オープニングをもう一度」 ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-opening {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--kk-color-opening);
  pointer-events: none;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-opening canvas { display: block; width: 100%; height: 100%; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-opening.is-fallback { animation: kk-veil-out 2.8s ease-in-out 3s both; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-opening.is-fallback canvas { display: none; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-opening__ember {
  position: absolute;
  left: 50%;
  top: -12vh;
  width: 9px;
  height: 12px;
  border-radius: 50%;
  background: #ffbc68;
  box-shadow: 0 0 9px 3px #ff7829, 0 0 40px 10px #ff641244;
  animation: kk-fall 2.3s var(--kk-ease-ember-fall) .35s both;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-opening__ember::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 5px;
  height: 110px;
  transform: translateX(-50%);
  background: linear-gradient(to top, #ff882766, transparent);
  filter: blur(2px);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-opening__smoke {
  position: absolute;
  left: 50%;
  top: 73%;
  width: 40vw;
  height: 45vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, #93877950, transparent 67%);
  filter: blur(25px);
  animation: kk-smoke 3s ease-out 2.65s both;
}
@keyframes kk-fall { 0% { opacity: 1; transform: translate(-50%, 0); } 97% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 85vh); } }
@keyframes kk-smoke { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.1); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70%) scale(4); } }
@keyframes kk-veil-out { to { opacity: 0; } }

:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-intro-controls {
  position: absolute;
  top: calc(100svh - 140px);
  right: var(--kk-header-px);
  z-index: 101;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-intro-controls.is-playing { position: fixed; top: auto; bottom: 24px; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-intro-controls button {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(11, 9, 8, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: var(--kk-fw-medium);
  letter-spacing: var(--kk-ls-caption);
  line-height: var(--kk-lh-label);
  color: #dfc8b5;
  transition: color var(--kk-dur-fast) var(--kk-ease-base), border-color var(--kk-dur-fast) var(--kk-ease-base);
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-intro-controls button:hover { color: #ff9b55; border-color: var(--kk-color-main); }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top__page[inert] { pointer-events: none; }
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-intro-controls { top: 730px; right: auto; left: 22px; }
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-intro-controls.is-playing { top: auto; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-opening,
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-intro-controls { display: none !important; }
}

/* ---------- ミッションの帯（ABOUT の直下） ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-mission { padding-bottom: var(--kk-space-section); background: var(--kk-color-base); }

/* ---------- お知らせ（左：見出し＋一覧へ／右：一覧。SP は縦積みでリンクが最後） ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-news__grid {
  display: grid;
  grid-template-columns: 355px minmax(0, 1fr);
  grid-template-areas: "head list" "more list";
  grid-template-rows: auto 1fr;
  column-gap: 72px;
  row-gap: 24px;
}
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-news__head { grid-area: head; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-news__list { grid-area: list; align-self: start; }
:is(.kk-wp, .editor-styles-wrapper) .kk-p-top-news__more { grid-area: more; }
@media (max-width: 1000px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-news__grid { grid-template-columns: 240px minmax(0, 1fr); column-gap: 40px; }
}
@media (max-width: 760px) {
  :is(.kk-wp, .editor-styles-wrapper) .kk-p-top-news__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "list" "more"; row-gap: var(--kk-space-block); }
}

/* ---------- ブログ：2枚目のカバーは上の線をゴールドに（案の journal-card） ---------- */
:is(.kk-wp, .editor-styles-wrapper) .kk-c-journal-card__cover--2 { border-top-color: #ad9c88; }