@charset "UTF-8";

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

PC Setting

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

#sec01 .wrap{ max-width: none;}
/**/
#sec01 .wrap .box01{ width: 100%; margin-bottom: 50px;}
#sec01 .wrap .box01 .inner{ width: 1080px; margin: 0 auto; display: flex; vertical-align: middle; align-items: center; justify-content: space-between;}
.option_detail .flex.main .img{ margin-right: 0;}
#sec01 .wrap .box01 .inner .img{ width: 40%; margin-top: 0;}
#sec01 .wrap .box01 .inner .img img{ width: 100%; height: auto;}
#sec01 .wrap .box01 h2.txt{ font-size: 3.0rem; font-weight: bold;}

/**/
#sec01 .wrap .box02{ margin-bottom: 80px;}
#sec01 .wrap .box02 .inner{ max-width: 780px; width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
#sec01 .wrap .box02 .inner .text_box{ width: calc(100% - 260px);}
#sec01 .wrap .box02 .inner .text_box .text_box_top{ border-bottom: 1px solid #000; display: flex; justify-content: space-between; align-items: flex-end;}
#sec01 .wrap .box02 .inner .text_box .text_box_top h3{ font-size: 2.2rem; margin-bottom: 5px;}
#sec01 .wrap .box02 .inner .text_box .text_box_top ul{ margin: 0 0 10px 0; display: flex;}
#sec01 .wrap .box02 .inner .text_box .text_box_top ul li{ display: inline-block; padding: 0 15px; color: #fff; border-radius: 100vh; display: block; margin-left: 5px; text-align: center; margin-bottom: 5px;}
#sec01 .wrap .box02 .inner .text_box .text_box_top ul li.icon01{ background-color: #f6ab00;}
#sec01 .wrap .box02 .inner .text_box .text_box_top ul li.icon02{ background-color: #2ea7e0;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm{ background-color: #eeeeef; padding: 30px; box-sizing: border-box;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex{ justify-content: center; align-items: center; margin-bottom: 20px;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex p{ background-color: #7e8eb2; font-size: 1.8rem; padding: 5px 15px; box-sizing: border-box; color: #fff; margin-right: 30px;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex ul{}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex ul li{ font-size: 1.8rem;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex ul li span{ display: inline-block; font-size: 1.2rem; background-color: #ff0000; color: #fff; padding: 0 5px; box-sizing: border-box; margin-left: 10px;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm > p{ text-indent: -1em; padding-left: 1em;}
#sec01 .wrap .box02 .inner .pic_box{ width: 230px; height: 230px;}
#sec01 .wrap .box02 .inner .pic_box img{ width: 230px; height: 230px; object-fit: cover;}


#sec01 .wrap .w2l{ display: flex; justify-content: space-between; flex-wrap: wrap;}
#sec01 .wrap .w2l > div{ width: calc(50% - 30px);}

/**/
#sec01 .wrap .box03{ width: 1080px; margin: 0 auto;}
#sec01 .wrap .box03 .option_box .option_pic{ width: 100%; height: auto;}
#sec01 .wrap .box03 .option_box .option_pic img{ width: 100%; height: auto;}
#sec01 .wrap .box03 h3.labelttl2{ font-size: 2rem; position: relative; color: #0e57a2; font-weight: 700; padding-left: 25px; margin-bottom: 15px;}
#sec01 .wrap .box03 h3.labelttl2:before{ content: ''; display: block; width: 15px; height: 15px; background-color: #0e57a2; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

/**/
#sec01 .wrap .box04{ width: 1080px; margin: 0 auto;}
#sec01 .wrap .box04 #option03{ margin-bottom: 80px;}
#sec01 .wrap .box04 #option03 h2{ font-size: 1.87rem; color: #0e57a2; padding: 0 0 5px 1em; font-weight: bold; margin: 40px 0 30px; border-bottom: 3px solid #007ac5; letter-spacing: -0.01em;}
#sec01 .wrap .box04 #option03 .option03_list{}
#sec01 .wrap .box04 #option03 .option03_list .option03_top{ display: flex; justify-content: space-between; margin-bottom: 30px;}
#sec01 .wrap .box04 #option03 .option03_list .option03_top .option_box{ width: calc(33.33333% - 40px);}
#sec01 .wrap .box04 #option03 .option03_list .option_box h3{ font-size: 1.8rem; position: relative; padding: 0 0 5px 25px;}
#sec01 .wrap .box04 #option03 .option03_list .option_box h3 span{ display: inline-block; font-size: 1.2rem; background-color: #ff0000; color: #fff; padding: 0 5px; box-sizing: border-box; margin-left: 10px;}
#sec01 .wrap .box04 #option03 .option03_list .option_box h3::before{ content: ''; display: block; width: 10px; height: 35px; background-color: #0071bc; position: absolute; left: 0; bottom: 0;}
#sec01 .wrap .box04 #option03 .option03_list .option03_top .option_box .option_pic{ margin-bottom: 10px;}
#sec01 .wrap .box04 #option03 .option03_list .option03_top .option_box .option_pic img{ width: 100%; height: auto;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box{ position: relative;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box p.lp_subtitle{ position: absolute; top: 2px; left: 190px;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box .flex{ justify-content: space-between;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box .flex .option_pic{ width: 690px; height: auto;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box .flex .option_pic img{ width: 100%; height: auto;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box .flex .option_text{ width: calc(100% - 760px);}

/**/
#sec01 .wrap .box05{ width: 1080px; margin: 0 auto;}
#sec01 .wrap .box05 h2{ font-size: 1.87rem; color: #0e57a2; padding: 0 0 5px 1em; font-weight: bold; margin: 40px 0 30px; border-bottom: 3px solid #007ac5; letter-spacing: -0.01em;}
#sec01 .wrap .box05 .option_box{ margin-bottom: 50px;}
#sec01 .wrap .box05 .option_box .category_icon{ display: flex; justify-content: flex-end; margin: -55px 10px 25px 0;}
#sec01 .wrap .box05 .option_box .category_icon li{ color: #fff; padding: 0 15px; border-radius: 100vh; display: inline-block; margin-left: 5px;}
#sec01 .wrap .box05 .option_box .category_icon .icon01{ background-color: #f6ab00;}
#sec01 .wrap .box05 .option_box .category_icon .icon02{ background-color: #2ea7e0;}
#sec01 .wrap .box05 .option_box .category_icon .icon03{ background-color: #45b035;}
#sec01 .wrap .box05 .option_box .model_text{ font-weight: 700; border-bottom: 2px solid #000; margin-bottom: 15px;}
#sec01 .wrap .box05 .option_box .option_text{ margin-bottom: 20px;}
#sec01 .wrap .box05 .option_box .option_pic{ margin: 0 auto; text-align: center;}
#sec01 .wrap .box05 .option_box .option_pic.pic_tate{ width: 250px;}
#sec01 .wrap .box05 #option04 .flex{ display: flex; justify-content: space-between;}
#sec01 .wrap .box05 #option04 .flex .basic_p{ width: calc(50% - 30px);}
#sec01 .wrap .box05 #option04 .flex .option_pic{ width: calc(50% - 30px); height: auto;}
#sec01 .wrap .box05 #option04 .flex .option_pic img{ width: 100%; height: auto;}


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

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

@media screen and (max-width: 1100px) {
}

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

TABLET Setting

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

@media screen and (max-width: 1024px) {

/**/
#sec01 .wrap .box01 .inner{ width: 100%;}
#sec01 .wrap .box01 .inner .img{ width: 40%; margin: 0 auto;}
#sec01 .wrap .box01 h2.txt{ font-size: 2.5rem; text-align: center; margin-bottom: 20px;}

/**/
#sec01 .wrap .box02 .inner .text_box .text_box_top h3{ line-height: 1.3em; margin-bottom: 10px;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex p{ display: inline-block; margin-bottom: 10px;}
#sec01 .wrap .box02 .inner .text_box .text_box_top ul li{  display: inline-block; padding: 0 15px; font-size: 1.6rem;}

/**/
#sec01 .wrap .box03{ width: 100%;}
#sec01 .wrap .w2l > div{ width: calc(50% - 15px);}

/**/
#sec01 .wrap .box04{ width: 100%;}
#sec01 .wrap .box04 #option03 .option03_list .option03_top .option_box{ width: calc(33.33333% - 20px);}
#sec01 .wrap .box04 #option03 .option03_list .option_box h3{ font-size: 1.6rem; padding: 0 0 5px 20px;}
#sec01 .wrap .box04 #option03 .option03_list .option_box h3 span{ margin-left: 5px;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box .flex{ display: block;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box .flex .option_pic{ width: 100%; height: auto;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box .flex .option_text{ width: 100%; height: auto;}

/**/
#sec01 .wrap .box05{ width: 100%;}
#sec01 .wrap .box05 .option_box .category_icon{ margin: -55px 10px 15px 0;}
#sec01 .wrap .box05 .option_box .category_icon li{ font-size: 1.6rem;}
#sec01 .wrap .box05 .option_box .option_pic.pic_tate{ width: 50%;}
#sec01 .wrap .box05 .option_box .option_pic img{ width: 100%; height: auto;}

}

@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 .box01{ margin-bottom: 30px;}
#sec01 .wrap .box01 .inner{ display: block;}
#sec01 .wrap .box01 h2.txt{ font-size: 5.3vw;}
#sec01 .wrap .box01 .inner .img{ width: 100%; height: auto;}

#sec01 .wrap .box02{ margin-bottom: 30px;}
#sec01 .wrap .box02 .inner{ max-width: 100%; width: 100%; display: block;}
#sec01 .wrap .box02 .inner .text_box{ width: 100%;}
#sec01 .wrap .box02 .inner .text_box .text_box_top h3{ font-size: 4.8vw; margin-bottom: 5px;}
#sec01 .wrap .box02 .inner .text_box .text_box_top ul{ margin: 0 0 0 0;}
#sec01 .wrap .box02 .inner .text_box .text_box_top ul li{ display: inline-block; width: auto; font-size: 3.5vw; padding: 0 3vw; box-sizing: border-box;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm{ padding: 20px; margin-bottom: 20px;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex p{ font-size: 5vw; display: inline-block; padding: 0 10px;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex ul li{ font-size: 5vw;}
#sec01 .wrap .box02 .inner .text_box .text_box_btm .flex ul li span{ font-size: 2.5vw; margin-left: 5px;}
#sec01 .wrap .box02 .inner .pic_box{ width: 130px; height: 130px; margin: 0 auto;}
#sec01 .wrap .box02 .inner .pic_box img{ width: 130px; height: 130px; object-fit: cover;}

#sec01 .wrap .box03 .option_box{ margin-bottom: 30px;}
#sec01 .wrap .box03 h3.labelttl2{ font-size: 4.5vw; margin-bottom: 10px;}
    
#sec01 .wrap .w2l{ display: block;}
#sec01 .wrap .w2l > div{ width: 100%;}
#sec01 .wrap .box04 #option03{ margin-bottom: 0;}
#sec01 .wrap .box04 #option03 h2{ padding: 0 0 5px 0; font-size: 5vw; margin: 30px 0 20px;}
#sec01 .wrap .box04 #option03 .option03_list .option03_top{ display: block;}
#sec01 .wrap .box04 #option03 .option03_list .option03_top .option_box{ width: 100%; margin-bottom: 30px;}
#sec01 .wrap .box04 #option03 .option03_list .option_box h3{ font-size: 5vw;}
#sec01 .wrap .box04 #option03 .option03_list .option_box h3 span{ font-size: 2.5vw;}
#sec01 .wrap .box04 #option03 .option03_list .option03_btm .option_box p.lp_subtitle{ position: relative; top:auto; left: auto;}

#sec01 .wrap .box05 h2{ padding: 0 0 5px 0; font-size: 5vw; margin: 30px 0 20px;}
#sec01 .wrap .box05 .option_box .category_icon{ margin: 0 0 10px 0;}
#sec01 .wrap .box05 .option_box .category_icon li{ padding: 0 10px; font-size: 3.5vw; margin: 0 2px;}
#sec01 .wrap .box05 #option04 .flex{ display: block;}
#sec01 .wrap .box05 #option04 .flex .basic_p{ width: 100%;}
#sec01 .wrap .box05 #option04 .flex .option_pic{ width: 100%;}
#sec01 .wrap .box05 .option_box{ margin-bottom: 30px;}
#sec01 .wrap .box05 .option_box:last-child{ margin-bottom: 0;}
}