@charset "UTF-8";
/* ========================================
 * COLORS
 * ====================================== */
/* ========================================
 * BACKGROUND
 * ====================================== */
/* ========================================
 * TEXT
 * ====================================== */
/* ========================================
 * BORDER
 * ====================================== */
/* ========================================
 * SHADOW
 * ====================================== */
/* ========================================
* FONT SIZE
* ====================================== */
/* ========================================
* LINE HEIGHT
* ====================================== */
/* ========================================
* FONT WEIGHT
* ====================================== */
/* ========================================
 * RADIUS
 * ====================================== */
/* ========================================
 * SPACING
 * ====================================== */
/* ========================================
 * TRANSITION
 * ====================================== */
/* ========================================
 * LAYOUT
 * ====================================== */
/* ========================================
 * Z-INDEX
 * ====================================== */
/* ========================================
 * MEDIA SIZE
 * ====================================== */
/* =========================================================================
 * /css/gaming/policy.css — /gaming/policy.php 専用追加スタイル
 *
 * 【スコープ】
 *   すべてのセレクタを .gpc-policy 配下に閉じ込める。
 *   .gpc-policy は <main class="dark-mode"> > <div class="container gpc-unique gpc-compact gpc-policy"> に付与。
 *   .gpc-unique / .gpc-compact のフレームワークを流用し、
 *   policy 固有セクションだけを本ファイルで追記する。
 *
 * 【前提】
 *   /gaming/unique.php / compact.php と同じ CSS スタックを読み込む前提。
 *   既存 unique.css / compact.css は編集せず、追記のみ。
 * =========================================================================*/
/* =====================================================================
 * HERO
 * （4本柱に対応：grid-template-columns: 4列）
 * ===================================================================*/
.p-hero__title {
  font-size: min(3vw, 44px);
}

.p-pillars {
  grid-template-columns: repeat(4, 1fr);
}

/* =====================================================================
 * Policy 01：チェック付きキーバリューリスト
 * ===================================================================*/
.p-policy-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-policy-list__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #2c4769;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  -webkit-transition: background 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
.p-policy-list__item:hover {
  -webkit-transform: translateX(2px);
          transform: translateX(2px);
  background: rgba(91, 209, 255, 0.06);
  border-color: rgba(91, 209, 255, 0.5);
}
.p-policy-list__head {
  margin: 0 0 2px;
  color: #f2f6fd;
  font-size: 15px;
  font-weight: 700;
}
.p-policy-list__body {
  margin: 0;
  color: #c7d3e6;
  font-size: 13px;
  line-height: 1.7;
}

/* =====================================================================
 * Policy 02：「効率より、確実」用：A vs B アプローチ比較カード
 * ===================================================================*/
.p-approach {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.p-approach__col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 26px 26px 28px;
  border: 1px solid #2c4769;
  border-radius: 14px;
  background: -webkit-gradient(linear, left top, left bottom, from(#131e30), to(#0c1726));
  background: linear-gradient(180deg, #131e30 0%, #0c1726 100%);
  -webkit-transition: border-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: border-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: border-color 0.2s ease, transform 0.2s ease;
  transition: border-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
.p-approach__col--a {
  border-color: rgba(44, 71, 105, 0.8);
}
.p-approach__col--a .p-approach__chip {
  background: rgba(199, 211, 230, 0.15);
  border: 1px solid rgba(199, 211, 230, 0.2);
  color: #c7d3e6;
}
.p-approach__col--a .p-approach__list li::before {
  background: #c7d3e6;
  -webkit-box-shadow: 0 0 8px rgba(199, 211, 230, 0.5);
          box-shadow: 0 0 8px rgba(199, 211, 230, 0.5);
}
.p-approach__col--b {
  border-color: rgba(91, 209, 255, 0.85);
  background: radial-gradient(60% 80% at 30% 0%, rgba(91, 209, 255, 0.14), transparent 70%), -webkit-gradient(linear, left top, left bottom, from(#131e30), to(#0c1726));
  background: radial-gradient(60% 80% at 30% 0%, rgba(91, 209, 255, 0.14), transparent 70%), linear-gradient(180deg, #131e30 0%, #0c1726 100%);
  -webkit-box-shadow: 0 0 28px rgba(91, 209, 255, 0.1);
          box-shadow: 0 0 28px rgba(91, 209, 255, 0.1);
}
.p-approach__col--b .p-approach__chip {
  background: rgba(91, 209, 255, 0.14);
  border: 1px solid rgba(91, 209, 255, 0.4);
  color: #5bd1ff;
}
.p-approach__col--b .p-approach__list li::before {
  background: #5bd1ff;
}
.p-approach__chip {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.p-approach__title {
  margin: 0 0 6px;
  padding: 0;
  background: none;
  color: #f2f6fd;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}
.p-approach__desc {
  margin: 0 0 14px;
  color: #c7d3e6;
  font-size: 13px;
  line-height: 1.85;
}
.p-approach__list {
  display: grid;
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.p-approach__list li {
  position: relative;
  padding: 8px 0 0 22px;
  border-top: 1px solid rgba(91, 209, 255, 0.18);
  color: #c7d3e6;
  font-size: 13px;
  line-height: 1.7;
}
.p-approach__list li:first-child {
  border-top: 0;
}
.p-approach__list li::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 0;
  width: 12px;
  height: 1px;
}
.p-approach__divider {
  display: grid;
  place-items: center;
  width: 56px;
}
.p-approach__vs {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #1f1303;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #ffb03f 0%, rgb(238.5, 140.3671875, 0) 100%);
  color: #1f1303;
  -webkit-box-shadow: 0 8px 18px rgba(255, 176, 63, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
          box-shadow: 0 8px 18px rgba(255, 176, 63, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.p-approach__note {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px dashed rgba(91, 209, 255, 0.4);
  border-radius: 12px;
  background: rgba(91, 209, 255, 0.08);
  color: #f2f6fd;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.p-approach__note__chip {
  display: inline-block;
  margin: 0 12px;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 999px;
  letter-spacing: 0.1em;
  background: rgba(91, 209, 255, 0.15);
  border: 1px solid rgba(91, 209, 255, 0.4);
  color: #5bd1ff;
}

/* =====================================================================
 * Policy 03：「量産しない」用：中央PC＋周囲7要素の図解
 * ===================================================================*/
.p-axes-figure {
  position: relative;
  padding: 24px;
  border: 1px solid #2c4769;
  border-radius: 18px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(91, 209, 255, 0.1), transparent 70%), -webkit-gradient(linear, left top, left bottom, from(#131e30), to(#0c1726));
  background: radial-gradient(60% 60% at 50% 50%, rgba(91, 209, 255, 0.1), transparent 70%), linear-gradient(180deg, #131e30 0%, #0c1726 100%);
}
.p-axes-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-axes-item {
  padding: 18px;
  border: 1px solid #2c4769;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  -webkit-transition: background 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease, -webkit-transform 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
}
.p-axes-item:hover {
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
  background: rgba(91, 209, 255, 0.08);
  border-color: rgba(91, 209, 255, 0.5);
}
.p-axes-item__chip {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border: 1px solid rgba(255, 176, 63, 0.4);
  border-radius: 999px;
  background: rgba(255, 176, 63, 0.14);
  color: #ffb03f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.p-axes-item__title {
  margin: 0 0 4px;
  color: #f2f6fd;
  font-size: 15px;
  font-weight: 700;
}
.p-axes-item__desc {
  margin: 0;
  color: #c7d3e6;
  font-size: 13px;
  line-height: 1.7;
}
.p-axes-center {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  margin: 0 auto 24px;
  border: 1px solid rgba(91, 209, 255, 0.6);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(91, 209, 255, 0.35), transparent 65%), linear-gradient(135deg, #182843 0%, #0a1320 100%);
  -webkit-box-shadow: 0 0 32px rgba(91, 209, 255, 0.22), inset 0 0 24px rgba(91, 209, 255, 0.12);
          box-shadow: 0 0 32px rgba(91, 209, 255, 0.22), inset 0 0 24px rgba(91, 209, 255, 0.12);
}
.p-axes-center::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px dashed rgba(91, 209, 255, 0.35);
  border-radius: 50%;
  -webkit-animation: gpc-policy-rotate 28s linear infinite;
          animation: gpc-policy-rotate 28s linear infinite;
}
.p-axes-center__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  text-align: center;
}
.p-axes-center__eyebrow {
  color: #5bd1ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.p-axes-center__title {
  color: #f2f6fd;
  font-size: 22px;
  font-weight: 800;
}
.p-axes-center__desc {
  color: #c7d3e6;
  font-size: 11px;
  line-height: 1.7;
}

@-webkit-keyframes gpc-policy-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes gpc-policy-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* =====================================================================
 * Policy 04：「手間を惜しまない」用：タイムライン（5フェーズ）
 * ===================================================================*/
.p-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.p-timeline::before {
  top: 18px;
}
.p-timeline__step {
  position: relative;
  z-index: 1;
  padding: 0 8px;
  text-align: center;
}
.p-timeline__marker {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  border: 1px solid rgba(91, 209, 255, 0.55);
  border-radius: 50%;
  background: linear-gradient(135deg, #1a2a45, #0e1a2e);
  -webkit-box-shadow: 0 6px 16px rgba(91, 209, 255, 0.18);
          box-shadow: 0 6px 16px rgba(91, 209, 255, 0.18);
}
.p-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #5bd1ff;
  -webkit-box-shadow: 0 0 12px rgba(91, 209, 255, 0.65);
          box-shadow: 0 0 12px rgba(91, 209, 255, 0.65);
}
.p-timeline__phase {
  margin: 0 0 4px;
  color: #ffb03f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.p-timeline__label {
  margin: 0 0 6px;
  color: #f2f6fd;
  font-size: 15px;
  font-weight: 600;
}
.p-timeline__item {
  margin: 0;
  color: #c7d3e6;
  font-size: 13px;
  line-height: 1.4;
}

/* =====================================================================
 * Policy 05：長期安定の5要素（番号付きリスト）
 * ===================================================================*/
.p-pillars5 {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.p-pillars5__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #2c4769;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.p-pillars5__item:hover {
  background: rgba(91, 209, 255, 0.07);
  border-color: rgba(91, 209, 255, 0.5);
}
.p-pillars5__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5bd1ff 0%, rgb(4.5, 184.737804878, 255) 100%);
  color: #052033;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  -webkit-box-shadow: 0 4px 12px rgba(91, 209, 255, 0.35);
          box-shadow: 0 4px 12px rgba(91, 209, 255, 0.35);
}
.p-pillars5__title {
  margin: 0 0 2px;
  color: #f2f6fd;
  font-size: 15px;
  font-weight: 700;
}
.p-pillars5__desc {
  margin: 0;
  color: #c7d3e6;
  font-size: 12.5px;
  line-height: 1.7;
}

/* =====================================================================
 * Policy 06：「ワクワクより信頼」用：見出し＋2カラム
 * ===================================================================*/
.p-evt-headline {
  display: block;
  margin: 0 0 24px;
  padding: 20px 24px;
  border: 1px solid #2c4769;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
  font-size: 18px;
}
.p-evt-headline__line {
  display: block;
  color: #c7d3e6;
  font-weight: 600;
  line-height: 2;
}
.p-evt-headline__line--accent {
  margin-top: 6px;
  background: linear-gradient(135deg, #5bd1ff 0%, #b8e9ff 60%, #ffb03f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 800;
}

.p-evt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.p-evt-col {
  padding: 22px 24px;
  border: 1px solid #2c4769;
  border-radius: 14px;
  background: -webkit-gradient(linear, left top, left bottom, from(#131e30), to(#0c1726));
  background: linear-gradient(180deg, #131e30 0%, #0c1726 100%);
}
.p-evt-col--excite {
  border-color: rgba(255, 176, 63, 0.32);
}
.p-evt-col--excite .p-evt-col__head {
  color: #ffb03f;
}
.p-evt-col--trust {
  border-color: rgba(91, 209, 255, 0.45);
  -webkit-box-shadow: inset 0 0 0 1px rgba(91, 209, 255, 0.05);
          box-shadow: inset 0 0 0 1px rgba(91, 209, 255, 0.05);
}
.p-evt-col--trust .p-evt-col__head {
  color: #5bd1ff;
}
.p-evt-col__head {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.p-evt-col__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-evt-col__list li {
  padding: 10px 14px;
  border: 1px solid rgba(91, 209, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  color: #c7d3e6;
  font-size: 14px;
}

/* =====================================================================
 * ブランドメッセージセクション
 * ===================================================================*/
.p-brand {
  position: relative;
  overflow: hidden;
  padding: 56px 40px;
  border: 1px solid #2c4769;
  border-radius: 22px;
  background: radial-gradient(60% 80% at 50% 0%, rgba(91, 209, 255, 0.18), transparent 70%), radial-gradient(60% 80% at 50% 100%, rgba(255, 176, 63, 0.1), transparent 70%), -webkit-gradient(linear, left top, left bottom, from(#0f1c33), to(#0a1320));
  background: radial-gradient(60% 80% at 50% 0%, rgba(91, 209, 255, 0.18), transparent 70%), radial-gradient(60% 80% at 50% 100%, rgba(255, 176, 63, 0.1), transparent 70%), linear-gradient(180deg, #0f1c33 0%, #0a1320 100%);
  -webkit-box-shadow: var(--u-shadow-lg);
          box-shadow: var(--u-shadow-lg);
  text-align: center;
}
.p-brand::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(91, 209, 255, 0.5), transparent 40%, rgba(255, 176, 63, 0.35) 100%);
  -webkit-mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000)) content-box, -webkit-gradient(linear, left top, left bottom, color-stop(0, #000));
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
}
.p-brand__eyebrow {
  margin: 0 0 12px;
  color: #5bd1ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.p-brand__title {
  margin: 0 0 18px;
  padding: 0;
  background: none;
  color: #f2f6fd;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.4;
}
.p-brand__lead {
  max-width: 720px;
  margin: 0 auto 24px;
  color: #c7d3e6;
  font-size: 15px;
}
.p-brand__moments {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.p-brand__moments li {
  padding: 10px 18px;
  border: 1px solid rgba(91, 209, 255, 0.4);
  border-radius: 999px;
  background: rgba(91, 209, 255, 0.04);
  color: #c7d3e6;
  font-size: 15px;
  font-weight: 600;
}
.p-brand__sign {
  margin: 0;
  background: linear-gradient(135deg, #5bd1ff 0%, #b8e9ff 60%, #ffb03f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* =====================================================================
 * Message 02：満足度スタック（横長セグメント）
 * ===================================================================*/
.p-stack {
  padding: 24px;
  border: 1px solid #2c4769;
  border-radius: 16px;
  background: -webkit-gradient(linear, left top, left bottom, from(#131e30), to(#0c1726));
  background: linear-gradient(180deg, #131e30 0%, #0c1726 100%);
}
.p-stack__bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  height: 64px;
  border: 1px solid #2c4769;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.p-stack__seg {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2px;
  overflow: hidden;
  border-right: 1px solid rgba(11, 20, 34, 0.5);
  color: #052033;
  -webkit-transition: -webkit-filter 0.2s ease;
  transition: -webkit-filter 0.2s ease;
  transition: filter 0.2s ease;
  transition: filter 0.2s ease, -webkit-filter 0.2s ease;
}
.p-stack__seg:last-child {
  border-right: 0;
}
.p-stack__seg:hover {
  -webkit-filter: brightness(1.08);
          filter: brightness(1.08);
}
.p-stack__seg-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.p-stack__seg-weight {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
}
.p-stack__seg--1 {
  background: linear-gradient(135deg, #5bd1ff 0%, rgb(4.5, 184.737804878, 255) 100%);
  color: #052033;
}
.p-stack__seg--2 {
  background: linear-gradient(135deg, #86e3b8 0%, rgb(56.2137583893, 214.5362416107, 141.3333730245) 100%);
  color: #052013;
}
.p-stack__seg--3 {
  background: linear-gradient(135deg, #8b5cff 0%, rgb(77.263803681, 5.25, 255) 100%);
  color: #f2f6fd;
}
.p-stack__seg--4 {
  background: linear-gradient(135deg, #d67a7a 0%, rgb(198.5586206897, 53.4413793103, 53.4413793103) 100%);
  color: #1f1303;
}
.p-stack__seg--5 {
  background: linear-gradient(135deg, #ffb03f 0%, rgb(238.5, 140.3671875, 0) 100%);
  color: #1f1303;
}
.p-stack__legend {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.p-stack__legend li {
  display: grid;
  grid-template-columns: 14px 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #2c4769;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.p-stack__chip {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 4px;
}
.p-stack__chip--1 {
  background: #5bd1ff;
}
.p-stack__chip--2 {
  background: #d67a7a;
}
.p-stack__chip--3 {
  background: #86e3b8;
}
.p-stack__chip--4 {
  background: #8b5cff;
}
.p-stack__chip--5 {
  background: #ffb03f;
}
.p-stack__name {
  margin: 0 0 2px;
  color: #f2f6fd;
  font-size: 13px;
  font-weight: 700;
}
.p-stack__desc {
  margin: 0;
  color: #c7d3e6;
  font-size: 11px;
  line-height: 1.6;
}
.p-stack__note {
  margin-top: 14px;
  color: var(--u-text-2);
  font-size: 12px;
  font-style: italic;
}

/* =====================================================================
 * Message 03：購入後の安心感タイムライン用フェーズ強調
 * ===================================================================*/
.p-ownership-phase {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 176, 63, 0.14);
  border: 1px solid rgba(255, 176, 63, 0.4);
  color: #ffb03f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.p-ownership-phase__support {
  font-size: 15px;
  font-weight: 800;
  color: #5bd1ff;
  margin-top: 16px;
}

/* =====================================================================
 * FAQ アコーディオン
 * ===================================================================*/
.p-faq {
  display: grid;
  gap: 12px;
}
.p-faq__item {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #2c4769;
  background: rgba(255, 255, 255, 0.035);
  -webkit-transition: background 0.2s ease, border-color 0.2s ease;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.p-faq__item[open] {
  background: rgba(91, 209, 255, 0.05);
  border-color: rgba(91, 209, 255, 0.45);
}
.p-faq__item[open] .p-faq__q-toggle {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.p-faq__q {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  gap: 14px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  color: #f2f6fd;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.p-faq__q::-webkit-details-marker {
  display: none;
}
.p-faq__q-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5bd1ff 0%, rgb(4.5, 184.737804878, 255) 100%);
  color: #052033;
  font-size: 13px;
  font-weight: 900;
}
.p-faq__q-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(91, 209, 255, 0.3);
  background: rgba(91, 209, 255, 0.1);
  color: #5bd1ff;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.p-faq__q-toggle svg {
  width: 14px;
  height: 14px;
}
.p-faq__a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 0 18px 18px;
}
.p-faq__a-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 176, 63, 0.4);
  background: rgba(255, 176, 63, 0.14);
  color: #ffb03f;
  font-size: 13px;
  font-weight: 900;
}
.p-faq__a-text {
  margin: 0;
  padding-top: 6px;
  color: #c7d3e6;
  font-size: 14px;
}

/* =====================================================================
 * 最終CTA前のアイブロウ
 * ===================================================================*/
.p-final__eyebrow {
  color: #5bd1ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

/* =====================================================================
 * レスポンシブ
 * ===================================================================*/
@media (width <= 1024px) {
  .p-approach {
    grid-template-columns: 1fr;
  }
  .p-approach__divider {
    width: auto;
  }
  .p-approach__vs {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
  .p-pillars5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-axes-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-axes-center {
    width: 180px;
    height: 180px;
  }
  .p-axes-center__title {
    font-size: 18px;
  }
  .p-timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 14px;
  }
  .p-stack__legend {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-stack__bar {
    height: 56px;
  }
  .p-stack__seg-name {
    font-size: 11px;
  }
  .p-stack__seg-weight {
    font-size: 11px;
  }
  .p-brand {
    padding: 44px 26px;
  }
  .p-brand__title {
    font-size: 26px;
  }
  .p-brand__sign {
    font-size: 17px;
  }
}
@media (width <= 767px) {
  .p-pillars,
  .p-pillars5,
  .p-evt-grid {
    grid-template-columns: 1fr;
  }
  .p-axes-center {
    width: 160px;
    height: 160px;
  }
  .p-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-stack__legend {
    grid-template-columns: 1fr;
  }
  .p-stack__seg-name {
    font-size: 11px;
  }
  .p-stack__seg-weight {
    display: none;
  }
  .p-evt-headline__line {
    font-size: 14px;
  }
  .p-evt-headline__line--accent {
    font-size: 15px;
  }
  .p-faq__q {
    grid-template-columns: 28px 1fr 24px;
    font-size: 14px;
  }
  .p-faq__q-mark {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .p-faq__a {
    grid-template-columns: 28px 1fr;
  }
  .p-faq__a-mark {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .p-brand__title {
    font-size: 22px;
  }
  .p-brand__lead {
    font-size: 14px;
  }
}