/* 新テーマ the-n-2026-ver2（H-B のデザイン）: トップ
   ヒーロー、トップの各セクション、横スライド（舞台と帯）、パターンB。
   H-B の試作 demo/the-n-2026-ver2-concepts/h/h.css から分けた。読む順は base.css → front.css（トップだけ）→ motion.css。 */

/* --------------------------------------------------------------------------
   ヒーロー（縦積みの既定）
   -------------------------------------------------------------------------- */
.sequence-hero { position: relative; }
.sequence-hero__stage {
  position: relative;
  display: block;
  overflow: clip;
  isolation: isolate;
}
/* 映像の枠（縦積みでは、枠の下に文字を置く） */
.h-media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 78svh;
  width: 100%;
  overflow: clip;
  isolation: isolate;
  background: var(--h-bg); /* 乗算の合成が、この地の色と溶け合うように */
}
@media (min-width: 768px) { .h-media { aspect-ratio: 16 / 9; } }
.sequence-hero__picture,
.sequence-hero__video,
.sequence-hero__canvas,
.h-handoff-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.sequence-hero__picture img { width: 100%; height: 100%; object-fit: cover; }
.sequence-hero__video { object-fit: cover; opacity: 0; transition: opacity 0.4s linear; }
.sequence-hero__canvas,
.h-handoff-canvas { opacity: 0; }
/* 映像の層: 白を地に溶かす乗算と、魚眼レンズの四隅を消す楕円のマスク */
.sequence-hero__picture,
.sequence-hero__video,
.sequence-hero__canvas {
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
}
.h-handoff-canvas { mix-blend-mode: multiply; }
.sequence-hero__scrim { display: none; }
[data-mode="fallback"] .sequence-hero__video.is-playing,
[data-mode="mobile"] .sequence-hero__video.is-playing { opacity: 1; }
/* MP4 が再生を始めたら、下の poster（1コマ目）を隠す。どちらも乗算で重ねるので、残すと別の場面が残像のように透けて重なる
   （ゆんの指摘、スマホ、2026-09-26）。再生が止められたとき（is-playing が付かない）は poster のまま */
/* 切り替えはふわっと重ねず一度に（動画は poster と同じコマから始まるので継ぎ目は出ない。重ねると動く映像と止まった1枚が乗算で
   二重に見えた。レビュー、2026-09-27） */
.sequence-hero__picture { transition: none; }
:is([data-mode="fallback"], [data-mode="mobile"]) .h-media:has(.sequence-hero__video.is-playing) .sequence-hero__picture { opacity: 0; }

/* 映像の下の層の大きな欧文（装飾） */
/* 映像の上に重ね、darken で合成する: 白い背景の上では文字が見え、人物（文字より暗い）の上では人物が残る */
.h-hero-deco {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: darken;
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
}
.h-hero-deco__word {
  grid-area: 1 / 1;
  font-family: var(--h-font-display);
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(120px, 34vw, 520px);
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: #dcdcdc;
  opacity: 0;
}
.h-hero-deco__word:last-child { opacity: 1; }

/* HUD（四隅。DOMの親子は変えず、配置だけ） */
.sequence-hud {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  font-size: 11px;
  line-height: 1.4;
  color: var(--h-ink);
  text-transform: uppercase;
}
.sequence-hud__meta {
  position: absolute;
  top: 16px;
  right: var(--h-gutter);
  display: flex;
  gap: 16px;
}
.sequence-hud__meta span:last-child { min-width: 4ch; text-align: right; }
.sequence-hud__phases {
  position: absolute;
  left: var(--h-gutter);
  bottom: 18px;
  display: flex;
  gap: 18px;
}
.sequence-hud__phases li { display: flex; gap: 6px; opacity: 0.55; transition: opacity 0.3s var(--h-ease); }
.sequence-hud__phases li.is-active { opacity: 1; }
.sequence-hud__phases li > span:last-child { display: grid; }
.sequence-hud__phases small { font-family: var(--h-font-ja); font-size: 11px; letter-spacing: 0; text-transform: none; }
.sequence-hud__phases li.is-active .sequence-hud__phase-number::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--h-accent);
  vertical-align: 0.1em;
}
.sequence-hud__frame {
  position: absolute;
  right: var(--h-gutter);
  bottom: 18px;
  display: flex;
  gap: 6px;
}
.sequence-hud__phases li:not(.is-active) { opacity: 1; color: var(--h-muted); }
/* 映像を流す表示（スマホ・タブレット縦の mobile、失敗時の fallback）では、コマの番号と進み具合（000%）が動かず
   「FRAME 001 / 217」「000%」のまま止まって見えるので隠す。ラベル「THE N / MOTION STUDY」と段階の表示は残す（点検の追加、2026-09-26） */
:is([data-mode="mobile"], [data-mode="fallback"]) :is(.sequence-hud__frame, .sequence-hud__meta [data-progress-percent]) { display: none; }
@media (max-width: 560px) {
  .sequence-hud__frame { top: 14px; bottom: auto; left: var(--h-gutter); right: auto; }
  .sequence-hud__meta { top: 34px; }
  :is([data-mode="mobile"], [data-mode="fallback"]) .sequence-hud__meta { top: 14px; } /* 上のコマの番号を隠したので、その位置へ上げる */
  .sequence-hud__phases { flex-direction: column; gap: 2px; bottom: 14px; }
  .sequence-hud__phases li > span:last-child { display: flex; gap: 8px; }
}

/* 文字（縦積みでは、すべてを最初から表示する） */
.hero-box {
  position: relative;
  z-index: 4;
  display: grid;
  align-content: end;
  gap: 24px;
  padding: 28px var(--h-gutter) 64px;
}
.hero-box__topline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 11px;
  color: var(--h-ink);
}
/* スマホ（767px 以下）は、上端のラベル（AI × DESIGN STUDIO・TOKYO / EDOGAWA。aria-hidden の装飾）を出さず、見出しをその分上げる
   （最初の画面で h1 が見切れていた。ゆんの指示 2026-09-29） */
@media (max-width: 767px) { .hero-box__topline { display: none; } }
.hero-box__copy { display: grid; gap: 18px; max-width: 980px; }
.hero-box__title { display: grid; gap: 10px; font-weight: 700; }
.hero-box__title-context {
  font-family: var(--h-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.hero-box__catch {
  display: block;
  font-size: clamp(30px, 0.9rem + 4.6vw, 76px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  line-break: strict; /* 文節の塊（inc/v2/linebreak.php の BudouX）の境目で折り返す。keep-all は WebKit で禁則を破るので使わない */
  overflow-wrap: break-word;
}
.sequence-u-wbr { display: inline-block; }
.sequence-u-nowrap { white-space: nowrap; }
.hero-box__heading h2 {
  max-width: 44em;
  /* 上限は rem（標準の文字の大きさでは 18px で同じ。ブラウザーの文字の大きさの設定に合わせて大きくなる） */
  font-size: clamp(0.9375rem, 0.8rem + 0.4vw, 1.125rem);
  font-weight: 500;
  line-height: 1.9;
}
.hero-box__heading.heading::before { content: none; }
.hero-box__heading.heading { color: var(--h-ink); font-family: inherit; text-transform: none; letter-spacing: 0; }
.hero-box__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-box__facts li {
  padding: 4px 12px;
  border: 1px solid var(--h-ink);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.hero-box__actions { display: grid; gap: 16px; max-width: 980px; }
.hero-button--primary {
  justify-content: space-between;
  width: min(100%, 560px);
  min-height: 64px;
  padding: 0 24px;
  font-size: 0.9375rem;
}
.hero-button__arrow { font-family: var(--h-font-mono); font-weight: 400; }
.hero-box__annotation { font-size: 0.8125rem; color: var(--h-muted); }
.hero-box__services {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--h-ink);
}
.hero-button--secondary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--h-line);
  font-weight: 400;
}
.hero-button--secondary:hover { background: transparent; color: var(--h-ink); }
.hero-button__index { font-size: 0.6875rem; color: var(--h-muted); }
.hero-button__label { display: grid; gap: 2px; }
.hero-button__label small { font-size: 0.625rem; color: var(--h-muted); text-transform: uppercase; }
.hero-button__label strong { font-size: 0.9375rem; }
.hero-button__external { font-family: var(--h-font-mono); transition: transform 0.35s var(--h-ease); }
.hero-button--secondary:hover .hero-button__external { transform: translate(3px, -3px); }
@media (min-width: 900px) {
  .hero-box__services { grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
}

.sequence-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  transform: translateX(-50%);
  font-family: var(--h-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  display: none;
}
.sequence-hero__progress { display: none; }
.sequence-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   帯の各セクション（縦積みの既定）
   -------------------------------------------------------------------------- */
/* 先頭の組: 決めポーズのマスとニュース */
.h-chunk--lead { display: grid; grid-template-columns: 1fr; }
.h-cell--handoff { position: relative; aspect-ratio: 4 / 5; max-height: 80svh; overflow: clip; background: var(--h-bg); }
.h-pose {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  mix-blend-mode: multiply;
}
.site-news-bar { padding: 32px var(--h-gutter) 40px; }
.site-news-bar__inner { display: grid; gap: 12px; }
.site-news-bar__label a {
  display: inline-block;
  font-family: var(--h-font-display);
  font-weight: 700;
  font-stretch: 75%;
  font-size: clamp(56px, 2rem + 6vw, 128px);
  line-height: 0.86;
  color: var(--h-ink);
  letter-spacing: -0.02em;
}
.site-news-bar__date,
.site-news-bar__kind { font-size: 0.75rem; color: var(--h-muted); }
.site-news-bar__kind { justify-self: start; padding: 2px 10px; border: 1px solid var(--h-line); border-radius: 999px; }
.site-news-bar__entry {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  padding-top: 16px;
  border-top: 1px solid var(--h-ink);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
}
.site-news-bar__arrow { font-family: var(--h-font-mono); transition: transform 0.35s var(--h-ease); }
/* 最新の1件（固定表示）は濃い地のカードで目立たせる。残りの最大3件（.h-news-list）は、その下に1行ずつ */
.site-news-bar__inner { padding: 24px 24px 26px; background: var(--h-night); color: var(--h-night-ink); }
.site-news-bar__inner .site-news-bar__label a { color: var(--h-night-ink); }
.site-news-bar__inner .site-news-bar__date,
.site-news-bar__inner .site-news-bar__kind { color: var(--h-night-muted); }
.site-news-bar__inner .site-news-bar__kind { border-color: var(--h-night-muted); }
.site-news-bar__inner .site-news-bar__entry { border-top-color: var(--h-night-muted); }
.site-news-bar__inner :focus-visible { outline-color: var(--h-night-ink); box-shadow: 0 0 0 6px var(--h-night); }
.h-news-list { margin-top: 20px; border-top: 1px solid var(--h-ink); }
.h-news-list__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--h-line);
}
.h-news-list__item .site-news-bar__entry { grid-column: 1 / -1; padding-top: 0; border-top: 0; font-size: 0.9375rem; line-height: 1.6; }
.site-news-bar__entry:hover .site-news-bar__arrow { transform: translateX(4px); }
@media (min-width: 768px) {
  .h-chunk--lead { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .h-cell--handoff { aspect-ratio: auto; min-height: 70svh; }
  .site-news-bar { display: grid; align-content: space-between; border-left: 1px solid var(--h-line); }
}

/* コンセプト */
#concept h2 {
  font-size: clamp(28px, 1rem + 3.4vw, 64px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 18em;
}
/* 見出しと本文の間の横長の画像（inc/v2/front.php の the_n_v2_front_concept_visual。ゆんの指示 2026-09-29）。縦積みは 16:9、
   768px 以上は 21:9 の枠に、顔が真ん中に来る位置で切り抜く */
.h-concept-visual { margin-top: 28px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--h-bg-2); }
@media (min-width: 768px) { .h-concept-visual { aspect-ratio: 21 / 9; } }
.h-concept-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
#concept .lead { margin-top: 28px; max-width: 46em; font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.0625rem); line-height: 2; }
#concept .lead strong { background: linear-gradient(transparent 62%, rgb(252 77 104 / 0.28) 62%); }

/* 流れる帯（装飾） */
.h-marquee { overflow: clip; padding: 20px 0; }
.h-marquee__row { display: flex; width: max-content; animation: h-marquee 42s linear infinite; }
.h-marquee__item {
  padding: 0 0.5em;
  font-family: var(--h-font-display);
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(64px, 12vw, 180px);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--h-ink);
}
.h-marquee--concept .h-marquee__item { font-family: var(--h-font-ja); font-weight: 700; font-size: clamp(44px, 8vw, 120px); }
.h-marquee__item::after { content: "/"; margin-left: 0.5em; color: var(--h-line); -webkit-text-stroke: 0; }
@keyframes h-marquee { to { transform: translateX(-50%); } }

/* パッケージプラン */
#package-plan { display: grid; gap: 0; padding: 0; }
#package-plan > .row { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--h-line); }
#package-plan .col { padding: 32px var(--h-gutter); }
#package-plan .col:has(video) { padding: 0; min-height: 240px; background: var(--h-bg-2); }
#package-plan .package-plan-image { width: 100%; height: 100%; object-fit: cover; }
#package-plan h2 { font-size: clamp(24px, 1rem + 1.6vw, 40px); font-weight: 700; line-height: 1.3; margin: 10px 0 18px; }
#package-plan .heading p { display: inline; }
#package-plan .hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
#package-plan .hero-cta br { display: none; }
#package-plan .price { flex-basis: 100%; }
.price-inner {
  font-family: var(--h-font-display);
  font-weight: 700;
  font-stretch: 75%;
  font-size: clamp(56px, 2rem + 4vw, 104px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price-inner > span { margin-left: 8px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--h-muted); }
#package-plan ul { display: grid; gap: 4px; font-size: 0.875rem; }
#package-plan .annotation { margin-top: 12px; font-size: 0.75rem; color: var(--h-muted); }
@media (min-width: 768px) {
  #package-plan > .row { grid-template-columns: 1.1fr 0.9fr; }
  #package-plan > .row:nth-child(2) > .col:first-child { order: 2; }
}
/* 1列（スマホ）: どちらのプランも、映像をタイトルの上に出す（ゆんの指定、2026-09-26。スモールスタートは HTML で文字が先） */
@media (max-width: 767px) {
  #package-plan > .row > .col:has(video) { order: -1; }
}

/* サービスの動画タイル */
#service-image { padding: 0; }
#service-image .container,
#service-area .container { max-width: none; }
#service-image .row { display: grid; grid-template-columns: repeat(2, 1fr); }
#service-image .row > .col {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: clip;
  border-right: 1px solid var(--h-line);
  border-bottom: 1px solid var(--h-line);
  background: var(--h-bg-2);
}
#service-image .plx-parallax-wrap,
#service-image video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#service-image video { transform: scale(1.04); transition: transform 1.2s var(--h-ease); }
#service-image .col:hover video { transform: scale(1.1); }
#service-image h3 {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 2px 10px;
  background: var(--h-bg);
  font-family: var(--h-font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: 1.125rem;
  text-transform: uppercase;
}
@media (min-width: 768px) { #service-image .row { grid-template-columns: repeat(3, 1fr); } }

/* サービス */
#service-area { padding: 0; }
#service-area .service-box { padding: clamp(48px, 6vw, 96px) var(--h-gutter) 40px; }
#service-area .service-box .lead { max-width: 40em; font-size: 0.9375rem; }
#service-area .row {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--h-line);
}
#service-area .row > a.col {
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--h-bg-2);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: filter 0.6s var(--h-ease);
}
#service-area .row > a.col:hover { filter: contrast(1.08) saturate(1.1); }
#service-area .image01 { background-image: url(/wp-content/themes/the-n-2026-ver2/images/service-graphic.webp); }
#service-area .image02 { background-image: url(/wp-content/themes/the-n-2026-ver2/images/service-web.webp); }
#service-area .image03 { background-image: url(/wp-content/themes/the-n-2026-ver2/images/service-photo.webp); }
#service-area .image04 { background-image: url(/wp-content/themes/the-n-2026-ver2/images/service-drone.webp); }
#service-area .image05 { background-image: url(/wp-content/themes/the-n-2026-ver2/images/service-marketing.webp); }
#service-area .image06 { background-image: url(/wp-content/themes/the-n-2026-ver2/images/service-ai.webp); }
#service-area .row > .col:not(a) { display: grid; align-content: start; gap: 10px; padding: 24px var(--h-gutter) 32px; }
#service-area .row h3 { font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); line-height: 1.35; }
#service-area .row .text { font-size: 0.875rem; line-height: 1.9; }
#service-area .service-detail-link { margin-top: 8px; }
@media (min-width: 768px) {
  #service-area .row { grid-template-columns: 0.9fr 1.1fr; }
  #service-area .row > a.col { aspect-ratio: auto; min-height: 320px; }
}

/* WebGLの幕間 */
.h-gl { position: relative; min-height: 60svh; background: #eceef1; overflow: clip; }
.h-gl__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--h-ease); }
.h-gl.is-live .h-gl__canvas { opacity: 1; }
/* WebGL が使えないとき・読み込むまでの静止表現（透明なガラス球） */
.h-gl::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62%, 70vh);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.95) 0 6%, transparent 18%),
    radial-gradient(circle at 68% 72%, rgb(255 155 232 / 0.35), transparent 42%),
    radial-gradient(circle at 30% 70%, rgb(93 148 255 / 0.3), transparent 45%),
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.2) 55%, rgb(29 28 28 / 0.12) 70%, transparent 71%);
  box-shadow: inset 0 0 60px rgb(255 255 255 / 0.7);
  transition: opacity 1.2s var(--h-ease);
}
.h-gl.is-live::before { opacity: 0; }

/* 私たちについて・制作実績 */
#about-case-wrapper { padding: 0; }
.about-case-row { display: grid; grid-template-columns: 1fr; }
.about-case-col { padding: clamp(48px, 6vw, 96px) var(--h-gutter); }
.about-case-col + .about-case-col { border-top: 1px solid var(--h-line); }
.about-case-col .text { max-width: 34em; font-size: 0.9375rem; line-height: 2; }
.section-cta-wrap { margin-top: 28px; }
@media (min-width: 768px) {
  .about-case-row { grid-template-columns: 1fr 1fr; }
  .about-case-col + .about-case-col { border-top: 0; border-left: 1px solid var(--h-line); }
}

/* SNS */
#sns-gallery .text { max-width: 34em; font-size: 0.9375rem; }
.sns-gallery__feed { margin-top: 28px; }
/* Instagram の区画は、写真の並び（プラグインの出力）をやめ、フォローのボタンだけにした（plans/cloudflare-static-site.md の「3. 許可する差分」）。
   ボタンはサイトの共通のボタン（.btn）の形で、案内の文の下に置く */
.sns-gallery__feed--link { display: flex; }

/* コラム */
#column .text { max-width: 40em; font-size: 0.9375rem; }
/* カードの間の罫線は、各カードの外側の 1px の線（outline）で描く（格子の地の色で描くと、記事が少ないときにカードのない枠が灰色の
   大きな四角になっていた。点検の中7、2026-09-26）。線の位置と太さは今までと同じ（カードの間の 1px と、外周の 1px） */
#column .row { display: grid; grid-template-columns: 1fr; gap: 1px; margin: 28px 0; border: 1px solid transparent; }
#column .row > .col { display: grid; grid-template-rows: auto 1fr; background: var(--h-bg); outline: 1px solid var(--h-line); }
#column .news-thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* タイトルの欄は、地の色を敷いて画像の上に重ねる。画像の高さの計算がブラウザーで違い、画像が欄まで伸びても、文字の下に写真が透けない
   （ゆんの指摘、MacBook Air、2026-10-04） */
#column .col-body { position: relative; z-index: 1; display: grid; align-content: start; gap: 6px; padding: 16px 18px 22px; background: var(--h-bg); }
#column .date,
#column .column-cat { font-size: 0.6875rem; color: var(--h-muted); }
#column .column-cat { justify-self: start; }
#column .column-title { font-size: 0.9375rem; font-weight: 700; line-height: 1.6; }
#column .col-body a:hover .column-title { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) { #column .row { grid-template-columns: repeat(3, 1fr); } }

/* FAQ（縦積み: 開いた回答は質問の下） */
.faq-list { margin-top: 20px; border-top: 1px solid var(--h-ink); }
.faq-item { border-bottom: 1px solid var(--h-line); }
.faq-question {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 12px 4px;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 700;
}
.faq-label { font-size: 0.75rem; color: var(--h-muted); }
.faq-icon { font-family: var(--h-font-mono); font-weight: 400; transition: transform 0.35s var(--h-ease); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 4px 20px 38px; font-size: 0.875rem; line-height: 2; }
.faq-answer[hidden] { display: none; }
/* サービスごとの FAQ のまとまり（H-B の追加）。見出しはトップのサービス欄の見出しと同じ文言 */
.h-faq-group { margin-top: 40px; }
.h-faq-group__title { padding: 14px 4px 10px; font-size: 1rem; font-weight: 700; }
html:not(.js) .faq-answer { display: block; }


/* ==========================================================================
   横スライド（html.is-hscroll）。stage.js の初期化に成功したときだけ
   ========================================================================== */
/* ヒーローは舞台の全面に重ねる */
html.is-hscroll .sequence-hero {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* 横移動の区間でも、ヒーローの文章は隠さない（支援技術から読め、Tabで戻れる）。見た目は --h-out で退場する */
html.is-hscroll .sequence-hero__stage { height: 100%; }
html.is-hscroll .h-media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  max-height: none;
}
html.is-hscroll .sequence-hero__picture,
html.is-hscroll .sequence-hero__canvas,
html.is-hscroll .h-hero-deco { opacity: var(--h-media-opacity, 1); }
/* 動画は、MP4 を使う状態（fallback）で再生している間だけ出す。連番（desktop）では隠す: 縦積み（スマホ・低い窓・拡大した表示）で
   読み込んだ動画と poster が、PC 表示へ戻った後も canvas の下に残り、乗算で2枚の映像が残像のように重なっていた
   （ゆんの指摘、MacBook Air、2026-10-04） */
html.is-hscroll .sequence-hero__video { opacity: 0; transition: none; } /* PC 表示へ戻った瞬間に 0.4 秒かけて消えると、その間だけ重なるため一度に */
html.is-hscroll [data-mode="fallback"] .sequence-hero__video.is-playing { opacity: var(--h-media-opacity, 1); }
html.is-hscroll .is-canvas-ready .sequence-hero__canvas { opacity: var(--h-media-opacity, 1); }
html.is-hscroll .is-canvas-ready .sequence-hero__picture { opacity: 0; }
html.is-hscroll .h-handoff-canvas { z-index: 2; mix-blend-mode: normal; }
html.is-hscroll [data-h-state="handoff"] .h-media,
html.is-hscroll [data-h-state="track"] .h-media { background: transparent; }
html.is-hscroll .sequence-hud { opacity: calc(1 - var(--h-out, 0)); }

/* 大きな欧文（装飾）: 段階ごとに入れ替わる */
html.is-hscroll .h-hero-deco__word { opacity: 0; transform: scale(1.06); transition: opacity 0.9s var(--h-ease), transform 1.4s var(--h-ease); }
html.is-hscroll [data-h-phase="0"] .h-hero-deco__word:nth-child(1),
html.is-hscroll [data-h-phase="1"] .h-hero-deco__word:nth-child(2),
html.is-hscroll [data-h-phase="2"] .h-hero-deco__word:nth-child(3) { opacity: 1; transform: none; }

/* 文字の層: 映像の上に重ね、段階（data-h-cue）ごとに出す */
html.is-hscroll .hero-box {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  opacity: calc(1 - var(--h-out, 0));
}
html.is-hscroll .hero-box__topline { position: absolute; top: 16px; left: var(--h-gutter); }
html.is-hscroll .hero-box__copy,
html.is-hscroll .hero-box__title { position: static; display: block; max-width: none; }
html.is-hscroll [data-h-cue] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.7s var(--h-ease), transform 0.9s var(--h-ease), filter 0.7s var(--h-ease);
}
html.is-hscroll [data-h-cue].is-cue-on,
html.is-hscroll [data-h-cue].is-focus-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}
/* フォーカスで表示を強制するときは、切り替えの時間を置かずにすぐ見せる */
html.is-hscroll [data-h-cue].is-focus-revealed { transition: none; clip-path: inset(0 0 0 0); }
html.is-hscroll .hero-box__title-context {
  position: absolute;
  top: 44px;
  left: var(--h-gutter);
  font-size: 0.8125rem;
}
/* 見出し: 手で塞いで暗い区間に、暗い帯の上の白抜きで出す（帯は最も明るい白の上でも約10:1） */
html.is-hscroll .hero-box__catch {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  padding: clamp(18px, 3vh, 36px) var(--h-gutter);
  background: rgb(12 12 12 / 0.8);
  color: #fff;
  text-align: center;
  font-size: clamp(34px, 1rem + 4.2vw, 96px);
  line-height: 1.12;
  clip-path: inset(0 0 0 0);
}
html.is-hscroll .hero-box__catch:not(.is-cue-on):not(.is-focus-revealed) { clip-path: inset(50% 0 50% 0); }
html.is-hscroll .hero-box__catch { transition: opacity 0.5s var(--h-ease), clip-path 0.9s var(--h-ease-io), filter 0.5s var(--h-ease); transform: none; }
/* リード: 左下。映像の上でも読めるよう、地の色の面にのせる */
html.is-hscroll .hero-box__heading {
  position: absolute;
  left: var(--h-gutter);
  bottom: calc(var(--h-nav-space) + 60px);
  max-width: min(34em, 42vw);
  padding: 18px 22px;
  background: var(--h-bg);
}
html.is-hscroll .hero-box__heading h2 { font-size: clamp(0.9375rem, 0.7rem + 0.5vw, 1.1875rem); }
/* リードを2つに分けて出すパターン（build-h.php の leadSplit）: 前半と後半をそれぞれ地の色の面にのせる。
   後半は決めポーズまで透明のまま場所だけを取り、下から埋まる（前半の位置は動かない） */
.h-lead-part { display: contents; }
/* 横スライドのとき: 面もかげもなしに、白い大きな文字で映像の上に出す（人物と重なってもよい）。右の CTA の面とは違う見せ方にする。
   見やすさ（コントラスト）の基準は、ゆんの判断でこの文字だけ例外（2026-09-25）。実際のコマでの値は verify-h.mjs の lead-contrast で記録する */
html.is-hscroll .hero-box__heading:has(.h-lead-part) {
  /* 左の列のまま、画面の天地の中央に置く（ヘッダーの下から下端の進捗ナビの上まで。stage.js がリードの高さを測って --h-lead-top に入れる。
     ゆんの指定、2026-09-26。以前は右の CTA の白い箱の上端にそろえていた） */
  top: var(--h-lead-top, 30%);
  bottom: auto;
  padding: 0;
  background: none;
  max-width: min(52vw, 860px);
  color: #fff;
}
html.is-hscroll .hero-box__heading:has(.h-lead-part) h2 {
  font-size: clamp(24px, 0.9rem + 1.5vw, 42px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
/* 英語のリード（日本語より1行が長い）: 1行を1段のまま収めるため、文字の大きさの上限を見出しの枠の幅から決める
   （いちばん長い行 約23em が枠の幅 min(52vw, 860px) に入る大きさ） */
html.is-hscroll:lang(en) .hero-box__heading:has(.h-lead-part) h2 { font-size: min(clamp(24px, 0.9rem + 1.5vw, 42px), calc(min(52vw, 860px) / 23.5)); }
html.is-hscroll .h-lead-part {
  display: block;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.55), 0 2px 16px rgb(0 0 0 / 0.5);
}
html.is-hscroll .h-lead-part + .h-lead-part { margin-top: 0.5em; }
/* リードは、指定の改行のとおり1行を1段に（行の span が1行） */
html.is-hscroll .h-lead-part .sequence-u-wbr { display: block; }
/* 人物の切り抜きの層（cutout.js）: リードの文字の上に人物だけを描き、文字が人物の後ろに見えるようにする。
   重なりの順: リード（1）→ 人物の切り抜き（2）→ CTA・特徴・所在・見出しの帯・上端のラベル（3） */
.h-cutout { display: none; }
html.is-hscroll .h-cutout { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
html.is-hscroll .sequence-hero:not([data-mode="desktop"]) .h-cutout,
html.is-hscroll [data-h-stage]:not([data-h-state="video"]) .h-cutout { visibility: hidden; }
html.is-hscroll .hero-box__heading { z-index: 1; }
/* 英語のトップ: 1行が長く人物に隠れる部分が大きいので、リードを人物の切り抜きより前に出す（ゆんの判断、2026-09-26）。日本語は人物の後ろのまま */
html.is-hscroll:lang(en) .hero-box__heading { z-index: 3; }
html.is-hscroll .hero-box__actions,
html.is-hscroll .hero-box__facts,
html.is-hscroll .hero-box__title-context,
html.is-hscroll .hero-box__catch,
html.is-hscroll .hero-box__topline { z-index: 3; }
/* 決めポーズ: 右の面に、特徴・主CTA・補足・サービス3本 */
html.is-hscroll .hero-box__facts {
  position: absolute;
  top: 60px;
  right: var(--h-gutter);
  justify-content: flex-end;
  /* 1段に収める（英語の3つは日本語より長く、40vw では2段に折れて下の CTA の面に重なった。右寄せなので日本語の見た目は変わらない） */
  max-width: min(60vw, 900px);
}
html.is-hscroll .hero-box__facts li { background: var(--h-bg); }
html.is-hscroll .hero-box__actions {
  position: absolute;
  right: var(--h-gutter);
  bottom: calc(var(--h-nav-space) + 52px);
  width: min(460px, 36vw);
  max-width: none;
  gap: 12px;
  padding: 20px;
  background: var(--h-bg); /* 補助の文字（注記）も、どの映像の上でも 7:1 以上に */
}
html.is-hscroll .hero-button--primary { width: 100%; }
html.is-hscroll .hero-box__services { grid-template-columns: 1fr; }
html.is-hscroll .hero-button--secondary { min-height: 52px; }
html.is-hscroll .sequence-hud__phases,
html.is-hscroll .sequence-hud__frame { bottom: calc(var(--h-nav-space) + 6px); }
html.is-hscroll .sequence-hero__scroll { display: block; bottom: calc(var(--h-nav-space) + 6px); }
html.is-hscroll .sequence-hero__progress {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 2px;
  background: var(--h-line);
  opacity: calc(1 - var(--h-out, 0));
}
html.is-hscroll .sequence-hero__progress span { display: block; height: 100%; background: var(--h-ink); transform-origin: left; transform: scaleX(0); }

/* 決めポーズの1枚（受け渡しのマス）: 受け渡しの canvas と同じ楕円のマスク */
.h-pose {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%);
}

/* 幅1024px以上（進捗ナビを出す幅）では、帯の下に進捗ナビ専用の帯を取る。
   フォーカスした要素が、進捗ナビに少しも隠れないようにする（WCAG 2.4.12） */
@media (min-width: 1024px) {
  html.is-hscroll .site-news-bar,
  html.is-hscroll #service-area .service-box,
  html.is-hscroll .about-case-col,
  html.is-hscroll #package-plan .col:not(:has(video)) { padding-bottom: var(--h-cell-bottom); }
  html.is-hscroll .faq-answer { max-height: calc(var(--H) * 0.24); }
}

/* 先頭の組: 決めポーズ（縦長）とニュース */
html.is-hscroll .h-chunk--lead {
  display: grid;
  grid-template-columns: calc(var(--H) * 0.74) calc(var(--H) * 0.9);
}
html.is-hscroll .h-chunk--lead.h-chunk--no-news { grid-template-columns: calc(var(--H) * 1.1); }
html.is-hscroll .h-cell--handoff { aspect-ratio: auto; max-height: none; min-height: 0; height: 100%; }
html.is-hscroll .site-news-bar {
  display: grid;
  height: 100%;
  padding: 40px 36px var(--h-nav-space);
  border-left: 0;
}
html.is-hscroll .site-news-bar { align-content: stretch; }
html.is-hscroll .site-news-bar__inner {
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 12px;
  align-items: center;
}
html.is-hscroll .site-news-bar__label { grid-column: 1 / -1; }
html.is-hscroll .site-news-bar__inner .site-news-bar__date { grid-row: 2; }
html.is-hscroll .site-news-bar__inner .site-news-bar__kind { grid-row: 2; }
html.is-hscroll .site-news-bar__inner .site-news-bar__entry { grid-column: 1 / -1; grid-row: 4; align-self: end; font-size: clamp(1.125rem, calc(var(--H) * 0.036), 1.875rem); }
/* 最新の1件のカードと、残りの一覧を上下に分ける（一覧があるときだけ） */
html.is-hscroll .site-news-bar:has(.h-news-list) { grid-template-rows: minmax(0, 1fr) auto; row-gap: 12px; }
html.is-hscroll .site-news-bar:has(.h-news-list) .site-news-bar__inner { height: auto; min-height: 0; padding: calc(var(--H) * 0.026) 24px; }
html.is-hscroll .site-news-bar:has(.h-news-list) .site-news-bar__label a { font-size: calc(var(--H) * 0.08); }
html.is-hscroll .h-news-list { margin-top: 0; }
html.is-hscroll .h-news-list__item { padding: calc(var(--H) * 0.01) 0; }
html.is-hscroll .h-news-list__item .site-news-bar__entry { font-size: 0.875rem; }
/* 一覧があるときは、ニュースのマスを広げて題を1〜2行に収める（背の低い画面でも3件が入るように） */
html.is-hscroll .h-chunk--lead:has(.h-news-list) { grid-template-columns: calc(var(--H) * 0.74) calc(var(--H) * 1.2); }

/* コンセプト: 本文を段組みにして、横へ流す */
html.is-hscroll #concept { width: calc(var(--H) * 1.35); }
html.is-hscroll #concept .container { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 28px; }
/* 画像があるとき: 見出しの下に、残りの高さいっぱいで 21:9 の画像、その右に本文が同じ高さの段組みで続く（見出し → 画像 → 本文の順に
   右へ読む）。見出しと画像と本文を縦に3段に積むと、1440×900 以下では画像が細い帯になった（本文の面積がほぼ一定のため、幅を変えても
   21:9 に届かない）。画像の幅は site.js の setupConceptVisual（高さ × 21/9）、本文の幅は setupColumns が段の数に合わせて決める */
html.is-hscroll #concept:has(.h-concept-visual) { width: auto; }
html.is-hscroll #concept .container:has(> .h-concept-visual) {
  grid-template-columns: auto auto;
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: 40px;
  width: max-content;
}
html.is-hscroll #concept .container:has(> .h-concept-visual) > h2 { grid-column: 1 / -1; max-width: 13em; }
html.is-hscroll #concept .h-concept-visual { grid-column: 1; grid-row: 2; margin: 0; height: 100%; width: calc(var(--H) * 1.05); aspect-ratio: auto; }
html.is-hscroll #concept .h-concept-visual + .lead {
  grid-column: 2;
  grid-row: 2;
  height: 100%;
  columns: auto;
  column-width: 17em;
  column-fill: auto;
  align-self: stretch;
}
html.is-hscroll #concept h2 { font-size: calc(var(--H) * 0.068); align-self: start; max-width: 13em; }
html.is-hscroll #concept .lead {
  margin: 0;
  max-width: none;
  columns: 2 calc(var(--H) * 0.5);
  column-gap: 40px;
  column-rule: 1px solid var(--h-line);
  font-size: 0.9375rem;
}

/* 流れる帯 */
html.is-hscroll .h-marquee { display: flex; align-items: center; padding: 0; }
html.is-hscroll .h-marquee--concept { width: calc(var(--H) * 1.2); }
html.is-hscroll .h-marquee--services { width: calc(var(--H) * 1.1); }
html.is-hscroll .h-marquee__item { font-size: calc(var(--H) * 0.3); }
html.is-hscroll .h-marquee--concept .h-marquee__item { font-size: calc(var(--H) * 0.18); }

/* プラン: 1段に並べる（文字 → 動画 → 文字 → 動画）。背の低い画面でも、各プランが高さを全部使える */
html.is-hscroll #package-plan {
  display: flex;
  padding: 0;
}
html.is-hscroll #package-plan > .row {
  display: grid;
  grid-template-columns: calc(var(--H) * 0.8) calc(var(--H) * 0.92);
  height: 100%;
  border-bottom: 0;
}
html.is-hscroll #package-plan > .row + .row { border-left: 1px solid var(--h-line); }
html.is-hscroll #package-plan > .row:nth-child(2) > .col:first-child { order: 2; }
html.is-hscroll #package-plan .col:not(:has(video)) {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  align-content: start;
  padding: 36px 32px var(--h-nav-space);
  overflow: clip;
}
html.is-hscroll #package-plan .col:has(video) { padding: 0; min-height: 0; }
html.is-hscroll #package-plan h2 { font-size: clamp(22px, calc(var(--H) * 0.042), 36px); margin: 10px 0 0; }
html.is-hscroll #package-plan .hero-cta { align-self: center; margin: 16px 0; }
html.is-hscroll .price-inner { font-size: calc(var(--H) * 0.13); }
html.is-hscroll #package-plan ul { font-size: 0.8125rem; gap: 2px; }

/* サービスの動画タイル: 3列 × 2段 */
html.is-hscroll #service-image { width: calc(var(--H) * 1.2); padding: 0; }
html.is-hscroll #service-image .container,
html.is-hscroll #service-image .row { height: 100%; }
html.is-hscroll #service-image .row { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
html.is-hscroll #service-image .row > .col { aspect-ratio: auto; border: 0; }

/* サービス: 見出しの列 + 1段に並べたサービス（本文は切らずに全文を出す） */
html.is-hscroll #service-area { padding: 0; }
html.is-hscroll #service-area .container {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--H) * 0.76);
  height: 100%;
}
html.is-hscroll #service-area .service-box {
  width: calc(var(--H) * 0.72);
  padding: 40px 36px var(--h-nav-space);
  display: grid;
  align-content: space-between;
}
html.is-hscroll #service-area .row {
  grid-template-columns: 1fr;
  grid-template-rows: 38% 1fr;
  border-top: 0;
  min-height: 0;
}
html.is-hscroll #service-area .row > a.col { min-height: 0; order: 0; }
html.is-hscroll #service-area .row > .col:not(a) { order: 1; padding: 16px 22px; align-content: start; gap: 6px; }
html.is-hscroll #service-area .row h3 { font-size: clamp(1.125rem, calc(var(--H) * 0.03), 1.5rem); }
html.is-hscroll #service-area .row .text { font-size: 0.8125rem; line-height: 1.75; }
html.is-hscroll #service-area .row .heading { font-size: 0.6875rem; }
html.is-hscroll #service-area .service-detail-link { margin-top: 4px; }

/* WebGLの幕間 */
html.is-hscroll .h-gl { width: calc(var(--H) * 1.05); min-height: 0; }

/* 私たちについて・制作実績 */
html.is-hscroll #about-case-wrapper { padding: 0; }
html.is-hscroll .about-case-row { grid-template-columns: calc(var(--H) * 0.85) calc(var(--H) * 0.85); height: 100%; }
html.is-hscroll .about-case-col { padding: 40px 36px var(--h-nav-space); }
html.is-hscroll .about-case-col > .container { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; }
html.is-hscroll .about-case-col .text { align-self: end; }
html.is-hscroll .about-case-col .section-cta-wrap { margin-top: 24px; }
html.is-hscroll .about-case-col + .about-case-col { border-left: 0; }

/* SNS */
/* 写真の並びをやめたので、見出しの列だけの幅にし、ボタンは案内の文の下に置く */
html.is-hscroll #sns-gallery { width: calc(var(--H) * 0.62); }
html.is-hscroll #sns-gallery .container { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; height: 100%; }
html.is-hscroll .sns-gallery__feed--link { align-self: start; }

/* 見出しの列が狭いセクション（SNS・コラム）: 大見出しを列の幅に収める（画面の幅だけで決めると、はみ出して切れるため） */
html.is-hscroll #sns-gallery h2,
html.is-hscroll #column h2 { font-size: min(clamp(56px, 2rem + 7vw, 160px), calc(var(--H) * 0.135)); }

/* コラム: 見出しの列 + 2段×3列（タイトルは切らずに全文を出す。画像は残りの高さに合わせて切り抜く） */
html.is-hscroll #column .container {
  display: grid;
  grid-template-columns: calc(var(--H) * 0.5) auto;
  grid-template-rows: auto auto 1fr auto;
  column-gap: 36px;
  height: 100%;
}
html.is-hscroll #column .container > :not(.row) { grid-column: 1; }
html.is-hscroll #column .col-link { grid-row: 4; justify-self: start; }
html.is-hscroll #column .row {
  grid-column: 2;
  grid-row: 1 / span 4;
  grid-template-columns: repeat(3, calc(var(--H) * 0.56));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  margin: 0;
  height: 100%;
}
/* 記事が少ないときは列を減らす（2段の格子に 1〜2件は1列、3〜4件は2列）。カードのない列を残さない */
html.is-hscroll #column .row:not(:has(> .col:nth-child(3))) { grid-template-columns: calc(var(--H) * 0.56); }
html.is-hscroll #column .row:has(> .col:nth-child(3)):not(:has(> .col:nth-child(5))) { grid-template-columns: repeat(2, calc(var(--H) * 0.56)); }
html.is-hscroll #column .row > .col { min-height: 0; overflow: hidden; overflow: clip; grid-template-rows: minmax(0, 1fr) auto; } /* hidden は clip の効かないブラウザー向け */
html.is-hscroll #column .news-thumb { aspect-ratio: auto; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
html.is-hscroll #column .col-body { padding: 14px 16px; gap: 4px; }
html.is-hscroll #column .column-title { font-size: 0.9375rem; }

/* FAQ: 見出しの列の後に、まとまり（トップの既存の問い、サービスごとの問い）の列を横に並べる。回答はその場で開く。
   開いた回答が長いときは、回答の中だけを縦にスクロールする（site.js が、あふれたときだけ region とフォーカスを付ける） */
/* 2段: まとまりの列を上下2段に並べ、横の長さを抑える（見出しの列 + 4列）。
   背の低い画面でまとまりが段に収まらないときは、その列の中だけを縦にスクロールする（開いた問いは site.js が列の上へ寄せる） */
/* 段の高さは中身に合わせる（minmax(0, auto)。2段の合計が画面に収まるときは、どの列もスクロールしない。1675×1104 などで、
   ほかの列より少し長い列だけが 7〜15px の内側のスクロールになっていた。点検の追加、2026-09-26）。収まらないときは今までどおり
   段を分け合い、長い列の中だけを縦にスクロールする */
html.is-hscroll #faq-area .container {
  display: grid;
  grid-template-columns: calc(var(--H) * 0.45);
  grid-template-rows: repeat(2, minmax(0, auto));
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--H) * 0.56);
  column-gap: 32px;
  row-gap: 28px;
  height: 100%;
}
html.is-hscroll #faq-area .container > .heading { grid-column: 1; grid-row: 1; align-self: start; }
html.is-hscroll #faq-area .container > h2 { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-top: 32px; }
/* 列の内側に、フォーカスの枠（ボタンの外側に最大9px）が収まる余白を取る（スクロールする列の端で枠が切れないように） */
html.is-hscroll .faq-list { min-height: 0; max-height: 100%; margin: 0; padding: 12px 12px 12px; align-self: stretch; overflow-y: auto; scroll-padding-block: calc(0.875rem * 1.8 + 28px) 12px; } /* 上は、列の上端に残る分類の見出し（下）の高さ + 12px */
/* 列の中がスクロールするときは、端の内側の影で続きがあることを示す（site.js が is-scrollable / is-scrolled / is-end を付ける）。
   影は列の背景として描かれ、文字と操作部品の上には重ならない（文字を薄くしない。フォーカスを隠さない） */
html.is-hscroll .faq-list.is-scrollable:not(.is-end) { box-shadow: inset 0 -14px 12px -12px rgb(29 28 28 / 0.35); }
html.is-hscroll .faq-list.is-scrollable.is-scrolled { box-shadow: inset 0 14px 12px -12px rgb(29 28 28 / 0.35), inset 0 -14px 12px -12px rgb(29 28 28 / 0.35); }
html.is-hscroll .faq-list.is-scrollable.is-scrolled.is-end { box-shadow: inset 0 14px 12px -12px rgb(29 28 28 / 0.35); }
html.is-hscroll .h-faq-group { margin-top: 0; }
/* 列の中をスクロールしても、分類の見出しは列の上端に残す（一緒に流れて切れていた。点検の低3）。
   開いた問いは見出しの下へ寄せる（site.js）ので、見出しのある列では回答の高さの上限を見出しの高さ（16px + 1行）だけ低くし、
   開いた問いと回答が列の見えている範囲に収まるようにする（回答が長いときは、今までどおり回答の中だけを縦にスクロールする） */
html.is-hscroll .h-faq-group__title { position: sticky; top: -12px; z-index: 1; padding: 8px 4px; background: var(--h-bg); font-size: 0.875rem; }
html.is-hscroll .h-faq-group .faq-answer { max-height: calc(var(--H) * 0.24 - 0.875rem * 1.8 - 16px); }
html.is-hscroll .faq-question { min-height: 0; padding: calc(var(--H) * 0.01) 4px; font-size: 0.875rem; }
html.is-hscroll .faq-question[aria-expanded="true"] { background: var(--h-ink); color: var(--h-bg); }
html.is-hscroll .faq-question[aria-expanded="true"] .faq-label { color: var(--h-night-muted); }
html.is-hscroll .faq-answer {
  max-height: calc(var(--H) * 0.24); /* 8件の列で1件を開いても、列の最後の問いまで画面に収まる高さ */
  overflow: auto;
  padding: 12px 8px 14px 38px;
  font-size: 0.875rem;
  line-height: 1.9;
}

/* 無料診断・お問い合わせ */

/* ---------------------------------------------------------------- 進捗ナビ（下端の横向き） */
html.is-hscroll .page-progress {
  left: var(--h-gutter);
  right: var(--h-gutter);
  top: auto;
  bottom: 12px;
  transform: translateY(12px);
}
html.is-hscroll .page-progress[data-visible] { transform: none; }
html.is-hscroll .page-progress__track {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 1px;
  background: var(--h-line);
}
html.is-hscroll .page-progress__fill {
  display: block;
  height: 100%;
  background: var(--h-ink);
  transform-origin: left;
  transform: scaleX(var(--page-progress, 0));
}
html.is-hscroll .page-progress__marks { display: flex; justify-content: space-between; gap: 8px; }
html.is-hscroll .page-progress__mark {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 40px;
  padding: 6px 4px 0;
  background: var(--h-bg);
}
html.is-hscroll .page-progress__label { opacity: 1; transform: none; font-size: 10px; }

/* ==========================================================================
   パターンB（通常のレンズ、後半は暗い舞台）
   ========================================================================== */
/* 楕円のマスクをかけない（四隅が黒くない映像） */
body[data-h-mask="none"] .sequence-hero__picture,
body[data-h-mask="none"] .sequence-hero__video,
body[data-h-mask="none"] .sequence-hero__canvas,
body[data-h-mask="none"] .h-pose {
  -webkit-mask-image: none;
  mask-image: none;
}
/* 小さなラベルに地の色の面を敷く。下の映像が明るくても暗くても、7:1以上を保つ */
body[data-h-chips] .sequence-hud__meta span,
body[data-h-chips] .sequence-hud__phases li,
body[data-h-chips] .sequence-hud__frame,
body[data-h-chips] .hero-box__topline span,
body[data-h-chips] .hero-box__title-context,
body[data-h-chips] .sequence-hero__scroll {
  padding: 2px 8px;
  background: var(--h-bg);
}
body[data-h-chips] .sequence-hud__phases { gap: 6px; }
body[data-h-chips] .sequence-hud__frame { gap: 6px; }
body[data-h-chips] .hero-box__topline { gap: 6px; }
/* 暗い舞台の区間では、ラベルの面を暗くして、映像になじませる（文字は明るく、面は不透明なので 7:1 以上） */
body[data-h-chips] [data-h-scene-dark] .sequence-hud__meta span,
body[data-h-chips] [data-h-scene-dark] .sequence-hud__phases li,
body[data-h-chips] [data-h-scene-dark] .sequence-hud__frame,
body[data-h-chips] [data-h-scene-dark] .hero-box__topline span,
body[data-h-chips] [data-h-scene-dark] .sequence-hero__scroll {
  background: var(--h-night);
  color: var(--h-night-ink);
  transition: background-color 0.4s var(--h-ease), color 0.4s var(--h-ease);
}
body[data-h-chips] [data-h-scene-dark] .sequence-hud__phases li:not(.is-active) { color: var(--h-night-muted); }
body[data-h-chips] [data-h-scene-dark] .hero-box__facts li { border-color: var(--h-bg); }

/* --------------------------------------------------------------------------
   締めの区画（お問い合わせの後・フッターの前）: 背景の大きな「THANK YOU」と映像（assets/v2/js/thanks.js。ゆんの指示 2026-09-29）
   既定（縦積み）は、映像の枠だけの短い区画。横スライドのとき（html.is-hscroll。最初の描画から付く）は縦に長くなり、枠が画面に貼り付く
   （JS の読み込みを待たずに高さを決める。後から伸びると、先にページの最後へ送った人の画面でフッターが下へずれた）
   -------------------------------------------------------------------------- */
.h-thanks { position: relative; background: var(--h-bg); }
.h-thanks__stage { position: relative; overflow: clip; isolation: isolate; }
/* スマホは 4:3（16:9 の映像の中央の4分の3。歩く2人と最後の2人の顔が入る）、768px 以上は 16:9 */
.h-thanks .h-thanks__media { aspect-ratio: 4 / 3; max-height: 78svh; }
@media (min-width: 768px) { .h-thanks .h-thanks__media { aspect-ratio: 16 / 9; } }
.h-thanks__picture,
.h-thanks__video,
.h-thanks__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* 白を地に溶かす乗算だけで重ね、端はぼかさない（ヒーローと同じ。ゆんの指示 2026-09-29） */
  mix-blend-mode: multiply;
}
/* thanks.js が動き出すまで poster を描かない（横スライドの高さが決まる前は区画がすぐ下にあり、遅延読み込みでも最初に取得されていた）。
   JS が動かない・読み込めなかったときは、そのまま出す */
html.js .h-thanks:not([data-h-thanks-state]) .h-thanks__picture { display: none; }
.h-thanks__picture img { width: 100%; height: 100%; object-fit: cover; }
.h-thanks__video { object-fit: cover; opacity: 0; }
.h-thanks__canvas { opacity: 0; }
.h-thanks.is-canvas-ready .h-thanks__canvas { opacity: 1; }
.h-thanks.is-canvas-ready .h-thanks__picture { opacity: 0; }
/* MP4 が流れ始めたら poster を隠す（どちらも乗算で重ねるので、残すと二重に見える。ヒーローと同じ）。流れ終わっても最後のコマのまま */
.h-thanks:is([data-mode="fallback"], [data-mode="mobile"]) .h-thanks__video.is-playing { opacity: 1; }
.h-thanks:is([data-mode="fallback"], [data-mode="mobile"]) .h-media:has(.h-thanks__video.is-playing) .h-thanks__picture { opacity: 0; }

/* 背景の大きな文字: 映像の上に重ね、darken で合成する（白い背景の上では文字が見え、人物の上では人物が残る。ヒーローの大きな欧文と同じ） */
.h-thanks__deco {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: darken;
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
}
.h-thanks__word {
  font-family: var(--h-font-display);
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(64px, 21vw, 400px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #d4d4d4;
}

/* 横スライドのとき: 区画を縦に長くし（映像の区間）、枠をヘッダーの下に貼り付ける。進み具合 --h-thanks-p（0〜1）は thanks.js が入れる */
html.is-hscroll .h-thanks { height: 380svh; }
html.is-hscroll .h-thanks__stage {
  position: sticky;
  top: var(--h-header-h);
  height: calc(100svh - var(--h-header-h));
}
html.is-hscroll body:has(> #wpadminbar) .h-thanks__stage { top: calc(var(--h-header-h) + var(--h-adminbar, 0px)); height: calc(100svh - var(--h-header-h) - var(--h-adminbar, 0px)); }
/* 映像は枠いっぱい（下端まで。進捗ナビは映像の上に重なり、目印は地の色の面で読める。ヒーローと同じ） */
html.is-hscroll .h-thanks .h-thanks__media { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; }
/* 文字は、区間の最初の2割で少し大きい所から定位置へ収まる */
html.is-hscroll .h-thanks__word { transform: scale(calc(1.08 - 0.08 * min(1, var(--h-thanks-p, 0) * 5))); }