/* =========================================================
   KING OF JAPAN — 白 × 赤
   色・角丸・余白・書体はすべてここの変数から使う
   ========================================================= */
:root {
  /* Color — 白と赤に統一。文字は墨色 */
  --color-red: #B0121F;            /* ブランドの赤（白文字 7:1） */
  --color-red-hover: #8F0E19;
  --color-red-deep: #8A0D17;       /* 赤の面の上に置く一段濃い赤 */
  --color-red-dark: #5C0910;       /* フッター */
  --color-red-tint: #F7ECEC;       /* マーカー・淡い面 */
  --color-red-light: #F07A80;      /* 暗い背景（動画の上）で使う赤 */
  --color-on-red: #FFFFFF;
  --color-on-red-muted: #F3D9DB;   /* 赤の上の補助文字（5:1 以上） */
  --color-ink: #1F1B1B;            /* 本文（墨色） */
  --color-black: #121010;          /* オープニングの文字（黒） */
  --color-ink-2: #3D3535;
  --color-muted: #6E6563;          /* 補助文字（白・生成りの上で 4.5:1 以上） */
  --color-white: #FFFFFF;
  --color-ivory: #FAF7F2;          /* 生成り */
  --color-paper: #F1EBE2;          /* 写真の仮置き */
  --color-line: #E4DCD2;           /* 罫線 */
  --color-field: #CFC6BC;
  --color-error: #B0121F;

  /* Font */
  --font-display: 'Cinzel', 'Times New Roman', serif;                                    /* 英字 */
  --font-mincho: 'Shippori Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;           /* 和文見出し */
  --font-japanese: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; /* 本文 */

  /* Radius — 角を締めて上品に */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Spacing */
  --space-xs: 6px;
  --space-sm: 14px;
  --space-md: 24px;
  --space-lg: 36px;
  --space-xl: 80px;
  --gutter: clamp(16px, 3vw, 24px);
  --section-y: clamp(80px, 11vw, 160px);

  --header-h: 92px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-japanese);
  color: var(--color-ink);
  background: var(--color-white);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  overflow-x: hidden;
  overflow-x: clip;
}
body.is-menu-open { overflow: hidden; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; }

.container { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--color-white); color: var(--color-ink);
  padding: 10px 16px; border-radius: var(--radius-md); font-weight: 700;
}
.skip-link:focus { top: 16px; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .3em;
  color: var(--color-red);
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.eyebrow--accent { color: var(--color-red); }
.h-section {
  font-family: var(--font-mincho); font-weight: 600;
  font-size: clamp(28px, 3.8vw, 52px); line-height: 1.5; letter-spacing: .04em;
}
.marker { background: linear-gradient(transparent 70%, var(--color-red-tint) 70%); }
.label-en { font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; margin-right: 14px; }

.big-title {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 8px 16px; padding-bottom: clamp(36px, 4.5vw, 64px);
}
.big-title--flush { padding-bottom: 0; }
.big-title__en {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 6.4vw, 92px); letter-spacing: .06em; line-height: 1;
}
.big-title__ja { font-family: var(--font-mincho); font-size: 15px; font-weight: 600; letter-spacing: .2em; color: var(--color-red); }
.big-title__ja--accent { color: var(--color-red); }

/* ---------- Buttons ---------- */
/* 共通：角を締めた細身の形。触れると色の面が左から流れ込み、矢印が少し進む。
   各ボタンは --btn-fill（流れ込む色）と --btn-hover-color（そのときの文字色）だけ決める */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 56px; padding: 0 40px; border-radius: 0;
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: .2em; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer; text-shadow: none;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill, var(--color-red-hover));
  transform: scaleX(0); transform-origin: right center;
  transition: transform .55s cubic-bezier(.7, 0, .2, 1);
}
@media (hover: hover) { .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; } }
@media (hover: hover) { .btn:hover, .btn:focus-visible { color: var(--btn-hover-color, inherit); } }
.btn > span[aria-hidden="true"] { display: inline-block; transition: transform .45s var(--ease); }
@media (hover: hover) { .btn:hover > span[aria-hidden="true"] { transform: translateX(5px); } }
.btn--sm { min-height: 46px; padding: 0 26px; font-size: 12px; letter-spacing: .16em; }

.btn--primary { background: var(--color-red); color: var(--color-on-red); --btn-fill: var(--color-red-dark); --btn-hover-color: var(--color-white); }
.btn--outline { border-color: var(--color-ink); color: var(--color-ink); background: transparent; --btn-fill: var(--color-ink); --btn-hover-color: var(--color-white); }
.btn--white { background: var(--color-white); color: var(--color-red); --btn-fill: var(--color-red-dark); --btn-hover-color: var(--color-white); }

/* ---------- Image placeholder ---------- */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--color-paper); border: 1px dashed #C9BDAF;
  color: var(--color-muted); font-size: 13px; line-height: 1.8; letter-spacing: .08em;
  border-radius: var(--radius-sm);
}
.ph--red { background: var(--color-red-deep); border-color: rgba(255,255,255,.35); color: var(--color-on-red-muted); }

/* =========================================================
   HERO + HEADER
   ========================================================= */
/* overflow:clip … はみ出した透かし文字で横スクロールが起きないようにする */
.hero {
  background: var(--color-black); color: var(--color-white);
  position: relative; overflow: hidden; overflow: clip;
  display: flex; flex-direction: column; min-height: min(100svh, 940px);
  /* 中の固定背景（動画）をこのセクションの範囲だけに見せる */
  clip-path: inset(0);
}
.hero > :not(.hero__bg) { position: relative; z-index: 1; }
.hero > .site-header { z-index: 20; }   /* スマホのメニュー画面が本文より前に出るように */

/* 背景動画：色と明るさを抑え、暗い幕を重ねて「うっすら見える」程度に */
/* 動画は画面に固定。文字と下のセクションだけがスクロールで流れていく */
.hero__bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18,16,16,.74) 0%, rgba(18,16,16,.54) 48%, rgba(18,16,16,.28) 100%),
    linear-gradient(0deg, rgba(18,16,16,.62) 0%, rgba(18,16,16,0) 42%),
    linear-gradient(rgba(18,16,16,.14), rgba(18,16,16,.14));   /* 以前の明るさ調整（filter）の代わり */
}

/* ファーストビューの文字は白（赤は明るめの赤で読みやすく） */
.hero .logo__ja { color: rgba(255,255,255,.72); }
.hero .eyebrow { color: var(--color-red-light); }
.hero .menu-btn { background: transparent; border-color: rgba(255,255,255,.45); color: var(--color-white); }
.is-menu-open .hero .logo { color: var(--color-ink); }
.is-menu-open .hero .logo__ja { color: var(--color-muted); }
.is-menu-open .hero .menu-btn { background: var(--color-white); border-color: var(--color-line); color: var(--color-ink); }
.btn--outline-light { border-color: rgba(255,255,255,.7); color: var(--color-white); background: transparent; --btn-fill: var(--color-white); --btn-hover-color: var(--color-ink); }
@media (hover: hover) { .btn--outline-light:hover { border-color: var(--color-white); text-shadow: none; } }

/* ファーストビューの2つのボタン：箱をなくし「丸い矢印＋2段の文字」だけで見せる。
   触れると文字の下に線が伸び、丸が少し大きくなって色が変わり、矢印が進む */
.btn.hero-btn {
  background: none; border: 0; padding: 4px 8px 4px 0; min-width: 0; min-height: 72px;
  justify-content: flex-start; gap: 22px; text-align: left; letter-spacing: 0;
  color: var(--color-white); overflow: visible;
}
.btn.hero-btn::before { display: none; }
@media (hover: hover) { .btn.hero-btn:hover, .btn.hero-btn:focus-visible { color: var(--color-white); } }
.hero-btn__label { position: relative; display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; }
.hero-btn__label::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: rgba(255,255,255,.5); transform: scaleX(.35); transform-origin: left center;
  transition: transform .55s cubic-bezier(.7, 0, .2, 1), background-color .4s var(--ease);
}
@media (hover: hover) { .hero-btn:hover .hero-btn__label::after, .hero-btn:focus-visible .hero-btn__label::after { transform: scaleX(1); background: var(--color-white); } }
.hero-btn__en { font-family: var(--font-display); font-size: 11px; font-weight: 500; letter-spacing: .34em; opacity: .75; }
.hero-btn__ja { font-size: 15px; font-weight: 500; letter-spacing: .16em; }
.btn.hero-btn > .hero-btn__icon {
  order: -1; display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  transition: transform .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.btn--primary.hero-btn > .hero-btn__icon { background: var(--color-red); border-color: var(--color-red); }
.hero-btn__icon svg { width: 20px; height: 20px; transition: transform .45s var(--ease); }
@media (hover: hover) { .btn.hero-btn:hover > .hero-btn__icon { transform: scale(1.06); } }
@media (hover: hover) { .hero-btn:hover .hero-btn__icon svg { transform: translateX(4px); } }
@media (hover: hover) { .hero-btn:hover .hero-btn__icon--down svg { transform: translateY(4px); } }
@media (hover: hover) { .btn--primary.hero-btn:hover > .hero-btn__icon { background: var(--color-red-dark); border-color: var(--color-red-dark); } }
@media (hover: hover) { .btn--outline-light.hero-btn:hover > .hero-btn__icon { background: var(--color-white); border-color: var(--color-white); color: var(--color-ink); } }
@media (min-width: 961px) {
  .hero .gnav__list a:not(.btn) { color: var(--color-white); }
  @media (hover: hover) { .hero .gnav__list a:not(.btn):hover { color: var(--color-red-light); } }
  .hero .gnav__list a:not(.btn)::after { background: var(--color-red-light); }
}

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h);
}
.logo { display: flex; flex-direction: column; justify-content: center; gap: 4px; line-height: 1.2; min-height: 44px; }
.logo__en { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: .14em; }
.logo__ja { font-size: 10px; letter-spacing: .3em; color: var(--color-muted); }

.gnav__list { display: flex; align-items: center; gap: 32px; font-size: 13px; font-weight: 500; letter-spacing: .12em; }
.gnav__list a:not(.btn) { position: relative; }
.gnav__list a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--color-red);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
@media (hover: hover) { .gnav__list a:not(.btn):hover { color: var(--color-red); } }
@media (hover: hover) { .gnav__list a:not(.btn):hover::after { transform: scaleX(1); } }
.header-actions { display: none; align-items: center; gap: 8px; }

.menu-btn {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line); background: var(--color-white); color: var(--color-ink);
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; position: relative; z-index: 60;
}
.menu-btn__bar { width: 18px; height: 1px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 780px);
  grid-template-areas: "head" "lead" "cta";
  align-content: center; row-gap: 32px;
  padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 80px);
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.hero__head { grid-area: head; align-self: end; display: flex; flex-direction: column; gap: 28px; }
.hero__title {
  font-family: var(--font-mincho); font-weight: 600;
  font-size: clamp(40px, 5.8vw, 88px); line-height: 1.3; letter-spacing: .04em;
}
.hero__tagline {
  display: block; margin-top: 24px;
  font-weight: 500; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.5; letter-spacing: .1em; color: var(--color-red-light);
}
.hero__lead { grid-area: lead; font-size: 15px; line-height: 2.1; color: rgba(255,255,255,.88); max-width: 600px; }
.hero__cta { grid-area: cta; display: flex; flex-wrap: wrap; gap: 14px 48px; align-self: start; padding-top: 8px; }

.hero__wordmark {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(52px, 12.5vw, 190px); line-height: .9; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; overflow: clip; color: rgba(255,255,255,.07);
  padding-inline: 16px; margin-bottom: -0.1em; user-select: none;
}

.hero__services { border-top: 1px solid rgba(255,255,255,.16); background: rgba(18,16,16,.5); }
.hero__services ul { display: flex; flex-wrap: wrap; gap: 0 48px; font-size: 14px; letter-spacing: .1em; }
.hero__services a { display: flex; align-items: center; min-height: 68px; transition: color .3s var(--ease); }
@media (hover: hover) { .hero__services a:hover { color: var(--color-red-light); } }
.hero__services .num { font-family: var(--font-display); color: var(--color-red-light); margin-right: 14px; }
.hero__services .arrow { display: none; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section { padding-block: var(--section-y); }

/* About */
/* 見出しも本文も中央にそろえた1列 */
.about__inner { display: flex; flex-direction: column; align-items: center; gap: 48px; max-width: 860px; text-align: center; }
.about__head { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.about .eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; }   /* 中央に置くので線を両側に */
.about__body { display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 16px; line-height: 2.2; }
.br-sp { display: none; }   /* スマホだけで改行する位置 */
.about__body p { text-wrap: pretty; }

/* About：奥行きを出す
   ① 背景は中央が明るく端が生成りに沈むスポットライト
   ② 奥に大きな「ABOUT」の輪郭が右から左へ流れる（.flow-word）
   ③ 見出しは浮き彫りの段＋遠くへ落ちる長い影 */
.about {
  position: relative; overflow: hidden; overflow: clip;
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 82%, #FFFFFF 100%),   /* 下端は次の白いセクションへなじませる */
    radial-gradient(ellipse 72% 62% at 50% 46%, #FFFFFF 0%, #FCFAF6 45%, var(--color-ivory) 75%, #F1EBE2 100%);
}
/* 背景を右から左へ流れ続ける英単語（About・01〜03 共通） */
.flow-word {
  position: absolute; left: 0; right: 0; top: 50%; z-index: 0; transform: translateY(-50%);
  overflow: hidden; pointer-events: none; user-select: none;
  contain: layout paint;
}
.flow-word__track {
  display: flex; width: max-content; will-change: transform;
  animation: flowWord var(--flow-speed, 60s) linear infinite;
  animation-play-state: paused;
}
.flow-word.is-running .flow-word__track { animation-play-state: running; }
.flow-word__track span {
  flex: none; padding-right: .5em;
  font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: .08em; white-space: nowrap;
  font-size: clamp(110px, 20vw, 320px);
  color: transparent; -webkit-text-stroke: 1px var(--flow-stroke, rgba(255, 255, 255, .16));
}
/* 8 個のうち前半 4 個ぶん（= 全体の半分）流すと最初と同じ並びに戻るので、継ぎ目なくループする */
@keyframes flowWord { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.flow-word--about { --flow-stroke: rgba(176, 18, 31, .14); --flow-speed: 70s; }
.flow-word--ev { --flow-speed: 55s; }
.flow-word--startup { --flow-speed: 65s; }
.flow-word--consulting { --flow-speed: 80s; }
.svc--photo .flow-word { top: 46%; }
/* 写真の上は模様に埋もれやすいので、線を少し太く濃く＋内側にごく薄い白 */
.svc--photo .flow-word__track span {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .34);
  color: rgba(255, 255, 255, .05);
}
.about__inner { position: relative; z-index: 1; }

.about .h-section {
  text-shadow:
    0 1px 0 #E6DFD6,
    0 2px 0 #DCD4CA,
    0 3px 0 #D2C9BE,
    0 4px 1px rgba(31, 27, 27, .18),
    0 10px 18px rgba(31, 27, 27, .22),
    0 22px 40px rgba(31, 27, 27, .18),
    0 40px 70px rgba(31, 27, 27, .12);
}
.about__key {
  text-shadow:
    0 1px 0 #EADCDC,
    0 2px 0 #E0CCCC,
    0 3px 1px rgba(31, 27, 27, .16),
    0 8px 18px rgba(176, 18, 31, .22),
    0 20px 40px rgba(176, 18, 31, .14);
}
.about__body > p:not(.about__key) {
  color: var(--color-ink-2);
  text-shadow: 0 1px 1px rgba(31, 27, 27, .1), 0 6px 16px rgba(31, 27, 27, .1);
}
.about .eyebrow { text-shadow: 0 3px 10px rgba(176, 18, 31, .25); }
.about__key { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.7; letter-spacing: .06em; }

/* Service */
.service { padding-top: 0; }
.svc { padding-block: clamp(64px, 8vw, 120px); }
.svc--ivory { background: var(--color-ivory); }
.svc--red   { background: var(--color-red); color: var(--color-on-red); }
.svc--white { background: var(--color-white); }

.svc__main {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "media head" "media body";
  column-gap: clamp(40px, 6vw, 96px); row-gap: 24px; align-items: center;
}
.svc--reverse .svc__main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: "head media" "body media";
}
/* 01・02：写真を画面に固定した共通の背景にし、文字だけが流れる。
   02 に入ると背景の写真がフェードで切り替わる（js/main.js が .is-active を付け替え） */
.svc-photos {
  position: relative; background: var(--color-black);
  clip-path: inset(0);                      /* 固定した写真をこの範囲だけに見せる */
}
.svc--photo {
  position: relative; color: var(--color-white);
  padding-block: clamp(96px, 12vw, 180px);
}
.svc--photo > .container { position: relative; z-index: 1; }
.svc__bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.svc__bg-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); will-change: opacity; }
.svc__bg-layer.is-active { opacity: 1; }
.svc__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.svc__bg-layer--ev img { object-position: 55% 50%; }
.svc__bg-layer--startup img { object-position: 28% 30%; }
.svc__bg-layer--consulting img { object-position: 50% 40%; }
.svc__bg-layer--consulting::after {
  background: linear-gradient(90deg, rgba(18,16,16,.82) 0%, rgba(18,16,16,.66) 42%, rgba(18,16,16,.36) 100%);
}
.svc__bg-layer::after { content: ""; position: absolute; inset: 0; }
/* 文字のある側ほど暗く（01 は左、02 は右） */
.svc__bg-layer--ev::after {
  background: linear-gradient(90deg, rgba(18,16,16,.8) 0%, rgba(18,16,16,.64) 42%, rgba(18,16,16,.3) 100%);
}
.svc__bg-layer--startup::after {
  background: linear-gradient(270deg, rgba(18,16,16,.8) 0%, rgba(18,16,16,.64) 42%, rgba(18,16,16,.32) 100%);
}
.svc--photo .svc__main {
  grid-template-columns: minmax(0, 640px);
  grid-template-areas: "head" "body";
  justify-content: end;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.svc--photo-left .svc__main { justify-content: start; }
/* トップの 01〜03 はタイトル＋ボタンだけ。写真を大きく見せる */
.svc--photo { min-height: 86svh; display: flex; align-items: center; }
.svc--photo > .container { width: 100%; }
.svc__more { align-self: flex-start; margin-top: 22px; }

/* 「VIEW MORE ── ○→」のリンク。触れると線が伸び、円が赤く塗られる */
.more-link {
  display: inline-flex; align-items: center; gap: 18px; min-height: 56px;
  color: var(--color-white); text-shadow: none;
}
.more-link__text { font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .32em; }
.more-link__line { width: 56px; height: 1px; background: rgba(255,255,255,.55); transition: width .5s var(--ease), background-color .4s var(--ease); }
.more-link__circle {
  width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.more-link__circle svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
@media (hover: hover) { .more-link:hover .more-link__line { width: 92px; background: var(--color-red-light); } }
@media (hover: hover) { .more-link:hover .more-link__circle { background: var(--color-red); border-color: var(--color-red); } }
@media (hover: hover) { .more-link:hover .more-link__circle svg { transform: translateX(3px); } }

/* 右側に置く事業（02）は文字もリンクも右端にそろえ、左右交互をはっきり */
.svc--photo:not(.svc--photo-left) .svc__head { align-items: flex-end; text-align: right; }
.svc--photo:not(.svc--photo-left) .svc__more { align-self: flex-end; }

/* =========================================================
   事業の専用ページ（ev.html / startup.html / consulting.html）
   ========================================================= */
.detail-hero {
  position: relative; overflow: hidden; color: var(--color-white); background: var(--color-black);
  display: flex; flex-direction: column; min-height: min(80svh, 760px);
}
.detail-hero > :not(.detail-hero__bg) { position: relative; z-index: 1; }
.detail-hero__bg { position: absolute; inset: 0; z-index: 0; }
.detail-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.detail-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18,16,16,.72) 0%, rgba(18,16,16,.45) 55%, rgba(18,16,16,.2) 100%),
    linear-gradient(0deg, rgba(18,16,16,.7) 0%, rgba(18,16,16,0) 55%);
}
.detail-hero__bg--ev img { object-position: 55% 50%; }
.detail-hero__bg--startup img { object-position: 28% 30%; }
.detail-hero__bg--consulting img { object-position: 50% 40%; }
.detail-hero .logo__ja { color: rgba(255,255,255,.72); }
.detail-hero__body {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  padding-top: 48px; padding-bottom: clamp(56px, 7vw, 96px);
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.detail-hero .svc__num > span:first-child { color: var(--color-white); }
.detail-hero__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(32px, 4.6vw, 64px); line-height: 1.4; letter-spacing: .06em; }
.detail-hero__catch { font-family: var(--font-mincho); font-weight: 500; font-size: clamp(18px, 2vw, 26px); line-height: 1.7; letter-spacing: .08em; color: var(--color-red-light); }

.detail-intro__inner { max-width: 880px; display: flex; flex-direction: column; gap: 24px; font-size: 16px; line-height: 2.2; }
.detail-panels { background: var(--color-ivory); }
.detail-panels .svc__panels { margin-top: 0; }

.detail-cta { background: var(--color-red); color: var(--color-on-red); padding-block: clamp(64px, 8vw, 104px); }
.detail-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.detail-cta__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.6; letter-spacing: .06em; }

.detail-next { border-bottom: 1px solid var(--color-line); }
.detail-next__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-next__item {
  display: flex; align-items: center; gap: 18px; min-height: 104px; padding: 0 8px;
  font-family: var(--font-mincho); font-size: 18px; font-weight: 600; letter-spacing: .08em;
  transition: color .3s var(--ease);
}
.detail-next__item + .detail-next__item { border-left: 1px solid var(--color-line); padding-left: 32px; }
.detail-next__item .num { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--color-red); }
.detail-next__item .arrow { margin-left: auto; padding-right: 8px; color: var(--color-red); transition: transform .3s var(--ease); }
@media (hover: hover) { .detail-next__item:hover { color: var(--color-red); } }
@media (hover: hover) { .detail-next__item:hover .arrow { transform: translateX(6px); } }
.svc--photo .svc__num > span:first-child { color: var(--color-white); }
.svc--photo .svc__name { color: var(--color-red-light); }
.svc--photo .svc__body { color: rgba(255,255,255,.88); }
.svc--photo .panel--deep {
  background: rgba(18,16,16,.6); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.svc--photo .panel--deep .num-list li::before { color: var(--color-red-light); }
.svc--photo .panel--white { border-color: transparent; }

.svc__head { grid-area: head; align-self: end; display: flex; flex-direction: column; gap: 18px; }
.svc__media { grid-area: media; aspect-ratio: 4 / 3; }
.svc__body { grid-area: body; align-self: start; font-size: 15px; line-height: 2.1; }
.svc--red .svc__body { color: var(--color-on-red-muted); }

.svc__num { display: flex; align-items: baseline; gap: 18px; }
.svc__num > span:first-child {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 6vw, 84px); line-height: 1;
  color: var(--color-red);
}
.svc--red .svc__num > span:first-child { color: var(--color-on-red); }
.svc__en { font-family: var(--font-display); font-size: 12px; letter-spacing: .3em; }
.svc__name { font-size: 14px; font-weight: 500; letter-spacing: .2em; color: var(--color-red); }
.svc--red .svc__name { color: var(--color-on-red-muted); }
.svc__catch { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.6; letter-spacing: .04em; }

.svc__panels { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: clamp(40px, 5vw, 64px); }
.panel {
  flex: 1 1 400px; min-width: 0;
  border-radius: var(--radius-sm); padding: clamp(28px, 3.2vw, 44px);
  display: flex; flex-direction: column; gap: 20px; font-size: 15px; line-height: 1.8;
}
.panel--wide { flex: 1.3 1 480px; }
.panel--white { background: var(--color-white); color: var(--color-ink); border: 1px solid var(--color-line); }
.svc--red .panel--white { border-color: transparent; }
.panel--red  { background: var(--color-red); color: var(--color-on-red); }
.panel--deep { background: var(--color-red-deep); color: var(--color-on-red); }
.panel__title {
  font-family: var(--font-mincho); font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: .08em;
  padding-bottom: 16px; border-bottom: 1px solid var(--color-line);
}
.panel--red .panel__title, .panel--deep .panel__title { border-bottom-color: rgba(255,255,255,.25); }

.dot-list { display: flex; flex-direction: column; gap: 14px; }
.dot-list li { display: flex; gap: 14px; }
.dot-list li::before {
  content: ""; flex: 0 0 6px; height: 6px; margin-top: 11px;
  border-radius: 50%; background: var(--color-red);
}
.panel--red .dot-list li::before, .panel--deep .dot-list li::before { background: var(--color-on-red); }

.num-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 32px; counter-reset: num;
}
.num-list li { display: flex; gap: 16px; counter-increment: num; }
.num-list li::before {
  content: counter(num, decimal-leading-zero);
  font-family: var(--font-display); font-size: 13px; padding-top: 3px;
  color: var(--color-red);
}
.panel--deep .num-list li::before, .panel--red .num-list li::before { color: var(--color-on-red-muted); }

.def-list { display: flex; flex-direction: column; gap: 18px; counter-reset: def; }
/* 番号 | 項目名 / 説明（説明は項目名の下） */
.def-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; counter-increment: def; }
.def-list > div::before {
  content: counter(def, decimal-leading-zero); grid-row: span 2;
  font-family: var(--font-display); font-size: 13px; padding-top: 3px; color: var(--color-red);
}
.panel--red .def-list > div::before { color: var(--color-on-red-muted); }
.def-list dt { font-weight: 700; letter-spacing: .06em; }
.panel--red .def-list dd { color: var(--color-on-red-muted); }

/* Flow */
.flow .big-title { margin-bottom: clamp(40px, 5vw, 64px); }
.flow__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 28px; }
.flow__step {
  border-top: 1px solid var(--color-ink); padding-top: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.flow__num { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--color-red); }
.flow__name { font-family: var(--font-mincho); font-size: 19px; font-weight: 600; line-height: 1.5; letter-spacing: .06em; margin-bottom: 6px; }
.flow__step p { font-size: 14px; line-height: 1.95; color: var(--color-ink-2); }

/* Message */
.message { background: var(--color-ivory); }
/* 写真なし：読み物として中央寄りの1列 */
.message__inner { max-width: 880px; }
.message__sign { font-size: 14px; line-height: 1.9; letter-spacing: .1em; text-align: right; padding-top: 12px; border-top: 1px solid var(--color-line); }
.message__sign span { font-family: var(--font-mincho); font-size: 24px; font-weight: 600; letter-spacing: .14em; }
.message__body { display: flex; flex-direction: column; gap: 28px; }
.message__text { display: flex; flex-direction: column; gap: 22px; font-size: 15px; line-height: 2.2; }
.message__key { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.7; letter-spacing: .08em; }

/* Company */
.company { background: var(--color-white); }
.company__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px 96px; }
.company__inner .big-title { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; }
.company__inner .big-title__en { font-size: clamp(36px, 4.4vw, 64px); }
.company__table { border-top: 1px solid var(--color-ink); font-size: 15px; line-height: 1.9; }
.company__table > div {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 32px;
  padding: 24px 0; border-bottom: 1px solid var(--color-line);
}
.company__table dt { font-weight: 500; letter-spacing: .14em; color: var(--color-muted); }

/* Contact */
.contact { background: var(--color-red); color: var(--color-on-red); }
.contact__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px 88px; align-items: start; }
.contact__intro { display: flex; flex-direction: column; gap: 26px; font-size: 15px; line-height: 2.1; }
.contact__intro > p { color: var(--color-on-red-muted); }
.contact__intro .contact__title { color: var(--color-on-red); }
.contact__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.6; letter-spacing: .06em; }
.contact__direct { border-top: 1px solid rgba(255,255,255,.4); padding-top: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--color-on-red); }
.contact__tel { font-family: var(--font-mincho); font-size: 24px; font-weight: 600; letter-spacing: .08em; }

.contact__card { background: var(--color-white); color: var(--color-ink); border-radius: var(--radius-sm); padding: clamp(28px, 4vw, 56px); }
.form { display: flex; flex-direction: column; gap: 22px; font-size: 14px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field label { font-weight: 500; letter-spacing: .08em; display: flex; align-items: center; gap: 10px; }
.req, .opt { font-size: 11px; font-weight: 400; letter-spacing: .1em; }
.req { color: var(--color-red); }
.opt { color: var(--color-muted); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; color: var(--color-ink);
  background: var(--color-ivory); border: 1px solid var(--color-line); border-radius: var(--radius-sm);
  width: 100%;
  transition: border-color .25s ease, background-color .25s ease;
}
.field input, .field select { height: 52px; padding: 0 16px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field textarea { padding: 14px 16px; resize: vertical; min-height: 160px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-red); background-color: var(--color-white); }
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--color-error); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--color-red); }
.check a { text-decoration: underline; text-underline-offset: 3px; }
.check .req { margin-left: 6px; }
.form-done { text-align: center; padding: 36px 8px; font-size: 15px; line-height: 2; }
.form-done__title { font-family: var(--font-mincho); font-size: 22px; font-weight: 600; margin-bottom: 12px; }

/* Footer */
.site-footer { background: var(--color-red-dark); color: var(--color-on-red-muted); padding: 80px 0 36px; font-size: 13px; line-height: 1.9; letter-spacing: .06em; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.site-footer__info { display: flex; flex-direction: column; gap: 8px; }
.site-footer__info .logo__en { font-size: 22px; color: var(--color-white); }
.fnav ul { display: flex; flex-wrap: wrap; gap: 0 36px; }
.fnav a { display: inline-flex; align-items: center; min-height: 44px; transition: color .3s var(--ease); }
@media (hover: hover) { .fnav a:hover { color: var(--color-white); } }
.site-footer__copy { font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; border-top: 1px solid rgba(255,255,255,.18); margin-top: 56px; padding-top: 26px; }

/* =========================================================
   EVカートの導入プラン（ev.html）
   白・生成り・赤・墨色だけで、情報を区切って見せる
   ========================================================= */
.ev-features { background: var(--color-ivory); }
.ev-plans { background: var(--color-white); }
.ev-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
.ev-head .eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; }
.ev-head__title { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.5; letter-spacing: .08em; }
.ev-head__lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; font-size: 15px; color: var(--color-ink-2); }
.ev-badge {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px;
  border: 1px solid var(--color-red); color: var(--color-red);
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
}

/* 特長：3 つを横並び（スマホは縦） */
.ev-features__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-line); }
.ev-feature { padding: 36px 32px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--color-line); }
.ev-feature + .ev-feature { border-left: 1px solid var(--color-line); }
.ev-feature__num { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--color-red); }
.ev-feature__title { font-family: var(--font-mincho); font-size: 20px; font-weight: 600; letter-spacing: .06em; }
.ev-feature p { font-size: 14px; line-height: 1.9; color: var(--color-ink-2); }

/* プランのカード */
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.plan-card {
  position: relative; background: var(--color-white);
  border: 1px solid var(--color-line); border-top: 3px solid var(--color-red);
  padding: clamp(28px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 18px 40px rgba(31, 27, 27, .06);
}
.plan-card__label { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 12px; letter-spacing: .3em; color: var(--color-red); }
.plan-card__label::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.plan-card__title { font-family: var(--font-mincho); font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: .08em; margin-top: -10px; }

.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 18px 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.plan-price__label { width: 100%; font-size: 13px; color: var(--color-muted); letter-spacing: .1em; }
.plan-price__value { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4vw, 48px); line-height: 1.1; letter-spacing: .02em; }
.plan-price__unit { font-size: 12px; color: var(--color-muted); letter-spacing: .08em; margin-left: 6px; }

/* 内訳：普段は閉じておき、押すと開く */
.plan-breakdown { border: 1px solid var(--color-line); }
.plan-breakdown summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 18px; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: 500; letter-spacing: .08em;
}
.plan-breakdown summary::-webkit-details-marker { display: none; }
.plan-breakdown summary::after { content: "＋"; color: var(--color-red); font-weight: 400; transition: transform .3s var(--ease); }
.plan-breakdown[open] summary::after { transform: rotate(45deg); }
.plan-breakdown dl { padding: 4px 18px 14px; font-size: 14px; }
.plan-breakdown dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--color-line); }
.plan-breakdown dt { color: var(--color-ink-2); }
.plan-breakdown dd { font-family: var(--font-display); white-space: nowrap; }
.plan-breakdown__total dt, .plan-breakdown__total dd { font-weight: 700; color: var(--color-ink); }

/* 10 台パッケージ */
.plan-bundle { background: var(--color-red-tint); padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.plan-bundle__tag { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--color-red); }
.plan-bundle__name { font-family: var(--font-mincho); font-size: 18px; font-weight: 600; letter-spacing: .06em; }
.plan-bundle__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.plan-bundle__price s { font-family: var(--font-display); font-size: 15px; color: var(--color-muted); }
.plan-bundle__value { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 34px); font-weight: 500; color: var(--color-red); }
.plan-bundle__note { font-size: 13px; color: var(--color-ink-2); }

/* リース：1 台／10 台 */
.lease-options { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--color-line); }
.lease-option { padding: 18px 0; border-bottom: 1px solid var(--color-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: end; }
.lease-option__name { font-family: var(--font-mincho); font-size: 18px; font-weight: 600; letter-spacing: .06em; }
.lease-option__desc { grid-column: 1; font-size: 13px; color: var(--color-muted); }
.lease-option__price { grid-column: 2; grid-row: 1 / span 2; text-align: right; font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 34px); font-weight: 500; line-height: 1.2; }
.lease-option__per { font-family: var(--font-japanese); font-size: 12px; color: var(--color-muted); margin-right: 6px; }
.lease-option__price .plan-price__unit { display: block; margin-left: 0; font-family: var(--font-japanese); }
.lease-includes__title { font-size: 13px; font-weight: 700; letter-spacing: .12em; color: var(--color-red); margin-bottom: -10px; }
.lease-includes { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.lease-includes li { display: flex; gap: 12px; }
.lease-includes li::before {
  content: ""; flex: 0 0 14px; height: 7px; margin-top: 7px;
  border-left: 1.5px solid var(--color-red); border-bottom: 1.5px solid var(--color-red); transform: rotate(-45deg);
}
.lease-terms { font-size: 14px; border-top: 1px solid var(--color-line); }
.lease-terms > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.lease-terms dt { color: var(--color-muted); }

.plan-notes { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-muted); }
.plan-notes li::before { content: "※ "; }

@media (max-width: 820px) {
  .ev-features__list { grid-template-columns: minmax(0, 1fr); }
  .ev-feature { padding: 26px 4px; }
  .ev-feature + .ev-feature { border-left: 0; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .plan-card { padding: 26px 20px; }
  .ev-head__lead { font-size: 14px; }
}

/* =========================================================
   EVカートのページを上品に（ev.html）
   ========================================================= */
/* 流れる英単語を置くセクション共通 */
.has-flow { position: relative; overflow: hidden; overflow: clip; }
.has-flow > .container { position: relative; z-index: 1; }
.flow-word--plan { --flow-stroke: rgba(176, 18, 31, .1); --flow-speed: 75s; }
.flow-word--cta  { --flow-stroke: rgba(255, 255, 255, .22); --flow-speed: 60s; }
.flow-word--hero { --flow-speed: 55s; }
.detail-cta .flow-word__track span { font-size: clamp(90px, 13vw, 190px); }

/* タイトル：写真の上を GO-KART が流れる＋SCROLL の案内 */
.detail-hero > .flow-word { position: absolute; z-index: 0; top: 50%; }
.detail-hero .flow-word__track span { -webkit-text-stroke: 1.5px rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .04); }
.detail-hero > .detail-scroll {
  position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px; padding: 4px 12px;
  color: var(--color-white); font-family: var(--font-display); font-size: 10px; letter-spacing: .4em;
}
.detail-scroll i { position: relative; width: 1px; height: 46px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.detail-scroll i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--color-white);
  transform: translateY(-100%); animation: introCue 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}

/* 本文：中央寄せ＋やわらかい影 */
.detail-intro--center .detail-intro__inner { margin-inline: auto; align-items: center; text-align: center; max-width: 960px; font-size: 16px; line-height: 2.3; }
.detail-intro--center .eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; }
.detail-intro--center .detail-intro__inner > p:not(.eyebrow) {
  text-wrap: pretty;
  text-shadow: 0 1px 1px rgba(31, 27, 27, .08), 0 8px 20px rgba(31, 27, 27, .1);
}

/* 特長：大きな赤い輪郭の数字 */
.ev-feature { padding: 44px 36px; gap: 14px; }
.ev-feature__num { font-size: 60px; color: transparent; -webkit-text-stroke: 1px var(--color-red); letter-spacing: .04em; }
.ev-feature__title { font-size: 21px; }

/* 写真の帯：写真は止まったまま、文字だけが流れる */
.ev-band {
  position: relative; clip-path: inset(0); background: var(--color-black); color: var(--color-white);
  min-height: 74vh; display: flex; align-items: center;
}
.ev-band__bg { position: fixed; inset: 0; z-index: 0; }
.ev-band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; display: block; }
.ev-band__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18, 16, 16, .78) 0%, rgba(18, 16, 16, .5) 55%, rgba(18, 16, 16, .3) 100%);
}
.ev-band__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding-block: clamp(80px, 10vw, 140px); }
.ev-band__en {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 7vw, 104px); line-height: 1.05; letter-spacing: .06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .85);
}
.ev-band__text {
  font-family: var(--font-mincho); font-weight: 600; font-size: clamp(18px, 2vw, 26px); line-height: 1.8; letter-spacing: .08em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}

/* プランのカード：PC ではマウスを乗せると少し浮く */
.plan-card { transition: translate .5s var(--ease), box-shadow .5s var(--ease); }
@media (hover: hover) { .plan-card:hover { translate: 0 -6px; box-shadow: 0 30px 64px rgba(31, 27, 27, .12); } }

@media (max-width: 820px) {
  .ev-band { min-height: 64vh; }
  .ev-band__bg { position: absolute; }               /* スマホでは固定しない（かくつき防止） */
  .ev-band__bg::after { background: rgba(18, 16, 16, .6); }
  .detail-intro--center .detail-intro__inner { font-size: 15px; line-height: 2.1; }
  .detail-intro--center .detail-intro__inner > p:not(.eyebrow) { text-align: left; }   /* 狭い幅で中央寄せすると折り返しが不自然になる */
  .detail-hero > .detail-scroll { display: none; }                                    /* キャッチコピーと重なるため */
  .ev-feature { padding: 30px 4px; }
  .ev-feature__num { font-size: 48px; }
  .detail-hero .flow-word__track span { font-size: 92px; }
  .detail-hero > .flow-word { top: 30%; }
}

/* =========================================================
   専用ページ共通（ev / startup / consulting）
   ① タイトルの写真は画面に固定し、文字だけが流れる（スマホは一緒にスクロール）
   ② 余白と高さを詰めて、ページ全体を短く
   ========================================================= */
.detail-hero { clip-path: inset(0); min-height: min(68svh, 640px); }
.detail-hero__bg { position: fixed; }
.detail-hero__body { padding-top: 32px; padding-bottom: clamp(44px, 5vw, 72px); }

.detail-intro, .ev-features, .ev-plans, .detail-panels { padding-block: clamp(56px, 6.5vw, 96px); }
.ev-head { margin-bottom: clamp(28px, 3.4vw, 44px); }
.ev-feature { padding: 30px 30px; gap: 10px; }
.ev-feature__num { font-size: 52px; }
.ev-band { min-height: 0; }
.ev-band__inner { padding-block: clamp(64px, 7.5vw, 104px); gap: 18px; }
.plan-card { padding: clamp(24px, 2.8vw, 36px); gap: 18px; }
.plan-price { padding: 14px 0; }
.lease-option { padding: 14px 0; }
.plan-notes { margin-top: 18px; }
.detail-cta { padding-block: clamp(48px, 6vw, 80px); }
.detail-next__item { min-height: 88px; }

@media (max-width: 820px) {
  .detail-hero { min-height: min(62svh, 560px); }
  .detail-hero__bg { position: absolute; }        /* スマホでは固定しない（かくつき防止） */
  .detail-intro, .ev-features, .ev-plans, .detail-panels { padding-block: 52px; }
  .ev-feature { padding: 22px 4px; }
  .ev-feature__num { font-size: 42px; }
  .ev-band__inner { padding-block: 60px; }
  .plan-card { padding: 22px 18px; }
  .detail-cta { padding-block: 44px; }
  .detail-next__item { min-height: 68px; }
}

/* =========================================================
   EVカートのページ：カートの写真をページ全体の背景に固定（.page-photo）
   各セクションは背景を持たず、写真の上を文字やカードだけが流れる
   ========================================================= */
.page-photo { background: var(--color-black); color: var(--color-white); }
.page-bg {
  position: fixed; top: 0; left: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 100vh; height: 100lvh;          /* アドレスバーの伸縮で大きさが変わらないように */
}
.page-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; display: block; }
.page-bg--startup img { object-position: 28% 30%; }
.page-bg--consulting img { object-position: 50% 40%; }
.page-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 16, 16, .35) 0%, rgba(18, 16, 16, .72) 60%, rgba(18, 16, 16, .82) 100%),
    linear-gradient(90deg, rgba(18, 16, 16, .5) 0%, rgba(18, 16, 16, .15) 100%);
}

/* 各セクションは透明にして、細い線で区切る */
.page-photo .detail-hero,
.page-photo .detail-intro, .page-photo .ev-features, .page-photo .ev-band,
.page-photo .ev-plans, .page-photo .detail-panels { background: transparent; clip-path: none; }
.page-photo main > section + section { border-top: 1px solid rgba(255, 255, 255, .1); }
.page-photo .detail-hero { min-height: min(86svh, 760px); }

.page-photo .eyebrow { color: var(--color-red-light); }
.page-photo .ev-head__title,
.page-photo .detail-intro__inner > p:not(.eyebrow) { color: var(--color-white); text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.page-photo .detail-intro__inner > p:not(.eyebrow) { color: rgba(255, 255, 255, .9); }

/* 特長：半透明の暗い面に白い文字 */
.page-photo .ev-features__list { border-top: 1px solid rgba(255, 255, 255, .14); }
.page-photo .ev-feature { background: rgba(18, 16, 16, .45); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.page-photo .ev-feature + .ev-feature { border-left: 1px solid rgba(255, 255, 255, .14); }
.page-photo .ev-feature__num { -webkit-text-stroke: 1px var(--color-red-light); }
.page-photo .ev-feature__title { color: var(--color-white); }
.page-photo .ev-feature p { color: rgba(255, 255, 255, .78); }

/* 大きな一文の帯 */
.page-photo .ev-band__inner { align-items: center; text-align: center; }

/* 導入プラン：白いカードを写真の上に浮かせる */
.page-photo .flow-word--plan { --flow-stroke: rgba(255, 255, 255, .1); }
.page-photo .plan-card { box-shadow: 0 30px 70px rgba(0, 0, 0, .35); color: var(--color-ink); }
.page-photo .plan-notes { color: rgba(255, 255, 255, .7); }
.page-photo .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }   /* どの画面でも常に横並び */

/* こんな方におすすめ／当社の強み */
.page-photo .detail-panels .panel--white { color: var(--color-ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }

/* お問い合わせの帯は写真が少し透ける赤、ほかの事業へのリンクは暗い面 */
.page-photo .detail-cta { background: rgba(176, 18, 31, .86); }
.page-photo .detail-next { background: rgba(18, 16, 16, .78); border-bottom-color: rgba(255, 255, 255, .12); }
.page-photo .detail-next__item { color: var(--color-white); }
.page-photo .detail-next__item + .detail-next__item { border-color: rgba(255, 255, 255, .12); }
.page-photo .detail-next__item .num, .page-photo .detail-next__item .arrow { color: var(--color-red-light); }

/* スマホ：導入プランは横並びのまま、カードの中身を引き締める */
@media (max-width: 820px) {
  .page-photo .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-photo .plan-card { padding: 16px 12px; gap: 12px; border-top-width: 2px; }
  .page-photo .plan-card__label { font-size: 9px; letter-spacing: .2em; gap: 8px; }
  .page-photo .plan-card__title { font-size: 15px; margin-top: -6px; letter-spacing: .04em; }
  .page-photo .plan-price { padding: 10px 0; gap: 2px 6px; }
  .page-photo .plan-price__label { font-size: 10px; }
  .page-photo .plan-price__value { font-size: 20px; }
  .page-photo .plan-price__unit { font-size: 9px; margin-left: 2px; }
  .page-photo .plan-breakdown summary { min-height: 40px; padding: 0 10px; font-size: 11px; letter-spacing: .02em; }
  .page-photo .plan-breakdown dl { padding: 2px 10px 10px; font-size: 10.5px; }
  .page-photo .plan-breakdown dl > div { flex-direction: column; gap: 2px; padding: 8px 0; }
  .page-photo .plan-breakdown dd { text-align: right; }
  .page-photo .plan-bundle { padding: 12px 10px; gap: 4px; }
  .page-photo .plan-bundle__tag { font-size: 10px; letter-spacing: .06em; }
  .page-photo .plan-bundle__name { font-size: 13px; }
  .page-photo .plan-bundle__price s { font-size: 10.5px; }
  .page-photo .plan-bundle__value { font-size: 17px; }
  .page-photo .plan-bundle__note { font-size: 10px; line-height: 1.6; }
  .page-photo .lease-option { grid-template-columns: minmax(0, 1fr); padding: 10px 0; row-gap: 2px; }
  .page-photo .lease-option__name { font-size: 14px; }
  .page-photo .lease-option__desc { font-size: 10px; line-height: 1.6; }
  .page-photo .lease-option__price { grid-column: 1; grid-row: auto; text-align: left; font-size: 18px; margin-top: 4px; }
  .page-photo .lease-option__per { font-size: 9px; margin-right: 4px; }
  .page-photo .lease-includes__title { font-size: 10.5px; letter-spacing: .04em; margin-bottom: -6px; }
  .page-photo .lease-includes { font-size: 10.5px; gap: 6px; line-height: 1.6; }
  .page-photo .lease-includes li { gap: 8px; }
  .page-photo .lease-includes li::before { flex-basis: 10px; height: 5px; margin-top: 5px; }
  .page-photo .lease-terms { font-size: 10.5px; }
  .page-photo .lease-terms > div { flex-direction: column; gap: 2px; padding: 8px 0; }
  .page-photo .plan-notes { font-size: 10.5px; }
  .page-photo .ev-feature { padding: 22px 16px; }
  .page-photo .detail-hero { min-height: min(78svh, 640px); }
}

/* 導入プランのカード（ev.html）：マウスを乗せても動かない／細い額縁＋赤い角のしるしで上品に */
.page-photo .plan-card {
  transition: none;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--color-ivory) 100%);
  border: 0; border-top: 0;
  padding: clamp(32px, 3.4vw, 44px) clamp(28px, 3vw, 40px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
  outline: 1px solid rgba(255, 255, 255, .4); outline-offset: 10px;   /* カードの外に浮かぶ細い線 */
}
@media (hover: hover) {
  .page-photo .plan-card:hover { translate: none; box-shadow: 0 30px 70px rgba(0, 0, 0, .38); }
}
/* 内側の細い枠 */
.page-photo .plan-card::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(176, 18, 31, .16);
}
/* 左上と右下だけに赤い角のしるし */
.page-photo .plan-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  --c: var(--color-red);
  background:
    linear-gradient(var(--c), var(--c)) left top / 36px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 2px 36px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 36px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 2px 36px no-repeat;
}
.page-photo .plan-card > * { position: relative; z-index: 1; }
.page-photo .plan-card__label { font-size: 11px; letter-spacing: .36em; }
.page-photo .plan-card__label::after { background: rgba(176, 18, 31, .25); }
.page-photo .plan-card__title { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: .14em; }
.page-photo .plan-price { border-color: rgba(176, 18, 31, .18); }
.page-photo .plan-breakdown { border-color: rgba(31, 27, 27, .14); background: rgba(255, 255, 255, .6); }
.page-photo .plan-bundle { background: transparent; border: 1px solid rgba(176, 18, 31, .28); border-left: 2px solid var(--color-red); }
.page-photo .lease-options { border-top-color: rgba(176, 18, 31, .18); }

@media (max-width: 820px) {
  .page-photo .plan-grid { gap: 14px; }
  .page-photo .plan-card { padding: 20px 13px; outline-offset: 5px; }
  .page-photo .plan-card::before { inset: 5px; }
  .page-photo .plan-card::after { background-size: 22px 2px, 2px 22px, 22px 2px, 2px 22px; }
  .page-photo .plan-card__label { font-size: 9px; letter-spacing: .22em; }
  .page-photo .plan-card__title { font-size: 15px; letter-spacing: .06em; }
  .page-photo .plan-bundle { padding: 12px 10px; }
}

/* 導入プラン：洗練（線と色を減らし、見出しを中央にそろえて静かに見せる） */
.page-photo .ev-head--plans .ev-head__title { letter-spacing: .2em; font-weight: 500; }
.page-photo .plan-grid { gap: clamp(28px, 3.2vw, 44px); }
.page-photo .plan-card {
  background: #FBF9F5;
  padding: clamp(40px, 4vw, 56px) clamp(30px, 3.4vw, 48px);
  gap: 22px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .4);
  outline: 1px solid rgba(255, 255, 255, .28); outline-offset: 12px;
}
.page-photo .plan-card::before { inset: 10px; border-color: rgba(31, 27, 27, .07); }
.page-photo .plan-card::after {
  background:
    linear-gradient(var(--c), var(--c)) left top / 56px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px 56px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 56px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px 56px no-repeat;
}
/* 見出しは中央に：PLAN 01 → 和文タイトル → 英字 */
.page-photo .plan-card__label { justify-content: center; font-size: 11px; letter-spacing: .5em; padding-left: .5em; }
.page-photo .plan-card__label::before,
.page-photo .plan-card__label::after { content: ""; flex: 0 0 28px; height: 1px; background: rgba(176, 18, 31, .45); }
.page-photo .plan-card__title { text-align: center; font-weight: 500; font-size: clamp(24px, 2.3vw, 30px); letter-spacing: .24em; padding-left: .24em; margin-top: -4px; }
.page-photo .plan-card__en {
  text-align: center; margin-top: -16px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .6em; padding-left: .6em; color: var(--color-muted);
}
/* 価格：細い書体で中央に、¥ は小さく */
.yen { font-size: .58em; margin-right: .12em; vertical-align: .32em; }
.page-photo .plan-price { flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 26px 0; border-color: rgba(31, 27, 27, .1); }
.page-photo .plan-price__label { width: auto; font-size: 12px; letter-spacing: .2em; }
.page-photo .plan-price__value { font-weight: 400; font-size: clamp(38px, 4vw, 50px); letter-spacing: .04em; color: var(--color-ink); }
.page-photo .plan-price__unit { margin-left: 0; font-size: 11px; letter-spacing: .2em; }
/* 内訳：上下の細線だけ */
.page-photo .plan-breakdown { background: transparent; border: 0; border-bottom: 1px solid rgba(31, 27, 27, .1); }
.page-photo .plan-breakdown summary { padding: 0 2px; font-size: 13px; letter-spacing: .16em; color: var(--color-ink-2); }
.page-photo .plan-breakdown summary::after { font-size: 14px; }
.page-photo .plan-breakdown dl { padding: 0 2px 12px; font-size: 13px; }
.page-photo .plan-breakdown dl > div { border-top-color: rgba(31, 27, 27, .07); }
.page-photo .plan-breakdown dd { font-weight: 400; }
/* 10 台パッケージ：細い枠に中央寄せ */
.page-photo .plan-bundle { align-items: center; text-align: center; background: transparent; border: 1px solid rgba(176, 18, 31, .22); padding: 26px 20px 22px; gap: 6px; }
.page-photo .plan-bundle__tag { font-size: 11px; letter-spacing: .3em; padding-left: .3em; }
.page-photo .plan-bundle__name { font-weight: 500; letter-spacing: .16em; }
.page-photo .plan-bundle__price { justify-content: center; }
.page-photo .plan-bundle__price s { font-size: 13px; text-decoration-thickness: 1px; }
.page-photo .plan-bundle__value { font-weight: 400; letter-spacing: .03em; }
.page-photo .plan-bundle__note { font-size: 12px; color: var(--color-muted); letter-spacing: .06em; }
/* リース：1 台／10 台 */
.page-photo .lease-options { border-top: 1px solid rgba(31, 27, 27, .1); }
.page-photo .lease-option { padding: 20px 0; border-bottom-color: rgba(31, 27, 27, .1); }
.page-photo .lease-option__name { font-weight: 500; letter-spacing: .14em; }
.page-photo .lease-option__price { font-weight: 400; letter-spacing: .03em; color: var(--color-ink); }
.page-photo .lease-includes__title { text-align: center; font-weight: 500; font-size: 12px; letter-spacing: .3em; margin: 6px 0 -6px; }
.page-photo .lease-includes { font-size: 13px; gap: 9px; color: var(--color-ink-2); }
.page-photo .lease-includes li::before { border-width: 0 0 1px 1px; flex-basis: 11px; height: 5px; margin-top: 8px; }
.page-photo .lease-terms { font-size: 13px; border-top-color: rgba(31, 27, 27, .1); }
.page-photo .lease-terms > div { border-bottom-color: rgba(31, 27, 27, .07); }
.page-photo .plan-notes { margin-top: 36px; align-items: center; text-align: center; letter-spacing: .06em; }

@media (max-width: 820px) {
  .page-photo .plan-grid { gap: 16px; }
  .page-photo .plan-card { padding: 26px 12px 20px; gap: 14px; outline-offset: 5px; }
  .page-photo .plan-card::before { inset: 5px; }
  .page-photo .plan-card::after { background-size: 26px 1px, 1px 26px, 26px 1px, 1px 26px; }
  .page-photo .plan-card__label { font-size: 8.5px; letter-spacing: .28em; padding-left: .28em; gap: 6px; }
  .page-photo .plan-card__label::before, .page-photo .plan-card__label::after { flex-basis: 12px; }
  .page-photo .plan-card__title { font-size: 15px; letter-spacing: .1em; padding-left: .1em; margin-top: -2px; }
  .page-photo .plan-card__en { font-size: 8.5px; letter-spacing: .4em; padding-left: .4em; margin-top: -10px; }
  .page-photo .plan-price { padding: 14px 0; gap: 3px; }
  .page-photo .plan-price__label { font-size: 9.5px; letter-spacing: .08em; }
  .page-photo .plan-price__value { font-size: 21px; letter-spacing: 0; }
  .page-photo .plan-price__unit { font-size: 9px; }
  .page-photo .plan-breakdown summary { font-size: 10.5px; letter-spacing: .04em; min-height: 40px; }
  .page-photo .plan-breakdown dl { font-size: 10.5px; }
  .page-photo .plan-bundle { padding: 14px 8px 12px; gap: 3px; }
  .page-photo .plan-bundle__tag { font-size: 9px; letter-spacing: .08em; padding-left: 0; }
  .page-photo .plan-bundle__name { font-size: 13px; letter-spacing: .06em; }
  .page-photo .plan-bundle__price { flex-direction: column; align-items: center; gap: 0; }
  .page-photo .plan-bundle__price s { font-size: 10px; }
  .page-photo .plan-bundle__value { font-size: 17px; }
  .page-photo .plan-bundle__note { font-size: 9.5px; letter-spacing: 0; }
  .page-photo .lease-option { padding: 10px 0; }
  .page-photo .lease-option__name { font-size: 13.5px; letter-spacing: .06em; }
  .page-photo .lease-option__price { font-size: 18px; letter-spacing: 0; }
  .page-photo .lease-includes__title { font-size: 10px; letter-spacing: .1em; margin: 2px 0 -4px; }
  .page-photo .lease-includes { font-size: 10.5px; gap: 6px; }
  .page-photo .lease-includes li::before { flex-basis: 8px; height: 4px; margin-top: 6px; }
  .page-photo .lease-terms { font-size: 10.5px; }
  .page-photo .plan-notes { margin-top: 24px; font-size: 10px; align-items: flex-start; text-align: left; }
}

/* 専用ページを開いたとき：番号 → 英字 → タイトル → キャッチの順に、ゆっくりフェードで現れる */
@keyframes heroNumIn {
  from { opacity: 0; transform: translateY(18px); letter-spacing: .32em; }
  to   { opacity: 1; transform: none; }
}
@keyframes heroEnIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroLineIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(.45em); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 -20% 0); }
}
@keyframes heroFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFadeOnly { from { opacity: 0; } to { opacity: 1; } }

.detail-hero .svc__num > span:first-child { display: inline-block; animation: heroNumIn 1.4s cubic-bezier(.22, 1, .36, 1) .25s both; }
.detail-hero .svc__en {
  display: inline-flex; align-items: center; gap: 14px;
  animation: heroEnIn 1.2s cubic-bezier(.22, 1, .36, 1) .7s both;
}
/* 英字の前に細い赤い線がすっと伸びる */
.detail-hero .svc__en::before {
  content: ""; width: 36px; height: 1px; background: var(--color-red-light);
  transform-origin: left center; animation: heroLineIn 1s cubic-bezier(.65, 0, .35, 1) .8s both;
}
.detail-hero__title { animation: heroTitleIn 1.5s cubic-bezier(.22, 1, .36, 1) 1s both; }
.detail-hero__catch { animation: heroFade 1.4s cubic-bezier(.22, 1, .36, 1) 1.5s both; }
.detail-hero > .site-header { animation: heroFadeOnly 1.2s ease .1s both; }
.detail-hero > .flow-word { animation: heroFadeOnly 2s ease 1.8s both; }
.detail-hero > .detail-scroll { animation: heroFadeOnly 1.2s ease 2.2s both; }

@media (prefers-reduced-motion: reduce) {
  .detail-hero .svc__num > span:first-child, .detail-hero .svc__en, .detail-hero .svc__en::before,
  .detail-hero__title, .detail-hero__catch, .detail-hero > .site-header,
  .detail-hero > .flow-word, .detail-hero > .detail-scroll { animation: none; }
}

/* ---------- Opening (js/intro.js) ---------- */
.intro { display: none; }
.intro-on .intro {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: var(--color-white); color: var(--color-ink);
  transition: opacity .9s ease .35s;
}
.intro-lock body { overflow: hidden; }

.intro__stage {
  display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 4vh, 40px);
  transition: transform 1.1s cubic-bezier(.7, 0, .3, 1), opacity .9s ease;
}
.intro__mark { display: block; width: min(84vw, 1080px); height: auto; max-height: 64vh; overflow: visible; }
.intro__mark.is-tall { width: auto; height: min(58vh, 540px); max-width: 86vw; }

/* 輪郭線が描かれる文字（内側を白で塗り、線の外側半分だけ見せる） */
.intro__word {
  font-family: var(--font-display); font-weight: 500; letter-spacing: .06em;
  fill: var(--color-white); paint-order: stroke;
  stroke: var(--color-ink); stroke-width: 2.2; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
}
.intro.is-playing .intro__word {
  /* 輪郭線を描く → 描き終えた単語から墨色に染まる */
  animation:
    introDraw 2.4s cubic-bezier(.65, 0, .35, 1) forwards,
    introInk .9s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(.6s + var(--i, 0) * .3s), calc(2.3s + var(--i, 0) * .3s);   /* 最後の単語も 3.8 秒で塗り終わる */
}
@keyframes introDraw { to { stroke-dashoffset: 0; } }
@keyframes introInk { to { fill: var(--color-black); } }

/* 文字の影：同じ文字を影用に下へ敷き、墨が乗ったあとにふわっと出す */
.intro__shadow-text { font-family: var(--font-display); font-weight: 500; letter-spacing: .06em; fill: var(--color-black); }
.intro__shadow { opacity: 0; will-change: opacity; }
.intro.is-playing .intro__shadow { animation: introFade 1.2s ease 6.3s forwards; }

/* 筆の日の丸（js/intro.js が <canvas> に描く。文字の後ろに重ねる） */
.intro__stage { position: relative; }
/* 筆を叩きつけた瞬間のわずかな揺れ */
.intro__stage.is-impact .intro__mark,
.intro__stage.is-impact .intro__ink { animation: introImpact .34s cubic-bezier(.3, .7, .4, 1); }
@keyframes introImpact {
  0%   { transform: translate(0, 0); }
  18%  { transform: translate(2px, 4px); }
  40%  { transform: translate(-2px, -2px); }
  65%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}
.intro__art { position: relative; }
.intro__ink { position: absolute; z-index: 0; pointer-events: none; }
.intro__mark { position: relative; z-index: 1; }

.intro__caption {
  font-size: clamp(11px, 1.2vw, 13px); font-weight: 500; letter-spacing: .5em; padding-left: .5em;
  color: var(--color-muted);
  opacity: 0; transform: translateY(6px);
}
.intro.is-playing .intro__caption { animation: introFadeUp 1s ease 6.4s forwards; }

/* SCROLL の案内 */
.intro__cue {
  position: absolute; left: 50%; bottom: clamp(20px, 5vh, 44px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 64px; min-height: 44px; padding: 4px 12px;
  background: none; border: 0; cursor: pointer; color: var(--color-ink);
  opacity: 0;
}
.intro.is-playing .intro__cue { animation: introFade 1s ease 6.8s forwards; }
.intro__cue-text { font-family: var(--font-display); font-size: 10px; letter-spacing: .4em; padding-left: .4em; }
.intro__cue-line { position: relative; width: 1px; height: 56px; background: var(--color-line); overflow: hidden; }
.intro__cue-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: var(--color-red); transform: translateY(-100%);
  animation: introCue 2.2s cubic-bezier(.65, 0, .35, 1) infinite;
}
@media (hover: hover) { .intro__cue:hover .intro__cue-text { color: var(--color-red); } }
@keyframes introCue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@keyframes introFade { to { opacity: 1; } }
@keyframes introFadeUp { to { opacity: 1; transform: none; } }

/* 高さの低い画面（スマホ横向きなど）：案内と重ならないよう全体を小さく */
@media (max-height: 640px) {
  .intro__stage { gap: 12px; margin-bottom: 64px; }
  .intro__mark { max-height: 54vh; }
  .intro__mark.is-tall { height: 50vh; }
  .intro__cue { bottom: 10px; gap: 6px; }
  .intro__cue-line { height: 28px; }
}

/* 退場：少し上へ流れながら消え、サイトが現れる */
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro.is-leaving .intro__stage { transform: translateY(-8vh); opacity: 0; }
.intro.is-leaving .intro__cue { opacity: 0 !important; transition: opacity .4s ease; animation: none; }

/* ---------- Hero：要素がランダムな順番でフェードして浮かび上がる ----------
   要素ごとの開始時間（--d）と長さ（--dur）は js/main.js がランダムに決める */
.js .hero .flicker { opacity: 0; }
.hero__title > .flicker:not(.hero__tagline) { display: inline-block; }
.hero.is-lit .flicker {
  animation: heroFadeIn var(--dur, 1.4s) cubic-bezier(.22, .61, .36, 1) var(--d, 0s) forwards;
}
@keyframes heroFadeInLite {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------- Reveal animation ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   Privacy page
   ========================================================= */
.page-header { background: var(--color-ivory); color: var(--color-ink); border-bottom: 1px solid var(--color-line); }
.page-hero { padding-block: clamp(48px, 7vw, 96px); display: flex; flex-direction: column; gap: 16px; }
.legal { padding-block: var(--section-y); }
.legal__inner { max-width: 880px; display: flex; flex-direction: column; gap: 32px; font-size: 15px; line-height: 2.1; }
.legal__list { counter-reset: legal; display: flex; flex-direction: column; gap: 28px; }
.legal__list li { counter-increment: legal; border-top: 1px solid var(--color-line); padding-top: 24px; }
.legal__list h2 { font-family: var(--font-mincho); font-size: 19px; font-weight: 600; margin-bottom: 8px; display: flex; gap: 14px; align-items: baseline; letter-spacing: .06em; }
.legal__list h2::before { content: counter(legal, decimal-leading-zero); font-family: var(--font-display); font-size: 14px; color: var(--color-red); }
.legal__sign { text-align: right; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .flow__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .header-actions { display: flex; }
  .gnav {
    position: fixed; inset: 0; z-index: 50;
    background: var(--color-ivory); color: var(--color-ink);
    padding: calc(var(--header-h) + 24px) var(--gutter) 40px;
    overflow-y: auto;
    visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility .3s;
  }
  .gnav.is-open { visibility: visible; opacity: 1; }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 0; font-family: var(--font-mincho); font-size: 19px; font-weight: 600; }
  .gnav__list a:not(.btn) { display: flex; align-items: center; min-height: 64px; border-bottom: 1px solid var(--color-line); }
  .gnav__list a:not(.btn)::after { display: none; }
  .gnav__cta-item { margin-top: 32px; }
  .gnav__cta-item .btn { width: 100%; min-height: 56px; font-size: 15px; font-family: var(--font-japanese); }
  .logo, .header-actions { position: relative; z-index: 60; }
}

@media (max-width: 820px) {
  /* --- スマホの軽量化 ---
     ① ファーストビューの動画は固定せず一緒にスクロール（固定＋アドレスバーの伸縮による描き直しを避ける）
     ② 01〜03 の背景は position: sticky で画面に留める（fixed より描き直しが少ない。写真の切り替えはそのまま）
     ③ 文字のフェードはぼかし無しで軽く */
  .hero__bg { position: absolute; }
  .svc__bg {
    position: sticky; inset: auto; top: 0; width: 100%;
    height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh;
  }
  .hero.is-lit .flicker { animation-name: heroFadeInLite; }
  .flow-word--about .flow-word__track span { font-size: 96px; }
  .hero__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "lead" "cta";
    row-gap: 24px;
  }
  .hero__head { gap: 20px; }
  .hero__tagline { margin-top: 16px; }
  .hero__lead { font-size: 14px; }
  /* 縦長の画面では文字の下側まで暗く */
  .hero__bg::after {
    background:
      linear-gradient(180deg, rgba(18,16,16,.5) 0%, rgba(18,16,16,.6) 55%, rgba(18,16,16,.78) 100%);
  }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

  .hero__services ul { flex-direction: column; padding-inline: 0; }
  .hero__services li + li { border-top: 1px solid rgba(255,255,255,.12); }
  .hero__services a { min-height: 54px; padding-inline: var(--gutter); justify-content: flex-start; }
  .hero__services .arrow { display: inline; margin-left: auto; color: var(--color-red-light); }

  .about__inner { gap: 28px; }
  .br-sp { display: inline; }
  .about__body { font-size: 15px; line-height: 2.1; }

  .svc__main, .svc--reverse .svc__main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "media" "body";
    row-gap: 20px;
  }
  .svc__head { gap: 14px; }
  .svc__body { font-size: 14px; }
  .svc--photo { padding-block: 72px; min-height: 72svh; }
  .detail-hero { min-height: min(72svh, 640px); }
  .detail-hero__bg::after { background: linear-gradient(180deg, rgba(18,16,16,.45) 0%, rgba(18,16,16,.55) 45%, rgba(18,16,16,.8) 100%); }
  .detail-hero .site-header .btn--sm { padding: 0 14px; font-size: 12px; letter-spacing: .06em; min-height: 44px; }
  .detail-intro__inner { font-size: 15px; line-height: 2.1; }
  .detail-cta__inner { flex-direction: column; align-items: stretch; }
  .detail-cta__inner .btn { width: 100%; }
  .detail-next__inner { grid-template-columns: minmax(0, 1fr); }
  .detail-next__item { min-height: 76px; font-size: 16px; padding: 0; }
  .detail-next__item + .detail-next__item { border-left: 0; border-top: 1px solid var(--color-line); padding-left: 0; }
  .svc--photo .svc__main { justify-content: stretch; grid-template-columns: minmax(0, 1fr); }
  .svc__bg-layer--ev::after, .svc__bg-layer--startup::after { background: rgba(18,16,16,.6); }
  .svc__bg-layer--consulting::after { background: rgba(18,16,16,.66); }
  /* スマホでは流れる英単語を文字のない下の方へ置き、手前の文字と重ねない */
  .svc--photo .flow-word { top: auto; bottom: 7%; transform: none; }
  .svc--photo .flow-word__track span { font-size: 92px; }
  .svc__panels { margin-top: 20px; gap: 16px; }
  .panel { flex-basis: 100%; padding: 26px 22px; font-size: 14px; gap: 16px; }
  .panel__title { font-size: 17px; padding-bottom: 12px; }
  .num-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .message__body { gap: 22px; }
  .message__sign { font-size: 13px; }
  .message__sign span { font-size: 22px; }
  .message__text { font-size: 14px; line-height: 2.1; gap: 18px; }

  .company__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .company__table { font-size: 14px; }
  .company__table > div { grid-template-columns: minmax(0, 1fr); padding: 18px 0; }
  .company__table dt { font-size: 12px; }

  .contact__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .contact__intro { font-size: 14px; gap: 20px; }
  .contact__card { padding: 26px 18px; }
  .form { gap: 18px; }
  .form__row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }

  .site-footer { padding-top: 56px; font-size: 12px; }
  .fnav { width: 100%; }
  .fnav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .fnav a { display: flex; min-height: 48px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .site-footer__copy { border-top: 0; margin-top: 28px; padding-top: 0; font-size: 10px; }
}

@media (max-width: 600px) {
  .flow__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow__step { flex-direction: row; gap: 20px; padding: 22px 0; border-top: 1px solid var(--color-line); }
  .flow__step:first-child { border-top: 1px solid var(--color-ink); }
  .flow__step:last-child { border-bottom: 1px solid var(--color-line); }
  .flow__num { font-size: 30px; flex: 0 0 52px; }
  .flow__name { font-size: 17px; margin-bottom: 4px; }
  .flow__step p { font-size: 13px; }
}

@media (max-width: 420px) {
  .header-actions__cta { padding: 0 14px; font-size: 12px; min-height: 44px; letter-spacing: .08em; }
  .menu-btn { width: 44px; height: 44px; }
  .logo__en { font-size: 16px; letter-spacing: .1em; }
  .logo__ja { font-size: 9px; letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero .flicker { opacity: 1; }
}