@charset "UTF-8";

/* =====================================================================
   G・G・C【ガッキー・ガジェットチャンネル】  TOPページ  style.css
   ―― 案2 を忠実に再現（フォント／色／サイズ／3D影／背景透かし／周辺光）
   フォント: 日本語=Zen Kaku Gothic New ／ ラテン=Inter
   ===================================================================== */

/* ===== 色・サイズを変数で一元管理 ===== */
:root {
  /* 背景グラデーション */
  --bg-top: #2f333c;
  --bg-mid: #25292f;
  --bg-bottom: #20242a;

  /* ブランドカラー */
  --blue: #003ec5;          /* main color 1：メインアクセント */
  --blue-rgb: 0, 62, 197;   /* 上記のRGB（rgba合成用） */
  --blue-deep: #00277a;     /* 選択範囲などの濃い青 */
  --blue-bright: #5e86e8;   /* ダーク背景で青文字を使う際の明るい派生色 */
  --light: #ecf7f6;         /* main color 3：基本の文字色 */
  --gold-sub: #ab7e00;      /* sub color：構造ゴールド */
  --gold-point: #c5930c;    /* point color：強調ラベル */

  /* レイアウト */
  --max-w: 1440px;
  --pad-x: 56px;
  --radius-card: 26px;
  --radius-tile: 20px;
}

/* ===== ベース ===== */
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(
    180deg,
    var(--bg-top) 0%,
    var(--bg-mid) 62%,
    var(--bg-bottom) 100%
  );
  color: var(--light);
  font-family: "Inter", "Zen Kaku Gothic New", sans-serif;
  /* 周辺光が左右へはみ出しても横スクロールを出さない */
  overflow-x: hidden;
}

::selection {
  background: var(--blue-deep);
  color: var(--light);
}

/* ===== 周辺光（青・金・白の装飾グロー） ===== */
/* 画面に固定したクリップ層：左右へはみ出すグローを切り取り、
   本体の縦スクロールを妨げない */
.ambient-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.ambient-blue {
  top: -160px;
  left: -120px;
  width: 620px;
  height: 620px;
  background: radial-gradient(
    circle,
    rgba(var(--blue-rgb), 0.2) 0%,
    rgba(var(--blue-rgb), 0) 68%
  );
}
.ambient-gold {
  right: -180px;
  bottom: -240px;
  width: 700px;
  height: 700px;
  background: radial-gradient(
    circle,
    rgba(171, 126, 0, 0.13) 0%,
    rgba(171, 126, 0, 0) 70%
  );
}
.ambient-white {
  inset: 0;
  border-radius: 0;
  background: radial-gradient(
    120% 80% at 50% 0%,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 58%
  );
}

/* ===== ヘッダー ===== */
.header {
  position: relative;
  z-index: 2;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 93px;
  padding: 14px var(--pad-x);
}
.logo {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.logo-mark {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.logo-mark::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--blue-rgb), 0.3) 0%,
    rgba(var(--blue-rgb), 0) 70%
  );
}
.logo-mark img {
  position: relative;
  height: 58px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.45));
}
.logo-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.logo-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--light);
}
.logo-sub {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(236, 247, 246, 0.5);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 11px;
}
.nav-list img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

/* ===== メイン ===== */
.main {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 46px var(--pad-x) 42px;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* ===== 運営者紹介（グラスカード） ===== */
.intro {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 38px 48px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-card);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.022) 100%
  );
  box-shadow: 0 30px 64px -34px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* 背景透かし（ガジェット写真）＋ ビネット */
.intro-watermark {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  opacity: 0.24;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(140% 135% at 50% 48%, #000 60%, transparent 100%);
  mask-image: radial-gradient(140% 135% at 50% 48%, #000 60%, transparent 100%);
}
.intro-watermark-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 125% at 50% 50%,
    rgba(26, 29, 36, 0) 30%,
    rgba(26, 29, 36, 0.26) 68%,
    rgba(26, 29, 36, 0.55) 100%
  );
}

/* マスコット */
.intro-mascot {
  position: relative;
  z-index: 1;
  flex: 0 0 320px;
  height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mascot-halo {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--blue-rgb), 0.3) 0%,
    rgba(var(--blue-rgb), 0) 66%
  );
  filter: blur(6px);
}
.mascot-ring {
  position: absolute;
  width: 268px;
  height: 268px;
  border-radius: 50%;
  border: 1px solid rgba(var(--blue-rgb), 0.35);
  box-shadow: 0 0 42px rgba(var(--blue-rgb), 0.18),
    inset 0 0 42px rgba(var(--blue-rgb), 0.1);
}
.mascot-floor {
  position: absolute;
  bottom: 30px;
  width: 236px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(3px);
}
.mascot-img {
  position: relative;
  height: 352px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.45));
}

/* 本文 */
.intro-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}

/* 見出し上の小ラベル（バー＋テキスト） */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold-point);
}
.eyebrow .bar {
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

/* 名前（3D 立体影） */
.intro-title {
  margin-bottom: 18px;
  font-weight: 900;
  font-size: 44px;
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: var(--light);
  text-shadow:
    0 -1px 1px rgba(255, 255, 255, 0.5),
    0 1px 0 #cfd6e0,
    0 2px 0 #b6bfcd,
    0 3px 0 #9ca6b8,
    0 4px 0 #828da4,
    0 5px 0 #6b7690,
    0 6px 0 #56617b,
    0 7px 2px rgba(0, 0, 0, 0.35),
    0 9px 9px rgba(0, 0, 0, 0.42),
    0 13px 20px rgba(0, 0, 0, 0.45);
}
.intro-title-sub {
  margin-left: 14px;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(236, 247, 246, 0.8);
  text-shadow: 0 1px 0 #8c97a8, 0 2px 0 #6c7789, 0 3px 5px rgba(0, 0, 0, 0.4);
}
.intro-role {
  margin-bottom: 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(236, 247, 246, 0.5);
}
.intro-body {
  max-width: 560px;
  font-size: 16.5px;
  line-height: 2.05;
  color: var(--light);
}
.intro-body + .intro-body {
  margin-top: 13px;
}
.intro-body strong {
  font-weight: 700;
  color: var(--light);
}

/* ===== コンテンツ一覧 ===== */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.eyebrow-wide {
  margin-bottom: 9px;
  font-family: "Inter", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.34em;
}
.section-title {
  font-weight: 900;
  font-size: 27px;
  letter-spacing: 0.02em;
  color: var(--light);
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.45),
    0 1px 0 #cfd6e0,
    0 2px 0 #aeb8c6,
    0 3px 0 #8c97aa,
    0 4px 0 #6b7690,
    0 5px 4px rgba(0, 0, 0, 0.38),
    0 7px 10px rgba(0, 0, 0, 0.4);
}
.section-lead {
  padding-bottom: 5px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(236, 247, 246, 0.62);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 26px 20px 22px;
  border: 1px solid rgba(var(--blue-rgb), 0.5);
  border-radius: var(--radius-tile);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.25s ease, border-color 0.25s ease,
    background 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--blue-rgb), 0.8);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 24px 42px -24px rgba(0, 0, 0, 0.7);
}
.card-icon img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  border-radius: 50%;
  transition: background 0.28s ease, box-shadow 0.28s ease;
}
.card:hover .card-icon img {
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 0 22px 6px rgba(255, 255, 255, 0.08);
}
.card-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--light);
}
.card-sub {
  font-size: 13px;
  letter-spacing: 0.03em;
  color: rgba(236, 247, 246, 0.62);
}

/* ===== フッター ===== */
.footer {
  position: relative;
  z-index: 2;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  min-height: 124px;
  padding: 24px var(--pad-x);
}
.footer-nav {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  flex: 1;
}
.footer-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer-nav img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.footer-nav span {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(236, 247, 246, 0.66);
}
.footer-tagline {
  font-size: 14.5px;
  letter-spacing: 0.06em;
  color: var(--gold-point);
  white-space: nowrap;
}

/* =====================================================================
   レスポンシブ
   ===================================================================== */

/* イントロを縦積み（マスコットは1行必要） */
@media (max-width: 1040px) {
  .main {
    padding: 38px 32px 40px;
    gap: 36px;
  }
  .intro {
    flex-direction: column;
    gap: 28px;
    padding: 36px 34px;
    text-align: center;
  }
  .intro-mascot {
    flex: 0 0 auto;
    height: 320px;
  }
  .mascot-img {
    height: 292px;
  }
  .intro-text {
    width: 100%;
  }
  .intro-body {
    max-width: none;
  }
  .intro-text .eyebrow {
    justify-content: center;
  }
}

/* コンテンツ 3 → 2 列 */
@media (max-width: 680px) {
  .main {
    padding: 30px 22px 34px;
  }
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* スマートフォン */
@media (max-width: 560px) {
  .main {
    padding: 24px 16px 30px;
    gap: 30px;
  }
  .header-inner {
    padding: 12px 18px;
  }
  .logo-title {
    font-size: 18px;
  }
  .intro {
    padding: 26px 16px;
    gap: 20px;
  }
  .intro-mascot {
    height: 250px;
  }
  .mascot-img {
    height: 228px;
  }
  .mascot-halo,
  .mascot-ring,
  .mascot-floor {
    transform: scale(0.7);
  }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .card-grid {
    gap: 12px;
  }
  .card {
    padding: 18px 10px 16px;
    gap: 10px;
    border-radius: 16px;
  }
  .card-icon img {
    width: 86px;
    height: 86px;
  }
  .card-title {
    font-size: 15.5px;
  }
  .card-sub {
    font-size: 12px;
  }
  .footer-inner {
    padding: 22px 18px;
  }
  .footer-nav {
    gap: 26px;
  }
}


/* =====================================================================
   ここから下層ページ用（設計正本 .dc.html の指定に合わせる）
   ===================================================================== */

/* ---------------------------------------------------------------------
   ページごとの背景レイヤー
   既定は非表示。ページ側の page-* クラスで中身を与える
   --------------------------------------------------------------------- */
.page-bg,
.page-bg-veil,
.page-grid {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
}

/* 58px の方眼（中央を濃く、周囲へフェード）＝ 設計共通の装飾 */
.page-grid {
  background-image: linear-gradient(rgba(var(--blue-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--blue-rgb), 0.06) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(
    130% 100% at 50% 12%,
    #000 0%,
    rgba(0, 0, 0, 0.16) 60%,
    transparent 92%
  );
  mask-image: radial-gradient(
    130% 100% at 50% 12%,
    #000 0%,
    rgba(0, 0, 0, 0.16) 60%,
    transparent 92%
  );
}

/* ----- YouTube：#5A6273 → #4E5566 → #444B5A ＋ 赤いグロー ----- */
/* 設計値より少し暗くしている（ガッキー指定 2026-08-19）
   元の設計値は #5A6273 / #4E5566 / #444B5A */
.page-yt {
  background: linear-gradient(180deg, #333741 0%, #2c303a 58%, #262a33 100%);
}
.page-yt .page-grid {
  display: block;
}
.page-yt .ambient-gold {
  background: radial-gradient(circle, rgba(214, 40, 40, 0.14) 0%, transparent 70%);
}

/* ----- ブログ：#323B55 → #2A3348 → #232B3C ＋ 背景画像 ----- */
.page-blog {
  background: linear-gradient(180deg, #323b55 0%, #2a3348 58%, #232b3c 100%);
}
.page-blog .page-bg,
.page-blog .page-bg-veil,
.page-blog .page-grid {
  display: block;
}
.page-blog .page-bg {
  background: url('../images/blog/blog-bg.png') center / cover no-repeat;
}
.page-blog .page-bg-veil {
  background: linear-gradient(
    180deg,
    rgba(18, 23, 36, 0.1) 0%,
    rgba(15, 19, 30, 0.38) 100%
  );
}

/* ----- Amazonストア：#0E1526 → #0A0F1E → #070A14 ＋ ショールーム写真 ----- */
.page-store {
  background: linear-gradient(180deg, #0e1526 0%, #0a0f1e 52%, #070a14 100%);
}
.page-store .page-bg,
.page-store .page-bg-veil,
.page-store .page-grid {
  display: block;
}
.page-store .page-bg {
  background: url('../images/store/store-bg.png') center center / cover no-repeat;
}
.page-store .page-bg-veil {
  background: linear-gradient(
    180deg,
    rgba(12, 17, 28, 0.5) 0%,
    rgba(9, 13, 22, 0.62) 55%,
    rgba(7, 10, 18, 0.72) 100%
  );
}
.page-store .page-grid {
  background-image: linear-gradient(rgba(94, 134, 232, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 134, 232, 0.055) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ----- 診断：#5A6273 → #4E5566 → #444B5A ＋ 透かし0.09 ----- */
/* 設計値より少し暗くしている（ガッキー指定 2026-08-19）
   元の設計値は #5A6273 / #4E5566 / #444B5A */
.page-shindan {
  background: linear-gradient(180deg, #333741 0%, #2c303a 58%, #262a33 100%);
}
.page-shindan .page-bg,
.page-shindan .page-bg-veil,
.page-shindan .page-grid {
  display: block;
}
.page-shindan .page-bg {
  background: url('../images/shindan/showroom.png') center top / cover no-repeat;
  opacity: 0.09;
}
.page-shindan .page-bg-veil {
  background: linear-gradient(
    180deg,
    rgba(70, 78, 95, 0.12) 0%,
    rgba(64, 72, 88, 0.2) 50%,
    rgba(58, 66, 80, 0.32) 100%
  );
}

/* ----- SNS：YouTube・診断と同じ濃さに揃えている（ガッキー指定 2026-08-19）
   元の設計値は #474D59 / #3C424E / #343A44 ----- */
.page-sns {
  background: linear-gradient(180deg, #333741 0%, #2c303a 58%, #262a33 100%);
}

/* ----- お問い合わせ：設計値より少し暗くしている（ガッキー指定 2026-08-19）
   元の設計値は #5C6472 / #515867 / #474D5B ----- */
.page-contact {
  background: linear-gradient(180deg, #515864 0%, #474d5b 62%, #3e4450 100%);
}

/* ---------------------------------------------------------------------
   下層ページ共通のパーツ
   --------------------------------------------------------------------- */
.main-narrow {
  max-width: 1200px;
}

.pg-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.pg-hero-solo {
  grid-template-columns: 1fr;
}

.pg-title {
  margin: 18px 0 20px;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: 0.01em;
  color: var(--light);
  text-shadow: 0 1px 0 #cfd6e0, 0 2px 0 #a8b2c2, 0 3px 4px rgba(0, 0, 0, 0.32),
    0 6px 12px rgba(0, 0, 0, 0.34);
}

.pg-title-lg {
  font-size: 50px;
  line-height: 1.18;
}

.pg-title-xl {
  font-size: 64px;
  line-height: 1.16;
}

/* 見出しの青い方（設計の accent 色） */
.pg-title-accent {
  color: var(--blue-bright);
  text-shadow: 0 1px 0 #21408f, 0 2px 6px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(94, 134, 232, 0.4);
}

.pg-lead {
  max-width: 620px;
  margin-bottom: 14px;
  font-size: 15.5px;
  line-height: 2;
  color: rgba(236, 247, 246, 0.86);
}

.pg-cta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pg-cta-note {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(236, 247, 246, 0.82);
}

.pg-cta-note .num {
  font-weight: 800;
  color: var(--gold-point);
}

.pg-note {
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgba(236, 247, 246, 0.55);
}

.pg-note a {
  font-weight: 700;
  color: var(--gold-point);
}

.pg-hero-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}

.pg-icon-glow {
  position: absolute;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--blue-rgb), 0.34) 0%,
    rgba(var(--blue-rgb), 0) 66%
  );
  filter: blur(6px);
}

.pg-hero-icon img {
  position: relative;
  width: 216px;
  height: 216px;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
  animation: float 4s ease-in-out infinite;
}

/* ----- 丸ボタン（設計は border-radius:999px のピル型） ----- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 28px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}

.btn-pill:hover {
  transform: translateY(-5px);
}

.btn-pill-red {
  color: #fff;
  background: linear-gradient(180deg, #ff5a5a, #c81e1e);
  box-shadow: 0 18px 34px -16px rgba(200, 20, 20, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.btn-pill-blue {
  color: #fff;
  background: linear-gradient(180deg, var(--blue-bright), var(--blue));
  box-shadow: 0 18px 36px -16px rgba(0, 62, 197, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.btn-pill-gold {
  /* 文字は白・サイズは共通より 2px 大きく（ガッキー指定 2026-08-19） */
  color: #fff;
  font-size: 16.5px;
  background: linear-gradient(180deg, #f4cf62, var(--gold-point));
  box-shadow: 0 18px 36px -16px rgba(171, 126, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.btn-pill .arrow {
  transition: transform 0.3s ease;
}

.btn-pill:hover .arrow {
  transform: translateX(4px);
}

/* 再生の三角（登録ボタン内） */
.play-tri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}

/* CTA の文字入れ替え（無料で診断をはじめる → 診断開始） */
.cta-swap {
  display: grid;
  place-items: center;
}

.cta-swap .cta-default,
.cta-swap .cta-hover {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease;
}

.cta-swap .cta-hover {
  opacity: 0;
  letter-spacing: 0.34em;
  padding-left: 0.34em;
}

.diag-cta:hover .cta-default {
  opacity: 0;
}

.diag-cta:hover .cta-hover {
  opacity: 1;
}

/* ----- 点滅ドット（CONTACT / GGC BLOG などの前） ----- */
.eyebrow .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold-point);
  box-shadow: 0 0 12px var(--gold-point);
  animation: ctBlink 1.8s ease-in-out infinite;
}

@keyframes ctBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ----- タグ・チップ ----- */
.row-tags {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.tag {
  padding: 5px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(236, 247, 246, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

.tag-gold {
  color: #1e1e1e;
  border-color: transparent;
  background: linear-gradient(180deg, #f4cf62, var(--gold-point));
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chips span {
  padding: 6px 12px;
  font-size: 12px;
  color: rgba(236, 247, 246, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

/* =====================================================================
   YouTube ページ
   ===================================================================== */
.yt-hero {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 52px;
  align-items: center;
}

.yt-hero-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* アイブロウの中の小さな3Dアイコン（52px・赤いハロー） */
.yt-eyebrow-icon {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}

.yt-eyebrow-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 40, 40, 0.4) 0%, transparent 70%);
}

.yt-eyebrow-icon img {
  position: relative;
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.45));
}

.yt-title {
  margin: 0 0 16px;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.32;
  letter-spacing: 0.01em;
}

.yt-title-main {
  color: var(--light);
  text-shadow: 0 1px 0 #cfd6e0, 0 2px 0 #a8b2c2, 0 3px 4px rgba(0, 0, 0, 0.32),
    0 6px 12px rgba(0, 0, 0, 0.34);
}

.yt-title-accent {
  color: var(--blue-bright);
  text-shadow: 0 1px 0 #21408f, 0 2px 6px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(94, 134, 232, 0.4);
}

.yt-lead {
  max-width: 440px;
  margin-bottom: 26px;
  font-size: 15.5px;
  line-height: 2;
  color: rgba(236, 247, 246, 0.86);
}

.yt-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* ----- 注目の動画（大） ----- */
.yt-feature {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(var(--blue-rgb), 0.32);
  box-shadow: 0 46px 90px -46px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.yt-feature:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--blue-rgb), 0.6);
  box-shadow: 0 58px 104px -46px rgba(0, 0, 0, 0.98),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.yt-feature-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0e1116;
}

.yt-feature-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    80% 80% at 50% 46%,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.34) 100%
  );
}

.yt-feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.yt-feature:hover .yt-feature-thumb img {
  transform: scale(1.04);
}

/* 左上の赤いバッジ */
.yt-badge {
  position: absolute;
  left: 26px;
  top: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 17px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #fff;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(
    180deg,
    rgba(214, 40, 40, 0.95),
    rgba(180, 18, 18, 0.95)
  );
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6);
}

.yt-badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}

.yt-feature-meta {
  display: block;
  padding: 22px 26px 24px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.02)
  );
}

.yt-feature-title {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--light);
}

.yt-feature-sub {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: rgba(236, 247, 246, 0.58);
}

/* ----- 再生ボタン（CSSだけで描く） ----- */
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: radial-gradient(circle at 50% 32%, #ff5a5a, #c81e1e);
  box-shadow: 0 12px 24px -8px rgba(200, 20, 20, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.yt-play-lg {
  width: 84px;
  height: 84px;
}

.yt-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

.yt-play-lg::after {
  border-width: 13px 0 13px 21px;
}

.yt-card:hover .yt-play,
.yt-feature:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.08);
}

/* ----- 再生リストのカード ----- */
.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.yt-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-tile);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.25s ease, border-color 0.25s ease,
    background 0.25s ease, box-shadow 0.25s ease;
}

.yt-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--blue-rgb), 0.7);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 24px 42px -24px rgba(0, 0, 0, 0.7);
}

.yt-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 9;
  background: #0e1116;
}

.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.yt-card:hover .yt-thumb img {
  transform: scale(1.05);
}

.yt-card-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--light);
}

.yt-card-sub {
  font-size: 12.5px;
  color: rgba(236, 247, 246, 0.55);
}

/* =====================================================================
   ブログ ページ（横並びの行カード）
   ===================================================================== */
.row-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.row-card {
  display: flex;
  align-items: center;
  gap: 30px;
  /* 横長のバーに見せるため、上下は詰めて左右は広く使う */
  padding: 22px 36px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.025);
  transition: transform 0.25s ease, border-color 0.25s ease,
    background 0.25s ease, box-shadow 0.25s ease;
}

.row-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--blue-rgb), 0.45);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 46px 84px -40px rgba(0, 0, 0, 0.92);
}

.row-icon {
  flex-shrink: 0;
  width: 108px;
  height: 108px;
}

.row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.5));
}

.row-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  /* 空いた右側まで文字を伸ばす */
  flex: 1 1 auto;
}

.row-title {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--light);
}

.row-sub {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(236, 247, 246, 0.72);
}

/* CTA はカードの右端に置いて、全体を横長のバーにする */
.row-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 13px 24px;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--gold-point);
  border: 1px solid rgba(197, 147, 12, 0.45);
  border-radius: 999px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.row-card:hover .row-cta {
  border-color: var(--gold-point);
  background: rgba(197, 147, 12, 0.12);
}

.row-cta .arrow {
  transition: transform 0.3s ease;
}

.row-card:hover .row-cta .arrow,
.diag-card:hover .row-cta .arrow {
  transform: translateX(4px);
}

/* =====================================================================
   Amazonストア ページ
   ===================================================================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 30px 18px 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-tile);
  background: rgba(255, 255, 255, 0.025);
  transition: transform 0.25s ease, border-color 0.25s ease,
    background 0.25s ease, box-shadow 0.25s ease;
}

.cat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(171, 126, 0, 0.6);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 26px 46px -26px rgba(0, 0, 0, 0.75);
}

.cat-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(236, 247, 246, 0.32);
}

.cat-img {
  width: 118px;
  height: 118px;
  margin-bottom: 6px;
}

.cat-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.cat-card:hover .cat-img img {
  transform: scale(1.06);
}

.cat-en {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold-point);
}

.cat-ja {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--light);
}

/* =====================================================================
   診断 ページ
   ===================================================================== */
.diag-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 52px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
}

.diag-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.diag-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 15, 22, 0.62) 0%,
    rgba(12, 15, 22, 0.88) 100%
  );
}

.diag-hero-text {
  position: relative;
  max-width: 720px;
}

/* 見出しの金色の方（設計は #C5930C） */
.diag-title-accent {
  color: var(--gold-point);
  text-shadow: 0 1px 0 #7a5a08, 0 2px 6px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(197, 147, 12, 0.4);
}

.step-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 26px 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-tile);
  background: rgba(255, 255, 255, 0.025);
}

.step-num {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--gold-point);
}

.step-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--light);
}

.step-sub {
  font-size: 13px;
  color: rgba(236, 247, 246, 0.62);
}

.diag-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.diag-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-card);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.diag-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--blue-rgb), 0.6);
  box-shadow: 0 52px 92px -42px rgba(0, 0, 0, 0.95);
}

.diag-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  opacity: 0.55;
  transition: opacity 0.4s ease, transform 0.6s ease;
}

.diag-card:hover .diag-card-bg {
  opacity: 0.7;
  transform: scale(1.03);
}

.diag-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
  padding: 34px 36px;
  background: linear-gradient(
    90deg,
    rgba(18, 20, 25, 0.92) 0%,
    rgba(18, 20, 25, 0.74) 70%,
    rgba(18, 20, 25, 0.2) 100%
  );
}

/* =====================================================================
   SNS ページ
   ===================================================================== */
.sns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.sns-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 40px 28px 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.sns-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.055);
}

.sns-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin-bottom: 6px;
}

.sns-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.35s ease;
}

.sns-x .sns-halo {
  background: radial-gradient(
    circle,
    rgba(150, 170, 205, 0.55) 0%,
    rgba(150, 170, 205, 0) 68%
  );
}

.sns-tiktok .sns-halo {
  background: radial-gradient(
    circle,
    rgba(37, 244, 238, 0.5) 0%,
    rgba(37, 244, 238, 0) 68%
  );
}

.sns-insta .sns-halo {
  background: radial-gradient(
    circle,
    rgba(228, 64, 95, 0.5) 0%,
    rgba(228, 64, 95, 0) 68%
  );
}

.sns-card:hover .sns-halo {
  opacity: 1;
}

.sns-icon img {
  position: relative;
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
  transition: transform 0.35s ease;
}

.sns-card:hover .sns-icon img {
  transform: scale(1.06);
}

.sns-name {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--light);
}

.sns-kind {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(236, 247, 246, 0.5);
}

.sns-handle {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: var(--blue-bright);
}

.sns-desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.75;
  color: rgba(236, 247, 246, 0.66);
}

.sns-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--light);
  border: 1px solid rgba(224, 184, 74, 0.5);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.sns-card:hover .sns-cta {
  color: #1e1e1e;
  border-color: transparent;
  background: linear-gradient(180deg, #f4cf62, var(--gold-point));
}

.sns-cta .arrow {
  transition: transform 0.3s ease;
}

.sns-card:hover .sns-cta .arrow {
  transform: translateX(4px);
}

/* =====================================================================
   お問い合わせ ページ
   ===================================================================== */
.ct-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.ct-title {
  margin: 18px 0 20px;
  font-size: 46px;
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: var(--light);
  text-shadow: 0 1px 0 #cfd6e0, 0 2px 0 #a8b2c2, 0 3px 4px rgba(0, 0, 0, 0.32),
    0 6px 12px rgba(0, 0, 0, 0.34);
}

.ct-lead {
  max-width: 560px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 2;
  color: rgba(236, 247, 246, 0.86);
}

.ct-note {
  max-width: 560px;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(236, 247, 246, 0.58);
}

.ct-hero-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
}

.ct-icon-glow {
  position: absolute;
  width: 290px;
  height: 290px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--blue-rgb), 0.34) 0%,
    rgba(var(--blue-rgb), 0) 66%
  );
  filter: blur(6px);
}

.ct-hero-icon img {
  position: relative;
  width: 216px;
  height: 216px;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
}

.ct-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ct-kind {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 24px 24px 26px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.25s ease, border-color 0.25s ease,
    background 0.25s ease;
}

.ct-kind:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--blue-rgb), 0.7);
  background: rgba(255, 255, 255, 0.055);
}

.ct-kind.is-active {
  border-color: var(--gold-point);
  background: rgba(197, 147, 12, 0.08);
}

.ct-kind-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold-point);
}

.ct-kind-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--light);
}

.ct-kind-sub {
  font-size: 12.5px;
  line-height: 1.8;
  color: rgba(236, 247, 246, 0.64);
}

.ct-panel {
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.055) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* ----- 送信後のパネル ----- */
.ct-sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 26px 10px 18px;
}

.ct-sent[hidden] {
  display: none;
}

.ct-sent-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-size: 32px;
  color: #e0b84a;
  border-radius: 50%;
  border: 1px solid rgba(224, 184, 74, 0.6);
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.14),
    rgba(255, 255, 255, 0.03)
  );
  box-shadow: 0 0 26px rgba(224, 184, 74, 0.35);
}

.ct-sent-title {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--light);
}

.ct-sent-text {
  max-width: 440px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(236, 247, 246, 0.72);
}

.ct-again {
  margin-top: 10px;
  padding: 13px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--light);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  transition: background 0.25s ease;
}

.ct-again:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* ----- フォーム ----- */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ct-form[hidden] {
  display: none;
}

.ct-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ct-form-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--light);
}

.ct-required-note {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(236, 247, 246, 0.55);
}

.req {
  color: #e0b84a;
}

.ct-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ct-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ct-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(236, 247, 246, 0.8);
}

.ct-form input,
.ct-form select,
.ct-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--light);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.ct-form textarea {
  min-height: 170px;
  line-height: 1.9;
  resize: vertical;
}

.ct-form input::placeholder,
.ct-form textarea::placeholder {
  color: rgba(236, 247, 246, 0.34);
}

.ct-form input:focus,
.ct-form select:focus,
.ct-form textarea:focus {
  outline: none;
  border-color: var(--blue-bright);
  background: rgba(0, 0, 0, 0.34);
}

.ct-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, rgba(236, 247, 246, 0.7) 50%),
    linear-gradient(135deg, rgba(236, 247, 246, 0.7) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.ct-form option {
  color: #1e1e1e;
}

.ct-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ct-privacy {
  max-width: 520px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(236, 247, 246, 0.55);
}

.ct-submit {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 34px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: linear-gradient(180deg, #f4cf62, var(--gold-point));
  box-shadow: 0 20px 38px -18px rgba(171, 126, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ct-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 44px -18px rgba(171, 126, 0, 0.75);
}

.ct-submit .arrow {
  transition: transform 0.3s ease;
}

.ct-submit:hover .arrow {
  transform: translateX(4px);
}

.ct-mailto-note {
  font-size: 12.5px;
  line-height: 1.9;
  color: rgba(236, 247, 246, 0.55);
}

.ct-mailto-note strong {
  color: rgba(236, 247, 246, 0.8);
}

.ct-mailto-note a {
  color: var(--blue-bright);
}

/* =====================================================================
   下層ページのレスポンシブ
   ===================================================================== */
@media (max-width: 1040px) {
  .yt-hero,
  .pg-hero,
  .ct-hero {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .pg-hero-icon,
  .ct-hero-icon {
    order: -1;
    min-height: 0;
  }
  .pg-hero-icon img,
  .ct-hero-icon img {
    width: 168px;
    height: 168px;
  }
  .pg-icon-glow,
  .ct-icon-glow {
    width: 220px;
    height: 220px;
  }
  .yt-title,
  .pg-title {
    font-size: 34px;
  }
  .pg-title-lg {
    font-size: 40px;
  }
  .pg-title-xl {
    font-size: 48px;
  }
  .yt-grid,
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sns-grid,
  .ct-kinds {
    grid-template-columns: 1fr;
  }
  .diag-hero {
    padding: 44px 40px;
  }
  .diag-card-body {
    max-width: none;
    background: linear-gradient(
      180deg,
      rgba(18, 20, 25, 0.88) 0%,
      rgba(18, 20, 25, 0.8) 100%
    );
  }
  .ct-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .yt-title,
  .pg-title {
    font-size: 29px;
  }
  .pg-title-lg,
  .pg-title-xl {
    font-size: 34px;
  }
  .ct-title {
    font-size: 32px;
  }
  .pg-lead br,
  .pg-title br,
  .ct-lead br,
  .row-sub br {
    display: none;
  }
  .row-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 20px;
  }
  .row-icon {
    width: 104px;
    height: 104px;
  }
  .step-list {
    grid-template-columns: 1fr;
  }
  .diag-hero {
    padding: 32px 24px;
  }
  .diag-card-body {
    padding: 24px 20px;
  }
  .ct-panel {
    padding: 26px 20px;
  }
}

@media (max-width: 560px) {
  .yt-grid,
  .cat-grid {
    grid-template-columns: 1fr;
  }
  .btn-pill,
  .ct-submit {
    width: 100%;
    justify-content: center;
  }
}

/* 横長カードは狭い画面で縦積みに戻す */
@media (max-width: 900px) {
  .row-card {
    flex-wrap: wrap;
    gap: 20px;
    padding: 22px 24px;
  }
  .row-cta {
    margin-left: 138px;
  }
}

@media (max-width: 720px) {
  .row-cta {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
  .row-title {
    font-size: 21px;
  }
  .row-sub {
    font-size: 14px;
  }
}

/* =====================================================================
   動き（設計正本 .dc.html の @keyframes をそのまま移植）
   スクロールで data-reveal が付くたびに再生される
   ===================================================================== */

/* ----- 共通のフェードイン ----- */
@keyframes revealUp {
  from {
    opacity: 0;
    translate: 0 48px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes revealRight {
  from {
    opacity: 0;
    translate: 64px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes revealLeft {
  from {
    opacity: 0;
    translate: -46px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* ===== TOP：コンテンツ一覧は左右から双方向に ===== */
.card-grid > li {
  opacity: 0;
  translate: 0 40px;
  transition: opacity 0.72s ease, translate 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-grid[data-reveal] > li {
  opacity: 1;
  translate: 0 0;
}
.card-grid[data-reveal] > li:nth-child(2) {
  transition-delay: 0.07s;
}
.card-grid[data-reveal] > li:nth-child(3) {
  transition-delay: 0.14s;
}
.card-grid[data-reveal] > li:nth-child(4) {
  transition-delay: 0.1s;
}
.card-grid[data-reveal] > li:nth-child(5) {
  transition-delay: 0.17s;
}
.card-grid[data-reveal] > li:nth-child(6) {
  transition-delay: 0.24s;
}


/* ===== YouTube：注目動画は右から / 再生リストは下から順に ===== */
#yt-feature {
  opacity: 0;
}
#yt-feature[data-reveal] {
  animation: revealRight 0.82s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#yt-grid > li {
  opacity: 0;
}
#yt-grid[data-reveal] > li {
  animation: revealUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#yt-grid[data-reveal] > li:nth-child(2) {
  animation-delay: 0.07s;
}
#yt-grid[data-reveal] > li:nth-child(3) {
  animation-delay: 0.14s;
}
#yt-grid[data-reveal] > li:nth-child(4) {
  animation-delay: 0.08s;
}
#yt-grid[data-reveal] > li:nth-child(5) {
  animation-delay: 0.15s;
}
#yt-grid[data-reveal] > li:nth-child(6) {
  animation-delay: 0.22s;
}

/* ===== ブログ：3Dアイコンがふわふわ浮く ===== */
@keyframes blogFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(4px, -10px) rotate(1.6deg);
  }
  50% {
    transform: translate(-3px, -16px) rotate(-1.2deg);
  }
  75% {
    transform: translate(-5px, -7px) rotate(-2deg);
  }
}

@keyframes blogFloatShadow {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.84);
    opacity: 0.65;
  }
}

.blog-float-icon {
  animation: blogFloat 6.5s ease-in-out infinite !important;
}
.blog-float-shadow {
  animation: blogFloatShadow 6.5s ease-in-out infinite;
}

#blog-cards > li {
  opacity: 0;
}
#blog-cards[data-reveal] > li {
  animation: revealUp 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#blog-cards[data-reveal] > li:nth-child(2) {
  animation-delay: 0.12s;
}

/* ===== Amazonストア：見出しは左から / カテゴリは下から順に ===== */
#amz-herotext {
  opacity: 0;
}
#amz-herotext[data-reveal] {
  animation: revealLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes amzUp {
  from {
    opacity: 0;
    translate: 0 54px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

#amz-catgrid > li {
  opacity: 0;
}
#amz-catgrid[data-reveal] > li {
  animation: amzUp 0.66s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#amz-catgrid[data-reveal] > li:nth-child(2) {
  animation-delay: 0.07s;
}
#amz-catgrid[data-reveal] > li:nth-child(3) {
  animation-delay: 0.14s;
}
#amz-catgrid[data-reveal] > li:nth-child(4) {
  animation-delay: 0.21s;
}
#amz-catgrid[data-reveal] > li:nth-child(5) {
  animation-delay: 0.1s;
}
#amz-catgrid[data-reveal] > li:nth-child(6) {
  animation-delay: 0.17s;
}
#amz-catgrid[data-reveal] > li:nth-child(7) {
  animation-delay: 0.24s;
}
#amz-catgrid[data-reveal] > li:nth-child(8) {
  animation-delay: 0.31s;
}

/* 金のCTAは常時ゆっくり光る */
@keyframes amzGoldGlow {
  0%,
  100% {
    box-shadow: 0 20px 40px -16px rgba(171, 126, 0, 0.6),
      0 0 0 rgba(224, 184, 74, 0);
  }
  50% {
    box-shadow: 0 24px 48px -16px rgba(171, 126, 0, 0.72),
      0 0 32px rgba(224, 184, 74, 0.5);
  }
}

.btn-pill-gold {
  animation: amzGoldGlow 2.8s ease-in-out infinite;
}

/* ===== SNS：3枚が順に ===== */
#sns-cards > li {
  opacity: 0;
  translate: 0 42px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#sns-cards[data-reveal] > li {
  opacity: 1;
  translate: 0 0;
}
#sns-cards[data-reveal] > li:nth-child(2) {
  transition-delay: 0.12s;
}
#sns-cards[data-reveal] > li:nth-child(3) {
  transition-delay: 0.24s;
}

/* ===== お問い合わせ：3Dアイコンがふわふわ／パネルは下から ===== */
@keyframes ctFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

.ct-float-icon {
  animation: ctFloat 5.5s ease-in-out infinite;
}

#ct-kinds,
#ct-panel {
  opacity: 0;
  translate: 0 42px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#ct-kinds[data-reveal],
#ct-panel[data-reveal] {
  opacity: 1;
  translate: 0 0;
}

/* ===== 診断：カードがスクロールで下からフェードイン ===== */
@keyframes diagCardReveal {
  from {
    opacity: 0;
    translate: 0 46px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

#diag-cats-list > li {
  opacity: 0;
}
#diag-cats-list[data-reveal] > li {
  animation: diagCardReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#diag-cats-list[data-reveal] > li:nth-child(2) {
  animation-delay: 0.1s;
}
#diag-cats-list[data-reveal] > li:nth-child(3) {
  animation-delay: 0.2s;
}

/* ===== 診断の流れ：3つの円が順番に点灯し、線が伸びる（5.6秒ループ） ===== */
.step-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 円をつなぐ薄い実線 */
.step-line {
  position: absolute;
  top: 32px;
  left: 16%;
  right: 16%;
  height: 1px;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--blue-rgb), 0) 0%,
    rgba(var(--blue-rgb), 0.5) 20%,
    rgba(var(--blue-rgb), 0.5) 80%,
    rgba(var(--blue-rgb), 0) 100%
  );
}

/* その上を伸びていく光の線 */
.step-line-grow {
  height: 2px;
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    rgba(var(--blue-rgb), 0.95),
    var(--blue-bright)
  );
  box-shadow: 0 0 12px rgba(var(--blue-rgb), 0.7);
  animation: diaglinegrow 5.6s ease-in-out infinite;
}

@keyframes diaglinegrow {
  0%,
  7% {
    transform: scaleX(0);
    opacity: 1;
  }
  38% {
    transform: scaleX(0.5);
  }
  70% {
    transform: scaleX(1);
  }
  90% {
    transform: scaleX(1);
    opacity: 1;
  }
  97% {
    transform: scaleX(1);
    opacity: 0;
  }
  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

/* ステップ1つぶん（枠は無く、円＋文字だけ・中央寄せ） */
.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
  padding: 0;
  border: none;
  background: none;
}

/* 番号の円（64px） */
.step-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: radial-gradient(circle at 50% 32%, #3a4150, #232730);
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* 点灯する青い円（順番に光る） */
.step-badge-on {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--blue-rgb), 0.6);
  background: radial-gradient(circle at 50% 32%, var(--blue-bright), #1b3676);
  box-shadow: 0 14px 30px -12px rgba(var(--blue-rgb), 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.step-on-1 {
  animation: diagstep1 5.6s ease-in-out infinite;
}
.step-on-2 {
  animation: diagstep2 5.6s ease-in-out infinite;
}
.step-on-3 {
  animation: diagstep3 5.6s ease-in-out infinite;
}

@keyframes diagstep1 {
  0%,
  4% {
    opacity: 0;
  }
  11%,
  30% {
    opacity: 1;
  }
  39%,
  100% {
    opacity: 0;
  }
}

@keyframes diagstep2 {
  0%,
  37% {
    opacity: 0;
  }
  45%,
  59% {
    opacity: 1;
  }
  67%,
  100% {
    opacity: 0;
  }
}

@keyframes diagstep3 {
  0%,
  65% {
    opacity: 0;
  }
  73%,
  90% {
    opacity: 1;
  }
  99%,
  100% {
    opacity: 0;
  }
}

.step-num {
  position: relative;
  z-index: 2;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--light);
  text-shadow: 0 1px 0 #b6bfcd, 0 2px 0 #828da4, 0 3px 4px rgba(0, 0, 0, 0.45);
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--light);
}

.step-sub {
  font-size: 12px;
  color: rgba(236, 247, 246, 0.73);
}

/* ===== 診断CTA：ホバーで金の輪郭が明滅 ===== */
@keyframes ctaGlow {
  0%,
  100% {
    border-color: rgba(197, 147, 12, 0.82);
    box-shadow: 0 30px 54px -16px rgba(0, 62, 197, 0.9),
      0 0 18px rgba(197, 147, 12, 0.42), 0 0 44px rgba(171, 126, 0, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }
  50% {
    border-color: rgba(224, 184, 74, 1);
    box-shadow: 0 30px 54px -16px rgba(0, 62, 197, 0.9),
      0 0 32px rgba(197, 147, 12, 0.85), 0 0 74px rgba(171, 126, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.52);
  }
}

.diag-cta:hover {
  animation: ctaGlow 2s ease-in-out infinite;
}

/* 文字切替は幅を保つため visibility で（設計どおり） */
.cta-swap .cta-hover {
  opacity: 1;
  visibility: hidden;
}
.diag-cta:hover .cta-default {
  opacity: 1;
  visibility: hidden;
}
.diag-cta:hover .cta-hover {
  visibility: visible;
}

/* ===== カード内CTAのホバー（矢印が7px進む＋金の明滅） ===== */
@keyframes ctaGlowSmall {
  0%,
  100% {
    border-color: rgba(197, 147, 12, 0.85);
    box-shadow: 0 0 15px rgba(197, 147, 12, 0.45),
      0 0 36px rgba(171, 126, 0, 0.28);
  }
  50% {
    border-color: rgba(224, 184, 74, 1);
    box-shadow: 0 0 28px rgba(197, 147, 12, 0.88),
      0 0 62px rgba(171, 126, 0, 0.55);
  }
}

.row-card:hover .row-cta {
  animation: ctaGlowSmall 2s ease-in-out infinite;
}

.row-card:hover .row-cta .arrow,
.diag-card:hover .row-cta .arrow,
.sns-card:hover .sns-cta .arrow {
  transform: translateX(7px);
}

/* ===== 動きを控えめにする設定の人には止める ===== */
@media (prefers-reduced-motion: reduce) {
  .card-grid > li,
  #yt-feature,
  #yt-grid > li,
  #blog-cards > li,
  #amz-herotext,
  #amz-catgrid > li,
  #sns-cards > li,
  #ct-kinds,
  #ct-panel,
  #diag-cats-list > li {
    opacity: 1 !important;
    translate: 0 0 !important;
    animation: none !important;
  }
  .blog-float-icon,
  .blog-float-shadow,
  .ct-float-icon,
  .mascot-img,
  .pg-hero-icon img,
  .step-badge-on,
  .step-line-grow,
  .btn-pill-gold,
  .diag-cta:hover {
    animation: none !important;
  }
}

/* =====================================================================
   診断カードの調整（ガッキー指定 2026-08-19）
   ・テキストを一律 2px 大きく
   ・スマートウォッチは被写体が画像の左にあり文字と重なるため、
     左右反転して右寄せにする（他の2枚は元から右に被写体がある）
   ===================================================================== */
.diag-card-bg-flip {
  transform: scaleX(-1);
}

.diag-card:hover .diag-card-bg-flip {
  transform: scaleX(-1) scale(1.03);
}

.diag-card-body .row-title {
  font-size: 27px;
}

.diag-card-body .row-sub {
  font-size: 17.5px;
}

.diag-card-body .row-cta {
  font-size: 17.5px;
}

.diag-card-body .tag {
  font-size: 13.5px;
  padding: 6px 14px;
}

.diag-card-body .chips span {
  font-size: 14px;
  padding: 7px 14px;
}

@media (max-width: 720px) {
  .diag-card-body .row-title {
    font-size: 22px;
  }
  .diag-card-body .row-sub,
  .diag-card-body .row-cta {
    font-size: 15px;
  }
}

/* =====================================================================
   背景の質感づくり（ガッキー相談 2026-08-19「寂しく感じる」）
   ダーク系サイトの定番3層：
     ① 写真をごく薄く敷く（何もない面をなくす）
     ② ビネット＝四隅を落として中央へ視線を集める
     ③ グレイン＝細かいノイズ。グラデーションの縞を消して上質に見せる
   ===================================================================== */

/* ② ビネット（周辺光レイヤーの疑似要素なのでHTMLは触らない） */
.ambient-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 50% 30%,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.28) 78%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

/* ③ グレイン（SVGノイズをそのまま埋め込むので追加ファイル不要） */
.ambient-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ① YouTube：背景レイヤーを出す（実際の画像は下の「背景をカメラ画像に」で指定） */
.page-yt .page-bg {
  display: block;
}

/* 上からの淡いスポットライト */
.page-yt .page-bg-veil {
  display: block;
  background: radial-gradient(
    100% 60% at 50% 0%,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0) 60%
  );
}

/* =====================================================================
   ① セクション間の細い区切り線（ガッキー指定 2026-08-19）
   端に向かって消える線にすると、硬くならず上品に見える
   ===================================================================== */
.main > section + section {
  position: relative;
}

.main > section + section::before {
  content: '';
  position: absolute;
  top: -21px; /* .main の gap:42px のちょうど中央 */
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.11) 18%,
    rgba(255, 255, 255, 0.11) 82%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* =====================================================================
   ② YouTube の背景をカメラ（レンズ）に寄せる
   画像を拡大してレンズ周辺だけを見せている
   ===================================================================== */
.page-yt .page-bg {
  /* ガッキー制作の撮影カメラ。右下から少しはみ出させて“気配”だけ置く。
     主張させないため、薄く＋わずかにぼかしている */
  background: url('../images/youtube/video-camera.png') right -6% bottom -12% /
    auto 72% no-repeat;
  opacity: 0.13;
  filter: blur(1.5px);
}

/* =====================================================================
   ③ ゆっくり動く光
   40〜55秒かけて漂う。気づかないくらいの速さが上品
   ===================================================================== */
@keyframes driftBlue {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(160px, 90px) scale(1.12);
  }
  66% {
    transform: translate(70px, 200px) scale(0.95);
  }
}

@keyframes driftGold {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  40% {
    transform: translate(-170px, -110px) scale(1.15);
  }
  75% {
    transform: translate(-60px, -220px) scale(0.92);
  }
}

@keyframes driftWhite {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) scale(1.18);
    opacity: 0.7;
  }
}

.ambient-blue {
  animation: driftBlue 46s ease-in-out infinite;
}

.ambient-gold {
  animation: driftGold 54s ease-in-out infinite;
}

.ambient-white {
  animation: driftWhite 38s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ambient-blue,
  .ambient-gold,
  .ambient-white {
    animation: none !important;
  }
}

/* ふわふわ浮くアイコン（ブログで使っている動きの汎用版）
   SNSページのヒーロー右側などで使う */
.float-icon {
  animation: blogFloat 6.5s ease-in-out infinite !important;
}

.float-shadow {
  animation: blogFloatShadow 6.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .float-icon,
  .float-shadow {
    animation: none !important;
  }
}

/* YouTubeページ：アイブロウ横の小さな3Dアイコンを動かす
   50pxと小さいので、振り幅を抑えた専用の軌道にしている */
@keyframes floatSmall {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(1.5px, -4px) rotate(1.4deg);
  }
  50% {
    transform: translate(-1px, -6px) rotate(-1deg);
  }
  75% {
    transform: translate(-2px, -3px) rotate(-1.8deg);
  }
}

/* 後ろの赤いハローもゆっくり呼吸させる */
@keyframes haloPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(1.12);
  }
}

.yt-eyebrow-icon img {
  animation: floatSmall 6.5s ease-in-out infinite;
}

.yt-eyebrow-icon::before {
  animation: haloPulse 6.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .yt-eyebrow-icon img,
  .yt-eyebrow-icon::before {
    animation: none !important;
  }
}

/* =====================================================================
   診断ページのヒーロー調整（ガッキー指定 2026-08-19）
   ・枠内の暗幕を薄くして写真を明るく見せる
     （左は文字用に残し、右へ向かって薄くする横方向のグラデを足した）
   ・右の余白に動く3Dアイコンを置く
   ===================================================================== */
.diag-hero-scrim {
  background:
    linear-gradient(
      90deg,
      rgba(12, 15, 22, 0.74) 0%,
      rgba(12, 15, 22, 0.52) 46%,
      rgba(12, 15, 22, 0.26) 100%
    ),
    linear-gradient(
      180deg,
      rgba(12, 15, 22, 0.2) 0%,
      rgba(12, 15, 22, 0.5) 100%
    );
}

.diag-hero-icon {
  position: absolute;
  top: 50%;
  right: 7%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 210px;
  transform: translateY(-50%);
  pointer-events: none;
}

.diag-hero-icon img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.6));
}

@media (max-width: 1040px) {
  .diag-hero-icon {
    display: none;
  }
}

/* =====================================================================
   SNSページの背景（ガッキー制作 2026-08-19）
   UIパネルが右側に寄った構図なので、そのまま全面に敷いて
   左（文字側）は元から暗いのを活かす。主張させないため薄く＋暗幕
   ===================================================================== */
.page-sns .page-bg,
.page-sns .page-bg-veil {
  display: block;
}

.page-sns .page-bg {
  background: url('../images/sns/sns-bg.png') center center / cover no-repeat;
  opacity: 0.34;
}

.page-sns .page-bg-veil {
  background: linear-gradient(
      90deg,
      rgba(16, 19, 26, 0.72) 0%,
      rgba(16, 19, 26, 0.44) 48%,
      rgba(16, 19, 26, 0.24) 100%
    ),
    linear-gradient(
      180deg,
      rgba(16, 19, 26, 0.2) 0%,
      rgba(16, 19, 26, 0.55) 100%
    );
}

/* =====================================================================
   ヘッダーのスマホ対応（ガッキー指定 2026-08-19）
   狭い画面では
     G・G・C
     【ガッキー・ガジェットチャンネル】
     ガジェットレビューサイト
   の3行にして、SNSアイコンは下の段へ回す。
   ※5個のアイコンと16文字のラベルは横に並ばないため、段を分けている
   ===================================================================== */

/* 横スクロールを出さない（周辺光のはみ出し対策） */
.page {
  overflow-x: hidden;
}

/* ロゴの【…】部分。広い画面では今までどおり横に続ける */
.logo-jp {
  font-size: 0.82em;
  font-weight: 500;
  color: rgba(236, 247, 246, 0.62);
  letter-spacing: 0.02em;
}

/* アイコンは潰さない */
.nav-list li {
  flex: 0 0 auto;
}

.nav {
  flex: 0 0 auto;
}

.logo-text {
  min-width: 0;
}

@media (max-width: 680px) {
  /* ロゴを上段・アイコンを下段に分ける */
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    min-height: 0;
  }

  .logo {
    align-items: center;
    gap: 12px;
  }

  .logo-mark {
    width: 48px;
    height: 48px;
  }

  /* ① G・G・C */
  .logo-title {
    font-size: 19px;
    line-height: 1.35;
  }

  /* ② 【ガッキー・ガジェットチャンネル】＝改行して次の行へ */
  .logo-jp {
    display: block;
    margin-left: 0;
    font-size: 12px;
    letter-spacing: 0.01em;
  }

  /* ③ ガジェットレビューサイト */
  .logo-sub {
    margin-top: 2px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }

  .nav-list {
    justify-content: center;
    gap: 12px;
  }

  .nav-list img {
    width: 38px;
    height: 38px;
  }
}

/* さらに狭い端末 */
@media (max-width: 400px) {
  .logo-title {
    font-size: 17px;
  }
  .logo-jp {
    font-size: 11px;
  }
  .logo-sub {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .nav-list {
    gap: 9px;
  }
  .nav-list img {
    width: 34px;
    height: 34px;
  }
}

/* フッターの6アイコンを狭い画面でも1行に収める */
@media (max-width: 560px) {
  .footer-nav {
    gap: 12px;
  }
  .footer-nav img {
    width: 40px;
    height: 40px;
  }
  .footer-nav span {
    font-size: 10px;
  }
}

/* スマホだけで効かせる改行（ガッキー指定 2026-08-19）
   例）ガジェットレビュアー ／
       G・G・C チャンネル運営者
   広い画面では改行せず1行のまま */
.br-sp {
  display: none;
}

@media (max-width: 680px) {
  .br-sp {
    display: inline;
  }
}

/* 運営者紹介の本文：スマホでは指定の位置で改行させるため、
   一番長い行（363px）が枠（324px）に収まるサイズまで下げる（ガッキー指定 2026-08-19） */
@media (max-width: 680px) {
  .intro-body {
    font-size: 14.5px;
    line-height: 1.95;
  }
}

@media (max-width: 400px) {
  .intro-body {
    font-size: 13.5px;
  }
}

/* =====================================================================
   診断ツールのカードを4列に（ガッキー指定 2026-08-19）
   スマートウォッチ／ヘッドホン／キーボード／お仕事あるあるRAP を同じ大きさで並べる
   ===================================================================== */
.card-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1040px) {
  .card-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* お仕事あるあるRAPのカードだけ、診断カードと区別できるよう金を強めにする */
.card-oshigoto {
  border-color: rgba(197, 147, 12, 0.55);
}

.card-oshigoto:hover {
  border-color: var(--gold-point);
  background: rgba(197, 147, 12, 0.1);
}

/* 円形アイコンなので枠に合わせて丸く収める */
.card-oshigoto .card-icon img {
  border-radius: 50%;
  object-fit: cover;
}

/* 4枚のカードの高さを揃える（文字量が違っても同じ大きさに見せる） */
.card-grid-4 > li {
  display: flex;
}

.card-grid-4 .card {
  width: 100%;
  justify-content: flex-start;
}

/* タイトルと説明の行数差で高さがズレないよう、行数ぶんの高さを確保する */
.card-grid-4 .card-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8em;
}

.card-grid-4 .card-sub {
  margin-top: auto;
}

/* ブログページは指定の位置で改行させたいので、
   共通の「スマホでは改行を解除」の対象から外す（ガッキー指定 2026-08-19） */
@media (max-width: 720px) {
  .page-blog .pg-title br,
  .page-blog .pg-lead br {
    display: inline;
  }
}

/* 幅が足りない画面で使う改行。
   1400px未満では「動画では伝えきれない／細部まで。」と分ける。
   （設計どおりの1440px幅では1行のまま） */
.br-narrow {
  display: none;
}

@media (max-width: 1400px) {
  .br-narrow {
    display: inline;
  }
}

/* ブログのカード説明文も、スマホで指定位置に改行させる */
@media (max-width: 720px) {
  .page-blog .row-sub br {
    display: inline;
  }
}

/* セクション見出しがスマホで折り返さないよう少しだけ小さくする
   （「レビュー済みガジェットを、」が枠と同じ幅=358pxで、あと数px足りなかった） */
@media (max-width: 720px) {
  .section-title {
    font-size: 24px;
  }
}

@media (max-width: 400px) {
  .section-title {
    font-size: 22px;
  }
}

/* PCのときだけ効かせる改行（スマホでは解除する） */
.br-pc {
  display: inline;
}

@media (max-width: 720px) {
  .br-pc {
    display: none !important;
  }
}

/* 診断ページも指定の位置で改行させる（共通の解除対象から外す） */
@media (max-width: 720px) {
  .page-shindan .pg-title br,
  .page-shindan .pg-lead br {
    display: inline;
  }
}

/* 診断カードの説明文も指定位置で改行させる */
@media (max-width: 720px) {
  .page-shindan .row-sub br {
    display: inline;
  }
}

/* 診断ページ：指定の改行位置で折り返さないよう、スマホでの文字サイズを合わせる
   （枠308px／最長行が見出し381px・本文310px・カード説明396px 必要だった） */
@media (max-width: 720px) {
  .page-shindan .pg-title {
    font-size: 23px;
  }
  .page-shindan .pg-lead {
    font-size: 15px;
  }
  .page-shindan .diag-card-body .row-sub {
    font-size: 11.5px;
    line-height: 1.8;
  }
}