@charset "utf-8";

/* =========================================================
   Suzukaku USA, Inc.
   assets/css/style.css

   目次
   01. Design Tokens
   02. Reset / Base
   03. Layout (Container / Section)
   04. Typography
   05. Components (Button / Shard / Utility)
   06. Header + Navigation
   07. S01 Hero
   08. S02 Showcase Strip
   ========================================================= */


/* =========================================================
   01. Design Tokens
   値はすべて Figma Variables から取得
   ========================================================= */
:root {
  /* Color: text */
  --color-text:          #242424;  /* text/primary */
  --color-text-inverse:  #ffffff;  /* text/inverse */
  --color-text-muted:    #8e8e8e;  /* text/muted */
  --color-text-on-dark:  #cfcfcf;  /* text/on-dark-muted */

  /* Color: brand */
  --color-brand:         #0764a6;  /* surface/brand, text/brand */
  --color-accent:        #0894f6;  /* text/accent */

  /* Color: surface */
  --color-bg:            #ffffff;  /* surface/page */
  --color-bg-subtle:     #f6f6f6;  /* surface/subtle */
  --color-bg-dark:       #242424;  /* surface/dark */
  --color-bg-dark-alt:   #272727;  /* surface/dark-alt */
  --color-bg-elevated:   #363636;  /* surface/dark-elevated（装飾シェイプ） */
  --color-bg-muted:      #f9f9f9;  /* base/neutral/050 */
  --color-neutral-300:   #cfcfcf;  /* base/neutral/300 */
  --color-black:         #000000;  /* base/neutral/1000 */

  /* Color: border */
  --color-border-rule:   #707070;  /* border/rule */
  --color-border-field:  #717171;  /* border/field */

  /* Layout */
  --container: 1440px;
  --gutter: 40px;
  --header-h: 94px;

  /* Font family */
  --font-sans: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-numeral: "Oswald", var(--font-sans);
  --font-jp: "Noto Sans JP", var(--font-sans);
}

@media (max-width: 1024px) {
  :root {
    --gutter: 62px;
    --header-h: 71px;
  }
}

@media (max-width: 600px) {
  :root {
    --gutter: 20px;
    --header-h: 60px;
  }
}


/* =========================================================
   02. Reset / Base
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 2;           /* Body/Base: 16 / 32 */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* =========================================================
   03. Layout
   Figma: 1920→gutter 240 / 1440→40 / 768→62 / 375→20
   ========================================================= */
.container {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
}


/* =========================================================
   04. Typography

   Type Scaleは Figma の4 Frame に対応した4段階。
     Base        … 1920 Frame
     max-1440    … 1440 Frame（大きい文字のみ切り替え）
     max-1024    …  768 Frame
     max-600     …  375 Frame
   ========================================================= */

/* Eyebrow: 既定は大文字。Heroのみ文頭大文字なので eyebrow-sentence で打ち消す */
.eyebrow {
  font-size: 18px;
  font-weight: 600;
  line-height: calc(24 / 18);   /* Label/Eyebrow: 18 / 24 */
  text-transform: uppercase;
}

.eyebrow-sentence { text-transform: none; }
.eyebrow-on-dark  { color: var(--color-text-on-dark); }
.eyebrow-inverse  { color: var(--color-text-inverse); }

/* Section heading */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.section-title {
  font-size: 60px;
  font-weight: 800;
  line-height: calc(70 / 60);   /* Heading/H1: 60 / 70 */
}

.section-title-inverse { color: var(--color-text-inverse); }

/* 本文 */
.lead,
.body-copy {
  font-size: 16px;
  line-height: 2;               /* Body/Base: 16 / 32 */
}

.body-copy p + p { margin-top: 0; }

.body-copy-inverse { color: var(--color-text-inverse); }

.pull-quote {
  margin: 0;
  color: var(--color-brand);
  font-size: 20px;
  font-style: italic;
  font-weight: 800;
  line-height: calc(31 / 20);   /* Body/Quote: 20 / 31 */
}

@media (max-width: 1440px) {
  .section-title { font-size: 52px; line-height: calc(61 / 52); }
  .pull-quote    { font-size: 19px; line-height: calc(28 / 19); }
}

@media (max-width: 1024px) {
  .section-heading { gap: 15px; }
  .section-title   { font-size: 40px; line-height: 1.2; }
  .lead,
  .body-copy       { line-height: calc(30 / 16); }
  .pull-quote      { font-size: 19px; line-height: calc(31 / 19); }
}

@media (max-width: 600px) {
  .eyebrow         { font-size: 14px; line-height: calc(24 / 14); }
  .section-heading { gap: 14px; }
  .section-title   { font-size: 20px; line-height: 1.4; }
  .lead,
  .body-copy       { font-size: 12px; line-height: calc(20 / 12); }
  .pull-quote      { font-size: 14px; line-height: calc(24 / 14); }
}


/* =========================================================
   05. Components
   ========================================================= */

/* Shard: 装飾および写真の平行四辺形。
   Figma上の全シェイプが同一傾斜（水平オフセット = 高さ × 0.47363）。
   --ar にアスペクト比を渡せば、傾斜オフセット --o が自動で決まる。
   傾斜角そのものを変える場合は下の 47.363% だけを修正すればよい。 */
.shard {
  --ar: 1.9091;                        /* 366.89 / 192.18 */
  --o: calc(47.363% / var(--ar));
  display: block;
  aspect-ratio: var(--ar);
  clip-path: polygon(var(--o) 0, 100% 0, calc(100% - var(--o)) 100%, 0 100%);
  background: var(--color-bg-elevated);
}

.shard > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Slant: 片側だけ傾斜した台形。傾斜係数は .shard と共通。
   支給写真（S04 Heritage / S06 Trading）は形状が画像側に焼き込まれており、
   下辺が全幅で揃うため、アスペクト比を変えても画像の斜線とCSSの斜線が一致する。 */
.slant-left,
.slant-right {
  --o: calc(47.363% / var(--ar));
  display: block;
  aspect-ratio: var(--ar);
}

.slant-left  { clip-path: polygon(var(--o) 0, 100% 0, 100% 100%, 0 100%); }
.slant-right { clip-path: polygon(0 0, calc(100% - var(--o)) 0, 100% 100%, 0 100%); }

.slant-left > img,
.slant-right > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}

/* Button */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px 12px 17px;
  font-size: 16px;
  line-height: 1;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.button-outline {
  border: 1px solid var(--color-text-inverse);
  color: var(--color-text-inverse);
}

.button-outline:hover,
.button-outline:focus-visible {
  background: var(--color-text-inverse);
  color: var(--color-black);
}

@media (max-width: 600px) {
  .button {
    padding: 8px 11px;
    font-size: 12px;
  }
}

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--color-bg);
  color: var(--color-text);
  transform: translateY(-120%);
}

.skip-link:focus {
  transform: translateY(0);
}


/* =========================================================
   06. Header + Navigation
   Figma: Deco / Header bar は opacity 0（背景は完全透明）
   ========================================================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  height: var(--header-h);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - (var(--gutter) * 2), var(--container));
  height: 100%;
  margin-inline: auto;
}

.header-logo img {
  width: 244px;
  height: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 56px;
}

.nav-list a {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-inverse);
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.nav-list a:hover { color: var(--color-text-on-dark); }

/* Hamburger（Mobileのみ） */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
}

.nav-toggle-bar {
  display: block;
  width: 25px;
  height: 2px;
  background: var(--color-text-inverse);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 1440px) {
  .nav-list { gap: 40px; }
}

@media (max-width: 1024px) {
  .header-logo img { width: 200px; }
  .nav-list { gap: 24px; }
  .nav-list a { font-size: 15px; }
}

@media (max-width: 600px) {
  .header-logo img { width: 163px; }

  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--color-black);
    transform: scaleY(0);
    transform-origin: top;
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0.2s ease;
  }

  .nav.is-open {
    transform: scaleY(1);
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 24px;
  }

  .nav-list a {
    display: block;
    padding: 14px 0;
  }

  /* Hamburger → Close */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}


/* =========================================================
   07. S01 Hero
   Figma: 1920 h726 / 1440 h640 / 768 h707 / 375 h494（背景 #000）
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 134px;
  padding-bottom: 55px;
  background: var(--color-black);
  color: var(--color-text-inverse);
}

.hero-inner {
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 803px;
}

/* Headline: 1920→107/120、1440→80/90 を線形補間 */
.hero-title {
  font-size: clamp(80px, calc(5.625vw - 1px), 107px);
  font-weight: 800;
  line-height: 1.125;
}

.hero-title span { display: block; }

/* Figma: Heading Block内のgapは 1920→0 / 768→8 / 375→4 */
.hero-heading .hero-title { margin-top: 0; }

.hero-subcopy {
  max-width: 750px;
  font-size: 18px;
  line-height: calc(30 / 18);   /* Body/Large: 18 / 30 */
}

/* --- Hero Collage（Desktop: 871 x 628 の2次元コラージュ） --- */
.collage {
  position: absolute;
  top: 3.8vw;
  right: -0.5%;
  width: 45.4%;
  aspect-ratio: 871 / 628;
  pointer-events: none;
}

.collage > * {
  position: absolute;
  width: var(--w);
  left: var(--x);
  top: var(--y);
}

.collage-photo-handlebars { --x: 48.69%; --y: 0.07%;  --w: 42.12%; }
.collage-photo-carrier    { --x: 16.42%; --y: 34.71%; --w: 42.12%; }
.collage-photo-bumper     { --x: 52.24%; --y: 34.71%; --w: 42.12%; }
.collage-photo-tubes      { --x: 22.17%; --y: 69.43%; --w: 42.12%; }
.collage-tile             { --x: 57.87%; --y: 69.43%; --w: 42.12%; }
.collage-shard-bl         { --x: 26.17%; --y: 11.66%; --w: 26.18%; }
.collage-shard-lg         { --x: -0.01%; --y: 80.57%; --w: 26.18%; }
.collage-shard-md         { --x:  7.23%; --y: 34.47%; --w: 16.65%; }
.collage-shard-sm         { --x:  4.33%; --y: 23.80%; --w:  9.64%; }
.collage-shard-xs         { --x:  1.92%; --y: 17.66%; --w:  4.82%; }

@media (max-width: 1024px) {
  .hero {
    display: flex;
    flex-direction: column;
    padding-top: 116px;
    padding-bottom: 120px;
  }

  .hero-content { gap: 20px; }

  .hero-title {
    font-size: clamp(38px, 7.03vw, 60px);
    line-height: calc(67 / 54);
  }

  .hero-title span { display: inline; }

  .hero-heading .hero-title { margin-top: 8px; }

  .hero-subcopy { max-width: 644px; }

  /* Collage は横1列のバンドへ変化（821 x 146 相当） */
  .collage {
    position: static;
    width: 106.9%;
    margin-left: 0.52%;
    margin-top: 12px;
    aspect-ratio: 821 / 146;
  }

  .collage-photo-handlebars { --x:  4.87%; --y: 0; --w: 33.74%; }
  .collage-photo-carrier    { --x: 32.27%; --y: 0; --w: 33.74%; }
  .collage-photo-bumper     { --x: 59.68%; --y: 0; --w: 33.74%; }
  .collage-shard-sm         { --x:  3.69%; --y: 0; --w:  7.72%; }
  .collage-shard-xs         { --x:  0;     --y: 0; --w:  3.86%; }
  .collage-shard-md         { --x: 86.75%; --y: 60.65%; --w: 13.34%; }

  .collage-photo-tubes,
  .collage-tile,
  .collage-shard-lg,
  .collage-shard-bl { display: none; }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 86px;
    padding-bottom: 95px;
  }

  .hero-content { gap: 5px; }

  .hero-title {
    font-size: clamp(22px, 6.93vw, 30px);
    line-height: calc(35 / 26);
  }

  .hero-heading .hero-title { margin-top: 4px; }

  .hero-subcopy {
    max-width: 335px;
    font-size: 12px;
    line-height: calc(20 / 12);
  }

  /* 437 x 148 相当 */
  .collage {
    width: 116.5%;
    margin-left: -7.73%;
    margin-top: 13px;
    aspect-ratio: 437 / 148;
  }

  .collage-photo-handlebars { --x:  0.1%;  --y: 41.12%; --w: 38.05%; }
  .collage-photo-carrier    { --x: 31%;    --y: 41.12%; --w: 38.05%; }
  .collage-photo-bumper     { --x: 61.9%;  --y: 41.12%; --w: 38.05%; }
  .collage-shard-sm         { --x: 72.88%; --y: 0; --w: 13.04%; }
  .collage-shard-xs         { --x: 88.33%; --y: 0; --w:  6.52%; }
  .collage-shard-md         { display: none; }
}


/* =========================================================
   08. S02 Showcase Strip
   Desktop: 背景 #000 / Tablet以下: 背景 #fff
   大判2枚は下方向（Desktop）または上方向（Tablet以下）へ食み出す
   ========================================================= */
.strip {
  position: relative;
  z-index: 2;
  height: 224px;
  background: var(--color-black);
  overflow-x: clip;
  overflow-y: visible;
}

.strip-track {
  position: relative;
  height: 100%;
}

.strip-track > * {
  position: absolute;
  width: var(--w);
  left: var(--x);
  top: var(--y);
}

.strip-photo-jetski  { --x: -11.61vw; --y: -7px;    --w: 38.65vw; }
.strip-photo-buggy   { --x:  18.49vw; --y: -7px;    --w: 38.65vw; }
.strip-photo-weld    { --x:  53.42vw; --y: 1.77px;  --w: 19.11vw; }
.strip-photo-laser   { --x:  69.25vw; --y: 1.77px;  --w: 19.11vw; }
.strip-shard-right   { --x:  86.97vw; --y: 1.77px;  --w: 10.84vw; }
.strip-shard-corner  { --x:  94.76vw; --y: 112px;   --w:  4.375vw; }

@media (max-width: 1024px) {
  .strip {
    height: 111px;
    background: var(--color-bg);
  }

  .strip-photo-jetski { --x: -7.98vw;  --y: -109.9px; --w: 54.5vw; }
  .strip-photo-buggy  { --x: 36.28vw;  --y: -107.7px; --w: 54.5vw; }

  .strip-photo-weld,
  .strip-photo-laser,
  .strip-shard-right,
  .strip-shard-corner { display: none; }
}

@media (max-width: 600px) {
  .strip { height: 53px; }

  .strip-photo-jetski { --x: -5.84vw;  --y: -87.24px; --w: 66.99vw; }
  .strip-photo-buggy  { --x: 47.23vw;  --y: -85.95px; --w: 66.99vw; }
}


/* =========================================================
   09. S03 About
   Desktop: 写真を左へ食み出し、テキストはContainer右寄せ
   Tablet以下: 写真が上、テキストが下の縦積み
   ========================================================= */
.about {
  position: relative;
  overflow: hidden;
  padding-top: 68px;
  padding-bottom: 59px;
  background: var(--color-bg);
}

.about-photo {
  --ar: 2.1481;                      /* 1174.93 / 547.34 */
  position: absolute;
  left: -14.27vw;
  top: 9.11vw;
  width: 61.2vw;
}

.about-inner {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 681px;
  max-width: 100%;
}

/* Mobileのみ表示される装飾 */
.about-media > * { position: absolute; }
.about-shard-left,
.about-shard-right { display: none; }

@media (max-width: 1024px) {
  .about {
    padding-top: 354px;
    padding-bottom: 45px;
  }

  .about-photo {
    left: -9.375vw;
    top: 13px;
    width: 86.33vw;
  }

  .about-inner { justify-content: flex-start; }

  .about-content {
    gap: 12px;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .about {
    padding-top: 214px;
    padding-bottom: 38px;
  }

  .about-photo {
    left: -7.73vw;
    top: 0;
    width: 106.13vw;
  }

  .about-content { gap: 13px; }

  .about-shard-left {
    display: block;
    left: -14.93vw;
    top: -1px;
    width: 27.47vw;
  }

  .about-shard-right {
    display: block;
    left: 78.13vw;
    top: 151px;
    width: 17.6vw;
  }
}


/* =========================================================
   10. S04 Heritage
   背景はBrand Blue。右側に傾斜した写真パネル、背面にSKマークの透かし。
   Narrative（左）とStats（右）の2カラム。
   ========================================================= */
.heritage {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
}

/* 写真パネル: 黒地の上に写真を68%で重ねて沈ませる */
.heritage-media {
  --ar: 1.1477;                      /* 支給画像 1305 x 1137 */
  position: absolute;
  top: 0;
  right: 0;
  width: 45.31vw;
  margin: 0;
  background: var(--color-black);
}

/* 支給画像はアルファ68%が焼き込み済み。背面の黒と合成して沈んだ見た目になる。
   CSS側でopacityを重ねないこと。 */

/* 支給SVGに opacity="0.09" が含まれているため、CSS側で不透明度を重ねない */
.heritage-watermark {
  position: absolute;
  left: 0.57vw;
  top: 130px;
  width: 27.6vw;
  height: auto;
}

.heritage-inner {
  display: flex;
  gap: 62px;
  position: relative;
  padding-left: 156px;
  padding-right: 105px;
}

.heritage-narrative {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1 1 auto;
  padding-top: 170px;
}

.stats {
  flex: 0 0 402px;
  padding-top: 129px;
}

.stat { color: var(--color-text-inverse); }

.stat-value {
  font-size: 90px;
  font-weight: 600;
  line-height: calc(120 / 90);   /* Stat/Number: 90 / 120 */
}

.stat-label {
  font-size: 16px;
  font-weight: 600;
  line-height: calc(22 / 16);
  text-transform: uppercase;
}

.stat-desc {
  font-size: 18px;
  line-height: calc(25 / 18);
}

@media (max-width: 1440px) {
  .stat-value { font-size: 70px; line-height: calc(94 / 70); }
}

@media (max-width: 1024px) {
  .heritage-media {
    top: 286px;
    width: 59.77vw;
  }

  .heritage-watermark {
    left: 55.6vw;
    top: 186px;
    width: 36.33vw;
  }

  .heritage-inner {
    flex-direction: column;
    gap: 8px;
    padding: 45px 0 53px;
  }

  .heritage-narrative {
    gap: 3px;
    padding-top: 0;
  }

  .stats {
    flex: 0 0 auto;
    padding-top: 0;
  }

  /* Value と Label を横並びにし、Description を下段へ */
  .stat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    column-gap: 12px;
  }

  .stat-value { grid-area: 1 / 1; font-size: 70px; line-height: calc(120 / 70); }
  .stat-label { grid-area: 1 / 2; }
  .stat-desc  { grid-area: 2 / 1 / 2 / -1; font-weight: 500; }
}

@media (max-width: 600px) {
  .heritage-media {
    top: 456px;
    width: 81.6vw;
  }

  .heritage-watermark {
    left: -4.8vw;
    top: 489px;
    width: 55.73vw;
  }

  .heritage-inner {
    gap: 0;
    padding: 36px 0 196px;
  }

  .heritage-narrative { gap: 16px; }

  .stat-value { font-size: 60px; line-height: 1.65; }
  .stat-label { font-size: 14px; line-height: calc(19 / 14); }
  .stat-desc  { font-size: 14px; line-height: calc(19 / 14); }
}


/* =========================================================
   11. S05 Manufacturing
   Desktop: 左に暗色パネル、右にContainer右寄せのCapability List
   Tablet以下: 1カラム。Listは全幅へ食み出し、選択行の下に
              Feature Imageが現れる
   ========================================================= */
.manufacturing {
  position: relative;
  overflow: hidden;
  padding-bottom: 62px;
  background: var(--color-bg-muted);
}

.manufacturing-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 42.29vw;
  height: 100%;
  background: var(--color-bg-dark);
}

.manufacturing-inner {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.manufacturing-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 818px;
  max-width: 100%;
  padding-top: 115px;
}

/* --- Capability List --- */
.capability-row {
  display: grid;
  grid-template-columns: 138px 48px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  position: relative;
  width: 100%;
  min-height: 151px;
  padding: 0 0 0 7px;
  text-align: left;
  border-top: 1px solid var(--color-border-rule);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.capability:last-child .capability-row {
  border-bottom: 1px solid var(--color-border-rule);
}

.capability.is-active .capability-row {
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

/* 選択行の暗色を左の暗色パネルまで62px延長する（Figma: Deco / Active row bleed） */
.capability.is-active .capability-row::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0;
  bottom: 0;
  width: 62px;
  background: var(--color-bg-dark);
}

.capability-thumb {
  grid-area: 1 / 1 / 3 / 2;
  width: 138px;
  height: 137px;
  background: var(--color-neutral-300);
}

.capability-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capability-index {
  grid-area: 1 / 2 / 3 / 3;
  padding-right: 7px;
  font-family: var(--font-numeral);
  font-size: 46px;
  font-weight: 500;
  line-height: 60px;
}

.capability-title {
  grid-area: 1 / 3 / 2 / 4;
  font-size: 30px;
  font-weight: 700;
  line-height: 60px;
}

.capability-desc {
  grid-area: 2 / 3 / 3 / 4;
  font-size: 14px;
  line-height: calc(20 / 14);
}

/* Feature Imageは Tablet以下でのみ表示（Figma準拠） */
.capability-feature { display: none; }

@media (max-width: 1024px) {
  .manufacturing { padding-bottom: 35px; }

  .manufacturing-content {
    gap: 26px;
    width: 100%;
    padding-top: 43px;
  }

  .manufacturing-panel { display: none; }

  /* Listのみ画面全幅へ */
  .capabilities { margin-inline: calc(var(--gutter) * -1); }

  .capability-row {
    column-gap: 16px;
    min-height: 153px;
    padding: 0 22px 0 20px;
  }

  .capability.is-active .capability-row::before { display: none; }

  .capability.is-active .capability-feature {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 24px 20px 34px;
    background: var(--color-bg-dark);
  }

  .capability-feature img {
    width: 398px;
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 600px) {
  .manufacturing { padding-bottom: 23px; }

  .manufacturing-content {
    gap: 10px;
    padding-top: 36px;
  }

  .capability-row {
    grid-template-columns: 100px auto minmax(0, 1fr);
    column-gap: 13px;
    align-items: start;
    min-height: 119px;
    padding: 10px 18px 9px 20px;
  }

  .capability-thumb {
    width: 100px;
    height: 100px;
  }

  .capability-index {
    grid-area: 1 / 2 / 2 / 3;
    font-size: 26px;
  }

  .capability-title { font-size: 18px; }

  .capability-desc {
    grid-area: 2 / 2 / 3 / 4;
    font-size: 12px;
    line-height: calc(15 / 12);
  }

  .capability.is-active .capability-feature { padding: 11px 19px 12px; }
  .capability-feature img { width: 337px; }
}


/* =========================================================
   12. S06 Trading
   左上に傾斜した写真パネル（差し替え待ちのPlaceholder）、
   本文は右寄せ、下部にValue Cardを4枚。
   ========================================================= */
.trading {
  position: relative;
  overflow: hidden;
  padding-bottom: 52px;
  background: var(--color-bg);
}

.trading-media {
  --ar: 1.1479;                      /* 支給画像 1692 x 1474 */
  position: absolute;
  left: 0;
  top: 0;
  width: 44.06vw;
  margin: 0;
}

/* 支給画像はアルファ91%が焼き込み済み。CSS側でopacityを重ねないこと。 */

.trading-media-note {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 21.39%;
  top: 47.49%;
  width: 46.1%;
  color: var(--color-text-inverse);
  text-align: center;
}

.trading-media-title {
  font-family: var(--font-jp);
  font-size: 64px;
  font-weight: 700;
  line-height: 54px;
}

.trading-media-caption {
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 500;
  line-height: 54px;
}

.trading-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 27px;
  position: relative;
  padding-top: 97px;
}

.trading-intro > * {
  width: 100%;
  max-width: 797px;
}

.trading-intro .section-heading { max-width: 677px; }

.trading-tagline {
  color: var(--color-brand);
  font-size: 35px;
  font-style: italic;
  font-weight: 700;
  line-height: calc(54 / 35);
}

/* --- Value Cards --- */
.value-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 23px 24px;
  position: relative;
  margin-top: 48px;
}

.value-card {
  --ar: 4.1429;                      /* 696 / 168 */
  display: flex;
  align-items: center;
  gap: 80px;
  padding-left: 85px;
  background: var(--color-bg-subtle);
}

.value-card-icon {
  flex: 0 0 121px;
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 700;
  line-height: 54px;
}

.value-card-copy {
  display: flex;
  flex-direction: column;
  max-width: 410px;
}

.value-card-title {
  color: var(--color-brand);
  font-size: 26px;
  font-weight: 700;
  line-height: 60px;
}

.value-card-desc {
  font-size: 15px;
  line-height: calc(26 / 15);
}

@media (max-width: 1024px) {
  .trading { padding-bottom: 61px; }

  .trading-media {
    --ar: 1.9152;                    /* Figma 768 x 401 */
    width: 100%;
  }

  .trading-media-note {
    left: 0;
    top: 59.35%;
    width: 100%;
  }

  .trading-intro {
    align-items: stretch;
    gap: 15px;
    padding-top: 430px;
  }

  .trading-intro > *,
  .trading-intro .section-heading { max-width: none; }

  .trading-tagline { font-size: 30px; line-height: calc(54 / 30); }

  .value-cards {
    gap: 20px;
    margin-top: 44px;
  }

  .value-card {
    --ar: 1.0433;                    /* 313 / 300 */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 40px 18px 25px;
  }

  .value-card-icon {
    flex: 0 0 auto;
    text-align: center;
  }

  .value-card-copy {
    gap: 11px;
    padding-top: 54px;
    max-width: none;
  }

  .value-card-title { font-size: 18px; line-height: calc(28 / 18); }
  .value-card-desc  { font-size: 14px; line-height: calc(22 / 14); }
}

@media (max-width: 600px) {
  .trading { padding-bottom: 31px; }

  .trading-media { --ar: 1.3380; }   /* Figma 384 x 287 */

  .trading-media-note { top: 37.63%; }
  .trading-media-title { font-size: 50px; }
  .trading-media-caption { font-size: 16px; }

  .trading-intro {
    gap: 5px;
    padding-top: 314px;
  }

  .trading-tagline { font-size: 18px; line-height: 3; }

  .value-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    margin-top: 3px;
  }

  .value-card {
    --ar: 3.0917;                    /* 337 / 109 */
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    padding: 9px 14px 0 23px;
  }

  .value-card-icon {
    flex: 0 0 54px;
    padding-top: 23px;
    font-size: 18px;
    line-height: calc(26 / 18);
    text-align: left;
  }

  .value-card-copy {
    gap: 1px;
    padding-top: 0;
  }

  .value-card-title { font-size: 16px; line-height: calc(28 / 16); }
  .value-card-desc  { font-size: 12px; line-height: calc(15 / 12); }
}


/* =========================================================
   13. S07 Development
   全面暗色。4つのStageを横並び（Tablet以下は縦積み）。
   背後の矢印は装飾のため擬似要素で描画する。
   ========================================================= */
.development {
  position: relative;
  padding-bottom: 147px;
  background: var(--color-bg-dark);
  overflow: hidden;
}

.development-intro {
  display: flex;
  flex-direction: column;
  gap: 41px;
  padding-top: 120px;
}

.development-stages {
  position: relative;
  padding-top: 70px;
}

.stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.stage {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Stage間をつなぐ装飾矢印。Figma上は opacity 0.54 */
.stage::before,
.stage + .stage::after {
  content: "";
  position: absolute;
  opacity: 0.54;
  pointer-events: none;
  z-index: -1;
}

.stage::before {
  left: 0;
  top: 249px;
  width: 21.17vw;
  aspect-ratio: 5.208;
  background: url(../icons/stage-arrow.svg) no-repeat left top / contain;
}

.stage + .stage::after {
  top: 273.93px;
  width: 2.4vw;
  aspect-ratio: 1.951;
  background: url(../icons/stage-chevron.svg) no-repeat left top / contain;
}

.stage:nth-child(2)::before { left: -1.12vw; }
.stage:nth-child(3)::before { left: -2.24vw; }
.stage:nth-child(4)::before { left: -3.36vw; }
.stage:nth-child(2)::after  { left: -1.04vw; }
.stage:nth-child(3)::after  { left: -2.08vw; }
.stage:nth-child(4)::after  { left: -3.18vw; }

.stage-label {
  color: var(--color-accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 60px;
  text-transform: uppercase;
}

.stage-title {
  color: var(--color-text-inverse);
  font-size: 24px;
  font-weight: 700;
  line-height: calc(30 / 24);
}

.stage-desc {
  margin-top: 14px;
  color: var(--color-text-inverse);
  font-size: 14px;
  line-height: calc(24 / 14);
}

.stage-icon {
  margin: 22px auto 0;
  width: auto;
  height: auto;
}

.development-closing { padding-top: 95px; }

.development-closing-text {
  color: var(--color-text-inverse);
  font-size: 40px;
  font-weight: 700;
  line-height: calc(54 / 40);
}

@media (max-width: 1440px) {
  .development-closing-text { font-size: 34px; }
}

@media (max-width: 1024px) {
  .development { padding-bottom: 36px; }

  .development-intro {
    gap: 26px;
    padding-top: 72px;
  }

  .development-stages { padding-top: 31px; }

  .stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .stage {
    min-height: 188px;
    padding-right: 40vw;      /* 右側にIconと矢印のスペースを確保 */
  }

  .stage-desc { margin-top: 6px; }

  .stage-icon {
    position: absolute;
    left: 58.6vw;
    top: 61px;
    margin: 0;
  }

  .stage::before,
  .stage:nth-child(2)::before,
  .stage:nth-child(3)::before,
  .stage:nth-child(4)::before {
    left: 44.92vw;
    top: 89px;
    width: 52.93vw;
  }

  .stage + .stage::after,
  .stage:nth-child(2)::after,
  .stage:nth-child(3)::after,
  .stage:nth-child(4)::after {
    left: 67.97vw;
    top: 8px;
    width: 6.77vw;
  }

  .development-closing { padding-top: 64px; }
  .development-closing-text { font-size: 40px; }
}

@media (max-width: 600px) {
  .development { padding-bottom: 27px; }

  .development-intro {
    gap: 13px;
    padding-top: 34px;
  }

  .development-stages { padding-top: 5px; }

  .stage {
    min-height: 178px;
    padding-right: 44vw;
  }

  .stage-label { font-size: 16px; }
  .stage-title { font-size: 20px; line-height: calc(26 / 20); }

  .stage-desc {
    margin-top: 5px;
    font-size: 12px;
    line-height: calc(18 / 12);
  }

  .stage-icon {
    left: 59.2vw;
    top: 111px;
    max-width: 18vw;
  }

  .stage::before,
  .stage:nth-child(2)::before,
  .stage:nth-child(3)::before,
  .stage:nth-child(4)::before {
    left: 41.33vw;
    top: 141px;
    width: 53.94vw;
  }

  .stage + .stage::after,
  .stage:nth-child(2)::after,
  .stage:nth-child(3)::after,
  .stage:nth-child(4)::after {
    left: 64vw;
    top: 40px;
    width: 8.72vw;
  }

  .development-closing {
    padding-top: 35px;
    text-align: center;
  }

  .development-closing-text { font-size: 20px; line-height: calc(28 / 20); }
}


/* =========================================================
   14. S08 Global Network
   中央寄せの見出し、背面に世界地図、下部に拠点カード3枚。
   Tablet以下では地図が縮小し、Mobileでカードは横並びの1列へ。
   ========================================================= */
.global {
  position: relative;
  overflow: hidden;
  padding-top: 138px;
  padding-bottom: 87px;
  background: var(--color-bg);
}

.global-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  position: relative;
  z-index: 1;
  text-align: center;
}

.global-title { color: var(--color-brand); }

.global-lead { max-width: 715px; }

/* --- Map --- */
.global-map {
  position: relative;
  width: 74.9vw;
  margin: 18px auto 0;
  aspect-ratio: 1438 / 760;         /* 支給 world-map.svg と同一 */
}

/* 支給SVGは淡いグレー（#cfcfcf）と上端のフェードが描画済みのため、
   CSS側で不透明度を下げない。 */
.global-map-base {
  width: 100%;
  height: auto;
}

.map-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  color: var(--color-brand);
  font-size: 22px;
  font-weight: 700;
  line-height: calc(54 / 22);
  text-transform: uppercase;
  white-space: nowrap;
}

.map-pin-icon {
  width: 1.18em;
  height: auto;
}

.map-pin-japan   { left: 41.10%; top: 17.50%; }
.map-pin-vietnam { left: 34.00%; top: 24.08%; }
.map-pin-usa     { left: 63.14%; top: 25.79%; }

/* --- Location Cards --- */
.locations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  max-width: 1146px;
  margin: 0 auto;
  padding-top: 61px;
}

.location { padding: 12px 13px 4px 15px; }

.location-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 334 / 148;
  object-fit: cover;
}

.location-name {
  color: var(--color-brand);
  font-size: 22px;
  font-weight: 700;
  line-height: calc(54 / 22);
}

.location-address {
  font-size: 15px;
  font-weight: 600;
  line-height: calc(21 / 15);
}

.location-website {
  color: var(--color-brand);
  font-size: 15px;
  font-weight: 600;
  line-height: calc(21 / 15);
}

.location-website a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .global {
    padding-top: 54px;
    padding-bottom: 77px;
  }

  .global-intro { gap: 18px; }

  .global-map {
    width: 94.79vw;
    margin-top: 44px;
  }

  .map-pin { font-size: 18px; line-height: calc(39 / 18); }

  .locations {
    gap: 10px;
    max-width: none;
    padding-top: 7px;
  }

  .location { padding: 12px 10px 6px; }

  .location-photo { aspect-ratio: 216 / 140; }
  .location-name    { font-size: 15px; line-height: calc(54 / 15); }
  .location-address { font-size: 13px; line-height: calc(19 / 13); }
}

@media (max-width: 600px) {
  .global {
    padding-top: 30px;
    padding-bottom: 33px;
  }

  .global-intro {
    align-items: flex-start;
    gap: 9px;
    text-align: left;
  }

  .global-map {
    width: 89.87vw;
    margin: 24px auto 0;
  }

  .map-pin { font-size: 12px; line-height: calc(15 / 12); }

  /* 写真左・テキスト右の横並びへ */
  .locations {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-top: 16px;
  }

  .location {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    column-gap: 11px;
    padding: 9px 0 0 12px;
  }

  .location-photo {
    grid-row: 1 / 4;
    height: 82px;
    aspect-ratio: auto;
  }

  .location-name    { line-height: calc(30 / 15); }
  .location-address { font-size: 11px; line-height: calc(14 / 11); }
  .location-website { font-size: 13px; }
}


/* =========================================================
   15. S09 Contact + Footer
   暗色背景。Desktopは左に会社情報、右にForm。
   Tablet以下はForm→会社情報の順に縦積み。
   ========================================================= */
.contact {
  position: relative;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.contact-inner {
  display: flex;
  gap: 277px;
  padding-top: 61px;
  padding-bottom: 40px;
}

/* --- 会社情報 --- */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 46px;
  flex: 0 0 482px;
  padding-top: 45px;
}

.contact-logo {
  width: 343px;
  height: auto;
  margin-bottom: 41px;
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-label {
  color: var(--color-accent);
  font-size: 16px;
  font-weight: 700;
  line-height: calc(24 / 16);
  text-transform: uppercase;
}

.info-value {
  font-size: 15px;
  line-height: calc(24 / 15);
}

.info-value strong { font-weight: 600; }

/* --- Form --- */
.contact-form-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 0 0 681px;
  max-width: 100%;
}

.contact-title {
  max-width: 638px;
  margin-bottom: 12px;
}

.contact-lead {
  max-width: 633px;
  color: var(--color-text-on-dark);
  font-size: 15px;
  line-height: calc(28 / 15);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.field { margin: 0; }

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 8px 18px;
  background: var(--color-bg-dark-alt);
  border: 1px solid var(--color-border-field);
  border-radius: 0;
  color: var(--color-text-inverse);
  font-family: inherit;
  font-size: 15px;
  line-height: calc(28 / 15);
}

.field input,
.field select { height: 44px; }

.field textarea {
  height: 115px;
  resize: vertical;
}

.field ::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Selectは既定の矢印を消し、Chevronを背景として描く */
.field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M7 12 1.5 6.5 2.9 5.1 7 9.2l4.1-4.1 1.4 1.4z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 17px;
}

.field select:invalid { color: var(--color-text-muted); }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--color-accent); }

.field-invalid input,
.field-invalid select,
.field-invalid textarea { border-color: #e20045; }

/* Success / Error 表示 */
.form-status {
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--color-border-field);
  font-size: 15px;
  line-height: calc(24 / 15);
}

.form-status.is-success {
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.form-status.is-error {
  border-color: #e20045;
  color: var(--color-text-inverse);
}

.form-actions {
  margin: 5px 0 0;
}

.button-primary {
  gap: 14px;
  padding: 13px 16px 13px 25px;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.button-primary:hover,
.button-primary:focus-visible { background: var(--color-accent); }

.button-icon {
  width: 14px;
  height: 17px;
  transform: rotate(-90deg);
}

/* --- Back to top --- */
.back-to-top {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 21px;
  top: -11px;
  width: 49px;
  height: 49px;
  background: var(--color-brand);
  color: var(--color-text-inverse);
  transition: background-color 0.2s ease;
}

.back-to-top svg { width: 21px; height: auto; }

.back-to-top:hover,
.back-to-top:focus-visible { background: var(--color-accent); }

/* --- Footer --- */
.footer {
  padding-top: 14px;
  padding-bottom: 14px;
  background: var(--color-bg-dark);
  border-top: 1px solid var(--color-border-rule);
  color: var(--color-text-inverse);
}

.footer-copyright {
  font-size: 14px;
  line-height: calc(24 / 14);
  text-align: right;
}

@media (max-width: 1024px) {
  .contact-inner {
    flex-direction: column;
    gap: 0;
    padding-top: 44px;
    padding-bottom: 12px;
  }

  /* Figma: Tablet以下は Form が先、会社情報が後 */
  .contact-form-column {
    order: 1;
    flex: 0 0 auto;
  }

  .contact-info {
    order: 2;
    flex: 0 0 auto;
    gap: 21px;
    padding-top: 40px;
  }

  .contact-logo { margin-bottom: -6px; }

  /* Location と Parent Company を左、Markets Served を右へ */
  .contact-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 26px;
  }

  .contact-logo { grid-column: 1 / -1; }
  .info-block:nth-of-type(3) { grid-column: 2; grid-row: 2 / 4; }

  .contact-title { margin-bottom: 9px; font-size: 36px; }

  .back-to-top { display: flex; }
}

@media (max-width: 600px) {
  .contact-inner {
    padding-top: 32px;
    padding-bottom: 19px;
  }

  .contact-info {
    column-gap: 0;
    padding-top: 41px;
  }

  .contact-logo { width: 241px; margin-bottom: -8px; }

  .info-block { gap: 6px; }
  .info-label { font-size: 14px; line-height: calc(20 / 14); }
  .info-value { font-size: 12px; line-height: calc(20 / 12); }

  .contact-title { margin-bottom: 10px; font-size: 20px; }
  .contact-lead  { font-size: 12px; line-height: calc(20 / 12); }

  .contact-form { gap: 10px; }

  /* 姓名も縦積みへ */
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .field input,
  .field select,
  .field textarea {
    padding: 7px 14px 5px;
    font-size: 13px;
  }

  .field input,
  .field select { height: 40px; }

  .field select { background-position: right 14px center; }

  .button-primary {
    padding: 14px 19px 15px 21px;
    font-size: 12px;
  }

  .back-to-top { right: 6px; top: auto; bottom: 355px; }

  .footer {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .footer-copyright { font-size: 10px; }
}


/* =========================================================
   16. Animation

   Figma上に明示的な指定がないため、控えめに留めている。
   使用するのは opacity と transform のみ（レイアウトを再計算させない）。
   外部Animation Libraryは使用しない。

   - Hero: 読み込み時のCSS Animation（JS不要）
   - それ以降: 画面に入ったタイミングでのフェードイン（main.jsの03節）
   ========================================================= */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Hero ---
   CSS Animationのみで完結させ、JSが動かなくても内容が消えないようにする。
   fill-mode: both のため、Animationを無効化しても最終状態が残る。 */
.hero-heading,
.hero-subcopy,
.hero-content .button {
  animation: rise-in 0.7s ease both;
}

.hero-heading         { animation-delay: 0.05s; }
.hero-subcopy         { animation-delay: 0.18s; }
.hero-content .button { animation-delay: 0.30s; }

.collage { animation: fade-in 1s ease both 0.35s; }

/* --- Scroll Reveal ---
   初期状態を隠すのは .js が付いているときだけ。
   .js は head 内の1行で付与しており、JSが無効な環境では
   [data-reveal] は通常表示のまま何も起こらない。 */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 同じ親に並ぶ要素（Stats / Capability / Card / Stage / Location など）を
   少しずつ遅らせる。個別のクラス指定は不要。 */
.js [data-reveal]:nth-child(2).is-visible { transition-delay: 0.08s; }
.js [data-reveal]:nth-child(3).is-visible { transition-delay: 0.16s; }
.js [data-reveal]:nth-child(4).is-visible { transition-delay: 0.24s; }

/* Animationを望まない設定では、隠した状態を必ず解除する */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}