/* purchase.css */
/* Travius Business 購入ページ用スタイル */

:root{
  --bg: #f7f7fb;
  --card: #ffffff;
  --text: #1b1b1f;
  --muted: #6b6b76;
  --border: #e7e7ee;
  --primary: #6c3ad6;
  --primary-weak: rgba(108,58,214,.12);
  --danger: #c62828;
  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.05);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,
    "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{color:inherit}

.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:22px 16px 64px;
}

header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding:6px 0 16px;
}

.brand{
  font-weight:900;
  letter-spacing:.02em;
  font-size:18px;
}

.sub{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin-top:6px;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--primary-weak);
  color:var(--primary);
  font-weight:800;
  font-size:12px;
}

.grid{
  display:block;
}

aside.card{
  margin-top:16px;
}

@media (max-width:980px){
  .grid{grid-template-columns:1fr}
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

h2{margin:0 0 10px;font-size:16px}
h3{margin:18px 0 10px;font-size:14px}

.desc{
  margin:0 0 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media (max-width:720px){
  .row{grid-template-columns:1fr}
}

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
}

input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  outline:none;
  font-size:14px;
}

input:focus,select:focus,textarea:focus{
  border-color:rgba(108,58,214,.55);
  box-shadow:0 0 0 4px rgba(108,58,214,.10);
}

.planGrid{
  display:grid;
  gap:10px;
}

.plan{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  background:#fff;
}

.planHead{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.planTitle{
  font-weight:900;
  font-size:14px;
}

.planMeta{
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
  margin-top:4px;
}

.plan input[type="radio"]{
  width:auto;
  margin-top:3px;
}

.inline{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.chip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:8px 10px;
  display:flex;
  gap:8px;
  align-items:center;
  background:#fff;
  font-size:13px;
}

.chip input{width:auto}

.warn{
  border-left:4px solid var(--danger);
  background:rgba(198,40,40,.06);
  padding:10px 12px;
  border-radius:12px;
  color:#5a1b1b;
  font-size:13px;
  line-height:1.7;
}

.agree{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:10px;
}

.agree input{
  width:auto;
  margin-top:3px;
}

.btn{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:0;
  background:var(--primary);
  color:#fff;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}

.btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.note{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  line-height:1.7;
}

.summary{
  display:grid;
  gap:10px;
  font-size:13px;
}

.kv{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:#fff;
}

.kv b{font-weight:900}

.small{
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}