/* ==========================================================================
   地球防衛隊サイト — pages/top.css
   02-page-top.md の写経。トップ固有セクション。
   セクション: FV / ABOUT US・役割 / CASE / STRENGTHS / SERVICE / COLUMN / INFORMATION
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FVヒーロー p-fv（0〜約1465px）
   全幅の写真ステージ（Ken Burns巡回）＋暗幕＋中央ブランドコピー。
   アニメの詳細付与は 09（GSAP/JS）。ここは静的な見た目の土台。
   -------------------------------------------------------------------------- */
.p-fv {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
}
/* 停留ベース＝会議写真（4枚のフェード間も常に背後に見える）。z最下段。 */
.p-fv__base {
  position: absolute; inset: 0;
  z-index: -3;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.p-fv::after { /* 暗幕 #373737 70% 乗算（PDF「重ねる色 黒373737 / 不透明度70% / 乗算」） */
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: #373737;
  opacity: .70;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   1-b. FVイントロ物語（p-fv-intro）
   4枚が各テキスト＋SKIPと同期して ズームアウト&フェード。初回1回のみ再生し
   完了(またはSKIP/スクロール)で is-done → フェードアウトして②会議写真ヒーローを見せる。
   JS駆動: 既定は display:none（.js が付いたら表示）＝非JS/reduce-motionは②を直接表示。
   -------------------------------------------------------------------------- */
.p-fv-intro {
  position: absolute; inset: 0;
  z-index: 10;
  display: none;
  overflow: hidden;
  background: #1c1c1c; /* 不透明ベース＝切替の隙間で会議写真がチラ見えするのを防ぐ */
  transition: opacity .8s ease;
}
.js .p-fv-intro { display: block; }
.p-fv-intro.is-done { opacity: 0; pointer-events: none; }
.p-fv-intro__slide {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover; /* 全面を埋める（余白/黒帯なし）・縦横は自動クロップ */
  background-repeat: no-repeat;
  opacity: 0;
  /* 0831修正・トップ5「もう少し〝ふわっ〟とした出現に」＝立ち上がりを緩めた ease-out 寄りに */
  transition: opacity 1.2s cubic-bezier(.33, 0, .2, 1);
}
.p-fv-intro__slide.is-active {
  opacity: 1; /* クロスフェード（JSが前スライドをz下で不透明維持→隙間なし） */
  animation: fvIntroKen 3.6s ease-out both; /* ゆっくりズームアウト */
}
@keyframes fvIntroKen {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
/* 暗幕＝#373737 を 70% 乗算。サイト内の写真オーバーレイと同じ値に統一（2026-08-23）。
   根拠: ①Figmaが持っているFVの暗幕素材は #373737（書き出しを実測・単一色）
         ②同じ扱いのCASEカルーセルのカードをFigma書き出しから逆算すると **ちょうど70%の乗算**（残差1.5）
         ③デザイントークン --overlay-ink も「#373737@70% 写真オーバーレイ」
   以前は rgba(20,20,20,.30)（色も方式も別物）で、FV01の白文字が背景に沈んでいた。 */
.p-fv-intro__slide::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: #373737;
  opacity: .70;
  mix-blend-mode: multiply;
}
/* FV01〜04: PC=高解像の横写真／SP=368:701で被写体中心にトリミングした縦写真。
   url()はtop.css基準の相対（assets/css/pages → ../../images/...）。SP版は下の @media で切替。
   FV04 は 2026-08-22 にグレーダミー(--art)を廃止して本番Figmaの実写真へ差し替え。 */
.p-fv-intro__slide--fv01 { background-image: url('../../images/fv-intro/fv01.jpg'); }
.p-fv-intro__slide--fv02 { background-image: url('../../images/fv-intro/fv02.jpg'); }
.p-fv-intro__slide--fv03 { background-image: url('../../images/fv-intro/fv03.jpg'); }
.p-fv-intro__slide--fv04 { background-image: url('../../images/fv-intro/fv04.jpg'); }
/* ⚠️ FV04だけ暗幕を濃くしていた（.30→.46）が、2026-08-23 に4枚とも #373737 70% 乗算へ統一したので撤去。
   4枚を別々の濃さにするとFigmaの1種類の暗幕素材と合わなくなる。 */
.p-fv-intro__text {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28px;
  line-height: 2.4;
  letter-spacing: 4px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
  padding: 0 24px;
}
/* 出ていくスライドの文字は先に消す（写真だけ1秒かけてクロスフェードする）。
   これが無いと切替の1秒間、前後の文が重なって読めない（2026-08-23 修正）。 */
.p-fv-intro__slide.is-leaving .p-fv-intro__text {
  opacity: 0;
  transition: opacity .3s ease;
}
/* 2026-08-23 前田社長「PCのテキスト全部 一個ずつ半角スペース入れて」。
   HTMLに実スペースを挟むとコピー・検索・読み上げが「建 物 は」と壊れるので、
   **同じ見た目になる字送り**で入れる。実測: 28px のこの書体で半角スペース1個 = 7.98px。
   → 既存の 4px に 8px を足して 12px。中央揃えは末尾の字送りぶん左へ寄るので 4px 戻す。 */
@media (min-width: 768px) {
  /* 字送りは最後の1文字の後ろにも入るので、中央揃えが ls/2 ぶん左へ寄る。6px 戻して中心に合わせる
     （実測: 戻し4pxで画素中心 716〜717.5／画面中心720 → 6px が正） */
  .p-fv-intro__text { letter-spacing: 12px; transform: translateX(6px); }
}
.p-fv-intro__skip {
  position: absolute;
  bottom: 40px;
  /* 2026-08-23 前田社長: 一度左へ40pxしたあと「右に200移動」。
     content(1100)右端の基準 550 → 710 に。1440幅では max(20px,…) の下限に当たるので実移動は192px、
     1920幅では指定どおり200px右へ動く。 */
  right: max(20px, calc(50% - 710px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  /* 2026-08-23: 「SKIPが見えない」（前田社長）→ 明るい写真の上でも読めるように
     不透明度を上げ、FV本文と同じ考え方で影を敷く。文字も1px大きく。 */
  font-size: 13px;
  opacity: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  transition: opacity .2s ease;
}
.p-fv-intro__skip:hover { opacity: .8; }
.p-fv-intro__skip-ico { /* ▶| （最後まで飛ばす）アイコン: 三角＋縦バー */
  position: relative;
  width: 11px; height: 9px;
}
.p-fv-intro__skip-ico::before {
  content: ""; position: absolute; left: 0; top: 0;
  border-style: solid; border-width: 4.5px 0 4.5px 7px;
  border-color: transparent transparent transparent currentColor;
}
.p-fv-intro__skip-ico::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: 2px; height: 9px; background: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .js .p-fv-intro { display: none; } /* イントロを飛ばして会議写真ヒーローを表示 */
}
@media (max-width: 767px) {
  /* Figma書き出し（SP用テキストレイヤー）を1文字ずつ実測して確定（2026-08-23）:
       FV01〜03 = 文字送り36.25 / 字面高28.5 / 行送り90  → 30px・ls6.25・lh90px
       FV04     = 文字送り38.75 / 字面高30.0 / 行送り80  → 32px・ls6.75・lh80px
     ⚠️ FV04 だけ「ひと回り大きく・行間は詰め」なのは実測どおり（5行に増えるための調整と読める）。
        書き出しの拡大率違いではない＝行送りだけ逆方向に動いているため。 */
  /* 2026-08-23 前田社長「SPのテキストとSKIPを全部1行ずつ上に」。
     1行 = その行送り（FV01〜03は90px／FV04は80px）ぶん持ち上げる。 */
  .p-fv-intro__text { font-size: 30px; line-height: 90px; letter-spacing: 6.25px; transform: translateY(-90px); }
  .p-fv-intro__slide--fv04 .p-fv-intro__text { font-size: 32px; line-height: 80px; letter-spacing: 6.75px; transform: translateY(-80px); }
  /* SPは `.p-fv{height:100vh}` の下端がブラウザ下部バーの裏に入りやすいので、
     SKIPを持ち上げて必ず可視域に入れる（ホームバー分の safe-area も足す）。 */
  .p-fv-intro__skip { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); right: 20px; }  /* 56 + 1行(90) */
  /* SPは縦トリミング版に切替 */
  .p-fv-intro__slide--fv01 { background-image: url('../../images/fv-intro/fv01-sp.jpg'); }
  .p-fv-intro__slide--fv02 { background-image: url('../../images/fv-intro/fv02-sp.jpg'); }
  .p-fv-intro__slide--fv03 { background-image: url('../../images/fv-intro/fv03-sp.jpg'); }
  .p-fv-intro__slide--fv04 { background-image: url('../../images/fv-intro/fv04-sp.jpg'); }
}
.p-fv__copy {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  padding: 0 20px;
}
.p-fv__en { /* NENGO = Montserrat Bold（Mulishではない） */
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 3.6px;
}
.p-fv__brand { /* 地球防衛隊 = Noto Sans JP Bold 30px / tracking 6px（PDF指示） */
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 6px;
  line-height: 1.2;
  margin-top: 12px;
}
.p-fv__tag { /* Yu Gothic Std B 16px / tracking 1.6px */
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
  margin-top: 16px;
}
/* SCROLL: 縦テキスト＋白線（線が上→下へ伸びて消えるをrepeat） */
.p-fv__scroll {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.p-fv__scroll-txt {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 2px;
  writing-mode: vertical-rl;
}
.p-fv__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, .28); /* トラック（薄い） */
  overflow: hidden;
}
.p-fv__scroll-line::after { /* 明るいセグメントが上→下へ伸びて消える */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-white);
  animation: fvScrollLine 2.2s cubic-bezier(.7, 0, .3, 1) infinite;
}
@keyframes fvScrollLine {
  0%      { transform: scaleY(0); transform-origin: top; }
  55%     { transform: scaleY(1); transform-origin: top; }
  55.01%  { transform: scaleY(1); transform-origin: bottom; }
  100%    { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .p-fv__scroll-line::after { animation: none; transform: scaleY(1); }
}

/* --------------------------------------------------------------------------
   2. ABOUT US / 役割 p-about-intro（背景 生成り H639）
   -------------------------------------------------------------------------- */
/* FV内に出現する「役割」reveal（背景=会議写真の白黒版 fv-hero-bg-bw ＋暗幕の上に白文字・左=見出し/右=本文）
   ＝停留(カラー会議写真)→スクロールで同じ会議写真が白黒に変わる＋ヘッダー出現。背景url()は要素へ直接インライン(BF-002)。
   既定は非表示、スクロール連動でJSが opacity を上げる（.js スコープでガード）。 */
.p-fv__reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  color: var(--color-white);
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  isolation: isolate;
}
.p-fv__reveal::before { /* 専用写真の暗幕 #373737 70% 乗算（FVヒーローと同トーン） */
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: #373737;
  opacity: .70;
  mix-blend-mode: multiply;
}
.js .p-fv__reveal { opacity: 0; }
.js .p-fv__reveal.is-in { pointer-events: auto; }
.p-fv__reveal-grid {
  position: relative;
  z-index: 1; /* 暗幕(::before)より前 */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 60px;
  align-items: stretch; /* ①左列(head)を本文の高さまで伸ばし、ABOUT USを下部の本文行に揃える */
  width: min(var(--content-w), 100% - 40px);
}
.p-fv__reveal-head {
  display: flex;
  flex-direction: column;
}
.p-fv__reveal-title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 2.4px;
}
/* ① ABOUT US を「そのため私たちは〜」(第3段落)の行の高さに揃える（下寄せ＋1行分持ち上げ） */
.p-fv__reveal-label {
  margin-top: auto;
  margin-bottom: 42px;
  font-family: var(--font-en-alt);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
}
/* ② ABOUT US 下は「長い線＋右矢印」のSVG（Figma vec-aboutus-underline.svg・247px）。ただの下線ではない */
.p-fv__reveal-label::after {
  content: "";
  display: block;
  width: 247px;
  height: 6px;
  margin-top: 10px;
  background: url('../../images/fv/vec-aboutus-underline.svg') no-repeat left center / 247px 5px;
}
/* .p-fv__reveal-more（詳しく見る）は金谷さん指示でトルツメ（削除） */
.p-fv__reveal-body p {
  /* 0831修正・トップ1「文字の太さをワンウエイト太くしたい」
     游ゴシックは 400/700 しか無く 500 を指定しても 400 に落ちて変化しないため、
     本文の既定どおり Noto Sans JP（--font-body）の 500 にする（弊社の本文ルール）。
     旧: --font-jp / 400 */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 38px;
  letter-spacing: 0.8px; /* Figma tracking 0.8px */
}
.p-fv__reveal-body p + p { margin-top: 34px; } /* 段落間に1行分の空きを入れる（見本準拠・ベタ詰め解消） */

/* 共通セクション見出し p-sec-head は components.css に移動（複数ページで共有） */

/* --------------------------------------------------------------------------
   3. CASE カルーセル c-case-carousel（01〜06）— Swiper（09で挙動付与）
   -------------------------------------------------------------------------- */
.c-case-carousel { padding: 80px 0; }
.c-case-carousel .swiper { overflow: hidden; }
/* ★白ヴェール(opacity)は付けない＝左右も暗幕+写真をそのまま表示（金谷さん依頼） */
.c-case-carousel__card {
  position: relative;
  height: 380px;            /* SP既定（PCは下の @media で Figma実寸に上書き） */
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* CASE-4: 下寄せ→中央 */
  align-items: center;      /* CASE-4: 文字はセンター揃えに */
  text-align: center;       /* CASE-4 */
  padding: 32px;
  background-color: var(--color-gray180);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* --- PC（768〜）: 王道 peek カルーセル（案②・前田社長 2026-07-17 決定／比較ページ nengo-case-compare の②を採用）-----
   前田社長が比較ページ https://nengo-case-compare.surge.sh/ の「案②・gap120」を最終決定。
   ★仕様: 全カードを同じ 733px 幅にして、gap（spaceBetween）を 80px に広げる → 左右のカードが
     画面外へ押し出されて見切れる（＝「続きがある」王道 peek）。表示は常に中央＋左右1枚ずつの3枚。
     サイドは高さ 352 の短いまま／アクティブだけ高さ 523。**幅は全カード共通なので送りは「高さだけ」
     伸び縮みする**（前田社長指摘の「本番は横幅がモワッと変わる」動きを解消し、比較②と同じ挙動に）。
   ★gap は JS 側 breakpoints 768 の spaceBetween:80（main.js・前田社長 2026-07-17 決定）。切れ具合を変える時はこの値を増減。
     1920幅で サイド可視 約514px・切れ 約220px。中央は常に画面中央（centeredSlides）。
   ★実装ノート: 全カード同幅なので loop は素直に安定。ただし戻し操作で片側の隣が描画されない事故を防ぐため
     実スライドを 6→12枚に複製（main.js）。※過去の失敗の詳細は dev/docs/bugfix-master.md BF-080。 */
@media (min-width: 768px) {
  /* ⚠️ 送りの途中で下の STRENGTHS が上下に動く問題の対策（2026-08-23 前田社長指摘）。
     原因＝コンテナの高さが「一番高いスライド」に追従すること。送り中は出ていくカードが 523→352、
     入ってくるカードが 352→523 と同時に動くので、中間で両方 438 になりコンテナが 85px 縮む
     （実測: STRENGTHSの上端が 951 → 866 → 951 と往復）。
     コンテナを一番高い状態に固定し、中のカードだけ伸縮させれば、外側の高さは動かない。 */
  .c-case-carousel .swiper { height: 523px; }
  .c-case-carousel .swiper-wrapper { height: 100%; align-items: flex-start; } /* サイド352の上端＝アクティブ523の上端で揃える */
  .c-case-carousel .swiper-slide {
    width: 733px;                                              /* 全カード共通幅（＝王道peek・送りは高さのみ変化） */
    height: 352px;                                             /* 非アクティブ＝高さ小 */
    transition: height .4s ease;                              /* 高さだけアニメ（幅は動かさない＝比較②と同じ動き） */
  }
  .c-case-carousel .swiper-slide-active {
    height: 523px;                                             /* アクティブ＝高さ大（幅は733のまま） */
  }
  .c-case-carousel__card { width: 100%; height: 100%; }        /* カードは slide 枠を満たす */
}

.c-case-carousel__card::after { /* C-3: 暗幕 #373737 70% 乗算（PDF02「重ねる色：黒70%、乗算に変更」）＝FVと同トーンに統一 */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: #373737;
  opacity: .70;
  mix-blend-mode: multiply;
}
.c-case-carousel__card > * { position: relative; z-index: 2; }

/* 0831修正・トップ2/3「マウスホバー時にテキストと黒いオーバーレイを消し、写真のみが綺麗に見える状態へ」
   下層の c-case-grid（想定されるケース6枚）と同じ挙動に揃える。
   タッチ端末では :hover が張り付くので hover 可能な環境に限定する。 */
.c-case-carousel__card::after,
.c-case-carousel__num,
.c-case-carousel__title,
.c-case-carousel__tag { transition: opacity .4s ease; }
@media (hover: hover) {
  .c-case-carousel__card:hover::after { opacity: 0; }
  .c-case-carousel__card:hover .c-case-carousel__num,
  .c-case-carousel__card:hover .c-case-carousel__title,
  .c-case-carousel__card:hover .c-case-carousel__tag { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .c-case-carousel__card::after,
  .c-case-carousel__num,
  .c-case-carousel__title,
  .c-case-carousel__tag { transition: none; }
}
.c-case-carousel__num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 2.4px;
}
.c-case-carousel__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: 2px;
  margin-top: 8px;
}
.c-case-carousel__tag {
  font-family: var(--font-jp);
  font-weight: 700;  /* CASE-3: 金谷さん「BOLDに」＝ここだけウェイト指定が抜けていた（Figmaも Yu Gothic Std B） */
  font-size: 16px;
  margin-top: 12px;
}
.c-case-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}
.c-case-carousel__bar {
  position: relative;
  width: 240px; height: 2px;
  background: var(--color-gray180);
}
.c-case-carousel__bar span {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--color-ink);
  transition: width .3s;
}
.c-case-carousel__pager {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-ink);
}
.c-case-carousel__pager em { font-style: normal; color: var(--color-main); }
.c-case-carousel__arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  display: grid;
  place-content: center;
  position: relative;
}
.c-case-carousel__arrow::after {
  content: "";
  width: 8px; height: 8px;
  border-top: 1px solid var(--color-ink);
  border-right: 1px solid var(--color-ink);
}
.c-case-carousel__arrow--prev::after { transform: rotate(-135deg); margin-left: 4px; }
.c-case-carousel__arrow--next::after { transform: rotate(45deg); margin-right: 4px; }

/* --------------------------------------------------------------------------
   4. STRENGTHS p-strengths（背景 #EDEBE5・2カラム: 左=写真 / 右=アコーディオン）
   4項目は+/−開閉（1つ目だけ開）。区切り線 #373737。
   -------------------------------------------------------------------------- */
.p-strengths {
  width: 100%;
  background: var(--color-bg-soft);
  padding: 80px 0;
}
.p-strengths__grid {
  display: grid;
  /* 右カラムを desc 614px（Figma実データ 2757:3366）が収まる幅に。金谷さん新原稿を2行にするため。
     左画像 約422px + gap48 + 右 約630px = 1100（l-inner）。 */
  grid-template-columns: 422px 1fr;
  gap: 48px;
  align-items: start; /* 中央寄せにしない＝アコーディオン開閉で画像を伸ばさない */
}
.p-strengths__visual {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 560px; /* 固定高さ＝+/−開閉でサイズが変わらない */
  align-self: start;
  background-color: var(--color-gray180);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* 自動スライド5枚（本番Figma「写真変更（自動スライド想定）」）。
   1枚5秒・フェード0.6秒・25秒で1周。純CSSなのでJS失敗時もベース背景（1枚目）が残る。 */
.p-strengths__shot {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .4s ease; /* サムネのホバーで自動スライドを止めた時のフェード */
  animation: strengthsSlide 25s ease-in-out infinite;
}
.p-strengths__shot:nth-child(1) { animation-delay: 0s; }
.p-strengths__shot:nth-child(2) { animation-delay: 5s; }
.p-strengths__shot:nth-child(3) { animation-delay: 10s; }
.p-strengths__shot:nth-child(4) { animation-delay: 15s; }
.p-strengths__shot:nth-child(5) { animation-delay: 20s; }
@keyframes strengthsSlide {
  0%    { opacity: 0; }
  2.4%  { opacity: 1; } /* 0.6s でフェードイン */
  20%   { opacity: 1; } /* 5s 表示 */
  22.4% { opacity: 0; }
  100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .p-strengths__shot { animation: none; }
  .p-strengths__shot:nth-child(1) { opacity: 1; }
}
/* サムネにホバー/フォーカス/タップしている間は自動スライドを止め、その1枚だけを出す（main.js が is-manual を付ける）。 */
.p-strengths__visual.is-manual .p-strengths__shot { animation: none; opacity: 0; }
.p-strengths__visual.is-manual .p-strengths__shot.is-shown { opacity: 1; }
/* Figma準拠: 大ビジュアルと同じ幅で5等分・隙間はほぼ無し（Figma実測 1px）。比率は 122:157。 */
.p-strengths__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: 2px;
}
.p-strengths__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 122 / 157;
  padding: 0;
  border: 0;
  background-color: var(--color-gray180);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: .55; /* 選んでいない間は落とす＝今どれを見ているかが分かる */
  transition: opacity .3s ease;
}
.p-strengths__thumb:hover,
.p-strengths__thumb:focus-visible,
.p-strengths__thumb.is-current { opacity: 1; }
.p-strengths__thumb:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }
.p-strengths__list { display: grid; gap: 0; }
.p-strengths__item {
  border-top: 1px solid var(--color-ink);
}
.p-strengths__item:last-child { border-bottom: 1px solid var(--color-ink); }
.p-strengths__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--color-ink);
}
.p-strengths__name::-webkit-details-marker { display: none; }
.p-strengths__toggle {
  position: relative;
  width: 18px; height: 18px;
  flex: 0 0 auto;
}
.p-strengths__toggle::before,
.p-strengths__toggle::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--color-ink);
  transform: translate(-50%, -50%);
}
.p-strengths__toggle::before { width: 18px; height: 2px; }
.p-strengths__toggle::after  { width: 2px; height: 18px; }
.p-strengths__item[open] .p-strengths__toggle::after { opacity: 0; }
.p-strengths__desc {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 15px;   /* Figma実データ 2757:3366 準拠（15px / lh30 / w614 で2行） */
  line-height: 30px;
  letter-spacing: .75px;
  color: var(--color-ink);
  padding: 0 4px 24px;
}

/* --------------------------------------------------------------------------
   4b. FAQ p-faq（背景 #50694B@10%・アコーディオン5問）
   -------------------------------------------------------------------------- */
.p-faq {
  width: 100%;
  background: rgba(80, 105, 75, .10);
  padding: 80px 0;
}
.p-faq__list { margin-top: 8px; }

/* --------------------------------------------------------------------------
   5. SERVICE p-service-list（4項目・大画像カード）
   -------------------------------------------------------------------------- */
.p-service-list { padding: 80px 0; }
.p-service-list__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.p-service-card {
  position: relative;
  min-height: 330px;
  overflow: hidden;
  color: var(--color-white);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;      /* ★中央揃え（金谷さん依頼） */
  justify-content: center;
  text-align: center;
  padding: 40px 32px;
  background-color: var(--color-gray180);
  background-position: center bottom; /* SRV-5: Figmaの写真は object-bottom（下端基準）で配置されている */
  background-size: cover;
  background-repeat: no-repeat;
}
.p-service-card::after { /* C-3: 暗幕 #373737 70% 乗算（PDF03「重ねる色：黒70%、乗算に変更」）＝FV/CASEと同トーンに統一 */
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: #373737;
  opacity: .70;
  mix-blend-mode: multiply;
}
.p-service-card > * { position: relative; z-index: 2; }
.p-service-card__jp {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 7.2px;
}
.p-service-card__desc {
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: 15px;
  line-height: 30px;
  margin-top: 16px;
  max-width: 460px;
}
.p-service-card__more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.6px;
}
.p-service-card__more::after {
  content: "";
  width: 40px; height: 1px;
  background: var(--color-white);
  transition: width .4s ease;
}
/* 0831修正・トップ4「ホバー時に『詳しく見る』の横棒（3倍程度）が伸びる」＝ 40px → 120px */
@media (hover: hover) {
  .p-service-card:hover .p-service-card__more::after { width: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .p-service-card__more::after { transition: none; }
}

/* --------------------------------------------------------------------------
   6. COLUMN（お役立ちコラム）
   -------------------------------------------------------------------------- */
.p-column { padding: 80px 0; }
.p-column__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.p-column__list .c-column-card { width: 100%; }
/* ダミーは無地の薄グレー（実写真差し替え前提・白背景でも見える濃さ） */
.p-column__list .c-column-card__thumb { background-color: #e4e4e4; background-image: none; }
.p-column__list .c-column-card__title {
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   7. INFORMATION p-information（背景 生成り H478・Insta連携）
   -------------------------------------------------------------------------- */
.p-information {
  width: 100%;
  background: var(--color-bg-soft);
  padding: 72px 0;
}
.p-information__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.p-information__cell {
  display: block; /* Instagram投稿へのリンク＝<a>。グリッド子でblock化されるが明示しておく */
  aspect-ratio: 1;
  background: var(--color-white) center/cover no-repeat;
  transition: opacity .3s ease;
}
.p-information__cell:hover,
.p-information__cell:focus-visible { opacity: .8; }
.p-information__cell:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   fade-up（IntersectionObserverで .is-in 付与・09-animation §7）
   -------------------------------------------------------------------------- */
/* .js スコープ = JS有効時のみ隠す（JS/CSS失敗時はコンテンツ常時表示） */
.js .mt-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.js .mt-fade.is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   レスポンシブ（PC1440 → SP375）
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .p-column__list { grid-template-columns: repeat(2, 1fr); }
  .p-information__grid { grid-template-columns: repeat(2, 1fr); }
}
/* --- SP（Figma SPフレーム実測・2026-08-23）------------------------------------
   カードは**全幅375×高さ268の1枚**（PCのような左右の見切れは無い）。
   実測(1x): カード 921..1189／「01」ink 956.5..973(w25)／見出し2行 lh40.5・行幅238.5と325.5／
             「対応：耐火被覆」ink 1104..1118(w120)／白い矢印線 y1162・x98..278.5(w180.5)
   送り: `<` x18.5..27 ／ バー x68..307.5(w239.5) ／ `>` x348.5..357 が同じ行、
         「01 / 06」はその下の行に中央。矢印は**丸で囲まない**（PCの丸は据え置き）。 */
@media (max-width: 767px) {
  .c-case-carousel { padding: 56px 0; }
  .c-case-carousel .swiper-slide { transform: none; }
  .c-case-carousel__card {
    height: 268px;
    padding: 32px 24px;
  }
  /* Figma SPだけ「対応：〇〇」の下に白い矢印線が入る（PCフレームには無い）。実測 x98..278.5＝180.5px。
     🔴 2026-08-23 修正: 以前は「62pxの矢印アセット＋全幅のグラデ線」の2層で描いていたため、
        **短い矢印の上に長い線が重なって見えていた**（前田社長指摘）。
        180.5px 専用アセットの1枚だけにして「長い線＋矢羽根1つ」にする。 */
  .c-case-carousel__tag::after {
    content: "";
    display: block;
    width: 180.5px; height: 5.4px;
    margin: 40px auto 0;
    background: url('../../images/nengo/arrows/vec-case-card-arrow-sp.svg') no-repeat left top / 180.5px 5.4px;
  }
  /* 送り: 1段目 = 矢印・バー・矢印／2段目 = ページャ中央 */
  .c-case-carousel__nav {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "prev  bar   next"
      "pager pager pager";
    align-items: center;
    row-gap: 22px;
    gap: 0 0;
    margin-top: 30px;
  }
  .c-case-carousel__arrow--prev { grid-area: prev; }
  .c-case-carousel__arrow--next { grid-area: next; }
  /* Figma SP実測: バーは高さ6pxの角丸（トラック #B4B4B4 / 進捗 #373737）。PCは2px。 */
  .c-case-carousel__bar {
    grid-area: bar; justify-self: center;
    width: 240px; height: 6px; border-radius: 3px; overflow: hidden;
  }
  .c-case-carousel__bar span { border-radius: 3px; }
  .c-case-carousel__pager { grid-area: pager; justify-self: center; }
  .c-case-carousel__arrow {
    width: 22px; height: 22px;
    border: none;
    border-radius: 0;
  }
  /* Figma SP実測: 矢印は 10×11・#373737。線は2pxで見た目が合う */
  .c-case-carousel__arrow::after { width: 10px; height: 10px; border-width: 2px; }
}

@media (max-width: 767px) {
  .p-fv__brand { font-size: 44px; }
  /* FV「役割」（Figma SPフレーム実測・1x）: 暗部 103..643／見出し ink 175.5..193.5(w255・中央)／
     本文 x21..349・行送り28・字面13.5／「ABOUT US」 ink 551..562 は**左端20**／
     その下の線＋矢印は x20..268.5(=247pxアセット原寸)。
     PCは「左に見出し＋ABOUT US／右に本文」の2カラムなので、SPは
     見出し → 本文 → ABOUT US の順に組み替える（head を display:contents で解体する）。 */
  /* 🔴 2026-08-24 前田社長指示「左側をもっと見せてほしい・Figma準拠」。
     背景 fv-hero-bg-bw.jpg は 1920×1440。SP枠 375×812 に cover で敷くと可視幅は 665px ＝
     はみ出し 1255px。center(50%) だと手前の後頭部が主役になり、プロジェクター画面と左側の人が切れる。
     Figma SPフレーム sp-top.png の当該ブロック（y103..643）を原本にNCCで突合 → 映しているのは
     x84..1056（横中心 570px／画像中心 960px より 390px 左）。
     その中心に合わせる値 =（570 − 665/2）÷ 1255 = 18.9%。PCは center のまま変えない。 */
  /* 停留（スクロール前）の `fv-hero-bg.jpg` と、reveal の白黒版 `fv-hero-bg-bw.jpg` は
     どちらも 1920×1440 の同一カット。SPでは2枚の横位置を揃える（2026-08-24 前田社長指示）。
     揃えないと、reveal に切り替わった瞬間に背景が横にスライドして見える。PCは center のまま。 */
  .p-fv__base,
  .p-fv__reveal { background-position: 18.9% center; }
  .p-fv__reveal-grid { grid-template-columns: 1fr; gap: 0; }
  .p-fv__reveal-head { display: contents; }
  .p-fv__reveal-title {
    order: 1;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 1.6px;
    text-align: center;
  }
  .p-fv__reveal-body { order: 2; margin-top: 26px; }
  .p-fv__reveal-body p { font-size: 14px; line-height: 28px; }
  .p-fv__reveal-label { order: 3; margin: 42px 0 0; }
  .p-fv__reveal-label::after { margin-top: 12px; }

  /* STRENGTHS（Figma SPフレーム実測）: 見出し→本文→アコーディオン→**写真ストリップ**の順。
     PCの「大ビジュアル＋サムネ5枚」は縦2カラムの左列なので、SPでは
     大ビジュアルを畳んでサムネ列だけを全幅の横スクロール帯（実測 1x 1871..2101＝高さ230）にする。 */
  /* セクションの上下余白（Figma SPフレーム実測・2種類しかない）:
       白背景（CASE / SERVICE / COLUMN）= 上端→英字見出しの字面 55.5px
       色背景（STRENGTHS / FAQ / INFORMATION）= 同 35.5〜36.5px
     英字見出しは 40px/lh40 で字面が箱の上から5.5px下なので、padding は 50px / 30px。 */
  .c-case-carousel,
  .p-service-list,
  .p-column { padding: 50px 0; }
  .p-faq,
  .p-information { padding: 30px 0; }
  .p-strengths { padding: 30px 0 0; }   /* 下は写真帯が接するので0（帯までの間隔はgridのgapで持つ） */
  .p-strengths__grid { gap: 15px; }     /* 実測: 4項目の最後の線→写真帯の上端が15px */

  /* STRENGTHS のアコーディオン（Figma SPフレーム実測・1x）:
       区切り線 x20..355 ／ 閉じた項目は 線〜線で **63px**
       項目名 字面19（=20px）・線から21.5px下 → 上下 padding 16px・左右 0
       説明   字面13.5・行送り**26**（現行は15px/lh30） */
  .p-strengths__name { padding: 16px 0; }
  .p-strengths__desc { font-size: 14px; line-height: 26px; padding: 0 0 15px; }
  /* 説明もFigma SPは自然折返し3行（PC用の<br>で折ると4行になる） */
  .p-strengths__desc br { display: none; }
  /* Figma SPの導入文は「…大切に／している4つの…」＝自然折返し。
     PC用に入れてある <br>（「において」で改行）はSPでは効かせない。 */
  .p-strengths .p-sec-head__body br { display: none; }

  .p-strengths__grid { grid-template-columns: 1fr; }
  /* min-width:0 が無いとグリッド項目が中身の幅（178×5）まで伸びて横スクロールが効かない */
  .p-strengths__figure { order: 2; min-width: 0; margin-inline: calc(var(--side-pad) * -1); }
  .p-strengths__visual { display: none; }
  .p-strengths__thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 178px;
    grid-template-columns: none;
    gap: 2px;
    margin-top: 0;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: none;
  }
  .p-strengths__thumbs::-webkit-scrollbar { display: none; }
  .p-strengths__thumb {
    aspect-ratio: auto;
    height: 230px;
    pointer-events: none;   /* 大ビジュアルを畳んでいるので切替ボタンとしては効かせない */
    /* PCは非選択のサムネを opacity:.55 に落として「今どれを見ているか」を示すが、
       SPは切替そのものが無いので薄い白が掛かって見えるだけ。全部そのままの濃さで出す
       （2026-08-23 前田社長指示）。 */
    opacity: 1;
  }
  /* SERVICE（Figma SPフレーム実測・1x）: カードは**全幅375×高さ234**を10px間隔で縦積み。
     カード内 padding 40px／和文見出し ink幅105・字面19.5 → 22px/ls6.6（PCは24/7.2）／
     説明文 行送り28・字面13.5／「詳しく見る」の右の線は**SPでは無い**（ink幅83＝文字だけ）。
     PC用に入れてある <br>（PDF鉤マーク指定）はSPでは効かせない＝自然折返しにする。 */
  .p-service-list { padding: 56px 0; }
  .p-service-list__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-inline: calc(var(--side-pad) * -1);
  }
  /* Figma SP実測（カード上端2357を0とした字面位置）:
       見出し字面 40 ／ 説明1行目 89.5（行送り28・3行）／「詳しく見る」字面 181.5 ／ カード下端 234
     行の箱を lh:1 にして字面基準で積むと 234 に収まる（既定の line-height だと 263 になっていた）。 */
  .p-service-card { min-height: 234px; padding: 40px; }
  .p-service-card__jp { font-size: 22px; letter-spacing: 6.6px; line-height: 1; }
  /* Figma SP実測: 説明文は**左揃え**（3行目 x=40.5 で左端が揃い右が余る）。見出しと「詳しく見る」は中央のまま。 */
  .p-service-card__desc { line-height: 28px; margin-top: 21px; text-align: left; align-self: stretch; }
  .p-service-card__desc br { display: none; }
  .p-service-card__more { margin-top: 15px; line-height: 1; }
  .p-service-card__more::after { display: none; }
  .p-column__list { grid-template-columns: 1fr; }
  .p-information__grid { grid-template-columns: repeat(2, 1fr); }

  /* FAQ（Figma SPフレーム実測・1x／セクション地 = rgba(80,105,75,.10) = (238,240,238)）:
       Qカード  = x20..355・高さ82・**白・枠線なし**（現行は1px枠線あり）
       Aエリア  = **白カードの外＝セクション地色**（現行は白カード内で、QとAが同じ白だった）
       項目間   = 10px（現行14px）
       中の位置 = Qマーク x31 / 本文 x66.5 / ＋− x330..344.5（幅14.5）
       Aの中身  = マーク x30 / 本文 x66.5・カード下端から15px下に1行目
     ⚠️ Aの「上下センター揃え」は金谷さんPDF03のPC指示なのでPCは触らない。
        SPは回答が5行になり、Figmaでも「A」は1行目の高さにあるので上揃えにする。 */
  .c-accordion { gap: 10px; }
  .c-accordion__item { background: transparent; border: 0; }
  .c-accordion__q {
    background: var(--color-white);
    padding: 16px 10px 16px 11px;
    gap: 22px;
  }
  .c-accordion__a {
    align-items: flex-start;
    padding: 15px 10px 26px 11px;
    gap: 22px;
  }
  /* 回答テキストは Figma SP実測で 字面13.5・行送り24（PCは金谷さんPDF03指示の15px/lh30） */
  .c-accordion__a-text { font-size: 14px; line-height: 24px; }
  .c-accordion__toggle { width: 15px; height: 15px; }
  .c-accordion__toggle::before { width: 15px; }
  .c-accordion__toggle::after { height: 15px; }

  /* COLUMN / INFORMATION の「一覧へ」リンク（Figma SPフレーム実測・1x）:
       PCは見出しの右上／SPは**カード一覧の下・右寄せ**で、線は 249px（PCは140.5px）。
       コラム一覧へ  文字 x110.5..211.5 / 線 x108..357
       インスタグラムへ 文字 x109.5..246.5 / 線 x108..357
     DOM は 見出し→リンク→本文→一覧 の順なので、SPだけ flex + order で並べ替える。 */
  .p-column .l-inner,
  .p-information .l-inner { display: flex; flex-direction: column; }
  .p-column .p-sec-head,
  .p-information .p-sec-head,
  .p-column .p-sec-head__titleline,
  .p-information .p-sec-head__titleline { display: contents; }
  .p-column .p-sec-head__heading,
  .p-information .p-sec-head__heading { order: 1; }
  .p-column .p-sec-head__body,
  .p-information .p-sec-head__body { order: 2; }
  .p-column__list { order: 3; margin-top: 36px; }
  .p-information__grid { order: 3; margin-top: 36px; }
  .p-column .p-sec-head__link,
  .p-information .p-sec-head__link {
    order: 4;
    align-self: flex-end;
    width: 249px;
    margin-top: 26px;
    text-align: left;
  }
  /* 🔴 2026-08-23 修正: 以前は「140.5pxのアセット＋全幅のグラデ線」の2層で、
     短い矢印の上に長い線が重なって見えていた（前田社長指摘）。249px専用アセット1枚にする。 */
  .p-column .p-sec-head__link::after,
  .p-information .p-sec-head__link::after {
    width: 249px;
    background: url('../../images/nengo/arrows/vec-link-underline-arrow-sp.svg') no-repeat left top / 249px 5.4px;
  }
  .c-case-carousel__bar { width: 140px; }
  /* 🔴 2026-08-23 削除: ここに `align-items: flex-start` があり、components.css 側で
     Figma SP準拠にした「英字＋和文サブを中央」を後勝ちで打ち消していた
     （STRENGTHS/SERVICE/FAQ の見出しだけ左に寄っていた原因・前田社長指摘）。
     中央揃えの定義は components.css の `.p-sec-head--inline`（SP）が唯一の正。 */
}