@charset "UTF-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PC Setting

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#sec01 .wrap{ max-width: none;}
#sec01 .wrap .main{ width: 100%; margin-bottom: 50px;}
#sec01 .wrap .main .inner{ width: 1080px; margin: 0 auto; display: flex; justify-content: space-between;}
#sec01 .wrap .main .inner .img{ width: 40%; margin-top: 0;}
.option_detail .flex.main .img{ margin-right: 0;}
#sec01 .wrap .main .inner .img img{ width: 100%; height: auto;}
#sec01 .wrap .main .inner .txt{ width: 60%;}
#sec01 .wrap .main .inner .txt ul{ margin-top: 10px;}
#sec01 .wrap .main .inner .txt ul li{ padding-left:1em; text-indent:-1em;}
#sec01 .wrap .main .inner .txt ul li a{ color: #0e57a2;}
#sec01 .wrap .sub_wrap{ max-width: 1080px; width: 100%; margin: 0 auto;}
#sec01 .wrap .option_box{ margin-bottom: 50px;}
#sec01 .wrap .option_box .basic_p{}
#sec01 .wrap .option_box .annotation_p{ font-size: 1.4rem; line-height: 1.8em; padding-left:1.5em; text-indent:-1.5em;}
#sec01 .wrap .option_box .option_pic{ margin: 30px auto;}
#sec01 .wrap .option_box .option_pic img{ width: 100%; height: auto;}
#sec01 .wrap .option_box h3{ font-size: 2.5rem; font-weight: 700; color: #28437E; margin-bottom: 10px;}
#sec01 .wrap .option_box h4{ font-size: 2.3rem; font-weight: 700;}
#sec01 .wrap .option_box .table_wrap{ margin-bottom: 10px;}
#sec01 .wrap .option_box .table_wrap table{width: 100%; border-collapse: collapse; margin-top: 20px;}
#sec01 .wrap .option_box .table_wrap table th{ color: #FFFFFF; text-align: center; background-color: #007ac5; vertical-align: middle; line-height: 1.2;}
#sec01 .wrap .option_box .table_wrap table td{ text-align: center; background-color: #fff;}
#sec01 .wrap .option_box .table_wrap table th,
#sec01 .wrap .option_box .table_wrap table td{ border: 1px solid #c1c1c1; font-size: 1.4rem; padding: 0.3em 0; width: calc(100% / 8);}
#sec01 .wrap .option_box .table_wrap table th[colspan="2"]{ width: calc(100% / 8 * 2);}
#sec01 .wrap .option_box .table_wrap table tr.gray td{ background-color: #EBEBEC;}

#sec01 .wrap .detail_list{ width: 100%; max-width: 1080px; margin: 0 auto 50px;}
#sec01 .wrap .detail_list ul{ background-color: #28437e; display: flex; padding: 40px; box-sizing: border-box;}
#sec01 .wrap .detail_list ul li{ margin-right: 20px;}
#sec01 .wrap .detail_list ul li:last-child{ margin-right: 0;}
#sec01 .wrap .detail_list ul li img{ width: 100%; height: auto;}

#sec01 .wrap .gray_box{ max-width: 1080px; margin: 0 auto 50px; display: flex;}
#sec01 .wrap .gray_box .large{ margin-right: 40px;}
#sec01 .wrap .gray_box .flex:first-of-type{ margin-bottom: 0;}
#sec01 .wrap .gray_box .flex ul{ display: flex;}
#sec01 .wrap .gray_box .flex ul li{ margin-right: 20px;}

#sec01 .wrap .sub_wrap .option_box .category_icon{ display: flex; justify-content: flex-end; margin: -55px 10px 35px 0;}
#sec01 .wrap .sub_wrap .option_box .category_icon li{ color: #fff; padding: 0 15px; border-radius: 100vh; display: inline-block; margin-left: 5px;}
#sec01 .wrap .sub_wrap .option_box .category_icon .icon01{ background-color: #f6ab00;}
#sec01 .wrap .sub_wrap .option_box .category_icon .icon02{ background-color: #2ea7e0;}
#sec01 .wrap .sub_wrap .option_box .category_icon .icon03{ background-color: #45b035;}
#sec01 .wrap .sub_wrap .option_box .model_text{ font-weight: 700; border-bottom: 2px solid #000; margin-bottom: 15px;}
#sec01 .wrap .sub_wrap .option_box .attention_text{ font-size: 0.8em; margin-top: 10px;}

#sec01 .wrap .sub_wrap .w2l{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#sec01 .wrap .sub_wrap .w2l .option_box{ width: calc(50% - 30px);}

#sec01 .wrap .sub_wrap .option_box .model_list{ display: flex; border-bottom: 2px solid #000; margin-bottom: 15px;}
#sec01 .wrap .sub_wrap .option_box .model_list .model_list_title{ font-weight: 700; width: 80px;}
#sec01 .wrap .sub_wrap .option_box .model_list .model_list_inner{ width: calc(100% - 50px);}
#sec01 .wrap .sub_wrap .option_box .model_list .model_list_inner dl{ display: flex; align-items: center; width: 100%;}
#sec01 .wrap .sub_wrap .option_box .model_list .model_list_inner dl:nth-child(1){ border-bottom: 2px dotted #000;}
#sec01 .wrap .sub_wrap .option_box .model_list .model_list_inner dl dt,
#sec01 .wrap .sub_wrap .option_box .model_list .model_list_inner dl dd,
#sec01 .wrap .sub_wrap .option_box .model_list li{ font-weight: 700;}
#sec01 .wrap .sub_wrap .option_box#option14 .model_list .number{ display: flex; font-weight: 700;}
#sec01 .wrap .sub_wrap .option_box#option14 .model_list .number span{ display: block;}

#sec01 .wrap .sub_wrap .option_box .option_inner{ display: flex; justify-content: space-between;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_pic ul{ display: flex; justify-content: space-between;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_text{ width: calc(100% - 700px);}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic{ width: 660px; margin: 0!important;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_text{ width: calc(100% - 584px);}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic{ width: 544px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_text{ width: calc(100% - 320px);}
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic{ width: 280px;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_text{ width: calc(100% - 615px);}
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_pic{ width: 575px;}
#sec01 .wrap .option_box .option_pic{ text-align: center;}
#sec01 .wrap .option_box .option_pic img{ width: auto; height: auto;}
#sec01 .wrap .sub_wrap .compatible_models{ text-align: center;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap{}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table{width: 100%; /*table-layout: fixed;*/ border-collapse: collapse;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table th{ color: #FFFFFF; text-align: center; background-color: #007ac5; vertical-align: middle; line-height: 1.2;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table td{ text-align: center;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table th,
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table td{ width:4em; border: 1px solid #c1c1c1; font-size: 1.3rem; line-height: 1.3; padding: 5px 10px;box-sizing: border-box;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table thead td{background-color:#ebebec;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .bg01{ text-align: left; background-color: #fcf6eb;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .bg02{ background-color: #ebebec;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .bg03{ width: 2em; color: #FFF; background-color: #777;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w5em{ width: 5em; min-width: 5em; text-align: center;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w7em{ width: 7em;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w8em{ width: 8em; min-width: 8em;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w13em{ width: 13em;}
#sec01 .wrap .sub_wrap .compatible_models .annotation_p{ text-align: right; margin-top: 15px;}

@media screen and (max-width: 1200px) {
#sec01 .wrap{ width: 94%;}
}

@media screen and (min-width: 1101px){
.tab_only{ display: none;}
}

@media screen and (max-width: 1100px) {
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

TABLET Setting

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 1024px) {
#sec01 .wrap .main{ margin-bottom: 30px;}
#sec01 .wrap .main .inner .txt p{ font-size: 1.5rem;}
.option_detail .flex.main .copy{ font-size: 2.3rem!important;}

#sec01 .wrap .main .inner{ display: block;}
#sec01 .wrap .main .inner .img{ width: 402px; height: auto; margin: 0 auto 20px;}
#sec01 .wrap .main .inner .txt{ width: 600px; margin: 0 auto;}
.option_detail #sec01 .wrap .gray_box{ width: 100%; display: block; text-align: center;}
.option_detail #sec01 .wrap .gray_box .large{ text-align: center;}
#sec01 .wrap .sub_wrap .option_box .option_inner{ display: block;}
.option_detail #sec01 .wrap .gray_box .flex ul{ justify-content: center!important; margin: 0 auto;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_text{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_pic{ margin: 20px auto 0!important;}

#sec01 .wrap .sub_wrap .w2l{ display: block;}
#sec01 .wrap .sub_wrap .w2l .option_box{ width: 100%;}

#sec01 .wrap .sub_wrap .compatible_models .table_wrap table th,
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table td{padding:5px;}
}

@media screen and (min-width: 768px) {
.pc_none{ display: none;}
#sec01 .wrap .main .inner{ flex-direction: row-reverse;}
#sec01 .wrap .main .inner .txt ul li a{ -webkit-transition: all 0.3s; transition: all 0.3s;}
#sec01 .wrap .main .inner .txt ul li a:hover{ opacity: 0.5;}
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

SP Setting

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 767px) {
.tab_only,
.sp_none{ display: none;}
#sec01 .wrap .main{ height: auto; margin-bottom: 30px; background-image: none;}
#sec01 .wrap .main .inner{ width: 100%; display: block;}
#sec01 .wrap .main .inner .img{ position: relative; width: 100%; max-width: 100%;}
#sec01 .wrap .main .inner .txt{ width: 94%; max-width: inherit; margin: 0 auto;}
#sec01 .wrap .main .inner .txt p{ font-size: 3.9vw;}
#sec01 .wrap .option_detail .flex.main .copy{ font-size: 5.2vw;}
#sec01 .wrap .main .inner .txt ul li{ text-align: left;}
#sec01 .wrap .option_box{ margin-bottom: 20px;}
#sec01 .wrap .option_box .annotation_p{ font-size: 3.5vw;}
#sec01 .wrap .option_box .option_pic{ margin: 10px auto;}
#sec01 .wrap .option_box h3{ font-size: 4.8vw; line-height: 1.5;}
#sec01 .wrap .option_box h4{ font-size: 3.8vw;}
#sec01 .wrap .option_box .table_wrap{ overflow-x: scroll;}
#sec01 .wrap .option_box .table_wrap table{ min-width: 1024px; margin-top: 10px;}
#sec01 .wrap .option_box .table_wrap table th,
#sec01 .wrap .option_box .table_wrap table td{ font-size: 4vw;}


#sec01 .wrap .detail_list ul{ display: block; padding: 20px;}
#sec01 .wrap .detail_list ul li{ margin-right: 0; margin-bottom: 10px;}
    
.option_detail #sec01 .wrap .gray_box .large{ font-size: 4.5vw;}
#sec01 .wrap .sub_wrap .option_box .attention_text{ font-size: 3.5vw;}
.option_detail #sec01 .wrap .gray_box .flex ul{ display: block;}
.option_detail #sec01 .wrap .gray_box .large{ margin: 0 0 10px;}
.option_detail #sec01 .wrap .gray_box .flex ul li{ margin-right: 0;}
#sec01 .wrap .sub_wrap .option_box .category_icon{ margin: 0;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_pic ul{ display: block;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_pic ul li img{ width: 100%; height: auto;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_pic{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_pic ul li:nth-child(1){ margin-bottom: 10px;}
#sec01 .wrap .sub_wrap .option_box#option09 .model_list{ display: block;}
#sec01 .wrap .sub_wrap .option_box#option09 .model_list .model_list_inner{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box#option09 .model_list .model_list_inner dl{ align-items: flex-start;}
#sec01 .wrap .sub_wrap .option_box#option09 .model_list .model_list_inner dl dt{ width: 40%;}
#sec01 .wrap .sub_wrap .option_box#option09 .model_list .model_list_inner dl dd{ width: 60%;}
#sec01 .wrap .sub_wrap .option_box .category_icon li{ font-size: 3.5vw;}

#sec01 .wrap .sub_wrap .compatible_models .table_wrap{ overflow-x: scroll;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table{min-width: 670px; table-layout: auto;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table th,
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table td{ width: auto; min-width: 3em; font-size: 3.7vw; padding: 5px;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .bg03{ position: -webkit-sticky; position: sticky; left: 0; right: 0;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .bg03::before{ content: ""; width: 100%; height: 100%; border-bottom: 1px solid #c1c1c1; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table tr:last-of-type .bg03::before{ content: none;}
#sec01 .wrap .sub_wrap .compatible_models .annotation_p{ margin-top: 5px;}

}