/* 住宅ローン シミュレータ — フロントスタイル
   すべて .lnsim-root 配下にスコープし、テーマと衝突しないようにする。 */

.lnsim-root{--lnsim-green:#1F6B54;--lnsim-accent:#F2994A;--lnsim-text:#2B3A35;--lnsim-sub:#6B756F;
  display:block;width:100%;margin:0 auto;max-width:940px;color:var(--lnsim-text);
  font-family:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo",sans-serif;
  line-height:1.6;-webkit-text-size-adjust:100%;}
.lnsim-root *{box-sizing:border-box;}
.lnsim-root [hidden]{display:none !important;}

/* テーマのコンテンツ枠が二重に見える場合、本ウィジェットを含む要素の枠線のみ打ち消す
   （本ウィジェットが設置されたページでのみ適用される） */
*:has(> .lnsim-root),
*:has(> * > .lnsim-root){
  border:0 !important;
  box-shadow:none !important;
}

.lnsim-ph{background:#FAF8F4;border:1px solid #E7E3DC;border-radius:22px;padding:18px 16px 22px;}

/* レイアウト：狭いときは1カラム（結果が上）。JSがウィジェットの実幅を測り、
   十分な幅があれば .lnsim-2col を付与して 入力=左 / 結果=右 の2カラムにする。
   結果の追従（スクロール固定）もJSで行うため、テーマのoverflow等の影響を受けにくい。 */
.lnsim-grid{display:block;}
.lnsim-root.lnsim-2col .lnsim-ph{padding:22px 24px 26px;}
.lnsim-root.lnsim-2col .lnsim-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;}
.lnsim-root.lnsim-2col .lnsim-main{grid-column:1;grid-row:1;min-width:0;}
.lnsim-root.lnsim-2col .lnsim-side{grid-column:2;grid-row:1;}
.lnsim-root.lnsim-2col .lnsim-side .lnsim-result{margin-bottom:0;}
.lnsim-root.lnsim-2col .lnsim-sec:first-child{margin-top:2px;}

.lnsim-kicker{font-size:13px;color:var(--lnsim-green);font-weight:600;margin:0 0 2px;}
.lnsim-title{font-size:20px;color:#22332E;font-weight:700;margin:0 0 12px;line-height:1.35;padding:0;border:0;}

/* 結果カード */
.lnsim-result{background:#fff;border:1.5px solid var(--lnsim-accent);border-radius:16px;padding:14px 15px 13px;margin:0 0 10px;outline:none;}
.lnsim-rlbl{font-size:12.5px;color:var(--lnsim-sub);margin:0 0 2px;}
.lnsim-hero{font-size:33px;color:#22332E;font-weight:700;line-height:1.12;font-variant-numeric:tabular-nums;}
.lnsim-hero small{font-size:15px;color:var(--lnsim-sub);font-weight:400;}
.lnsim-gnote{font-size:11px;color:#8A4B12;margin:4px 0 0;}
.lnsim-mrow{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:6px 0;border-top:1px solid #F0ECE4;margin-top:8px;gap:8px;}
.lnsim-mrow .l{color:var(--lnsim-sub);}
.lnsim-mrow .v{color:#22332E;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.lnsim-mrow .v.g{color:var(--lnsim-green);}
.lnsim-ref{font-size:11px;color:#9AA39E;margin:2px 0 0;}

/* 返済ペースゲージ */
.lnsim-gauge{margin-top:10px;}
.lnsim-gt{font-size:11px;color:var(--lnsim-sub);margin-bottom:5px;}
.lnsim-gbar{position:relative;height:12px;border-radius:6px;overflow:hidden;display:flex;}
.lnsim-gseg{height:100%;}
.lnsim-gmark{position:absolute;top:-2px;width:2px;height:16px;background:#22332E;border-radius:1px;}
.lnsim-gtick{position:absolute;top:15px;font-size:10px;color:#9AA39E;transform:translateX(-50%);white-space:nowrap;}
.lnsim-gv{font-size:12px;margin-top:20px;font-weight:600;}

.lnsim-bar{display:flex;height:12px;border-radius:6px;overflow:hidden;margin-top:11px;background:#EEEAE2;}
.lnsim-bar .p{background:var(--lnsim-green);}
.lnsim-bar .i{background:var(--lnsim-accent);}
.lnsim-leg{display:flex;gap:14px;font-size:10.5px;color:var(--lnsim-sub);margin-top:6px;flex-wrap:wrap;}
.lnsim-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;}

.lnsim-meta{font-size:11.5px;color:#7A837D;background:#F1EEE8;border-radius:9px;padding:8px 11px;margin:0 0 14px;line-height:1.55;}

.lnsim-sec{font-size:13px;color:var(--lnsim-green);font-weight:600;margin:16px 2px 8px;}

.lnsim-card{background:#fff;border:1px solid #E7E3DC;border-radius:13px;padding:11px 12px;margin:0 0 10px;}
.lnsim-lbl{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#3D4A45;font-weight:600;}
.lnsim-lbl.mt{margin-top:12px;}
.lnsim-lbl .sp{flex:1;}
.lnsim-q{width:19px;height:19px;border-radius:50%;background:#E6F2EC;color:var(--lnsim-green);border:none;font-size:11px;font-weight:700;cursor:pointer;line-height:1;flex:0 0 auto;padding:0;}
.lnsim-q:hover{background:#D6E9DE;}

.lnsim-valrow{display:flex;align-items:baseline;gap:6px;margin:9px 0 7px;}
.lnsim-bignum{font-size:24px;font-weight:700;color:var(--lnsim-green);border:none;border-bottom:1.5px dashed #CFE0D6;background:transparent;width:130px;text-align:left;font-variant-numeric:tabular-nums;padding:2px 0;border-radius:0;}
.lnsim-bignum:focus{outline:none;border-bottom-color:var(--lnsim-green);}
.lnsim-bigunit{font-size:14px;color:var(--lnsim-sub);}

.lnsim-rng{width:100%;accent-color:var(--lnsim-green);height:26px;display:block;cursor:pointer;margin:0;}
.lnsim-mm{display:flex;justify-content:space-between;font-size:10.5px;color:#9AA39E;margin-top:0;}

.lnsim-tip{font-size:12px;color:#4A5751;background:#F4EFE7;border-radius:9px;padding:9px 11px;margin:9px 0 2px;line-height:1.6;}
.lnsim-more{color:var(--lnsim-green);font-size:12px;font-weight:600;cursor:pointer;display:inline-block;margin-top:6px;}
.lnsim-deep{font-size:12px;color:#4A5751;margin-top:7px;padding-top:7px;border-top:1px dashed #E0D8CC;line-height:1.65;}

.lnsim-selrow{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 4px;}
.lnsim-opt{border:1.5px solid #E7E3DC;background:#fff;border-radius:20px;padding:6px 12px;font-size:12.5px;color:#5A635E;cursor:pointer;font-family:inherit;line-height:1.3;}
.lnsim-opt.is-on{border-color:var(--lnsim-green);background:#E6F2EC;color:var(--lnsim-green);font-weight:700;}
.lnsim-opt.pill{padding:5px 12px;border-radius:20px;}

.lnsim-field{display:flex;align-items:center;gap:8px;margin:9px 0 3px;flex-wrap:wrap;}
.lnsim-field.spread{justify-content:space-between;}
.lnsim-field label{font-size:12.5px;color:#5A635E;}
.lnsim-ratenum{width:78px;font-size:15px;font-weight:700;color:var(--lnsim-green);text-align:right;border:1px solid #E0DBD2;border-radius:8px;padding:6px 8px;font-family:inherit;}
.lnsim-numin{width:96px;font-size:15px;font-weight:600;color:var(--lnsim-green);text-align:right;border:1px solid #E0DBD2;border-radius:8px;padding:6px 8px;font-family:inherit;}
.lnsim-period{font-size:13px;padding:6px 8px;border:1px solid #E0DBD2;border-radius:8px;background:#fff;color:#3D4A45;font-family:inherit;}

.lnsim-refnote{margin:7px 0 0;font-size:12px;color:#4A5751;line-height:1.6;}
.lnsim-reftbl{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:6px;}
.lnsim-reftbl th,.lnsim-reftbl td{text-align:left;padding:4px 6px;border-bottom:1px solid #ECE6DC;color:#5A635E;}
.lnsim-reftbl th{color:#8A938D;font-weight:600;}

/* 金利上昇シナリオ */
.lnsim-scen{background:#FBF6EE;border:1px solid #EFE3CF;border-radius:12px;padding:11px 12px;margin:0 0 10px;}
.lnsim-st{font-size:12.5px;color:#8A4B12;font-weight:700;margin:0 0 3px;}
.lnsim-sd{font-size:11.5px;color:#7A6A50;margin:0 0 8px;line-height:1.5;}
.lnsim-scg{display:flex;gap:8px;}
.lnsim-scg>div{flex:1;background:#fff;border-radius:9px;padding:7px 6px;text-align:center;border:1px solid #EFE3CF;}
.lnsim-scg .d{font-size:11px;color:#8A4B12;}
.lnsim-scg .m{font-size:14px;color:#22332E;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;}

.lnsim-two{display:flex;gap:8px;margin-top:9px;}
.lnsim-two .lnsim-opt{flex:1;text-align:center;border-radius:11px;padding:9px 6px;}
.lnsim-two .lnsim-opt b{display:block;font-size:12.5px;}
.lnsim-two .lnsim-opt span{display:block;font-size:10px;color:#8A938D;margin-top:1px;font-weight:400;}
.lnsim-two .lnsim-opt.is-on span{color:#3B8168;}

.lnsim-coll{background:#fff;border:1px dashed #D9D2C6;border-radius:12px;margin:0 0 10px;overflow:hidden;}
.lnsim-collh{display:flex;align-items:center;gap:8px;font-size:13px;color:#3D4A45;font-weight:600;padding:12px 13px;cursor:pointer;}
.lnsim-collh .sp{flex:1;}
.lnsim-collh .cv{color:#9AA39E;font-size:12px;}
.lnsim-collb{padding:0 13px 13px;}

.lnsim-hint{font-size:11.5px;color:var(--lnsim-green);background:#EAF3EC;border-radius:8px;padding:7px 10px;margin:8px 0 0;}
.lnsim-hint b{font-weight:700;}

.lnsim-row-borrow{margin-top:12px;padding-top:11px;border-top:1px dashed #E7E0D4;}
.lnsim-rverdict{font-size:12px;font-weight:700;margin-top:7px;}
.lnsim-borrowline{font-size:14px;color:#3D4A45;margin-top:7px;}
.lnsim-borrowline b{font-size:19px;color:var(--lnsim-green);font-variant-numeric:tabular-nums;}
.lnsim-disc{display:flex;gap:8px;background:#FBF0E2;border-radius:11px;padding:10px 12px;margin:9px 0 0;font-size:11.5px;color:#7A4E1B;line-height:1.6;}
.lnsim-disc::before{content:"i";flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:#E9C79A;color:#7A4E1B;font-weight:700;font-style:italic;text-align:center;line-height:16px;font-size:11px;}

.lnsim-warn{font-size:11.5px;color:#8A4B12;background:#FBF0E2;border-radius:8px;padding:7px 10px;margin-top:8px;line-height:1.5;}

.lnsim-foot{font-size:11px;color:#9AA39E;text-align:center;margin:16px 4px 2px;line-height:1.6;}

.lnsim-cta-wrap{margin-top:14px;}
.lnsim-cta{display:block;width:100%;background:var(--lnsim-accent);color:#fff;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;margin:0 0 8px;text-align:center;text-decoration:none;}
.lnsim-cta:hover{background:#E4893C;color:#fff;}
.lnsim-cta2{display:block;width:100%;background:#fff;color:var(--lnsim-green);border:1.5px solid var(--lnsim-green);border-radius:12px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;text-align:center;text-decoration:none;}
.lnsim-cta2:hover{background:#F0F7F3;color:var(--lnsim-green);}

/* 1カラム時のみ「結果を確認する↑」ボタンを最下部に通常配置で表示
   （2カラム時は結果がスクロール追従するため不要）。画面固定ではない。 */
.lnsim-scroll-btn{display:none;}
.lnsim-root:not(.lnsim-2col) .lnsim-scroll-btn{display:block;width:100%;margin:16px 0 2px;
  background:var(--lnsim-green);color:#fff;border:none;border-radius:12px;
  padding:13px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;text-align:center;}
.lnsim-root:not(.lnsim-2col) .lnsim-scroll-btn:active{opacity:.9;}

@media (prefers-reduced-motion:reduce){
  .lnsim-root *{scroll-behavior:auto !important;}
}