@charset "UTF-8";

.repair .contents{ margin-top: 0; padding-bottom: 5rem;}
.repair .f-em-o{ color: var(--Surface-Secondry);}

.repair-support .tit{ margin-bottom: calc(var(--Space-XL) * 1.5); padding: 0.5rem 1rem; background-color: var(--Color-Brand); color: var(--Color-White); font-size: var(--Heading-XL); text-align: center;}

.flex-repair-support-cntents{ margin-bottom: calc(var(--Space-XL) * 1.5); padding-left: var(--Space-L); display: flex; justify-content: space-between; border-left: 4px solid var(--Color-Brand);}
.flex-repair-support-cntents-txtBox{width: 60%;}
.flex-repair-support-cntents-txtBox .content-tit{ margin-bottom: 0; padding-bottom: 1rem;}
.flex-repair-support-cntents-txtBox .content-txt{ padding-top: 1rem; border-top: 1px solid var(--Border); font-size: var(--Body-L);}
.flex-repair-support-cntents-image{ width: 38%;}

.repair-five-support-head{ padding: 3rem 2rem 2rem; border: 5px dashed var(--Color-Brand); border-bottom: none; border-radius: 10px; position: relative;}
.repair-five-support-head .tit{ width: 100%; max-width: 425px; padding: 0.5rem 2rem; background-color: var(--Color-White); border: 2px solid var(--Color-Brand); border-radius: 25px; color: var(--Color-Brand); font-size: var(--Body-L); font-weight: bold; text-align: center; position: absolute; top: -2rem; left: 50%; transform: translateX(-50%);}
.repair-five-support-head .content-txt{ text-align: center;}
.repair-five-support-head::after{ content:''; display: block;width: 102%; height: 2rem; background-color: var(--Color-White); position: absolute; left: -1%; bottom: 0;}

.repair-five-support-list{ margin-bottom: calc(var(--Space-XL) * 2); display: flex; justify-content: space-between; align-items: end;}
.repair-five-support-list img{ width: 19%;}

.repair-support-subject{ margin-bottom: var(--Space-M);}
.repair-support-subject .content-txt{ margin-bottom: var(--Space-M); text-align: center;}
.repair-subject-list { padding: calc(var(--Space-XL) * 2); display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--Space-S); background-color: var(--Color-Gray); border-radius: 15px;}
.repair-subject-item { margin-bottom: var(--Space-S); display: grid; grid-row: span 2; grid-template-rows: subgrid; place-content: center; place-items: center;}
.repair-subject-item img{ width: 60%; max-height: 130px; margin: auto auto 0; object-fit: contain;}
.repair-subject-item .content-txt{ padding-top: var(--Space-S);}

.repair-note{ margin-bottom: calc(var(--Space-XL) * 1.5);}
.repair-note .caption{ text-align: left;}

.repair-guarantee-list{ display: flex; justify-content: space-between;}
.repair-guarantee-list img{ width: 22%;}

/* ドット線見出し */
.dot-tit{ margin-bottom: var(--Space-M); display: flex; align-items: center; justify-content: center; color: var(--Color-Brand); font-size: var(--Body-L); text-align: center;}
.dot-tit::before,
.dot-tit::after { height: 0; content: ""; flex-grow: 1; border-top: 3px dotted var(--Color-Brand);}
.dot-tit span { padding: 0 10px;  background: #fff; font-size: var(--Body-L); font-weight: bold; position: relative;}
.dot-tit span::before,
.dot-tit span::after { content: ""; display: inline-block; width: 20px; height: 20px; border-top: 2px solid var(--Color-Brand); border-left: 2px solid var(--Color-Brand);}
.dot-tit span::before { transform: rotate(-45deg); margin-right: 15px;}
.dot-tit span::after { transform: rotate(135deg); margin-left: 15px;}
@media (max-width: 768px) {
    .dot-tit span { font-size: calc(var(--Body-L) * 1.5);}
}


@media (max-width: 768px) {
    .repair-support .tit { margin-bottom: var(--Space-L);}
    .flex-repair-support-cntents { flex-direction: column; row-gap: var(--Space-M); padding-left: var(--Space-M);}
    .flex-repair-support-cntents-txtBox,
    .flex-repair-support-cntents-image{ width: 100%;}
    
    .repair-five-support-head .tit { width: 80%; top: -1.5rem;}
    .repair-five-support-list { flex-wrap: wrap; row-gap: var(--Space-M);}
    .repair-five-support-list img { width: 48%;}
    .repair-five-support-head::after {width: 105%; left: -2.5%;}

    .repair-subject-list { padding: var(--Space-L); grid-template-columns: repeat(2, 1fr);}
    .repair-subject-item img { width: 50%;}
    .repair-guarantee-list { flex-wrap: wrap; row-gap: var(--Space-M);}
    .repair-guarantee-list img { width: 49%;}
}