:root{
  --paper:#F7F6F1; --paper-2:#F7F6F1; --card:#FFFFFF;
  --page-bg:#EAF4F4;
  --ink:#1F6E68; --ink-soft:#5B6E69; --muted:#8E9B96;
  --line:#ECE7DA; --line-soft:#EDEEEC;
  --teal:#2898A0; --teal-deep:#1E7078; --teal-soft:#E2F1EE; --teal-tint:#E8F8F8;
  --pink:#E87080; --pink-soft:#FBEDEF;
  --accent-1:#EF5A4C; /* おすすめ1位カードの価格・タグ色 */
  --accent-2:#2898A0; /* おすすめ2位カードの価格・タグ色 */
  --border-1:#F6CBD3; /* 1位カードの縁取り */
  --border-2:#C3E6DA; /* 2位カードの縁取り */
  --shadow:0 10px 30px rgba(31,110,104,.10);
  --shadow-sm:0 4px 14px rgba(31,110,104,.08);
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  /* --sans:'Zen Kaku Gothic New', system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --round:'Zen Maru Gothic', 'Zen Kaku Gothic New', system-ui, "Hiragino Sans", sans-serif; */
}
html body{
  color:#333; line-height:1.75;
  background:var(--page-bg); overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:anywhere; word-break:normal;
}

/* ---- card shell ---- */
.simulator_content {
  padding: 20px 0 0;
  background: var(--site-secondary);
}
.simulator_content:has(#intro.active) {
  padding-top: 5px;
}
.simulator_content .card{
  background:var(--card);
  box-shadow:var(--shadow); overflow:hidden;
  border-radius: 8px;
}
.simulator_content .card:has(#intro.active) {
  border-radius: 0;
}
.simulator_content .screen{display:none; animation:rise .5s cubic-bezier(.2,.7,.2,1)}
.simulator_content .screen.active{display:block}
.simulator_content #quiz {padding-bottom: 25px;}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.simulator_content .pill{
  display:inline-flex; align-items:center; gap:8px; color:var(--teal); background:var(--teal-tint); padding:10px 30px; border-radius:999px;
}
.simulator_content .pill img{width:25px; height:22px; display:block}

@media (min-width:767px){
  .simulator_content .card {border-radius: var(--r-sm);}
  .simulator_content .card:has(#intro.active){border-radius:var(--r-sm); }
  .simulator_content {padding: 60px 0 0;}
  .simulator_content:has(#intro.active) {padding: 60px 0 60px;border-bottom: 5px solid #d0e8e9;}
  .simulator_content:has(#quiz.active) {border-bottom: 5px solid #d0e8e9;}
  .simulator_content #quiz {padding-bottom: 50px;}
}

/* ---- intro ---- */
.simulator_content .intro{
  position:relative; text-align:center; padding:30px 0 30px;
  background-image:url('../img/simulator/intro_bg_sp.jpg'); background-size:cover; background-position:center bottom 30%;
}
.simulator_content .intro-inner{position:relative; max-width:620px; margin:0 auto}
.simulator_content .intro_ttl{
  color:var(--ink);
  font-size:1.8rem; font-weight: 600; line-height:1.5; margin:20px 0 22px;
}
.simulator_content .intro_ttl .size {font-size: 1.3em; font-weight: 600;}
.simulator_content .intro_ttl .txt_color {color: var(--teal);}
.simulator_content .lead{font-size:.94rem; margin:0 auto 33%;color:var(--ink-soft)}
.simulator_content .feature-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:26px}
.simulator_content .feature-item{
  display:inline-flex; align-items:center; gap:5px; font-size:.88rem; color:var(--site-primary);
  background:rgba(233,244,245,.85); padding:5px 15px; border-radius:999px; box-shadow:var(--shadow-sm);
}
.simulator_content .feature-item img{width:17px; height:17px; display:block}
.simulator_content .feature-item .size {font-size: 1.5em;}
@media (min-width:767px){
   .simulator_content .intro{background-image:url('../img/simulator/intro_bg.jpg'); background-position:center bottom; background-repeat: no-repeat; background-size: 100% auto; padding:50px 40px 57px;}
  .simulator_content .lead{ margin-bottom: 32px;}
  .simulator_content .feature-item {padding: 5px 25px; gap: 8px;}
}

/* ---- buttons ---- */
.simulator_content .btn{
  font-size:1.15rem; font-weight: 700; letter-spacing: 0.05em; border:0; cursor:pointer; border-radius:999px; padding:0.95em 0 1.1em; width: 95%;
  background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(40,152,160,.28);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  display:inline-flex; align-items:center; justify-content: center; position: relative;
}
.simulator_content .btn:hover{background:var(--teal-deep); transform:translateY(-2px); box-shadow:0 12px 26px rgba(40,152,160,.34)}
.simulator_content .btn:active{transform:translateY(0)}
.simulator_content .btn.block{width:100%; justify-content:center}
.simulator_content .btn.ghost{background:#fff; color:var(--teal); border:1.5px solid var(--teal); box-shadow:none; max-width: initial; width: 100%; font-size: 1.0rem;}
.simulator_content .btn.ghost:hover{background:var(--teal-tint)}
.simulator_content .btn img{width:16px; height:16px; display:block; position: absolute; right: 1.75em; top: 50%; transform: translateY(-50%);}
.simulator_content .btn svg{width:20px; height:20px; display:block; position: absolute; right: 38px;}
@media (min-width:721px){
  .simulator_content .btn{padding:0.95em 5.0em 1.1em; font-size:1.25rem;}
  .simulator_content .btn.ghost {width: auto; font-size: 1.25rem;}
}

/* ---- quiz ---- */
.simulator_content .qhead{padding:20px 18px 8px; text-align:center}
.simulator_content .progress{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.simulator_content .bars{display:flex; gap:8px; flex:1}
.simulator_content .bar{height:7px; flex:1; border-radius:999px; background:#D8D8D8; transition:background .35s ease}
.simulator_content .bar.done{background:var(--teal)}
.simulator_content .bar.now{background:var(--pink)}
.simulator_content .count{font-size:.8rem; color:var(--muted); font-weight:700; white-space:nowrap; font-family:var(--sans)}
.simulator_content .theme{margin-bottom:18px}
.simulator_content .qtext{font-weight:700; color:var(--site-primary); font-size:1.6rem; line-height:1.6; margin:0 0 15px}
.simulator_content .qhint{font-size:.82rem; color:var(--muted); margin:6px 0 0}

.simulator_content .options{padding:16px 16px 8px; max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.simulator_content .opt{
  width:100%; text-align:left; cursor:pointer; font-family:var(--sans);
  background:var(--paper-2); border:1.5px solid var(--line);
  border-radius:var(--r-md); padding:16px 15px;
  display:flex; align-items:center; gap:14px; color: #605239;
  transition:border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
  font-size:1rem; line-height:1.55; font-weight:500;
}
.simulator_content .opt:hover{border-color:var(--teal); background:#fff; box-shadow:var(--shadow-sm)}
.simulator_content .opt .tick{
  flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line);
  display:grid; place-items:center; transition:.18s ease; color:#fff; background:#fff;
}
.simulator_content .opt .tick svg{width:13px; height:13px; opacity:0; transform:scale(.5); transition:.18s ease}
.simulator_content .opt.sel{border-color:var(--teal); background:var(--teal-soft)}
.simulator_content .opt.sel .tick{background:var(--teal); border-color:var(--teal)}
.simulator_content .opt.sel .tick svg{opacity:1; transform:none}
.simulator_content .opt .txt{flex:1}

.simulator_content .qfoot{padding:10px 24px 0; max-width:760px; margin:0 auto; display:flex; justify-content:flex-start; align-items:center}
.simulator_content .back{
  background:none; border:0; cursor:pointer; color:var(--teal-deep); font-family:var(--sans);
  font-size:.92rem; font-weight:700; padding:8px 6px; display:inline-flex; align-items:center; gap:6px; 
}
.simulator_content .back:hover{opacity:.75}
.simulator_content .back svg{width:14px; height:14px}
.simulator_content .skip{display:none}

/* ---- result ---- */
.simulator_content .card.has-topbar{border-top:5px solid var(--teal)}
.simulator_content .card:has(#result.active) {margin-bottom: 40px;}
.simulator_content .result-top{position:relative; padding:15px 10px 6px; text-align:center}
.simulator_content .result-top .roundicon{
  width:45px; height:45px; margin:0 auto 4px; border-radius:50%; background:var(--teal-tint);
  display:grid; place-items:center;
}
.simulator_content .result-top .roundicon .pill {background: none; padding: 0;}
.simulator_content .result-top .roundicon img{width:24px; height:20px}
.simulator_content .r-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:16px;
  color:var(--ink); font-size:1.55rem; font-weight: 700; letter-spacing:.06em;
}
.simulator_content .r-eyebrow::before, .r-eyebrow::after{content:""; height:1px; width:44px; background:var(--line)}

.simulator_content .result-plans{padding:16px 16px 0; display:flex; flex-direction:column; gap:20px; margin-top:4px; max-width:1040px; margin-left:auto; margin-right:auto}

.simulator_content .rplan{
  position:relative; border-radius:var(--r-sm); overflow:visible; border:1px solid var(--border-2);
  background:#fff; display:flex; flex-direction: column; padding: 15px 15px;}
.simulator_content .rplan.rank1{border-color:var(--border-1)}
.simulator_content .rplan.jitaku {border-color: #F05848; background: #FCF4F1 url('../img/simulator/bg_jitaku.png') no-repeat bottom 0 right -17%; background-size: 70%;}
.simulator_content .rplan.premium {border-color: #B98A4A; background: #FFF8EE url('../img/simulator/bg_premium.png') no-repeat bottom 0 right -17%; background-size: 70%;}
.simulator_content .rplan.kobetsu {border-color: #31865A; background: #F1FCFA url('../img/simulator/bg_kobetsu.png') no-repeat bottom 0 right -17%; background-size: 70%;}
.simulator_content .rplan.goudou {border-color: #28979F; background: #EFF9FA url('../img/simulator/bg_goudou.png') no-repeat bottom 0 right -17%; background-size: 70%;}
@media (min-width:721px){
  .simulator_content .card:has(#result.active) {margin-bottom: 80px;}
  .simulator_content .rplan{flex-direction:row; align-items:stretch;padding: 22px 22px; border-radius: var(--r-md);}
  .simulator_content .rplan:hover {box-shadow: var(--shadow-sm);}
  .simulator_content .qhead{padding:30px 24px 8px;}
  .simulator_content .progress{margin-bottom:30px}
  .simulator_content .options{padding:20px 24px 8px;}
  .simulator_content .opt{padding: 18px 15px;}
  .simulator_content .result-top{padding:26px 24px 6px;}
  .simulator_content .result-top .roundicon{width: 56px; height: 56px; margin: 0 auto 16px;}
  .simulator_content .result-plans {padding:26px 24px 0;}
  .simulator_content .rplan.jitaku {background: #FCF4F1 url('../img/simulator/bg_jitaku.png') no-repeat bottom 0 right 13px; background-size: contain;}
  .simulator_content .rplan.premium {background: #FFF8EE url('../img/simulator/bg_premium.png') no-repeat bottom 0 right 13px; background-size: contain;}
  .simulator_content .rplan.kobetsu {background: #F1FCFA url('../img/simulator/bg_kobetsu.png') no-repeat bottom 0 right 13px; background-size: contain;}
  .simulator_content .rplan.goudou {background: #EFF9FA url('../img/simulator/bg_goudou.png') no-repeat bottom 0 right 13px; background-size: contain;}
  .simulator_content .qfoot{padding:10px 24px 10px;}
}
.simulator_content .rplan-ribbon{position:absolute; top:-16px; left:8px; width:65px; height:auto; z-index:2; filter:drop-shadow(0 4px 8px rgba(0,0,0,.12))}
.simulator_content .rplan-imgwrap{flex:none; overflow:hidden; border-radius:calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 0 0}
@media (min-width:721px){
  .simulator_content .rplan-imgwrap{width:38%; }
  .simulator_content .rplan-ribbon{ width: 92px; left: 18px;}
}
  .simulator_content .rplan-img{width:100%; object-fit:cover; display:block; border-radius:var(--r-sm);}
@media (min-width:721px){
  .simulator_content .rplan-img{height:100%; min-height:230px;border-radius:calc(var(--r-md) - 2px) 0 0 calc(var(--r-md) - 2px);}
}
  .simulator_content .rplan.rank2 .rplan-img{height:170px}
  
@media (min-width:721px){ .rplan.rank2 .rplan-img{height:100%} }
.simulator_content .rplan-body{padding:0 0 0; flex:1}
.simulator_content .rplan-name{font-size:1.85rem; font-weight: 600; color: #333; margin:0 0 0; }
.simulator_content .rplan-name span {display: flex; align-items: center; justify-content: center; gap: 6px;}
.simulator_content .rplan-name span::after {content: ''; width: 22px; height: 22px; display: inline-block;}
.simulator_content .rplan.jitaku .rplan-name span::after {background: url(../img/simulator/arrow_jitaku.svg) no-repeat center; background-size: contain;}
.simulator_content .rplan.premium .rplan-name span::after {background: url(../img/simulator/arrow_premium.svg) no-repeat center; background-size: contain;}
.simulator_content .rplan.kobetsu .rplan-name span::after {background: url(../img/simulator/arrow_kobetsu.svg) no-repeat center; background-size: contain;}
.simulator_content .rplan.goudou .rplan-name span::after {background: url(../img/simulator/arrow_goudou.svg) no-repeat center; background-size: contain;}
.simulator_content .rplan-price{font-size:.92rem; font-weight: bold; color:var(--ink-soft); margin:0 0 6px}
.simulator_content .rplan-price b{font-family:var(--round); font-size:1.95rem; font-weight:600; margin:0 2px}
.simulator_content .rplan.rank1 .rplan-price b{color:var(--accent-1)}
.simulator_content .rplan.rank2 .rplan-price b{color:var(--accent-2)}
.simulator_content .rplan.jitaku .rplan-price b{color:#F05848;}
.simulator_content .rplan.premium .rplan-price b{color:#B98A4A;}
.simulator_content .rplan.kobetsu .rplan-price b{color:#31865A;}
.simulator_content .rplan.goudou .rplan-price b{color:#28979F;}
.simulator_content .rplan-why{font-size:.95rem; margin:0 0 16px}
.simulator_content .rplan-tags{display:flex; flex-wrap:wrap; gap:8px}
.simulator_content .rplan-tags .tag{font-size:.76rem; font-weight:700; padding:5px 13px; border-radius:999px; background:#fff;}
.simulator_content .rplan.rank1 .rplan-tags .tag{color:var(--accent-1);}
.simulator_content .rplan.rank2 .rplan-tags .tag{color:var(--accent-2);}
.simulator_content .rplan.jitaku .rplan-tags .tag{color:#F05848;}
.simulator_content .rplan.premium .rplan-tags .tag{color:#B98A4A;}
.simulator_content .rplan.kobetsu .rplan-tags .tag{color:#31865A;}
.simulator_content .rplan.goudou .rplan-tags .tag{color:#28979F;}
.simulator_content .rplan-tags .tag.off{color:var(--muted); border-color:var(--line); background:var(--paper-2)}

.simulator_content .r-body{padding:12px 18px 4px; max-width:1040px; margin:0 auto}
.simulator_content .sec-label{font-family:var(--round); font-weight:700; color:var(--ink); font-size:1.02rem; margin:30px 0 12px; display:flex; align-items:center; gap:9px}
.simulator_content .sec-label::before{height: 26px; top: -3px;}
.simulator_content .recap{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column}
.simulator_content .recap li{
  font-size:.92rem; color:var(--ink-soft); display:flex; flex-wrap: wrap; gap:5px 8px; align-items:center;
  padding:7px 0; border-bottom:1px dashed var(--line);
}
.simulator_content .recap li:last-child{border-bottom:0}
.simulator_content .recap li .num{
  flex:none; width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff;
  font-weight:700; font-size:.76rem; display:grid; place-items:center;
}
.simulator_content .recap li .q{color:var(--muted); flex:none}
.simulator_content .recap li .a{color:var(--ink); font-weight:700; width: 100%;}

.simulator_content .note{
  font-size:.85rem; color:var(--ink-soft); line-height:1.75;
  margin:26px 0 4px; padding:16px 16px; background:var(--paper-2); border-radius:var(--r-sm);
}
.simulator_content .note img{float: left; width:35px; height:35px; margin:1px 10px 0 0;}

@media (min-width:721px){
  .simulator_content .rplan-name span {justify-content: flex-start; gap: 10px;}
  .simulator_content .rplan-name span::after {width: 30px; height: 30px;}
  .simulator_content .rplan-body{padding:0 24px 0;}
  .simulator_content .recap li {gap: 14px; padding: 11px 0;}
  .simulator_content .recap li .a {width: auto;}
  .simulator_content .r-body{padding:12px 24px 4px;}
  .simulator_content .note {padding:22px 28px;}
  .simulator_content .note img{width: 50px; height: 50px; margin: 1px 16px 0 0; }
}

/* compare */
.simulator_content .compare-toggle{margin:30px 0 0; text-align:center}
.simulator_content .cmp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--teal); border:0; border-radius:999px; color:#fff;
  padding:0.95em 3.0em 1.1em; cursor:pointer; font-weight:700; font-size:1.25rem;
  box-shadow:0 8px 20px rgba(40,152,160,.28); width: auto;
}
.simulator_content .cmp-btn:hover{background:var(--teal-deep)}
.simulator_content .cmp-btn svg{width:23px; height:26px; transition:transform .3s ease}
.simulator_content .cmp-btn.open svg{transform:rotate(180deg)}
.simulator_content .compare{display:none; margin-top:22px; flex-direction:column; gap:14px}
.simulator_content .compare.show{display: flex;}
.simulator_content .pcard{
  display:grid; grid-template-columns: 178px auto; grid-template-rows: auto auto; column-gap: 15px; padding:10px 10px; border: 1px solid #E7E0D3; border-radius: var(--r-md); position:relative; box-shadow:var(--shadow-sm);
}
.simulator_content .pcard::before {content: ''; background: url(../img/simulator/icon_arrow_green.svg) no-repeat;  background-size: contain; width: 32px; height: 32px; position: absolute; top: 54%; right: 15px; transform: translateY(-50%);}
.simulator_content .pcard:last-child{border-bottom:0}
.simulator_content .pcard.best{
  border:1.5px solid var(--border-1); background:#fff;
}
.simulator_content .pcard-badge{
  position:absolute; top:-12px; left:32px; display:inline-flex; align-items:center; gap:5px;
  background:var(--pink); color:#fff; font-size:.9rem; font-weight:700; padding:4px 23px; border-radius:999px;
}
.simulator_content .pcard-badge img{width:21px; height:16px}
.simulator_content .pcard-thumb{width:178px; border-radius:var(--r-sm); overflow:hidden; grid-column: 1; grid-row: 1 / -1;}
.simulator_content .pcard-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.simulator_content .pcard-main{grid-column: 2; grid-row: 2;}
.simulator_content .pcard-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; grid-column: 2; grid-row: 1;}
.simulator_content .pcard-name{font-weight:700; color:var(--site-primary); font-size:1.1rem}
.simulator_content .pcard-price{font-size:.98rem; color:var(--teal); font-weight:700; white-space:nowrap}
.simulator_content .pcard-price b{font-size:1.3rem}
.simulator_content .pcard-desc{font-size:.86rem; color:var(--ink-soft); margin:0 0 10px; line-height:1.65; text-align: left;}
.simulator_content .pcard-tags{display:flex; flex-wrap:wrap; gap:8px}
.simulator_content .pcard-tags span{font-size:.74rem; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--teal-tint); color:var(--teal)}
.simulator_content .pcard-tags span.off{background:var(--paper-2); color:var(--muted)}

.simulator_content .actions{padding:26px 24px 54px; text-align:center}

.simulator_content .footnote{text-align:center; font-size:.78rem; color:var(--ink-soft); margin:22px 0 60px; line-height:1.8;}

@media (max-width:568px){
  .simulator_content .cmp-btn{font-size: 1.0rem; width: 100%; padding: 0.95em 0 1.1em;}
  .simulator_content .compare {gap: 18px;}
  .simulator_content .pcard {grid-template-columns: 40% 57%; grid-template-rows: auto auto; column-gap: 3%; padding: 8px 8px;}
  .simulator_content .pcard::before {width: 25px; height: 25px; top: 26px; transform: none;}
  .simulator_content .pcard-thumb{width:100%; grid-column: 1; grid-row: 1; border-radius: 8px;}
  .simulator_content .pcard-top {grid-column: 2;grid-row: 1; flex-direction: column; justify-content: center; gap: 2px;}
  .simulator_content .pcard-name {line-height: 1.25;text-align: left;}
  .simulator_content .pcard-price b {font-size: 1.15rem;}
  .simulator_content .pcard-main {grid-column: 1 / -1; grid-row: 2;}
  .simulator_content .pcard-desc {margin: 6px 0 8px;}
  .simulator_content .pcard-tags {gap: 5px;}
  .simulator_content .pcard-badge {font-size: 0.8rem; padding: 4px 12px; left: 5%;}
  .simulator_content .actions {padding: 16px 18px 35px;}
  
}

@media (max-width:568px){
  .simulator_content .inner:has(#intro.active) {width: 100%;}
  .simulator_content .intro_ttl{font-size:5.5vw; margin: 20px 0 14px 0.5em;}
  .simulator_content .intro_ttl .size {font-size: 1.2em;}
  .simulator_content .qtext{font-size:1.25rem; text-align: left;}
  .simulator_content .rplan-name{font-size:1.38rem; text-align: center; margin: 10px 0 0;}
  .simulator_content .rplan-price {text-align: center;}
  .simulator_content .rplan-price b {font-size: 1.6rem;}
  .simulator_content .rplan-why {font-size: 14px;}
  .simulator_content .r-eyebrow{font-size:1.2rem; gap: 10px;}
  .simulator_content .r-eyebrow::before, .simulator_content .r-eyebrow::after{width:24px}
  
  .simulator_content .footnote {text-align: left;margin-bottom: 40px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}
:focus-visible{outline:3px solid rgba(40,152,160,.55); outline-offset:2px; border-radius:8px}

/* CVエリア */
.simulator_content > .result-cv {
  display: none;
}
.simulator_content:has(#result.active) > .result-cv {
  display: block;
}
.simulator_content:has(#result.active) > .inner > .footnote {
  display: none;
}
.simulator_content:has(#intro.active) > .inner > .footnote {
  padding: 0 18px;
}
.simulator_content .copy {margin: 0;}