/* =============================================================
   unfinished 合同会社 — コーポレートサイト
   ・フォント: Helvetica系 + Hiragino Sans + YakuHanJP
   ・細字 / 白黒交互 / 全画面写真 / パララックス / せり上がりフェード
   ============================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html {
  font-size: 62.5%;            /* 1rem = 10px */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1,h2,h3,h4,p,ul,figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Tokens ---------- */
:root {
  --c-white:#ffffff; --c-black:#000000;
  --c-text:#222222; --c-sub:#666666; --c-muted:#8a8a8a;
  --c-line:#e2e2e2; --c-line-dark:rgba(255,255,255,.16);
  --c-bg-soft:#f5f6f7;

  /* 参考サイトと同系: 欧文=Helvetica(Neue Haas風), 和文=Hiragino + 約物半角 */
  --font-en:"Helvetica Neue","Helvetica","Inter",Arial,sans-serif;
  --font-jp:"YakuHanJP","Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;

  --header-h:72px;
  --padding-inline:24px;
  --section-pad:96px;
  --max-width:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (min-width:769px){
  :root{ --header-h:84px; --padding-inline:56px; --section-pad:160px; }
}

/* ---------- Type helpers ---------- */
.en{ font-family:var(--font-en); }
.t-jp{ font-family:var(--font-jp); font-weight:700; letter-spacing:.01em; }

/* ---------- Steps (FLOW) ---------- */
.steps{ display:grid; gap:1px; background:var(--c-line); border-block:1px solid var(--c-line); margin-top:36px; }
@media (min-width:769px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ background:var(--c-white); padding:56px 0; }
@media (min-width:769px){ .step{ padding:64px 44px; } .step:first-child{ padding-left:0; } }
.step__no{ font-family:var(--font-en); font-size:1.2rem; font-weight:500; letter-spacing:.16em; color:var(--c-muted); }
.step__title{ font-family:var(--font-en); font-size:2.4rem; font-weight:600; letter-spacing:-.02em; margin-top:14px; }
.step__jp{ font-size:1.6rem; color:var(--c-text); margin-top:4px; }
.step__desc{ margin-top:14px; color:var(--c-sub); line-height:2; font-size:1.45rem; }
.section--dark .steps{ background:var(--c-line-dark); border-color:var(--c-line-dark); }
.section--dark .step{ background:var(--c-black); }
.section--dark .step__title{ color:#fff; }
.section--dark .step__desc{ color:rgba(255,255,255,.7); }
.label{
  font-family:var(--font-en);
  font-size:1.2rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-muted);
}
.lead{ font-size:1.6rem; line-height:2.1; color:var(--c-sub); }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--max-width); margin-inline:auto; padding-inline:var(--padding-inline); }
.container--wide{ max-width:none; padding-inline:var(--padding-inline); }
.section{ padding-block:var(--section-pad); }
.section--dark{ background:var(--c-black); color:var(--c-white); }
.section--soft{ background:var(--c-bg-soft); }
.section--dark .label{ color:rgba(255,255,255,.5); }
.section--dark .lead{ color:rgba(255,255,255,.7); }

.hr{ height:1px; background:var(--c-line); border:0; margin-block:var(--section-pad); }

/* =============================================================
   Header  (mix-blend-mode で背景に応じ反転)
   ============================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  color:var(--c-white); mix-blend-mode:difference;
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); padding-inline:var(--padding-inline);
}
.header__logo{ display:inline-flex; align-items:center; font-family:var(--font-en); font-size:1.7rem; font-weight:700; letter-spacing:-.02em; }
.header__logo-img{ height:26px; width:auto; display:block; }
@media (min-width:769px){ .header__logo-img{ height:32px; } }
.header__nav{ display:none; }
.header__right{ display:flex; align-items:center; gap:20px; }
.header__lang{ font-family:var(--font-en); font-size:1.2rem; letter-spacing:.06em; display:none; }
.header__lang b{ font-weight:600; }
.header__lang span{ opacity:.45; }

@media (min-width:981px){
  .header__nav{ display:flex; gap:30px; align-items:center; }
  .header__nav a{
    font-family:var(--font-en); font-size:1.3rem; font-weight:400;
    letter-spacing:.02em; position:relative; padding-block:4px; opacity:.9;
    transition:opacity .3s var(--ease);
  }
  .header__nav a::after{
    content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
    background:currentColor; transform:scaleX(0); transform-origin:left;
    transition:transform .35s var(--ease);
  }
  .header__nav a:hover{ opacity:1; }
  .header__nav a:hover::after,
  .header__nav a[aria-current="page"]::after{ transform:scaleX(1); }
  .header__lang{ display:inline-flex; gap:8px; }
}

.header__menu-btn{
  display:inline-flex; flex-direction:column; justify-content:center; gap:6px;
  width:40px; height:40px; padding:0; background:none; border:none;
  color:inherit; /* ヘッダーの白を継承。button既定の黒を上書きし、ロゴと同じblend挙動にする */
}
.header__menu-btn span{
  display:block; width:26px; height:1.5px; background:currentColor; margin-inline:auto;
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
@media (min-width:981px){ .header__menu-btn{ display:none; } }

body.menu-open .header{ mix-blend-mode:normal; color:var(--c-white); }
body.menu-open .header__menu-btn span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
body.menu-open .header__menu-btn span:nth-child(2){ opacity:0; }
body.menu-open .header__menu-btn span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:900; background:var(--c-black); color:var(--c-white);
  display:flex; flex-direction:column; justify-content:center; padding:var(--padding-inline);
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s .4s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
.mobile-menu__nav{ display:flex; flex-direction:column; gap:6px; }
.mobile-menu__nav a{
  font-family:var(--font-en); font-size:3.6rem; font-weight:500; letter-spacing:-.02em;
  line-height:1.35; opacity:0; transform:translateY(18px);
}
body.menu-open .mobile-menu__nav a{ animation:menuIn .5s var(--ease) forwards; }
body.menu-open .mobile-menu__nav a:nth-child(1){ animation-delay:.06s; }
body.menu-open .mobile-menu__nav a:nth-child(2){ animation-delay:.12s; }
body.menu-open .mobile-menu__nav a:nth-child(3){ animation-delay:.18s; }
body.menu-open .mobile-menu__nav a:nth-child(4){ animation-delay:.24s; }
body.menu-open .mobile-menu__nav a:nth-child(5){ animation-delay:.30s; }
body.menu-open .mobile-menu__nav a:nth-child(6){ animation-delay:.36s; }
.mobile-menu__foot{ margin-top:48px; font-size:1.2rem; color:rgba(255,255,255,.5); }
@keyframes menuIn{ to{ opacity:1; transform:translateY(0); } }

/* =============================================================
   Buttons  (ピル + ↗)
   ============================================================= */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 26px; font-family:var(--font-en); font-size:1.4rem; font-weight:400;
  letter-spacing:0; line-height:1; border:1px solid var(--c-black);
  border-radius:40px; background:var(--c-black); color:var(--c-white);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.btn__arrow{ font-size:1.3rem; transition:transform .3s var(--ease); }
.btn:hover .btn__arrow{ transform:translate(3px,-3px); }
.btn--ghost{ background:transparent; color:var(--c-black); }
.btn--ghost:hover{ background:var(--c-black); color:var(--c-white); }
.btn--light{ background:var(--c-white); color:var(--c-black); border-color:var(--c-white); }
.btn--outline-light{ background:transparent; color:var(--c-white); border-color:rgba(255,255,255,.5); }
.btn--outline-light:hover{ background:var(--c-white); color:var(--c-black); }
.btn-center{ display:flex; justify-content:center; margin-top:64px; }

/* =============================================================
   Hero (video — 参考サイト同様のロゴループ動画)
   ============================================================= */
.hero--video{
  background:#fff; color:#111;
}
.hero--video .hero__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:contain; background:#fff;
}
.hero--video .hero__scroll{ color:rgba(0,0,0,.55); }
.hero--video .hero__copyright{ color:rgba(0,0,0,.4); }

/* ambient: 淡色ブルーム背景 + ダークテキスト */
.hero--ambient .hero__video{ object-fit:cover; }
.hero--ambient .hero__eyebrow{ color:rgba(0,0,0,.45); }
.hero--ambient .hero__title{ color:#1a1a1a; }
.hero--ambient .hero__title em{ color:rgba(26,26,26,.42); }
.hero--ambient .hero__copy{ color:rgba(0,0,0,.62); }

/* =============================================================
   Hero (CSS motion)
   ============================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; background:#050505; color:var(--c-white);
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg::before,.hero__bg::after{
  content:""; position:absolute; border-radius:50%; filter:blur(90px); opacity:.5;
}
.hero__bg::before{
  width:55vw; height:55vw; top:-10%; left:-10%;
  background:radial-gradient(circle at 30% 30%,#3a3a3a,transparent 70%);
  animation:drift1 20s ease-in-out infinite alternate;
}
.hero__bg::after{
  width:50vw; height:50vw; bottom:-15%; right:-5%;
  background:radial-gradient(circle at 70% 70%,#262626,transparent 70%);
  animation:drift2 24s ease-in-out infinite alternate;
}
@keyframes drift1{ to{ transform:translate(12%,10%) scale(1.15);} }
@keyframes drift2{ to{ transform:translate(-10%,-12%) scale(1.1);} }
.hero__grid{
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(circle at 50% 45%,#000 30%,transparent 85%);
}
.hero__inner{ position:relative; z-index:2; width:100%; }
.hero__eyebrow{
  font-family:var(--font-en); font-size:1.3rem; font-weight:400; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:26px; overflow:hidden;
}
.hero__eyebrow span{ display:inline-block; }
.hero__title{
  font-family:var(--font-en); font-weight:500;
  font-size:clamp(5.2rem,13vw,14rem); line-height:.98; letter-spacing:-.03em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line span{ display:inline-block; }
.hero__title em{ font-style:italic; font-weight:300; color:rgba(255,255,255,.6); }
.hero__copy{
  margin-top:34px; max-width:540px; font-size:1.5rem; line-height:2.1; color:rgba(255,255,255,.72);
}
.hero__eyebrow span,.hero__title .line span,.hero__copy{
  transform:translateY(110%); opacity:0; animation:rise .95s var(--ease) forwards;
}
.hero__title .line:nth-child(1) span{ animation-delay:.18s; }
.hero__title .line:nth-child(2) span{ animation-delay:.30s; }
.hero__title .line:nth-child(3) span{ animation-delay:.42s; }
.hero__eyebrow span{ animation-delay:.06s; }
.hero__copy{ transform:translateY(30px); animation-delay:.66s; }
@keyframes rise{ to{ transform:translateY(0); opacity:1; } }
.hero__scroll{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-en); font-size:1rem; letter-spacing:.2em; color:rgba(255,255,255,.6);
}
.hero__scroll svg{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
.hero__copyright{
  position:absolute; left:var(--padding-inline); bottom:24px; z-index:2;
  font-family:var(--font-en); font-size:1.1rem; color:rgba(255,255,255,.45);
}

/* =============================================================
   Concept intro (左揃え・大きく・細字)
   ============================================================= */
.concept{ }
.concept__en{
  font-family:var(--font-en); font-weight:400;
  font-size:clamp(2.6rem,4.4vw,5.2rem); line-height:1.32; letter-spacing:-.02em;
  max-width:20ch;
}
@media (min-width:769px){ .concept__en{ max-width:none; } }
.concept__jp{
  margin-top:36px; font-size:1.4rem; line-height:2.2; color:var(--c-sub); max-width:760px;
}

/* =============================================================
   Full-bleed photo section (原則 / Team / Recruit)
   ============================================================= */
.fullbleed{
  position:relative; min-height:92svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:var(--c-white); text-align:center;
}
.fullbleed__img{
  position:absolute; inset:-12% 0; z-index:0; width:100%; height:124%;
  object-fit:cover; will-change:transform;
}
.fullbleed::after{ content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.34) 100%); }
.fullbleed__inner{ position:relative; z-index:2; padding:var(--padding-inline);
  text-shadow:0 1px 24px rgba(0,0,0,.45); }
.fullbleed__eyebrow{
  font-family:var(--font-en); font-size:1.2rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:20px;
}
.fullbleed__title{
  font-family:var(--font-en); font-weight:500; font-size:clamp(3.6rem,6vw,6.4rem);
  line-height:1.1; letter-spacing:-.02em;
}
.fullbleed__sub{ margin-top:16px; font-size:1.4rem; color:rgba(255,255,255,.85); }
.fullbleed__actions{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }

/* =============================================================
   Section heading row (見出しを左に)
   ============================================================= */
.head-title{
  font-family:var(--font-en); font-weight:600;
  font-size:clamp(2.8rem,4vw,4rem); line-height:1; letter-spacing:-.02em;
}
.section--dark .head-title{ color:#fff; }

/* =============================================================
   Expertise / Service list  (見出し左 + 番号|罫線|タイトル)
   ============================================================= */
.xlayout{ display:grid; gap:40px; }
@media (min-width:861px){ .xlayout{ grid-template-columns:220px 1fr; gap:48px; } }
.xlist{ border-top:1px solid var(--c-line-dark); }
.xitem{
  border-bottom:1px solid var(--c-line-dark); padding-block:36px;
  display:grid; gap:16px; align-items:start;
}
@media (min-width:769px){
  .xitem{ grid-template-columns:64px 1fr 1.1fr; gap:40px; }
}
.xitem__no{ font-family:var(--font-en); font-size:1.6rem; font-weight:400; color:rgba(255,255,255,.5); padding-top:6px; }
.xitem__en{ font-family:var(--font-en); font-size:clamp(2.4rem,3.4vw,3.4rem); font-weight:500; line-height:1.1; letter-spacing:-.02em; }
.xitem__jp{ font-size:1.4rem; color:rgba(255,255,255,.65); margin-top:10px; }
.xitem__desc{ color:rgba(255,255,255,.7); line-height:2; margin-bottom:20px; font-size:1.45rem; }
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tag{
  font-family:var(--font-en); font-size:1.2rem; letter-spacing:.01em;
  padding:8px 15px; border:1px solid rgba(255,255,255,.28); border-radius:40px; color:rgba(255,255,255,.85);
}

/* =============================================================
   Works grid (縦長カード / 名称中央下オーバーレイ)
   ============================================================= */
.works-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:48px;
}
@media (min-width:640px){ .works-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:980px){ .works-grid{ grid-template-columns:repeat(5,1fr); gap:20px; } }
.work-card{
  position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
  background:#111; display:block;
}
.work-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease); will-change:transform;
}
.work-card:hover img{ transform:scale(1.06); }
.work-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0) 35%,rgba(0,0,0,.58)); }
.work-card__name{
  position:absolute; z-index:2; left:0; right:0; bottom:22px; text-align:center;
  font-family:var(--font-en); font-size:1.4rem; font-weight:500; letter-spacing:.02em;
  color:#fff; text-transform:uppercase; text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* =============================================================
   Collage (Home approach — 傾いた写真グリッド)
   ============================================================= */
.collage{
  position:relative; overflow:hidden; background:var(--c-black); padding-block:120px;
}
.collage__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  transform:rotate(-4deg) scale(1.12); opacity:.85;
}
.collage__grid img{ width:100%; height:100%; object-fit:cover; border-radius:6px; aspect-ratio:4/3; }
.collage__title{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-weight:500; font-size:clamp(3.2rem,6vw,6rem);
  letter-spacing:-.02em; color:#fff; text-align:center; padding:var(--padding-inline);
}

/* =============================================================
   代表メッセージ (Message)
   ============================================================= */
.message{ display:grid; gap:36px; align-items:start; }
@media (min-width:769px){ .message{ grid-template-columns:0.85fr 1.15fr; gap:64px; } }
.message__figure{ margin:0; }
.message__portrait{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 25%; border-radius:10px; background:#e9eaec; display:block; }
.message__cap{ margin-top:12px; font-family:var(--font-en); font-size:1.2rem; letter-spacing:.04em; color:var(--c-muted); }
.message__lead{
  font-family:var(--font-jp); font-weight:700;
  font-size:clamp(2.6rem,5vw,5rem); line-height:1.3; letter-spacing:.01em;
  color:var(--c-text); margin:0 0 44px;
}
.message__body p{ font-size:1.55rem; line-height:2.15; color:var(--c-sub); margin-bottom:1.4em; }
.message__sign{ margin-top:28px; font-size:1.4rem; color:var(--c-text); }
.message__sign span{ color:var(--c-muted); margin-right:10px; }
.message__sign strong{ font-weight:600; font-size:1.8rem; letter-spacing:.04em; }

/* =============================================================
   Company info
   ============================================================= */
.info{ border-top:1px solid var(--c-line); }
.info__row{ display:grid; gap:4px 24px; padding-block:26px; border-bottom:1px solid var(--c-line); }
@media (min-width:769px){ .info__row{ grid-template-columns:220px 1fr; align-items:baseline; } }
.info__key{ font-family:var(--font-en); font-size:1.2rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--c-muted); }
.info__val{ font-size:1.7rem; color:var(--c-text); font-weight:400; }
.info__val small{ display:block; font-size:1.35rem; color:var(--c-sub); margin-top:4px; }

/* =============================================================
   Contact form
   ============================================================= */
.contact-grid{ display:grid; gap:56px; }
@media (min-width:861px){ .contact-grid{ grid-template-columns:.85fr 1.15fr; gap:80px; } }
.contact-aside__mail{
  font-family:var(--font-en); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:400;
  letter-spacing:-.01em; border-bottom:1px solid var(--c-line); padding-bottom:6px;
}
.contact-aside__note{ margin-top:24px; color:var(--c-sub); line-height:2; font-size:1.4rem; }
.form{ display:grid; gap:26px; }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--font-en); font-size:1.2rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--c-muted); }
.field .req{ color:#c0392b; margin-left:4px; }
.field input,.field textarea{
  font-family:inherit; font-size:1.6rem; color:var(--c-text); background:transparent;
  border:0; border-bottom:1px solid var(--c-line); padding:12px 2px; transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--c-black); }
.form__note{ font-size:1.2rem; color:var(--c-muted); }
.form__msg{ font-size:1.4rem; padding:14px 18px; border-radius:8px; background:var(--c-bg-soft); display:none; }
.form__msg.is-show{ display:block; }

/* =============================================================
   Legal / prose (プライバシーポリシー等)
   ============================================================= */
.legal{ max-width:820px; }
.legal h2{ font-family:var(--font-en); font-size:2rem; font-weight:600; letter-spacing:-.01em; margin:48px 0 14px; }
.legal h2:first-child{ margin-top:0; }
.legal p{ font-size:1.5rem; line-height:2.1; color:var(--c-sub); margin-bottom:1.2em; }
.legal ul{ margin:0 0 1.2em; padding-left:1.4em; list-style:disc; }
.legal ul li{ font-size:1.5rem; line-height:2; color:var(--c-sub); margin-bottom:.4em; }
.legal a{ border-bottom:1px solid var(--c-line); }
.legal__updated{ font-size:1.3rem; color:var(--c-muted); margin-top:48px; }

/* 更新日(フッター内) */
.footer__updated{ font-size:1.2rem; color:rgba(255,255,255,.4); }

/* =============================================================
   FAQ (よくある質問 / AIO)
   ============================================================= */
.faq{ border-top:1px solid var(--c-line); margin-top:8px; }
.faq__item{ border-bottom:1px solid var(--c-line); padding-block:28px; }
.faq__q{ font-family:var(--font-jp); font-weight:700; font-size:1.7rem; line-height:1.6; color:var(--c-text); display:flex; gap:14px; }
.faq__q::before{ content:"Q"; font-family:var(--font-en); color:var(--c-muted); font-weight:600; }
.faq__a{ margin-top:12px; font-size:1.5rem; line-height:2.05; color:var(--c-sub); display:flex; gap:14px; }
.faq__a::before{ content:"A"; font-family:var(--font-en); color:var(--c-text); font-weight:600; }
.section--dark .faq{ border-color:var(--c-line-dark); }
.section--dark .faq__item{ border-color:var(--c-line-dark); }
.section--dark .faq__q{ color:#fff; }
.section--dark .faq__a{ color:rgba(255,255,255,.72); }
.section--dark .faq__a::before{ color:#fff; }

/* =============================================================
   CTA
   ============================================================= */
.cta{ text-align:center; }
.cta__title{ font-family:var(--font-en); font-weight:500; font-size:clamp(3.2rem,7vw,6.4rem); letter-spacing:-.02em; line-height:1.08; margin-bottom:34px; }

/* Page hero (下層見出し) */
.page-hero{ padding-top:calc(var(--header-h) + 72px); padding-bottom:56px; }
.page-hero__title{ font-family:var(--font-en); font-size:clamp(4.4rem,9vw,8.8rem); font-weight:500; line-height:1; letter-spacing:-.03em; }
.page-hero__jp{ margin-top:20px; font-size:1.5rem; color:var(--c-sub); }

/* =============================================================
   Footer
   ============================================================= */
.footer{ background:var(--c-black); color:var(--c-white); padding-top:80px; padding-bottom:40px; }
.footer__top{ display:grid; gap:48px; }
@media (min-width:769px){ .footer__top{ grid-template-columns:1fr auto; align-items:start; } }
.footer__logo{ font-family:var(--font-en); font-size:clamp(3.2rem,6vw,5.2rem); font-weight:700; letter-spacing:-.03em; line-height:1; }
.footer__logo-img{ height:clamp(30px,4.5vw,44px); width:auto; display:block; }
.footer__tagline{ margin-top:16px; color:rgba(255,255,255,.55); font-size:1.4rem; }
.footer__nav{ display:grid; grid-template-columns:repeat(2,auto); gap:14px 56px; }
.footer__nav a{ font-family:var(--font-en); font-size:1.4rem; color:rgba(255,255,255,.8); transition:color .3s var(--ease); }
.footer__nav a:hover{ color:#fff; }
.footer__bottom{ margin-top:64px; padding-top:24px; border-top:1px solid rgba(255,255,255,.15); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:1.2rem; color:rgba(255,255,255,.45); }

/* =============================================================
   Scroll reveal (せり上がりフェード)
   ============================================================= */
.reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s var(--ease), transform 1s var(--ease); will-change:opacity,transform; }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.1s; }
.reveal[data-delay="2"]{ transition-delay:.2s; }
.reveal[data-delay="3"]{ transition-delay:.3s; }
.reveal[data-delay="4"]{ transition-delay:.4s; }

/* line-mask reveal (概念文などを行ごとに) */
.reveal-mask{ overflow:hidden; }
.reveal-mask > *{ transform:translateY(105%); transition:transform 1.1s var(--ease); }
.reveal-mask.is-in > *{ transform:translateY(0); }

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