/* ==========================================================================
   地球防衛隊サイト — 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); }
}
.p-fv-intro__slide::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: #373737;
  opacity: .70;
  mix-blend-mode: multiply;
}
.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'); }
.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;
}
@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;
  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;
  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) {
  .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()は要素へ直接インライン。
   既定は非表示、スクロール連動で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;
}
.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-body p {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 38px;
  letter-spacing: 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; }
.c-case-carousel__card {
  position: relative;
  height: 380px;
  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;
}

@media (min-width: 768px) {
  .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;
  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;
  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;
}
.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; }
.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;
  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;
  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); }
}
@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;
  }
  .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; }
  .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;
  }
  .c-case-carousel__arrow::after { width: 10px; height: 10px; border-width: 2px; }
}

@media (max-width: 767px) {
  .p-fv__brand { font-size: 44px; }
  .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; }

  .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 */

  .p-strengths__name { padding: 16px 0; }
  .p-strengths__desc { font-size: 14px; line-height: 26px; padding: 0 0 15px; }
  .p-strengths__desc br { display: none; }
  .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;   /* 大ビジュアルを畳んでいるので切替ボタンとしては効かせない */
    opacity: 1;
  }
  .p-service-list { padding: 56px 0; }
  .p-service-list__grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-inline: calc(var(--side-pad) * -1);
  }
  .p-service-card { min-height: 234px; padding: 40px; }
  .p-service-card__jp { font-size: 22px; letter-spacing: 6.6px; line-height: 1; }
  .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); }

  .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;
  }
  .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; }

  .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;
  }
  .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; }
}