@charset "UTF-8";

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

PC Setting

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sec01 img{ width: 100%; height: auto;}
#sec01 .wrap .main{ width: 100%;}
#sec01 .wrap .main .inner{ width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#sec01 .wrap .main .inner .img{ max-width: 415px; margin: 0 0 0 60px;}
#sec01 .wrap .main .inner .txt{ flex: 1; max-width: 605px;}

#sec01 .wrap .box{ margin-top: 50px; padding: 35px 0 20px;}
#sec01 .wrap .box .flex p{ width: calc((100% - 90px)/3); height: 100%; text-align: left; line-height: 1.75; margin: 0 0 40px; padding: 15px 30px; border-radius: 20px;}
#sec01 .wrap .box .flex p + p{ margin-left: 15px;}

#sec01 .wrap .sub_wrap{ max-width: 1080px; width: 100%; margin: 0 auto;}
#sec01 .wrap .option_box{ margin-bottom: 50px;}
#sec01 .wrap .option_box .annotation_p{ text-align: right; margin-top: 15px;}
#sec01 .wrap #option01.option_box .inner{ display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: calc((100% - 40px)/2);}
#sec01 .wrap #option01.option_box .inner + .inner{ margin-left: 40px;}
#sec01 .wrap #option01.option_box .inner .left{ display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative;}
#sec01 .wrap #option01.option_box .inner .left::after{ content: ""; display: inline-block; width: 50px; height: 65px; margin: auto; background: url("../images/option/detail13/pic_arrow@2x.png") no-repeat center center / contain; position: absolute; top: -1em; right: 0; bottom: 0; left: 5px;}
#sec01 .wrap #option01.option_box .inner .left .img{ width: calc((100% - 45px)/2); max-width: 120px;}
#sec01 .wrap #option01.option_box .inner .left .img + .img{ margin-left: 45px;}
#sec01 .wrap #option01.option_box .inner .left .img img{ width: auto; height: auto; max-width: 100%; vertical-align:top;}
#sec01 .wrap #option01.option_box .inner .left .img p{ text-align: center;}
#sec01 .wrap #option01.option_box .inner .right{ flex: 1; margin: 0 0 0 20px;}

#sec01 .wrap #option02.option_box .flex{ margin-top: 30px;}
#sec01 .wrap #option02.option_box .inner{ display: flex; width: calc((100% - 40px)/2);}
#sec01 .wrap #option02.option_box .inner + .inner{ margin-left: 40px;}
#sec01 .wrap #option02.option_box .inner .left{ flex: 1; margin: 0 10px 0 0;}
#sec01 .wrap #option02.option_box .inner .left .large{ margin-bottom: 10px;}
#sec01 .wrap #option02.option_box .inner .right .img{ max-width: 250px; text-align: center; margin: auto;}
#sec01 .wrap #option02.option_box .inner .right .img img{ width: auto; height: auto; max-width: 100%; vertical-align: top;}

#sec01 .wrap #option03.option_box .ttltype4{ margin: 10px 0 40px;}
#sec01 .wrap #option03.option_box .ttltype4:first-of-type{ margin-top: 30px;}
#sec01 .wrap #option03.option_box .flex{ margin-top: 30px; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
#sec01 .wrap #option03.option_box .left{}
#sec01 .wrap #option03.option_box .left .img{ width: 120px;}
#sec01 .wrap #option03.option_box .left .img img{ width: auto; height: auto; max-width: 100%; vertical-align: top;}
#sec01 .wrap #option03.option_box .left .img p{ text-align: center;}
#sec01 .wrap #option03.option_box .right{ flex: 1; margin: 0 0 0 40px;}
#sec01 .wrap #option03.option_box .table_wrap{}
#sec01 .wrap #option03.option_box .table_wrap table{width: 100%; border-collapse: collapse;}
#sec01 .wrap #option03.option_box .table_wrap table th{ color: #FFFFFF; text-align: center; background-color: #007ac5; vertical-align: middle; line-height: 1.2;}
#sec01 .wrap #option03.option_box .table_wrap table td{ text-align: center; background-color: #fff;}
#sec01 .wrap #option03.option_box .table_wrap table th,
#sec01 .wrap #option03.option_box .table_wrap table td{ border: 1px solid #c1c1c1; font-size: 1.3rem; line-height: 1.3; padding: 15px 30px;}
#sec01 .wrap #option03.option_box .table_wrap table .w11em{ width: 11em;}
#sec01 .wrap #option03.option_box .table_wrap table .w14em{ width: 14em;}
#sec01 .wrap #option03.option_box .table_wrap table .bg01{background-color:#fcf6eb;}

@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 .img{ margin: 0 0 0 30px;}
#sec01 .wrap .main .inner .txt .copy{ font-size: 2.2rem;}

#sec01 .wrap .box{ margin-top: 30px; padding: 20px 10px;}
#sec01 .wrap .box .flex{ display: block;}
#sec01 .wrap .box .flex p{ width: auto; max-width: 500px; margin: 0 auto 20px;}
#sec01 .wrap .box .flex p + p{ margin-left: auto;}

#sec01 .wrap .option_box{ margin-bottom: 30px;}
#sec01 .wrap #option01.option_box .inner{ display: block;}
#sec01 .wrap #option01.option_box .inner .left::after{ width: 60px; height: 78px; top: -2em; left: 10px;}
#sec01 .wrap #option01.option_box .inner .right{ margin: 10px 0 0;}
#sec01 .wrap #option02.option_box .inner{ -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse;}
#sec01 .wrap #option02.option_box .inner .left{ width: 100%; margin: 15px 0 0;}
#sec01 .wrap #option02.option_box .inner .right{ width: 100%;}
#sec01 .wrap #option03.option_box .right{ margin: 0 0 0 20px;}
#sec01 .wrap #option03.option_box .table_wrap table .w11em{ width: auto; min-width: 7em;}
#sec01 .wrap #option03.option_box .table_wrap table .w14em{ width: auto; min-width: 11em;}
}

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

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

SP Setting

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

@media screen and (max-width: 767px) {
.tab_only,
.sp_none{ display: none;}
#sec01 .wrap .main{ height: auto; margin-bottom: 20px; background-image: none;}
#sec01 .wrap .main .inner{ width: 94%; display: block;}
#sec01 .wrap .main .inner .img{ position: relative; width: 100%; height: auto; max-width: 100%; margin: 0;}
#sec01 .wrap .main .inner .txt .copy{ line-height: 1.5; margin: 20px 0 10px;}

#sec01 .wrap .box{padding: 20px 20px 10px;}

#sec01 .wrap .option_box .annotation_p{ margin-top: 5px;}
#sec01 .wrap #option01.option_box .flex{ display: block;}
#sec01 .wrap #option01.option_box .inner{ width: 100%;}
#sec01 .wrap #option01.option_box .inner + .inner{ margin: 25px 0 0;}
#sec01 .wrap #option01.option_box .inner .left .img{ width: calc((100% - 50px)/2); max-width: 50%;}
#sec01 .wrap #option01.option_box .inner .left .img img{ width: 100%;}
#sec01 .wrap #option01.option_box .inner .left .img p{ font-size: 4vw;}
#sec01 .wrap #option01.option_box .inner .right{ margin-top: 0;}
#sec01 .wrap #option02.option_box .flex{ display: block; margin-top: 20px;}
#sec01 .wrap #option02.option_box .inner{ display: block; width: 100%;}
#sec01 .wrap #option02.option_box .inner + .inner{ margin: 20px 0 0;}
#sec01 .wrap #option02.option_box .inner .left{ margin:0 0 10px;}
#sec01 .wrap #option02.option_box .inner .left .large{ margin: 0;}
#sec01 .wrap #option02.option_box .inner .right .img{ max-width: 100%;}
#sec01 .wrap #option03.option_box .ttltype4{ margin: 10px 0 20px;}
#sec01 .wrap #option03.option_box .ttltype4:first-of-type{ margin-top: 20px;}
#sec01 .wrap #option03.option_box .flex{ display: block; margin-top: 20px;}
#sec01 .wrap #option03.option_box .left{ display: flex; width: 100%;}
#sec01 .wrap #option03.option_box .left .img{ width: calc((100% - 10px)/2);max-width: 50%;}
#sec01 .wrap #option03.option_box .left .img + .img{ margin-left: 10px;}
#sec01 .wrap #option03.option_box .left .img p{ font-size: 4vw;}
#sec01 .wrap #option03.option_box .right{margin:15px 0 0;}
#sec01 .wrap #option03.option_box .table_wrap{ overflow-x: scroll;}
#sec01 .wrap #option03.option_box .table_wrap table{min-width: 670px;}
#sec01 .wrap #option03.option_box .table_wrap table th,
#sec01 .wrap #option03.option_box .table_wrap table td{ font-size: 3.7vw; padding: 5px 10px;}
#sec01 .wrap #option03.option_box .table_wrap table .sp_left{text-align:left;}
}