/* ===== テーマ設定 ===== */
:root{
  --brand:#0F2A4A;
  --brand-ink:#FF6B4A;
  --navy:#0F2A4A;
  --navy-2:#1c4472;
  --coral:#FF6B4A;
  --coral-2:#FFB86B;
  --amber:#E0A72E;
  --paper:#F7F5F0;
  --card:#FFFFFF;
  --ink:#132338;
  --ink-soft:#5b6b80;
  --radius:16px;
}

[hidden]{display:none!important;}

*{box-sizing:border-box;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  position:relative;
  overflow-x:hidden;
}

.bgtexture{
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,107,74,0.06), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(15,42,74,0.07), transparent 45%),
    repeating-linear-gradient(0deg, rgba(15,42,74,0.035) 0px, rgba(15,42,74,0.035) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(15,42,74,0.02) 0px, rgba(15,42,74,0.02) 1px, transparent 1px, transparent 34px);
  background-color:var(--paper);
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ===== header ===== */
.site-header{
  padding:14px 0;
  background:rgba(247,245,240,0.9);
  backdrop-filter:blur(6px);
  position:sticky;
  top:0;
  z-index:20;
  border-bottom:1px solid rgba(15,42,74,0.08);
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:18px;
  color:var(--navy);
}
.badges{display:flex;gap:6px;flex-wrap:wrap;}
.badge{
  font-size:11px;
  background:rgba(15,42,74,0.08);
  color:var(--navy);
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
}

/* ===== hero ===== */
.hero{
  padding:40px 0 24px;
  position:relative;
  background:
    linear-gradient(160deg, rgba(15,42,74,0.05), transparent 60%);
}
.hero-inner{
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
}
.hero-copy h1{
  font-size:26px;
  line-height:1.4;
  color:var(--navy);
  margin:0 0 14px;
  font-weight:800;
}
.hero-copy .lead{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.8;
  margin:0 0 16px;
}
.trust-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.trust-badges span{
  font-size:12px;
  background:var(--card);
  border:1px solid rgba(15,42,74,0.1);
  color:var(--navy);
  padding:6px 12px;
  border-radius:999px;
  font-weight:600;
}
.hero-art{
  width:100%;
  max-width:420px;
}
.hero-art svg{width:100%;height:auto;display:block;}

/* ===== tool area ===== */
.tool-area{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding:20px 20px 40px;
  position:relative;
}

.input-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 1px 2px rgba(15,42,74,0.06), 0 12px 30px rgba(15,42,74,0.08);
  border:1px solid rgba(15,42,74,0.06);
}
.input-card h2{
  margin:0 0 16px;
  font-size:18px;
  color:var(--navy);
}
.field{margin-bottom:16px;}
.field label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:6px;
}
.field input[type=number]{
  width:100%;
  font-size:16px;
  padding:12px 14px;
  border-radius:10px;
  border:1.5px solid rgba(15,42,74,0.15);
  min-height:44px;
  background:#fbfbfa;
  color:var(--ink);
}
.field input:focus{
  outline:none;
  border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(255,107,74,0.15);
}
.field-hint{
  display:block;
  font-size:11px;
  color:var(--ink-soft);
  margin-top:6px;
  line-height:1.6;
}
.segment{
  display:flex;
  gap:8px;
}
.seg-btn{
  flex:1;
  min-height:44px;
  border-radius:10px;
  border:1.5px solid rgba(15,42,74,0.15);
  background:#fbfbfa;
  font-size:14px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
}
.seg-btn.active{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.submit-btn{
  width:100%;
  min-height:48px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg, var(--coral), var(--coral-2));
  color:#fff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(255,107,74,0.35);
}
.submit-btn:active{transform:translateY(1px);}
.micro-disclaimer{
  font-size:11px;
  color:var(--ink-soft);
  margin:10px 0 0;
  text-align:center;
}

/* ===== result panel ===== */
.result-panel{
  background:linear-gradient(180deg, rgba(15,42,74,0.03), transparent);
  border-radius:var(--radius);
  padding:6px 2px 2px;
}
.result-hero-row{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:16px;
}
.big-number-card{
  background:var(--navy);
  border-radius:var(--radius);
  padding:24px;
  color:#fff;
  box-shadow:0 14px 34px rgba(15,42,74,0.35);
  position:relative;
  overflow:hidden;
}
.big-number-card::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:160px;
  height:160px;
  background:radial-gradient(circle, rgba(255,107,74,0.35), transparent 70%);
}
.card-label{
  font-size:12px;
  font-weight:700;
  opacity:0.85;
  display:block;
  margin-bottom:6px;
}
.big-number{
  font-size:42px;
  font-weight:900;
  line-height:1.1;
  background:linear-gradient(135deg,#fff, var(--coral-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .big-number{
    color:#fff;
    background:none;
  }
}
.big-number-card .note{
  display:block;
  margin-top:8px;
  font-size:12px;
  opacity:0.8;
}
.big-number-card .note#bonusClampNote{
  color:#FFD5A6;
  opacity:1;
  font-weight:700;
}
.pie-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  box-shadow:0 1px 2px rgba(15,42,74,0.06), 0 12px 24px rgba(15,42,74,0.08);
}
.pie-wrap{
  position:relative;
  width:150px;
  height:150px;
}
.pie{
  width:150px;
  height:150px;
  border-radius:50%;
  background:conic-gradient(var(--navy) 0% 70%, var(--coral) 70% 100%);
  transition:background 0.6s ease;
}
.pie-center{
  position:absolute;
  inset:20px;
  border-radius:50%;
  background:var(--card);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
#pieRatio{font-size:20px;font-weight:800;color:var(--navy);}
.pie-center small{font-size:10px;color:var(--ink-soft);}
.pie-legend{display:flex;gap:14px;font-size:12px;color:var(--ink-soft);}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px;}
.dot.navy{background:var(--navy);}
.dot.coral{background:var(--coral);}

.grid-2x3{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-bottom:20px;
}
.result-card{
  background:var(--card);
  border-radius:14px;
  padding:16px;
  box-shadow:0 1px 2px rgba(15,42,74,0.06), 0 8px 20px rgba(15,42,74,0.06);
  border:1px solid rgba(15,42,74,0.05);
}
.result-card strong{
  display:block;
  font-size:22px;
  color:var(--navy);
  margin-top:6px;
}
.disclaimer-mini{
  display:block;
  font-size:10.5px;
  color:var(--ink-soft);
  margin-top:6px;
}
.chip-row{
  display:flex;
  gap:10px;
  margin-top:8px;
  overflow-x:auto;
}
.chip{
  flex:1;
  min-width:120px;
  border-radius:12px;
  padding:10px 12px;
}
.chip small{display:block;font-size:11px;opacity:0.8;}
.chip strong{font-size:17px;display:block;margin-top:2px;color:#fff;}
.chip-plus1{background:linear-gradient(135deg,#E0A72E,#f0c568);}
.chip-plus2{background:linear-gradient(135deg,#FF6B4A,#e14b2b);}
.chip-plus1 strong,.chip-plus2 strong{color:#fff;}

.gauge{
  width:80px;
  height:80px;
  border-radius:50%;
  margin:8px auto 0;
  background:conic-gradient(var(--amber) 0% 30%, rgba(15,42,74,0.1) 30% 100%);
  position:relative;
}
.gauge-center{
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:var(--card);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  color:var(--navy);
}

.cta-row{margin-bottom:18px;}
.cta-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(135deg, rgba(255,107,74,0.1), rgba(15,42,74,0.05));
  border:1px solid rgba(255,107,74,0.25);
  border-radius:14px;
  padding:16px;
  text-decoration:none;
  color:var(--navy);
  min-height:44px;
}
.cta-icon{font-size:26px;}
.cta-card strong{display:block;font-size:14px;}
.cta-card small{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px;}

.ad-slot{
  border:1px dashed rgba(15,42,74,0.2);
  border-radius:12px;
  padding:14px;
  text-align:center;
  margin-bottom:8px;
}
.ad-label{font-size:10px;color:var(--ink-soft);}
.ad-placeholder{
  margin-top:6px;
  font-size:12px;
  color:var(--ink-soft);
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== info section ===== */
.info-section{
  padding:20px 20px 60px;
}
.info-section h2{
  color:var(--navy);
  font-size:19px;
  margin:32px 0 12px;
}
.info-section h3{
  color:var(--navy);
  font-size:16px;
  margin:20px 0 8px;
}
.info-section p{
  font-size:14px;
  line-height:1.9;
  color:var(--ink-soft);
}
.faq details{
  background:var(--card);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:10px;
  border:1px solid rgba(15,42,74,0.06);
}
.faq summary{
  font-weight:700;
  color:var(--navy);
  cursor:pointer;
  font-size:14.5px;
}
.faq p{margin-top:8px;}
.outline-note{
  font-size:12px;
  color:var(--ink-soft);
  border-left:3px solid var(--coral);
  padding-left:10px;
  margin-top:16px;
}
.disclaimer-block{
  font-size:12px;
  color:var(--ink-soft);
  background:rgba(15,42,74,0.04);
  padding:14px;
  border-radius:10px;
  line-height:1.8;
  margin-top:24px;
}
.internal-links{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}
.internal-links a{
  font-size:12.5px;
  color:var(--navy);
  text-decoration:none;
  border-bottom:1px solid rgba(15,42,74,0.3);
}

/* ===== footer ===== */
.site-footer{
  padding:24px 0 40px;
  border-top:1px solid rgba(15,42,74,0.08);
  background:rgba(15,42,74,0.03);
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
  font-size:12px;
  color:var(--ink-soft);
}
.footer-inner nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.footer-inner a{color:var(--navy);text-decoration:none;}

/* ===== PC layout ===== */
@media (min-width:900px){
  .hero-inner{
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
  }
  .hero-copy{flex:1;max-width:560px;}
  .hero-copy h1{font-size:32px;}
  .hero-art{max-width:440px;}

  .tool-area{
    flex-direction:row;
    align-items:flex-start;
    gap:32px;
    padding:32px 20px 60px;
  }
  .input-card{
    flex:0 0 38%;
    position:sticky;
    top:92px;
  }
  .result-panel{flex:1;}
  .result-hero-row{
    flex-direction:row;
    align-items:stretch;
  }
  .big-number-card{flex:1.3;}
  .big-number{font-size:52px;}
  .pie-card{flex:1;}
  .grid-2x3{
    grid-template-columns:repeat(3,1fr);
  }
  .cta-row{display:flex;gap:12px;}
}

@media (min-width:1200px){
  .big-number{font-size:58px;}
}