/* ==========================================================================
   KRAM LP — style.css
   Design source: Figma "kram" (PC 1440 / SP 402)
   Fonts: Syne (欧文) / Zen Kaku Gothic New (和文) — Google Fonts
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --color-bg: #f1f1e8;
  --color-ink: #111e34;
  --color-muted: #acacac;
  --color-rule: rgba(17, 30, 52, 0.18);

  --font-en: "Syne", "Helvetica Neue", Arial, sans-serif;
  --font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;

  /* layout */
  --page-max: 1440px;
  /* 402→1440 で Figma 値、1920 で約1.15倍、それ以上は固定（clamp の上限） */
  --gutter: clamp(20px, -3.2px + 5.78vw, 120px);        /* SP 20 → PC 80 → 1920: 108 */
  --content-max: clamp(1280px, 88.9vw, 1600px);         /* PC 1280 → 1920: 1600 */

  /* type scale (SP → PC) */
  --fs-h2: clamp(28px, 20.25px + 1.927vw, 57px);    /* 28 → 48 → 57  What is KRAM / Join */
  --fs-h3: clamp(20px, 16.9px + 0.771vw, 32px);    /* 20 → 28 → 32  values 見出し（和文） */
  --fs-num: clamp(36px, 19.35px + 1.156vw, 42px);   /* 36 → 36 → 42 */
  --fs-tagline: clamp(20px, 18.45px + 0.385vw, 28px);   /* 20 → 24 → 26 */
  --fs-statement: clamp(18px, 15.68px + 0.578vw, 28px); /* 18 → 24 → 28  (2026-09-29 拡大) */
  --lh-statement: clamp(34px, 29.35px + 1.156vw, 53px); /* 34 → 46 → 53  行間は px 指定（Figma 実測） */
  --fs-body: clamp(16px, 10px + 0.417vw, 18px);         /* 16 → 16 → 18 */
  --fs-label: clamp(12px, 9px + 0.21vw, 13px);
  --fs-mail: clamp(31px, 15.9px + 3.757vw, 84px);       /* 31 → 70 → 84 */

  /* ステートメントの段組み（SP 292 → PC 920。どちらも中央寄せ） */
  --stmt-col: clamp(316px, 48.8px + 60.5vw, 1058px);   /* SP 316px（タグライン3行目の幅に合わせて微調整） */
  /* 01-04 の見出し列オフセット（SP 90 → PC 110） */
  --values-head-col: clamp(90px, 82.25px + 1.93vw, 126px);
}

/* ---------- Reset (minimal) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  line-height: 1.8;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, li { margin: 0; padding: 0; }
ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 4px; }

.u-sp-only { display: none; }
.u-pc-only { display: inline; }
@media (max-width: 767px) {
  .u-sp-only { display: inline; }
  .u-pc-only { display: none; }
}

/* 英文の見出し・ラベル */
.about__title, .join__title, .values__num,
.statement__label, .join__mail, .site-header__contact,
.site-footer__nav, .site-footer__copy {
  font-family: var(--font-en);
}

/* タグラインの約物を半角扱い（グリフは左半分にあるので右半分を詰める） */
.hero__tagline .punct { display: inline-block; width: .5em; overflow: visible; }

/* ---------- Layout helpers ---------- */
.statement__inner, .about__inner, .values__list, .join__inner, .site-footer__inner {
  width: min(100% - var(--gutter) * 2, var(--content-max));
  margin-inline: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
}
.site-header__logo {
  grid-column: 2;
  margin-top: 32px;
}
.site-header__logo img {
  width: clamp(152px, 25.9vw, 440px);
  height: auto;
}
.site-header__contact {
  grid-column: 3;
  justify-self: end;
  margin-top: 21px;
  margin-right: 80px;                          /* 画面右端から固定 */
  font-size: 20px;
  line-height: 1.2;
  transition: opacity .25s ease;
}
.site-header__contact:hover { opacity: .6; }

@media (max-width: 767px) {
  .site-header { height: 60px; }
  .site-header__logo { margin-top: 27px; }
  /* SP のファーストビューはロゴのみ（Contact は固定バー側） */
  .site-header__contact { display: none; }
}

/* SP 固定バー：1画面分スクロールしたら上から降りてくる。Figma: 高さ60 / 左右20 / ロゴ幅80 / Contact 16px */
.sp-bar { display: none; }
@media (max-width: 767px) {
  .sp-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg);
    transform: translateY(-100%);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  }
  .is-scrolled .sp-bar { transform: none; }
  .sp-bar__logo img { display: block; width: 80px; height: auto; }
  .sp-bar__contact { font-size: 16px; line-height: 1.2; }
}

/* ==========================================================================
   Hero / KV
   ========================================================================== */
.hero {
  position: relative;
  /* どの画面でもファーストビューをKV＋タグラインで埋める。svh はモバイルのアドレスバー分を除いた高さ */
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}
.hero__kv {
  z-index: 0;
  position: absolute;
  /* 端を 3% 外側まで延ばす（回転・拡大・サブピクセルのずれで縁に地色が出ないように） */
  inset: -3%;
  /* 画像は地色に合成済みの WebP（下端フェード込み）。PC 2400x1583 / SP 804x1520。PNG 原本は _ref/ */
}
.hero__kv picture { display: block; width: 100%; height: 100%; }
.hero__kv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform-origin: center 60%;
  animation: kv-breathe 18s ease-in-out infinite alternate;
}
@keyframes kv-breathe {
  0%   { transform: scale(1)    rotate(0deg); }
  100% { transform: scale(1.06) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__kv-img { animation: none; }
}

/* 下端の保険フェード。
   KV が拡大・移動すると画像自身の下端フェードがヒーローの外へ出てしまい、
   切り口が横一本の線として見えるため、常に地色へ溶かす層を重ねる。 */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(241, 241, 232, 0) 0%, rgba(241, 241, 232, .65) 55%, var(--color-bg) 100%);
}
.hero__tagline {
  z-index: 2;
  position: absolute;
  left: 50%;
  bottom: clamp(56px, 10vh, 140px);        /* 画面高さに応じて下端からの距離を可変に */
  transform: translateX(-50%);
  width: min(100% - var(--gutter) * 2, clamp(706px, 49vw, 860px));
  text-align: center;
  font-size: var(--fs-tagline);
  line-height: 2;
  letter-spacing: .02em;
}

@media (max-width: 359px) {
  /* 320px幅（iPhone SE初代等）で「ます。」だけが4行目に落ちるため、狭幅のみ段階的に縮める（2026-10-02） */
  .hero__tagline { font-size: clamp(15px, 5vw, 20px); }
}

/* ==========================================================================
   Statement
   ========================================================================== */
.statement {
  padding-top: clamp(118px, 11.7vw, 200px);   /* PC: 1118-950 / SP: 878-760 */
  padding-bottom: clamp(92px, 24.6px + 16.76vw, 306px);   /* SP 92 → PC 266 */
}
.statement__inner {
  position: relative;
  width: min(100% - var(--gutter) * 2, var(--stmt-col));   /* 狭い端末では左右余白を優先 */
  margin-inline: auto;
}
.statement__label {
  position: absolute;
  top: .35em;
  left: 0;
  font-size: var(--fs-label);
  line-height: 1.9;
}
.statement__body {
  font-size: var(--fs-statement);
  line-height: var(--lh-statement);
}
/* 先頭行はラベル分だけ空ける。PC 206px / SP 154px = どちらも約 8.57em */
.statement__body p { text-indent: 8.57em; }
/* 禁則で行末が凸凹しないよう本文は両端揃え */
.statement__body p, .about__body p, .values__body { text-align: justify; text-justify: inter-character; }
.statement__body p + p { text-indent: 0; margin-top: var(--lh-statement); }

/* ==========================================================================
   What is KRAM
   ========================================================================== */
.about {
  padding-bottom: clamp(60px, 5.71vw, 95px);  /* SP 60 → PC 82 */
}
.about__inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, clamp(640px, 44.4vw, 780px));
  column-gap: clamp(40px, 6vw, 110px);
  align-items: center;                         /* リードが2行程度の短文なので見出しと天地中央で釣り合わせる */
}
.about__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.9;
  white-space: nowrap;
}
.about__body p + p { margin-top: 1.8em; }

@media (max-width: 767px) {
  /* SP のステートメントは 18/34 だと禁則の空きが目立つため 16/30 に落とす（2026-09-30） */
  .statement__body { font-size: 16px; line-height: 30px; }
  .about { padding-bottom: 60px; }
  .about__inner { grid-template-columns: 1fr; row-gap: 40px; }
  .about__title { margin-top: 0; }
  .about__body { padding-left: 88px; }          /* Figma: 108-20 */
}
@media (max-width: 400px) {
  .about__body { padding-left: 64px; }
}

/* ==========================================================================
   Values 01-04
   ========================================================================== */
.values__item {
  position: relative;
  display: grid;
  /* 番号 / 見出し / 本文。本文列は右端に張り付き、中央の 1fr が伸縮する */
  grid-template-columns: var(--values-head-col) minmax(0, 1fr) minmax(0, clamp(435px, 30.2vw, 540px));
  align-items: center;
  min-height: clamp(150px, 11.94vw, 200px);       /* 172px row @1440 */
  padding-block: 13px 19px;                       /* 上下 3px ぶん光学的に上へ */
  border-top: 1px solid var(--color-rule);
}
.values__item:last-child { border-bottom: 1px solid var(--color-rule); }
.values__num {
  font-size: var(--fs-num);
  font-weight: 600;
  line-height: 1.9;
}
.values__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.9;
}

@media (max-width: 1024px) {
  .values__item { grid-template-columns: var(--values-head-col) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .values__item {
    grid-template-columns: var(--values-head-col) minmax(0, 1fr);
    align-items: baseline;
    min-height: 0;
    padding-block: 15px 26px;
  }
  .values__num { grid-column: 1; grid-row: 1; line-height: 1; position: relative; top: 3px; }
  .values__title { grid-column: 2; grid-row: 1; white-space: nowrap; font-size: clamp(14px, 4.2vw, var(--fs-h3)); }   /* 03「定量的ではない価値に向き合う」が1行に収まる幅で縮める */
  .values__body { grid-column: 2; grid-row: 2; padding-top: 16px; }   /* 見出しを縮めたぶん本文との間を空ける */
}

/* ==========================================================================
   Join the System
   ========================================================================== */
.join {
  padding-top: clamp(92px, 32.7px + 14.74vw, 282px);  /* SP 92 → PC 245 */
  padding-bottom: clamp(10px, 0.7vw, 14px);
}
.join__inner {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto;
  column-gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.join__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.9;
  white-space: nowrap;
}
.join__lead { max-width: clamp(283px, 19.65vw, 340px); }
.join__mail {
  position: relative;
  justify-self: end;
  /* Figma: 見出し上端から 121px 下げた位置にメールを置く */
  margin-top: clamp(0px, 8.4vw, 140px);
  font-size: var(--fs-mail);
  line-height: 1.9;
  padding-bottom: .02em;
  white-space: nowrap;
}
/* 下線：ホバーで右へ抜けてから左から引き直す。文字はわずかに浮く */
.join__mail::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .38em;
  height: 1px;
  background: var(--color-ink);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.join__mail .mail__text { display: inline-block; }
/* ホバー：1文字ずつ上へ抜け、同じ文字が下から登場する（文字の持ち上げは廃止） */
.mail__char {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  height: 1.9em;
  line-height: 1.9;
  clip-path: inset(.4em 0 .4em 0);   /* 窓を文字1つ分（1.1em）に絞る */
}
/* 文字1つ分（1.1em）だけ動かす。窓の中で上下する小さな動きに留める */
.mail__char__stack {
  display: block;
  padding-top: .4em;
  transition: transform .8s cubic-bezier(.33, 1, .68, 1);
  transition-delay: var(--d, 0s);
}
.mail__glyph { display: block; line-height: 1.1; }
@media (hover: hover) {
  .join__mail:hover::after,
  .join__mail:focus-visible::after {
    transform: scaleX(0);
    transform-origin: right center;
    animation: mail-underline .9s cubic-bezier(.65,0,.35,1) forwards;
  }
  .join__mail:hover .mail__char__stack,
  .join__mail:focus-visible .mail__char__stack { transform: translateY(-1.1em); }
}
@keyframes mail-underline {
  0%   { transform: scaleX(1); transform-origin: right center; }
  45%  { transform: scaleX(0); transform-origin: right center; }
  50%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}

@media (max-width: 767px) {
  .join { padding-bottom: 84px; }
  .join__inner { grid-template-columns: 1fr; row-gap: 54px; }
  .join__mail { margin-top: 0; }
  .about__title, .join__title { white-space: normal; }
  .join__mail { justify-self: end; margin-left: 0; font-size: 31px; line-height: 1.9; }   /* SP は右寄せ（本文カラムの右端に揃える） */
}
@media (max-width: 400px) {
  .join__mail { font-size: 28px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer__inner {
  border-top: 1px solid var(--color-rule);
  padding-top: 28px;
  padding-bottom: 28px;
}
.site-footer__nav {
  display: flex;
  gap: 32px;
  font-size: var(--fs-body);
  line-height: 1.8;
}
/* ホバー：下線が左からすっと伸び、離すと右へ抜ける */
.site-footer__nav a {
  position: relative;
  display: inline-block;
}
.site-footer__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .3em;             /* 行送り1.8ぶんの余白を詰めて文字のすぐ下に */
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
@media (hover: hover) {
  .site-footer__nav a:hover::after,
  .site-footer__nav a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 60px;
}
.site-footer__logo img { width: clamp(121px, 8.4vw, 140px); height: auto; }
.site-footer__copy {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .site-footer__inner { padding-top: 22px; padding-bottom: 24px; }
  .site-footer__nav { flex-direction: column; align-items: flex-start; gap: 10px; }
  .site-footer__bottom { margin-top: 55px; }
  .site-footer__logo img { width: 120px; }
}

/* ==========================================================================
   Motion（JSが .has-motion を <html> に付けたときだけ有効。reduced-motion では付かない）
   ========================================================================== */

/* --- 8) ロード時シークエンス --- */
.has-motion.is-intro .site-header__logo,
.has-motion.is-intro .site-header__contact { opacity: 0; }
.has-motion.is-intro .hero__kv { opacity: 0; transform: scale(1.08); }
.has-motion.is-intro .hero__tagline .line__inner { transform: translateY(110%); }

.has-motion .site-header__logo,
.has-motion .site-header__contact { transition: opacity 1s ease .2s; }
.has-motion .hero__kv { transition: opacity 1.6s ease, transform 2.4s cubic-bezier(.16,1,.3,1); transform-origin: 50% 60%; }

/* --- 1) 行リビール（行単位。--ld は同時に入った行の開始遅延） --- */
.has-motion .line { display: block; overflow: hidden; }
/* ステートメントの行は、合図が出たら最後まで出し切る（0.5秒）。
   スクロール位置に直結させると、手を止めたときに行が途中で止まり、
   文字が切れて見える。短い動きなら速くスクロールしても画面内で終わる。 */
.has-motion .statement__body .line__inner {
  transform: translate3d(0, 110%, 0);
  transition: transform .66s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--ld, 0s);
}
.has-motion .statement__body .line.is-visible .line__inner { transform: translate3d(0, 0, 0); }

/* 行分割後は各行が独立ブロックになるため、最終行扱いを打ち消して両端揃えを保つ */
.has-motion .statement__body .line__inner { text-align-last: justify; }
.has-motion .statement__body .line--end .line__inner,
.has-motion .statement__body .line:last-child .line__inner { text-align-last: left; }
/* 分割後は段落の字下げを1行目の .line に移す */
.has-motion .statement__body p.is-split { text-indent: 0; }
.has-motion .statement__body p.is-split .line:first-child { text-indent: 8.57em; }

.has-motion .line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.6s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--ld, 0s);
}
.has-motion .line.is-visible .line__inner { transform: none; }

/* タグライン（ロード時） */
.has-motion .hero__tagline .line__inner { transition-duration: 1.2s; }
.has-motion .hero__tagline .line:nth-child(1) .line__inner { transition-delay: .35s; }
.has-motion .hero__tagline .line:nth-child(2) .line__inner { transition-delay: .45s; }
.has-motion .hero__tagline .line:nth-child(3) .line__inner { transition-delay: .55s; }

/* --- 2) 見出しのぼかし結像（Our statement / What is KRAM / Join the System） --- */
.has-motion .char {
  display: inline-block;
  text-indent: 0;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(.08em);
  transition: opacity .55s ease, filter .75s ease, transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(.05s + var(--i, 0) * .35s);   /* 左から右へ、約 1 秒で結ぶ */
}
.has-motion .focus.is-visible .char { opacity: 1; filter: blur(0); transform: none; }

/* --- 4) 区切り線の伸長＋番号・本文の順次表示（01-04） --- */
.has-motion .values__item { border-top-color: transparent; }
.has-motion .values__item:last-child { border-bottom-color: transparent; }
.has-motion .values__item::before,
.has-motion .values__item:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--color-rule);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.8s cubic-bezier(.16,1,.3,1);
}
.has-motion .values__item::before { top: -1px; }
.has-motion .values__item:last-child::after { bottom: -1px; transition-delay: .5s; }
.has-motion .values__item.is-visible::before,
.has-motion .values__item.is-visible:last-child::after { transform: scaleX(1); }

/* 01-04 の出方はスクロール位置に直結させる。
   一度きりの合図＋固定時間の動きだと、速く動かしたときに画面を通り過ぎてから
   再生が終わり、遅いときは見る前に終わってしまい、速度によって見え方が変わるため。
   JS が項目ごとに --vn / --vt / --vb（0→1）を更新する。 */
.has-motion .values__item { --vn: 0; --vt: 0; --vb: 0; }
.has-motion .values__num,
.has-motion .values__title,
.has-motion .values__body {
  transition: opacity .12s linear, transform .12s linear;   /* スクロールの粗さをならす程度 */
}
.has-motion .values__num   { opacity: var(--vn); transform: translateY(calc((1 - var(--vn)) * 12px)); }
.has-motion .values__title { opacity: var(--vt); transform: translateY(calc((1 - var(--vt)) * 12px)); }
.has-motion .values__body  { opacity: var(--vb); transform: translateY(calc((1 - var(--vb)) * 12px)); }

/* --- 汎用フェード（What is KRAM 本文・Join） --- */
.has-motion .fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.has-motion .fade.is-visible { opacity: 1; transform: none; }
.has-motion .fade--late { transition-delay: .2s; }

/* --- 6) KV スクロール追従（JS が --kv-p を 0→1 で更新） --- */
.has-motion .hero__kv {
  --kv-p: 0;
  opacity: calc(1 - var(--kv-p) * 0.9);
  transform: translateY(calc(var(--kv-p) * 14vh)) scale(calc(1 + var(--kv-p) * 0.12)) rotate(calc(var(--kv-p) * 4deg));
}
.has-motion.is-settled .hero__kv { transition: none; }   /* イントロ終了後はスクロール追従を即時反映 */
/* 最上部に戻ったら変形を完全に外す。
   変形が残ったままだと合成レイヤーが拡大時の解像度のまま再利用され、
   グラデーションに縞が出る（下までスクロールして戻ると画像が粗く見えた原因） */
.has-motion .hero__kv.is-rest { transform: none; opacity: 1; }

/* ==========================================================================
   初期表示の伏せ
   index.html のインラインスクリプトが <html> に .js-boot を付ける。
   JS が行分割と初期状態の適用を終えるまで、素のテキストと KV を見せない。
   （.has-motion の指定に勝つよう、意図的にファイル末尾に置いている）
   ========================================================================== */
/* 伏せるのはファーストビューのコピーだけ。
   ステートメントは画面外にあり書体の差し替えが見えないうえ、
   WebKit は visibility:hidden の中の文字位置を測れず行分割が壊れるため対象にしない。 */
.js-boot .hero__tagline,
.js-text .hero__tagline { visibility: hidden; }
.js-boot .hero__kv,
.js-boot .site-header__logo,
.js-boot .site-header__contact { opacity: 0; }