@charset "UTF-8";
 .sim-page { color: #2a2a2a; }
.sim-page p { line-height: 1.8; }
.sim-page *,
.sim-page *::before,
.sim-page *::after { box-sizing: border-box; }
.sim-title {
margin: 0 0 8px;
color: #2a2a2a;
font-size: 150%;
font-weight: 700;
line-height: 1.4;
}
.sim-page .sim-lead { margin: 0 0 16px; }
.sim-page .sim-month { margin: 0 0 10px; color: #4a525c; font-size: 85.7%; line-height: 1.6; }
.sim-month span {
display: inline-block;
margin-right: 6px;
padding: 2px 10px;
background: #1770a5;
border-radius: 4px;
color: #fff;
font-weight: 700;
}
.sim-alert {
margin: 0 0 18px;
padding: 14px 16px;
background: #fff6f5;
border: 1px solid #f5cdc9;
border-left: 4px solid #e00000;
border-radius: 8px;
}
.sim-page .sim-alert-title { margin: 0 0 4px; color: #e00000; font-weight: 700; line-height: 1.5; }
.sim-page .sim-alert-text { margin: 0; font-size: 92%; line-height: 1.7; }
.sim-caution { color: #e00000; font-weight: 700; } .sim-form {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px 20px;
margin: 0 0 28px;
padding: 18px 20px 20px;
background: #f3f8fc;
border: 1px solid #d4e3ef;
border-radius: 10px;
}
.sim-page .sim-step {
display: flex;
grid-column: 1 / -1;
align-items: center;
gap: 8px;
margin: 4px 0 -4px;
color: #426fa6;
font-weight: 700;
line-height: 1.5;
}
.sim-page .sim-step:not(:first-child) { margin-top: 10px; padding-top: 16px; border-top: 1px dashed #c9dbea; }
.sim-step span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #426fa6;
border-radius: 50%;
color: #fff;
font-size: 85%;
line-height: 1;
}
.sim-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.sim-wide { grid-column: 1 / -1; }
.sim-field legend,
.sim-label {
display: block;
margin: 0 0 8px;
padding: 0;
color: #2a2a2a;
font-weight: 700;
line-height: 1.5;
}
.sim-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.sim-seg label { position: relative; display: block; margin: 0; cursor: pointer; }
.sim-seg input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sim-seg span {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 6px 4px;
background: #fff;
border: 1px solid #c3d5e3;
border-radius: 6px;
color: #2a2a2a;
font-size: 92%;
font-weight: 500;
line-height: 1.3;
text-align: center;
transition: background-color .15s, border-color .15s, color .15s;
}
.sim-seg label:hover span { border-color: #1770a5; }
.sim-seg input:checked + span { background: #1770a5; border-color: #1770a5; color: #fff; font-weight: 700; }
.sim-seg input:focus-visible + span,
.sim-input input:focus-visible,
.sim-range:focus-visible,
.sim-check input:focus-visible { outline: 2px solid #0f4c73; outline-offset: 2px; }
.sim-input { display: flex; align-items: center; gap: 6px; }
.sim-input input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
height: 48px;
margin: 0;
padding: 0 10px;
background: #fff;
border: 1px solid #c3d5e3;
border-radius: 6px;
color: #0f4c73;
font: inherit;
font-size: 125%;
font-weight: 700;
text-align: right;
}
.sim-input input[aria-invalid="true"] { border-color: #e00000; }
.sim-input span { flex: none; font-weight: 500; }
.sim-range {
display: block;
width: 100%;
height: 28px;
margin: 8px 0 0;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.sim-range::-webkit-slider-runnable-track {
height: 6px;
border-radius: 3px;
background: linear-gradient(to right, #1770a5 var(--sim-pct, 50%), #d3e1ec var(--sim-pct, 50%));
}
.sim-range::-webkit-slider-thumb {
width: 24px;
height: 24px;
margin-top: -9px;
background: #fff;
border: 2px solid #1770a5;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(15, 76, 115, .25);
-webkit-appearance: none;
appearance: none;
}
.sim-range::-moz-range-track { height: 6px; background: #d3e1ec; border-radius: 3px; }
.sim-range::-moz-range-progress { height: 6px; background: #1770a5; border-radius: 3px; }
.sim-range::-moz-range-thumb {
width: 24px;
height: 24px;
background: #fff;
border: 2px solid #1770a5;
border-radius: 50%;
}
.sim-page .sim-err { margin: 4px 0 0; color: #e00000; font-size: 85.7%; line-height: 1.5; }
.sim-err[hidden],
.sim-cost-custom[hidden] { display: none; } .sim-cost-est:not(:empty) { margin: 12px 0 0; padding: 12px 14px; background: #fff; border: 1px solid #d4e3ef; border-radius: 8px; }
.sim-cost-list {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px 16px;
margin: 0;
font-size: 92%;
line-height: 1.6;
}
.sim-cost-list dt { margin: 0; color: #4a525c; font-weight: 400; }
.sim-cost-list dd { margin: 0; text-align: right; white-space: nowrap; }
.sim-cost-list .sim-cost-total { margin-top: 4px; padding-top: 6px; border-top: 1px solid #d4e3ef; color: #0f4c73; font-weight: 700; }
.sim-page .sim-cost-note { margin: 8px 0 0; color: #6b7682; font-size: 85.7%; line-height: 1.6; }
.sim-cost-custom { max-width: 280px; margin: 12px 0 0; }
.sim-check { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-weight: 500; cursor: pointer; }
.sim-check input { width: 20px; height: 20px; margin: 0; accent-color: #1770a5; } .sim-output { min-height: 480px; }
.sim-summary {
margin: 0 0 14px;
padding: 0 0 8px;
border-bottom: 2px solid #1770a5;
color: #2a2a2a;
font-size: 120%;
font-weight: 700;
line-height: 1.5;
}
.sim-now {
margin: 0 0 10px;
padding: 14px 16px;
background: #f6f8fa;
border: 1px solid #e1e7ed;
border-radius: 10px;
}
.sim-page .sim-now-title { margin: 0 0 8px; color: #4a525c; font-size: 92%; font-weight: 700; line-height: 1.5; }
.sim-now-nums { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr; gap: 10px; }
.sim-page .sim-headline {
margin: 0 0 22px;
padding: 12px 14px;
background: #fff8ec;
border: 1px solid #f2d39d;
border-radius: 8px;
font-weight: 700;
line-height: 1.7;
}
.sim-metric { min-width: 0; }
.sim-metric-label { display: block; color: #6b7682; font-size: 78%; line-height: 1.5; }
.sim-metric-value { display: block; color: #2a2a2a; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.sim-metric-main .sim-metric-value { color: #0f4c73; font-size: 130%; }
.sim-metric-main.sim-plus .sim-metric-value { color: #d4380d; }
.sim-metric-main.sim-minus .sim-metric-value { color: #6b7682; }
.sim-sub { display: block; color: #6b7682; font-size: 72%; font-weight: 400; line-height: 1.5; } .sim-pr { margin: 0 0 28px; }
.sim-page .sim-pr-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; }
.sim-pr-badge {
padding: 1px 8px;
background: #ef4f68;
border-radius: 4px;
color: #fff;
font-size: 78%;
font-weight: 700;
line-height: 1.6;
}
.sim-pr-card {
margin: 0 0 14px;
padding: 16px;
background: #fff;
border: 1px solid #dde6ee;
border-top: 3px solid #ef4f68;
border-radius: 10px;
box-shadow: 0 1px 4px rgba(15, 76, 115, .08);
}
.sim-pr-head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.sim-pr-logo { flex: none; width: 110px; height: auto; max-height: 44px; object-fit: contain; }
.sim-pr-title { min-width: 0; }
.sim-pr-nums { display: grid; grid-template-columns: 1fr 1.2fr 1.4fr; gap: 10px; margin: 0 0 12px; }
.sim-page .sim-pr-none { margin: 0 0 12px; color: #6b7682; font-size: 85.7%; }
.sim-page .sim-pr-fixnote { margin: -4px 0 10px; color: #1770a5; font-size: 85.7%; font-weight: 700; line-height: 1.6; }
.sim-page .sim-pr-prompt { margin: 0 0 10px; font-size: 85.7%; font-weight: 500; line-height: 1.6; }
.sim-benefit { margin: 0 0 12px; padding: 12px 14px; background: #eef6fc; border-radius: 8px; }
.sim-page .sim-benefit-title { margin: 0 0 6px; color: #1770a5; font-size: 85.7%; font-weight: 700; line-height: 1.5; }
.sim-page .sim-benefit-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 14px;
margin: 0;
padding: 0;
list-style: none;
}
.sim-page .sim-benefit-list li {
position: relative;
margin: 0;
padding: 0 0 0 18px;
background: none;
border: 0;
font-size: 85.7%;
line-height: 1.6;
list-style: none;
}
.sim-benefit-list li::before {
content: "";
position: absolute;
left: 3px;
top: .4em;
width: 5px;
height: 9px;
border: solid #1770a5;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.sim-page .sim-benefit-note { margin: 6px 0 0; color: #6b7682; font-size: 78%; line-height: 1.6; }
.sim-pr-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; }
.sim-page .sim-pr-foot p { margin: 0; }
.sim-page .sim-pr-more { color: #1770a5; font-size: 85.7%; } .sim-page .sim-btn { width: 270px; max-width: 100%; margin: 0; }
.sim-btn a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 8px 32px 8px 16px;
background: #d9700a;
border-radius: 6px;
box-shadow: 0 2px 0 #a85606;
color: #fff;
font-weight: 700;
line-height: 1.4;
text-align: center;
text-decoration: none;
transition: background-color .15s;
}
.sim-btn a::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
width: 7px;
height: 7px;
margin-top: -4px;
border: solid #fff;
border-width: 2px 2px 0 0;
transform: rotate(45deg);
}
.sim-btn a:hover { background: #c46206; color: #fff; }
.sim-btn a:focus-visible { outline: 2px solid #0f4c73; outline-offset: 2px; } .sim-list-title { margin: 0 0 8px; font-size: 110%; font-weight: 700; line-height: 1.5; }
.sim-list-title small { margin-left: 8px; color: #6b7682; font-size: 78%; font-weight: 400; }
.sim-page .sim-list-note { margin: 0 0 8px; color: #6b7682; font-size: 85.7%; line-height: 1.6; }
.sim-page .sim-empty { padding: 16px; background: #f3f8fc; border-radius: 8px; text-align: center; }
.sim-page .sim-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.sim-page .sim-table th {
padding: 10px 8px;
background: #eaf3fa;
border: 0;
color: #0f4c73;
font-size: 78%;
font-weight: 700;
text-align: right;
white-space: nowrap;
}
.sim-page .sim-table th:nth-child(1) { text-align: center; }
.sim-page .sim-table th:nth-child(2) { text-align: left; }
.sim-page .sim-table td {
padding: 12px 8px;
background: none;
border: 0;
border-bottom: 1px solid #e3eaf0;
font-size: 92%;
text-align: right;
vertical-align: middle;
white-space: nowrap;
}
.sim-page .sim-table tbody tr:hover td { background: #f7fafd; }
.sim-page .sim-table td.sim-rank { width: 2.2em; color: #6b7682; font-weight: 700; text-align: center; }
.sim-page .sim-table td.sim-name { text-align: left; white-space: normal; }
.sim-page .sim-table .sim-row-client td { background: #fff8f0; }
.sim-bank { display: block; font-weight: 700; line-height: 1.5; }
.sim-product { display: block; color: #6b7682; font-size: 78%; line-height: 1.5; }
.sim-page .sim-row-link { display: inline-block; margin: 4px 0 0; color: #d9700a; font-size: 78%; font-weight: 700; line-height: 1.5; }
.sim-monthly-value { display: block; color: #0f4c73; font-weight: 700; }
.sim-merit-value { display: block; font-size: 112%; font-weight: 700; }
.sim-plus .sim-merit-value { color: #d4380d; }
.sim-minus .sim-merit-value { color: #6b7682; }
.sim-sub.sim-down { color: #1770a5; } .sim-cta {
margin: 24px 0;
padding: 18px 20px;
background: #f3f8fc;
border-radius: 10px;
text-align: center;
}
.sim-page .sim-cta-text { margin: 0 0 12px; }
.sim-cta-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.sim-cta-item {
display: flex;
flex-direction: column;
min-width: 0;
padding: 10px 12px;
background: #fff;
border: 1px solid #dde6ee;
border-radius: 6px;
}
.sim-page .sim-cta-name { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; font-weight: 700; line-height: 1.5; }
.sim-page .sim-cta-desc { margin: 0 0 8px; font-size: 85.7%; line-height: 1.6; }
.sim-page .sim-cta-item .sim-btn { width: 100%; margin: auto 0 0; } .sim-notes-title { margin: 24px 0 8px; font-size: 110%; font-weight: 700; }
.sim-page .sim-notes-lead { margin: 0 0 10px; }
.sim-page .sim-notes { margin: 0 0 30px; padding-left: 1.3em; font-size: 85.7%; line-height: 1.8; }
.sim-page .sim-notes li { margin: 0 0 4px; list-style: disc; }
@media screen and (max-width: 949px) {
.sim-page { margin-bottom: 20px; }
}
@media screen and (max-width: 599px) {
.sim-title { font-size: 125%; }
.sim-form { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
.sim-seg-5 { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sim-seg-5 label { grid-column: span 2; }
.sim-seg-5 label:nth-child(n+4) { grid-column: span 3; }
.sim-cost-custom { max-width: none; }
.sim-now-nums { grid-template-columns: 1fr 1fr; }
.sim-now-nums .sim-metric-main { grid-column: 1 / -1; }
.sim-pr-nums { grid-template-columns: 1fr 1fr; }
.sim-pr-nums .sim-metric-main { grid-column: 1 / -1; grid-row: 1; }
.sim-page .sim-benefit-list { grid-template-columns: minmax(0, 1fr); }
.sim-page .sim-pr-foot p { width: 100%; }
.sim-cta-links { grid-template-columns: minmax(0, 1fr); }
.sim-page .sim-table thead { display: none; }
.sim-page .sim-table, .sim-page .sim-table tbody { display: block; width: 100%; }
.sim-page .sim-table tr {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
margin: 0 0 10px;
padding: 12px;
border: 1px solid #dde6ee;
border-radius: 8px;
}
.sim-page .sim-table .sim-row-client { background: #fff8f0; }
.sim-page .sim-table td,
.sim-page .sim-table .sim-row-client td,
.sim-page .sim-table tbody tr:hover td { display: block; padding: 0; background: none; border: 0; text-align: left; white-space: normal; }
.sim-page .sim-table td.sim-rank {
grid-column: 1 / -1;
width: auto;
margin: 0 0 2px;
font-size: 78%;
text-align: left;
}
.sim-page .sim-table td.sim-rank::before { content: "第"; }
.sim-page .sim-table td.sim-rank::after { content: "位"; }
.sim-page .sim-table td.sim-name { grid-column: 1 / -1; margin: 0 0 8px; }
.sim-page .sim-table td.sim-merit {
display: flex;
grid-column: 1 / -1;
flex-wrap: wrap;
align-items: baseline;
gap: 0 8px;
order: 1;
margin: 0 0 8px;
padding: 8px 0;
border-top: 1px solid #e3eaf0;
border-bottom: 1px solid #e3eaf0;
}
.sim-page .sim-table td.sim-merit::before { content: attr(data-label); margin-right: auto; color: #6b7682; font-size: 85.7%; }
.sim-page .sim-table td.sim-merit .sim-sub { flex-basis: 100%; text-align: right; }
.sim-merit-value { font-size: 130%; }
.sim-page .sim-table td.sim-rate,
.sim-page .sim-table td.sim-monthly { order: 2; font-size: 85.7%; }
.sim-page .sim-table td.sim-rate::before,
.sim-page .sim-table td.sim-monthly::before {
content: attr(data-label);
display: block;
color: #6b7682;
font-size: 85%;
line-height: 1.5;
}
}