/* 14 ダーク×ネオン — 下層ページの装飾。pages-base.css の --pg-* に値を入れ、決まった class をこの案の見た目で作る */

:root {
  --pg-bg: transparent;           /* 地は body のほぼ黒をそのまま見せる（上部の格子を透かす） */
  --pg-fg: #b7bdc5;
  --pg-muted: #9ea5ae;
  --pg-accent: #5fe3c4;
  --pg-accent-fg: #08090b;
  --pg-line: rgba(255, 255, 255, .1);
  --pg-card-bg: #0f1114;
  --pg-radius: 14px;
  --pg-max: 1160px;
  --pg-font-head: "Inter", "Noto Sans JP", system-ui, sans-serif;
  --pg-font-body: "Inter", "Noto Sans JP", system-ui, sans-serif;
}

/* ---- 上部の格子（ページの頭の後ろだけ） ---- */
.sub-grid {
  position: absolute;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: auto;
  height: 420px;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.sub-grid::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 85% 0%, rgba(var(--neon-rgb), .07), transparent 70%); }
@media (max-width: 1099px) { .sub-grid .beam { display: none; } }
.subpage main { position: relative; z-index: 1; }

/* ---- ページの頭 ---- */
.page .page-title { color: var(--fg); font-size: clamp(36px, 5vw, 60px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.page .page-lead { color: var(--fg-2); font-size: 16px; line-height: 1.9; }

/* ---- 区画: 上に細い罫と、左端に青緑の短い印 ---- */
.page .page-section { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }
.page .page-section::before { content: ""; position: absolute; top: -1px; left: 0; width: 24px; height: 1px; background: var(--neon); }
.page .section-title { color: var(--fg); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.015em; }
.page h3 { color: var(--fg); font-weight: 600; }

/* 本文 */
.page .prose a, .page .faq__answer a { color: var(--fg); text-decoration-color: rgba(var(--neon-rgb), .7); text-decoration-thickness: 1px; }
.page .prose a:hover, .page .faq__answer a:hover { color: var(--neon); }
.page .prose li::marker { color: var(--neon); }

/* 注記 */
.page .notice {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 2px solid rgba(var(--neon-rgb), .75);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  color: var(--fg-2);
  font-size: 14.5px;
}
.page .notice strong { color: var(--fg); font-weight: 600; }
.page .notice--privacy { border-left-color: var(--amber); }

/* 写真はモニターの枠の中に、暗く小さく */
.page figure.media {
  max-width: 720px;
  margin-left: max(0px, calc((100% - var(--pg-max)) / 2));
  margin-right: auto;
  padding: 8px 8px 10px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #17191d, #0e1013);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.page figure.media img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; filter: brightness(.6) saturate(.7) contrast(1.06); }
.page figure.media figcaption { margin: 10px 4px 0; color: var(--muted); }

/* ---- 料金のカード（料金のページで作り込み） ---- */
.page .price-cards.plan-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.page .plan-grid > .price-card { grid-column: span 2; }
.page .plan-grid > .price-card.plan--wide { grid-column: span 3; }
.page .price-card {
  gap: 18px;
  padding: 28px 26px 26px;
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .008)), var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.page .plan__a, .page .plan__b { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.page .plan__a > *, .page .plan__b > * { margin: 0; }
.page .plan__b { flex: 1; }
.page .price-card__name { font-size: 17px; letter-spacing: -.005em; }
.page .price-card__price { gap: 4px 14px; }
.page .price-card__ex { color: var(--fg); font-size: 14.5px; }
.page .plan__num {
  display: inline-block;
  margin-right: 2px;
  color: var(--fg);
  font-family: "Inter", sans-serif;
  font-size: clamp(32px, 2.9vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.page .price-card__in { flex-basis: 100%; color: var(--muted); font-size: 13.5px; }
.page .price-card__summary { color: var(--fg-2); font-size: 14.5px; line-height: 1.85; }
.page .price-card__for {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.75;
}
.page .price-card__for strong { margin-bottom: 4px; color: var(--neon); font-size: 12.5px; font-weight: 500; }
.page .price-card__includes { display: grid; gap: 8px; padding: 0; list-style: none; }
.page .price-card__includes li { position: relative; padding-left: 24px; color: var(--fg); font-size: 14px; line-height: 1.7; }
.page .price-card__includes li::before {
  content: "";
  position: absolute;
  top: .42em;
  left: 3px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--neon);
  border-bottom: 1.5px solid var(--neon);
  transform: rotate(-45deg);
}
.page .price-card__terms { gap: 0; border-top: 1px solid var(--line); }
.page .price-card__terms > div { padding: 10px 0; border-bottom: 1px solid var(--line); grid-template-columns: 5.6em minmax(0, 1fr); }
.page .price-card__terms dt { color: var(--muted); font-size: 13px; }
.page .price-card__terms dd { color: var(--fg); font-size: 13.5px; }
.page .price-card__cta { align-self: stretch; margin-top: auto; }
.page .price-card:not(.is-featured) .price-card__cta { background: rgba(255, 255, 255, .02); color: var(--fg); border-color: var(--line-2); }
.page .price-card:not(.is-featured) .price-card__cta:hover { background: rgba(var(--neon-rgb), .06); border-color: rgba(var(--neon-rgb), .55); box-shadow: none; }

/* 最初の 1 本に: 縁を青緑にし、上の縁に光が流れる */
.page .price-card.is-featured {
  border-color: rgba(var(--neon-rgb), .45);
  box-shadow: inset 0 1px 0 rgba(var(--neon-rgb), .25), 0 0 0 1px rgba(var(--neon-rgb), .08), 0 30px 70px -36px rgba(var(--neon-rgb), .35);
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--neon-rgb), .07), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), var(--card);
}
.page .price-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 11px;
  border: 1px solid rgba(var(--neon-rgb), .45);
  border-radius: 999px;
  background: rgba(var(--neon-rgb), .08);
  color: var(--neon);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
}
.page .price-card__badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 6px rgba(var(--neon-rgb), .8); }
.page .plan-sweep {
  position: absolute;
  top: -1px;
  left: 0;
  width: 120px;
  height: 1px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #c9fff1, transparent);
  opacity: 0;
}
.pg-motion .page .plan-sweep { opacity: 1; animation: plan-sweep 5.5s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes plan-sweep { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 50% { opacity: 1; } 58%, 100% { transform: translateX(calc(var(--sweep, 400px) - 120px)); opacity: 0; } }

/* 2 段の横長のカード（広い画面のシリーズと改訂保守・中くらいの画面では全部） */
.page .plan--wide { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 28px; align-items: stretch; }

/* 下層の動き: カードが順に現れる（pages.js が class を付けたときだけ） */
.pg-motion .page .plan-grid > .price-card { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.pg-motion .page .plan-grid > .price-card.is-in { opacity: 1; transform: none; }

/* ---- 共通の条件: 仕様表 ---- */
.page dl.terms-list.spec-sheet {
  max-width: none;
  padding: 6px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.page dl.spec-sheet > div { border-top: 1px solid var(--line); padding: 16px 0; }
.page dl.spec-sheet > div:first-child { border-top: 0; }
.page dl.spec-sheet > div:last-child { border-bottom: 0; }
.page dl.terms-list dt { color: var(--fg); font-weight: 500; font-size: 14.5px; }
.page dl.terms-list dd { color: var(--fg-2); font-size: 14.5px; line-height: 1.85; }

/* ---- 価格の考え方: 縦の線でつないだ工程 ---- */
.page dl.approach-list { position: relative; }
.page dl.approach-list::before { content: ""; position: absolute; top: 28px; bottom: 28px; left: 5px; width: 1px; background: linear-gradient(180deg, rgba(var(--neon-rgb), .6), var(--line-2)); }
.page dl.approach-list > div { position: relative; padding-left: 32px; border-top: 0; }
.page dl.approach-list > div:last-child { border-bottom: 0; }
.page dl.approach-list > div::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(var(--neon-rgb), .7);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--bg);
}

/* ---- 3 つの確認 ---- */
.page .checks > .check {
  gap: 10px;
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .008)), var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.page .check__role { font-size: 18px; }
.page .check__who { display: inline-flex; align-items: center; gap: 8px; color: var(--fg); font-size: 13.5px; }
.page .check__who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), .55); }
.page .checks > .check p.check__looks { color: var(--fg-2); font-size: 14.5px; line-height: 1.85; }

/* ---- 納品物: ファイルの一覧 ---- */
.page ul.deliverables > li { position: relative; padding: 13px 0 13px 28px; color: var(--fg); }
.page ul.deliverables > li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 2px;
  width: 12px;
  height: 15px;
  border: 1.5px solid var(--fg-2);
  border-radius: 2px 5px 2px 2px;
}

/* ---- 進め方: 番号を線でつなぐ ---- */
.page .steps { position: relative; }
.page .steps::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 16px;
  width: 1px;
  background: linear-gradient(180deg, rgba(var(--neon-rgb), .6), var(--line-2));
  pointer-events: none;
}
.page .steps > .step { padding: 24px 0 26px; border-top-color: var(--line); }
.page .steps > .step:last-child { border-bottom-color: var(--line); }
.page .steps > .step::before {
  position: relative;
  z-index: 1;
  align-self: start;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  border: 1px solid rgba(var(--neon-rgb), .7);
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg);
  color: var(--neon);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page .step__title { font-size: 18px; }
.page .step__weeks {
  justify-self: start;
  padding: 1px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.7;
}
.page .step__body { color: var(--fg-2); }
.page .step__ask {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  color: var(--fg-2);
  font-size: 14px;
}
.page .step__ask strong { margin-bottom: 2px; color: var(--fg); font-size: 13px; font-weight: 500; }

/* ---- よくある質問 ---- */
.page details.faq__item { border-top-color: var(--line); }
.page details.faq__item:last-child { border-bottom-color: var(--line); }
.page .faq__item > summary { color: var(--fg); font-size: 15.5px; font-weight: 500; transition: color .2s; }
.page .faq__item > summary:hover { color: #ffffff; }
.page .faq__item > summary::after { color: var(--neon); font-family: "Inter", sans-serif; font-weight: 400; }
.page .faq__answer { color: var(--fg-2); }

/* ---- 相談フォーム（準備中で入力できない状態も読めるように） ---- */
.page .contact-form legend { color: var(--fg); }
.page .contact-form label { color: var(--fg-2); font-size: 13.5px; }
.page .contact-form input,
.page .contact-form select,
.page .contact-form textarea {
  min-height: 44px;
  border-color: var(--line-2);
  border-radius: 9px;
  background: #111317;
  color: var(--fg);
}
.page .contact-form :is(input, select, textarea):disabled {
  opacity: 1;
  color: #c9ced5;
  -webkit-text-fill-color: #c9ced5;
  background: #111317;
  border-color: rgba(255, 255, 255, .1);
  cursor: not-allowed;
}
.page .contact-form ::placeholder { color: #949ba4; -webkit-text-fill-color: #949ba4; opacity: 1; }
.page .contact-form select option { background: #111317; color: var(--fg); }
.page .contact-form .button:disabled { background: #2a2e34; border-color: #2a2e34; color: #d3d7dd; }

/* ---- 締めの相談の帯: 格子の入ったカード ---- */
.page .cta-band {
  padding: clamp(32px, 5vw, 64px);
  border-color: var(--line);
  background:
    radial-gradient(ellipse 85% 130% at 0% 100%, var(--card) 38%, transparent 78%),
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
.page .cta-band h2 { color: var(--fg); font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.015em; }
.page .cta-band p { color: var(--fg-2); }

/* ---- 中くらいの画面: 料金のカードは横長に 1 列 ---- */
@media (max-width: 1099px) {
  .page .price-cards.plan-grid { grid-template-columns: minmax(0, 1fr); }
  .page .plan-grid > .price-card, .page .plan-grid > .price-card.plan--wide { grid-column: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
}

/* ---- 狭い画面 ---- */
@media (max-width: 700px) {
  .page .plan-grid > .price-card, .page .plan-grid > .price-card.plan--wide { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px 22px; }
  .page dl.terms-list.spec-sheet { padding: 4px 18px; }
  .page .price-card__terms > div { grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; }
  .page .steps::after { left: 16px; }
}
@media (max-width: 600px) {
  .page .page-title { font-size: 36px; }
  .page .price-card__terms > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}