/* 基本設定 */
:root{
  --bg:            #e5e9f2;
  --ink:           #0b1228;
  --muted:         #475569;
  --panel:         #ffffff;
  --line:          rgba(2,6,23,.16);
  --line-soft:     rgba(2,6,23,.10);
  --accent:        #1d4ed8;
  --accent-2:      #16a34a; 
  --accent-grad:   linear-gradient(135deg,#3b82f6,#1d4ed8);
  --shadow-sm:     0 6px 18px rgba(2,6,23,.06);
  --shadow-md:     0 14px 32px rgba(2,6,23,.10);
  --shadow-lg:     0 28px 60px rgba(2,6,23,.16);
  --radius:        18px;
  --ring:          rgba(29,78,216,.35);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color: var(--ink);
  background:
    radial-gradient(600px 280px at 8% -10%, rgba(59,130,246,.10), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/*ヘッダ */
header{
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo img {
  display: block;
  height: 60px;
  width: auto;
}

/* スマホではさらに小さめに */
@media (max-width: 600px) {
  .logo img {
    height: 40px;
  }
}
.brand h1{margin:0;font-size:18px;letter-spacing:.2px}
.cta{display:flex;gap:10px;flex-wrap:wrap}

/* ボタンの表示設定 */
.btn{
  appearance:none; border:1px solid transparent;
  background: var(--accent-grad); color:#fff; font-weight:800;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  display:inline-flex; gap:8px; align-items:center;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn:hover{opacity:.95; transform: translateY(-2px); box-shadow: 0 12px 22px rgba(29,78,216,.22)}
.btn:active{transform:none}
.btn:focus-visible{outline:2px solid transparent; box-shadow:0 0 0 6px var(--ring)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{box-shadow:var(--shadow-sm)}
.btn.line{background:#06c755}
.btn.line:hover{box-shadow:0 12px 22px rgba(6,199,85,.22)}
.btn.line{margin-right: 5px;}
/* 冒頭セクション */
.hero{
  padding:64px 0;
  background: linear-gradient(135deg,#dbeafe 0%, #bfdbfe 100%);
}
.hero .grid{
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 880px){
  .hero .grid{
    grid-template-columns: 1.1fr 0.9fr;
  }
}
.hero-text{
  text-align: left;
}
.hero-illus img{
  max-width: 100%;
  height: auto;
  display: block;
}
.title{
  font-size: clamp(24px,4vw,42px);
  line-height: 1.15; margin:0 0 12px;
  background: linear-gradient(90deg,#0b1228,#334155 60%,#0b1228);
  -webkit-background-clip: text; background-clip:text; color: transparent;
  filter: saturate(1.05) contrast(1.02);
}
.lead{color:var(--muted);margin:0 0 20px;font-size:18px}

/* ---------- Panels ---------- */
.panel{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.panel.pad{padding:20px}


/* 追加設定 */
#cases h2 {
  color: #1d4ed8;
}
#simulator h2 {
  color: #16a34a;
}
#plans h2 {
  color: #0f172a;
}

.sec h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.sec h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 60%;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

#simulator h2 {
  background: linear-gradient(90deg, #16a34a, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sec h2 {
  font-size: clamp(22px,3.6vw,34px);
}

.sec p.desc {
  margin: 0 0 28px;
  line-height: 1.6;
  font-size: 16px;
}

.hero .title {
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.hero .lead .highlight {
  font-weight: 700;
  background: linear-gradient(
    transparent 70%, 
    rgba(250, 235, 21, 0.75) 70% 
  );
  padding: 0 5px;
}

.tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  margin: 12px 0 18px;
}
.tabs .tab{
  appearance:none; border:1px solid var(--line); background:#fff; color:var(--ink);
  padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:700;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.tabs .tab:hover{ transform:translateY(-1px); box-shadow:var(--shadow-sm) }
.tabs .tab[aria-selected="true"]{
  background: var(--accent-grad); color:#fff; border-color:transparent;
  box-shadow: 0 10px 18px rgba(29,78,216,.22);
}

#planCards .plan{ display:flex; flex-direction:column; gap:8px }
#planCards .plan .yen{ font-size:26px }
#planCards .plan ul.features{ margin-top:6px }

#planCards .plan h3 {
  display:flex; align-items:baseline; gap:8px; margin:0 0 6px;
}
#planCards .plan .yen { font-size:26px; letter-spacing:.2px; }
#planCards .plan ul.features { margin-top:8px; }
#planCards .plan.featured { box-shadow: var(--shadow-lg); }

/* セクションの表示設定 */
.sec{padding:60px 0}
.sec h2{font-size:clamp(20px,3.2vw,30px);margin:0 0 8px;font-weight:800;letter-spacing:.1px}
.sec p.desc{margin:0 0 20px;color:var(--muted)}

#cases{
  background:
    radial-gradient(600px 260px at 8% -10%, rgba(59,130,246,.12), transparent 50%),
    linear-gradient(180deg,#dde7fb 0%, #eef3ff 100%);
}
#plans{
  background:
    radial-gradient(600px 260px at 100% -10%, rgba(16,185,129,.12), transparent 50%),
    linear-gradient(180deg,#e6f4ff 0%, #dde7fb 100%);
}

/* 料金表 */
.cards{display:grid;gap:20px}
@media (min-width:720px){ .cards{grid-template-columns:repeat(4,1fr)} }
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  display:grid; gap:10px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  box-shadow: 0 10px 28px rgba(2,6,23,.08);
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
  border-color: rgba(29,78,216,.35);
}
.icon{
  width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(16,185,129,.14));
  border:1px solid var(--line-soft);
  font-size:22px;
}
.muted{color:var(--muted)}

/* カード表示サイズ切り替え(PC/SP) */
@media (min-width:880px){
  .card .icon{
    width:120px;height:120px;font-size:40px;
    display:grid;place-items:center;border-radius:12px;
  }
}

/* シミュレーターの表示設定 */
.sim-grid{display:grid;gap:16px}
@media (min-width:880px){ .sim-grid{grid-template-columns:1fr 1fr auto} } /* 2項目+ボタン */
label{display:block;font-size:13px;color:#475569;margin:0 0 6px}
select{
  width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(2,6,23,.16);
  background:#eef2f7;color:#0b1228;outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
select:focus{border-color:var(--accent);box-shadow:0 0 0 6px var(--ring);background:#e8edf6}

button.calc{
  align-self:end;padding:12px 18px;border-radius:12px;
  background:var(--accent-grad);color:#fff;border:none;font-weight:800;cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  box-shadow: 0 12px 22px rgba(29,78,216,.20);
}
button.calc:hover{transform: translateY(-2px); box-shadow: 0 18px 34px rgba(29,78,216,.25)}
button.calc:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(.2);box-shadow:none}

.result{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;background:#f3f6fb;
  border-top:1px dashed rgba(2,6,23,.20);
  border-radius: 0 0 var(--radius) var(--radius);
}
.price{font-size:clamp(22px,4vw,36px);font-weight:900;letter-spacing:.2px}
.price small{font-size:14px;color:#64748b;font-weight:500}
.badge{
  display:inline-block;padding:6px 10px;border-radius:999px;
  background:rgba(37,99,235,.10);color:#2563eb;font-weight:800;font-size:12px
}

/* 料金表の表示設定 */
.plans{display:grid;gap:20px}
@media (min-width:900px){ .plans{grid-template-columns:repeat(3,1fr)} }
.plan{
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  background: var(--panel);
}
.plan:hover{box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: rgba(29,78,216,.35)}
.plan h3{margin:0 0 6px;color:#0b1228}
.yen{font-size:28px;font-weight:900;color:#0b1228}
ul.features{margin:10px 0 0;padding:0 0 0 20px;color:var(--muted)}

/*フッタ */
footer{
  padding-top:32px; padding-bottom:12px; background:#f1f5f9;
}
.foot{display:grid;gap:12px;align-items:center;padding:20px 0}
@media (min-width:740px){ .foot{grid-template-columns:1fr auto} }

/* Common */
.grid{display:grid}
.hidden{display:none !important}
.center{margin: 0 auto;}
.nowrap {
  white-space: nowrap;
}