/* =========================================================
   components.css — 再利用コンポーネント
   依存: tokens.css / base.css

   P2: logo / btn(ピルボタン) / site-header / sp-menu / site-footer
   P3で追加: chip / section-head / table-row / case-card（CTASectionは廃止＝フッターに統合）
   ========================================================= */

/* =========================================================
   ロゴ「6 inc.」
   ========================================================= */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-primary);
}

.logo__six {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3;
}

.logo__inc {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}

.logo--inverse {
  color: var(--color-text-inverse);
}

/* =========================================================
   ピルボタン（Figma: Button 46:11 — Style=Dark/Light × Size=M/L）
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.btn--m {
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--text-button); /* 12.5px */
}

.btn--l {
  padding: var(--space-lg) var(--space-3xl);
  font-size: var(--text-label-l); /* 15px */
}

.btn--dark {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.btn--light {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

/* 外部リンク用アイコン付き（WPセンター等） */
.btn__ext-icon {
  width: 20px;
  height: 20px;
  margin-left: var(--space-sm);
}

/* =========================================================
   サイトヘッダー（Figma: Header 48:2 / Header SP 61:631）
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: var(--space-md) var(--space-md) 0; /* 12px */
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-inline: var(--space-3xl) var(--space-md); /* 左32 / 右12 */
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg); /* 10 */
  /* PCは幅100%（左右はsite-headerの12pxパディングのみ）。
     1440px超のワイドモニターでも帯が途切れない（2026-08-03決定） */
  width: 100%;
  /* 2026-08-17: 浮いた帯に見えるよう影を追加（参考: digitalgarage のグローバルヘッダー） */
  box-shadow: 0 5px 12px rgb(0 0 0 / 0.13);
}

/* 半透明＋背景ぼかし。
   @supports で囲っているのは、backdrop-filter 非対応のブラウザだと
   「ぼけない半透明」になり、下のコンテンツが素通しでナビに重なって読めなくなるため
   （非対応時は上の不透明な白のまま）。 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header__bar {
    background: rgb(255 255 255 / 0.8);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
  }
}

.site-header__tagline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  color: var(--color-text-primary);
}

.site-header__tagline-divider {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header__nav-list {
  display: flex;
  gap: 36px;
}

.site-header__nav-list a {
  color: var(--color-text-primary);
}

/* ハンバーガー（SPのみ表示） */
.site-header__burger {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: var(--space-sm) 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.site-header__burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text-primary);
}

.site-header__burger-bar--short {
  width: 14px;
}

/* =========================================================
   SP全画面メニュー（Figma: SP_00_Menu 71:1210）
   ========================================================= */
/* 2026-08-06: 背景を「bg/inverse＋ダークテクスチャ」→ 単色 #262626 に修正。
   Figma SP_00_Menu 71:1210 の塗りは #262626 単色（フッター刷新と同じ方針）。
   bg/inverse は2026-08-03に gray/900→gray/500(#666) へ変更されており、
   そのままでは薄いグレー地になってしまうため footer と同じ変数を使う */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  background: var(--color-bg-footer);
}

/* topBar / nav / bottom を上・中・下に均等配置（Figma 71:1210 = SPACE_BETWEEN） */
/* 2026-08-17: topBar / nav / bottom の間隔を gap で確保する。
   space-between だけだと、中身が画面より高いときに分配できる余白がゼロになり、
   「ロゴ→About」と「Contactの罫線→お問い合わせフォームボタン」がそれぞれ
   くっついてしまっていた（実測0px）。
   gap は「潰れない下限」として働き、画面が高いときは space-between がさらに広げる。

   104px は Figma SP_00_Menu 71:1210 の実測値（topBar下端56→nav上端160、nav下端556→bottom上端660）。
   Spacingコレクションに無い値なので、トークンではなく実測値として直接書いている。
   ※Newsを追加してナビが1項目増えたため、この間隔を入れるとどの端末でも
     メニューはスクロールになる。スクロールは許容する方針（2026-08-17ユーザー判断）。 */
.sp-menu__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 104px;
  min-height: 100%;
  padding: var(--space-lg) var(--space-xl) var(--space-3xl);
  color: var(--color-text-inverse);
}

.sp-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-menu__logo {
  color: var(--color-text-inverse);
}

.sp-menu__logo .logo__six { font-size: 22px; }
.sp-menu__logo .logo__inc { font-size: 13px; font-family: var(--font-body); }

.sp-menu__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 15px;
  cursor: pointer;
}

.sp-menu__nav > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.sp-menu__item {
  border-bottom: 1px solid rgb(255 255 255 / 0.2);
  padding-bottom: var(--space-md);
}

.sp-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-text-inverse);
}

.sp-menu__labels {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
}

.sp-menu__en {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3;
}

.sp-menu__jp {
  font-size: var(--text-caption); /* 11.5 */
  line-height: 1.6; /* Figma 71:1223 JP/Caption */
}

.sp-menu__arrow {
  font-size: 15px;
}

.sp-menu__subs {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) 0 0 var(--space-lg);
}

/* li側に指定しないと行ボックスがbody（14px/1.8）のままになり、
   1項目あたり約5px高くなってFigma（20px）とズレる */
.sp-menu__subs li {
  font-size: var(--text-body-s); /* 12 */
  line-height: 1.7; /* Figma 71:1235 JP/Body-S */
}

.sp-menu__subs a {
  display: inline-block;
  color: var(--color-text-inverse);
}

/* 2026-08-06: 左寄せ→中央寄せ（Figma bottom 71:1260 = counterAxisAlignItems CENTER） */
.sp-menu__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.sp-menu__wpcenter {
  color: var(--color-text-inverse);
  font-size: var(--text-caption);
}

.sp-menu__copy {
  font-size: var(--text-tag);
  font-weight: 500;
}

/* メニュー展開中は背面スクロールを止める（navigation.jsが付与） */
body.sp-menu-open {
  overflow: hidden;
}

/* =========================================================
   サイトフッター（Figma: Footer 49:9 / Footer SP 62:637）
   ========================================================= */
/* 2026-08-03 刷新: 単色ダーク・角丸なし・全幅（テクスチャ／左右余白は廃止）
   ＋ 旧CTASectionをフッター冒頭に統合 */
.site-footer {
  /* フッターと直上コンテンツの間隔は88px（2026-08-03決定・全ページ共通） */
  margin-top: var(--space-section); /* 88 */
  background: var(--color-bg-footer);
  color: var(--color-text-inverse);
}

/* 404はNotFoundブロック自体が大きな上下余白を持つため間隔を詰める（Figma: FooterWrap padTop=0） */
body.error404 .site-footer {
  margin-top: 0;
}

.site-footer__inner {
  padding: var(--space-5xl) var(--space-5xl) 36px; /* 56 56 36 */
}

/* ---- フッター内CTA（Figma: Frame 3 — 右寄せ・見出し＋ボタン） ---- */
.site-footer__cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xl); /* 24 */
  margin-bottom: var(--space-4xl); /* 48 */
}

.site-footer__cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-l); /* 64 */
  line-height: 1.2;
  color: var(--color-text-inverse);
}

/* ---- 区切り線（Figma: Vector 1 — 白1px） ---- */
.site-footer__divider {
  height: 0;
  margin: var(--space-4xl) 0 var(--space-4xl);
  border: 0;
  border-top: 1px solid var(--color-text-inverse);
}

.site-footer__cols {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4xl);
  margin-bottom: var(--space-4xl);
}

.site-footer__logo-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__logo-col .logo__inc {
  font-family: var(--font-body);
  font-weight: 700;
}

/* 2026-08-06: .site-footer__address は住所削除にともない廃止（マークアップも削除済み） */

.site-footer__links {
  display: flex;
  gap: var(--space-6xl);
}

.site-footer__col-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__col a {
  color: var(--color-text-inverse);
  font-size: var(--text-body-s);
}

/* ---- PC: CTAの左端をリンク群（Aboutカラム）の左端に揃える（2026-08-14・ユーザー指摘） ----
   従来は CTA が justify-content:flex-end の右寄せで、Aboutカラムの左端より
   右にずれていた（1440pxで約159px）。
   .site-footer__inner を「ロゴ列 / リンク列」の2カラムグリッドにし、
   CTAをリンク列と同じ2列目へ置くことで、リンクの本数や文字数が変わっても
   両者の左端が必ず一致する。
   .site-footer__cols は display:contents で自身のボックスを消し、
   子（ロゴ列・リンク列）を直接グリッドアイテムにしている。
   ※縦の余白は従来どおり: CTAの margin-bottom 48 ／ 区切り線の margin 48/48 が担う
     （.site-footer__cols の margin-bottom は display:contents で無効になるが、
      元々そこは区切り線の margin-top と相殺されて48pxだったので見た目は変わらない）。 */
@media (min-width: 768px) {
  .site-footer__inner {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    /* .site-footer__cols の gap:48 は display:contents で効かなくなるため、
       ロゴ列とリンク列が詰まらないよう最小間隔をグリッド側で持たせる。
       縦はマージンで組んでいるので row-gap は 0。 */
    column-gap: var(--space-4xl); /* 48 */
    row-gap: 0;
  }

  .site-footer__cta {
    grid-column: 2;
    justify-content: flex-start;
  }

  .site-footer__cols {
    display: contents;
  }

  .site-footer__logo-col {
    grid-column: 1;
  }

  .site-footer__links {
    grid-column: 2;
  }

  .site-footer__divider,
  .site-footer__copy {
    grid-column: 1 / -1;
  }
}

.site-footer__copy {
  font-size: 11px;
}

/* =========================================================
   パンくず（PageTitle内「TOP ＞ …」— six_breadcrumb()）
   ========================================================= */
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-tertiary);
}

.breadcrumb a {
  color: inherit;
}

.breadcrumb__sep {
  font-size: 10px;
}

/* =========================================================
   Chip（Figma: 47:2 — アウトラインタグ）
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md); /* 4 12 */
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  font-size: var(--text-tag); /* 10.5 */
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* =========================================================
   SectionHead（Figma: 47:4 — [JP太字] ✱ [ENラベル]）
   ========================================================= */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-md); /* 12 */
  font-size: var(--text-label-l); /* 15 */
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.section-head__star {
  font-size: 16px;
  line-height: 1;
  color: var(--color-icon-default);
}

/* =========================================================
   TableRow（Figma: 47:7 PC横並び ／ 61:639 SP縦積み）
   dl.table でラップして使う: <dl class="table"> <div class="table-row">…
   ========================================================= */
.table {
  margin: 0;
}

/* 2026-08-06: 罫線は「行間のみ」に修正（Figma TableRow 47:7 は border-bottom のみで、
   先頭行の上・最終行の下には罫線が入らない。従来はtop+lastのbottomで2本余分だった） */
.table-row {
  display: flex;
  border-bottom: 1px solid var(--color-border-default);
}

.table-row:last-child {
  border-bottom: 0;
}

.table-row__key {
  flex: 0 0 240px;
  padding-block: var(--space-xl); /* 24 */
  font-size: var(--text-label-l); /* 15 */
  font-weight: 500;
  color: var(--color-text-primary);
}

.table-row__value {
  flex: 1;
  margin: 0;
  padding-block: var(--space-xl);
  font-size: var(--text-body); /* 14 */
  color: var(--color-text-secondary);
}

/* 外部サイトへの発リンク（事例詳細の概要表「サイトURL」行など）。
   2026-08-14追加。周囲がプレーンテキストの表なので、リンクだと分かるように
   下線＋末尾の↗を付ける。色は本文より濃い primary にして視線を止める。
   ホバー時の挙動（opacity 0.75）は base.css の a:hover を継承 */
.link-external {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere; /* 長いURLでも表からはみ出さない */
}

.link-external::after {
  content: "↗";
  margin-left: 0.3em;
  font-size: 0.9em;
}

/* =========================================================
   CaseCard（Figma: 48:12 ／ SP 61:642）
   ========================================================= */
.case-card {
  position: relative; /* ホバー時に z-index で手前へ出すため */
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* 16 */
  padding: var(--space-lg) var(--space-lg) var(--space-xl); /* 16 16 24 */
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl); /* 12 */
  color: var(--color-text-primary);
}

.case-card__image {
  width: 100%;
  aspect-ratio: 408 / 230;
  object-fit: cover;
  border-radius: var(--radius-lg); /* 10 */
}

.case-card__image--empty {
  display: block;
  background: var(--color-border-default);
}

.case-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md); /* 12 */
  padding-inline: var(--space-sm); /* 8 */
}

.case-card__title {
  font-size: var(--text-label-l); /* 15 */
  font-weight: 500;
}

.case-card__client {
  font-size: var(--text-caption); /* 11.5 */
  color: var(--color-text-secondary);
}


/* =========================================================
   TOPヒーロー（Figma: Hero 14:16 / HeroLeft 152:1403）
   2026-08-03: 領域を拡大（高さ350→500・下余白80px追加）
   ========================================================= */
.hero {
  position: relative;
  min-height: 500px; /* Figma: Hero h500 */
  padding: var(--space-md) var(--space-md) 80px; /* 12 / 12 / 80 */
}

.hero__inner {
  max-width: 860px; /* Figma: HeroLeft w860（左寄せ） */
  min-height: 405px; /* Figma: HeroLeft h405 */
  padding: var(--space-5xl) var(--space-5xl) var(--space-4xl); /* 56 / 56 / 48 */
}

.hero__title {
  position: relative;
  z-index: 1;
  line-height: 1.12; /* Figma: 112% */
  color: var(--color-text-primary);
}


/* =========================================================
   レスポンシブ（〜767px）
   ========================================================= */
@media (max-width: 1023px) {
  .site-header__tagline {
    display: none; /* タグラインはPCワイドのみ */
  }
}

@media (max-width: 767px) {
  .site-header {
    padding: var(--space-sm) var(--space-sm) 0; /* 8px */
  }

  .site-header__bar {
    height: 56px;
    padding-inline: 20px 16px;
  }

  .site-header__nav,
  .site-header__contact {
    display: none; /* SPはハンバーガーメニューへ */
  }

  .site-header__burger {
    display: flex;
  }

  .site-footer__inner {
    padding: var(--space-3xl) var(--space-xl) var(--space-xl); /* 32 24 24 */
  }

  /* SPはCTAを縦積み・中央寄せ（Figma SP footerCTA 206:1092 = counterAxisAlignItems CENTER）
     2026-08-06: 左寄せ→中央寄せに変更 */
  .site-footer__cta {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg); /* 16 */
    margin-bottom: var(--space-3xl); /* 32 */
  }

  .site-footer__cta-title {
    font-size: var(--text-display-m); /* 44 */
    text-align: center;
  }

  .site-footer__divider {
    margin: var(--space-3xl) 0 var(--space-xl);
  }

  .site-footer__cols {
    flex-direction: column;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
  }

  .site-footer__links {
    flex-wrap: wrap;
    gap: var(--space-xl) 40px;
  }

  .site-footer__col {
    min-width: 40%;
  }

  .site-footer__copy {
    font-size: 10px;
  }

  /* ---- TableRow SP（縦積み 61:639） ---- */
  .table-row {
    flex-direction: column;
    gap: var(--space-xs); /* 4 */
    padding-block: 14px;
  }

  .table-row__key {
    flex: none;
    padding-block: 0;
    font-size: var(--text-label-s); /* 12 */
  }

  .table-row__value {
    padding-block: 0;
    font-size: var(--text-body-s); /* 12 */
  }

  /* ---- CaseCard SP（61:642） ---- */
  .case-card {
    gap: var(--space-md); /* 12 */
    padding: var(--space-md) var(--space-md) var(--space-lg); /* 12 12 16 */
  }

  .case-card__image {
    aspect-ratio: 319 / 180;
    border-radius: var(--radius-md); /* 7 */
  }

  .case-card__meta {
    gap: var(--space-sm); /* 8 */
    padding-inline: var(--space-xs); /* 4 */
  }

  .case-card__title {
    font-size: var(--text-label-s); /* 12 */
  }

  /* ---- ヒーローSP（Figma: HeroWrap h300 / HeroMain padding 48,16,56,16） ---- */
  .hero {
    min-height: 300px;
    padding: var(--space-sm) var(--space-sm) 0; /* 8 / 8 / 0 */
  }

  .hero__inner {
    max-width: none;
    min-height: 0;
    padding: var(--space-4xl) var(--space-lg) var(--space-5xl); /* 48 / 16 / 56 */
  }

  .hero__title {
    font-size: var(--text-display-s); /* 36（Figma: SP_01_TOP） */
    line-height: 1.25; /* Figma: 125% */
  }

}

/* =========================================================
   スクロール表示アニメーション（2026-08-17追加 / assets/js/reveal.js）
   参考: digitalgarage のコーポレートサイト

   要素を隠す指定は `html.js-reveal` が付いているときだけ効く。
   このクラスは header.php のインラインスクリプトが付けており、
   JS無効・モーション低減・IntersectionObserver非対応では付かない
   ＝ **最初から全部見えている**（読めなくなる事故を防ぐため）。
   画面に入ると reveal.js が `is-v` を付け、下の transition が走る。
   ========================================================= */

/* ---- 見出し: 1文字ずつ、右からぼけを解きながら（data-reveal="chars"） ---- */
.js-reveal [data-reveal="chars"] .reveal__char {
  display: inline-block;
  white-space: pre; /* 文字に割ると空白が潰れるので保持する */
  vertical-align: bottom;
  opacity: 0;
  transform: translate3d(1.875rem, 0, 0); /* 30px */
  /* ぼけている間は「光」に見せる。背景 #f0f0f0 より明るい色でないと光として
     読めないため、白ではなくブランドグリーンの淡色を使う（白は背景との差が
     6%しかなく、光る前に消えたようにしか見えない）。 */
  color: var(--color-reveal-glow);
  filter: blur(18px) drop-shadow(0 0 0.875rem rgb(167 215 193 / 0.9)); /* 14px */
  backface-visibility: hidden;
}

.js-reveal [data-reveal="chars"].is-v .reveal__char {
  transition:
    transform 0.5s cubic-bezier(0.3, 0.2, 0, 1),
    opacity 0.5s cubic-bezier(0.3, 0.2, 0, 1),
    filter 0.5s cubic-bezier(0.3, 0.2, 0, 1),
    /* 色だけ少し遅らせて戻すと、輪郭が出たあとに光が引く順になる */
    color 0.6s cubic-bezier(0.6, 0, 0.2, 1);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: none;
  color: inherit;
}

/* ---- カード列: 奥から起き上がるように順番に（data-reveal="cards"） ---- */
/* perspective は親側に置く。ここが無いと rotateY が平面的な横潰れになる */
.js-reveal [data-reveal="cards"] {
  perspective: 1000px;
}

.js-reveal [data-reveal="cards"] > * {
  opacity: 0;
  /* 右端を軸に少し奥へ倒し、わずかに大きい状態から戻す */
  transform: translate(0.3125rem, 0) scale(1.08) rotateY(10deg); /* 5px */
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.js-reveal [data-reveal="cards"].is-v > * {
  transition:
    transform 0.6s cubic-bezier(0.3, 0.2, 0, 1),
    opacity 0.5s;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 保険: モーション低減環境では（クラスが付いてしまっても）動かさず即表示する */
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal="chars"] .reveal__char,
  .js-reveal [data-reveal="cards"] > * {
    opacity: 1;
    transform: none;
    filter: none;
    color: inherit; /* 光の色で固まらないよう本来の文字色に戻す */
    transition: none;
  }
}

/* =========================================================
   カードのホバー: 影がふわっと付く（2026-08-17追加）
   参考: digitalgarage のコーポレートサイト（実測値をそのまま使用）

   影 0 7px 10px rgb(0 0 0 / .1) ／ リスト行は 0 0 15px rgb(0 0 0 / .15)
   0.3s cubic-bezier(.24,.12,.09,1) ／ クリックできるカードは scale(1.02) も付く

   ※本家は「影だけを持つ透明なレイヤー」を重ねて opacity を動かしているが、
     ここでは box-shadow を直接トランジションさせている。
     .svc-photo-card は overflow:hidden のため、擬似要素を重ねる方式だと
     影が切り取られてしまうため（要素自身の box-shadow は overflow に切られない）。
     同時に何十枚も動くわけではないので描画コストの差は問題にならない。
   ========================================================= */

/* タッチ端末では :hover が張り付くので、ホバーできる環境だけに限定する */
@media (hover: hover) {
  .solution-row,
  .svc-photo-card,
  .case-card,
  .news-row {
    transition:
      box-shadow 0.3s cubic-bezier(0.24, 0.12, 0.09, 1),
      transform 0.3s cubic-bezier(0.24, 0.12, 0.09, 1);
  }

  .solution-row:hover,
  .svc-photo-card:hover,
  .case-card:hover {
    box-shadow: 0 7px 10px rgb(0 0 0 / 0.1);
  }

  /* クリックできるカードだけ、わずかに持ち上げる。
     WPセンターの行（.solution-row）は全幅なので拡大すると横にはみ出すため付けない */
  .svc-photo-card:hover,
  .case-card:hover {
    transform: scale(1.02);
  }

  /* グリッドの子は後ろのカードが後から描かれるため、そのままだと
     ホバー中のカードの影（と1.02倍ではみ出した分）が隣のカードに隠れてしまう。
     ホバー中だけ手前に持ち上げる */
  .svc-photo-card:hover,
  .case-card:hover {
    z-index: 1;
  }

  /* サービスカードだけ影を濃く・大きくしている。
     WPセンターのバナーは「白い帯＋下に広い余白」なので薄い影でも輪郭が分かるが、
     サービスカードは「濃い写真・カード間12px・緑地」で影が落ちる余地がほとんど無く、
     同じ値だとホバーしても変化が見えなかったため（2026-08-17ユーザー指摘） */
  .svc-photo-card:hover {
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.25);
  }

  /* お知らせは1行ずつのリストなので、本家のリスト用（四方に広がる薄い影）を使う。
     全幅の行なので拡大はしない */
  .news-row:hover {
    box-shadow: 0 0 15px rgb(0 0 0 / 0.15);
  }

  /* base.css の a:hover（opacity .75）が効くと、影より先に中身が薄くなって
     「沈む」印象になってしまうため、この4種では打ち消す */
  .svc-photo-card:hover,
  .case-card:hover,
  .news-row:hover {
    opacity: 1;
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .solution-row,
  .svc-photo-card,
  .case-card,
  .news-row {
    transition: none;
  }

  .svc-photo-card:hover,
  .case-card:hover {
    transform: none;
  }
}