@charset "utf-8";

/* ============================================================
   ヘッダー・レイアウト
============================================================ */
/* 下部ナビゲーションを非表示にする */
.header_lower {
    display: none !important;
}

.simulationInner {
    width: 1200px;
    margin: 0 auto;
    padding: 0 407px 0 0;
}

.comparisonInner {
    width: 1200px;
    margin: 0 auto;
}

.containerInner {
    width: 793px;
}

:is(.general-btn, .main-btn)+:is(.general-btn, .main-btn, .border-btn) {
    margin-top: 16px;
}

/* ============================================================
   キャッチコピー
============================================================ */
.simulationCatch {
    position: relative;
    text-align: center;
    color: var(--color-main);
    width: fit-content;
    margin: 0 auto;
}

.simulationCatch>small {
    line-height: 1.5;
}

.simulationSubtitle.simulationCatch>small+strong {
    margin-top: 0;
}

.simulationCatch::before,
.simulationCatch::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 90%;
    background-color: var(--color-main);
}

.simulationCatch::before {
    left: -20px;
    transform: rotate(-30deg);
}

.simulationCatch::after {
    right: -20px;
    transform: rotate(30deg);
}

.otokuHeading {
    display: flex;
    align-items: flex-end;
}

.otokuHeading strong {
    line-height: 1;
}

/* ============================================================
   結果テーブル
============================================================ */
.resultWrapper {
    margin-top: 64px;
}

.resultItem+.resultItem {
    margin-top: 40px;
}

.resultTable {
    border-top: 1px solid #888888;
    margin-top: 24px;
    font-size: 16px;
}

.resultTable_row {
    display: flex;
    border-bottom: 1px solid #888888;
}

.resultTable_label {
    width: 264px;
    padding: 16px;
    background-color: #F2F2F2;
    font-weight: bold;
    border-left: 1px solid #888888;
    border-right: 1px solid #888888;
}

.resultTable_value {
    flex-grow: 1;
    padding: 16px;
    text-align: right;
    border-right: 1px solid #888888;
}

.resultTable_value.highlight {
    color: #E40000;
    font-weight: bold;
}

.attention_list:not(:empty) {
    margin-top: 16px;
    font-size: 12px;
}

/* ============================================================
   おトク情報
============================================================ */
.resultOtoku {
    margin-top: 64px;
}

.simulationCaption {
    font-size: 24px;
    font-weight: bold;
}

.resultOtoku .simulationCaption {
    color: var(--color-main);
    text-align: center;
    font-size: 32px;
}

.resultOtoku .simulationCaption>small {
    font-size: 16px;
    font-weight: bold;
}

.resultOtoku .simulationCaption>strong {
    font-weight: bold;
}

/* ============================================================
   月額料金見積もり
============================================================ */
.estimateMonthlyFee .simulationCaption {
    text-align: center;
}

.estimateMonthlyFee_amount {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 4px;
    font-size: 32px;
    font-weight: bold;
    color: #E40000;
    line-height: 1;
}

.estimateMonthlyFee_amount small {
    font-size: 0.5em;
    display: flex;
    justify-content: center;
    gap: 0 4px;
    font-weight: inherit;
}

.estimateMonthlyFee_amount :is(small, strong) {
    font-weight: inherit;
}

/* ============================================================
   端末情報
============================================================ */
.estimateDevice {
    display: flex;
    gap: 0 10px;
}

.estimateDevice_img {
    width: 116px;
    flex-shrink: 0;
}

.estimateDevice_info {
    flex-grow: 1;
    color: #666666;
}

.estimateDevice_maker {
    font-size: 14px;
}

.estimateDevice_name {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

.estimateDevice_specs_row {
    display: flex;
    font-size: 14px;
}

.estimateDevice_specs_row dt {
    flex-shrink: 0;
}

.estimateDevice_specs_row dt,
.estimateDevice_specs_row dd {
    line-height: calc(16 / 12);
}

/* ============================================================
   見積もりカード・リスト
============================================================ */
.estimateList {
    margin-top: 40px;
}

.estimateDevice+.estimateCard {
    margin-top: 40px;
}

.estimateList .estimateCard {
    border: solid 2px #AAAAAA;
    padding: 40px;
}

.estimateList .estimateCard+.estimateCard {
    margin-top: 24px;
}

.estimateCard .simulationBtnWrapper {
    flex-wrap: wrap;
}

.estimateList .simulationCaption {
    font-size: 32px;
}

/* ============================================================
   見積もり詳細テーブル
============================================================ */
.estimateGroup {
    margin-top: 24px;
}

.estimateDetail {
    margin-top: 24px;
}

.estimateItem {
    margin-top: 24px;
}

.estimateHeading {
    font-size: 16px;
    font-weight: bold;
}

.estimateTable {
    border-top: 1px solid #CCCCCC;
    margin-top: 16px;
    font-size: 14px;
}

.estimateTable_row {
    display: flex;
    border-bottom: 1px solid #CCCCCC;
}

.estimateTable_row.highlight .estimateTable_label,
.estimateTable_row.highlight .estimateTable_value {
    color: #E40000;
}

.estimateTable_label {
    width: 593px;
    padding: 16px;
    padding-left: 20px;
}

.estimateTable_label:only-child,
.estimateScrollItem .estimateTable_label:only-child {
    width: 100%;
}

.estimateCard .estimateTable_label {
    width: 513px;
}

.estimateTable_value {
    flex-grow: 1;
    padding: 16px;
    padding-right: 20px;
    text-align: right;
}

/* ============================================================
   横スクロールカード
============================================================ */
.estimateScroller {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 21px;
    margin-top: 40px;
}

.estimateScrollItem {
    flex-shrink: 0;
    width: 386px;
    border: solid 2px #AAAAAA;
    padding: 40px;
}

.estimateScrollItem .estimateGroup {
    margin-top: 24px;
}

.estimateScrollItem .estimateGroup+.estimateGroup {
    margin-top: 24px;
}

.estimateScrollItem .estimateTable_label {
    width: 187px;
}

.estimateScrollItem .estimateTable_value {
    padding-left: 0;
}

.estimateScrollItem .simulationBtnWrapper {
    margin-top: 40px;
    display: block;
}

.estimateScrollItem :is(.general-btn, .main-btn) {
    width: 100%;
    cursor: pointer;
}

.estimateScrollItem .estimateDevice {
    margin-top: 40px;
}

.estimateScrollItem .estimateMonthlyFee+.main-btn {
    margin-top: 24px;
}

.estimateScrollItem .border-btn {
    width: 100%;
    max-width: 266px;
    margin-top: 24px;
}

/* ============================================================
   スクロール追従情報（結果ページ用）
============================================================ */
.stickyIndication_monthlyFeeWrap {
    flex-grow: 1;
}

.stickyIndication_monthlyFee {
    display: flex;
    gap: 10px;
    font-weight: bold;
}

.stickyIndication_monthlyFee span {
    font-weight: inherit;
}

.stickyIndication_monthlyFee_total {
    flex-grow: 1;
    font-size: 14px;
    color: #E40000;
    text-align: right;
}

.stickyIndication_monthlyFee_total .highlight {
    font-size: 20px;
}

button.mobile-btn.stickyIndication_order {
    width: 100%;
    font-size: 14px;
    margin: 24px auto 0;
}

.stickyIndication_monthlyFee_detail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: bold;
    width: fit-content;
    height: auto;
    border: none;
}

.stickyIndication_monthlyFee_detail::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-25%);
}

/* ============================================================
   モーダル
============================================================ */
.saveModal_overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: #00000080;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.saveModal {
    width: 800px;
    background-color: #fff;
    padding: 64px 40px;
    position: relative;
}

.saveModal_text {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
}

.saveModal_btnWrap {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.border-btn.saveModal_btn {
    width: 100%;
    max-width: 346px;
}

.saveModal_btnWrap :is(.general-btn, .main-btn)+:is(.general-btn, .main-btn, .border-btn) {
    margin-top: 48px;
}

.saveModal_close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background-color: #333;
    cursor: pointer;
}

.saveModal_close::before,
.saveModal_close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background-color: #fff;
}

.saveModal_close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.saveModal_close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ============================================================
   保存・比較エラー
============================================================ */
.saveCompareError {
    color: #e40000;
    font-size: 12px;
    margin-top: 8px;
}