@charset "UTF-8";

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

PC Setting

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#sec01 img{ width: 100%; height: auto;}
#sec01 .wrap{ max-width: none;}
#sec01 .wrap .main{ width: 100%;}
#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;}
#sec01 .wrap .main .inner .txt{ max-width: 510px; width: 49%;}
#sec01 .wrap .sub_wrap{ max-width: 1080px; width: 100%; margin: 0 auto;}
#sec01 .wrap .option_box{ margin-bottom: 50px;}
#sec01 .wrap #option01.option_box p.blue{ margin-bottom: 50px; font-weight: 700; font-size: 3rem; text-align: center;}
#sec01 .wrap .option_box .option_pic{ margin: 0 auto 50px; text-align: center;}
#sec01 .wrap .option_box .option_pic img{ max-width: 740px;}
#sec01 .wrap .option_box .point_box{ border: 2px solid #0E57A2; padding: 35px 70px; box-sizing: border-box;}
#sec01 .wrap .option_box .point_box p{ text-align: center; font-weight: 700;}
#sec01 .wrap .option_box .point_box p.blue{ margin-bottom: 25px;}
#sec01 .wrap .option_box .point_box ul{ text-align: center; display: flex; margin-bottom: 25px;}
#sec01 .wrap .option_box .point_box ul li{ width: calc(33.3333% - 10px); text-align: center; background-color: #EEEEEE; font-weight: 700; margin-right: 20px; padding: 20px; box-sizing: border-box; border-radius: 35px;}
#sec01 .wrap .option_box .point_box ul li:nth-child(3){ margin-right: 0;}

#sec01 .wrap .option_box .inner{ display: flex; justify-content: space-between;}
#sec01 .wrap .option_box .inner .left,
#sec01 .wrap .option_box .inner .right{ width: 520px;}
#sec01 .wrap .option_box .inner .right h3{ margin-bottom: 20px; font-weight: 700;}
#sec01 .wrap #option02.option_box .inner .right ul{ margin-bottom: 50px;}
#sec01 .wrap #option02.option_box .inner .right ul li:before{ content: '■'; color: #007ac5;}
#sec01 .wrap #option02.option_box .inner .right h4{ color: #0E57A2; font-weight: 700; border-bottom: 3px solid #007AC5; margin-bottom: 30px;}
#sec01 .wrap #option02.option_box .inner .right .trouble{ position: relative;}
#sec01 .wrap #option02.option_box .inner .right .trouble p:nth-child(1){ width: 340px; height: auto;}
#sec01 .wrap #option02.option_box .inner .right .trouble p:nth-child(2){ position: absolute; bottom: -20px; right: 0;}
#sec01 .wrap #option03.option_box .inner div{ display: flex; flex-direction: row-reverse;}
#sec01 .wrap #option03.option_box .inner div .pic img{ max-width: none;}
#sec01 .wrap #option03.option_box .inner div.left .pic{ width: 160px; height: auto;}
#sec01 .wrap #option03.option_box .inner div.right .pic{ width: 321px; height: auto;}
#sec01 .wrap #option03.option_box .inner div.left p{ width: calc(100% - 170px);}
#sec01 .wrap #option03.option_box .inner div.right p{ width: calc(100% - 331px);}
#sec01 .wrap #option03.option_box .inner div p{ margin-right: 10px;}
#sec01 .wrap #option03.option_box .illust{ width: 267px; height: auto; margin-top: -60px;}
@media screen and (min-width: 768px) {
#sec01 .wrap .option_box .attention{ border: 1px solid #26437F; background-color: #EEF6F9; border-radius: 10px; display: flex; padding: 20px; box-sizing: border-box; margin-top: -10px;}
#sec01 .wrap .option_box .attention .left,
#sec01 .wrap .option_box .attention .right{ width: 50%; display: flex;}
#sec01 .wrap .option_box .attention .left .attention_title{ width: 70px; height: 70px; position: relative;  margin: 25px 0 0 25px;}
#sec01 .wrap .option_box .attention .left .attention_title::before{ content: ''; display: block; width: 70px; height: 70px; background-color: #26437F; transform: rotate(45deg);}
#sec01 .wrap .option_box .attention .left .attention_title h5{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); color: #fff; width: 100%; text-align: center;}
#sec01 .wrap .option_box .attention .left .pic01{ margin-left: 80px;}
#sec01 .wrap .option_box .attention .right .pic02{ width: 120px; height: 120px; margin-right: 20px;}
#sec01 .wrap .option_box .attention .right p{ width: calc(100% - 140px);}
}

@media screen and (max-width: 1200px) {
#sec01 .wrap{ width: 100%;}
#sec01 .wrap #option01.option_box p.blue{ margin-bottom: 40px; font-size: 2.2rem;}
#sec01 .wrap .option_box .option_pic{ margin: 0 auto 40px;}
#sec01 .wrap .option_box .inner .left,
#sec01 .wrap .option_box .inner .right{ width: calc(50% - 15px);}
#sec01 .wrap .option_box .inner .left{ margin-right: 30px;}
#sec01 .wrap .option_box .inner .right ul{ margin-bottom: 30px;}
}

@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.2rem!important;}
#sec01 .wrap .option_box .point_box{ padding: 25px 50px;}
#sec01 .wrap .option_box .inner .left,
#sec01 .wrap .option_box .inner .right{ width: 100%; margin-bottom: 30px;}
#sec01 .wrap .option_box .inner .left{ margin-right: 20px;}
#sec01 .wrap #option02.option_box .inner .right h3{ font-size: 1.8vw; margin-bottom: 10px;}
#sec01 .wrap #option02.option_box .inner .right ul{ margin-bottom: 20px;}
#sec01 .wrap #option02.option_box .inner .right ul li{ font-size: 1.8vw;}
#sec01 .wrap #option02.option_box .inner .right h4{ margin-bottom: 20px;}
#sec01 .wrap #option02.option_box .inner .right .trouble p:nth-child(1){ width: 70%; height: auto;}
#sec01 .wrap #option02.option_box .inner .right .trouble p:nth-child(2){ width: 140px; bottom: 0;}
#sec01 .wrap #option03.option_box .inner{ display: block;}
#sec01 .wrap #option03.option_box .inner div.left p{ width: calc(100% - 180px);}
#sec01 .wrap #option03.option_box .inner div.right p{ width: calc(100% - 341px);}
#sec01 .wrap #option03.option_box .illust{ width: 220px;}
#sec01 .wrap .option_box .attention .left .pic01{ margin-left: 40px;}
}

@media screen and (min-width: 768px) {
.pc_none{ display: none;}
#sec01 .wrap .main .inner{ flex-direction: row-reverse;}
}

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

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%;}
#sec01 .wrap .main .inner .txt{ width: 94%; max-width: inherit; margin: 0 auto;}
#sec01 .wrap .main .inner .txt p{ font-size: 3.9vw; line-height: 1.6;}

#sec01 .wrap .option_box .point_box{ padding: 20px 10px;}
#sec01 .wrap #option01.option_box p.blue{ margin-bottom: 25px; line-height: 1.6;}
#sec01 .wrap .option_box .point_box p{ font-size: 5vw; line-height: 8vw;}
#sec01 .wrap .option_box .point_box p.blue{ margin-bottom: 20px;}
#sec01 .wrap .option_box .point_box ul{ display: block; margin-bottom: 15px;}
#sec01 .wrap .option_box .point_box ul li{ font-size: 5vw; width: 100%; margin-right: 0; margin-bottom: 10px; padding: 5px;}
#sec01 .wrap .option_box .point_box ul li:nth-child(3){ margin-bottom: 0;}

#sec01 .wrap .option_box .inner{ display: block;}
#sec01 .wrap .option_box .inner .left,
#sec01 .wrap .option_box .inner .right{ width: 100%; margin-bottom: 20px;}
#sec01 .wrap #option02.option_box .inner .right h3{ margin-bottom: 10px; font-size: 3.5vw;}
#sec01 .wrap #option02.option_box .inner .right ul{ margin-bottom: 30px;}
#sec01 .wrap #option02.option_box .inner .right ul li{ font-size: 3.5vw; line-height: 1.7;}
#sec01 .wrap #option02.option_box .inner .right .trouble{ position: relative;}
#sec01 .wrap #option02.option_box .inner .right .trouble p:nth-child(1){ width: 100%;}
#sec01 .wrap #option02.option_box .inner .right .trouble p:nth-child(2){ position: relative; bottom: 0; right: 0; text-align: center; margin: 0 auto;}
#sec01 .wrap #option02.option_box .inner .right .trouble p:nth-child(2){ width: 190px;}
#sec01 .wrap #option03.option_box .inner div{ display: block;}
#sec01 .wrap #option03.option_box .inner div.left .pic,
#sec01 .wrap #option03.option_box .inner div.right .pic{ width: 100%; height: 170px; border: 1px solid #DDDDDD; box-sizing: border-box; position: relative; overflow: hidden; margin-bottom: 10px;}
#sec01 .wrap #option03.option_box .inner div.left .pic img,
#sec01 .wrap #option03.option_box .inner div.right .pic img{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: auto; height: 100%;}
#sec01 .wrap #option03.option_box .inner div.left p,
#sec01 .wrap #option03.option_box .inner div.right p{ margin-right: 0; width: 100%;}
#sec01 .wrap #option03.option_box .illust{ text-align: center; margin: 0 auto 30px;}
#sec01 .wrap #option03.option_box .illust img{ width: 80%;}
#sec01 .wrap #option03.option_box .illust{ width: 330px;}

#sec01 .wrap .option_box .attention{ border: 1px solid #26437F; background-color: #EEF6F9; border-radius: 6px; box-sizing: border-box;}
#sec01 .wrap .option_box .attention .right{ display: flex; padding: 10px; box-sizing: border-box;}
#sec01 .wrap .option_box .attention .left .attention_title h5{ text-align: center; color: #fff; background-color: #26437F; border-radius: 4px 4px 0 0; font-weight: 700;}
#sec01 .wrap .option_box .attention .left .pic01{ padding: 10px; box-sizing: border-box;}
#sec01 .wrap .option_box .attention .right .pic02{ width: 90px; height: 90px; margin-right: 10px;}
#sec01 .wrap .option_box .attention .right .pic02 img{ width: 90px; height: 90px;}
#sec01 .wrap .option_box .attention .right p{ width: calc(100% - 100px);}


}