/*
 * ChintaiShokiCalc visual refresh
 * Presentation-only layer: no content, calculation or interaction changes.
 */

:root{
  --ink-950:#172235;
  --ink-800:#26364a;
  --ink-700:#3a4858;
  --ink-500:#67717c;
  --ink-300:#a7adb3;
  --primary:#243e57;
  --primary-strong:#172f46;
  --accent:#c95f43;
  --teal:#277970;
  --success:#2f6e5d;
  --danger:#a83e46;
  --surface:#f1ece2;
  --surface-soft:#f8f5ee;
  --surface-warm:#f7eee7;
  --white:#fffdf9;
  --line:#d9d3c8;
  --line-strong:#aaa69e;
  --shadow-sm:3px 3px 0 rgba(23,34,53,.08);
  --shadow-md:8px 8px 0 rgba(23,34,53,.13);
  --radius-sm:.1rem;
  --radius-md:.14rem;
  --radius-lg:.18rem;
  --container:1160px;
}

body{
  color:var(--ink-950);
  background:#f8f5ee;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.78;
  text-rendering:optimizeLegibility;
}

::selection{color:#fff;background:var(--primary-strong)}
a,button,input,select,textarea{outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent)}
h1,h2,h3{letter-spacing:-.035em}
h1{font-size:clamp(2rem,4.2vw,3.65rem)}
h2{font-size:clamp(1.45rem,2.45vw,2.05rem)}
h3{font-size:1.02rem}
.lead{color:var(--ink-700);font-size:clamp(.98rem,1.6vw,1.1rem);line-height:1.9}
.muted{color:var(--ink-500)}

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--accent);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.1em;
}
.eyebrow::before{display:block;width:28px;height:2px;background:currentColor;content:""}

.section{padding:76px 0}
.section-soft{background:var(--surface)}
.section-white{background:var(--white)}
.section-heading{max-width:720px;margin-bottom:31px}
.section-heading .eyebrow{margin-bottom:9px}
.section-heading h2{margin-bottom:11px}
.section-heading p{color:var(--ink-700)}

/* Header and navigation */
.site-header{
  background:rgba(255,253,249,.97);
  border-bottom:2px solid var(--ink-950);
  backdrop-filter:blur(9px);
}
.header-inner{min-height:70px;gap:22px}
.brand img{display:block;width:252px;height:auto}
.main-nav{gap:1px}
.main-nav a{
  position:relative;
  padding:10px 12px;
  color:var(--ink-700);
  font-size:.77rem;
  letter-spacing:.01em;
}
.main-nav a::after{
  position:absolute;
  right:12px;
  bottom:5px;
  left:12px;
  height:2px;
  background:transparent;
  content:"";
}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--ink-950);background:transparent}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{background:var(--accent)}
.header-cta,.btn{
  min-height:45px;
  padding:0 18px;
  border-width:1.5px;
  border-radius:var(--radius-sm);
  font-size:.8rem;
  letter-spacing:.01em;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
.header-cta,.btn-primary{
  background:var(--primary-strong);
  border-color:var(--primary-strong);
  box-shadow:3px 3px 0 var(--accent);
}
.header-cta:hover,.btn-primary:hover{background:var(--ink-950);box-shadow:5px 5px 0 var(--accent);transform:translate(-1px,-1px)}
.btn-secondary{background:var(--white);border-color:var(--ink-950);box-shadow:3px 3px 0 #d6cec2}
.btn-secondary:hover{background:#f4eee5;border-color:var(--ink-950);box-shadow:5px 5px 0 #d6cec2;transform:translate(-1px,-1px)}
.menu-toggle{border:1.5px solid var(--ink-950);border-radius:0;background:var(--white)}

/* Hero: flat, editorial and product-specific */
.hero{
  position:relative;
  padding:82px 0 86px;
  overflow:hidden;
  background:#f3ecdf;
  border-bottom:1px solid #c7bfb2;
}
.hero::after{
  position:absolute;
  top:0;
  right:max(18px,calc((100vw - var(--container))/2));
  width:1px;
  height:100%;
  background:rgba(23,34,53,.11);
  box-shadow:-12px 0 0 rgba(23,34,53,.05),-24px 0 0 rgba(23,34,53,.035);
  content:"";
}
.hero-inner{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:68px}
.hero-copy{position:relative;padding-left:24px;border-left:4px solid var(--accent)}
.hero-copy .eyebrow{margin-bottom:15px}
.hero-copy h1{max-width:700px;line-height:1.22}
.hero-copy h1 span{margin-top:13px;color:var(--primary);font-size:.43em;line-height:1.55;letter-spacing:-.02em}
.hero-copy .lead{max-width:680px;margin-top:22px}
.hero-actions{gap:12px;margin-top:29px}
.hero-proof{gap:9px 22px;margin-top:25px;color:var(--ink-700);font-size:.73rem}
.hero-proof span::before{color:var(--accent)}
.hero-visual{z-index:1}
.hero-panel{
  padding:27px;
  background:#fffdf8;
  border:2px solid var(--ink-950);
  box-shadow:10px 10px 0 #d7a08d;
}
.hero-panel::before{position:absolute;inset:0 0 auto;height:6px;z-index:1;background:var(--accent);border:0;content:""}
.hero-panel-top{padding-top:4px}
.hero-panel-label{font-size:.76rem;letter-spacing:.03em}
.hero-badge{padding:3px 8px;color:#fff;background:var(--accent);border:1px solid var(--accent);font-size:.64rem;letter-spacing:.08em}
.hero-total{margin:18px 0 6px;color:var(--ink-950);font-size:clamp(2.35rem,4.5vw,3.65rem);font-variant-numeric:tabular-nums}
.hero-receipt{margin-top:18px}
.hero-receipt div{padding-bottom:8px;border-bottom:1px dotted #bcb5aa;color:var(--ink-700)}
.hero-panel-meta{border:1.5px solid var(--ink-950)}
.hero-panel-meta div+div{border-left:1px solid var(--ink-950)}
.hero-panel-meta span{color:var(--ink-700)}

/* Compact credibility strip */
.trust-strip{background:var(--white);border-bottom:2px solid var(--ink-950)}
.trust-strip-inner{border-right:1px solid var(--line);border-left:1px solid var(--line)}
.trust-item{position:relative;padding:20px 22px;border-right:1px solid var(--line)}
.trust-item::after{position:absolute;right:18px;bottom:0;left:18px;height:2px;background:var(--teal);content:""}
.trust-item strong{font-size:.85rem;letter-spacing:-.01em}
.trust-item span{color:var(--ink-700);font-size:.7rem}

/* Calculator */
.calculator-section{padding:72px 0 82px;background:#e9e2d6}
.calculator-shell{
  grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);
  background:var(--white);
  border:2px solid var(--ink-950);
  box-shadow:9px 9px 0 #c8bbab;
}
.calculator-form-panel{padding:37px}
.calculator-result-panel{
  top:70px;
  padding:37px 32px;
  color:#fff;
  background:var(--ink-950);
  border-left:2px solid var(--ink-950);
}
.calculator-heading{margin-bottom:27px;padding-bottom:21px;border-bottom:1px solid var(--line)}
.calculator-heading p{color:var(--ink-700)}
.calculator-version{color:var(--primary-strong);background:#f3e7e1;border:1px solid #d7a997;letter-spacing:.03em}
.form-grid{gap:17px 15px}
.field{gap:7px}
.field label{color:var(--ink-950);font-size:.77rem;letter-spacing:.01em}
.field input,.field select{
  min-height:50px;
  padding:0 14px;
  background:#fffefa;
  border:1.5px solid #aaa69d;
}
.field input:hover,.field select:hover{border-color:var(--ink-700)}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,95,67,.14)}
.field-help{color:#59636f}
.input-suffix{color:#59636f}
.quick-values{gap:7px}
.quick-value{padding:6px 10px;background:#fffefa;border:1px solid #c5beb3;border-radius:0}
.quick-value:hover,.quick-value.is-active{background:var(--accent);border-color:var(--accent)}
.advanced-conditions{margin-top:8px;background:#f5f0e7;border:1.5px solid #bdb6aa}
.advanced-conditions summary{padding:14px 16px}
.advanced-conditions[open] summary{border-bottom:1px solid var(--line)}
.advanced-grid{padding:15px 16px 17px}
.form-actions{gap:11px;margin-top:10px;padding-top:4px}
.form-error{border-left:4px solid var(--danger)}
.input-mode-row{border:1.5px solid var(--ink-950)}
.input-mode-row span{padding:10px;border-right-color:var(--ink-950)}
.input-mode-row input:checked+span{background:var(--primary-strong)}

.calculator-result-panel .result-kicker{color:#e4c1b4;letter-spacing:.08em}
.calculator-result-panel .result-value{margin-top:6px;color:#fff;font-variant-numeric:tabular-nums}
.calculator-result-panel .result-sub,.calculator-result-panel .result-note{color:#c8d0d8}
.calculator-result-panel .result-score{border-color:#596575}
.calculator-result-panel .result-score div{background:rgba(255,255,255,.055)}
.calculator-result-panel .result-score div+div{border-left-color:#596575}
.calculator-result-panel .result-score span,.calculator-result-panel .category-summary span{color:#b9c3cd}
.calculator-result-panel .breakdown-heading{color:#fff}
.calculator-result-panel .breakdown-row span:first-child{color:#d8dfe5}
.calculator-result-panel .breakdown-row strong{color:#fff;font-variant-numeric:tabular-nums}
.calculator-result-panel .breakdown-bar{height:6px;background:#455165}
.calculator-result-panel .breakdown-bar i{background:#4da79c}
.calculator-result-panel .breakdown-row:nth-child(2n) i{background:#d67d63}
.calculator-result-panel .category-summary{border-color:#596575}
.calculator-result-panel .category-summary div{background:rgba(255,255,255,.055);border-right-color:#596575}
.calculator-result-panel .budget-status{color:var(--ink-950);background:#dcece6;border-left-color:#4da08d}
.calculator-result-panel .budget-status.is-over{background:#f7dddc;border-left-color:#c95f5f}
.calculator-result-panel .budget-status span{color:#344355}
.calculator-result-panel .result-tools{border-top-color:#596575}
.calculator-result-panel .result-tool{color:#fff;background:transparent;border-color:#778292}
.calculator-result-panel .result-tool:hover{color:var(--ink-950);background:#fffdf8}
.calculator-result-panel .saved-message{color:#9dd3c7}

/* Content components */
.grid-3{gap:17px}
.card{
  position:relative;
  padding:25px 24px 24px;
  background:#fffdf9;
  border:1px solid #cfc8bd;
  border-top:3px solid var(--primary-strong);
  box-shadow:none;
}
.card:nth-child(3n+2){border-top-color:var(--accent)}
.card:nth-child(3n){border-top-color:var(--teal)}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-700);font-size:.82rem}
.card-icon{background:var(--primary-strong);border-radius:0}
.steps{background:#fffdf9;border:2px solid var(--ink-950)}
.step{padding:24px;border-right-color:#cfc8bd}
.step b{width:31px;height:31px;background:var(--accent);border:1px solid var(--ink-950);box-shadow:2px 2px 0 var(--ink-950)}
.step p{color:var(--ink-700)}
.comparison-shell{border:1.5px solid var(--ink-950);box-shadow:4px 4px 0 #d5cdc1}
.comparison-table th{background:#ece6dc}
.comparison-table th,.comparison-table td{border-color:#d3cdc3}
.faq-list{gap:9px}
.faq-list details{background:#fffdf9;border:1.5px solid #c9c2b7}
.faq-list details[open]{border-color:var(--ink-950);box-shadow:4px 4px 0 #d7cfc3}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{flex:0 0 auto;color:var(--accent);font-size:1.05rem;content:"＋"}
.faq-list details[open] summary::after{content:"−"}
.faq-list details p{color:var(--ink-700)}
.source-cards{gap:9px}
.source-card{padding:18px 19px;background:#fffdf9;border:1px solid #cfc8bd;border-left:4px solid var(--teal)}
.source-card:hover{background:#f7f1e8;border-color:var(--ink-700);border-left-color:var(--accent)}
.source-card span{color:var(--ink-700)}
.callout{padding:21px 23px;background:#f4e7df;border-left:5px solid var(--accent)}
.callout p{color:var(--ink-700)}
.page-meta{border-top-color:#c8c0b5;color:#59636f}

/* Internal pages */
.page-hero{padding:52px 0 50px;background:#f3ecdf;border-bottom:2px solid var(--ink-950)}
.page-hero h1{font-size:clamp(1.9rem,3.4vw,3rem)}
.page-hero p{color:var(--ink-700)}
.breadcrumb{color:#59636f}
.tag{background:#fffdf9;border-color:#aaa69e}
.legal-layout{grid-template-columns:230px minmax(0,1fr);gap:38px}
.legal-nav{top:94px;background:#fffdf9;border:2px solid var(--ink-950);box-shadow:4px 4px 0 #d7cfc3}
.legal-nav a{padding:11px 14px;border-bottom-color:#d3cdc3;color:var(--ink-700)}
.legal-nav a:hover{color:var(--ink-950);background:#f1ebe1}
.legal-card{padding:31px;background:#fffdf9;border:2px solid var(--ink-950);box-shadow:7px 7px 0 #d7cfc3}
.legal-card p,.legal-card li{color:var(--ink-700)}
.legal-card th{background:#ece6dc}
.legal-card th,.legal-card td{border-color:#cfc8bd}
.contact-form input,.contact-form textarea{background:#fffefa;border:1.5px solid #aaa69e}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,95,67,.14)}

/* Footer */
.site-footer{padding:52px 0 18px;color:#f4f1ea;background:#172235;border-top:6px solid var(--accent)}
.footer-logo{width:252px;filter:brightness(0) invert(1);opacity:.96}
.footer-grid p{color:#c1c9d1}
.footer-grid a{color:#cbd2d9}
.footer-bottom{border-top-color:#425064;color:#9ba7b4}
.footer-meta{color:#b8c2cc}

@media(max-width:1040px){
  .main-nav.is-open{top:68px;background:#fffdf9;border:2px solid var(--ink-950);box-shadow:6px 6px 0 rgba(23,34,53,.13)}
  .hero-inner{grid-template-columns:1fr;gap:49px}
  .hero-copy{max-width:760px}
  .hero-visual{width:100%;max-width:620px}
  .calculator-shell{grid-template-columns:1fr}
  .calculator-result-panel{border-top:2px solid var(--ink-950);border-left:0}
}

@media(max-width:780px){
  .legal-layout{grid-template-columns:1fr;gap:25px;padding:38px 0 64px}
  .legal-nav{position:static;box-shadow:3px 3px 0 #d7cfc3}
}

@media(max-width:720px){
  h1{font-size:2.25rem}
  h2{font-size:1.5rem}
  .section{padding:56px 0}
  .header-inner{min-height:62px}
  .brand img{width:205px}
  .hero{padding:52px 0 64px}
  .hero::after{display:none}
  .hero-inner{gap:38px}
  .hero-copy{padding-left:16px;border-left-width:3px}
  .hero-copy h1{font-size:2.28rem}
  .hero-copy h1 span{font-size:.47em}
  .hero-actions{display:grid}
  .hero-actions .btn{width:100%}
  .hero-panel{padding:22px 19px;box-shadow:6px 6px 0 #d7a08d}
  .hero-total{font-size:2.45rem}
  .trust-strip-inner{border-right:0;border-left:0}
  .trust-item::after{right:12px;left:12px}
  .calculator-section{padding:48px 0 58px}
  .calculator-shell{box-shadow:5px 5px 0 #c8bbab}
  .calculator-form-panel,.calculator-result-panel{padding:23px 20px}
  .calculator-heading{gap:12px}
  .field input,.field select{min-height:48px}
  .breakdown-row{grid-template-columns:100px minmax(40px,1fr) auto;gap:8px}
  .breakdown-row strong{min-width:68px}
  .category-summary div{border-right:0;border-bottom-color:#596575}
  .legal-card{padding:23px 20px;box-shadow:4px 4px 0 #d7cfc3}
  .footer-logo{width:220px}
}

@media(max-width:400px){
  .container{width:min(calc(100% - 20px),var(--container))}
  .brand img{width:184px}
  .hero-copy h1{font-size:2rem}
  .hero-panel-meta{grid-template-columns:1fr}
  .hero-panel-meta div+div{border-top:1px solid var(--ink-950);border-left:0}
  .result-tools{display:grid;grid-template-columns:1fr 1fr}
  .result-tool{width:100%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}