@charset "UTF-8";

/* ============================================================
   FX口座ナビ  —  design system
   ============================================================ */

:root {
  /* base */
  --navy:      #0a2440;
  --navy-2:    #10365c;
  --navy-3:    #1c4b78;
  --ink:       #16202b;
  --ink-2:     #465569;
  --ink-3:     #78859a;
  --ink-4:     #9aa5b5;
  --line:      #dfe6ee;
  --line-2:    #eaeff5;
  --line-3:    #f2f6fa;
  --bg:        #ffffff;
  --tint:      #f5f8fc;
  --tint-2:    #eef3f9;

  /* brand accents */
  --blue:      #1560d1;
  --blue-d:    #0e4699;
  --blue-l:    #e9f1fe;
  --blue-l2:   #d3e4fc;

  --green:     #0d8a6a;
  --green-d:   #096b52;
  --green-l:   #e4f5f0;

  --purple:    #6247ce;
  --purple-d:  #4a34a8;
  --purple-l:  #eeeafc;

  --amber:     #ef8b13;
  --amber-d:   #c96d05;
  --amber-l:   #fef2e2;

  --gold:      #b4881f;
  --gold-d:    #8a6415;
  --gold-l:    #fbf3df;
  --rose:      #cf4747;
  --rose-l:    #fdecec;

  /* type */
  --font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", -apple-system,
          BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", Meiryo, sans-serif;
  --font-num: "SF Pro Display", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* shape */
  --r-s: 0;
  --r: 0;
  --r-l: 0;
  --r-xl: 0;

  /* elevation */
  --sh-1: 0 1px 2px rgba(10, 36, 64, .06);
  --sh-2: 0 2px 8px rgba(10, 36, 64, .07), 0 1px 2px rgba(10, 36, 64, .05);
  --sh-3: 0 6px 24px rgba(10, 36, 64, .09), 0 2px 6px rgba(10, 36, 64, .05);
  --sh-4: 0 16px 48px rgba(10, 36, 64, .13), 0 4px 12px rgba(10, 36, 64, .06);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 74px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: var(--blue); text-underline-offset: 3px; }

.wrap { width: 100%; max-width: 1020px; margin: 0 auto; padding: 0 20px; }
.wrap-n { max-width: 800px; }

/* ============================================================
   header
   ============================================================ */

.hdr {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.hdr > .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 66px; gap: 18px;
}

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--navy);
  font-weight: 700; font-size: 17px; letter-spacing: .01em;
  white-space: nowrap;
}

.logo-mark {
  width: 32px; height: 32px; border-radius: 0; flex: none;
  background: linear-gradient(145deg, var(--navy-3), var(--navy));
  display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(10, 36, 64, .28);
}
.logo-mark svg { width: 18px; height: 18px; color: #fff; }
.logo small {
  display: block; font-size: 10.5px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .06em; line-height: 1.2; margin-top: 2px;
}

.gnav { display: flex; align-items: center; gap: 24px; font-size: 13.5px; }
.gnav a {
  color: var(--ink-2); text-decoration: none; font-weight: 600;
  white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.gnav a:hover { color: var(--blue); border-bottom-color: var(--blue); }

@media (max-width: 860px) { .gnav { display: none; } }

/* disclosure bar */
.pr-bar {
  background: var(--tint);
  border-bottom: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-3);
  padding: 8px 0; line-height: 1.65;
}
.pr-bar .wrap { display: flex; gap: 8px; align-items: flex-start; }
.pr-bar svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--ink-4); }

/* ============================================================
   hero
   ============================================================ */

.hero {
  position: relative;
  background:
    radial-gradient(1100px 420px at 82% -12%, rgba(21, 96, 209, .13), transparent 62%),
    radial-gradient(760px 340px at 4% 108%, rgba(98, 71, 206, .09), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #ffffff 100%);
  border-bottom: 1px solid var(--line-2);
  padding: 46px 0 44px;
  overflow: hidden;
}

.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10, 36, 64, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 36, 64, .028) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 72%);
}

.hero .wrap { position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--blue-d); background: var(--blue-l);
  border: 1px solid var(--blue-l2);
  padding: 6px 14px; border-radius: 0; margin: 0 0 20px;
}
.eyebrow svg { width: 13px; height: 13px; }

h1 {
  font-size: 35px; line-height: 1.44; font-weight: 800;
  letter-spacing: -.005em; color: var(--navy); margin: 0 0 20px;
}
h1 .hl {
  background: linear-gradient(transparent 62%, rgba(239, 139, 19, .28) 62%);
  padding: 0 2px;
}

.lead { font-size: 16.5px; color: var(--ink-2); margin: 0 0 26px; max-width: 44em; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin: 0 0 24px; max-width: 620px;
}
.hstat {
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; padding: 14px 16px;
  box-shadow: var(--sh-1);
}
.hstat dt {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  color: var(--ink-3); margin: 0 0 4px;
}
.hstat dd {
  margin: 0; font-family: var(--font-num);
  font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.2;
}
.hstat dd span { font-size: 12.5px; font-weight: 700; color: var(--ink-3); margin-left: 3px; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 12.5px; color: var(--ink-3);
  padding-top: 18px; border-top: 1px solid var(--line-2);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.hero-meta svg { width: 14px; height: 14px; color: var(--ink-4); }

@media (max-width: 720px) {
  h1 { font-size: 25px; }
  .hero { padding: 32px 0 32px; }
  .hero-stats { grid-template-columns: 1fr; gap: 10px; }
  .hstat { display: flex; align-items: baseline; justify-content: space-between; padding: 11px 14px; }
  .hstat dt { margin: 0; }
  .hstat dd { font-size: 20px; }
}

/* ============================================================
   sections
   ============================================================ */

section { padding: 60px 0; position: relative; }
section.tinted { background: var(--tint); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
section.tinted + section:not(.tinted) { border-top: none; }
section + section:not(.tinted) { border-top: 1px solid var(--line-3); }

.sec-head { margin: 0 0 34px; }
.sec-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--blue); margin: 0 0 12px;
}
.sec-label::before { content: ""; width: 20px; height: 2px; background: var(--blue); border-radius: 0; }

h2 {
  font-size: 27px; line-height: 1.48; font-weight: 800;
  color: var(--navy); margin: 0 0 12px; letter-spacing: -.003em;
}
.sec-sub { color: var(--ink-2); font-size: 15.5px; margin: 0; max-width: 48em; }

h3 { font-size: 20px; font-weight: 800; color: var(--navy); margin: 40px 0 12px; line-height: 1.55; }
h4 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 26px 0 8px; }
p  { margin: 0 0 17px; }

.body-copy > p, .body-copy > ul, .body-copy > ol { font-size: 15.5px; }
.body-copy ul, .body-copy ol { padding-left: 22px; margin: 0 0 18px; }
.body-copy li { margin-bottom: 8px; }

@media (max-width: 720px) {
  section { padding: 42px 0; }
  h2 { font-size: 21px; }
  h3 { font-size: 18px; margin-top: 30px; }
}

/* ============================================================
   toc
   ============================================================ */

.toc {
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; padding: 24px 26px;
  box-shadow: var(--sh-2);
}
.toc-t {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--navy); margin: 0 0 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line-2);
}
.toc-t svg { width: 16px; height: 16px; color: var(--blue); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: t; columns: 2; column-gap: 34px; }
.toc li { counter-increment: t; margin-bottom: 9px; break-inside: avoid; font-size: 14.5px; }
.toc a { color: var(--ink); text-decoration: none; display: flex; gap: 10px; align-items: baseline; }
.toc a::before {
  content: counter(t, decimal-leading-zero);
  font-family: var(--font-num); font-size: 11.5px; font-weight: 700;
  color: var(--blue); flex: none;
}
.toc a:hover { color: var(--blue); }
@media (max-width: 700px) { .toc ol { columns: 1; } }

/* ============================================================
   3-up recommendation cards
   ============================================================ */

.picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .picks { grid-template-columns: 1fr; } }

.pick {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
  box-shadow: var(--sh-2);
  transition: box-shadow .22s ease, transform .22s ease;
}
.pick:hover { box-shadow: var(--sh-4); transform: translateY(-3px); }
.pick::before { content: ""; display: block; height: 4px; }
.pick-a::before { background: linear-gradient(90deg, var(--blue), #4a8ee8); }
.pick-b::before { background: linear-gradient(90deg, var(--green), #35b394); }
.pick-c::before { background: linear-gradient(90deg, var(--purple), #8b74e8); }

.pick-ribbon {
  position: absolute; top: 18px; right: -1px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #fff; padding: 5px 12px 5px 14px;
  border-radius: 0;
}
.pick-a .pick-ribbon { background: var(--blue); }
.pick-b .pick-ribbon { background: var(--green); }
.pick-c .pick-ribbon { background: var(--purple); }

.pick-body { padding: 24px 22px 22px; display: flex; flex-direction: column; flex: 1; }

.pick-cat {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start; font-size: 11.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 0; margin: 0 0 16px;
}
.pick-cat svg { width: 14px; height: 14px; }
.pick-a .pick-cat { background: var(--blue-l); color: var(--blue-d); }
.pick-b .pick-cat { background: var(--green-l); color: var(--green-d); }
.pick-c .pick-cat { background: var(--purple-l); color: var(--purple-d); }

.pick h3 { margin: 0 0 3px; font-size: 21px; }
.pick .corp { font-size: 11.5px; color: var(--ink-3); margin: 0 0 16px; line-height: 1.5; }

.pick-figure {
  display: flex; align-items: baseline; gap: 8px;
  padding: 14px 16px; border-radius: 0;
  background: var(--tint); margin: 0 0 16px;
}
.pick-figure b {
  font-family: var(--font-num); font-size: 27px; font-weight: 800;
  color: var(--navy); line-height: 1;
}
.pick-figure em { font-style: normal; font-size: 12.5px; color: var(--ink-3); font-weight: 600; }

.pick p.txt { font-size: 14.5px; color: var(--ink-2); margin: 0 0 18px; }

.pick ul { list-style: none; margin: 0 0 20px; padding: 0; font-size: 14px; flex: 1; }
.pick ul li { position: relative; padding-left: 25px; margin-bottom: 9px; color: var(--ink-2); }
.pick ul li svg { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; }
.pick-a ul li svg { color: var(--blue); }
.pick-b ul li svg { color: var(--green); }
.pick-c ul li svg { color: var(--purple); }

/* ============================================================
   3D buttons
   ============================================================ */

.btn3d {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 22px 15px;
  font-family: var(--font); font-size: 15.5px; font-weight: 800;
  letter-spacing: .01em; color: #fff; text-decoration: none;
  border: none; cursor: pointer; border-radius: 0;
  background: linear-gradient(180deg, #f79b2a 0%, var(--amber) 52%, #e07f07 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    0 4px 0 0 #a95a04,
    0 8px 20px rgba(201, 109, 5, .32);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  position: relative;
}
.btn3d:hover { filter: brightness(1.045); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 5px 0 0 #a95a04, 0 12px 26px rgba(201,109,5,.38); }
.btn3d:active { transform: translateY(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 0 #a95a04, 0 3px 8px rgba(201,109,5,.28); }
.btn3d svg { width: 17px; height: 17px; flex: none; }

.btn3d-sm { padding: 11px 16px; font-size: 13.5px; border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 3px 0 0 #a95a04, 0 6px 14px rgba(201,109,5,.28); }
.btn3d-sm:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 4px 0 0 #a95a04, 0 9px 18px rgba(201,109,5,.34); }
.btn3d-sm:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 0 #a95a04, 0 2px 6px rgba(201,109,5,.26); }

.btn-navy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 0;
  font-size: 14.5px; font-weight: 700; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, var(--navy-3), var(--navy-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 3px 0 0 #071b31, 0 8px 18px rgba(10,36,64,.22);
  transition: transform .12s, box-shadow .12s;
}
.btn-navy:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 0 0 #071b31, 0 12px 22px rgba(10,36,64,.26); }
.btn-navy:active { transform: translateY(3px); box-shadow: 0 0 0 0 #071b31, 0 2px 6px rgba(10,36,64,.2); }
.btn-navy svg { width: 15px; height: 15px; }

.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 0; background: #fff;
  border: 1.5px solid var(--line); color: var(--navy);
  font-size: 14px; font-weight: 700; text-decoration: none;
  box-shadow: var(--sh-1); transition: border-color .15s, color .15s, box-shadow .15s;
}
.btn-line:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--sh-2); }
.btn-line svg { width: 15px; height: 15px; }

.btn-note {
  font-size: 11.5px; color: var(--ink-3);
  text-align: center; margin: 10px 0 0; line-height: 1.55;
}
.btn-note svg { width: 12px; height: 12px; vertical-align: -2px; margin-right: 3px; }

/* ============================================================
   comparison table
   ============================================================ */

.cmp-wrap {
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; box-shadow: var(--sh-3); overflow: hidden;
}
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.cmp { width: 100%; min-width: 800px; border-collapse: separate; border-spacing: 0; font-size: 14px; }

table.cmp thead th {
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color: #fff; padding: 0; vertical-align: bottom;
  border-bottom: 3px solid var(--amber);
  position: sticky; top: 0;
}
table.cmp thead th:first-child { width: 168px; }

.th-inner { padding: 16px 14px 15px; text-align: center; }
.th-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: rgba(255, 255, 255, .62); margin: 0 0 8px;
}
.th-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 0; margin: 0 0 8px; color: #fff;
}
.b-blue { background: var(--blue); }
.b-green { background: var(--green); }
.b-purple { background: #7a63dd; }

.th-name { font-size: 16.5px; font-weight: 800; letter-spacing: .01em; display: block; }
.th-corp { font-size: 10.5px; font-weight: 500; color: rgba(255,255,255,.6); display: block; margin-top: 3px; line-height: 1.45; }

table.cmp tbody th {
  text-align: left; font-weight: 700; color: var(--navy);
  background: var(--tint); padding: 15px 14px;
  border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  white-space: nowrap; vertical-align: middle; font-size: 13.5px;
}
table.cmp tbody th svg { width: 15px; height: 15px; color: var(--ink-3); vertical-align: -3px; margin-right: 7px; }

table.cmp tbody td {
  padding: 15px 14px; border-bottom: 1px solid var(--line-2);
  border-right: 1px solid var(--line-3);
  color: var(--ink-2); vertical-align: middle; text-align: center;
}
table.cmp tbody td:last-child { border-right: none; }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: none; }
table.cmp tbody tr:hover td { background: #fcfdff; }

.td-main { font-size: 16px; font-weight: 800; color: var(--navy); display: block; line-height: 1.35; }
.td-main .u { font-size: 12px; font-weight: 700; color: var(--ink-3); margin-left: 2px; }
.td-sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.5; font-weight: 500; }

.best {
  background: linear-gradient(180deg, #fffdf7, #fff9ee) !important;
  position: relative;
}
.best::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--amber);
}
.crown {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 800; color: var(--amber-d);
  background: var(--amber-l); border: 1px solid #f6ddb9;
  padding: 2px 7px; border-radius: 0; margin-bottom: 5px;
}
.crown svg { width: 11px; height: 11px; }

/* rating marks */
.mk { font-family: var(--font-num); font-size: 21px; font-weight: 700; line-height: 1; display: block; }
.mk-a { color: var(--amber-d); }
.mk-b { color: var(--blue); }
.mk-c { color: var(--ink-4); }

/* mini bar */
.bar { height: 6px; border-radius: 0; background: var(--line-2); margin: 8px auto 0; max-width: 120px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 0; }
.bar-blue i { background: linear-gradient(90deg, #4a8ee8, var(--blue)); }
.bar-green i { background: linear-gradient(90deg, #35b394, var(--green)); }
.bar-purple i { background: linear-gradient(90deg, #8b74e8, var(--purple)); }

.yes, .no {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 0;
}
.yes { background: var(--green-l); color: var(--green-d); }
.no  { background: var(--tint-2); color: var(--ink-3); }
.yes svg, .no svg { width: 12px; height: 12px; }

.cta-cell { padding: 18px 14px !important; }

.cmp-foot {
  padding: 16px 20px; background: var(--tint);
  border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-3); line-height: 1.75;
}
.scroll-hint {
  display: none; font-size: 11.5px; color: var(--ink-3);
  text-align: center; padding: 9px; background: var(--tint-2);
  border-bottom: 1px solid var(--line-2);
}
@media (max-width: 860px) { .scroll-hint { display: block; } }

/* ============================================================
   detail review
   ============================================================ */

.rev {
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
  box-shadow: var(--sh-2); margin-bottom: 30px;
}
.rev-top { display: block; height: 5px; }
.rev-a .rev-top { background: linear-gradient(90deg, var(--blue), #6ba4ee); }
.rev-b .rev-top { background: linear-gradient(90deg, var(--green), #3dbd9d); }
.rev-c .rev-top { background: linear-gradient(90deg, var(--purple), #9581ec); }

.rev-head {
  padding: 24px 28px 22px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(180deg, #fcfdff, #fff);
}
.rev-no {
  width: 46px; height: 46px; border-radius: 0; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-num); font-size: 19px; font-weight: 800;
}
.rev-a .rev-no { background: linear-gradient(145deg, #4a8ee8, var(--blue)); box-shadow: 0 3px 10px rgba(21,96,209,.3); }
.rev-b .rev-no { background: linear-gradient(145deg, #35b394, var(--green)); box-shadow: 0 3px 10px rgba(13,138,106,.3); }
.rev-c .rev-no { background: linear-gradient(145deg, #8b74e8, var(--purple)); box-shadow: 0 3px 10px rgba(98,71,206,.3); }

.rev-title { flex: 1; min-width: 220px; }
.rev-title h3 { margin: 0 0 4px; font-size: 22px; }
.rev-title .corp { font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.6; }
.rev-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; padding: 6px 13px; border-radius: 0;
}
.rev-a .rev-badge { background: var(--blue-l); color: var(--blue-d); }
.rev-b .rev-badge { background: var(--green-l); color: var(--green-d); }
.rev-c .rev-badge { background: var(--purple-l); color: var(--purple-d); }
.rev-badge svg { width: 13px; height: 13px; }

.rev-body { padding: 26px 28px 28px; }
.rev-body > p { font-size: 15.5px; }

.specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: 0;
  overflow: hidden; margin: 0 0 24px;
}
.specs > div { background: #fff; padding: 15px 16px; }
.specs dt { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; margin: 0 0 5px; }
.specs dd { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--navy); line-height: 1.35; }
.specs dd small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); display: block; margin-top: 2px; }

@media (max-width: 780px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .rev-head, .rev-body { padding-left: 18px; padding-right: 18px; }
  .specs { grid-template-columns: 1fr; }
}

.pcs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 24px; }
@media (max-width: 640px) { .pcs { grid-template-columns: 1fr; } }

.pc { border-radius: 0; padding: 18px 20px; border: 1px solid; }
.pc h5 {
  margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
}
.pc h5 svg { width: 16px; height: 16px; }
.pc ul { margin: 0; padding-left: 19px; font-size: 14px; }
.pc li { margin-bottom: 7px; }
.pc li:last-child { margin-bottom: 0; }

.pc-good { background: var(--green-l); border-color: #c7e9de; }
.pc-good h5 { color: var(--green-d); }
.pc-good ul { color: #1b6b57; }

.pc-bad { background: var(--rose-l); border-color: #f6d5d5; }
.pc-bad h5 { color: #a83a3a; }
.pc-bad ul { color: #8f3838; }

.fit {
  display: flex; gap: 14px; align-items: flex-start;
  background: linear-gradient(135deg, var(--tint), #fff);
  border: 1px solid var(--line); border-left: 4px solid var(--amber);
  border-radius: 0;
  padding: 16px 20px; margin: 0 0 24px;
}
.fit svg { width: 20px; height: 20px; color: var(--amber-d); flex: none; margin-top: 3px; }
.fit p { margin: 0; font-size: 15px; font-weight: 700; color: var(--navy); }
.fit p span { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-top: 4px; }

.rev-cta { display: flex; gap: 14px; align-items: center; }
.rev-cta .btn3d { flex: 1.4; }
.rev-cta .btn-line { flex: 1; }
@media (max-width: 620px) { .rev-cta { flex-direction: column; } .rev-cta .btn-line { width: 100%; } }

/* ============================================================
   generic table (secondary)
   ============================================================ */

.tbl-wrap { border: 1px solid var(--line); border-radius: 0; box-shadow: var(--sh-2); overflow: hidden; background: #fff; }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 14px; }
table.tbl thead th {
  background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 13px 15px; text-align: left; white-space: nowrap; letter-spacing: .03em;
}
table.tbl tbody th {
  text-align: left; font-weight: 700; color: var(--navy); font-size: 13.5px;
  padding: 14px 15px; border-bottom: 1px solid var(--line-2); background: var(--tint); vertical-align: top;
}
table.tbl tbody td { padding: 14px 15px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: top; }
table.tbl tbody tr:last-child th, table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl .sub { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 500; margin-top: 3px; }
.tbl-note { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; line-height: 1.75; }

/* ============================================================
   steps / checklist / faq
   ============================================================ */

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps > li {
  counter-increment: s; position: relative;
  padding: 0 0 30px 60px; border-left: 2px solid var(--line-2); margin-left: 18px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(s); position: absolute; left: -19px; top: -3px;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(145deg, var(--navy-3), var(--navy));
  color: #fff; font-family: var(--font-num); font-size: 15px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 3px 8px rgba(10, 36, 64, .26);
}
.steps h4 { margin: 4px 0 6px; font-size: 17px; }
.steps p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.steps .tip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--blue-d);
  background: var(--blue-l); padding: 6px 12px; border-radius: 0;
}
.steps .tip svg { width: 13px; height: 13px; }

.checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .checks { grid-template-columns: 1fr; } }
.check {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 20px 22px; box-shadow: var(--sh-1);
  transition: box-shadow .2s, transform .2s;
}
.check:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }
.check-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 0; margin-bottom: 12px;
  background: var(--blue-l); color: var(--blue-d);
  font-family: var(--font-num); font-size: 14px; font-weight: 800;
}
.check h4 { margin: 0 0 8px; font-size: 16.5px; }
.check p { font-size: 14px; color: var(--ink-2); margin: 0; }

.faq details {
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; margin-bottom: 12px; overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.faq details[open] { border-color: var(--blue-l2); box-shadow: var(--sh-2); }
.faq summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 17px 54px 17px 52px; font-weight: 700; font-size: 15.5px; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q"; position: absolute; left: 18px; top: 16px;
  width: 24px; height: 24px; border-radius: 0;
  background: var(--navy); color: #fff;
  font-family: var(--font-num); font-size: 12.5px; font-weight: 800;
  display: grid; place-items: center;
}
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; border-right: 2.2px solid var(--ink-3); border-bottom: 2.2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s;
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); border-color: var(--blue); }
.faq .ans {
  padding: 0 24px 20px 52px; font-size: 14.5px; color: var(--ink-2);
  position: relative;
}
.faq .ans::before {
  content: "A"; position: absolute; left: 18px; top: 1px;
  width: 24px; height: 24px; border-radius: 0;
  background: var(--amber-l); color: var(--amber-d);
  font-family: var(--font-num); font-size: 12.5px; font-weight: 800;
  display: grid; place-items: center;
}
.faq .ans p:last-child { margin-bottom: 0; }

/* ============================================================
   band CTA
   ============================================================ */

.band {
  background:
    radial-gradient(600px 240px at 88% 8%, rgba(239, 139, 19, .22), transparent 60%),
    linear-gradient(150deg, var(--navy-2), var(--navy) 62%);
  color: #fff; border-radius: 0; padding: 38px 40px;
  box-shadow: var(--sh-4); position: relative; overflow: hidden;
}
.band h2 { color: #fff; margin: 0 0 10px; font-size: 24px; }
.band p { color: rgba(255, 255, 255, .82); font-size: 15px; margin: 0 0 26px; max-width: 40em; }
.band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) { .band { padding: 28px 22px; } .band-grid { grid-template-columns: 1fr; } }
.band-item {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0; padding: 18px 18px 20px; backdrop-filter: blur(4px);
}
.band-item .nm { font-size: 15.5px; font-weight: 800; margin: 0 0 3px; }
.band-item .ct { font-size: 11.5px; color: rgba(255,255,255,.66); margin: 0 0 14px; }

/* ============================================================
   risk / footer
   ============================================================ */

.risk {
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 0;
  padding: 28px 30px; font-size: 13.5px; color: var(--ink-2); line-height: 1.9;
  box-shadow: var(--sh-1);
}
.risk h3 { margin: 0 0 14px; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.risk h3 svg { width: 19px; height: 19px; color: var(--gold); }
.risk ul { margin: 0 0 16px; padding-left: 21px; }
.risk li { margin-bottom: 7px; }
.risk p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .risk { padding: 22px 18px; } }

.ftr {
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color: rgba(255, 255, 255, .7); padding: 48px 0 32px; font-size: 13px; line-height: 1.85;
  margin-top: 0;
}
.ftr .logo { color: #fff; margin-bottom: 14px; }
.ftr .logo small { color: rgba(255,255,255,.55); }
.ftr-cols {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 32px;
  padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 760px) { .ftr-cols { grid-template-columns: 1fr; gap: 24px; } }
.ftr-cols h5 { color: #fff; font-size: 12.5px; letter-spacing: .07em; margin: 0 0 12px; font-weight: 700; }
.ftr-cols ul { list-style: none; margin: 0; padding: 0; }
.ftr-cols li { margin-bottom: 7px; }
.ftr-cols a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.ftr-cols a:hover { color: #fff; text-decoration: underline; }
.copy { padding-top: 22px; font-size: 12px; color: rgba(255, 255, 255, .48); }

/* utilities */
.mt0 { margin-top: 0; }
.center { text-align: center; }

/* ============================================================
   ▼▼ 2026-08-03 追加：図版・写真・手書き感のある装飾 ▼▼
   ============================================================ */

/* ------------------------------------------------------------
   hero：2カラム化（テキスト＋キービジュアル）
   ------------------------------------------------------------ */

.hero-grid {
  display: grid; grid-template-columns: 1.32fr 1fr;
  gap: 38px; align-items: start;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 26px; } }

.hero-visual { position: relative; padding-top: 6px; }
.hero-visual .shot {
  border-radius: 0; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(10, 36, 64, .16), 0 3px 10px rgba(10, 36, 64, .07);
  transform: rotate(-1.1deg);
  background: #fff;
}
.hero-visual .shot img { display: block; width: 100%; height: auto; }

/* 写真の上に重ねる小さなデータチップ（手作り感） */
.hero-chip {
  position: absolute; left: -14px; bottom: -18px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; padding: 11px 15px;
  box-shadow: var(--sh-3); transform: rotate(1.4deg);
  display: flex; align-items: center; gap: 11px;
}
.hero-chip .ico {
  width: 32px; height: 32px; border-radius: 0; flex: none;
  display: grid; place-items: center;
  background: var(--amber-l); color: var(--amber-d);
}
.hero-chip .ico svg { width: 17px; height: 17px; }
.hero-chip b { display: block; font-size: 13px; color: var(--navy); line-height: 1.35; }
.hero-chip span { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 600; }
@media (max-width: 900px) { .hero-chip { left: auto; right: 8px; bottom: -14px; } }
@media (max-width: 560px) { .hero-visual .shot { transform: none; } .hero-chip { display: none; } }

/* ------------------------------------------------------------
   写真＋キャプション
   ------------------------------------------------------------ */

figure.fig { margin: 0 0 26px; }
figure.fig img { display: block; width: 100%; height: auto; border-radius: 0; }
figure.fig .fw {
  border-radius: 0; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--sh-2); background: #fff;
}
figure.fig figcaption {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
  margin-top: 9px; padding-left: 13px; position: relative;
}
figure.fig figcaption::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4);
}

/* セクション頭に敷くワイド写真（帯） */
.sec-photo {
  position: relative; border-radius: 0; overflow: hidden;
  margin: 0 0 30px; box-shadow: var(--sh-3); background: var(--navy);
}
.sec-photo img { display: block; width: 100%; height: 190px; object-fit: cover; opacity: .58; }
.sec-photo .ov {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 34px; color: #fff;
  background: linear-gradient(90deg, rgba(10,36,64,.86) 12%, rgba(10,36,64,.42) 72%, rgba(10,36,64,.2));
}
.sec-photo .ov b { font-size: 20px; font-weight: 800; line-height: 1.5; letter-spacing: .01em; }
.sec-photo .ov span { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 6px; max-width: 30em; }
@media (max-width: 620px) {
  .sec-photo img { height: 150px; }
  .sec-photo .ov { padding: 0 20px; }
  .sec-photo .ov b { font-size: 16px; }
  .sec-photo .ov span { font-size: 12px; }
}

/* 本文中の回り込み写真 */
.fig-side {
  float: right; width: 268px; margin: 4px 0 18px 26px;
}
.fig-side img { display: block; width: 100%; height: auto; border-radius: 0; border: 1px solid var(--line); }
.fig-side figcaption { font-size: 11px; color: var(--ink-3); margin-top: 7px; line-height: 1.65; }
@media (max-width: 680px) { .fig-side { float: none; width: 100%; margin: 0 0 20px; } }

/* ------------------------------------------------------------
   マーカー線・強調
   ------------------------------------------------------------ */

.mark {
  background: linear-gradient(transparent 56%, rgba(255, 214, 74, .68) 56%, rgba(255, 214, 74, .68) 94%, transparent 94%);
  font-weight: 700; padding: 0 1px;
}
.mark-b {
  background: linear-gradient(transparent 56%, rgba(140, 194, 255, .62) 56%, rgba(140, 194, 255, .62) 94%, transparent 94%);
  font-weight: 700; padding: 0 1px;
}
.mark-r {
  background: linear-gradient(transparent 56%, rgba(255, 168, 168, .6) 56%, rgba(255, 168, 168, .6) 94%, transparent 94%);
  font-weight: 700; padding: 0 1px;
}
.em-red { color: #c33a3a; font-weight: 800; }
.em-navy { color: var(--navy); font-weight: 800; }

/* ------------------------------------------------------------
   吹き出し会話
   ------------------------------------------------------------ */

.talk { display: flex; align-items: flex-start; gap: 15px; margin: 0 0 16px; }
.talk.r { flex-direction: row-reverse; }
.talk-av { width: 62px; flex: none; text-align: center; }
.talk-av svg {
  width: 58px; height: 58px; display: block; margin: 0 auto;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(10, 36, 64, .16);
}
.talk-av b {
  display: block; font-size: 10px; font-weight: 700; color: var(--ink-3);
  margin-top: 5px; letter-spacing: .02em; line-height: 1.3;
}
.talk-bubble {
  position: relative; flex: 1;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 0; padding: 15px 19px;
  font-size: 14.5px; line-height: 1.85; color: var(--ink);
  box-shadow: var(--sh-1);
}
.talk-bubble p { margin: 0; }
.talk-bubble p + p { margin-top: 10px; }
.talk-bubble::before, .talk-bubble::after {
  content: ""; position: absolute; top: 20px;
  width: 0; height: 0; border: 9px solid transparent;
}
.talk:not(.r) .talk-bubble::before { left: -19px; border-right-color: var(--line); }
.talk:not(.r) .talk-bubble::after  { left: -16px; border-right-color: #fff; }
.talk.r .talk-bubble::before { right: -19px; border-left-color: var(--line); }
.talk.r .talk-bubble::after  { right: -16px; border-left-color: #fff; }

.talk.r .talk-bubble { background: var(--blue-l); border-color: var(--blue-l2); }
.talk.r .talk-bubble::before { border-left-color: var(--blue-l2); }
.talk.r .talk-bubble::after  { border-left-color: var(--blue-l); }

.talk-set { margin: 0 0 28px; }
@media (max-width: 560px) {
  .talk { gap: 10px; }
  .talk-av { width: 48px; }
  .talk-av svg { width: 46px; height: 46px; }
  .talk-bubble { padding: 13px 15px; font-size: 14px; }
}

/* ------------------------------------------------------------
   囲みボックス（用語解説・ポイント・注意）
   ------------------------------------------------------------ */

.box { border-radius: 0; padding: 20px 22px 18px; margin: 0 0 26px; position: relative; }
.box > .box-t {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .04em;
  padding: 5px 13px; border-radius: 0; margin: 0 0 12px;
}
.box > .box-t svg { width: 14px; height: 14px; }
.box p { font-size: 14.5px; margin: 0 0 12px; }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
.box ul { margin: 0 0 12px; padding-left: 20px; font-size: 14.5px; }
.box li { margin-bottom: 6px; }

.box-term { background: #fff; border: 2px dashed #cfdcea; }
.box-term > .box-t { background: var(--navy); color: #fff; }
.box-term dt { font-weight: 800; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.box-term dd { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-2); }
.box-term dd:last-child { margin-bottom: 0; }

.box-point { background: var(--blue-l); border: 1px solid var(--blue-l2); }
.box-point > .box-t { background: var(--blue); color: #fff; }
.box-point p, .box-point ul { color: #17456f; }

.box-warn { background: var(--rose-l); border: 1px solid #f6d5d5; }
.box-warn > .box-t { background: #c04a4a; color: #fff; }
.box-warn p, .box-warn ul { color: #8c3434; }

.box-memo {
  background: linear-gradient(180deg, #fffdf6, #fffaee);
  border: 1px solid #f2e0bd;
}
.box-memo > .box-t { background: var(--amber); color: #fff; }
.box-memo p, .box-memo ul { color: #6d5320; }

/* ------------------------------------------------------------
   図解（インラインSVG）ラッパー
   ------------------------------------------------------------ */

.dgm {
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; box-shadow: var(--sh-2);
  padding: 22px 24px 18px; margin: 0 0 28px;
}
.dgm-t {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 800; color: var(--navy);
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}
.dgm-t .n {
  display: inline-grid; place-items: center; flex: none;
  min-width: 44px; height: 21px; padding: 0 8px; border-radius: 0;
  background: var(--navy); color: #fff;
  font-family: var(--font-num); font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
}
.dgm-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dgm-body > svg { display: block; width: 100%; height: auto; min-width: 460px; }
.dgm-note {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.75;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line);
}
@media (max-width: 560px) { .dgm { padding: 18px 15px 14px; } }

/* ------------------------------------------------------------
   比較表の追補：交互行・社名ブロック・凡例
   ------------------------------------------------------------ */

table.cmp tbody tr:nth-child(even) td { background: #fbfcfe; }
table.cmp tbody tr:nth-child(even) td.best { background: linear-gradient(180deg, #fffdf7, #fff9ee) !important; }
table.cmp tbody tr:hover td { background: #f4f8ff; }
table.cmp tbody tr:hover td.best { background: linear-gradient(180deg, #fffbef, #fff6e4) !important; }

/* 表ヘッダー内の社名ロゴ風ブロック */
.th-logo {
  display: block; margin: 0 auto 9px; width: 132px;
  background: #fff; border-radius: 0; padding: 8px 6px 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.th-logo .lg-nm {
  display: block; font-family: var(--font-num);
  font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
}
.th-logo .lg-sub {
  display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--ink-4); margin-top: 3px;
}
.lg-a .lg-nm { color: var(--blue-d); }
.lg-b .lg-nm { color: var(--green-d); }
.lg-c .lg-nm { color: var(--purple-d); }

/* 表の凡例 */
.cmp-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center;
  padding: 12px 20px; background: #fff;
  border-bottom: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-3);
}
.cmp-legend i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; }
.cmp-legend .sw { width: 22px; height: 13px; border-radius: 0; flex: none; }
.cmp-legend .sw-best { background: linear-gradient(180deg, #fffdf7, #fff9ee); border: 1px solid #f0dcb8; box-shadow: inset 3px 0 0 var(--amber); }
.cmp-legend .sw-bar { background: linear-gradient(90deg, #4a8ee8, var(--blue)); height: 6px; border-radius: 0; }

/* ------------------------------------------------------------
   おすすめカードのサムネイル
   ------------------------------------------------------------ */

.pick-thumb { position: relative; display: block; line-height: 0; background: var(--navy); }
.pick-thumb img { width: 100%; height: 118px; object-fit: cover; opacity: .82; display: block; }
.pick-thumb .tag {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff;
  background: rgba(10, 36, 64, .72); backdrop-filter: blur(3px);
  padding: 4px 11px; border-radius: 0; line-height: 1.6;
}
.pick-rank {
  position: absolute; left: 12px; top: 12px;
  width: 40px; height: 40px; border-radius: 0;
  display: grid; place-items: center; text-align: center;
  color: #fff; font-family: var(--font-num); font-weight: 800; line-height: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
.pick-rank b { font-size: 16px; display: block; }
.pick-rank span { font-size: 7.5px; letter-spacing: .1em; display: block; margin-top: 1px; opacity: .85; }
.pick-a .pick-rank { background: linear-gradient(145deg, #4a8ee8, var(--blue)); }
.pick-b .pick-rank { background: linear-gradient(145deg, #35b394, var(--green)); }
.pick-c .pick-rank { background: linear-gradient(145deg, #8b74e8, var(--purple)); }

/* 星評価 */
.stars { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.stars .sv { display: inline-flex; gap: 1.5px; }
.stars svg { width: 15px; height: 15px; color: #e8b53a; }
.stars svg.off { color: #dde4ec; }
.stars b { font-family: var(--font-num); font-size: 15px; font-weight: 800; color: var(--navy); }
.stars span { font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* ------------------------------------------------------------
   本文見出しの2色下線（記事っぽさ）
   ------------------------------------------------------------ */

.body-copy h3 {
  position: relative; padding: 0 0 11px;
  border-bottom: 3px solid var(--line-2);
}
.body-copy h3::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 86px; height: 3px; background: var(--amber); border-radius: 0;
}

/* ------------------------------------------------------------
   編集部プロフィール／調査方法
   ------------------------------------------------------------ */

.author {
  display: grid; grid-template-columns: 172px 1fr; gap: 26px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; padding: 26px 28px;
  box-shadow: var(--sh-2);
}
@media (max-width: 700px) { .author { grid-template-columns: 1fr; gap: 18px; } }
.author-pic { border-radius: 0; overflow: hidden; border: 1px solid var(--line-2); }
.author-pic img { display: block; width: 100%; height: auto; }
.author h3 { margin: 0 0 4px; font-size: 18px; }
.author .role { font-size: 11.5px; color: var(--ink-3); font-weight: 700; letter-spacing: .04em; margin: 0 0 12px; }
.author p { font-size: 14px; color: var(--ink-2); margin: 0 0 14px; }
.author ul { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.author li { position: relative; padding-left: 22px; margin-bottom: 7px; color: var(--ink-2); }
.author li svg { position: absolute; left: 0; top: 5px; width: 15px; height: 15px; color: var(--blue); }

/* 出典・参考リンク */
.refs { margin: 26px 0 0; }
.refs h4 {
  font-size: 13px; letter-spacing: .05em; color: var(--ink-2);
  margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 8px;
}
.refs h4 svg { width: 15px; height: 15px; color: var(--ink-3); }
.refs ul { margin: 0; padding: 0; list-style: none; }
.refs li { font-size: 13px; margin-bottom: 8px; line-height: 1.7; padding-left: 18px; position: relative; }
.refs li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4);
}
.refs a { color: var(--blue-d); }
.refs .src { color: var(--ink-3); font-size: 12px; }

/* 更新履歴 */
.updates { margin: 24px 0 0; font-size: 13px; }
.updates h4 { font-size: 13px; margin: 0 0 10px; color: var(--ink-2); letter-spacing: .05em; }
.updates ol { margin: 0; padding: 0; list-style: none; }
.updates li {
  display: flex; gap: 14px; padding: 8px 0;
  border-bottom: 1px dashed var(--line-2); color: var(--ink-2);
}
.updates li:last-child { border-bottom: none; }
.updates time {
  flex: none; width: 96px; font-family: var(--font-num);
  font-size: 12px; font-weight: 700; color: var(--ink-3);
}

/* ------------------------------------------------------------
   小物
   ------------------------------------------------------------ */

.lead-in {
  font-size: 15.5px; color: var(--ink-2); line-height: 1.95;
  margin: 0 0 26px;
}
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.pill {
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  padding: 5px 12px; border-radius: 0;
}
.pill::before { content: "#"; color: var(--ink-4); margin-right: 3px; }

.checks .check { position: relative; overflow: hidden; }
.checks .check::after {
  content: ""; position: absolute; right: -18px; bottom: -18px;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--line-3);
}
.check-n, .check h4, .check p { position: relative; z-index: 1; }

/* リボンをサムネイルの上に重ねる */
.pick-ribbon { z-index: 3; top: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.22); }
.pick-thumb { position: relative; z-index: 1; }
.hero-meta { margin-top: 26px; }

/* バンドCTAの背景写真 */
.band::before {
  content: ""; position: absolute; inset: 0;
  background: url(img/band-chart.jpg) center/cover no-repeat;
  opacity: .16; mix-blend-mode: luminosity; pointer-events: none;
}
.band > * { position: relative; z-index: 1; }

/* 補助表：数値列を折り返さない */
table.tbl tbody td:nth-child(2), table.tbl tbody td:nth-child(3) { white-space: nowrap; }
table.tbl tbody th { white-space: nowrap; }
table.tbl tbody th .sub { white-space: normal; }

/* 編集部プロフィールの画像を上寄せ */
.author-pic { align-self: start; }

/* 補助表：交互行とホバー */
table.tbl tbody tr:nth-child(even) td { background: #fafcfe; }
table.tbl tbody tr:nth-child(even) th { background: #eef3f9; }
table.tbl tbody tr:hover td { background: #f4f8ff; }
table.tbl tbody tr:hover th { background: #e8f0f9; }

/* ============================================================
   4社構成への拡張（外為ファイネスト＝ゴールド系）
   ============================================================ */

/* --- カードを4枚並べる --- */
.picks { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1180px) { .picks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .picks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .picks { grid-template-columns: 1fr; } }
.pick-body { padding: 20px 18px 20px; }
.pick-body h3 { font-size: 19px; }

/* --- 4社目（外為ファイネスト）のアクセント --- */
.pick-d::before   { background: linear-gradient(90deg, var(--gold), #e0b043); }
.pick-d .pick-ribbon { background: linear-gradient(90deg, #a8791a, var(--gold)); }
.pick-d .pick-cat { background: var(--gold-l); color: var(--gold-d); }
.pick-d ul li svg { color: var(--gold); }
.pick-d .pick-rank { background: linear-gradient(145deg, #d3a338, var(--gold)); }
.rev-d .rev-top   { background: linear-gradient(90deg, var(--gold), #e6bb56); }
.rev-d .rev-no    { background: linear-gradient(145deg, #d3a338, var(--gold)); box-shadow: 0 3px 10px rgba(180,136,31,.32); }
.rev-d .rev-badge { background: var(--gold-l); color: var(--gold-d); }
.th-badge.b-gold  { background: rgba(255,255,255,.2); color: #fff; }
.bar-gold i       { background: linear-gradient(90deg, #d3a338, var(--gold)); }
.lg-d .lg-nm      { color: var(--gold-d); }

/* --- イチオシ枠（一番手のカードだけ強調） --- */
.pick.is-top {
  box-shadow: 0 0 0 3px var(--gold), var(--sh-4);
  z-index: 2;
}
.pick.is-top .pick-body { background: linear-gradient(180deg, #fffdf6, #fff 120px); }
.top-flag {
  display: block; background: linear-gradient(180deg, #14406e, var(--navy));
  color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  text-align: center; padding: 8px 6px; line-height: 1.4;
}
.top-flag b { color: #ffd479; font-weight: 900; }

/* --- 比較表を4列に --- */
table.cmp { min-width: 1000px; font-size: 13.5px; }
table.cmp thead th:first-child { width: 150px; }
table.cmp thead th { padding: 14px 10px; }
table.cmp tbody td { padding: 15px 10px; }
table.cmp tbody th { padding: 15px 12px; font-size: 13px; }
.th-logo .lg-nm { font-size: 16px; }
.th-corp { font-size: 10.5px; }
.td-main { font-size: 17px; }

/* イチオシ列を縦にハイライト */
table.cmp thead th.col-top {
  background: linear-gradient(180deg, #17497b, #0a2440);
  box-shadow: inset 3px 0 0 var(--gold), inset -3px 0 0 var(--gold), inset 0 4px 0 var(--gold);
}
table.cmp tbody td.col-top { box-shadow: inset 3px 0 0 var(--gold), inset -3px 0 0 var(--gold); }
table.cmp tbody tr:last-child td.col-top { box-shadow: inset 3px 0 0 var(--gold), inset -3px 0 0 var(--gold), inset 0 -3px 0 var(--gold); }
.th-top-mark {
  display: inline-block; background: var(--gold); color: #16202b;
  font-size: 10.5px; font-weight: 900; letter-spacing: .08em;
  padding: 3px 9px; margin: 0 0 7px;
}

/* --- バンドCTAを4列に --- */
.band-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .band-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .band-grid { grid-template-columns: 1fr; } }
.band-item.is-top { box-shadow: inset 0 0 0 2px var(--gold); }
.band-item .flag {
  display: inline-block; background: var(--gold); color: #16202b;
  font-size: 10.5px; font-weight: 900; padding: 3px 9px; margin: 0 0 8px;
}

/* ============================================================
   初心者向け：用語のふりがな・言い換え表示
   ============================================================ */

/* 本文中の用語に小さな注釈をつける */
.term {
  border-bottom: 2px dotted var(--amber);
  font-weight: 700; cursor: help;
}
.term-n { font-size: .86em; color: var(--ink-3); font-weight: 600; }

/* 「かんたんに言うと」ボックス */
.easy {
  background: linear-gradient(180deg, #f2f9ff, #eaf3fd);
  border: 1px solid #cfe2f8; border-left: 5px solid var(--blue);
  padding: 16px 20px 14px; margin: 0 0 24px;
}
.easy p.easy-t {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800; color: var(--blue-d);
  margin: 0 0 7px; letter-spacing: .02em;
}
.easy p.easy-t svg { width: 16px; height: 16px; flex: none; }
.easy p { margin: 0 0 6px; font-size: 14.8px; line-height: 1.85; color: var(--ink); }
.easy p:last-child { margin-bottom: 0; }
.easy b { color: var(--blue-d); }

/* 用語カード（3つだけ覚える） */
.words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 8px; }
@media (max-width: 820px) { .words { grid-template-columns: 1fr; } }
.word {
  background: #fff; border: 1px solid var(--line);
  border-top: 4px solid var(--blue); padding: 18px 20px 16px; box-shadow: var(--sh-2);
}
.word:nth-child(2) { border-top-color: var(--green); }
.word:nth-child(3) { border-top-color: var(--purple); }
.word .wn {
  display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: .1em;
  color: #fff; background: var(--blue); padding: 3px 9px; margin: 0 0 10px;
}
.word:nth-child(2) .wn { background: var(--green); }
.word:nth-child(3) .wn { background: var(--purple); }
.word h4 { margin: 0 0 8px; font-size: 17.5px; font-weight: 800; color: var(--navy); line-height: 1.4; }
.word h4 span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-3); margin-top: 3px; }
.word p { margin: 0; font-size: 14.2px; line-height: 1.85; color: var(--ink-2); }
.word p .hi { background: linear-gradient(transparent 62%, #ffe6a8 62%); font-weight: 700; color: var(--ink); }

/* --- 広告表記（フッター末尾・控えめ表示） --- */
.pr-foot {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .38);
}

/* イチオシカードは上部に帯が入るためリボン位置をずらす */
.pick.is-top .pick-ribbon { top: 52px; }

/* ヒーロー統計は2枚構成 */
.hero-stats { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
@media (max-width: 620px) { .hero-stats { grid-template-columns: 1fr; } }

/* 掲載3社構成へ */
.picks { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .picks { grid-template-columns: 1fr; } }
.band-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .band-grid { grid-template-columns: 1fr; } }
table.cmp { min-width: 840px; font-size: 14px; }
table.cmp thead th:first-child { width: 168px; }
.th-badge.b-gold2 { background: rgba(255,255,255,.18); color: #ffd479; }

/* ============================================================
   2026-08-04 追加：広告表示・リスク表示・出典・未確認・Cookie
   ============================================================ */

/* ページ冒頭の広告表示＋リスク注記（控えめ） */
.pr-bar {
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.pr-bar .pr-line,
.pr-bar .pr-risk {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-3);
}
.pr-bar .pr-risk { margin-top: 4px; }
.pr-bar a { color: var(--ink-2); text-decoration: underline; }

.pr-tag {
  display: inline-block;
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  margin-right: 7px;
  vertical-align: 1px;
}

/* 比較表の直前などに置く広告表示 */
.pr-inline {
  margin: 0 0 18px;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-3);
}

/* CTA近くの広告表示 */
.pr-mini {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-4);
}

/* CTA直下のコスト注記 */
.cta-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--ink-3);
  border-left: 2px solid var(--line);
  padding-left: 9px;
}

/* 最初のCTA前のリスク表示 */
.risk-inline {
  margin: 0 0 26px;
  padding: 13px 15px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy-3);
}
.risk-inline p {
  margin: 0;
  font-size: 12px;
  line-height: 1.85;
  color: var(--ink-2);
}
.risk-inline b { color: var(--navy); }

/* 数値の出典・確認日 */
.src-note {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.8;
  color: var(--ink-4);
}
.src-note a { color: var(--ink-3); text-decoration: underline; }

/* 数値直下の適用条件 */
.fig-cond {
  margin: 8px 0 14px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--ink-2);
  background: var(--tint);
  border: 1px solid var(--line);
  padding: 10px 12px;
}
.fig-cond b { color: var(--navy); }

/* 未確認バッジ */
.unconf {
  display: inline-block;
  background: #ffffff;
  border: 1px solid var(--ink-4);
  color: var(--ink-2);
  font-size: 10.5px;
  font-weight: 700;
  padding: 0 5px;
  letter-spacing: .02em;
}

/* 比較表の右下に確認日 */
.cmp-date {
  margin: 6px 0 0;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
}

/* バンドCTAの広告表示・注記 */
.band-pr {
  margin: 0 0 16px;
  font-size: 11.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .72);
}
.band-pr .pr-tag {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: rgba(255, 255, 255, .85);
}
.band-note {
  margin: 16px 0 0;
  font-size: 11px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .6);
}

/* Cookie同意バナー */
.ck-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--navy);
  border-top: 2px solid var(--navy-3);
  box-shadow: 0 -2px 12px rgba(10, 36, 64, .18);
}
.ck-bar[hidden] { display: none; }
.ck-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.ck-txt {
  margin: 0;
  flex: 1;
  font-size: 11.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .82);
}
.ck-txt a { color: #ffffff; text-decoration: underline; }
.ck-btns { display: flex; gap: 8px; flex: none; }
.ck-bar button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 0;
  cursor: pointer;
  border: 1px solid #ffffff;
}
.ck-ok { background: #ffffff; color: var(--navy); }
.ck-no { background: transparent; color: #ffffff; }
.ck-ok:hover { background: #eaf1f9; }
.ck-no:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 720px) {
  .ck-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px; }
  .ck-btns { justify-content: flex-end; }
}

/* お問い合わせページのメールアドレス表示 */
.mailaddr {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy-3);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  word-break: break-all;
}