/* =====================================================================
 *  PC UPGRADE（シッポPC）— スタイル
 *  ---------------------------------------------------------------------
 *  【デザインの方針】
 *   シッポPCの子サイト（GPU GUIDE / PC BUILD CHECK / GAME PC GUIDE）は
 *   ダークUIで統一されているので、その系譜に乗せる＝ブランドは揃える。
 *   そのうえで「アップグレード＝強化・改善」を表すため、
 *   アクセントを他サイトのシアン/パープルから【グリーン〜ライム】へ変える。
 *   （性能が"上がる"ことを示す色。ベンチマークのグラフや電源ランプの連想）
 *
 *   ハードウェア寄りの空気を出すため、
 *     - 角丸は控えめ（親サイトの24px→14px）
 *     - 基板のような細いグリッド背景
 *     - 等幅フォントを数値・型番に使う
 *   を採用する。ただし読みやすさを損なう装飾はしない。
 *
 *  【レスポンシブ方針】
 *   320px でも横スクロールを発生させない。
 *   iPhone Safari の下部UIと固定要素が干渉しないよう safe-area を使う。
 * ===================================================================== */

:root {
  /* ベース（暗色。他の子サイトと同系統） */
  --u-bg:        #0B0F14;
  --u-bg-soft:   #121821;
  --u-panel:     #161D28;
  --u-panel-2:   #1B2431;
  --u-line:      rgba(255, 255, 255, .10);
  --u-line-str:  rgba(255, 255, 255, .18);

  /* 文字 */
  --u-fg:        #E9F0F7;
  --u-fg-soft:   #9FB0C4;
  --u-fg-dim:    #6F8299;

  /* アクセント：アップグレード＝性能が上がる色 */
  --u-accent:      #4ADE80;   /* グリーン */
  --u-accent-deep: #22C55E;
  --u-accent-lime: #A3E635;
  --u-accent-glow: rgba(74, 222, 128, .22);

  /* 補助色：判定の意味づけに使う */
  --u-keep:   #38BDF8;  /* 現状維持＝青（安心） */
  --u-warn:   #FBBF24;  /* 要検討＝黄 */
  --u-danger: #F87171;  /* 要交換・注意＝赤 */
  --u-info:   #A78BFA;  /* 補足＝紫 */

  --u-radius:    14px;
  --u-radius-lg: 20px;

  --u-shadow:     0 10px 30px rgba(0, 0, 0, .38);
  --u-shadow-pop: 0 18px 48px rgba(0, 0, 0, .5);

  --u-font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  /* 型番・数値は等幅で。ハードウェア系の質感と可読性の両立 */
  --u-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --u-header-h: 60px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* iOS で横向きにしたとき文字が勝手に拡大されるのを防ぐ */
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--u-font);
  font-weight: 500;
  background: var(--u-bg);
  color: var(--u-fg);
  line-height: 1.8;
  /* 横スクロールの保険。原因は個別に潰すが、事故を表に出さない */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; }
table { border-collapse: collapse; }

/* セクション見出しがヘッダーに隠れないように */
section { scroll-margin-top: calc(var(--u-header-h) + 12px); }

.container {
  width: min(1080px, 100% - 32px);
  margin-inline: auto;
}
@media (max-width: 420px) {
  /* 狭い画面では左右余白を詰めて、内容の幅を確保する */
  .container { width: min(1080px, 100% - 24px); }
}

.mono { font-family: var(--u-mono); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =====================================================================
 *  ヘッダー
 * ===================================================================== */
.u-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 15, 20, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--u-line);
  padding-top: env(safe-area-inset-top);
}
@media (max-width: 820px) {
  /* スマホは backdrop-filter を切って不透明背景に（スクロール時の描画負荷を下げる） */
  .u-header {
    background: rgba(11, 15, 20, .98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.u-header__inner {
  height: var(--u-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.u-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}
.u-logo__mark {
  font-size: 17px;
  color: var(--u-accent);
}
.u-logo__sub {
  font-size: 11px;
  color: var(--u-fg-dim);
  font-weight: 700;
}

.u-header__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.u-header__link {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--u-fg-soft);
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.u-header__link:hover { background: rgba(255, 255, 255, .07); color: var(--u-fg); }

/* 画面が狭いとページ内リンクは邪魔になるので隠し、サービスナビだけ残す */
@media (max-width: 900px) {
  .u-header__link { display: none; }
}

/* =====================================================================
 *  共通パーツ
 * ===================================================================== */
.u-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* タップ領域を44px以上に保つ */
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
  /* 長い日本語ラベルでボタンが画面外に出ないように */
  max-width: 100%;
}
.u-btn--primary {
  background: linear-gradient(135deg, var(--u-accent), var(--u-accent-deep));
  color: #06210F;
  box-shadow: 0 8px 24px var(--u-accent-glow);
}
.u-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px var(--u-accent-glow); }
.u-btn--ghost {
  border: 1px solid var(--u-line-str);
  color: var(--u-fg);
  background: rgba(255, 255, 255, .04);
}
.u-btn--ghost:hover { background: rgba(255, 255, 255, .09); }
.u-btn--lg { min-height: 56px; padding: 14px 32px; font-size: 16.5px; }

.u-section { padding: 64px 0; }
.u-section--tight { padding: 44px 0; }
.u-section--alt { background: var(--u-bg-soft); }

.u-section__head { margin-bottom: 28px; }
.u-label {
  display: inline-block;
  font-family: var(--u-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--u-accent);
  margin-bottom: 8px;
}
.u-section__head h2 {
  font-size: clamp(21px, 4.6vw, 30px);
  line-height: 1.4;
  letter-spacing: .01em;
}
.u-section__head p {
  margin-top: 10px;
  color: var(--u-fg-soft);
  font-size: 15px;
}

.u-card {
  background: var(--u-panel);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  padding: 20px;
}

/* =====================================================================
 *  ヒーロー
 * ===================================================================== */
.u-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 52px;
  border-bottom: 1px solid var(--u-line);
}
/* 基板のようなグリッド。画像を使わずCSSだけで描く（軽さ優先） */
.u-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74, 222, 128, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 222, 128, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.u-hero__inner { position: relative; }

.u-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(74, 222, 128, .35);
  border-radius: 999px;
  background: rgba(74, 222, 128, .08);
  color: var(--u-accent);
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 18px;
}
.u-hero__badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--u-accent);
  box-shadow: 0 0 10px var(--u-accent);
}

.u-hero h1 {
  font-size: clamp(25px, 6.4vw, 46px);
  line-height: 1.34;
  letter-spacing: .005em;
  margin-bottom: 18px;
}
.u-hero h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--u-accent-lime), var(--u-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.u-hero__lead {
  max-width: 620px;
  color: var(--u-fg-soft);
  font-size: clamp(14.5px, 3.4vw, 16.5px);
  margin-bottom: 26px;
}
.u-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}
@media (max-width: 420px) {
  /* 狭い画面ではボタンを縦積みにして、はみ出しと窮屈さを避ける */
  .u-hero__actions { flex-direction: column; align-items: stretch; }
  .u-hero__actions .u-btn { width: 100%; }
}

/* 悩みチップ：ユーザーが自分の状況を見つけるための入口 */
.u-worries {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.u-worry {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--u-fg-soft);
  font-size: 13px;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
a.u-worry:hover {
  border-color: var(--u-accent);
  color: var(--u-accent);
  background: rgba(74, 222, 128, .08);
}

/* =====================================================================
 *  フロー（悩み→診断→結果）
 * ===================================================================== */
.u-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  counter-reset: flow;
}
.u-flow__item {
  position: relative;
  padding: 18px;
  background: var(--u-panel);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
}
.u-flow__item::before {
  counter-increment: flow;
  content: 'STEP ' counter(flow);
  display: block;
  font-family: var(--u-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--u-accent);
  margin-bottom: 8px;
}
.u-flow__item h3 { font-size: 16px; margin-bottom: 6px; }
.u-flow__item p { font-size: 13.5px; color: var(--u-fg-soft); }

/* =====================================================================
 *  メニュー（パーツ別カード）
 * ===================================================================== */
.u-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.u-menu-card {
  display: block;
  padding: 22px;
  background: var(--u-panel);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.u-menu-card:hover {
  transform: translateY(-3px);
  border-color: rgba(74, 222, 128, .45);
  box-shadow: var(--u-shadow);
}
.u-menu-card__icon {
  font-size: 26px;
  margin-bottom: 10px;
  line-height: 1;
}
.u-menu-card h3 {
  font-size: 17.5px;
  margin-bottom: 4px;
}
.u-menu-card__en {
  display: block;
  font-family: var(--u-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--u-accent);
  margin-bottom: 10px;
}
.u-menu-card p { font-size: 13.5px; color: var(--u-fg-soft); }
.u-menu-card__for {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--u-line);
}
.u-menu-card__for li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: var(--u-fg-soft);
}
.u-menu-card__for li::before {
  content: '';
  position: absolute;
  left: 3px; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--u-accent);
}

/* =====================================================================
 *  診断フォーム
 * ===================================================================== */
.u-form {
  background: var(--u-panel);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius-lg);
  padding: 24px;
}
@media (max-width: 480px) {
  .u-form { padding: 18px 16px; border-radius: var(--u-radius); }
}

.u-form__note {
  padding: 14px 16px;
  margin-bottom: 22px;
  background: rgba(56, 189, 248, .08);
  border: 1px solid rgba(56, 189, 248, .25);
  border-radius: var(--u-radius);
  font-size: 13.5px;
  color: var(--u-fg-soft);
}
.u-form__note strong { color: var(--u-keep); }

.u-fieldset { border: none; margin-bottom: 26px; }
.u-fieldset > legend {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
  padding: 0;
}
.u-fieldset__desc {
  font-size: 13px;
  color: var(--u-fg-dim);
  margin-bottom: 14px;
}

.u-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

/* 各項目は「ラベル → 補足 → 入力欄」の縦積み。
   補足文の有無・行数で入力欄の位置がズレないよう、
   項目自体を縦方向のflexにして、入力欄を下端に寄せる。

   grid の既定（align-items: stretch）で同じ行の .u-field は
   同じ高さになる。そのうえで入力欄を下に押し付けるので、
   補足が1行でも2行でも無くても、入力欄の上端が必ず揃う。
   ＝ 個別のmargin調整やtransformでの手動ずらしが要らない。 */
.u-field {
  display: flex;
  flex-direction: column;
}
.u-field__label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.u-field__hint {
  display: block;
  font-size: 12px;
  color: var(--u-fg-dim);
  font-weight: 500;
  margin-top: 2px;
}

/* 入力欄を項目の下端へ寄せる ＝ 同じ行での縦位置がそろう。
   1列表示（スマホ）のときは打ち消す。下記のメディアクエリ参照。 */
.u-field > .u-input,
.u-field > .u-select {
  margin-top: auto;
}

.u-input, .u-select {
  width: 100%;
  /* iOS Safari は font-size 16px 未満の入力欄でフォーカス時に
     自動ズームする。これを防ぐため入力系は必ず16px以上にする。 */
  font-size: 16px;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--u-bg-soft);
  border: 1px solid var(--u-line-str);
  border-radius: 10px;
  color: var(--u-fg);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.u-input::placeholder { color: var(--u-fg-dim); }
.u-input:focus, .u-select:focus {
  outline: none;
  border-color: var(--u-accent);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .16);
}
.u-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--u-fg-soft) 50%),
                    linear-gradient(135deg, var(--u-fg-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

/* スマホ（.u-grid-2 が1列になる幅）では、入力欄を下端へ寄せる必要がない。
   1列だと隣に並ぶ相手がいないため、margin-top:auto を残すと
   項目の高さが揃えられた分だけ余白として見えてしまう。
   ここで打ち消して、自然に詰まった縦並びに戻す。

   閾値520px: minmax(220px,1fr)+gap14 で2列になるのは
   フォーム内側が454px以上のとき（≒画面幅502px）。
   余裕を見て520pxで切り替える。 */
@media (max-width: 520px) {
  .u-field > .u-input,
  .u-field > .u-select,
  .u-field > .u-ac {
    margin-top: 0;
  }
}

.u-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 8px;
}
@media (max-width: 480px) {
  .u-form__actions { flex-direction: column; align-items: stretch; }
  .u-form__actions .u-btn { width: 100%; }
}

/* =====================================================================
 *  オートコンプリート（GPU / CPU 入力）
 * ===================================================================== */
.u-ac {
  position: relative;
  /* .u-field は flex column。この箱が入力欄の代わりに最下段に来る */
  margin-top: auto;
}

/* 1列表示では .u-field 側の margin-top:auto を打ち消しているので、
   こちらも合わせて余白を作らない（下のメディアクエリ参照） */

.u-ac__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--u-panel-2);
  border: 1px solid var(--u-line-str);
  border-radius: 12px;
  box-shadow: var(--u-shadow-pop);
  /* 8件を超えたらスクロール。画面を覆い尽くさない高さに抑える */
  max-height: 296px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.u-ac__list[hidden] { display: none; }

.u-ac__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* タップ領域を44px以上確保する */
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14.5px;
}
.u-ac__item.is-active,
.u-ac__item:hover {
  background: rgba(74, 222, 128, .14);
}
.u-ac__item.is-active .u-ac__name { color: var(--u-accent); }

.u-ac__name {
  font-family: var(--u-mono);
  font-weight: 700;
  /* 長い型番でも折り返して、はみ出さないようにする */
  overflow-wrap: anywhere;
}
.u-ac__brand {
  flex: none;
  font-size: 11px;
  color: var(--u-fg-dim);
}

/* =====================================================================
 *  判定情報（診断がどれくらいの情報にもとづくか）
 * ===================================================================== */
.u-conf {
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid var(--u-line);
  border-left: 4px solid var(--u-fg-dim);
  border-radius: var(--u-radius);
  background: var(--u-panel);
}
/* 段階が上がるほど色を進める（情報量の目盛りとして） */
.u-conf--lv1 { border-left-color: var(--u-fg-dim); }
.u-conf--lv2 { border-left-color: var(--u-warn); }
.u-conf--lv3 { border-left-color: var(--u-keep); }
.u-conf--lv4 { border-left-color: var(--u-accent); }

.u-conf__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.u-conf__label {
  font-family: var(--u-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--u-fg-dim);
}
.u-conf__dots { display: inline-flex; gap: 4px; }
.u-conf__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
}
.u-conf--lv2 .u-conf__dot.is-on { background: var(--u-warn); }
.u-conf--lv3 .u-conf__dot.is-on { background: var(--u-keep); }
.u-conf--lv4 .u-conf__dot.is-on { background: var(--u-accent); }
.u-conf--lv1 .u-conf__dot.is-on { background: var(--u-fg-soft); }

.u-conf__level { font-size: 14px; font-weight: 800; }
.u-conf__headline { font-size: 14.5px; font-weight: 700; margin-bottom: 4px; }
.u-conf__detail { font-size: 13.5px; color: var(--u-fg-soft); }

.u-conf__more {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--u-line);
}
.u-conf__more-title {
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.u-conf__list { display: grid; gap: 8px; }
.u-conf__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-left: 14px;
  position: relative;
  font-size: 13.5px;
}
.u-conf__list li::before {
  content: '';
  position: absolute;
  left: 2px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--u-accent);
}
.u-conf__item-name { font-weight: 700; }
.u-conf__item-benefit { color: var(--u-fg-soft); font-size: 13px; }
.u-conf__note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--u-fg-dim);
}
.u-conf__note a { color: var(--u-accent); }

/* =====================================================================
 *  診断結果
 * ===================================================================== */
.u-result { margin-top: 30px; }
.u-result[hidden] { display: none; }

/* 総合判定 */
.u-verdict {
  padding: 24px;
  border-radius: var(--u-radius-lg);
  border: 1px solid var(--u-line-str);
  background: var(--u-panel-2);
  margin-bottom: 24px;
}
.u-verdict__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}
.u-verdict h3 {
  font-size: clamp(19px, 4.4vw, 25px);
  line-height: 1.4;
  margin-bottom: 10px;
}
.u-verdict p { color: var(--u-fg-soft); font-size: 14.5px; }

/* 判定ごとの色分け。意味と色を対応させる */
.u-verdict--keep        { border-color: rgba(56, 189, 248, .5);  background: rgba(56, 189, 248, .07); }
.u-verdict--keep .u-verdict__tag { background: var(--u-keep); color: #04212E; }
.u-verdict--upgrade     { border-color: rgba(74, 222, 128, .5);  background: rgba(74, 222, 128, .07); }
.u-verdict--upgrade .u-verdict__tag { background: var(--u-accent); color: #06210F; }
.u-verdict--optional    { border-color: rgba(167, 139, 250, .5); background: rgba(167, 139, 250, .07); }
.u-verdict--optional .u-verdict__tag { background: var(--u-info); color: #17102E; }
.u-verdict--borderline  { border-color: rgba(251, 191, 36, .5);  background: rgba(251, 191, 36, .07); }
.u-verdict--borderline .u-verdict__tag { background: var(--u-warn); color: #2A1D00; }
.u-verdict--replace     { border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .07); }
.u-verdict--replace .u-verdict__tag { background: var(--u-danger); color: #2B0808; }
.u-verdict--insufficient{ border-color: var(--u-line-str); }
.u-verdict--insufficient .u-verdict__tag { background: var(--u-fg-dim); color: var(--u-bg); }

.u-verdict__cost {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  background: rgba(0, 0, 0, .28);
  border-radius: 10px;
}
.u-verdict__cost span { font-size: 12.5px; color: var(--u-fg-soft); }
.u-verdict__cost strong { font-family: var(--u-mono); font-size: 21px; color: var(--u-fg); }

/* パーツ別の判定カード */
.u-parts { display: grid; gap: 14px; }

.u-part {
  border: 1px solid var(--u-line);
  border-left-width: 4px;
  border-radius: var(--u-radius);
  background: var(--u-panel);
  padding: 18px 20px;
}
.u-part--upgrade { border-left-color: var(--u-accent); }
.u-part--keep    { border-left-color: var(--u-keep); }
.u-part--consider, .u-part--optional { border-left-color: var(--u-warn); }
.u-part--check   { border-left-color: var(--u-danger); }
.u-part--unknown { border-left-color: var(--u-fg-dim); }

.u-part__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.u-part__name { font-size: 15.5px; font-weight: 800; }
.u-part__status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
}
.u-part--upgrade .u-part__status { background: rgba(74, 222, 128, .18); color: var(--u-accent); }
.u-part--keep .u-part__status    { background: rgba(56, 189, 248, .18); color: var(--u-keep); }
.u-part--consider .u-part__status,
.u-part--optional .u-part__status { background: rgba(251, 191, 36, .18); color: var(--u-warn); }
.u-part--check .u-part__status   { background: rgba(248, 113, 113, .18); color: var(--u-danger); }
.u-part--unknown .u-part__status { background: rgba(255, 255, 255, .08); color: var(--u-fg-dim); }

.u-part__headline { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
.u-part__detail { font-size: 13.5px; color: var(--u-fg-soft); }

/* 交換の before → after */
.u-swap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0;
  padding: 14px;
  background: var(--u-bg-soft);
  border-radius: 10px;
}
.u-swap__box { flex: 1 1 120px; min-width: 0; }
.u-swap__label { display: block; font-size: 11px; color: var(--u-fg-dim); }
.u-swap__value {
  display: block;
  font-family: var(--u-mono);
  font-size: 15px;
  font-weight: 700;
  /* 長い型番でも折り返して、はみ出しを防ぐ */
  overflow-wrap: anywhere;
}
.u-swap__box--to .u-swap__value { color: var(--u-accent); }
.u-swap__arrow { color: var(--u-accent); font-size: 18px; flex: none; }
@media (max-width: 400px) {
  /* 極端に狭い画面では矢印を縦向きにして2段にする */
  .u-swap { flex-direction: column; align-items: stretch; gap: 6px; }
  .u-swap__arrow { transform: rotate(90deg); align-self: center; }
}

.u-part__price {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--u-fg-dim);
}
.u-part__price strong { font-family: var(--u-mono); color: var(--u-fg-soft); font-size: 14px; }

/* 未確認事項のまとめ */
.u-unknowns {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px dashed var(--u-line-str);
  border-radius: var(--u-radius);
  background: rgba(255, 255, 255, .02);
}
.u-unknowns h4 { font-size: 14px; margin-bottom: 8px; }
.u-unknowns p { font-size: 13px; color: var(--u-fg-soft); }
.u-unknowns ul { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.u-unknowns li {
  padding: 4px 10px;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--u-fg-soft);
}

/* 免責 */
.u-disclaimer {
  margin-top: 18px;
  font-size: 12px;
  color: var(--u-fg-dim);
  line-height: 1.7;
}

/* =====================================================================
 *  比較表（買い替え vs アップグレード）
 * ===================================================================== */
.u-table-wrap {
  /* 表は画面外へはみ出させず、この中だけで横スクロールさせる */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
}
.u-table {
  width: 100%;
  min-width: 460px;
  font-size: 14px;
}
.u-table th, .u-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--u-line);
}
.u-table thead th {
  background: var(--u-panel-2);
  font-size: 13px;
  white-space: nowrap;
}
.u-table tbody tr:last-child th,
.u-table tbody tr:last-child td { border-bottom: none; }
.u-table td.is-good { color: var(--u-accent); }
.u-table td.is-bad  { color: var(--u-fg-dim); }

/* =====================================================================
 *  FAQ（アコーディオン）
 * ===================================================================== */
.u-faq { display: grid; gap: 10px; }
.u-faq__item {
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  background: var(--u-panel);
  overflow: hidden;
}
.u-faq__item summary {
  padding: 16px 44px 16px 18px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  position: relative;
  list-style: none;
  /* タップ領域を確保 */
  min-height: 52px;
  display: flex;
  align-items: center;
}
.u-faq__item summary::-webkit-details-marker { display: none; }
.u-faq__item summary::after {
  content: '';
  position: absolute;
  right: 18px; top: 50%;
  width: 8px; height: 8px;
  border-right: 2px solid var(--u-accent);
  border-bottom: 2px solid var(--u-accent);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.u-faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.u-faq__body {
  padding: 0 18px 18px;
  font-size: 13.5px;
  color: var(--u-fg-soft);
}

/* =====================================================================
 *  CTA（相談導線）
 * ===================================================================== */
.u-cta {
  padding: 32px 28px;
  border-radius: var(--u-radius-lg);
  background: linear-gradient(135deg, rgba(74, 222, 128, .12), rgba(56, 189, 248, .08));
  border: 1px solid rgba(74, 222, 128, .3);
  text-align: center;
}
.u-cta h2 { font-size: clamp(19px, 4.4vw, 26px); margin-bottom: 10px; }
.u-cta p {
  color: var(--u-fg-soft);
  font-size: 14.5px;
  max-width: 620px;
  margin: 0 auto 20px;
}
.u-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
@media (max-width: 480px) {
  .u-cta { padding: 26px 18px; }
  .u-cta__actions { flex-direction: column; }
  .u-cta__actions .u-btn { width: 100%; }
}

/* =====================================================================
 *  関連サービス
 * ===================================================================== */
.u-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.u-related__card {
  display: block;
  padding: 18px;
  background: var(--u-panel);
  border: 1px solid var(--u-line);
  border-radius: var(--u-radius);
  transition: border-color .18s ease, transform .18s ease;
}
.u-related__card:hover { border-color: rgba(74, 222, 128, .4); transform: translateY(-2px); }
.u-related__en {
  display: block;
  font-family: var(--u-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--u-accent);
  margin-bottom: 5px;
}
.u-related__card strong { display: block; font-size: 15px; margin-bottom: 4px; }
.u-related__card span { font-size: 13px; color: var(--u-fg-soft); }

/* =====================================================================
 *  パンくず
 * ===================================================================== */
.u-breadcrumb {
  padding: 14px 0;
  font-size: 12.5px;
  color: var(--u-fg-dim);
  /* 長いパンくずでも折り返して横スクロールを出さない */
  overflow-wrap: anywhere;
}
.u-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.u-breadcrumb a { color: var(--u-fg-soft); }
.u-breadcrumb a:hover { color: var(--u-accent); }
.u-breadcrumb li + li::before { content: '/'; margin-right: 6px; color: var(--u-fg-dim); }

/* =====================================================================
 *  フッター
 * ===================================================================== */
.u-footer {
  border-top: 1px solid var(--u-line);
  background: var(--u-bg-soft);
  padding: 40px 0 28px;
  /* iPhone のホームバー分の余白を確保 */
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.u-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
  margin-bottom: 26px;
}
.u-footer__col h3 {
  font-size: 12px;
  font-family: var(--u-mono);
  letter-spacing: .1em;
  color: var(--u-accent);
  margin-bottom: 10px;
}
.u-footer__col li { margin-bottom: 7px; }
.u-footer__col a { font-size: 13.5px; color: var(--u-fg-soft); }
.u-footer__col a:hover { color: var(--u-fg); }
.u-footer__bottom {
  border-top: 1px solid var(--u-line);
  padding-top: 18px;
  font-size: 11.5px;
  color: var(--u-fg-dim);
  line-height: 1.75;
}

/* =====================================================================
 *  アフィリエイト共通UIの微調整
 *  （shared/affiliate/affiliate.css の上に載せる。色だけ本サイトに寄せる）
 * ===================================================================== */
.u-part .sippo-aff-buttons { margin-top: 12px; }

/* =====================================================================
 *  アニメーション（動きを減らす設定を尊重する）
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}