@charset "UTF-8";
/* =========================================================
   KELO × DIASTAFF Brand Partner Site
   ---------------------------------------------------------
   Theme color : KADOKAWA DREAMS logo
     --shu  #E63C21 (logo vermilion) / --kon #1F286F (logo navy)
   Contrast (WCAG 2.2) — 実測値
     sumi  #15131C on kinari #F5F0E6 ... 16.19 (AAA)
     kon   #1F286F on kinari          ... 11.62 (AAA)
     white on kon                     ... 13.20 (AAA)
     shu-text #B8290F on kinari       ...  5.50 (AA)   小さい朱色の文字はこちら
     white on shu-text #B8290F        ...  6.25 (AA)   朱色ボタン
     shu-light #FF8A6E on kon         ...  5.73 (AA)
     shu-light #FF8A6E on sumi        ...  7.98 (AAA)
     muted #4A4659 on kinari          ...  8.00 (AAA)
     mist  #C9C4D9 on kon             ...  7.78 (AAA)
     ※ロゴ朱 #E63C21 は kinari 上 3.67 / 白文字 4.17 のため、
       図形・装飾・大きな文字（24px以上 or 太字18.66px以上）に限定。
   ========================================================= */

:root {
  --shu: #E63C21;
  --shu-text: #B8290F;
  --shu-light: #FF8A6E;
  --kon: #1F286F;
  --kon-deep: #141A4D;
  --sumi: #15131C;
  --kinari: #F5F0E6;
  --paper: #FFFFFF;
  --muted: #4A4659;
  --mist: #C9C4D9;

  --ff-display: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --ff-mincho: "Shippori Mincho B1", "Yu Mincho", serif;
  --ff-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ff-en: "Anton", "Zen Kaku Gothic New", sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --header-h: 64px;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --beat: .5s; /* 120 BPM */

  --pat-seigaiha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50'%3E%3Cdefs%3E%3Cmask id='m' x='0' y='0' width='100' height='50' maskUnits='userSpaceOnUse'%3E%3Ccircle cx='50' cy='0' r='50' fill='black'/%3E%3Ccircle cx='50' cy='0' r='46' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='0' r='36' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='0' r='26' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='0' r='16' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='0' r='6' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='25' r='50' fill='black'/%3E%3Ccircle cx='0' cy='25' r='46' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='25' r='36' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='25' r='26' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='25' r='16' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='25' r='6' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='25' r='50' fill='black'/%3E%3Ccircle cx='100' cy='25' r='46' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='25' r='36' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='25' r='26' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='25' r='16' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='25' r='6' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='50' fill='black'/%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='26' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='16' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='50' cy='50' r='6' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='75' r='50' fill='black'/%3E%3Ccircle cx='0' cy='75' r='46' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='75' r='36' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='75' r='26' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='75' r='16' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='0' cy='75' r='6' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='75' r='50' fill='black'/%3E%3Ccircle cx='100' cy='75' r='46' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='75' r='36' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='75' r='26' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='75' r='16' fill='none' stroke='white' stroke-width='4'/%3E%3Ccircle cx='100' cy='75' r='6' fill='none' stroke='white' stroke-width='4'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100' height='50' mask='url(%23m)'/%3E%3C/svg%3E");
  --pat-asanoha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='69.28'%3E%3Cpath d='M-60 -34.64L-20 -34.64M-20 -34.64L-40 0M-40 0L-60 -34.64M-40 -23.09L-60 -34.64M-40 -23.09L-20 -34.64M-40 -23.09L-40 0M-20 -34.64L-40 0M-40 0L0 0M0 0L-20 -34.64M-20 -11.55L-20 -34.64M-20 -11.55L-40 0M-20 -11.55L0 0M-20 -34.64L20 -34.64M20 -34.64L0 0M0 0L-20 -34.64M0 -23.09L-20 -34.64M0 -23.09L20 -34.64M0 -23.09L0 0M20 -34.64L0 0M0 0L40 0M40 0L20 -34.64M20 -11.55L20 -34.64M20 -11.55L0 0M20 -11.55L40 0M20 -34.64L60 -34.64M60 -34.64L40 0M40 0L20 -34.64M40 -23.09L20 -34.64M40 -23.09L60 -34.64M40 -23.09L40 0M60 -34.64L40 0M40 0L80 0M80 0L60 -34.64M60 -11.55L60 -34.64M60 -11.55L40 0M60 -11.55L80 0M60 -34.64L100 -34.64M100 -34.64L80 0M80 0L60 -34.64M80 -23.09L60 -34.64M80 -23.09L100 -34.64M80 -23.09L80 0M100 -34.64L80 0M80 0L120 0M120 0L100 -34.64M100 -11.55L100 -34.64M100 -11.55L80 0M100 -11.55L120 0M100 -34.64L140 -34.64M140 -34.64L120 0M120 0L100 -34.64M120 -23.09L100 -34.64M120 -23.09L140 -34.64M120 -23.09L120 0M140 -34.64L120 0M120 0L160 0M160 0L140 -34.64M140 -11.55L140 -34.64M140 -11.55L120 0M140 -11.55L160 0M-80 0L-40 0M-40 0L-60 34.64M-60 34.64L-80 0M-60 11.55L-80 0M-60 11.55L-40 0M-60 11.55L-60 34.64M-40 0L-60 34.64M-60 34.64L-20 34.64M-20 34.64L-40 0M-40 23.09L-40 0M-40 23.09L-60 34.64M-40 23.09L-20 34.64M-40 0L0 0M0 0L-20 34.64M-20 34.64L-40 0M-20 11.55L-40 0M-20 11.55L0 0M-20 11.55L-20 34.64M0 0L-20 34.64M-20 34.64L20 34.64M20 34.64L0 0M0 23.09L0 0M0 23.09L-20 34.64M0 23.09L20 34.64M0 0L40 0M40 0L20 34.64M20 34.64L0 0M20 11.55L0 0M20 11.55L40 0M20 11.55L20 34.64M40 0L20 34.64M20 34.64L60 34.64M60 34.64L40 0M40 23.09L40 0M40 23.09L20 34.64M40 23.09L60 34.64M40 0L80 0M80 0L60 34.64M60 34.64L40 0M60 11.55L40 0M60 11.55L80 0M60 11.55L60 34.64M80 0L60 34.64M60 34.64L100 34.64M100 34.64L80 0M80 23.09L80 0M80 23.09L60 34.64M80 23.09L100 34.64M80 0L120 0M120 0L100 34.64M100 34.64L80 0M100 11.55L80 0M100 11.55L120 0M100 11.55L100 34.64M120 0L100 34.64M100 34.64L140 34.64M140 34.64L120 0M120 23.09L120 0M120 23.09L100 34.64M120 23.09L140 34.64M-60 34.64L-20 34.64M-20 34.64L-40 69.28M-40 69.28L-60 34.64M-40 46.19L-60 34.64M-40 46.19L-20 34.64M-40 46.19L-40 69.28M-20 34.64L-40 69.28M-40 69.28L0 69.28M0 69.28L-20 34.64M-20 57.74L-20 34.64M-20 57.74L-40 69.28M-20 57.74L0 69.28M-20 34.64L20 34.64M20 34.64L0 69.28M0 69.28L-20 34.64M0 46.19L-20 34.64M0 46.19L20 34.64M0 46.19L0 69.28M20 34.64L0 69.28M0 69.28L40 69.28M40 69.28L20 34.64M20 57.74L20 34.64M20 57.74L0 69.28M20 57.74L40 69.28M20 34.64L60 34.64M60 34.64L40 69.28M40 69.28L20 34.64M40 46.19L20 34.64M40 46.19L60 34.64M40 46.19L40 69.28M60 34.64L40 69.28M40 69.28L80 69.28M80 69.28L60 34.64M60 57.74L60 34.64M60 57.74L40 69.28M60 57.74L80 69.28M60 34.64L100 34.64M100 34.64L80 69.28M80 69.28L60 34.64M80 46.19L60 34.64M80 46.19L100 34.64M80 46.19L80 69.28M100 34.64L80 69.28M80 69.28L120 69.28M120 69.28L100 34.64M100 57.74L100 34.64M100 57.74L80 69.28M100 57.74L120 69.28M100 34.64L140 34.64M140 34.64L120 69.28M120 69.28L100 34.64M120 46.19L100 34.64M120 46.19L140 34.64M120 46.19L120 69.28M140 34.64L120 69.28M120 69.28L160 69.28M160 69.28L140 34.64M140 57.74L140 34.64M140 57.74L120 69.28M140 57.74L160 69.28M-80 69.28L-40 69.28M-40 69.28L-60 103.92M-60 103.92L-80 69.28M-60 80.83L-80 69.28M-60 80.83L-40 69.28M-60 80.83L-60 103.92M-40 69.28L-60 103.92M-60 103.92L-20 103.92M-20 103.92L-40 69.28M-40 92.38L-40 69.28M-40 92.38L-60 103.92M-40 92.38L-20 103.92M-40 69.28L0 69.28M0 69.28L-20 103.92M-20 103.92L-40 69.28M-20 80.83L-40 69.28M-20 80.83L0 69.28M-20 80.83L-20 103.92M0 69.28L-20 103.92M-20 103.92L20 103.92M20 103.92L0 69.28M0 92.38L0 69.28M0 92.38L-20 103.92M0 92.38L20 103.92M0 69.28L40 69.28M40 69.28L20 103.92M20 103.92L0 69.28M20 80.83L0 69.28M20 80.83L40 69.28M20 80.83L20 103.92M40 69.28L20 103.92M20 103.92L60 103.92M60 103.92L40 69.28M40 92.38L40 69.28M40 92.38L20 103.92M40 92.38L60 103.92M40 69.28L80 69.28M80 69.28L60 103.92M60 103.92L40 69.28M60 80.83L40 69.28M60 80.83L80 69.28M60 80.83L60 103.92M80 69.28L60 103.92M60 103.92L100 103.92M100 103.92L80 69.28M80 92.38L80 69.28M80 92.38L60 103.92M80 92.38L100 103.92M80 69.28L120 69.28M120 69.28L100 103.92M100 103.92L80 69.28M100 80.83L80 69.28M100 80.83L120 69.28M100 80.83L100 103.92M120 69.28L100 103.92M100 103.92L140 103.92M140 103.92L120 69.28M120 92.38L120 69.28M120 92.38L100 103.92M120 92.38L140 103.92' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
  --pat-asanoha-size: 40px 69.28px;
  --pat-shippo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/g%3E%3C/svg%3E");
  /* 和紙の繊維（浮世絵の紙肌） */
  --washi: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27260%27 height=%27260%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .55 -.18%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--washi), var(--kinari);
  color: var(--sumi);
  font-family: var(--ff-body);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: .04em;
  overflow-x: hidden;
}
html, body, main, .footer { overflow-x: clip; }
/* ベージュ地全体に青海波を薄く敷く（画面に固定） */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--kon); opacity: .06; -webkit-mask: var(--pat-seigaiha) repeat 0 0 / 64px 32px; mask: var(--pat-seigaiha) repeat 0 0 / 64px 32px; }

/* ---------- ふすま（MESSAGE セクションで開く） ---------- */
/* main.js が準備できたとき（.fusuma-ready）だけ表示。JS 失敗時やモーションOFF時は最初から開いた状態 */
.fusuma { display: none; }
.fusuma-ready[data-motion="on"] .fusuma { display: block; position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.fusuma__door {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: #FBF7EE; border: 14px solid var(--sumi);
  box-shadow: inset 0 0 0 3px #B8913A;
  transition: transform 1.3s cubic-bezier(.7, 0, .2, 1);
}
.fusuma__door::before { content: ""; position: absolute; inset: 0; background: var(--shu); opacity: .2; -webkit-mask: var(--pat-asanoha) repeat 0 0 / 60px 103.92px; mask: var(--pat-asanoha) repeat 0 0 / 60px 103.92px; }
.fusuma__door--l { left: 0; }
.fusuma__door--r { right: 0; }
.fusuma__hikite { position: absolute; top: min(50%, 45vh); width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: var(--kon); box-shadow: 0 0 0 4px #B8913A, inset 0 0 0 9px var(--kon-deep); }
.fusuma__door--l .fusuma__hikite { right: 36px; }
.fusuma__door--r .fusuma__hikite { left: 36px; }
.fusuma.is-open .fusuma__door--l { transform: translateX(-102%); }
.fusuma.is-open .fusuma__door--r { transform: translateX(102%); }
@media (max-width: 767px) {
  .fusuma__door { border-width: 10px; }
  .fusuma__hikite { width: 34px; height: 34px; margin-top: -17px; }
  .fusuma__door--l .fusuma__hikite { right: 20px; }
  .fusuma__door--r .fusuma__hikite { left: 20px; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: normal; }
:focus-visible { outline: 3px solid var(--kon); outline-offset: 3px; border-radius: 2px; }
.project :focus-visible, .footer :focus-visible,
.nav.is-open :focus-visible, .cta :focus-visible { outline-color: var(--shu-light); }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 1000; background: var(--kon); color: #fff; padding: 8px 16px; }
.skip:focus { top: 8px; }
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.section { position: relative; padding: clamp(80px, 12vw, 160px) 0; overflow: hidden; }
@media (max-width: 767px) { .sp-none { display: none; } }
@media (min-width: 768px) { .pc-none { display: none; } }

/* ---------- 和柄 pattern (mask) ---------- */
.pat { -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.pat--seigaiha { -webkit-mask-image: var(--pat-seigaiha); mask-image: var(--pat-seigaiha); -webkit-mask-size: 50px 25px; mask-size: 50px 25px; }
.pat--asanoha  { -webkit-mask-image: var(--pat-asanoha); mask-image: var(--pat-asanoha); -webkit-mask-size: var(--pat-asanoha-size); mask-size: var(--pat-asanoha-size); }
.pat--shippo   { -webkit-mask-image: var(--pat-shippo); mask-image: var(--pat-shippo); -webkit-mask-size: 32px 32px; mask-size: 32px 32px; }
.pat--ichimatsu { background: repeating-conic-gradient(var(--pat-color, var(--shu)) 0 25%, transparent 0 50%) 0 0 / 36px 36px !important; }

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
  transition: background .3s, box-shadow .3s;
}
.header.is-scrolled { background: rgba(245, 240, 230, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(21, 19, 28, .1); }
.header__brand { display: flex; align-items: center; gap: .4em; text-decoration: none; font-family: var(--ff-en); font-size: 1.375rem; letter-spacing: .06em; line-height: 1; margin-right: auto; position: relative; z-index: 2; }
.header__dia { display: block; line-height: 0; border-radius: 4px; transition: background .3s, padding .3s; }
.header__dia img { height: 22px; width: auto; }
.nav-open .header__dia { background: #fff; padding: 5px 8px; }
.header__x { color: var(--shu-text); font-size: .9em; }
.header__kelo { color: var(--sumi); }
.nav-open .header__kelo { color: #fff; }
.nav-open .header__x { color: var(--shu-light); }

.nav__list { display: flex; gap: clamp(12px, 2vw, 28px); }
.nav__list a { display: grid; text-decoration: none; font-family: var(--ff-en); font-size: .9375rem; letter-spacing: .1em; line-height: 1.2; color: var(--sumi); position: relative; padding: 4px 0; }
.nav__list a span { font-family: var(--ff-body); font-size: .6875rem; letter-spacing: .08em; color: var(--muted); font-weight: 500; }
.nav__list a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background: var(--shu); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.nav__list a:hover::after, .nav__list a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.motion-toggle {
  display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 2;
  font: 700 .75rem/1 var(--ff-body); letter-spacing: .08em;
  color: var(--sumi); background: var(--paper); border: 2px solid var(--sumi); border-radius: 999px;
  padding: 7px 12px; min-height: 36px; cursor: pointer;
}
.motion-toggle__state { color: var(--shu-text); min-width: 2.2em; text-align: left; }
.motion-toggle__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--shu); animation: beat var(--beat) infinite; }
[data-motion="off"] .motion-toggle__dot { background: var(--muted); }

.nav-toggle { display: none; position: relative; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--kon); cursor: pointer; }
.nav-toggle__bar { position: absolute; left: 14px; width: 20px; height: 2px; background: #fff; transition: transform .35s var(--ease-pop), top .35s; }
.nav-toggle__bar:nth-child(1) { top: 19px; }
.nav-toggle__bar:nth-child(2) { top: 27px; }
.nav-toggle[aria-expanded="true"] { background: var(--shu-text); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { top: 23px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { top: 23px; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .motion-toggle { padding: 7px 10px; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    background: var(--kon);
    display: flex; align-items: center; padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    clip-path: circle(0 at calc(100% - var(--gutter) - 24px) 32px);
    visibility: hidden;
    transition: clip-path .6s var(--ease-out), visibility 0s .6s;
    overflow-y: auto;
  }
  .nav.is-open { clip-path: circle(150% at calc(100% - var(--gutter) - 24px) 32px); visibility: visible; transition: clip-path .7s var(--ease-out), visibility 0s; }
  .nav__list { flex-direction: column; gap: 4px; width: 100%; }
  .nav__list li { opacity: 0; transform: translateX(40px); transition: opacity .4s, transform .6s var(--ease-pop); }
  .nav.is-open .nav__list li { opacity: 1; transform: none; }
  .nav.is-open .nav__list li:nth-child(1) { transition-delay: .15s; }
  .nav.is-open .nav__list li:nth-child(2) { transition-delay: .2s; }
  .nav.is-open .nav__list li:nth-child(3) { transition-delay: .25s; }
  .nav.is-open .nav__list li:nth-child(4) { transition-delay: .3s; }
  .nav.is-open .nav__list li:nth-child(5) { transition-delay: .35s; }
  .nav.is-open .nav__list li:nth-child(6) { transition-delay: .4s; }
  .nav__list a { color: #fff; font-size: clamp(2.25rem, 10vw, 3.5rem); padding: 6px 0; display: flex; align-items: baseline; gap: 16px; }
  .nav__list a span { color: var(--mist); font-size: .875rem; }
}
@media (max-width: 479px) {
  .header { gap: 8px; }
  .header__brand { font-size: 1.125rem; }
  .header__dia img { height: 17px; }
  .motion-toggle { font-size: 0; gap: 6px; padding: 7px 10px; min-height: 44px; }
  .motion-toggle__state { font-size: .75rem; min-width: 2em; }
  .nav-toggle { width: 44px; height: 44px; }
  .nav-toggle__bar { left: 12px; }
  .nav-toggle__bar:nth-child(1) { top: 17px; }
  .nav-toggle__bar:nth-child(2) { top: 25px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1), .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { top: 21px; }
}

/* ---------- motion utilities ---------- */
@keyframes beat { 0% { scale: 1; } 12% { scale: 1.08; } 40% { scale: 1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes drift { to { -webkit-mask-position: 100px 50px; mask-position: 100px 50px; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.beat { animation: beat calc(var(--beat) * 2) infinite; }
.spin { animation: spin 40s linear infinite; }
[data-speed], [data-depth] { will-change: transform; }

/* JS有効時のみ初期状態を隠す（JS無効でも内容は表示される） */
.js .reveal { opacity: 0; transform: translateY(48px) skewY(3deg); transition: opacity .8s var(--ease-out), transform 1s var(--ease-pop); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* 要素自身を clip すると IntersectionObserver が交差を検知できないため、中身側を clip する */
.js .reveal--wipe { opacity: 1; transform: none; }
.js .reveal--wipe > img, .js .reveal--wipe::before, .js .reveal--wipe::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); }
.js .reveal--wipe.is-in > img, .js .reveal--wipe.is-in::before, .js .reveal--wipe.is-in::after { clip-path: inset(0 0 0 0); }
.js .reveal--wipe > span { opacity: 0; transition: opacity .6s .8s; }
.js .reveal--wipe.is-in > span { opacity: 1; }

.char { display: inline-block; }
.js .kinetic .char { opacity: 0; transform: translateY(80%) rotate(12deg) scale(.4); transform-origin: 50% 100%; }
.js .is-in .kinetic .char, .js .kinetic.is-in .char { animation: pop .7s var(--ease-pop) forwards; animation-delay: calc(var(--i) * 45ms + var(--d, 0ms)); }
@keyframes pop {
  0% { opacity: 0; transform: translateY(80%) rotate(12deg) scale(.4); }
  60% { opacity: 1; transform: translateY(-12%) rotate(-4deg) scale(1.1); }
  100% { opacity: 1; transform: none; }
}

/* ---------- placeholder (素材差し替え) ---------- */
.placeholder {
  width: 100%; height: 100%;
  display: grid; place-items: center; text-align: center;
  background: linear-gradient(135deg, var(--kon) 0%, var(--kon-deep) 100%);
  color: #fff; font: 400 .875rem/1.6 var(--ff-en); letter-spacing: .2em;
  position: relative; overflow: hidden;
}
.placeholder::before { content: ""; position: absolute; inset: 0; background: var(--shu); opacity: .35; -webkit-mask: var(--pat-asanoha) repeat 0 0 / var(--pat-asanoha-size); mask: var(--pat-asanoha) repeat 0 0 / var(--pat-asanoha-size); }
.placeholder span { position: relative; background: var(--kon-deep); padding: 12px 16px; border: 1px dashed var(--mist); }

/* ---------- HERO（シンプル：KELO の写真＋コピー） ---------- */
/* 背景色は写真の撮影背景（#CFDCE8 前後）に合わせ、写真の端が溶け込むようにする */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: #CFDCE8; }
.hero__photo img {
  /* ヘッダーのメニューと頭が重ならないよう、ヘッダーの下から敷く */
  position: absolute; top: var(--header-h); height: calc(100% - var(--header-h)); width: auto; max-width: none;
  /* 写真（2:1）の中央にいる KELO を画面の横66%あたりに置く（写真の幅 = 高さ×2） */
  left: calc(66% - (max(100svh, 600px) - var(--header-h)));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%); mask-image: linear-gradient(90deg, transparent 0, #000 12%);
}
.hero__stage { position: relative; z-index: 2; height: 100%; max-width: 1440px; margin: 0 auto; padding: calc(var(--header-h) + 24px) var(--gutter) 72px; display: flex; align-items: center; }
.hero__copy { max-width: 44%; }
.hero__label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .6em; font: 400 clamp(.75rem, 1.1vw, .9375rem)/1.6 var(--ff-en); letter-spacing: .16em; background: var(--sumi); color: var(--kinari); padding: 6px 14px; margin-bottom: clamp(20px, 3vw, 36px); }
.hero__label span:first-child { color: var(--shu-light); }
.hero__since { color: var(--mist); }
.hero__title { font: 400 clamp(2.25rem, 4.6vw, 4.75rem)/1.2 var(--ff-display); letter-spacing: -.01em; color: var(--sumi); }
.hero__title .kinetic { display: block; white-space: nowrap; }
.hero__title em { color: var(--shu-text); font-family: var(--ff-mincho); font-weight: 800; font-style: normal; letter-spacing: 0; }
.hero__title .kinetic:nth-child(2) { --d: 300ms; }
.hero__title .kinetic:nth-child(3) { --d: 600ms; }
.hero__name { margin-top: clamp(24px, 4vw, 44px); display: flex; align-items: center; gap: 16px; }
.hero__team { flex: none; line-height: 0; }
.hero__team img { height: clamp(56px, 6vw, 88px); width: auto; }
.hero__kelo { font: 400 clamp(3rem, 6vw, 5.5rem)/.9 var(--ff-en); letter-spacing: .04em; color: transparent; -webkit-text-stroke: 2px var(--kon); }

.scroll-cue { position: absolute; left: var(--gutter); bottom: 24px; z-index: 5; display: flex; align-items: center; gap: 12px; text-decoration: none; font: 400 .8125rem/1 var(--ff-en); letter-spacing: .3em; color: var(--sumi); writing-mode: vertical-rl; }
.scroll-cue::after { content: ""; width: 2px; height: 64px; background: linear-gradient(var(--shu) 50%, rgba(21,19,28,.2) 50%) 0 0 / 100% 200%; animation: cue 1.6s var(--ease-out) infinite; }
@keyframes cue { from { background-position: 0 100%; } to { background-position: 0 -100%; } }

/* pointer trail（彩） */
.trail { position: fixed; z-index: 90; width: 14px; height: 14px; pointer-events: none; translate: -50% -50%; animation: trail .9s var(--ease-out) forwards; }
.trail--0 { background: var(--shu); border-radius: 50%; }
.trail--1 { background: var(--kon); }
.trail--2 { border: 3px solid var(--shu); border-radius: 50%; background: transparent; }
@keyframes trail { from { opacity: 1; transform: scale(1) rotate(0); } to { opacity: 0; transform: scale(.2) rotate(180deg) translateY(30px); } }

@media (max-width: 1023px) {
  .scroll-cue { display: none; }
  .hero__copy { max-width: 46%; }
}
/* スマホ：写真（正方形）を上、コピーを下に縦積み */
@media (max-width: 767px) {
  .hero { height: auto; min-height: 0; }
  .hero__photo { display: block; padding-top: var(--header-h); }
  .hero__photo img { position: static; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; -webkit-mask-image: none; mask-image: none; }
  .hero__stage { height: auto; padding: 24px var(--gutter) 64px; }
  .hero__copy { max-width: none; }
  .hero__title { font-size: clamp(2rem, 10vw, 2.75rem); }
}

/* ---------- marquee ---------- */
.marquee { overflow: hidden; background: var(--sumi); color: var(--kinari); padding: 18px 0; rotate: -2deg; margin: -20px -2vw; width: 104vw; position: relative; z-index: 5; }
.marquee__track { display: flex; width: max-content; gap: 48px; white-space: nowrap; font: 400 clamp(1.5rem, 3.4vw, 2.75rem)/1.2 var(--ff-display); }
.marquee__en { font-family: var(--ff-en); color: var(--shu-light); letter-spacing: .06em; }
.marquee--shu { background: var(--shu); color: #fff; rotate: 2deg; } /* 白 on 朱 4.17 — 24px以上の大きな文字のみ */
.marquee--shu .marquee__track { font-family: var(--ff-en); letter-spacing: .1em; font-size: clamp(2rem, 5vw, 4rem); }
.marquee__dot { font-size: .5em; align-self: center; color: var(--kon); }

/* ---------- section heading ---------- */
.sec-head { margin-bottom: clamp(40px, 6vw, 72px); position: relative; }
.sec-head__en { font: 400 clamp(4rem, 13vw, 10rem)/.9 var(--ff-en); letter-spacing: .02em; color: transparent; -webkit-text-stroke: 2px var(--shu); margin-left: -.04em; }
.sec-head__ja { font: 800 clamp(1.375rem, 2.6vw, 2rem)/1.5 var(--ff-mincho); margin-top: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; }
.sec-head__ja::before { content: ""; width: 40px; height: 4px; background: var(--shu); align-self: center; }
.sec-head__sub { font: 500 .875rem/1.6 var(--ff-body); color: var(--muted); letter-spacing: .1em; }
.sec-head--light .sec-head__en { -webkit-text-stroke-color: var(--shu-light); }
.sec-head--light .sec-head__ja { color: #fff; }

/* ---------- ABOUT ---------- */
.about__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.about__catch { font: 400 clamp(2rem, 4.4vw, 3.5rem)/1.35 var(--ff-display); }
.about__catch .hl { color: #fff; background: var(--kon); padding: 0 .2em; display: inline-block; rotate: -3deg; margin-top: .2em; }
.about__body p + p { margin-top: 1.2em; }
.about__body strong { color: var(--kon); background: linear-gradient(transparent 62%, rgba(230, 60, 33, .25) 62%); }
.spec { margin-top: clamp(48px, 7vw, 88px); border-top: 3px solid var(--sumi); }
.spec__row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid rgba(21, 19, 28, .2); transition: background .3s; }
.spec__row:hover { background: var(--paper); }
.spec dt { font-weight: 700; color: var(--kon); padding: 20px 16px; position: relative; }
.spec dt::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; background: var(--shu); translate: 0 -50%; rotate: 45deg; }
.spec dd { padding: 20px 16px; }
@media (max-width: 767px) {
  .about__grid { grid-template-columns: 1fr; }
  .spec__row { grid-template-columns: 1fr; }
  .spec dt { padding: 16px 16px 0; }
  .spec dd { padding: 4px 16px 16px; }
}

/* ---------- PROFILE ---------- */
.profile__giant { position: absolute; top: 4%; right: -4%; font: 400 clamp(10rem, 34vw, 30rem)/.8 var(--ff-en); color: transparent; -webkit-text-stroke: 2px rgba(31, 40, 111, .12); pointer-events: none; white-space: nowrap; }
.profile__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.profile__photo { position: relative; aspect-ratio: 3 / 4; isolation: isolate; }
/* 写真の背面に和柄（麻の葉）のブロックをずらして敷く */
.profile__photo::before { content: ""; position: absolute; inset: 28px 28px -28px -28px; z-index: -1; background: var(--shu); }
.profile__photo::after { content: ""; position: absolute; inset: 28px 28px -28px -28px; z-index: -1; background: var(--kinari); opacity: .55; -webkit-mask: var(--pat-asanoha) repeat 0 0 / var(--pat-asanoha-size); mask: var(--pat-asanoha) repeat 0 0 / var(--pat-asanoha-size); }
.profile__photo img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.profile__stamp { position: absolute; right: -24px; bottom: -24px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: var(--kon); color: #fff; font: 800 2.75rem/1 var(--ff-mincho); border: 4px solid var(--kinari); }
.profile__text { font-size: 1rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.stat { background: var(--paper); padding: 20px 16px; border-bottom: 4px solid var(--kon); display: grid; gap: 8px; align-content: start; transition: transform .4s var(--ease-pop); }
.stat:hover { transform: translateY(-6px) rotate(1deg); }
.stat__num { font: 400 clamp(3rem, 5vw, 4.25rem)/1 var(--ff-en); color: var(--shu); display: flex; align-items: baseline; gap: 6px; } /* 48px+: AA Large */
.stat__num small { font: 700 .875rem/1 var(--ff-body); color: var(--shu-text); }
.stat__label { font-size: .8125rem; line-height: 1.6; font-weight: 700; color: var(--sumi); }
.profile__data { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.profile__data div { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(21, 19, 28, .2); }
.profile__data dt { flex: 0 0 5.5em; font-weight: 700; color: var(--kon); font-size: .875rem; }
.profile__data dd { font-size: .9375rem; }
@media (max-width: 1023px) {
  .profile__grid { grid-template-columns: 1fr; }
  .profile__photo { max-width: 420px; width: 86%; margin-left: auto; }
}
@media (max-width: 767px) {
  .stats { grid-template-columns: 1fr; }
  .stat { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
  .profile__data { grid-template-columns: 1fr; }
  .profile__stamp { width: 72px; height: 72px; font-size: 2rem; right: -12px; bottom: -16px; }
}

/* ---------- button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 56px; padding: 0 28px; margin-top: 40px;
  font: 700 1rem/1.4 var(--ff-body); letter-spacing: .08em; text-decoration: none;
  color: #fff; background: var(--kon);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .3s, transform .4s var(--ease-pop);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sumi); transform: translateX(-101%) skewX(-20deg); transform-origin: left; transition: transform .5s var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0) skewX(0); }
.btn:hover { transform: translateY(-3px); }
.btn__arrow { font-size: 1.25rem; transition: transform .4s var(--ease-pop); }
.btn:hover .btn__arrow { transform: translate(4px, -4px) rotate(10deg); }
.btn--shu { background: var(--shu-text); } /* 白 on #B8290F 6.25 */
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.btn--ghost::before { background: #fff; }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--kon); }

/* ---------- MESSAGE ---------- */
.message { background: var(--paper); }
.message__list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.quote { position: relative; padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 48px) clamp(32px, 4vw, 48px); transition: transform .5s var(--ease-pop); }
.quote:hover { transform: rotate(-.6deg) translateY(-6px); }
.quote--kelo { background: var(--kon); color: #fff; }
.quote--ceo { background: var(--kinari); color: var(--sumi); margin-top: clamp(0px, 8vw, 120px); border: 3px solid var(--sumi); box-shadow: 14px 14px 0 var(--shu); }
.quote__mark { position: absolute; top: -.32em; left: 16px; font: 400 9rem/1 var(--ff-en); color: var(--shu); }
.quote__body p { font: 700 clamp(1rem, 1.4vw, 1.0625rem)/2 var(--ff-mincho); }
.quote__body p + p { margin-top: .9em; }
.quote__body p:first-child { font: 800 clamp(1.25rem, 2vw, 1.5rem)/1.7 var(--ff-mincho); }
.quote__by { margin-top: 32px; display: grid; font: 800 1.5rem/1.4 var(--ff-mincho); text-align: right; }
.quote__role { font: 500 .8125rem/1.6 var(--ff-body); letter-spacing: .08em; }
.quote--kelo .quote__role { color: var(--mist); }
.quote--ceo .quote__role { color: var(--muted); }
/* トップは KELO のコメントのみ（全文と代表メッセージは message.html） */
.message__list--single { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.message__more { margin-top: clamp(32px, 5vw, 56px); text-align: center; }
@media (max-width: 767px) {
  .message__list { grid-template-columns: 1fr; }
  .quote--ceo { margin-top: 24px; box-shadow: 8px 8px 0 var(--shu); }
}

/* ---------- 北斎の絵を薄く敷く背景（NEWS / MESSAGE / PROFILE / PROJECT / REPORT / ABOUT） ---------- */
/* 上下は地色に溶かし、ゆっくり寄せては返す＋水面のゆらぎ（MOTION OFF では止まる） */
.hokusai-bg { position: absolute; inset: -6%; z-index: 0; pointer-events: none; opacity: .12; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 18%, #000 82%, transparent 100%); }
.hokusai-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 35% 55%; transform-origin: 30% 60%; animation: okinami 18s ease-in-out infinite alternate; }
[data-motion="on"] .hokusai-bg img { filter: url(#nami); }
/* 暗い背景（PROJECT）では乗算だと消えるので、通常の重ね方で薄く */
.hokusai-bg--dark { mix-blend-mode: normal; opacity: .1; }
@keyframes okinami { from { transform: scale(1.04) translate(-1.5%, .5%) rotate(-.4deg); } to { transform: scale(1.1) translate(1.5%, -1.5%) rotate(.4deg); } }
.hokusai-filter { position: absolute; width: 0; height: 0; }
.section:has(> .hokusai-bg) > .container { position: relative; z-index: 1; }

/* ---------- NEWS ---------- */
.news__list { border-top: 3px solid var(--sumi); }
.news__item { border-bottom: 1px solid rgba(21, 19, 28, .2); }
.news__link { background: rgba(251, 247, 238, .78); display: grid; grid-template-columns: 7.5em 5.5em 1fr auto; align-items: center; gap: 8px 24px; padding: 22px 16px; color: inherit; text-decoration: none; transition: background .3s; }
.news__link:hover, .news__link:focus-visible { background: var(--paper); }
.news__date { font: 400 1rem/1 var(--ff-en); letter-spacing: .08em; color: var(--kon); }
.news__cat { justify-self: start; font: 700 .6875rem/1 var(--ff-body); letter-spacing: .12em; color: #fff; background: var(--kon); padding: 6px 10px; }
.news__title { font-weight: 500; }
.news__link:hover .news__title { text-decoration: underline; text-underline-offset: 4px; }
.news__arrow { color: var(--shu-text); font-size: 1.125rem; transition: transform .3s var(--ease-pop); }
.news__link:hover .news__arrow { transform: translateX(4px); }
@media (max-width: 767px) {
  .news__link { grid-template-columns: auto 1fr auto; padding: 18px 4px; }
  .news__title { grid-column: 1 / -1; grid-row: 2; }
  .news__arrow { grid-column: 3; grid-row: 1; }
}

/* ---------- 下層ページ（about.html / message.html） ---------- */
.section--page { padding-top: calc(var(--header-h) + clamp(32px, 6vw, 72px)); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 .6em; font: 500 .8125rem/1.6 var(--ff-body); letter-spacing: .08em; margin-bottom: clamp(24px, 4vw, 40px); }
.breadcrumb li + li::before { content: "/"; margin-right: .6em; color: var(--muted); }
.breadcrumb a { color: var(--kon); }
.page-back { margin-top: clamp(48px, 7vw, 88px); text-align: center; }
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- PROJECT ---------- */
.project { background: var(--sumi); color: var(--kinari); }
/* 取り組みは準備中：閉じたふすまに COMING SOON。画面に入ると一度だけ少し開いて中をのぞかせる */
.project__soon { display: grid; gap: 24px; justify-items: center; }
.pfusuma { position: relative; width: 100%; height: clamp(280px, 38vw, 460px); overflow: hidden; background: radial-gradient(ellipse at center, var(--shu) 0, var(--shu-text) 35%, var(--sumi) 75%); }
.pfusuma__inside { position: absolute; inset: 0; display: grid; place-items: center; writing-mode: vertical-rl; font: 800 clamp(1.25rem, 2.4vw, 2rem)/1 var(--ff-mincho); letter-spacing: .4em; color: #fff; }
.pfusuma .fusuma__door { z-index: 1; display: grid; place-items: center; border-color: #5A3E2B; } /* 暗い背景でも枠が見えるよう木の色に */
.pfusuma__word { position: relative; z-index: 1; font: 400 clamp(2.5rem, 8vw, 6.5rem)/1 var(--ff-en); letter-spacing: .06em; color: var(--sumi); }
.pfusuma .fusuma__door--l .pfusuma__word { margin-right: 8%; }
.pfusuma .fusuma__door--r .pfusuma__word { margin-left: 8%; }
.pfusuma .fusuma__hikite { top: 50%; }
.project__soon.is-in .fusuma__door--l { animation: peek-l 2.6s .6s var(--ease-out); }
.project__soon.is-in .fusuma__door--r { animation: peek-r 2.6s .6s var(--ease-out); }
.pfusuma:hover .fusuma__door--l { transform: translateX(-9%); }
.pfusuma:hover .fusuma__door--r { transform: translateX(9%); }
@keyframes peek-l { 0%, 100% { transform: none; } 30%, 60% { transform: translateX(-9%); } }
@keyframes peek-r { 0%, 100% { transform: none; } 30%, 60% { transform: translateX(9%); } }
@media (max-width: 767px) {
  .pfusuma__word { font-size: clamp(1.5rem, 7.5vw, 2.25rem); }
  /* スマホでは引手と重ならないよう、文字を引手より上に置く */
  .pfusuma .fusuma__door { place-items: start center; padding-top: 22%; }
  .pfusuma .fusuma__door--l .pfusuma__word, .pfusuma .fusuma__door--r .pfusuma__word { margin: 0; }
}
.project__soon-text { font-weight: 500; color: var(--kinari); text-align: center; }
.project__lead { color: var(--kinari); max-width: 46em; }
.cards { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px); }
.card { background: #221F2C; border: 1px solid rgba(245, 240, 230, .16); overflow: hidden; transition: transform .5s var(--ease-pop), border-color .3s; }
.card:hover { transform: translateY(-10px) rotate(1deg); border-color: var(--shu-light); }
.card__visual { aspect-ratio: 16 / 9; background: var(--kon-deep); position: relative; display: grid; place-items: center; overflow: hidden; }
.card__pat { position: absolute; inset: 0; background: var(--kon); animation: drift 16s linear infinite; }
.card:nth-child(2) .card__pat { background: var(--shu); }
.card__icon { position: relative; font: 800 3.5rem/1 var(--ff-mincho); color: var(--sumi); background: var(--kinari); width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; transition: transform .6s var(--ease-pop); }
.card:hover .card__icon { transform: rotate(-12deg) scale(1.08); }
.card__body { padding: 24px; }
.card__tag { display: inline-block; font: 400 .8125rem/1 var(--ff-en); letter-spacing: .2em; color: var(--shu-light); border: 1px solid var(--shu-light); padding: 6px 10px; }
.card__title { margin-top: 16px; font: 400 2rem/1.1 var(--ff-en); letter-spacing: .04em; display: grid; gap: 6px; color: #fff; }
.card__title span { font: 700 .875rem/1.4 var(--ff-body); color: var(--mist); letter-spacing: .1em; }
.card__text { margin-top: 12px; font-size: .9375rem; color: var(--kinari); }
@media (max-width: 1023px) { .cards { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- FOLLOW / CTA ---------- */
/* ---------- KELO REPORT ---------- */
.report__lead { max-width: 46em; }
.report__list { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.report__list:not(:has(li)) { display: none; }
.report-card { background: var(--paper); border: 2px solid var(--sumi); box-shadow: 8px 8px 0 var(--kon); display: flex; flex-direction: column; }
.report-card__photo { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 2px solid var(--sumi); }
.report-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.report-card:hover .report-card__photo img { transform: scale(1.05); }
.report-card__body { padding: 20px 20px 24px; flex: 1; display: flex; flex-direction: column; }
.report-card__meta { display: flex; align-items: center; gap: 12px; font: 400 .9375rem/1 var(--ff-en); letter-spacing: .08em; color: var(--kon); }
.report-card__cat { font: 700 .6875rem/1 var(--ff-body); letter-spacing: .1em; color: #fff; background: var(--shu-text); padding: 5px 8px; }
.report-card__title { margin-top: 12px; font: 800 1.125rem/1.6 var(--ff-mincho); }
/* カードでは本文の冒頭3行だけ見せ、全文はポップアップで読む */
.report-card__text { margin-top: 8px; font-size: .875rem; line-height: 1.8; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.report-card__open { all: unset; cursor: pointer; }
.report-card__open::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* カード全体を押せるようにする */
.report-card__open:focus-visible { outline: none; }
.report-card:has(.report-card__open:focus-visible) { outline: 3px solid var(--shu-text); outline-offset: 4px; }
.report-card__more { align-self: flex-start; margin-top: auto; padding-top: 16px; font-size: .8125rem; font-weight: 700; color: var(--shu-text); }
.report-card__more::after { content: " →"; display: inline-block; transition: transform .3s var(--ease-out); }
.report-card:hover .report-card__more::after { transform: translateX(4px); }
.report-card:hover .report-card__title { text-decoration: underline; text-underline-offset: 4px; }
/* 記事ポップアップ */
.report-dialog { width: min(calc(100% - 32px), 760px); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--sumi); overflow: visible; }
.report-dialog::backdrop { background: rgba(0, 0, 40, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.report-dialog__inner { position: relative; background: var(--paper); border: 2px solid var(--sumi); box-shadow: 10px 10px 0 var(--kon); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.report-dialog[open] .report-dialog__inner { animation: jobPop .45s var(--ease-pop); }
.report-dialog__close { position: sticky; top: 12px; float: right; z-index: 2; margin: 12px 12px -56px 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--kon); color: #fff; font: 400 1.5rem/1 var(--ff-body); cursor: pointer; transition: transform .3s var(--ease-pop), background .3s; }
.report-dialog__close:hover, .report-dialog__close:focus-visible { background: var(--shu-text); transform: rotate(90deg); }
.report-dialog__photo { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 2px solid var(--sumi); }
.report-dialog__photo img { width: 100%; height: 100%; object-fit: cover; }
.report-dialog__content > .report-card__meta { margin: clamp(24px, 4vw, 36px) clamp(20px, 5vw, 48px) 0; }
.report-dialog__title { margin: 14px clamp(20px, 5vw, 48px) 0; font: 800 clamp(1.25rem, 2.6vw, 1.625rem)/1.6 var(--ff-mincho); }
.report-dialog__text { margin: 20px clamp(20px, 5vw, 48px) 0; padding-top: 20px; border-top: 1px solid rgba(21, 19, 28, .2); font-size: 1rem; line-height: 2; white-space: pre-line; overflow-wrap: anywhere; }
.report-dialog__link { display: inline-block; margin: 24px clamp(20px, 5vw, 48px) 0; font-weight: 700; color: var(--shu-text); }
.report-dialog__link::after { content: " ↗"; }
.report-dialog__content { padding-bottom: clamp(28px, 5vw, 48px); }
/* レポートがまだ無いときの表示（1件以上あると自動で非表示） */
.report__empty { margin-top: clamp(40px, 6vw, 64px); display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 6vw, 72px) 24px; border: 2px dashed rgba(21, 19, 28, .35); text-align: center; font-weight: 500; }
.report__empty-en { font: 400 clamp(2rem, 5vw, 3.5rem)/1 var(--ff-en); letter-spacing: .06em; color: transparent; -webkit-text-stroke: 1.5px var(--kon); }
.report__list:has(li) + .report__empty { display: none; }
.report__more { margin-top: clamp(32px, 5vw, 56px); text-align: center; }
.report__list:not(:has(li)) ~ .report__more { display: none; } /* レポートが無いあいだは一覧ボタンも出さない */
.report-card__link { color: inherit; text-decoration: none; }
.report-card__link::after { content: " ↗"; color: var(--shu-text); }
.report-card__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta { margin-top: clamp(64px, 9vw, 120px); background: var(--kon); color: #fff; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: var(--shu); opacity: .9; -webkit-mask: var(--pat-seigaiha) repeat 0 0 / 30px 15px; mask: var(--pat-seigaiha) repeat 0 0 / 30px 15px; pointer-events: none; }
.cta__text { font: 400 clamp(1.5rem, 3vw, 2.25rem)/1.5 var(--ff-display); position: relative; z-index: 1; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 16px; position: relative; z-index: 1; }
.cta .btn { margin-top: 0; }
@media (max-width: 767px) {
  .report__list { grid-template-columns: 1fr; max-width: 480px; }
  .cta__btns, .cta .btn { width: 100%; }
}

/* ---------- footer ---------- */
.footer { position: relative; background: var(--kon-deep); color: #fff; padding: 80px 0 32px; overflow: hidden; }
.footer__pat { position: absolute; inset: 0 0 auto; height: 40px; background: var(--kon); }
.footer__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px 64px; }
.footer__logo { font: 400 2.25rem/1 var(--ff-en); letter-spacing: .06em; }
.footer__logo span { color: var(--shu-light); }
.footer__partners { position: relative; margin-top: 48px; margin-bottom: -32px; background: var(--paper); padding: clamp(28px, 4vw, 48px) var(--gutter); display: flex; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 48px); }
.footer__partners-dia { height: clamp(24px, 3vw, 36px); width: auto; }
.footer__partners-kd { height: clamp(64px, 8vw, 96px); width: auto; }
.footer__theme { margin-top: 12px; color: var(--mist); font-size: .875rem; }
.footer__company div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; }
.footer__company dt { color: var(--mist); }
.footer__company a { color: #fff; }
/* SNS（旧 FOLLOW のリンク） */
.footer__sns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 48px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .14); }
.footer__sns-title { display: flex; align-items: baseline; gap: 10px; font: 400 1.25rem/1 var(--ff-en); letter-spacing: .1em; color: var(--shu-light); padding-bottom: 12px; border-bottom: 2px solid var(--shu-light); }
.footer__sns-title span { font: 500 .75rem/1 var(--ff-body); letter-spacing: .12em; color: var(--mist); }
.footer__sns li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer__sns a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 4px 8px 4px 2px; color: #fff; text-decoration: none; font-size: .9375rem; letter-spacing: .06em; transition: background .3s, padding .3s; }
.footer__arrow { color: var(--shu-light); transition: transform .3s var(--ease-pop); }
.footer__sns a:hover, .footer__sns a:focus-visible { background: rgba(255, 255, 255, .08); padding-left: 10px; }
.footer__sns a:hover .footer__arrow { transform: translate(3px, -3px); }
.footer__copy { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; color: var(--mist); font-family: var(--ff-en); letter-spacing: .12em; }
@media (max-width: 767px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__company div { grid-template-columns: 1fr; gap: 0; }
  .footer__sns { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- 艶出し（漆塗りのような光沢・ハイライト） ---------- */
:root { --gloss: linear-gradient(165deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .1) 100%); }
/* ボタン：上面のツヤ＋ホバーで光が走る */
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px -6px rgba(20, 26, 77, .55); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--gloss); }
.btn > * { position: relative; z-index: 2; }
.btn .btn__arrow { z-index: 2; }
.btn { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%); background-size: 250% 100%; background-position: 150% 0; background-repeat: no-repeat; }
.btn:hover, .btn:focus-visible { animation: shine .9s var(--ease-out); }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -60% 0; } }
.btn--ghost { box-shadow: inset 0 0 0 2px #fff, 0 6px 16px -6px rgba(0, 0, 0, .4); }
/* カード類：うっすら光沢と柔らかい影 */
.quote::after, .stat::after, .report-card::after, .news__link::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--gloss); opacity: .55; }
.quote--kelo::after { opacity: .3; }
.stat, .report-card, .news__link { position: relative; }
.stat { box-shadow: inset 0 1px 0 #fff, 0 10px 24px -14px rgba(20, 26, 77, .45); }
.quote--kelo { background: linear-gradient(150deg, #2A3585 0%, var(--kon) 45%, var(--kon-deep) 100%); box-shadow: 0 24px 48px -24px rgba(20, 26, 77, .7); }
.quote--ceo { background: linear-gradient(160deg, #FFFDF8 0%, var(--kinari) 60%, #EBE2D0 100%); }
.report-card__photo { position: relative; }
/* ラベル・タグ・印：朱や紺に艶 */
.hero__label, .news__cat, .report-card__cat { background-image: var(--gloss); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.profile__stamp { background: radial-gradient(circle at 32% 28%, #3A4699 0%, var(--kon) 45%, var(--kon-deep) 100%); box-shadow: inset 0 2px 4px rgba(255, 255, 255, .35), 0 8px 18px -6px rgba(20, 26, 77, .6); }
.sec-head__ja::before { background: linear-gradient(90deg, #FF7A5C, var(--shu) 50%, var(--shu-text)); box-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
/* ふすま：紙に光が当たったようなハイライト、引手は金属の艶 */
.fusuma__door::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 70%, rgba(184, 145, 58, .12) 100%); }
.fusuma__hikite { z-index: 1; background: radial-gradient(circle at 35% 30%, #4A57B0 0%, var(--kon) 40%, var(--kon-deep) 100%); box-shadow: 0 0 0 4px #B8913A, 0 0 0 5px #E8C877, inset 0 0 0 9px var(--kon-deep), inset 2px 3px 4px rgba(255, 255, 255, .4), 0 4px 8px rgba(0, 0, 0, .35); }
/* CTA・フッター：漆のような深い艶 */
.cta { background: linear-gradient(155deg, #2A3585 0%, var(--kon) 40%, var(--kon-deep) 100%); box-shadow: 0 30px 60px -30px rgba(20, 26, 77, .8); }
.cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--gloss); opacity: .35; }
.footer { background: linear-gradient(180deg, #1B2263 0%, var(--kon-deep) 55%, #0E1238 100%); }
/* ヘッダー：スクロール後のガラスのような艶 */
.header.is-scrolled { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6), 0 8px 24px -16px rgba(21, 19, 28, .35); }
.motion-toggle { box-shadow: inset 0 1px 0 #fff, 0 4px 10px -4px rgba(21, 19, 28, .35); }
.nav-toggle { background: radial-gradient(circle at 35% 30%, #3A4699, var(--kon) 55%, var(--kon-deep)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px -4px rgba(20, 26, 77, .6); }

/* 漆の質感：黒漆・朱漆の深い色＋鏡面の映り込み（斜めの光の帯）＋金の縁 */
:root {
  --kuro-urushi: radial-gradient(120% 80% at 20% 0%, #3A3340 0%, #1A1620 38%, #0B0A0F 100%);
  --shu-urushi: linear-gradient(170deg, #E0472B 0%, #B8290F 45%, #7E1A08 100%);
  --kon-urushi: linear-gradient(165deg, #34409A 0%, #1F286F 42%, #0F1442 100%);
  --utsuri: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, 0) 60%);
  --kin: #C9A34E;
}
.project { background: var(--utsuri), var(--kuro-urushi); }
.cta { background: var(--utsuri), var(--kon-urushi); box-shadow: inset 0 0 0 1px rgba(201, 163, 78, .55), inset 0 1px 0 rgba(255, 255, 255, .25), 0 30px 60px -30px rgba(10, 12, 40, .9); }
.footer { background: var(--utsuri), linear-gradient(180deg, #161C55 0%, #0E1238 60%, #08091F 100%); }
.footer__pat { box-shadow: 0 1px 0 var(--kin); }
.btn { background-color: transparent; background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%), var(--kon-urushi); background-size: 250% 100%, 100% 100%; background-position: 150% 0, 0 0; box-shadow: inset 0 0 0 1px rgba(201, 163, 78, .6), inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 18px -8px rgba(10, 12, 40, .7); }
.btn--shu { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%), var(--shu-urushi); }
.btn--ghost { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%); }
@keyframes shine { from { background-position: 150% 0, 0 0; } to { background-position: -60% 0, 0 0; } }
.quote--kelo { background: var(--utsuri), var(--kon-urushi); box-shadow: inset 0 0 0 1px rgba(201, 163, 78, .5), 0 24px 48px -24px rgba(10, 12, 40, .8); }
.hero__label { background: var(--utsuri), var(--kuro-urushi); box-shadow: inset 0 0 0 1px rgba(201, 163, 78, .55); }
.news__cat { background: var(--kon-urushi); }
.report-card__cat { background: var(--shu-urushi); }
.profile__stamp { border-color: var(--kin); }
.pfusuma { box-shadow: inset 0 0 0 2px var(--kin); }
.pfusuma .fusuma__door { border-color: #2A1A12; background-color: #FBF7EE; box-shadow: inset 0 0 0 3px var(--kin), inset 0 0 0 4px #2A1A12; }
.fusuma__door { border-color: #141018; }
.marquee { background: var(--utsuri), var(--kuro-urushi); }
.marquee--shu { background: var(--utsuri), var(--shu-urushi); }

/* ---------- MOTION OFF / reduced motion ---------- */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
[data-motion="off"] [data-speed], [data-motion="off"] [data-depth] { transform: none !important; }
[data-motion="off"] .marquee__track { transform: none !important; }
[data-motion="off"] .motion-toggle__dot { animation: none !important; }
[data-motion="off"] { scroll-behavior: auto; }

/* ---------- 帯（マーキー）の背景に川崎市の地図 ---------- */
/* assets/img/kawasaki-map.svg（国土数値情報（行政区域データ）を加工して作成）。文字は地図の上を流れ、地図は止まったまま */
.marquee::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url("../img/kawasaki-map.svg") repeat-x 50% 46% / auto 210%; opacity: .26; }
.marquee--shu::before { background-position: 18% 52%; opacity: .32; }
.marquee__track { position: relative; z-index: 1; }

/* ---------- PROFILE：本文を背景（北斎・KELO の大文字）から浮かせて読みやすく ---------- */
.profile__text { position: relative; padding: clamp(20px, 3vw, 32px); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-left: 4px solid var(--shu); box-shadow: 0 10px 24px -16px rgba(20, 26, 77, .45); color: var(--sumi); font-size: clamp(1rem, 1.2vw, 1.0625rem); font-weight: 500; line-height: 2; }
.profile__data { padding: 4px 20px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.profile__data dd { color: var(--sumi); font-weight: 500; }
@media (max-width: 767px) { .profile__data { padding: 4px 16px; } }

/* ---------- フッターの出典表記（コピーライトの隣） ---------- */
.footer__copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; }
.footer__credit { font-family: var(--ff-body); letter-spacing: .04em; font-size: .75rem; }

/* ---------- 画面下に追従する CTA バー ---------- */
.float-cta { position: fixed; left: 50%; bottom: 16px; z-index: 90; width: min(calc(100% - 32px), 1080px); display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 14px 16px 14px 28px; color: #fff; background: var(--utsuri), var(--kon-urushi); box-shadow: inset 0 0 0 1px rgba(201, 163, 78, .55), inset 0 1px 0 rgba(255, 255, 255, .25), 0 18px 40px -16px rgba(10, 12, 40, .85); transform: translate(-50%, calc(100% + 32px)); visibility: hidden; transition: transform .5s var(--ease-out), visibility 0s linear .5s; }
.float-cta.is-shown { transform: translate(-50%, 0); visibility: visible; transition: transform .5s var(--ease-out), visibility 0s; }
.float-cta__text { font: 400 clamp(1rem, 1.8vw, 1.375rem)/1.4 var(--ff-display); }
.float-cta__btns { display: flex; gap: 12px; flex-shrink: 0; }
.float-cta .btn { margin-top: 0; padding: 12px 20px; font-size: .875rem; }
.float-cta :focus-visible { outline-color: var(--shu-light); }
@media (max-width: 767px) {
  .float-cta { bottom: 8px; width: calc(100% - 16px); flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; text-align: center; }
  .float-cta__text { font-size: .9375rem; }
  .float-cta__text br { display: none; }
  .float-cta__btns > .btn { flex: 1 1 0; justify-content: center; padding: 10px 8px; font-size: .8125rem; }
}

/* ---------- 追従 CTA バーを目立つ朱色に（紺・黒・生成りの背景どれの上でも埋もれないように） ---------- */
.float-cta { overflow: hidden; background: var(--utsuri), var(--shu-urushi); box-shadow: inset 0 0 0 2px var(--kin), inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 40px -12px rgba(126, 26, 8, .75), 0 0 0 4px rgba(255, 255, 255, .9); }
.float-cta__text { text-shadow: 0 2px 0 rgba(126, 26, 8, .6); }
/* 数秒おきに光が走る（MOTION OFF では止まる） */
.float-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 150% 0; animation: ctaShine 4.5s var(--ease-out) 1s infinite; }
@keyframes ctaShine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
.float-cta__text, .float-cta__btns { position: relative; z-index: 1; }
/* 主ボタンは白地に朱文字、もう一方は白の線 */
.float-cta .btn--shu { color: var(--shu-text); background-color: #fff; background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 66%); box-shadow: 0 6px 16px -6px rgba(80, 10, 0, .6); }
.float-cta .btn--shu:hover, .float-cta .btn--shu:focus-visible { color: #fff; }
.float-cta .btn--ghost:hover, .float-cta .btn--ghost:focus-visible { color: var(--shu-text); }
.float-cta :focus-visible { outline-color: #fff; }

/* ---------- 追従 CTA バー：KADOKAWA DREAMS ロゴの配色（オレンジ #F12B00・紺 #000066、白の縁取り） ---------- */
:root { --kd-orange: #F12B00; --kd-navy: #000066; }
.float-cta { background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .16) 42%, rgba(255, 255, 255, 0) 56%), var(--kd-orange); box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px var(--kd-navy), 0 18px 40px -12px rgba(0, 0, 60, .7); }
.float-cta__text { text-shadow: 2px 2px 0 var(--kd-navy); }
/* 主ボタンは紺地に白文字（ロゴの「D」）、もう一方は白の線 */
.float-cta .btn--shu { color: #fff; background-color: var(--kd-navy); box-shadow: inset 0 0 0 2px #fff, 0 6px 16px -6px rgba(0, 0, 60, .7); }
.float-cta .btn--shu::before { background: #fff; }
.float-cta .btn--shu:hover, .float-cta .btn--shu:focus-visible { color: var(--kd-navy); }
.float-cta .btn--ghost:hover, .float-cta .btn--ghost:focus-visible { color: var(--kd-orange); }
.float-cta :focus-visible { outline-color: var(--kd-navy); }

/* ---------- フッター：拠点マップ（本社・九州支社のピン） ---------- */
.footer__map { position: relative; width: min(100%, 360px); margin-top: 28px; }
.footer__map img { display: block; width: 100%; height: auto; }
.map-pin { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--kd-orange, #F12B00); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .5); }
/* ピンから広がる波紋（MOTION OFF では止まる） */
.map-pin::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #FF8A6E; animation: pinPulse 2.4s var(--ease-out) infinite; }
.map-pin + .map-pin::before { animation-delay: 1.2s; }
@keyframes pinPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
.map-pin__label { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; padding: 4px 10px; background: #fff; color: var(--kd-navy, #000066); font: 700 .8125rem/1.3 var(--ff-body); text-align: center; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.map-pin__label small { display: block; font-size: .6875rem; font-weight: 500; color: var(--muted); }
/* 九州支社は地図の左端なので、ラベルを右側に寄せる */
.map-pin + .map-pin .map-pin__label { left: -6px; transform: none; }

/* ---------- フッター：公式サイトは会社情報（お問い合わせ）の下、SNS は独立した段に ---------- */
.footer__info { display: grid; gap: 40px; align-content: start; }
.footer__sites { grid-column: auto; display: block; padding-top: 0; border-top: 0; }
.footer__sites ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.footer__sns:not(.footer__sites) { grid-template-columns: repeat(2, 1fr); }
.footer__sns-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; font: 400 clamp(2rem, 4vw, 2.75rem)/1 var(--ff-en); letter-spacing: .08em; color: #fff; }
.footer__sns-head span { font: 500 .8125rem/1 var(--ff-body); letter-spacing: .14em; color: var(--mist); }
@media (max-width: 767px) {
  .footer__sites ul { grid-template-columns: 1fr; }
  .footer__sns:not(.footer__sites) { grid-template-columns: 1fr; }
}

/* ---------- フッター SNS：アイコン（Simple Icons, CC0）。ホバーで各サービスの色に ---------- */
.footer__sns-name { display: inline-flex; align-items: center; gap: 12px; }
.sns-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background .3s, box-shadow .3s, transform .4s var(--ease-pop); }
.sns-icon svg { display: block; width: 17px; height: 17px; }
.footer__sns a:hover .sns-icon, .footer__sns a:focus-visible .sns-icon { transform: scale(1.12) rotate(-6deg); box-shadow: none; }
.footer__sns a:hover .sns-icon--instagram, .footer__sns a:focus-visible .sns-icon--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.footer__sns a:hover .sns-icon--x, .footer__sns a:focus-visible .sns-icon--x,
.footer__sns a:hover .sns-icon--tiktok, .footer__sns a:focus-visible .sns-icon--tiktok { background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.footer__sns a:hover .sns-icon--facebook, .footer__sns a:focus-visible .sns-icon--facebook { background: #0866FF; }

/* ---------- 追従バーの「お仕事を探す」：ボタン1つに ---------- */
.float-cta .btn--shu { font-size: .9375rem; padding: 12px 28px; cursor: pointer; border: 0; }
@media (max-width: 767px) { .float-cta__btns > .btn { flex: 1 1 auto; } }

/* ---------- お仕事探しポップアップ（派遣／転職） ---------- */
.job-dialog { width: min(calc(100% - 32px), 720px); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--sumi); overflow: visible; }
.job-dialog::backdrop { background: rgba(0, 0, 40, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.job-dialog__inner { position: relative; padding: clamp(32px, 5vw, 48px) clamp(20px, 5vw, 48px) clamp(24px, 4vw, 40px); background: var(--kinari); box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px var(--kd-navy), 0 30px 60px -20px rgba(0, 0, 40, .8); max-height: calc(100dvh - 32px); overflow-y: auto; }
.job-dialog__inner::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--kd-orange); }
.job-dialog__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--kd-navy); color: #fff; font: 400 1.5rem/1 var(--ff-body); cursor: pointer; transition: transform .3s var(--ease-pop), background .3s; }
.job-dialog__close:hover, .job-dialog__close:focus-visible { background: var(--kd-orange); transform: rotate(90deg); }
.job-dialog__en { font: 400 clamp(1rem, 2vw, 1.25rem)/1 var(--ff-en); letter-spacing: .14em; color: var(--kd-orange); }
.job-dialog__title { margin-top: 10px; padding-right: 48px; font: 400 clamp(1.25rem, 2.6vw, 1.5rem)/1.5 var(--ff-display); color: var(--kd-navy); }
.job-dialog__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.job-choice { position: relative; display: grid; gap: 8px; height: 100%; padding: 24px 56px 24px 24px; color: #fff; text-decoration: none; background: var(--kd-orange); box-shadow: inset 0 0 0 2px #fff, 0 10px 24px -12px rgba(0, 0, 40, .6); transition: transform .4s var(--ease-pop), box-shadow .3s; }
.job-choice--agent { background: var(--kd-navy); }
.job-choice:hover, .job-choice:focus-visible { transform: translateY(-4px); box-shadow: inset 0 0 0 2px #fff, 0 18px 30px -12px rgba(0, 0, 40, .7); }
.job-choice__tag { justify-self: start; padding: 4px 12px; background: #fff; color: var(--kd-navy); font: 700 .8125rem/1.2 var(--ff-body); letter-spacing: .1em; }
.job-choice__name { font: 400 clamp(1.125rem, 2.4vw, 1.375rem)/1.4 var(--ff-display); }
.job-choice__desc { font-size: .8125rem; opacity: .92; }
.job-choice__arrow { position: absolute; right: 20px; top: 50%; translate: 0 -50%; font-size: 1.5rem; transition: transform .4s var(--ease-pop); }
.job-choice:hover .job-choice__arrow { transform: translate(4px, -4px); }
.job-choice:focus-visible { outline: 3px solid var(--kd-navy); outline-offset: 3px; }
.job-dialog[open] .job-dialog__inner { animation: jobPop .45s var(--ease-pop); }
@keyframes jobPop { from { transform: translateY(24px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
body.is-dialog-open { overflow: hidden; }
@media (max-width: 767px) { .job-dialog__list { grid-template-columns: 1fr; } }

/* ---------- 追従バー全体を1つのボタンに（どこを押してもポップアップが開く） ---------- */
.float-cta, .float-cta.is-shown { padding: 0; }
.float-cta__btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; width: 100%; padding: 14px 16px 14px 28px; border: 0; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; transition: background .3s; }
.float-cta__btn:hover, .float-cta__btn:focus-visible { background: rgba(255, 255, 255, .1); }
.float-cta__btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.float-cta__go { display: inline-flex; align-items: center; gap: 20px; flex-shrink: 0; min-height: 48px; padding: 0 24px; background: var(--kd-navy); color: #fff; box-shadow: inset 0 0 0 2px #fff, 0 6px 16px -6px rgba(0, 0, 60, .7); font: 700 .9375rem/1.4 var(--ff-body); letter-spacing: .08em; transition: background .3s, color .3s; }
.float-cta__arrow { font-size: 1.25rem; transition: transform .4s var(--ease-pop); }
.float-cta__btn:hover .float-cta__go, .float-cta__btn:focus-visible .float-cta__go { background: #fff; color: var(--kd-navy); }
.float-cta__btn:hover .float-cta__arrow { transform: translateX(4px); }
.float-cta.is-shown:has(.float-cta__btn:hover) { transform: translate(-50%, -4px); }
@media (max-width: 767px) {
  .float-cta { padding: 0; }
  .float-cta__btn { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; text-align: center; }
  .float-cta__go { justify-content: center; min-height: 44px; }
}

/* ---------- 追従バー：艶ありの黄色グラデーション（文字は紺で読みやすく） ---------- */
.float-cta {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .18) 46%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #FFF06A 0%, #FFD500 48%, #F2B200 52%, #FFC81A 100%);
  box-shadow: inset 0 0 0 3px #fff, inset 0 -3px 6px rgba(160, 100, 0, .35), 0 0 0 4px var(--kd-navy), 0 18px 40px -12px rgba(0, 0, 60, .7);
}
.float-cta::after { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); }
.float-cta__btn { color: var(--kd-navy); padding: 16px 18px 16px 32px; }
.float-cta__btn:hover, .float-cta__btn:focus-visible { background: rgba(255, 255, 255, .22); }
.float-cta__btn:focus-visible { outline-color: var(--kd-navy); }
.float-cta__text { font-size: clamp(1.0625rem, 2vw, 1.5rem); text-shadow: 0 1px 0 rgba(255, 255, 255, .8); }
/* 「お仕事を探す」を大きく */
.float-cta__go { min-height: 64px; padding: 0 40px; gap: 24px; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); background: linear-gradient(180deg, #2A2A8A 0%, var(--kd-navy) 55%, #00004A 100%); box-shadow: inset 0 0 0 2px #fff, inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -6px rgba(0, 0, 60, .7); }
.float-cta__arrow { font-size: 1.5rem; }
@media (max-width: 767px) {
  .float-cta__btn { padding: 14px; gap: 12px; }
  .float-cta__go { min-height: 56px; font-size: 1.125rem; }
}

/* ---------- お仕事探しポップアップ：全体を大きく ---------- */
.job-dialog { width: min(calc(100% - 32px), 920px); }
.job-dialog__inner { padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 64px) clamp(28px, 5vw, 56px); }
.job-dialog__inner::before { height: 10px; }
.job-dialog__close { top: 20px; right: 20px; width: 56px; height: 56px; font-size: 2rem; }
.job-dialog__en { font-size: clamp(1.125rem, 2.4vw, 1.5rem); }
.job-dialog__title { margin-top: 14px; padding-right: 64px; font-size: clamp(1.375rem, 3.2vw, 2rem); }
.job-dialog__list { gap: 24px; margin-top: 36px; }
.job-choice { gap: 12px; padding: 36px 72px 36px 32px; }
.job-choice__tag { padding: 6px 16px; font-size: 1rem; }
.job-choice__name { font-size: clamp(1.375rem, 3vw, 1.875rem); }
.job-choice__desc { font-size: clamp(.875rem, 1.4vw, 1rem); }
.job-choice__arrow { right: 28px; font-size: 2rem; }
@media (max-width: 767px) {
  .job-dialog__title { padding-right: 56px; }
  .job-dialog__close { top: 14px; right: 14px; width: 48px; height: 48px; }
  .job-choice { padding: 28px 60px 28px 24px; }
}

/* ---------- 追従バー：艶ありのオレンジグラデーション（黄色版から差し替え） ---------- */
.float-cta {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .14) 46%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #FFA23D 0%, #FF7410 48%, #E85500 52%, #FF6A0A 100%);
  box-shadow: inset 0 0 0 3px #fff, inset 0 -3px 6px rgba(120, 30, 0, .35), 0 0 0 4px var(--kd-navy), 0 18px 40px -12px rgba(0, 0, 60, .7);
}
.float-cta::after { background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); }
.float-cta__btn { color: #fff; }
.float-cta__btn:hover, .float-cta__btn:focus-visible { background: rgba(255, 255, 255, .14); }
.float-cta__text { text-shadow: 2px 2px 0 var(--kd-navy); }

/* ---------- 追従バー：グラデーションをなだらかに（上が濃いオレンジ → 下が明るいオレンジ） ---------- */
.float-cta {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, .2) 100%),
    linear-gradient(180deg, #E04A00 0%, #F26100 35%, #FF7A1A 70%, #FF9338 100%);
  box-shadow: inset 0 0 0 3px #fff, inset 0 1px 0 4px rgba(255, 255, 255, .25), 0 0 0 4px var(--kd-navy), 0 18px 40px -12px rgba(0, 0, 60, .7);
}

/* ---------- PROFILE：スマホでは「公式プロフィールを見る」を中央に ---------- */
@media (max-width: 767px) {
  .profile__info > .btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
}

/* ---------- トップ（HERO）の背景にグラデーション ---------- */
/* 右の写真の背景色（青みのグレー）から、左の文字側へ向かって生成りに溶かす＋左下にうっすら朱の光 */
.hero {
  background:
    radial-gradient(ellipse 60% 70% at 0% 100%, rgba(241, 43, 0, .16) 0%, rgba(241, 43, 0, 0) 70%),
    radial-gradient(ellipse 50% 60% at 10% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(100deg, #F5F0E6 0%, #E6E8EC 38%, #CFDCE8 64%);
}

/* ---------- トップ（HERO）の背景：青みのグレーだけでグラデーション（朱の光は外す） ---------- */
.hero {
  background:
    radial-gradient(ellipse 55% 65% at 5% 5%, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(100deg, #EDF1F5 0%, #DEE6EE 36%, #CFDCE8 64%, #C3D2E0 100%);
}