@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{-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 30px;}
#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: 70px;}
#sec01 .wrap .option_box .basic_p span{ display: inline-block; font-size: 112.5%; font-weight: 700; margin-bottom: 5px;}
#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 0; text-align: center;}
#sec01 .wrap .option_box .option_pic img{ width: auto; height: auto; max-width: 100%; max-height: 100%;}
#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 .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_inner{ width: calc(50% - 20px);}

#sec01 .wrap .sub_wrap .option_box .option_inner{ display: flex; justify-content: space-between;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_text{ flex: 1;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_pic { margin-left: 40px;}
#sec01 .wrap .sub_wrap .option_box .option_pic ul{ display: flex; justify-content: space-between;}

/*option01*/
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic{ width: 280px;}
/*option02*/
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic{ width: 550px;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic ul{ -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic ul li{ flex: 1;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic ul li:nth-child(2){ width: 295px;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic ul li p{ font-size: 10px; text-indent: -1em; margin-top: 10px;  padding-left: 1em;}
#sec01 .wrap .sub_wrap .option_box#option02 .option02_btm{ background-color: #d2d5ec; border-radius: 10px; padding: 15px; box-sizing: border-box; display: flex; justify-content: space-between; margin-top: 10px;}
#sec01 .wrap .sub_wrap .option_box#option02 .option02_btm a{ text-decoration: underline; color: #0e57a2;}
#sec01 .wrap .sub_wrap .option_box#option02 .option02_btm a::after{ content: none;}
#sec01 .wrap .sub_wrap .option_box#option02 .option02_btm p span{ display:block; font-size: 87.5%; line-height: 1.4; text-indent: -0.75em; margin-top: 10px; padding-left: 0.75em;}
/*option03*/
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic{ width: 280px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm{ margin-top: 10px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .ttl{ font-weight: 700; margin-bottom: 10px; padding-left: 15px; position: relative;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .ttl::before{ display: block; content: ""; width: 7px; height: 7px; background-color: #0e57a2; position: absolute; top: 12px; left: 5px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row{ display: flex; justify-content: space-between;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell{ width:calc((100% - 15px)/2); height: 100%; }
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell table{ width: 100%; border: 1px solid #333; border-collapse: collapse; box-sizing: border-box;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell table caption{ font-size: 87.5%; font-weight: 700; text-align: left; padding-bottom: 5px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell table th,
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell table td{ font-size: 87.5%; line-height: 1.4; padding: 5px 10px; border: 1px solid #333; box-sizing: border-box;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell table .w1em{ width: 1em;}
/*option04*/
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic ul li:first-child{ flex: 1;margin-right: 30px;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic ul li p{ text-indent: -1.5em; padding-left: 1.5em;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic ul li p:first-of-type{ margin-top: 10px;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic ul li p::before{content:"";display:inline-block;width:1em;height:1em;vertical-align:top;margin-top:0.4em;margin-right:0.5em;border-radius:50%;border:1px solid #333;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic .note{ display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding:15px 20px; border:1px solid #e50012; border-radius:5px;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic .note dl{ flex: 1;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic .note dl dt{ font-size: 125%; font-weight: 700; line-height: 1.4;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic .note dl dd{ font-size: 81.25%; text-indent: -1em; line-height: 1.5; margin-top: 10px; padding-left: 1em;}
/*option05*/
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_pic{ width: 510px;}
/*option06-09*/
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner { margin-top: 20px;}
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_pic{ width: 240px;margin: 0 20px 0 0;}
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_text .inner:nth-child(2){ margin-top: 20px;}
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_text .ttl{ font-weight: 700; line-height: 1.5; margin-bottom: 10px; padding: 5px 8px; background-color: #d2d5ec;}
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_text .model_text{ margin-bottom: 10px;}

#sec01 .wrap .sub_wrap .compatible_models{ text-align: center;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table{width: 100%; border-collapse: collapse;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table thead th,
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table thead td{ border-bottom: none;}
#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:auto; border: 1px solid #c1c1c1; font-size: 1.3rem; line-height: 1.3; padding: 5px 20px;box-sizing: border-box;}
#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; padding: 5px 10px; color: #FFF; background-color: #777;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w10em{ width: 10em;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w22em{ width: 22em;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .tal{ text-align: left;}

/*動画*/
#sec01 .wrap .sub_wrap .option_box .movie_box{ text-align: center; margin: 30px auto 0;}

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

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

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

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: 650px; margin: 0 auto;}
#sec01 .wrap .sub_wrap .option_box .option_inner{ display: block;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_text{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_pic { margin: 20px auto 0;}

/*option04*/
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic ul li:first-child{ flex: auto; width: 50%;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic .note dl{ flex: auto;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic .note .img{width:39%;}
/*option06-09*/
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_pic{ width: 100%; margin: 0;}
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_text{ margin-top: 20px;}

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

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

@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,
#sec01 .wrap .sub_wrap .option_box#option02 .option02_btm a{ -webkit-transition: all 0.3s; transition: all 0.3s;}
#sec01 .wrap .main .inner .txt ul li a:hover,
#sec01 .wrap .sub_wrap .option_box#option02 .option02_btm 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{ margin-top: 15px;}
#sec01 .wrap .main .inner .txt ul li{ text-align: left;}
#sec01 .wrap .option_box{ margin-bottom: 30px;}
#sec01 .wrap .option_box .annotation_p{ font-size: 3.5vw;}
#sec01 .wrap .option_box .option_pic{ margin: 10px auto 0;}
#sec01 .wrap .option_box h3{ font-size: 4.8vw; line-height: 1.5;}
#sec01 .wrap .option_box h4{ font-size: 3.8vw;}
    
#sec01 .wrap .sub_wrap .option_box .attention_text{ font-size: 3.5vw;}
#sec01 .wrap .sub_wrap .option_box .option_inner .option_pic{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box .option_pic img{ width: 100%; max-height: initial;}
#sec01 .wrap .sub_wrap .option_box .option_pic ul{ display: block;}
#sec01 .wrap .sub_wrap .option_box .option_pic ul li + li{ margin-top: 10px;}

/*option01*/
#sec01 .wrap .sub_wrap .option_box#option01 .option_inner .option_pic{ width: 100%;}
/*option02*/
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic ul li:nth-child(2){ width: 100%;}
#sec01 .wrap .sub_wrap .option_box#option02 .option_inner .option_pic ul li p{ font-size: 3.6vw;}
#sec01 .wrap .sub_wrap .option_box#option02 .option02_btm p{line-height: 1.4;}
/*option03*/
#sec01 .wrap .sub_wrap .option_box#option03 .option_inner .option_pic{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .ttl{ font-size: 3.8vw;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row{ display: block;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell{ width: 100%;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell + .cell{ margin-top: 10px;}
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell table th,
#sec01 .wrap .sub_wrap .option_box#option03 .option03_btm .row .cell table td{ font-size: 4vw;}
/*option04*/
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic ul{ display: block;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic ul li:first-child{ width: 100%; margin-right: 0;}
#sec01 .wrap .sub_wrap .option_box#option04 .option_pic .note{ padding: 10px 15px;}
/*option05*/
#sec01 .wrap .sub_wrap .option_box#option05 .option_inner .option_pic{ width: 100%;}
/*option06-09*/
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_text{ display: flex; margin-top: 10px;}
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_text .inner:nth-child(1){ width: 50%;}
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_text .inner:nth-child(2){ width: 50%; margin: 0 0 0 10px;}
#sec01 .wrap .sub_wrap .option_box#option06-09 .option_inner .option_text .ttl{ font-size: 4vw;}

#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 .table_wrap table .w10em{ width: 6em;}
#sec01 .wrap .sub_wrap .compatible_models .table_wrap table .w22em{ width: 15em;}

/*動画*/
#sec01 .wrap .sub_wrap .option_box .movie_box{ position: relative; width: 100%; margin: 10px 0 0; padding-top: 56.25%;}
#sec01 .wrap .sub_wrap .option_box .movie_box iframe { position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
}