/* ============================================================
   Groover F案 下層ページ差分スタイル
   - site.css(A案共通)の後に読み込む
   - ヘッダー/フッター/CTA は F案トップとデザイン統一
   - 最背面: トップFVの静止スクショ画像を fixed 常駐
     (live 3D は廃止。fv-static-pc/sp.jpg はトップ ?capture=1 の
      canvas を撮影したもの。トップの造形を更新したら撮り直す)
   - コンテンツ帯(band-light)は白
   ============================================================ */

:root {
  --bg-deep: #020104;
  --f-ink: #F4EFE9;
  --f-ink-sub: #A89C90;
  --line-f: rgba(242, 239, 247, .14);
  --line-f-strong: rgba(242, 239, 247, .32);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ====== 最背面: トップFV静止画像 fixed 常駐(スクロール連動なし) ====== */
body { background: var(--bg-deep); color: var(--f-ink); }
.bg3d {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("fv-static-pc.jpg?v=rev8") center / cover no-repeat;
}
@media (max-width: 768px) {
  .bg3d { background-image: url("fv-static-sp.jpg?v=rev8"); }
}
main { position: relative; z-index: 2; }

/* ====== ヘッダー: トップfooterと同じ黒ガラス ====== */
.header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: background .4s, backdrop-filter .4s, border-color .4s;
  isolation: isolate;
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 4, 3, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}
.header.scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--line-f);
}
.header-inner { height: auto; padding: 18px 44px; }
.logo img { height: 28px; }
.gnav { gap: 34px; }
.gnav .nav-link, .gnav a.nav-link {
  font-family: var(--font-en); font-weight: 600; font-size: .78125rem;
  letter-spacing: .18em; position: relative; padding: 4px 0;
  background: none; border: none; color: inherit; cursor: pointer;
  /* button(SERVICE) と a で天地が揃うよう描画箱を統一 */
  display: inline-flex; align-items: center; line-height: 1; margin: 0;
  appearance: none; -webkit-appearance: none;
}
.gnav .nav-link::after, .gnav a.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--white);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--ease-expo);
}
.gnav .nav-link:hover::after, .gnav a.nav-link:hover::after {
  transform: scaleX(1); transform-origin: left center;
}
.gnav .nav-link.active::after, .gnav a.nav-link.active::after { transform: scaleX(1); }

/* ====== SERVICE プルダウン ====== */
.nav-item { position: relative; display: flex; align-items: center; line-height: 1; }
.nav-sub-toggle .caret {
  display: inline-block; margin-left: 8px; font-size: .625rem;
  transition: transform .35s var(--ease-expo);
}
.nav-item.open .nav-sub-toggle .caret { transform: rotate(180deg); }
.nav-sub {
  position: absolute; top: calc(100% + 16px); right: -16px;
  min-width: 280px;
  background: rgba(5, 3, 8, .92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-f-strong);
  padding: 10px 0;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s, transform .3s var(--ease-expo), visibility .3s;
}
.nav-item.open .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub a {
  display: block; padding: 11px 22px;
  font-size: .8125rem; font-weight: 500; letter-spacing: .04em;
  color: var(--f-ink); transition: background .25s, color .25s;
}
.nav-sub a:hover { background: rgba(238, 119, 0, .14); color: var(--accent); }

/* ====== Page Hero: 透過(最背面の星空3Dがそのまま見える) ====== */
.page-hero h1, .page-hero .lead, .page-hero .sec-label {
  text-shadow: 0 2px 10px rgba(2, 1, 4, .9), 0 2px 28px rgba(2, 1, 4, .85);
}
.page-hero .lead { color: var(--f-ink-sub); }

/* ====== 帯: band-light は白 / band-dark は黒ガラス ====== */
.band-light { background: var(--white); }
.band.band-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-top: none;
}
.band.band-dark::before {
  content: "";
  position: absolute;
  inset: -5%;
  background: rgba(7, 4, 3, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.band.band-dark::after {
  content: none;
  display: none;
}
.band.band-dark > .container { position: relative; z-index: 1; }
.band-dark .feat-grid, .band-dark .feat,
.band-dark .detail-grid, .band-dark .detail-cell,
.band-dark .flow-step { border-color: var(--line-f-strong); }
.band-dark .spec-table { border-top-color: var(--line-f-strong); }
.band-dark .spec-table th, .band-dark .spec-table td { border-bottom-color: var(--line-f); }
.band-dark .body-text, .band-dark .feat p, .band-dark .detail-cell p,
.band-dark .flow-step p, .band-dark .note { color: inherit; }
/* 透明背景帯: アイコンをオレンジで可視化 */
.band-dark .step-icon,
.band-dark .feat-icon,
.band-dark .cell-icon { color: var(--accent) !important; }
/* オーバーレイ除去後の可読性担保(星・星雲と重なる帯のテキストのみ) */
.band-dark .sec-label, .band-dark .headline, .band-dark .body-text,
.band-dark .feat, .band-dark .detail-cell, .band-dark .flow-step,
.band-dark .spec-table, .band-dark .note {
  text-shadow: 0 1px 8px rgba(2, 1, 4, .9);
}

/* ====== セクションタグ(HUD ブラケット・トップと統一) ====== */
.sec-tag { display: inline-flex; align-items: baseline; gap: 12px; }
.sec-tag .br { font-family: var(--font-en); font-weight: 500; color: var(--f-ink-sub); font-size: .8125rem; }
.sec-tag .en {
  font-family: var(--font-en); font-weight: 600; font-size: .75rem;
  letter-spacing: .3em; color: var(--f-ink);
}
.sec-tag .jp { font-size: .75rem; color: var(--f-ink-sub); letter-spacing: .12em; }

/* ====== ブラケット型ボタン(トップと統一) ====== */
.btn-bracket {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; letter-spacing: .12em; color: var(--f-ink);
  transition: color .35s;
}
.btn-bracket::before, .btn-bracket::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12px;
  border: 1px solid var(--white); transition: width .5s var(--ease-expo), background-color .35s;
}
.btn-bracket::before { left: 0; border-right: none; }
.btn-bracket::after { right: 0; border-left: none; }
.btn-bracket:hover::before, .btn-bracket:hover::after { width: 51%; }
.btn-bracket > span { position: relative; z-index: 1; }
.btn-bracket .bg {
  position: absolute; inset: 0; background: rgba(255, 255, 255, .12);
  opacity: 0; transition: opacity .4s;
}
.btn-bracket:hover .bg { opacity: 1; }
.btn-cta { font-size: .9375rem; padding: 19px 52px; }
.btn-cta .arr { margin-left: 14px; color: var(--accent); transition: transform .4s var(--ease-expo); }
.btn-cta:hover .arr { transform: translateX(6px); }

/* ====== Contact CTA(トップの「まずはご相談ください」流用・星空越し) ====== */
.contact.compact {
  padding: 170px 0;
  border-top: none;
  text-align: center;
}
.contact.compact .headline {
  margin-top: 34px;
  font-size: clamp(2.25rem, 5.4vw, 4rem);
  font-weight: 800; letter-spacing: .02em; line-height: 1.4;
  text-shadow: 0 4px 50px rgba(2, 1, 4, .95);
}
.contact.compact .body {
  margin-top: 24px; margin-inline: auto; max-width: 38em;
  font-size: 1rem; color: var(--f-ink-sub); font-weight: 500;
  text-shadow: 0 2px 20px rgba(2, 1, 4, .95);
}
.contact.compact .body.body-white { color: var(--white); }
.contact.compact .cta-wrap { margin-top: 48px; }
.float-cta { display: none; }

/* ====== Contact フォーム(白帯に置くため明色系へ上書き) ====== */
.band-light .field input[type="text"],
.band-light .field input[type="email"],
.band-light .field select,
.band-light .field textarea {
  background: var(--white);
  border-color: #C9C9C2;
  color: var(--black);
}
.band-light .field input:focus,
.band-light .field select:focus,
.band-light .field textarea:focus { border-color: var(--accent); }
.band-light .select-wrap::after {
  border-right-color: var(--ink-sub-light);
  border-bottom-color: var(--ink-sub-light);
}
.band-light .form-note { color: var(--ink-sub-light); }
.band-light .form-done { background: var(--white); }

/* ====== フッター: トップfooterと同じ黒ガラス ====== */
.footer {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-f);
  background: rgba(7, 4, 3, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 64px 0 36px;
  overflow: hidden;
}
.footer .addr, .footer-nav a, .footer-bottom .reg, .footer-bottom .copy {
  text-shadow: 0 1px 8px rgba(2, 1, 4, .9);
}
.footer-grid { align-items: flex-start; gap: 40px; }
.footer .logo img { height: 28px; }
.footer .addr { margin-top: 20px; font-size: .8125rem; color: var(--f-ink-sub); line-height: 2.1; }
.footer-nav { gap: 28px; align-items: flex-start; }
.footer-nav > a { font-size: .75rem; letter-spacing: .18em; color: var(--f-ink); }
.footer-nav > a:hover { color: var(--accent); }
.footer-svc-col { display: flex; flex-direction: column; gap: 12px; }
.footer-svc-head {
  font-family: var(--font-en); font-size: .75rem; font-weight: 600;
  letter-spacing: .18em; color: var(--f-ink);
}
.footer-svc-col a {
  font-size: .6875rem; letter-spacing: .04em; font-weight: 500;
  color: var(--f-ink-sub); transition: color .25s;
  text-shadow: 0 1px 8px rgba(2, 1, 4, .9);
}
.footer-svc-col a:hover { color: var(--accent); }
.footer-bottom { margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--line-f); }
.footer-bottom .reg, .footer-bottom .copy { font-size: .6875rem; color: var(--f-ink-sub); letter-spacing: .06em; }

/* ====== CF7 フォームスタイル(静的版デザイン合わせ) ====== */
/* CF7が自動挿入する<br>を非表示 */
.wpcf7-form br { display: none; }
/* 行ラッパー: CF7フォームテンプレートでは div.cf7-row を使用 */
.cf7-row { margin-bottom: 40px; }
/* label */
.wpcf7-form label {
  display: block; font-weight: 700; font-size: .9375rem; letter-spacing: .04em;
  margin-bottom: 12px;
}
/* 必須マーカー <span class="required">*</span> */
.wpcf7-form .required {
  display: inline-block; margin-left: 12px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent);
}
/* wpcf7-form-control-wrap はブロックへ */
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
/* 入力フィールド */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid #C9C9C2;
  color: var(--black);
  font-family: var(--font-jp);
  font-size: 1rem;
  line-height: 1.6;
  padding: 16px 18px;
  border-radius: 0;
  transition: border-color .25s;
  -webkit-appearance: none;
  appearance: none;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus { outline: none; border-color: var(--accent); }
.wpcf7-form textarea { min-height: 200px; resize: vertical; }
/* select の矢印: cf7-form.txt が div.select-wrap で明示的にラップするため site.css の .select-wrap::after が機能する */
/* submit ボタン */
.wpcf7-form input[type="submit"] {
  min-width: 340px; font-size: 1.0625rem; cursor: pointer;
  font-family: var(--font-jp); font-weight: 700; letter-spacing: .06em;
  padding: 19px 28px;
  background: var(--accent); color: var(--black);
  border: 1px solid transparent; border-radius: 0;
  transition: background .25s, color .25s;
}
.wpcf7-form input[type="submit"]:hover { background: var(--white); }
@media (max-width: 960px) {
  .wpcf7-form input[type="submit"] { min-width: 0; width: 100%; }
}
/* バリデーションエラー */
.wpcf7-not-valid { border-color: #CC2200 !important; }
.wpcf7-not-valid-tip { font-size: .8125rem; color: #CC2200; margin-top: 6px; display: block; }
/* 送信後の完了/エラーメッセージ */
.wpcf7-response-output {
  margin-top: 32px; padding: 20px 24px; font-size: .9375rem; line-height: 1.8;
  border: 1px solid var(--accent); color: var(--black);
}
.wpcf7-form.sent .wpcf7-response-output { border-color: #2A9D5C; color: #2A9D5C; }
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output { border-color: #CC2200; color: #CC2200; }

/* ====== Topics 一覧 / カテゴリ一覧 ====== */
.topics-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 54px; }
.topics-cats a {
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em; line-height: 1;
  border: 1px solid #C9C9C2; padding: 10px 24px;
  color: var(--ink-sub-light); transition: border-color .25s, color .25s, background .25s;
}
.topics-cats a:hover { border-color: var(--black); color: var(--black); }
.topics-cats a.active { background: var(--black); border-color: var(--black); color: var(--white); }

.topics-rows { border-top: 1px solid var(--black); }
.topics-rows a {
  display: flex; align-items: baseline; gap: 20px;
  padding: 26px 10px; border-bottom: 1px solid #C9C9C2;
  transition: background .25s;
}
.topics-rows a:hover { background: #ECECE8; }
.topics-rows .date {
  font-family: var(--font-en); font-weight: 600; font-size: .8125rem;
  letter-spacing: .08em; color: var(--ink-sub-light); white-space: nowrap;
}
.topics-rows .cat {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; line-height: 1;
  color: var(--accent); border: 1px solid var(--accent);
  padding: 5px 12px; white-space: nowrap; align-self: center;
}
.topics-rows .title { flex: 1; font-size: .9375rem; font-weight: 500; }
.topics-rows .arrow { font-family: var(--font-en); font-weight: 600; color: var(--ink-sub-light); }
.topics-rows a:hover .arrow { color: var(--black); }
.topics-rows .row-plain {
  display: flex; align-items: baseline; gap: 20px;
  padding: 26px 10px; border-bottom: 1px solid #C9C9C2;
}

/* ====== Topics 記事詳細 ====== */
.article-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.article-meta .date {
  font-family: var(--font-en); font-weight: 600; font-size: .875rem;
  letter-spacing: .1em; color: var(--f-ink-sub);
}
.article-meta .cat {
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em; line-height: 1;
  color: var(--accent); border: 1px solid var(--accent); padding: 5px 12px;
}
.page-hero.article-hero h1 { font-size: clamp(1.625rem, 3.4vw, 2.5rem); line-height: 1.6; }
.article-body { max-width: 800px; }
.article-body p { margin-bottom: 28px; color: var(--ink-sub-light); font-weight: 500; }
.article-body h2 {
  margin: 56px 0 24px; padding-left: 18px;
  font-size: 1.3125rem; font-weight: 800; line-height: 1.6; letter-spacing: .02em;
  border-left: 3px solid var(--accent); color: var(--black);
}
.article-body ul { margin: 0 0 28px; padding-left: 2px; }
.article-body ul li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  color: var(--ink-sub-light); font-weight: 500;
}
.article-body ul li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 8px; height: 2px; background: var(--accent);
}
.article-body .article-note { font-size: .8125rem; color: #8A8A85; }
.article-nav {
  margin-top: 80px; border-top: 1px solid var(--black);
  display: flex; align-items: stretch;
}
.article-nav > * {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 24px 16px; font-size: .875rem; font-weight: 600;
  border-bottom: 1px solid #C9C9C2; color: var(--black);
  transition: background .25s;
}
.article-nav > a:hover { background: #ECECE8; }
.article-nav .a-prev { justify-content: flex-start; }
.article-nav .a-index { justify-content: center; border-inline: 1px solid #C9C9C2; }
.article-nav .a-next { justify-content: flex-end; text-align: right; }
.article-nav .blank { pointer-events: none; }
.article-nav .arr { font-family: var(--font-en); font-weight: 600; color: var(--accent); }
.article-nav .lbl { color: var(--ink-sub-light); font-size: .75rem; font-weight: 600; }

/* ====== 施工メニュー: 写真カード ====== */
.work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--black);
  border-left: 1px solid var(--black);
}
.work-cell {
  border-right: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  padding: 28px 28px 40px;
}
.work-cell .ph {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; filter: saturate(.96);
}
.work-cell h4 { margin-top: 24px; font-size: 1.0625rem; font-weight: 700; line-height: 1.6; }
.work-cell .catch {
  margin-top: 10px; font-size: .9375rem; font-weight: 700; line-height: 1.7;
  color: var(--accent);
}
.work-cell p { margin-top: 12px; font-size: .875rem; line-height: 2; color: var(--ink-sub-light); }

/* ====== サービス紹介 figure（スクショ・ロゴ・図解） ====== */
.svc-figure { border: 1px solid var(--black); background: var(--white); }
.band-dark .svc-figure { border-color: var(--line-f-strong); }
.svc-figure img { display: block; width: 100%; }
.svc-figure.pad { padding: clamp(24px, 5vw, 56px); }
.svc-figure.pad img { max-width: 560px; margin: 0 auto; }
.svc-figure + .fig-note { margin-top: 14px; font-size: .8125rem; color: var(--ink-sub-light); }
.band-dark .svc-figure + .fig-note { color: inherit; }
.fig-stack { display: grid; gap: 36px; }
.fig-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; align-items: start; }
.svc-logo { display: block; height: 46px; width: auto; max-width: 100%; margin-bottom: 40px; }
.svc-logo.ad-logo {
  width: min(100%, 460px);
  height: auto;
  margin: 0 auto 42px;
}
.svc-logo.solution-logo {
  width: min(100%, 420px);
  height: auto;
  margin: 36px auto 42px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, .94);
  box-sizing: border-box;
}
.interaxive-logo {
  display: block;
  width: min(100%, 430px);
  height: auto;
  margin-bottom: 56px;
}
.award-img { display: block; max-width: 560px; width: 100%; height: auto; }
.media-figure { margin-top: 48px; display: flex; justify-content: center; }
.media-figure img { max-width: min(620px, 100%); height: auto; }
.media-grid-img { display: block; margin-inline: auto; }
.media-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
.media-grid-2 figure {
  margin: 0; border: 1px solid var(--line-f-strong); background: var(--white);
  padding: 32px 28px 26px;
  display: flex; flex-direction: column; gap: 16px; align-items: center; justify-content: center;
}
.media-grid-2 figure img { max-width: 100%; height: auto; }
.media-grid-2 figcaption { font-size: .8125rem; color: var(--ink-sub-light); line-height: 1.8; text-align: center; text-shadow: none; }

/* ====== SP ====== */
@media (max-width: 960px) {
  .header-inner { padding: 14px 18px; }
  .logo img { height: 22px; }
  .header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }
  .gnav { background: rgba(2, 1, 4, .96); }
  .gnav .nav-link, .gnav a.nav-link { font-size: 1.125rem; }
  .nav-item { display: flex; flex-direction: column; align-items: center; }
  .nav-sub {
    position: static; min-width: 0; border: none; background: none; backdrop-filter: none;
    padding: 6px 0 0; opacity: 1; visibility: visible; transform: none; display: none;
  }
  .nav-item.open .nav-sub { display: block; }
  .nav-sub a { padding: 9px 14px; text-align: center; font-size: .9375rem; color: var(--f-ink-sub); }
  .footer { padding: 56px 0 28px; }
  .footer .logo img { height: 22px; }
  .contact.compact { padding: 120px 0; }
  .topics-rows a, .topics-rows .row-plain { flex-wrap: wrap; gap: 8px 14px; padding: 20px 6px; }
  .topics-rows .arrow { margin-left: auto; }
  .topics-rows .title { order: 2; flex-basis: 100%; }
  .article-nav { flex-direction: column; }
  .article-nav .a-index { border-inline: none; }
  .work-grid { grid-template-columns: 1fr; }
  .work-cell { padding: 22px 20px 32px; }
  .fig-cols { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .contact.compact .headline { font-size: 2rem; }
}

/* page-hero は素通し。band-dark/footer/header の黒ガラスは個別指定。 */
.page-hero { position: relative; overflow: visible; }
.page-hero::before,
.page-hero::after,
.footer::before {
  content: none;
  display: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}