@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{ max-width: 510px; width: 49%; 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{ max-width: 510px; width: 49%;}
#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;}

@media screen and (max-width: 1200px) {
#sec01 .wrap{ width: 100%;}
#sec01 .wrap .main .inner{ width: calc(94% - 40px); max-width: inherit;}
#sec01 .wrap .sub_wrap{ width: calc(94% - 40px); max-width: inherit;}
#sec01 .wrap .option_box{ margin-bottom: 40px;}
#sec01 .wrap .option_box .option_pic{ margin: 20px auto;}
}

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

@media screen and (max-width: 1100px) {
#sec01 .wrap .main .inner{ width: 94%;}
#sec01 .wrap .sub_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;}
.option_detail .flex.main .copy{ font-size: 2.3rem!important;}
}

@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: center;}
#sec01 .wrap .youtube{ width: 94%; margin: 0 auto 30px;}
#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;}
}