@charset "UTF-8";
/*-------------------------
__main_img
-------------------------*/

#content.subpage { background: #efece5!important;}

#main_img{min-width:1100px;width:100%;margin-bottom:70px;}
#main_img .bg_img{position:relative;background-image:url("images/main.webp");background-size:cover;background-position:100%;width:calc(100% - 40px);box-sizing:border-box;padding-bottom:80px;margin-left:40px;border-radius:50px 0 0 0;}
#main_img .bg_img::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,0.4);border-radius:50px 0 0 0;}
#main_img .inner{max-width:1000px;width:100%;height:100%;margin:0 auto;position:relative;}
#main_img .inner .main_com{width:100%;margin-top:80px;}
#main_img .inner .main_com .main_title{ height: auto; margin:0 auto 10px; font-weight: 700; color: #fff;}
#main_img .inner .main_com .main_title span{font-size: 7em;}
#main_img .inner .main_com p.com_top{font-weight:700; font-size: 3.2em; line-height: 1.6; color: #fff;padding-bottom:30px;}
.sub .inner .main_subtitle{ height: auto; margin:0 auto 15px; font-weight: 700;font-size: 2.7em;}
.sub .inner .main_subtitle span{font-size: 1.2em;}
.sub .inner p.com_btm{ font-size: 2.1em;font-weight:500;margin-bottom: 30px;}
.sub .inner .sub_flex{ display: flex; gap:10px; padding: 0 20px; margin-bottom: 50px;}
.sub .inner .sub_flex .img_wrap{ width: calc((100% - 40px) / 5); height: auto;}
.sub .inner .sub_flex .img_wrap img{ width: 100%; height: auto;}

@media only screen and (max-width: 767px) {
#main_img{min-width:auto;margin-bottom:30px;}
#main_img .bg_img{width:calc(100% - 20px);margin-left:20px;border-radius:20px 0 0 0;padding-bottom:40px;}
#main_img .bg_img::before{border-radius:20px 0 0 0;}

#main_img .inner{box-sizing:border-box;padding:0 20px 0;}
#main_img .inner .main_com{margin-top:25px;}


#main_img .inner .main_com .main_title span{font-size: 3em;}
#main_img .inner .main_com p.com_top{font-size: 1.8em; padding-bottom: 20px;}
.sub .inner .main_subtitle{ font-size: 1.8em;}
.sub .inner p.com_btm{ font-size: 1.4em;}
.sub .inner .sub_flex{ flex-wrap: wrap;}
.sub .inner .sub_flex .img_wrap{ width: calc(50% - 10px);}
.sub .inner .sub_flex .img_wrap:last-child{ display: none;}
}


#main .sec{ margin: -93px auto 0; padding: 93px 0 80px; color: #604d3f;}
#main .sec .inner{ width: 1100px; box-sizing: border-box; padding: 0 50px; margin: 0 auto; text-align: left;}
#main .sec .inner .menu_wrap{ margin-bottom: 40px;}
#main .sec .inner .menu_wrap .menu{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center;}
#main .sec .inner .menu_wrap .menu .btn a{ text-decoration: none; box-sizing: border-box; padding: 10px 20px; font-size: 1.8em; font-weight: 700; color: #FFF; transition: 0.3s; background: #2aa239; border-radius: 10px; display: block; border: 2px solid #2aa239; line-height: 1.2;    box-shadow: 3px 3px 0 rgb(0 0 0 / 20%);}
#main .sec .inner .menu_wrap .menu .btn a:hover{ filter: brightness(1.2); transform: scale(0.99); box-shadow: none;}
#main .sec .inner .menu_wrap .menu .btn.select a{ color: #2aa239; background: #fff; pointer-events: none; box-shadow: none;}
#main .sec .inner .sec_ttl{ font-size: 2.8em; text-align: center; margin-bottom: 30px; font-weight: 700; line-height: 1.4;}
#main .sec .inner .wh_bg{ background: #fff; border-radius: 30px; padding: 50px; box-sizing: border-box; box-shadow: 3px 3px 0 rgb(0 0 0 / 20%);}
#main .sec .inner .sub_ttl{ font-size: 2.4em; font-weight: 700; margin-bottom: .5em; line-height: 1.6; border-bottom: 1px solid #604d3f; padding-bottom: 5px;}
#main .sec .inner .sub_ttl .kome{ font-size: 14px;}
#main .sec .inner .basic_txt{ font-size: 1.6em; font-weight: 500; margin-bottom: 1.4em; line-height: 1.4;}
#main .sec .inner .basic_txt em{ font-weight: 700;}
#main .sec .inner .basic_txt span{ font-weight: 700; border-bottom: 1px solid #ff5575;}
#main .sec .inner .basic_txt .pink{ color: #ff5575;}
#main .sec .inner .basic_txt .green{ color: #2aa239;}
#main .sec .inner .kome{ font-size: 1.4em; font-weight: 500; margin-bottom: 1em; line-height: 1.2;}
#main .sec .inner .kome:last-child{ margin-bottom: 0;}
#main .sec .inner .item_ttl{ background: #604d3f; display: block; text-align: center; padding: 15px 0; font-size: 2.1em; color: #fff; font-weight: 700; border-radius: 10px; margin-bottom: 1em; line-height: 1.4;}
#main .sec .inner .item_wrap{ margin-bottom: 50px;}
#main .sec .inner .item_wrap:last-of-type{ margin-bottom: 0;}
#main .sec .inner .item_wrap .txt_wrap_ttl{ font-size: 1.8em; line-height: 1.6; font-weight: 700; margin-bottom: .5em;}
#main .sec .inner .item_wrap .img_wrap .txt_wrap_ttl{ margin-bottom: .3em;}
#main .sec .inner .img_wrap{ width: 100%; height: auto; margin-bottom: 40px;}
#main .sec .inner .img_wrap.svg{ width: 120px; margin-bottom: 10px;}
#main .sec .inner .img_wrap.youtube iframe{ width: 100%; height: auto; aspect-ratio: 16 / 9;}
#main .sec .inner .img_wrap img{ width: 100%; height: auto;}
#main .sec .inner .img_wrap .img_wrap{ margin-bottom: 0;}

#main .sec .inner .flex_box{ display: flex; gap: 40px; justify-content: space-between; margin-bottom: 20px;}
#main .sec .inner .flex_box:last-of-type{ margin-bottom: 0;}
#main .sec .inner .flex_box .txt_wrap{ width: 50%;}
#main .sec .inner .flex_box .txt_wrap > .img_wrap:not(.svg){ margin-bottom: 0;}
#main .sec .inner .flex_box > .img_wrap{ width: 50%; margin-bottom: 0;}

#main .sec .inner .flex_box2{ display: flex; gap: 30px; justify-content: space-between; margin-bottom: 20px;}
#main .sec .inner .flex_box2 .box2_item{}
#main .sec .inner .flex_box2 .box2_item .item_wrap{ margin-bottom: 20px;}
#main .sec .inner .flex_box2 .box2_item .img_wrap{ margin-bottom: 0;}
#main .sec .inner .flex_box2 .y_bg{ background: #eeee00; padding: 20px; border-radius: 5px; font-size: 1.8em; width: 30%; text-align: center; font-weight: 700;}

#main .sec .inner .flex_box3{ display: flex; gap: 30px; margin-bottom: 20px; flex-wrap: wrap;}
#main .sec .inner .flex_box3 .item_wrap{ width: calc((100% - 60px) / 3); margin-bottom: 0;}
#main .sec .inner .flex_box3 .item_wrap .img_wrap{ margin-bottom: 0;}

#main .sec .inner th{ font-weight: 700; text-align: center; background: #ddd;}
#main .sec .inner td{ font-weight: 500;}
#main .sec .inner th,
#main .sec .inner td { border: solid 1px #604d3f; padding: 20px; box-sizing: border-box; font-size: 2em; line-height: 1.2;}
#main .sec .inner table { border-collapse:  collapse; margin-bottom: 20px; width: 100%;}

#main .sec .inner .z_wrap .item_wrap .img_wrap.z_logo{ max-width: 400px; margin: 30px auto 0;}
#main .sec .inner .z_wrap .flex_box > .img_wrap:first-child{ width: 150px;}
#main .sec .inner .z_wrap .flex_box > .img_wrap:last-child{ width: calc(100% - 200px);}

@media only screen and (max-width: 767px) {
#main .sec{ margin: -52px auto 0; padding: 52px 0 50px;}
#main .sec .inner{ width: 100%; padding: 0 15px;}
#main .sec .inner .menu_wrap{ margin-bottom: 30px;}
#main .sec .inner .menu_wrap .menu .btn{ width: calc(50% - 5px);}
#main .sec .inner .menu_wrap .menu .btn a{ padding: 5px 10px; font-size: 1.4em; border-radius: 5px;border: 1px solid #2aa239;}
#main .sec .inner .sec_ttl{ font-size: 1.8em; margin-bottom: 20px;}
#main .sec .inner .wh_bg{ border-radius: 15px; padding: 20px;}
#main .sec .inner .sub_ttl{ font-size: 1.6em;}
#main .sec .inner .basic_txt{ font-size: 1.3em;}
#main .sec .inner .kome{ font-size: 1.2em;}
#main .sec .inner .item_ttl{ padding: 10px 0; font-size: 1.6em;border-radius: 5px;}
#main .sec .inner .item_wrap{ margin-bottom: 30px;}
#main .sec .inner .item_wrap .txt_wrap_ttl{ font-size: 1.5em;}
#main .sec .inner .img_wrap{ margin-bottom: 10px;}

#main .sec .inner .flex_box{ flex-wrap: wrap; gap: 0; margin-bottom: 30px;}
#main .sec .inner .flex_box .txt_wrap{ width: 100%;}
#main .sec .inner .flex_box > .img_wrap{ width: 100%; margin-bottom: 0;}

#main .sec .inner .flex_box2{ flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 20px;}
#main .sec .inner .flex_box2 .box2_item .item_wrap{ margin-bottom: 20px;}

#main .sec .inner .flex_box3{ gap: 20px;}
#main .sec .inner .flex_box3 .item_wrap{ width: 100%;}

#main .sec .inner .y_scroll { overflow-x: scroll; margin: 30px auto;}
#main .sec .inner .y_scroll .img_wrap { width: 700px !important;}

#main .sec .inner th,
#main .sec .inner td { font-size: 1.4em; padding: 10px;}
	
#main .sec .inner .z_wrap .flex_box{ flex-wrap: wrap; gap: 20px;}
#main .sec .inner .z_wrap .flex_box > .img_wrap:first-child{}
#main .sec .inner .z_wrap .flex_box > .img_wrap:last-child{ width: 100%;}
}