@charset "UTF-8";
/* ============================================================
   RASENCA — Base
   reset / fonts / fluid root / container / shared utilities
   depends on tokens.css
   ============================================================ */

/* ---------- Modern reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 10rem; }
body { min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Root font-size / fluid scaling
   1rem = 10px を基準（Figmaの px ÷ 10 = rem）
   - PC(>=1025px): 10px固定。内容は 1200px（左右120）で流動。
   - SP+タブレット(<=1024px): iPhone SE 375基準で画面幅に比例して
     フォントが拡大（16/Pro/XR等で自動的に大きく）。上限を設けて肥大化防止。
   ============================================================ */
html { font-size: 62.5%; } /* 10px */

@media (max-width: 1024px) {
  /* 375で10px相当。画面が大きいほど比例拡大。8.5px〜12pxでクランプ */
  html { font-size: clamp(8.5px, 2.6667vw, 12px); }
  /* SP/タブレットはヘッダー70px。着地オフセット＝ヘッダー高さ(7rem)＝セクション上端(色の切れ間)がヘッダー下線にぴったり揃う（PCは10rem=ヘッダー100pxで同様） */
  html { scroll-padding-top: 7rem; }
}

/* ---------- Body ---------- */
body {
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: 1.9;
  color: var(--color-main);
  background: var(--color-base);
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
}

/* ---------- Layout containers ---------- */
/* 通常コンテンツ：最大1200px、左右120px（1025〜1440は流動） */
.l-inner {
  width: min(var(--content-max), 100% - var(--gutter-pc) * 2);
  margin-inline: auto;
}
/* ヘッダー用：最大1320px */
.l-inner--wide {
  width: min(1320px, 100% - 80px);
  margin-inline: auto;
}

@media (max-width: 1024px) {
  .l-inner,
  .l-inner--wide {
    width: min(100% - 4rem, 60rem);
  }
}

/* section 余白（PC py-120 / SP py-64。Figmaに合わせ各セクションで調整）
   背景は不透明＝stageのsticky hero（100dvh下方に張り出す）を覆う。z-indexでheroより前面 */
.section { position: relative; z-index: 1; padding-block: var(--sp-120); background: var(--color-base); }
.section--sub { background: var(--color-sub); }
.section--main { background: var(--color-main); color: var(--color-base); }
@media (max-width: 1024px) {
  .section { padding-block: var(--sp-64); }
}

/* ---------- Section title (英字グラデ + 和文。Figma準拠：EN Montserrat Light 13px / JP Noto Medium 22px / 字間0.1em) ---------- */
.sec-head { text-align: center; margin-bottom: var(--sp-64); }
.sec-head__en {
  font-family: var(--font-en);
  font-weight: var(--fw-light);
  font-size: 1.3rem;              /* 13px */
  letter-spacing: 0.1em;         /* 1.3px */
  line-height: 1;
  background: var(--gradient-teal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.sec-head__jp {
  margin-top: 0.8rem;            /* gap-8 */
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  font-size: 2.2rem;             /* 22px */
  letter-spacing: 0.1em;        /* 2.2px */
  line-height: 1;
  color: var(--color-main);
}
@media (max-width: 1024px) {
  .sec-head { margin-bottom: var(--sp-32); }   /* SP gap-32 */
  .sec-head__en { font-size: 1rem; }            /* 10px */
  .sec-head__jp { font-size: 1.6rem; }          /* 16px */
}

/* ---------- Button（詳しくはこちら等・暫定。Figmaで各所調整） ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  height: 5.4rem;
  padding-inline: 2.8rem;
  border: 1px solid var(--color-main);
  border-radius: 999px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-15);
  color: var(--color-main);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.btn:hover { background: var(--color-main); color: var(--color-base); }
.btn--main { background: var(--color-main); color: var(--color-base); }
.btn--main:hover { background: transparent; color: var(--color-main); }

/* ---------- Reveal（下からフェードアップ。ゆったり＋スタッガーで1つずつ立ち上がる）
   初期非表示は「.js（JSが動作している）」時のみ。JSが無効/ブロック/読込失敗の端末では
   中身を最初から表示する＝プログレッシブ・エンハンスメント。挙動はJS動作時は従来と完全に同一。 ---------- */
.js-reveal { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .js-reveal { opacity: 0; transform: translateY(3.6rem); }
.js .js-reveal.is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.15s; }
[data-reveal-delay="2"] { transition-delay: 0.33s; }
[data-reveal-delay="3"] { transition-delay: 0.51s; }
/* soft：下からスライドせず、その場でふわっと（フェード＋ごく微かなスケール） */
.js .js-reveal--soft { transform: scale(0.985); }

/* PC/SPで異なる改行位置に対応（Figma準拠） */
.br-sp { display: none; }   /* SP専用の改行：PCでは無効 */
.br-pc { display: inline; } /* PC専用の改行：SPでは無効 */
@media (max-width: 1024px) {
  .br-sp { display: inline; }
  .br-pc { display: none; }
}

/* ---------- a11y ---------- */
:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js .js-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Tablet（768–1024px）：PCとSPの「いいとこ取り」。
   ≤1024のSPルールに対し、この範囲だけPC寄りへ上書き（後勝ち）。
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  html { font-size: 62.5%; }                    /* 10px＝PCと同じ(rem=px)。SPのvw可変を打ち消す */
  .l-inner { width: min(100% - 8rem, 92rem); }  /* タブレット幅：左右40px・最大920 */
  .section { padding-block: 8rem; }             /* 中間の余白（SP64/PC120） */
  .sec-head { margin-bottom: 4.8rem; }
  .sec-head__en { font-size: 1.3rem; }
  .sec-head__jp { font-size: 2.2rem; }
}