@charset "UTF-8";

.content:not(:first-of-type){ margin-top: 110px;}
.box *{ box-sizing: border-box;}
.warranty{ margin-top: 50px;}

.box_01 .supportBox{ container-type: inline-size;}
.box_01 .supportList{ max-width: 1010px; margin: 0 auto; gap: 2.6%;}
.box_01 .supportList li{ align-items: center; width: calc( 100% / 3 ); max-width: 319px; border: 1px solid #594c47; padding: 22px 36px;}

@container (max-width: 1009px) {
    .box_01 .supportList{ justify-content: center;}
    .box_01 .supportList li { width: 100%;}
}

.box_01 .supportList li i{ display: block; max-width: 84px;}
.box_01 .warranty_01 .caseList{ container-type: inline-size;}
.box_01 .warranty_01 .caseList li{ position: relative; background: #f7f9fa;}
.box_01 .warranty_01 .caseList li:not(:first-of-type){ margin-top: 20px;}
.box_01 .warranty_01 .caseList .caseNum{ position: absolute; top: 0; left: 0; display: block; background: #594c47; color: #fff; padding:0 0.5em; font-weight: bold;}
.box_01 .warranty_01 .caseList .caseDetail{ position: relative; align-items: center; max-width: 1000px; margin: 0 0 0 auto; padding: 20px 4% 20px 0;}
.box_01 .warranty_01 .caseList .caseDetail .caseTitBox{ flex-basis: 42%;}
.box_01 .warranty_01 .caseList .caseTit{ font-size: clamp(  18px , 3.68vw , 25px); border-bottom: 2px solid #594c47; padding-bottom: 15px; margin-bottom: 5px; font-weight: bold;}
.box_01 .warranty_01 .caseList .priceBox{ position:relative; display: block; flex-basis: 30.5%;}
.box_01 .warranty_01 .caseList .arrow{ font-size: 30px;}
.box_01 .warranty_01 .caseList .operation{ align-items: center; margin-bottom: 10px;}
.box_01 .warranty_01 .caseList .itemName{ border: 2px solid #000; padding: 1em;}
.box_01 .warranty_01 .caseList .price{ font-size: clamp(  25px , 4.1vw , 28px); font-weight: bold;}
.box_01 .warranty_01 .caseList .price>span{ font-size: 64%;}
.box_01 .warranty_01 .caseList .priceBox .basicText,.box_01 .warranty_01 .caseList .caseTitBox .basicLargeText{ line-height: 1.5; margin: 5px 0 0 0 ;}
.box_01 .warranty_01 .caseList .circle{ flex-basis: 11.6%; aspect-ratio: 1 / 1;  border-radius:50%; background:#bb3614; display:flex; align-items:center; justify-content:center; text-align: center; color: #fff; font-size: clamp(  16px , 3.5vw , 24px);  font-weight: bold;}
.box_01 .warranty_01 .case .capRight{ text-align: right; margin-top: 10px;}

@container (max-width: 1049px) {
    .box_01 .warranty_01 .caseList .caseDetail{ justify-content: left; padding: 20px 4%; gap: 10px;}
    .box_01 .warranty_01 .caseList .caseDetail .caseTitBox{ flex-basis: 100%; margin-top: 2em;}
    .box_01 .warranty_01 .caseList .operation{ justify-content: left; margin-top: 20px; gap: 10px;}
    .box_01 .warranty_01 .caseList .priceBox{ flex-basis: 30%; }
    .box_01 .warranty_01 .caseList .circle{ margin-left: 2vw;}
    
}
@container (max-width: 627px) {
    .box_01 .warranty_01 .caseList .caseDetail{ gap: 0;}
    .box_01 .warranty_01 .caseList .priceBox{ flex-basis: 100%; max-width: 210px;}
    .box_01 .warranty_01 .caseList .circle{ flex-basis: 60px; }
}

.box_01 .warranty_02 { container-type: inline-size; }
.box_01 .warranty_02 .subjectList{ gap: 30px 1.6%; margin-bottom: 30px;}
.box_01 .warranty_02 .item{ flex-basis: 18.4%;}
.box_01 .warranty_02 .item .itemTit{ padding: 0.5em; margin: 20px 0; text-align: center; border: 1px solid #000; font-weight: bold;}
.box_01 .warranty_02 .item .detail{ font-size: 14px;}
@container (max-width: 1049px) {
    .box_01 .warranty_02 .item{ flex-basis: 48.4%;}
}

.box_02 .warranty_01 { container-type: inline-size; }
.box_02 .warranty_01 .left{ flex-basis: 59%;}
.box_02 .warranty_01 .left .counterTit{ color:#5c99be; margin-bottom: 0; margin-left: 30px;}
.box_02 .warranty_01 .right{ max-width: 332px;}
.box_02 .warranty_01 .bgText{ background: #def1fb; padding: 25px 30px; border-radius: 10px;}

.box_02 .warranty_02 { container-type: inline-size;}
.box_02 .warranty_02 .left{ flex-basis: 71.9%;}
.box_02 .warranty_02 .right{ flex-basis: 26.26%;}
.box_02 .warranty_03 { container-type: inline-size;}
.box_02 .warranty_03 .left{ flex-basis: 71.9%;}
.box_02 .warranty_03 .right{ flex-basis: 26.26%; margin-bottom: 20px;}
.box_02 .ouchicare{ display: block; margin: 10px auto 0; text-align: center;}
@container (max-width: 867px) {
.box_02 .warranty_01 .left{ flex-basis: 100%;}
.box_02 .warranty_01 .left .counterTit{ margin-left: 10px;}
.box_02 .warranty_01 figure{ margin: 0 auto;}
.box_02 .warranty_01 .bgText{ padding: 15px 10px;}

.box_02 .warranty_02 .left{ flex-basis: 100%;}
.box_02 .warranty_02 .right{ flex-basis: 100%;}

.box_02 .warranty_03 .left{ flex-basis: 100%;}
.box_02 .warranty_03 .right{ flex-basis: 100%;}
}

.box_03{ container-type: inline-size;}
.box_03 .imgBox{ text-align: center; margin-top: 50px; overflow: scroll;}
.box_03 figure { width: 798px; margin: 0 auto;}
.box_03 .scrollCap{ display: none;}
@container (max-width: 797px) {
    .box_03 .scrollCap{ display: block; margin-top: 10px;}
}


.box_04 .warranty_01 { container-type: inline-size;}
.box_04 .deal { max-width: 673px; gap: 10px 3.46%; margin: 0 auto; margin-bottom: 50px;}
.box_04 .deal li{ flex-basis: 29.8%; border: 1px solid #000; text-align: center; padding: 1em; font-size: clamp( 16px,2.6vw,20px); font-weight: bold;}
.box_04 figure{ text-align: center; margin-top: 50px; text-align: center;}

@container (max-width: 867px) {
    .box_04 .deal{ margin-bottom: 30px;}
    .box_04 figure{ margin-top: 30px; }
    .box_04 .deal li{ flex-basis: 100%;}
}