@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 .option_pic img{ width: 100%; height: auto;}
#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 .option_box .attention_text.nowrap{white-space: nowrap;}

#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 .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_pic ul{ align-items: flex-start;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(1) .wrap{ width: 120px;border: solid 1px #ddd;padding: 10px;box-sizing: border-box;display: block;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(1) .wrap span:not(.qr){ font-size: 12px;line-height: 1.58em;text-align: center;display: block;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(1) .wrap span.qr{ display: block;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(1) .wrap span.qr img{ padding: 5px;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_text{ width: calc(100% - 584px);}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic{ width: 544px; margin: 0 20px;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_text{ width: calc(100% - 240px);}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_pic{ width: 200px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option06 .option_inner .option_text{ width: calc(100% - 320px);}
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic{ width: 245px;}
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option06 .option_inner .option_pic{ width: 280px;}
#sec01 .wrap .sub_wrap .option_box .movie_box{ text-align: center; margin: 30px auto 0;}
#sec01 .wrap .option_box .option_pic{ text-align: center;}
#sec01 .wrap .w2l .option_box .option_pic{ margin: 30px auto;}
#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{ 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 th{ width:calc(740px / 3);}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table td{ width:calc(740px / 6);}
#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: 41px; color: #FFF; background-color: #777;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w104px{ width: 104px; min-width: 104px;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w91px{ width: 91px;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w208px{ width: 208px;}
#sec01 .wrap .sub_wrap .compatible_models .annotation_p{ text-align: right; margin-top: 15px;}
#sec01 .wrap .sub_wrap .option_box .option02_btm{ background-color: #d2d5ec; border-radius: 10px; padding: 15px; box-sizing: border-box; display: flex; justify-content: space-between; margin-top: 20px;}
#sec01 .wrap .sub_wrap .option_box .option02_btm p{ font-size: 0.8em; width: calc(100% - 270px);}
#sec01 .wrap .sub_wrap .option_box .option02_btm table{ border-collapse: collapse; background-color: #fff; width: 260px;}
#sec01 .wrap .sub_wrap .option_box .option02_btm table tr th,
#sec01 .wrap .sub_wrap .option_box .option02_btm table tr td{ font-size: 0.8em; border: 1px solid #c1c1c1; padding: 3px 10px; text-align: center!important;}
#sec01 .wrap .sub_wrap .option_box .option02_btm table tr th{ background-color: #007ac5; color: #fff;}
#sec01 .wrap .sub_wrap .option_box .option02_btm table tr td.bg01{ background-color: #fcf6eb;}

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

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

TABLET Setting

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

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

#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;margin-right: 0;}
#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;}
.option_detail #sec01 .wrap .gray_box .flex ul li{ font-size: 15px;}
.option_detail #sec01 .wrap .gray_box .flex ul li:last-child{ margin-right: 0;}
#sec01 .wrap .option_box .option_pic img{width: 100%;}
#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,
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option06 .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,
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_pic, 
#sec01 .wrap .sub_wrap .option_box#option06 .option_inner .option_pic{ margin: 20px auto 0!important;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_pic{ width: 280px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option06 .option_inner .option_pic{ width: 350px;}
#sec01 .wrap .w2l .option_box .option_pic{width: 350px;}

#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,*/
.pc_on{ 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: 5.15vw;font-feature-settings: 'palt';}
#sec01 .wrap .main .inner .txt ul li{ font-size: 4.53vw;text-align: left;line-height: 2.2em;}
#sec01 .wrap .option_box{ margin-bottom: 35px;}

#sec01 .wrap .detail_list{margin-bottom: 29px;}
#sec01 .wrap .detail_list ul{ display: block; padding: 10px;}
#sec01 .wrap .detail_list ul li{ margin-right: 0;}
#sec01 .wrap .detail_list ul li:not(:last-child){ margin-bottom: 10px;}
.option_detail #sec01 .wrap .gray_box {margin-bottom: 24px;}
.option_detail #sec01 .wrap .gray_box .large{ font-size: 4.53vw;}
#sec01 .wrap .sub_wrap .option_box .attention_text{ font-size: 3.75vw;font-feature-settings: 'palt';margin-top: 5px;}
#sec01 .wrap .sub_wrap .option_box .attention_text.nowrap{white-space: inherit;}
.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{ font-size: 4.53vw;margin-right: 0;text-align: center;}
#sec01 .wrap .sub_wrap .option_box .category_icon{ margin: 0 0 5px;}
#sec01 .wrap .option_box .basic_p{font-size: 3.75vw;line-height: 1.79em;font-feature-settings: 'palt';}
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_text,
#sec01 .wrap .sub_wrap .option_box#option06 .option_inner .option_text{width: 100%;}
#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,
#sec01 .wrap .w2l .option_box .option_pic{ width: 100%;margin: 10px auto 0!important;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic,
#sec01 .wrap .sub_wrap .option_box#option04 .option_inner .option_pic{ width: 65%;margin: 10px auto 0!important;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul{ display: block;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li{ width: 100%; height: auto;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(1) .wrap{width: 100%;height: 32.53vw;padding: 5px;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(1) .wrap span:not(.qr){ font-size: 2.81vw;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(2){width: 100%; height: auto; margin-bottom: 10px;overflow: hidden;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(2) img{width: 100%;height: 100%;object-fit: cover;}
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic ul li:nth-child(3){width: 100%;}
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic, 
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_pic, 
#sec01 .wrap .sub_wrap .option_box#option06 .option_inner .option_pic{width: 100%;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_pic ul li:nth-child(1){ width: 30%;margin-bottom: 10px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic{margin-top: 10px!important;}
#sec01 .wrap .option_box .option_pic img {width: 100%;height: auto;}
#sec01 .wrap .sub_wrap .option_box .category_icon li{ font-size: 3.5vw;}
#sec01 .wrap .sub_wrap .option_box .model_text{text-indent: -4.3em;line-height: 1.16em;margin-bottom: 5px;padding: 5px 0 5px 4.3em;}

#sec01 .wrap .sub_wrap .compatible_models .table_wrap{ overflow-x: scroll;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .bg03{width: 12.5vw;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table{min-width: 183.4375vw; table-layout: auto;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table thead tr:nth-child(1) th, 
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table thead tr:nth-child(2) td {padding: 5px 2px;font-feature-settings: 'palt';}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table th,
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table td{ min-width: 3em; font-size: 3.7vw; padding: 5px;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table th{ width:calc(100vw / 3);}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table td{ width:calc(100vw / 6);}
#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;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w104px{width: 32.5vw;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w104px:not(:nth-child(2)){width: 18.75vw;min-width: inherit;text-align: center;padding: 5px 2px;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w91px{width: 20vw;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w208px{ width: 51.25vw;}

#sec01 .wrap .sub_wrap .option_box .option02_btm{ display: block; margin-top: 10px;}
#sec01 .wrap .sub_wrap .option_box .option02_btm p{ width: 100%; font-size: 3.5vw; line-height: 1.79em; margin-bottom: 5px;}
#sec01 .wrap .sub_wrap .option_box .option02_btm table{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box .option02_btm table tr th,
#sec01 .wrap .sub_wrap .option_box .option02_btm table tr td{ font-size: 3.5vw;}
#sec01 .wrap .sub_wrap .option_box .movie_box{ position: relative; width: 100%; padding-top: 56.25%;}
#sec01 .wrap .sub_wrap .option_box .movie_box iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
}