:root {
  --line: rgba(255,255,255,0.08);
  --text: #f6f7fb;
  --muted: #aeb6cb;
  --gold: #d8c18d;
  --shadow: 0 24px 80px rgba(0,0,0,0.38);
  --radius-xl: 28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Sans JP",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(75,112,213,0.16), transparent 32%),
    radial-gradient(circle at top right, rgba(216,193,141,0.08), transparent 28%),
    linear-gradient(180deg,#08101d 0%,#070b14 42%,#0a1020 100%);
  min-height:100vh;
}
.container,.sticky-bar{position:relative;z-index:1}
.sticky-bar{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(18px);
  background:rgba(7,11,20,0.72);
  border-bottom:1px solid rgba(255,255,255,0.07);
  box-shadow:0 8px 30px rgba(0,0,0,0.24);
}
.sticky-inner{
  max-width:1240px; margin:0 auto; padding:18px 24px;
  display:flex; gap:20px; align-items:center; justify-content:space-between;
}
.brand-wrap h1{margin:4px 0; font-family:"Noto Serif JP",serif; font-size:clamp(18px,2.5vw,28px); font-weight:900}
.eyebrow,.section-kicker{margin:0; font-size:11px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold)}
.tax-note{margin:0; color:var(--muted); font-size:12px}
.price-panel{display:grid; grid-template-columns:repeat(2,minmax(160px,1fr)); gap:14px; min-width:min(100%,380px)}
.price-box{
  border-radius:18px; padding:14px 16px;
  background:linear-gradient(180deg,rgba(22,33,56,0.94),rgba(13,21,37,0.98));
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03), 0 12px 28px rgba(0,0,0,0.28);
}
.price-label{display:block; color:var(--muted); font-size:12px; margin-bottom:8px}
.price-value{display:block; font-size:clamp(22px,2.4vw,32px); font-weight:800}
.container{max-width:1240px; margin:0 auto; padding:28px 24px 80px}
.card{
  background:linear-gradient(180deg,rgba(17,25,43,0.88),rgba(11,17,30,0.92));
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:30px;
  margin-bottom:22px;
}
.hero-card{display:grid; grid-template-columns:1.3fr .9fr; gap:28px}
.hero-copy h2,.card-head h3{margin:8px 0 14px; font-family:"Noto Serif JP",serif; font-size:clamp(22px,3vw,40px); line-height:1.45}
.hero-copy p,.lead-text,.option-desc,.cta-subtext,.info-grid p{line-height:1.9; color:var(--muted)}
.glass-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.09);
  border-radius:22px; padding:22px;
}
.summary-row{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.07)}
.summary-row:last-child{border-bottom:none}
.info-grid,.settings-grid,.option-grid,.stores-grid,.toggle-option-grid{display:grid; gap:16px}
.info-grid,.settings-grid,.stores-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.option-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.toggle-option-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-grid>div,.field-block,.optional-card,.info-box{
  padding:18px; border-radius:18px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06)
}
.info-box h4{margin:0 0 10px}
.info-box ul{margin:0; padding-left:20px; color:var(--muted); line-height:1.9}
.limit-row,.store-control-row{
  display:flex; justify-content:space-between; gap:16px; margin-bottom:18px; padding:14px 18px;
  border-radius:18px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06)
}
.option-card{
  position:relative; display:flex; flex-direction:column; gap:10px; min-height:170px;
  padding:20px 18px 18px 54px; border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.08); cursor:pointer
}
.option-card input{position:absolute; opacity:0; pointer-events:none}
.option-card::before{
  content:""; position:absolute; top:20px; left:18px; width:22px; height:22px; border-radius:7px;
  border:1px solid rgba(255,255,255,0.22); background:rgba(255,255,255,0.04)
}
.option-card.checked{background:linear-gradient(180deg,rgba(93,128,219,0.16),rgba(255,255,255,0.04)); border-color:rgba(145,180,255,0.35)}
.option-card.checked::before{background:linear-gradient(180deg,#dce8ff,#8caef8)}
.option-card.checked::after{
  content:""; position:absolute; top:26px; left:25px; width:8px; height:4px;
  border-left:2px solid #09101d; border-bottom:2px solid #09101d; transform:rotate(-45deg)
}
.option-card.disabled-option{opacity:.5; cursor:not-allowed}
.option-title{font-weight:800; font-size:18px; line-height:1.5}
.price-tag{margin-top:auto; color:var(--gold); font-size:14px; font-weight:700}
.text-input,.store-count-select,.person-select,.store-name-input,.note-box,.setting-text,.other-key,.other-value{
  width:100%; padding:14px 16px; border-radius:14px; background:rgba(9,14,25,0.9);
  border:1px solid rgba(255,255,255,0.1); color:var(--text); font:inherit
}
.note-box{min-height:112px; margin-top:16px; resize:vertical}
.toggle-option{display:flex; gap:10px; align-items:center; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); cursor:pointer}
.optional-fields{display:grid; gap:14px}
.optional-card{display:grid; gap:12px}
.optional-card-header,.store-top,.cta-actions,.doc-header{display:flex; justify-content:space-between; gap:14px; align-items:center}
.remove-mini-btn,.small-add-btn,.action-btn{
  border:none; border-radius:12px; background:rgba(255,255,255,0.08); color:var(--text);
  padding:10px 14px; font:inherit; cursor:pointer
}
.action-btn{display:inline-flex; justify-content:center; align-items:center; min-width:260px; padding:16px 22px; text-decoration:none; font-weight:800; border:1px solid rgba(255,255,255,0.1)}
.pdf-btn{background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03))}
.line-btn{color:#05110a; background:linear-gradient(180deg,#46df78,#27c85f)}
.other-field-grid{display:grid; grid-template-columns:.8fr 1.2fr auto; gap:10px; align-items:start}
.store-card,.estimate-block{padding:22px; border-radius:20px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08)}
.store-badge{display:inline-flex; align-items:center; justify-content:center; min-width:52px; height:52px; padding:0 14px; border-radius:16px; font-size:20px; font-weight:800; color:#09101d; background:linear-gradient(180deg,#e7eefc,#abc0f8)}
.store-price{font-size:20px; font-weight:800}
.store-fields{display:grid; gap:12px}
.monthly-summary{margin-top:18px}
.total-row strong{font-size:clamp(28px,4vw,42px); font-weight:900}
.storeBreakdown{margin-top:14px; display:grid; gap:10px}
.breakdown-item{display:flex; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06)}
.cta-card{text-align:center}
.cta-actions{justify-content:center; flex-wrap:wrap; margin-top:22px}
.autosave-note{margin-top:14px; color:var(--muted); font-size:13px}
.document-sheet{margin-top:8px; padding:28px; border-radius:20px; background:#fff; color:#111}
.doc-mini{margin:0 0 8px; font-size:11px; letter-spacing:0.18em; color:#333}
.document-sheet h2{margin:0 0 8px; font-size:28px; color:#111}
.doc-system{margin:0; color:#333}
.doc-meta{min-width:260px; display:grid; gap:8px}
.doc-meta div{display:flex; justify-content:space-between; gap:12px; font-size:14px; color:#111}
.doc-section{margin-top:18px}
.doc-section h4{margin:0 0 10px; font-size:16px; color:#111}
.doc-table{width:100%; border-collapse:collapse}
.doc-table th,.doc-table td{border:1px solid #222; padding:10px 12px; vertical-align:top; font-size:14px; color:#111; word-break:break-word}
.doc-table th{width:220px; text-align:left; background:#f3f3f3}
.doc-note-list p{margin:0 0 8px; line-height:1.8; color:#111}
@media (max-width:980px){
  .sticky-inner,.hero-card,.info-grid,.settings-grid,.option-grid,.stores-grid,.toggle-option-grid{grid-template-columns:1fr}
  .sticky-inner{display:grid}
  .price-panel{min-width:100%}
  .other-field-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .container{padding:18px 14px 70px}
  .sticky-inner{padding:14px; gap:14px}
  .price-panel{grid-template-columns:1fr 1fr; gap:10px}
  .card{padding:20px 16px}
  .limit-row,.store-control-row,.optional-card-header,.store-top,.breakdown-item,.doc-header{flex-direction:column; align-items:flex-start}
  .action-btn{min-width:100%}
}