@charset "utf-8";
/*---------------------------------------------------------------------
PC Style
pc.css
-----------------------------------------------------------------------
Copyright 2026 (c) linkpath Allrights Reserved.
Coding: Hinako Hayashi
Last Update: 2026.04.07
---------------------------------------------------------------------*/
/*===========================================================
    root
===========================================================*/
:root {
    --color-protect: rgb(13, 112, 203);
    --color-plus: rgb(220, 34, 34);
    --color-protect__transparent: rgba(13, 112, 203, 0.2);
    --color-plus__transparent: rgba(220, 34, 34, 0.2);
}
/*===========================================================
    font-size
===========================================================*/
.section-title-wrap h2 {
    font-size: 500%;
}
.tab-nav-btn {
    font-size: 150%;
}
.warranty-list li {
    font-size: 130%;
}
.tab-content .link-btn,
.plan-content-title,
.plan-item-name {
    font-size: 120%;
}

.plan-item-btn {
    font-size: 110%;
}
.warranty-notes,
.plan-content-badge,
.plan-item-type-label,
.plan-item-detail-text {
    font-size: 90%;
}
.tab-nav-btn small,
.plan-item-name small {
    font-size: 80%;
}


.price-modal-title {
    font-size: 130%;
}
.price-modal-subtitle {
    font-size: 110%;
}
.price-modal-badge {
    font-size: 100%;
}
.price-modal-condition-label,
.price-modal-summary-label {
    font-size: 100%;
}
.price-modal-condition-note,
.price-modal-extra p,
.price-modal-summary-text,
.price-table th,
.price-table td {
    font-size: 90%;
}
.price-modal-foot {
    font-size: 80%;
}
.price-tag {
    font-size: 80%;
}

.condition-label,
.condition-text {
    font-size: 100%;
}

.coverage-group-title {
    font-size: 120%;
}
.coverage-group-subtitle {
    font-size: 70%;
}
.coverage-item-name,
.coverage-mark-sep {
    font-size: 90%;
}

.support-office-title {
    font-size: 120%;
}
.support-step-title {
    font-size: 110%;
}
.support-tel {
    font-size: 150%;
}
.support-badge {
    font-size: 80%;
}
.support-step-body p,
.support-note {
    font-size: 90%;
}
a.support-tel {
    font-size: clamp(1rem, 3vw, 2rem);
    font-size: clamp(1rem, 3svw, 2rem);
}
/*===========================================================
    parts
===========================================================*/
/* section */
.tab-content section {
    display: flex;
    flex-direction: column;
    gap: 3em;
}

/* section-title-wrap */
.section-title-wrap {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 2em;
}
.section-title-wrap h2 {
    text-wrap: nowrap;
    letter-spacing: 0.05em;
    font-weight: 700;
}
.section-title-wrap p {
    border-radius: 200px;
    padding: 0.5em 1em;
}
.tab-content article:has(.section-title) {
    padding-bottom: 0;
}

/* notes-box */
.notes-box {
    max-width: 50rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    border-radius: 1em;
    padding: 1.5em;
    margin: 0 auto;
}

.notes-box li {
    width: fit-content;
}

/* 注意書きの見出し（保証に含まれない費用／ご留意事項） */
.notes-box-title {
    width: fit-content;
    font-weight: bold;
    display: block;
    border-radius: 200px;
    padding: 0.5em 1em;
    margin: 0;
}

/* 注意書きのリスト全体 */
.notes-box-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0;
    padding: 0;
}

/* 注意書きの各項目：先頭に「・」を疑似要素で付与 */
.notes-box-list li {
    color: var(--color-main);
    font-size: 0.875rem;
    line-height: 1.6;
    display: block;
    list-style: none;
    padding-left: 1.2em;
    position: relative;
}

.notes-box-list li::before {
    content: "・";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

/* 「※1」等、行頭に既に記号がある場合は「・」マーカーを消す */
.notes-box-list.is-plain li {
    padding-left: 0;
}

.notes-box-list.is-plain li::before {
    content: none;
}

/*===========================================================
    tab-nav
===========================================================*/
/* タブナビゲーション全体 */
.tab-nav {
    display: flex;
    position: sticky;
    left: 0;
    top: 5em;
    z-index: 20;
}

/* タブボタン共通 */
.tab-nav-btn {
    width: 50%;
    color: #999;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-lightgrey);
    border: none;
    border-bottom: 0.3rem solid transparent;
    padding: 0.75rem 0.5rem;
    margin: 0;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

/* タブボタン内の補足テキスト（中古車保証／新車延長保証） */
.tab-nav-btn small {
    width: fit-content;
    color: var(--color-base);
    font-weight: normal;
    display: block;
    border-radius: 200px;
    padding: 0.5em 1em;
    opacity: 0.7;
    transition: all 0.3s;
}

/* 選択中のタブボタン：wrapのクラスと連動せずボタン自身のis-activeで管理 */
.tab-nav-btn.is-active {
    color: #333;
    background: var(--color-base);
}
.tab-nav-btn.is-active small {
    opacity: 1;
}

/*===========================================================
    tab-content
===========================================================*/
/* タブコンテンツのラッパー */
.tab-content {
    width: 100%;
    padding: 5em 0;
    transition: all 0.3s;
}

/* タブごとのページ本体：初期状態は非表示 */
.tab-page {
    display: none;
    border-radius: 1em;
    padding: 2em;
    padding-bottom: 5em;
}

/* wrapにprotect-wrapが付いている時はT-PROTECT側を表示 */
.wrap.protect-wrap .tab-page[data-page="protect"] {
    display: block;
}

/* wrapにplus-wrapが付いている時はT-PLUS+側を表示 */
.wrap.plus-wrap .tab-page[data-page="plus"] {
    display: block;
}

/*===========================================================
    protect-contents / plus-contents 共通
===========================================================*/
/* article-service */
article.article-service {
    padding-top: 3em;
}
.section-service > p {
    text-align: center;
    font-weight: 600;
    margin-top: 1em;
}

/* article-condition */
/* 保証条件を囲む角丸カード */
.condition-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-base);
    border: solid 0.0625rem var(--color-protect__transparent);
    border-radius: 1.5rem;
    overflow: hidden;
}

/* 各条件行（対象クラス・年式・走行距離・その他） */
.condition-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border-bottom: solid 0.0625rem var(--color-protect__transparent);
    gap: 1rem;
    padding: 1.5rem;
    margin: 0;
}

.condition-row:last-child {
    border-bottom: none;
}

/* 左側のラベル */
.condition-label {
    width: 12em;
    text-align: center;
    flex-shrink: 0;
    font-weight: bold;
    display: block;
    border-radius: 200px;
    padding: 0.5em 1em;
    margin: 0;
}

/* 右側の内容 */
.condition-text {
    flex: 1;
    min-width: 15rem;
    color: var(--color-main);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0;
}

.condition-text p {
    margin: 0;
}

/* article-support */
/* T-PROTECTサポート事務局 見出し */
.support-office-title {
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1em;
}

/* 3ステップを隙間なく並べるラッパー */
.support-flow {
    display: flex;
    align-items: stretch;
}

/* ステップ1つ分のカード */
.support-step {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 隣り合うカードの境界線が二重にならないようにする */
.support-step:not(:first-child) {
    border-left: none;
}

/* ステップタイトル（ご連絡／ご入庫・審査／修理・お引渡し） */
.support-step-title {
    font-weight: bold;
    text-align: center;
    display: block;
    padding: 0.75em 0.5em;
    margin: 0;
}

/* ステップ本文エリア */
.support-step-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    gap: 1em;
    padding: 1.5rem 1.25rem;
    position: relative;
}
/* 次のstepとの境界線にめり込む矢印 */
.support-step:not(:last-child) .support-step-body::after {
    content: "";
    width: 1.25rem;
    height: 1.5rem;
    display: block;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    position: absolute;
    top: 50%;
    right: -0.625rem;
    transform: translateY(-50%);
    z-index: 1;
}

.support-step-body p {
    text-align: center;
    margin: 0;
}

/* 電話番号 */
.support-tel {
    font-weight: bold;
    text-decoration: none;
    display: block;
}

/* 受付時間バッジ */
.support-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.5em 1em;
}

/* ※の注記 */
.support-note {
    color: var(--color-main);
}

/*===========================================================
    protect-contents
===========================================================*/
/* article-warranty */
.warranty-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
    gap: 1.5em;
}

.warranty-list li {
    text-align: center;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1em;
    padding: 3em 1em;
}

/* article-plan */
/* プラン全体ラッパー（複数のプランカテゴリをまとめる） */
.plan-contents {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* プランのカテゴリ単位（例：軽商用車〜2t車プラン） */
.plan-content {
    width: 100%;
    margin-bottom: 3rem;
}
.plan-content:last-of-type {
    margin-bottom: 0;
}
/* カテゴリ見出し */
.plan-content-title {
    color: var(--color-main);
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: solid 0.125rem var(--color-protect);
    padding-bottom: 1em;
    margin-bottom: 1em;
}

/* カテゴリ見出し内の条件バッジ（例：ディーゼル車） */
.plan-content-badge {
    font-weight: 700;
    display: inline-block;
    border-radius: 999px;
    padding: 0.5em 0.9em;
    border: solid 2px;
}

/* プランカードを横並びにするリスト */
.plan-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* プランカード1枚 */
.plan-item {
    width: calc((100% - 3rem) / 3);
    display: flex;
    flex-direction: column;
    background: var(--color-base);
    border: solid 0.0625rem var(--color-protect__transparent);
    overflow: hidden;
}

/* プランカードのタイトル部分：高さを揃えるため全カード共通のmin-heightで縦中央揃え */
.plan-item-name {
    width: 100%;
    min-height: 5.5rem;
    color: var(--color-base);
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5em;
    margin: 0;
}

/* 12ヶ月プランなどの補足テキスト */
.plan-item-name small {
    font-weight: normal;
    display: block;
}

/* プランカードの本文エリア */
.plan-item-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1.25em;
    padding: 1.25rem;
}

/* 自家用／事業用を横並びにするエリア */
.plan-item-type {
    display: flex;
    gap: 0.75rem;
}

/* 自家用／事業用 各ボックス */
.plan-item-type-box {
    width: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 0.0625rem var(--color-protect__transparent);
}
/* 自家用／事業用 ラベル */
.plan-item-type-label {
    width: 100%;
    font-weight: bold;
    display: block;
    padding: 0.5em 1em;
}

/* ○×マーク共通 */
.plan-item-mark {
    width: 2.75rem;
    height: 2.75rem;
    display: block;
    margin: 0.5rem 0;
    position: relative;
}

/* ○（対象）：円形のボーダーで表現、色はtext-protect/text-plusから継承 */
.plan-item-mark.is-ok {
    border: solid 0.1875rem currentColor;
    border-radius: 50%;
}

/* ×（対象外）：2本のバーを疑似要素で交差させて表現 */
.plan-item-mark.is-ng::before,
.plan-item-mark.is-ng::after {
    content: "";
    width: 100%;
    height: 0.1875rem;
    display: block;
    background: #999;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
}

.plan-item-mark.is-ng::after {
    transform: translateY(-50%) rotate(-45deg);
}
/* 保証期間・保証限度額のブロック共通 */
.plan-item-detail {
    text-align: center;
}
/* 隣接するブロックの間だけ区切り線を入れる */
.plan-item-detail + .plan-item-detail {
    border-top: solid 0.0625rem var(--color-protect__transparent);
    padding-top: 1.25rem;
}

/* 保証期間・保証限度額のタイトル */
.plan-item-detail-title {
    min-width: 6em;
    width: fit-content;
    font-weight: bold;
    display: block;
    border: solid 1px var(--color-protect);
    border-radius: 200px;
    padding: 0.5em 1em;
    margin: 0 auto;
    margin-bottom: 1em;
}

/* 保証期間・保証限度額の本文 */
.plan-item-detail-text {
    display: block;
    margin: 0;
}

/* 料金を見るボタン（クリックでポップアップ表示予定） */
.plan-item-btn {
    width: 100%;
    color: var(--color-base);
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    background: var(--color-protect);
    border: none;
    padding: 1em 0.5em;
    cursor: pointer;
    transition: opacity 0.2s;
}

/* ボタンホバー時 */
.plan-item-btn:hover {
    opacity: 0.8;
}

/* article-coverage */
/* グループを縦に並べるラッパー */
.coverage-groups {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* グループ1つ分のカード */
.coverage-group {
    width: 100%;
    background: var(--color-base);
    border: solid 0.0625rem var(--color-protect__transparent);
}

/* グループタイトル（例：エンジン機構①） */
.coverage-group-title {
    color: var(--color-base);
    font-weight: bold;
    display: block;
    background: var(--color-protect);
    padding: 1em;
}

/* 項目を並べるグリッド：幅に応じて自動で列数が変わる */
.coverage-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0.25rem 1.5rem;
    padding: 1em;
}

/* 項目1行分 */
.coverage-item {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border: solid 0.0625rem var(--color-protect__transparent);

}

/* 項目名 */
.coverage-item-name {
    width: 100%;
    display: flex;
    align-items: center;
    border-right: solid 0.0625rem var(--color-protect__transparent);
    padding: 0 1em;
}

/* ◯×△マーク共通の土台 */
.coverage-mark {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: block;
    margin: 1em;
    position: relative;
}

/* ◯（対象）：円のボーダーで表現 */
.coverage-mark.is-ok {
    border: solid 0.1875rem currentColor;
    border-radius: 50%;
}

/* ×（対象外）：2本のバーを交差させて表現 */
.coverage-mark.is-ng::before,
.coverage-mark.is-ng::after {
    content: "";
    width: 100%;
    height: 0.1875rem;
    display: block;
    background: #999;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(45deg);
}

.coverage-mark.is-ng::after {
    transform: translateY(-50%) rotate(-45deg);
}

/* △（条件付き対象）：clip-pathで三角形を作る */
.coverage-mark.is-partial {
    background: currentColor;
    clip-path: polygon(50% 8%, 6% 92%, 94% 92%);
}

/* 1項目に複数マークがある場合（DPF/DPR/DPD の ◯/△ 等）の並び */
.coverage-marks {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.coverage-marks .coverage-mark {
    margin: 1em 0.5em;
}

.coverage-mark-sep {
    color: var(--color-main);
}

/*===========================================================
    price-modal
===========================================================*/
/* 料金表ポップアップ全体：非表示時はdisplay:noneで確実に消す */
.price-modal {
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

/* 表示中 */
.price-modal.is-show {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

/* 背景クリックで閉じるためのオーバーレイ */
.price-modal-overlay {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* ポップアップ本体 */
.price-modal-box {
    width: min(90vw, 56rem);
    max-height: 90vh;
    color: var(--color-main);
    display: flex;
    flex-direction: column;
    background: var(--color-base);
    border-radius: 1rem;
    padding: 2.5rem 2rem 2rem;
    position: relative;
    overflow-y: auto;
}

/* 閉じるボタン */
.price-modal-close {
    width: 2.25rem;
    height: 2.25rem;
    display: block;
    background: var(--color-base);
    border: solid 0.0625rem var(--color-lightgrey);
    border-radius: 50%;
    padding: 0;
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
}

/* 閉じるボタンの×を作る2本のバー */
.price-modal-close-bar {
    width: 50%;
    height: 0.09375rem;
    display: block;
    background: var(--color-main);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.price-modal-close-bar:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ヘッダーエリア（バッジ・タイトル・サブタイトル） */
.price-modal-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    border-bottom: solid 0.0625rem var(--color-lightgrey);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

/* バッジ（ディーゼル／ガソリン／4t車・増トン車） */
.price-modal-badge {
    font-weight: bold;
    display: inline-block;
    border-radius: 999px;
    border: solid 2px;
    padding: 0.25em 1.1em;
}

/* タイトル未使用時（4t車）に隠すための初期状態 */
.price-modal-title {
    font-weight: bold;
    display: block;
    margin: 0;
}

.price-modal-subtitle {
    color: var(--color-main);
    display: block;
    margin: 0;
}

/* 自家用／営業用の可否エリア */
.price-modal-conditions {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
}

.price-modal-conditions li {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
}

/* ○×マークのサイズだけプランカードのものを流用して上書き */
.price-modal-conditions .plan-item-mark {
    width: 2rem;
    height: 2rem;
}

.price-modal-condition-label {
    font-weight: bold;
    display: block;
}

/* 免責期間の注記（ご登録日から保証が適用されます 等） */
.price-modal-condition-note {
    color: var(--color-main);
    text-align: center;
    display: block;
    margin: 0 0 1.5rem;
}

/* 保証期間・保証限度額 */
.price-modal-summary {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--color-lightgrey);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

/* dl/dt/ddのデフォルト余白をリセットしてflexレイアウトに対応 */
.price-modal-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0;
}

.price-modal-summary-row dt,
.price-modal-summary-row dd {
    margin: 0;
}

/* (4t)／(増トン)のラベルをピル型で表示（色はtext-base/back-protect/back-orangeで指定） */
.price-tag {
    display: inline-block;
    border-radius: 200px;
    padding: 0.2em 0.8em;
}

.price-modal-summary-label {
    font-weight: bold;
    display: block;
    border-radius: 200px;
    padding: 0.3em 0.8em;
}

.price-modal-summary-text {
    display: block;
}

/* 事業用の追加料金・免責事項などの補足文 */
.price-modal-extra p {
    line-height: 1.7;
    display: block;
    margin: 0 0 0.75em;
}

.price-modal-extra p:last-child {
    margin-bottom: 0;
}

.price-modal-extra {
    margin-bottom: 1.5rem;
}

/* 料金表を横スクロールできるようにするラッパー（スマホ対応） */
.price-table-scroll {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

/* 料金表本体 */
.price-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-base);
}

.price-table th,
.price-table td {
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
    border: solid 0.0625rem var(--color-lightgrey);
    padding: 0.75em 1em;
}

.price-table th {
    font-weight: bold;
}

/* 左端（走行距離）列 */
.price-table td:first-child {
    font-weight: bold;
    background: var(--color-lightgrey);
    white-space: normal;
}

/* 表の下の補足文（15年1ヶ月以上のプラン無し 等） */
.price-modal-foot {
    color: var(--color-main);
    text-align: right;
    display: block;
    margin: 0;
}

/* ポップアップ表示中は背面のスクロールを止める */
body.is-modal-open {
    overflow: hidden;
}

/* ========== レスポンシブ ========== */
@media (max-width: 37.5rem) {
    .price-modal.is-show {
        padding: 1rem 0.75rem;
    }

    .price-modal-box {
        width: 100%;
        padding: 3.5rem 1.25rem 1.5rem;
    }

    .price-modal-conditions {
        gap: 1.5rem;
    }

    .price-modal-summary {
        padding: 1rem;
    }

    .price-table th,
    .price-table td {
        padding: 0.6em 0.7em;
    }
}

/*===========================================================
    plus-contents
===========================================================*/
/* article-price */
/* プランカードを横並びにするリスト */
.price-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

/* プランカード1枚 */
.price-item {
    width: calc((100% - 1.5rem) / 2);
    display: flex;
    flex-direction: column;
    background: var(--color-base);
    border: solid 0.0625rem var(--color-plus__transparent);
    overflow: hidden;
}

.price-item-name {
    font-size: 120%;
}
/* プランカードのタイトル部分：高さを揃えるため全カード共通のmin-heightで縦中央揃え */
.price-item-name {
    width: 100%;
    min-height: 5.5rem;
    color: var(--color-base);
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5em;
    margin: 0;
}

/* プランカードの本文エリア */
.price-item-body {
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1.25em;
    padding: 1.25rem;
}

/* price-item-service */
.price-item-service {
    font-weight: 600;
}
.price-item-service span {
    font-weight: 700;
    display: block;
    padding-top: 1rem;
}
.price-item-service span {
    font-size: 250%;
}

/* price-item-detail */
.price-item-detail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.price-item-detail dl {
    padding: 1rem;
}
.price-item-detail dl:not(:last-of-type) {
    background: rgb(250, 196, 196);
    padding-bottom: 0;
    position: relative;
}
.price-item-detail dl:not(:last-of-type)::before {
    content: "";
    width: 100%;
    height: 2.5rem;
    background: rgb(250, 196, 196);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    bottom: calc(-2.5rem + 1px);
    left: 0;
}
.price-item-detail dt {
    width: fit-content;
    border-radius: 200px;
    padding: 0.5rem 1rem;
    margin: 0 auto;
    margin-bottom: 1rem;
}
.price-item-detail dt.text-plus {
    font-weight: 700;
}
.price-item-detail dd {
    font-size: 200%;
}
.price-item-detail dd {
    font-weight: 600;
    position: relative;
    z-index: 3;
}

/* price-item-cost */
.price-item-cost {
    font-weight: 800;
}
.price-item-cost span {
    font-weight: 600;
}
.price-item-cost {
    font-size: 400%;
}
.price-item-cost span {
    font-size: 25%;
}

/* price-item-list */
.price-item-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.price-item-list li {
    font-weight: 600;
    border-radius: 200px;
    border: solid 2px var(--color-plus);
    padding: 0.5em 1em;
}

.section-price > small {
    display: block;
    margin-top: -2rem;
}

/* article-repair */
.repair-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}
.repair-list li {
    min-width: 10em;
    width: calc(100% / 3 - 3rem / 3);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    padding: 2rem 1rem;
}
.repair-list li span {
    font-weight: 600;
    display: block;
    border-radius: 200px;
    padding: 0.5em 1em;
}
.repair-list li {
    font-size: 150%;
}
.repair-list li span {
    font-size: 75%;
}

.repair-mark {
    width: 2.5em;
    height: 1.5em;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    display: block;
    margin: 0 auto;
    margin-top: -1rem;
}

.repair-service-free {
    font-size: 250%;
}
.repair-service {
    font-size: 150%;
}
.repair-service-word {
    font-size: 120%;
}
.repair-service {
    text-align: center;
    font-weight: 600;
    margin-top: -1rem;
}
.repair-service-word {
    font-weight: 700;
}
.repair-service-free {
    font-weight: 800;
    display: block;
    margin: 1rem auto;
}
.repair-service-detail {
    width: fit-content;
    margin: 0 auto;
    font-weight: 600;
    display: block;
    border-radius: 200px;
    padding: 0.5em 1em;
}


/*===========================================================
    カラーのみ差し替え
===========================================================*/
/* --color-protect */
.wrap.protect-wrap .tab-nav-btn.is-active {
    border-bottom-color: var(--color-protect__transparent);
}
.text-protect,
.wrap .protect-btn {
    color: var(--color-protect);
}
.text-protect__transparent {
    color: var(--color-protect__transparent);
}

.back-protect,
.wrap .protect-btn small,
.wrap.protect-wrap .tab-content,
.section-title.protect::before,
.wrap.protect-wrap .support-step:not(:last-child) .support-step-body::after {
    background: var(--color-protect);
}
.back-protect__transparent {
    background: var(--color-protect__transparent);
}
.wrap.protect-wrap .support-office-title {
    border-bottom: solid 0.125rem var(--color-protect);
}
.wrap.protect-wrap .support-step {
    border: solid 0.0625rem var(--color-protect__transparent);
}

/* --color-plus */
.wrap.plus-wrap .tab-nav-btn.is-active {
    border-bottom-color: var(--color-plus__transparent);
}
.text-plus,
.wrap .plus-btn {
    color: var(--color-plus);
}
.text-plus__transparent {
    color: var(--color-plus__transparent);
}

.back-plus,
.wrap .plus-btn small,
.wrap.plus-wrap .tab-content,
.section-title.plus::before,
.wrap.plus-wrap .support-step:not(:last-child) .support-step-body::after {
    background: var(--color-plus);
}
.back-plus__transparent {
    background: var(--color-plus__transparent);
}
.wrap.plus-wrap .support-office-title {
    border-bottom: solid 0.125rem var(--color-plus);
}
.wrap.plus-wrap .support-step {
    border: solid 0.0625rem var(--color-plus__transparent);
}