@charset "UTF-8";
/* =============================================================
   株式会社スカイロケット様 コーポレートサイト
   下層セクション デザイン版 v2.0
   -------------------------------------------------------------
   v1.0が「罫線と本文だけの資料」に見えたため、装飾を足すのではなく
   構成そのものを作り直した。

     ・大小差をつける（番号を表示サイズまで拡大し、見出しを大きく取る）
     ・重ねる（濃紺の面の上に文字を置き、図版を回り込ませる）
     ・名刺の39°を「面の切り欠き」として使う（線ではなく形で受け継ぐ）
     ・見出しを左に留め、本文だけがスクロールする二層構成にする
     ・英字の縦組みラベルを版面の外に置き、余白を意味のある余白にする

   角丸カードの三枚並び・アウトラインアイコン・青のグラデーション面は
   使わない方針は v1.0 から維持している。
============================================================= */

:root {
  --gold: #F5C132;
  --sky:  #7FD4DD;
  --tint: #F3F7FC;
}

/* -------------------------------------------------------------
   セクション共通
------------------------------------------------------------- */
.sec {
  position: relative;
  padding-block: clamp(84px, 10.5vw, 168px);
  /* 追従ヘッダーの下に見出しが潜らないよう、着地位置をずらす */
  scroll-margin-top: calc(var(--header-h) + 12px);
}
@media (max-width: 900px) {
  .sec { scroll-margin-top: calc(var(--header-h-sp) + 10px); }
}

/* 番号＋英字ラベル */
.sec-idx {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 clamp(15px, 1.7vw, 21px);
  font-family: var(--en);
  font-weight: 700;
}
.sec-idx b {
  color: var(--teal-500);
  font-size: clamp(14px, 1.15vw, 16px);
  letter-spacing: .07em;
}
.sec-idx i {
  position: relative;
  padding-left: 41px;
  color: var(--ink-mute);
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .28em;
}
.sec-idx i::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 29px; height: 1px;
  background: var(--line);
}

.sec-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(27px, 3.6vw, 50px);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: -.014em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
/* 一行ずつマスクから立ち上げるため、行を箱にする */
.sec-title .l {
  display: block;
  overflow: hidden;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
.sec-title .t { display: block; }

.sec-lead {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 34em;
  color: var(--ink-body);
  font-size: var(--fz-body);
  line-height: 2.05;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* 濃紺セクション内の色 */
.sec-strength .sec-title,
.sec-contact  .sec-title { color: #fff; }
.sec-strength .sec-lead,
.sec-contact  .sec-lead  { color: rgba(255,255,255,.78); }
.sec-strength .sec-idx b,
.sec-contact  .sec-idx b { color: var(--sky); }
.sec-strength .sec-idx i,
.sec-contact  .sec-idx i { color: rgba(255,255,255,.5); }
.sec-strength .sec-idx i::before,
.sec-contact  .sec-idx i::before { background: rgba(255,255,255,.3); }

/* -------------------------------------------------------------
   見出しを左に留め、内容だけがスクロールする二層構成
------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  column-gap: clamp(44px, 6.4vw, 104px);
  align-items: start;
}
@media (min-width: 1001px) {
  .split-head {
    position: sticky;
    top: calc(var(--header-h) + 46px);
  }
}
.split-head .sec-lead { max-width: none; }

/* 右側の各事業に 01〜04 があるため、こちらは数字を持たせない */
.split-tag {
  margin: clamp(30px, 3.6vw, 46px) 0 0;
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line);
}
.split-tag .jp {
  display: block;
  color: var(--ink);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: .08em;
}
.split-tag .en {
  display: block;
  margin-top: 8px;
  color: var(--ink-mute);
  font-family: var(--en);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
}

/* -------------------------------------------------------------
   01 私たちについて
------------------------------------------------------------- */
/* 帯で終わるので、下の余白は次のセクションに任せる */
.sec-about { padding-bottom: 0; }

.ab-head { margin-bottom: clamp(36px, 4.6vw, 62px); }

.ab-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  column-gap: clamp(38px, 6vw, 84px);
  row-gap: clamp(26px, 3.4vw, 40px);
  align-items: start;
}
.ab-strong {
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 1.95vw, 27px);
  font-weight: 700;
  line-height: 1.82;
  letter-spacing: -.008em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
.ab-text p {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fz-body);
  line-height: 2.15;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
.ab-text p + p { margin-top: 1.7em; }

/* -- 社名の由来を、名刺から分解した図版の上に反転で置く ---------- */
.stage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(290px, 33vw, 440px);
  margin-top: clamp(58px, 7vw, 104px);
  padding-block: clamp(56px, 6.4vw, 88px);
  /* 左上を名刺と同じ39°で落とす（tan39° = 0.80978） */
  --ch: clamp(52px, 6.6vw, 104px);
  clip-path: polygon(0 var(--ch), calc(var(--ch) / 0.80978) 0, 100% 0, 100% 100%, 0 100%);
}
.stage-field {
  position: absolute;
  inset: 0;
  background: linear-gradient(42deg,
    var(--field-5) 0%, var(--field-4) 24%, var(--field-3) 50%, var(--field-2) 76%, var(--field-1) 100%);
}
.stage-clip { position: absolute; inset: 0; overflow: hidden; }
/* 光跡の上に文字が乗るため、文字側だけを落とす */
.stage-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(12,15,34,.56) 0%, rgba(12,15,34,.3) 40%, rgba(12,15,34,.05) 68%, rgba(12,15,34,0) 100%);
}
.stage-city {
  position: absolute;
  right: 0; bottom: -1px;
  width: clamp(160px, 19vw, 290px);
  height: auto;
  opacity: .82;
}
.stage-craft {
  position: absolute;
  container-type: inline-size;   /* 軌跡の形を枠幅基準（cqw）で描くため */
  right: 8.5%;
  top: 15%;
  width: clamp(62px, 7vw, 110px);
  aspect-ratio: 777 / 830;
}
.stage-rocket {
  position: absolute;
  inset: 0;
  max-width: none;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 26px rgba(0,0,0,.34));
}
/* 名刺の噴射形状をそのまま描く（2026-09-15）
   ・始まりは、ロケットの黒い輪のすぐ下で軸に直交する一直線（尖らせない）
   ・太い主帯＋上側の細い帯。主帯の外側は途中から切れ込みで細い筋に分かれる
   ・形は名刺を600dpiで実測し、窓の直径で倍率を合わせた値
   ・--spread で広がりだけを調整できる（1 = 名刺どおり）。根元の形は変わらない */
.stage-trail {
  position: absolute;
  left: 15.8%;
  top: 72.34%;
  width: 120vmax;
  background: linear-gradient(90deg,
    rgba(255,255,255,.86) 0%, rgba(226,236,250,.5) 26%, rgba(175,196,226,.2) 58%, rgba(150,175,210,0) 100%);
}
/* 主帯（切れ込み入り）。軸を要素の下端に置き、上側へ描く */
.stage-trail:nth-child(1) {
  height: calc(12cqw + 30.564vmax * var(--spread, 1));
  transform-origin: 0 100%;
  transform: translateY(-100%) rotate(141deg);
  clip-path: polygon(
    0 calc(100% - 2.309cqw),
    100% calc(100% - 2.309cqw - 1.44vmax * var(--spread, 1)),
    100% calc(100% - 9.147cqw - 17.412vmax * var(--spread, 1)),
    calc(9.019cqw / var(--spread, 1)) calc(100% - 10.456cqw),
    100% calc(100% - 8.568cqw - 25.116vmax * var(--spread, 1)),
    100% calc(100% - 9.733cqw - 29.064vmax * var(--spread, 1)),
    0 calc(100% - 9.733cqw)
  );
}
/* 細い帯。軸を要素の上端から3cqwの位置に置き、下側へ描く */
.stage-trail:nth-child(2) {
  height: calc(6cqw + 13.5vmax * var(--spread, 1));
  transform-origin: 0 3cqw;
  transform: translateY(-3cqw) rotate(141deg);
  clip-path: polygon(
    0 1.874cqw,
    100% calc(3cqw - 1.126cqw + 7.272vmax * var(--spread, 1)),
    100% calc(3cqw + 0.924cqw + 12vmax * var(--spread, 1)),
    0 3.924cqw
  );
}

.stage .container { position: relative; z-index: 2; }

.origin { margin: 0; max-width: 33em; }
.origin figcaption {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(16px, 1.9vw, 24px);
}
.origin .jp {
  color: var(--sky);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .16em;
}
.origin .en {
  position: relative;
  padding-left: 41px;
  color: rgba(255,255,255,.46);
  font-family: var(--en);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
}
.origin .en::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 29px; height: 1px;
  background: rgba(255,255,255,.32);
}
.origin blockquote {
  margin: 0;
  color: #fff;
  font-size: clamp(16px, 1.75vw, 25px);
  font-weight: 500;
  line-height: 1.94;
  letter-spacing: .012em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* -------------------------------------------------------------
   02 事業内容
   罫線で割った行に、表示サイズの番号を添える
------------------------------------------------------------- */
.svc { margin: 0; padding: 0; list-style: none; }

.svc-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(22px, 3vw, 48px);
  align-items: start;
  padding-block: clamp(30px, 3.6vw, 52px);
  border-top: 1px solid var(--line);
  transition: background .4s var(--ease);
}
.svc-item:last-child { border-bottom: 1px solid var(--line); }
.svc-item:hover { background: rgba(16,32,96,.026); }
/* 上罫の上を、ホバーでティールの線が走る */
.svc-item::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 100%; height: 2px;
  background: var(--teal-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease);
}
.svc-item:hover::after { transform: scaleX(1); }

.svc-no {
  color: rgba(11,22,64,.14);
  font-family: var(--en);
  font-size: clamp(34px, 4.7vw, 68px);
  font-weight: 700;
  line-height: .84;
  letter-spacing: -.02em;
  transition: color .45s var(--ease);
}
.svc-item:hover .svc-no { color: var(--teal-500); }

.svc-name {
  margin: 0 0 clamp(10px, 1.2vw, 15px);
  color: var(--ink);
  font-size: clamp(18px, 1.75vw, 25px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.008em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.svc-desc {
  margin: 0;
  max-width: 32em;
  color: var(--ink-body);
  font-size: var(--fz-body);
  line-height: 2.05;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}
.svc-ex {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: clamp(16px, 1.9vw, 24px) 0 0;
  padding: 0;
  list-style: none;
}
/* この節でいちばん具体的な情報なので、小さな注記にしない */
.svc-ex li {
  padding: 0 16px;
  border-left: 1px solid var(--line);
  color: var(--ink-body);
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.6;
  letter-spacing: .01em;
  white-space: nowrap;
}
.svc-ex li:first-child { padding-left: 0; border-left: 0; }

/* -------------------------------------------------------------
   03 選ばれる理由（濃紺）
------------------------------------------------------------- */
.sec-strength {
  /* 斜辺の線がセクション外へ出るため切り抜く。
     overflow:hidden はスクロール領域を作って position:sticky を壊すので clip を使う */
  overflow: clip;
  background: linear-gradient(42deg,
    var(--field-5) 0%, var(--field-4) 26%, var(--field-3) 54%, var(--field-2) 80%, var(--field-1) 100%);
}
/* ロケットはFV・ローディング・社名の由来に絞る。ここは名刺の斜辺そのものを
   面の分割として使い、図柄を繰り返さずに同じ言語を通す。
   グラデーションの角度は箱の縦横比に依存しないので、どの画面幅でも39°のまま */
.sec-strength::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(141deg,
    rgba(255,255,255,.055) 0 43%, rgba(255,255,255,0) 43%);
  pointer-events: none;
}
/* 斜辺そのものを細い線で通す */
.sec-strength::after {
  content: "";
  position: absolute;
  left: -4%;
  bottom: 26%;
  width: 74vmax;
  height: 1px;
  transform-origin: 0 50%;
  transform: rotate(-39deg);
  background: linear-gradient(90deg,
    rgba(143,206,242,0) 0%, rgba(143,206,242,.3) 46%, rgba(143,206,242,.06) 100%);
  pointer-events: none;
}

.sec-strength .container { position: relative; z-index: 2; }

/* 事業内容は「並列の一覧」、こちらは「主張」。
   同じ行の形を使い回さず、番号を上に置いて罫線を外し、
   見出しを大きく取って余白で区切る。 */
.str {
  display: grid;
  gap: clamp(46px, 6vw, 92px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.str-item { display: block; }

.str-no {
  display: block;
  margin-bottom: clamp(10px, 1.2vw, 15px);
  color: var(--gold);
  font-family: var(--en);
  font-size: clamp(26px, 2.7vw, 40px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
}
.str-name {
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 2.3vw, 33px);
  font-weight: 700;
  line-height: 1.52;
  letter-spacing: -.014em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 本文だけ字下げして、見出しの列とずらす */
.str-desc {
  margin: clamp(14px, 1.7vw, 22px) 0 0 clamp(0px, 3.4vw, 54px);
  max-width: 30em;
  color: rgba(255,255,255,.76);
  font-size: var(--fz-body);
  line-height: 2.05;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* -------------------------------------------------------------
   04 会社概要
------------------------------------------------------------- */
.sec-company { background: var(--tint); }

.cm-mark {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(30px, 3.8vw, 50px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.cm-mark img {
  width: clamp(58px, 6vw, 84px);
  height: auto;
  flex-shrink: 0;
}
.cm-wm {
  color: var(--ink);
  font-family: var(--en);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: .01em;
}
.cm-est { margin: clamp(22px, 2.6vw, 32px) 0 0; }
.cm-est i {
  display: block;
  color: var(--ink-mute);
  font-family: var(--en);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .28em;
}
.cm-est b {
  display: block;
  margin-top: 4px;
  color: rgba(11,22,64,.17);
  font-family: var(--en);
  font-size: clamp(42px, 5.2vw, 72px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.02em;
}

.cmp { margin: 0; }
.cmp-row {
  display: grid;
  grid-template-columns: clamp(150px, 15vw, 210px) minmax(0, 1fr);
  gap: clamp(14px, 2.2vw, 30px);
  padding-block: clamp(18px, 2.1vw, 26px);
  border-top: 1px solid #DFE7F1;
}
.cmp-row:last-child { border-bottom: 1px solid #DFE7F1; }
.cmp-row dt {
  color: var(--ink);
  font-size: clamp(13.5px, .98vw, 14.5px);
  font-weight: 700;
  letter-spacing: .06em;
}
.cmp-row dd {
  margin: 0;
  color: var(--ink-body);
  font-size: var(--fz-body);
  line-height: 1.95;
  word-break: normal;
  overflow-wrap: anywhere;
}
.cmp-row dd a {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease);
}
.cmp-row dd a:hover { color: var(--ink); }

/* -------------------------------------------------------------
   05 お問い合わせ（濃紺）
------------------------------------------------------------- */
.sec-contact {
  position: relative;
  background: linear-gradient(42deg, #0A0D1E 0%, var(--field-4) 34%, var(--field-3) 68%, #24365E 100%);
  /* 私たちについての帯と同じ39°で左上を落とし、上下の面をつなぐ */
  --ch: clamp(52px, 6.6vw, 104px);
  clip-path: polygon(0 var(--ch), calc(var(--ch) / 0.80978) 0, 100% 0, 100% 100%, 0 100%);
  padding-top: clamp(118px, 14vw, 210px);
}
/* 図版は置かず、39°の切り欠きと細線だけで受け継ぐ。
   ここは電話番号より目立つものを置かない */
.sec-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(141deg,
    rgba(255,255,255,.05) 0 47%, rgba(255,255,255,0) 47%);
  pointer-events: none;
}

.ct-in { position: relative; z-index: 2; }

.ct-ways {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4.4vw, 64px);
  margin-top: clamp(38px, 4.6vw, 66px);
}

/* FVで決めた主従をそのまま持ち込む。
   電話は塗り、メールは罫と矢印のリンク。同じ枠を2つ並べない。 */
.ct-tel {
  display: grid;
  gap: clamp(10px, 1.2vw, 15px);
  padding: clamp(22px, 2.6vw, 34px) clamp(26px, 3vw, 42px) clamp(24px, 2.8vw, 38px);
  min-width: min(100%, 26em);
  color: var(--ink);
  background: #fff;
  /* 右下を名刺と同じ39°で落とす。セクション左上の切り欠きと対になる */
  --cut: clamp(14px, 1.7vw, 24px);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut) / 0.80978) 100%,
    0 100%);
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.ct-tel .lb { display: flex; align-items: baseline; gap: 12px; }
.ct-tel .lb .en {
  color: var(--teal-500);
  font-family: var(--en);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
}
.ct-tel .lb .jp {
  color: var(--ink-mute);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.ct-tel .num {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 14px);
  font-family: var(--en);
  font-size: clamp(25px, 2.7vw, 38px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.ct-tel svg {
  width: clamp(19px, 1.6vw, 23px);
  height: clamp(19px, 1.6vw, 23px);
  flex-shrink: 0;
  color: var(--teal-500);
}
.ct-tel:hover { background: #EDF3FA; transform: translateY(-3px); }

.ct-mail {
  display: grid;
  gap: clamp(10px, 1.2vw, 15px);
  padding-bottom: clamp(14px, 1.6vw, 20px);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.42);
  transition: border-color .35s var(--ease);
}
.ct-mail .lb { display: flex; align-items: baseline; gap: 12px; }
.ct-mail .lb .en {
  color: var(--sky);
  font-family: var(--en);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
}
.ct-mail .lb .jp {
  color: rgba(255,255,255,.58);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.ct-mail .val {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  font-family: var(--en);
  font-size: clamp(16px, 1.85vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em;
  word-break: break-all;
}
/* FVのメールリンクと同じ矢印 */
.ct-mail .ar {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: clamp(22px, 2.4vw, 34px);
  height: 1px;
  margin-left: auto;
  background: currentColor;
  transition: width .35s var(--ease);
}
.ct-mail .ar::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.ct-mail:hover { border-color: #fff; }
.ct-mail:hover .ar { width: clamp(32px, 3.6vw, 50px); }

/* -------------------------------------------------------------
   フッター
------------------------------------------------------------- */
.ft {
  padding-block: clamp(48px, 5.4vw, 74px) 26px;
  color: rgba(255,255,255,.72);
  background: #080B1A;
}
.ft-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 34px;
}
.ft-brand { display: flex; align-items: flex-start; gap: 16px; }
.ft-brand img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.ft-name {
  margin-bottom: 9px;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .04em;
}
.ft-name span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.4);
  font-family: var(--en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
}
.ft-addr { font-size: 13px; line-height: 1.95; }
.ft-addr .nb { white-space: nowrap; }
/* 住所が本店に見えないよう、支店であることを先頭に示す */
.ft-addr .ft-branch { margin-right: 1em; color: rgba(255,255,255,.92); font-weight: 500; letter-spacing: .04em; }
.ft-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 26px;
}
.ft-nav a {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-size: 13.5px;
  transition: color .25s var(--ease);
}
.ft-nav a i {
  color: rgba(255,255,255,.32);
  font-family: var(--en);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .1em;
  transition: color .25s var(--ease);
}
.ft-nav a:hover { color: #fff; }
.ft-nav a:hover i { color: var(--sky); }
.ft-copy {
  margin-top: clamp(34px, 4.4vw, 52px);
  padding-top: 21px;
  color: rgba(255,255,255,.42);
  font-family: var(--en);
  font-size: 11.5px;
  letter-spacing: .06em;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* -------------------------------------------------------------
   スクロールで立ち上げる
------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-rv] {
    opacity: 0;
    transform: translateY(26px);
    /* JSが動かない環境でも必ず出るよう保険をかける */
    animation: rvFailsafe 0s 3s forwards;
  }
  @keyframes rvFailsafe { to { opacity: 1; transform: none; } }
  [data-rv].is-rv {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay: calc(var(--d, 0) * 90ms);
  }

  /* 見出しは動かさず、行ごとにマスクから立ち上げる */
  .sec-title[data-rv] {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .sec-title[data-rv] .t {
    transform: translateY(112%);
    transition: transform 1s var(--ease);
    animation: tFailsafe 0s 3s forwards;
  }
  @keyframes tFailsafe { to { transform: none; } }
  .sec-title[data-rv] .l:nth-child(2) .t { transition-delay: .11s; }
  .sec-title[data-rv].is-rv .t { transform: none; }

  /* 見出しブロック内の要素は順に */
  .sec-idx[data-rv] { --d: 0; }
  .split-head .sec-lead[data-rv],
  .ct-in .sec-lead[data-rv] { --d: 1; }
  .split-tag[data-rv],
  .cm-mark[data-rv] { --d: 2; }
  .cm-est[data-rv] { --d: 3; }
  .ct-ways[data-rv] { --d: 2; }
}

/* -------------------------------------------------------------
   タブレット
------------------------------------------------------------- */
@media (max-width: 1000px) {
  :root { --fz-body: 16px; }

  .split { grid-template-columns: 1fr; row-gap: clamp(34px, 5vw, 52px); }
  .split-tag { display: none; }
  .cm-mark { margin-top: clamp(24px, 3vw, 34px); }
  .cm-est { display: none; }

  .ab-grid { grid-template-columns: 1fr; }
  .ab-strong { max-width: 32em; }

}

@media (max-width: 860px) {
  .ct-ways { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
}

/* -------------------------------------------------------------
   スマートフォン
------------------------------------------------------------- */
@media (max-width: 540px) {
  .sec { padding-block: clamp(64px, 16vw, 92px); }
  .sec-idx { margin-bottom: 12px; }
  .sec-idx i { padding-left: 32px; font-size: 10.5px; letter-spacing: .22em; }
  .sec-idx i::before { width: 22px; }

  .ab-head { margin-bottom: 28px; }

  .stage {
    min-height: 0;
    margin-top: 44px;
    padding-block: 56px 44px;
    --ch: clamp(38px, 11vw, 56px);
  }
  .stage-craft { right: 8%; top: 8%; width: clamp(50px, 15vw, 70px); }
  .stage-city  { width: clamp(120px, 36vw, 168px); opacity: .62; }
  .stage-clip::after {
    background: linear-gradient(to bottom,
      rgba(12,15,34,0) 0%, rgba(12,15,34,.34) 34%, rgba(12,15,34,.66) 62%, rgba(12,15,34,.82) 100%);
  }
  .origin blockquote { font-size: 16px; line-height: 1.98; }

  .svc-item {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    padding-block: 26px;
  }
  .svc-no { font-size: 26px; line-height: 1.32; }
  .svc-name { font-size: 18px; margin-bottom: 9px; }
  .svc-ex { gap: 5px 16px; }
  .svc-ex li {
    position: relative;
    padding: 0 0 0 14px;
    border-left: 0;
    font-size: 13.5px;
  }
  .svc-ex li::before {
    content: "";
    position: absolute;
    left: 0; top: .72em;
    width: 8px; height: 1px;
    background: var(--teal-500);
  }

  .str { gap: 38px; }
  .str-no { font-size: 26px; margin-bottom: 8px; }
  .str-desc { margin-left: 0; margin-top: 12px; }

  .cm-mark { gap: 14px; padding-top: 22px; }
  .cm-mark img { width: 52px; }

  .cmp-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding-block: 16px;
  }
  .cmp-row dt { color: var(--teal-500); font-size: 12.5px; }

  .sec-contact {
    --ch: clamp(38px, 11vw, 56px);
    padding-top: clamp(86px, 24vw, 116px);
  }
  .ct-tel { padding: 19px 20px 21px; }
  .ct-tel .lb,
  .ct-mail .lb { flex-direction: column; align-items: flex-start; gap: 3px; }
  .ct-tel .num { font-size: clamp(24px, 7vw, 32px); }
  .ct-mail .val { font-size: clamp(15px, 4.2vw, 19px); }

  /* ロゴ・社名・住所・メニューをすべて左端で揃える */
  .ft-in { flex-direction: column; gap: 26px; }
  .ft-brand { flex-direction: column; gap: 14px; }
  .ft-addr .nb { display: block; }
  .ft-addr .ft-branch { display: block; margin-right: 0; }
  .ft-addr .sep { display: none; }
  .ft-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
    gap: 13px 16px;
  }
}