/* JPYC ガイドページ（contact.css の配色・書体を使用） */
.jp section{margin-top:40px}
.jp h2.sec{font-family:var(--serif);font-size:clamp(22px,3.2vw,28px);color:#fff;margin:6px 0 14px}
.jp .lead{color:#c3d1db;max-width:46em}
.jp .lead b{color:#fff}

/* 円 → JPYC → ショップ の図 */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;margin-top:18px}
.flow .node{border:1px solid var(--grid);background:rgba(11,34,51,.7);padding:16px 14px;text-align:center;display:grid;gap:4px;align-content:center}
.flow .node .ic{font-family:var(--mono);font-size:22px;color:var(--signal)}
.flow .node b{color:#fff;font-size:15px}
.flow .node small{color:var(--mist);font-size:12px;line-height:1.6}
.flow .arrow{display:grid;place-items:center;padding:0 10px;color:var(--brand);font-family:var(--mono);font-size:12px;text-align:center;line-height:1.4}
.flow .arrow i{font-style:normal;font-size:22px;display:block}
@media (max-width:720px){
  .flow{grid-template-columns:1fr}
  .flow .arrow{padding:6px 0}
  .flow .arrow i{transform:rotate(90deg)}
}

/* 概要の表 */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--grid);border:1px solid var(--grid)}
.facts div{background:var(--navy);padding:16px 18px;display:grid;gap:4px}
.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--signal);text-transform:uppercase}
.facts dd{margin:0;color:#dbe5ec;font-size:14px}
.facts dd b{color:#fff}
@media (max-width:640px){.facts{grid-template-columns:1fr}}

/* 比較表 */
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;table-layout:fixed}
.cmp th,.cmp td{border-bottom:1px solid var(--grid);padding:10px 8px;text-align:left;vertical-align:top}
.cmp thead th{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--mist);font-weight:500}
.cmp tbody th{color:var(--mist);font-weight:500}
.cmp th:first-child{width:18%}
.cmp td.hl{color:#fff}
.tbl-x{overflow-x:auto}

/* 手順 */
.road{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.road>li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;position:relative;padding-bottom:22px}
.road>li:last-child{padding-bottom:0}
.road>li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:15px;color:var(--navy);background:var(--signal);width:44px;height:44px;display:grid;place-items:center;font-weight:700;position:relative;z-index:1}
.road>li::after{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:var(--grid)}
.road>li:last-child::after{display:none}
.road h3{margin:8px 0 6px;font-size:17px;color:#fff}
.road h3 .where{font-family:var(--mono);font-size:11px;color:var(--brand);letter-spacing:.08em;margin-left:8px;font-weight:400}
.road p,.road ul{color:#c3d1db;font-size:14px;margin:0}
.road ul{padding-left:1.2em;display:grid;gap:3px;margin-top:4px}
.road .hint{display:block;margin-top:8px;font-size:12.5px;color:var(--mist);border-left:2px solid var(--steel);padding-left:10px}

/* 必要なもの */
.need{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.need li{border:1px solid var(--grid);padding:14px;display:grid;gap:4px;background:rgba(11,34,51,.6)}
.need li b{color:#fff;font-size:14px}
.need li span{color:var(--mist);font-size:12.5px;line-height:1.6}
.need li em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.1em}
@media (max-width:820px){.need{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.need{grid-template-columns:1fr}}

/* 注意 */
.warn{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.warn li{border:1px solid #6b3a2e;background:rgba(255,143,122,.06);padding:12px 14px;font-size:14px;color:#e6d4cf}
.warn li b{color:#fff}

/* FAQ */
.faq details{border-bottom:1px solid var(--grid)}
.faq summary{cursor:pointer;padding:14px 0;font-weight:700;color:#fff;font-size:15px}
.faq details p{padding:0 0 14px;color:#c3d1db;font-size:14px}

.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.src{margin-top:28px}
.src a{color:var(--fog)}