@charset "UTF-8";

/*-------------------------
__base_style
-------------------------*/

#wrap{ text-align:left; position:relative; margin:0; padding:0;}
#side_box{ float: left;}
#side{ z-index: 2000; position: fixed !important; top: 0; left: 0;}
#content,
#footer{ box-sizing: border-box; width: 100%;}
#content{background-color: #ececec;}
#footer{ padding-bottom: 120px;}
@media screen and (min-width: 1025px){
#side .inner{ width: 280px; height: 100vh;  overflow-y: scroll; background-color:#ffffff;}
.scroll-fade-content{ position: relative; width: 100%!important; height: 175px; box-sizing: border-box;}
}
side .side_inner{ padding:0;}

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

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

#wrap{ margin-top:-175px; padding-top:175px;}

#content,
#footer{ float: none; margin-left: 0; padding-left: 0;}
#side{ z-index:2000; width: 100%; /*height: 300px;*/ overflow-y: none;}
#side .inner{ /*width: 100%; height: 175px; overflow-y: none;*/ background-color:#ffffff; position: relative; box-sizing: border-box;}
#side_box{ float: none;}
side .side_inner{ padding:0;}
.scroll-fade-inner{ width: 100%!important;}

}

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

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

#wrap{ margin-top:0; padding-top:0;}

#side{ width: 100%; height: 60px; background-color: #fff; position: static!important;}
#side .inner{ height: 60px;}
#content{ margin-top: 0;}
.sph_none{ display: none;}

}

@media (min-width: 768px) {

a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;}

}

/*-------------------------
__side
-------------------------*/

#side{}
#side .inner{}
#side .inner .logo{ width: 100%; padding: 25px 25px; box-sizing: border-box;}
#side .inner .logo img{ width: 100%; height: auto;}
#side .inner .menu{ text-align: center;}
#side .inner .menu > ul{ border-top: 1px solid #ddd;}
#side .inner .menu > ul li{ width: 100%;}
#side .inner .menu > ul li a{width: 100%; text-decoration: none; color: #000; display: inline-block; font-size: 14px; font-weight: 700; padding: 20px 0px; box-sizing: border-box; border-bottom: 1px solid #ddd;
-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
#side .inner .menu > ul li a:hover{ background-color: #d9e9d7;}

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

#side .inner{border-bottom: 1px solid #ddd;}
#side .inner .logo{ width: 220px; height: auto; padding: 20px 20px; box-sizing: border-box;}
#side .inner .menu > ul li{float:left; width: 20%; width: calc(100% / 6); width: -webkit-calc(100% / 6); width: -moz-calc(100% / 6); box-sizing:border-box; text-align: center; position: relative; padding: 0; height: 60px;}
#side .inner .menu > ul li a{border-left: 1px solid #ddd; font-size: 12px; line-height: 16px; width: 100%; border-bottom: 0; display: block; height: 100%;}
#side .inner .menu > ul li a p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
#side .inner .menu > ul li a span{ display: block;}
#side .inner .menu > ul li a.member_btn{ background-color: #005032; color: #fff;}

}

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

#side .inner{border-bottom: 1px solid #fff;}
#side .inner .menu{ display: none;}
#side .inner .logo{ width: 240px; height: auto; margin: 12px 0 0 12px; padding: 0; box-sizing: border-box;}

}

#side .inner .member .member_inner{ background-color: #005032; padding: 20px; box-sizing: border-box;}
#side .inner .member .member_inner .member_logo{ width: 100%; height: auto; margin-bottom: 20px;}
#side .inner .member .member_inner .member_logo img{ width: 100%; height: auto;}
#side .inner .member .member_inner p{ font-size: 13px; line-height: 18px; font-weight:700; color: #fff; text-align: center; margin-bottom:20px;}
#side .inner .member .member_inner p span{ display: block;}
#side .inner .member .member_inner .member_fukidashi{ text-align: center; margin-bottom: 20px;}
#side .inner .member .member_inner .member_fukidashi span{ display: block; width: 120px; margin: 0 auto; font-size: 15px; font-weight: 700; color: #fff; position: relative;}
#side .inner .member .member_inner .member_fukidashi span:before{ content: ''; position: absolute; top: 50%; left: -25px; display: inline-block; width: 30px; height: 2px; background-color: white; -webkit-transform: rotate(60deg); transform: rotate(60deg);}
#side .inner .member .member_inner .member_fukidashi span:after{ content: ''; position: absolute; top: 50%; display: inline-block; width: 30px; height: 2px; background-color: white; -webkit-transform: rotate(-60deg); transform: rotate(-60deg);}
#side .inner .member .member_inner ul{}
#side .inner .member .member_inner ul li{ text-align: center; margin-bottom: 15px;}
#side .inner .member .member_inner ul li a{ text-decoration: none; color: #fff; font-weight: 700; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
#side .inner .member .member_inner ul li:nth-child(1) a{ display: block; font-size: 18px; line-height: 18px; background-color: #aa910e; padding: 15px 0; border-radius: 5px; box-shadow: 4px 4px #003427;}
#side .inner .member .member_inner ul li:nth-child(1) a:hover{ background-color: #d6c722;}
#side .inner .member .member_inner ul li:nth-child(2) a{ display: inline-block; font-size: 13px; line-height: 13px; padding: 10px 15px; border-radius: 5px; border: 1px solid #fff;}
#side .inner .member .member_inner ul li:nth-child(2) a:hover{ background-color: #fff; color: #005032;}
#side .inner .member .member_inner .value_list{}
#side .inner .member .member_inner .value_list table{ width:100%;}
#side .inner .member .member_inner .value_list table tr{ display: block; width: 100%;  color: #fff; font-size: 13px; line-height: 20px; zoom:1;}
#side .inner .member .member_inner .value_list table tr:after{content:"";display:block;clear:both;}
#side .inner .member .member_inner .value_list table tr.all{ font-size: 15px; border-bottom: 1px solid #fff; margin-bottom: 5px;}
#side .inner .member .member_inner .value_list table tr th{ float: left;}
#side .inner .member .member_inner .value_list table tr td{ float: right;  text-align: right;}
#side .inner .member .member_inner .value_list table tr td span{ font-size: 1.2em;}

/*ログイン中*/
#side .inner .member .member_inner.login{ background-color: #aa910e; padding: 20px; box-sizing: border-box;}
#side .inner .member .member_inner.login .member_name_box{}
#side .inner .member .member_inner.login .member_name_box .welcome{font-size: 13px; line-height: 13px; color: #ffffff; margin-bottom: 5px; font-weight: 700;}
#side .inner .member .member_inner.login .member_name_box .member_name{ background-color: #fff; font-size: 13px; line-height: 13px; padding: 10px 15px; border-radius: 5px; box-sizing: border-box; margin-bottom: 10px; text-align: right;}
#side .inner .member .member_inner.login .logout_btn{ text-align: center; margin-bottom: 15px;}
#side .inner .member .member_inner.login .logout_btn a{ background-color: #005032; display: inline-block; font-size: 13px; line-height: 13px; padding: 10px 15px; border-radius: 5px; color: #fff; text-decoration: none; font-weight: 700;
 -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
#side .inner .member .member_inner.login .logout_btn a:hover{ background-color: #128F3D;}

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

#side .inner .member{ display: none;}

}

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

#side .inner{ position: relative;}
#side .inner .sub_menu{ padding: 20px; box-sizing: border-box; border-left: 1px solid #ddd;}
#side .inner .sub_menu ul li{ margin-bottom: 1px;}
#side .inner .sub_menu ul li a{ display: block; background-color: #ececec; font-size: 13px; line-height: 13px; text-decoration: none; padding: 15px; box-sizing: border-box;
-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
#side .inner .sub_menu ul li a span{ position: relative; display: block; padding: 0 0 0 20px; color: #000; vertical-align: middle; text-decoration: none;}
#side .inner .sub_menu ul li a span::before,
#side .inner .sub_menu ul li a span::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle;}
#side .inner .sub_menu ul li a span::before{ width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background: #000;}
#side .inner .sub_menu ul li a span::after{ left: 5px; box-sizing: border-box; width: 3px; height: 3px; border: 3px solid transparent; border-left: 3px solid #fff;}
#side .inner .sub_menu ul li a:hover{ background-color: #ddd;}
#side .inner .tel_no{ padding: 0 20px 20px; box-sizing: border-box;}
#side .inner .business_hours dl dd{}
#side .inner .tel_no p{ font-size: 13px; margin-bottom: 5px;}
#side .inner .tel_no img{ width: 100%; height: auto;}
#side .inner .business_hours{ color: #8c8c8c; font-size: 13px; line-height: 18px; padding: 0 20px 20px; box-sizing: border-box;}
#side .inner .business_hours dl{}
#side .inner .business_hours dl dt{ display: inline-block; width: 80px;}
#side .inner .business_hours dl dd{ display: inline-block;}
#side .inner .business_hours p{}

@media screen and (max-width: 1024px){
    
#side .inner .sub_menu{display: none;}
#side .inner .tel_no{ position: absolute; top: 30px; right: 210px;}
#side .inner .tel_no p{ font-size: 12px; margin-bottom: 5px;}
#side .inner .tel_no img{ width: 220px; height: auto;}
#side .inner .business_hours{ position: absolute; top: 15px; right: 0px; color: #8c8c8c; font-size: 11px; line-height: 15px; padding: 0 20px 20px; box-sizing: border-box;}

}

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

#side .inner .tel_no,
#side .inner .business_hours{ display: none;}
    
}

/*-------------------------
__content
-------------------------*/
.topic_path{clear:both;padding:30px 30px 0 30px;}
.topic_path ul{width:100%;text-align:left;}
.topic_path li{font-size:14px;line-height:24px;font-weight:700;color:#000;vertical-align:top;display:inline-block;}
.topic_path li:before{content:">";color:#000;font-weight:400;margin-left:5px;margin-right:5px;}
.topic_path li:first-child:before{content:"";margin:0;}
.topic_path li a{font-weight:400;color:#626262;text-decoration:underline;}
.topic_path li a:hover{text-decoration:none;}

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

@media screen and (max-width: 767px) {
.topic_path{clear:both;padding:20px 20px 0 20px;}
.topic_path li{font-size:13px;line-height:23px;}
}

/*-------------------------
__CONTACT
-------------------------*/

#contact .inner .box_title{ text-align: center; margin-bottom: 40px;}
#contact .inner .box_title h2{}
#contact .inner .box_title h2 img{ height: 30px; width: auto;}
#contact .inner .box_title h2 span{ display: block; margin-top: 10px; font-size: 14px;}

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

#contact .inner .box_title{ margin-bottom: 20px;}
#contact .inner .box_title h2 img{ height: 25px; width: auto;}
#contact .inner .box_title h2 span{ display: block; margin-top: 5px; font-size: 12px;}

}

#contact{ }
#contact .inner{ padding: 0 30px; box-sizing: border-box; padding-bottom: 70px;}
#contact .inner .sub_text{font-size: 13px; line-height: 18px; margin-bottom: 40px;}
#contact .inner .contact_left,
#contact .inner .contact_right{ float:left; margin-right: 25px; width: 50%; width: calc((100% - 26px) / 2); width: -webkit-calc((100% - 26px) / 2); width: -moz-calc((100% - 26px) / 2); box-sizing:border-box; text-align: center;}
#contact .inner .contact_left{}
#contact .inner .contact_left h3,
#contact .inner .contact_right h3{text-align: left; font-size: 16px; line-height: 16px; font-weight: 700; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 20px;}
#contact .inner .contact_left .free_dial01{}
#contact .inner .contact_left .tel_no{float:left; margin-right: 25px; width: 50%; width: calc((100% - 26px) / 2); width: -webkit-calc((100% - 26px) / 2); width: -moz-calc((100% - 26px) / 2); box-sizing:border-box; text-align: center;}
#contact .inner .contact_left .tel_no img{ width: 100%; height: auto;}
#contact .inner .contact_left .business_hours{float:left; width: 50%; width: calc((100% - 26px) / 2); width: -webkit-calc((100% - 26px) / 2); width: -moz-calc((100% - 26px) / 2); box-sizing:border-box; text-align: center;}
#contact .inner .contact_left .business_hours dl{ font-size: 13px; line-height: 18px; text-align: left; }
#contact .inner .contact_left .business_hours dl dt{ display: inline-block;  min-width: 70px;}
#contact .inner .contact_left .business_hours dl dd{ display: inline-block; }
#contact .inner .contact_left .business_hours p{ font-size: 13px; line-height: 18px;}
#contact .inner .contact_left .free_dial02{ text-align: left; font-size: 16px; line-height: 26px; font-weight: 700;}

@media screen and (max-width: 1024px){
#contact .inner{ padding-bottom: 60px;}
}

@media screen and (max-width: 767px) {
#contact .inner{ padding: 0 20px 40px;}
#contact .inner .sub_text{font-size: 13px; line-height: 19px; margin-bottom: 30px;}
#contact .inner .contact_left,
#contact .inner .contact_right{ float: none; width: 100%;}
#contact .inner .contact_left{ display: none;}
/*#contact .inner .contact_left{ margin-bottom: 30px;}
#contact .inner .contact_left .tel_no{float:none; width: 80%; margin:0 auto 10px;}
#contact .inner .contact_left .business_hours{float:none; width: 190px; margin: 0 auto 20px; text-align: left;}
#contact .inner .contact_left .free_dial02 p{ width: 80%; margin: 0 auto; font-size: 14px;}*/
}

#contact .inner .contact_right{ margin-right: 0px;}
#contact .inner .contact_right .shop_list01{}
#contact .inner .contact_right .shop_list02{}
#contact .inner .contact_right dl{ float:left; margin-right: 15px; margin-bottom: 15px; width: 50%; width: calc((100% - 16px) / 2); width: -webkit-calc((100% - 16px) / 2); width: -moz-calc((100% - 16px) / 2); box-sizing:border-box; text-align: center; zoom:1;}
#contact .inner .contact_right dl:nth-child(2n){ margin-right: 0;}
#contact .inner .contact_right dl:after{content:"";display:block;clear:both;}
#contact .inner .contact_right dl dt{ float: left; width: 30%; font-size: 12px; color: #fff; background-color: #000; padding: 6px 0;}
#contact .inner .contact_right dl dd{ float: right; width: 68%; }
#contact .inner .contact_right dl dd img{ width: 100%; height: auto;}

#contact .inner .contact_btn{ width: 400px; margin: 30px auto 0;}
#contact .inner .contact_btn a{ width: 100%; padding: 18px 10px 15px; display: block; color: #fff !important; background: #005032; text-decoration: none; font-weight: bold; font-size:18px; border-radius: 5px; text-align:center; box-sizing: border-box; box-shadow: 4px 4px #BBB;
-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
#contact .inner .contact_btn a:before{ content: ""; display: inline-block; width: 30px; height: 30px; margin: 7px 8px 0 0; background: url("../images/mail_logo.png") no-repeat; background-size: contain; vertical-align: middle;}
#contact .inner .contact_btn a:hover{background: #128F3D;}

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

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

#contact .inner .contact_right dl{ float:none; margin: 0 auto; margin-bottom: 15px; width: 80%;}
#contact .inner .contact_right dl:nth-child(2n){ margin: 0 auto; margin-bottom: 15px;}
#contact .inner .contact_btn{ width: 100%; margin: 20px auto 0; box-sizing:border-box;}
#contact .inner .contact_btn a{ width: 100%; padding: 16px 0px 13px; font-size:15px; border-radius: 5px; text-align:center; box-sizing: border-box; box-shadow: 4px 4px #BBB;}
#contact .inner .contact_btn a:before{ content: ""; display: inline-block; width: 20px; height: 20px; margin: 7px 8px 0 0; background: url("../images/mail_logo.png") no-repeat; background-size: contain; vertical-align: middle;}
#contact .inner .contact_btn a:hover{}

}

/*-------------------------
__footer
-------------------------*/
#footer .inner{ padding: 50px 30px; box-sizing: border-box; gap: 16px; max-width: 1200px; margin: 0 auto;}
#footer .footer_inner .footer_on_text{ background-color: #ececec; padding: 30px;}
#footer .footer_inner .footer_on_text p{ font-size: 13px; line-height: 1.5em;}
#footer .inner .footer_menu_top{ display: flex; justify-content: space-between; margin-bottom: 30px;}
#footer .inner .footer_menu_btm{ display: flex;}
/*#footer #footer_pc .inner dl{ width: calc(25% - 16px);}*/
#footer #footer_pc .inner dl dt{ font-size: 18px; font-weight: 700; margin-bottom: 15px;}
#footer #footer_pc .inner dl dt:nth-of-type(2){ margin-top: 30px;}
#footer #footer_pc .inner dl dd.lg_list{ display: flex;}
#footer .inner .footer_menu_top dl:nth-child(1){ width: 50%;}
#footer .inner .footer_menu_top dl:nth-child(1) ul{ width: calc(50% - 10px); margin-right: 20px;}
#footer .inner .footer_menu_top dl:nth-child(2),
#footer .inner .footer_menu_top dl:nth-child(3){ width: calc(25% - 20px);}
#footer .inner .footer_menu_btm dl:nth-child(1),
#footer .inner .footer_menu_btm dl:nth-child(2),
#footer .inner .footer_menu_btm dl:nth-child(3){ width: calc(25% - 20px); margin-right: 20px;}
#footer .inner dl dd ul li{ margin-bottom: 12px;}
#footer .inner dl dd ul li > span{ font-size: 14px; font-weight: 700;}
#footer .inner dl dd ul li.sub{padding-left:1em;position:relative; margin-left: 1em;}
#footer .inner dl dd ul li.sub::before{content:"";display:inline-block;width:5px;height:1px;background:#808080;position:absolute;left:0;top:50%;transform:translateY(-50%);}
#footer .inner dl dd ul li a{ color: #808080; font-size: 13px; line-height: 16px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
#footer .inner dl dd ul li a span{display: inline-block;text-decoration:underline;}
#footer .inner dl dd ul li a:hover{ color: #bbbbbb; text-decoration: none;}
#footer .footer_logo{ width: 116px; height: auto; margin: 0 auto 30px;}
#footer .footer_logo img{ width: 100%; height: auto;}
#footer .pp{ text-align: center; font-size: 12px; margin-bottom: 30px;}
#footer .instagram_foot{display: flex;justify-content: center; width: 100%; max-width:270px; margin: auto; box-sizing: border-box;}
#footer .instagram_foot a:not(:last-child){margin-right:20px;}
#footer .instagram_foot a{display:inline-block;}
#footer .instagram_foot a img{ width: 100%; height: auto;}

@media screen and (max-width: 1024px){
#footer #footer_pc .inner dl dt{ font-size: 14px; margin-bottom: 15px;}
#footer .inner dl dd ul li{ margin-bottom: 10px;}
#footer .inner dl dd ul li a{ font-size: 11px; line-height: 15px;}
}

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

@media screen and (max-width: 767px) {
#footer_pc{ display: none;}
#footer .inner{ padding: 0;}
#footer .instagram_foot{display: block;}
#footer .footer_inner .footer_on_text{ padding: 20px;}
#footer .footer_inner .footer_on_text p{ font-size: 12px; line-height: 1.4em;}
}

/*-------------------------
__sph_footer
-------------------------*/

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

#footer_sph{}
#footer_sph .inner{}
#footer_sph .inner .contact_left,
#footer_sph .inner .contact_right{ width: 100%;}
#footer_sph .inner .contact_left{ padding: 30px 20px 0; box-sizing: border-box;}
#footer_sph .inner .contact_left h3{text-align: left; font-size: 16px; line-height: 16px; font-weight: 700; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 20px;}
#footer_sph .inner .contact_left .tel_no{float:none; width: 80%; margin:0 auto 10px;}
#footer_sph .inner .contact_left .tel_no img{ width:100%; height:auto;}
#footer_sph .inner .contact_left .business_hours{width: 210px; margin: 0 auto 20px; text-align: left;}
#footer_sph .inner .contact_left .business_hours dl{ font-size: 13px; line-height: 18px; text-align: left; }
#footer_sph .inner .contact_left .business_hours dl dt{ display: inline-block;  min-width: 70px;}
#footer_sph .inner .contact_left .business_hours dl dd{ display: inline-block; }
#footer_sph .inner .contact_left .business_hours p{ font-size: 13px; line-height: 18px;}
#footer_sph .inner .contact_left .free_dial02 p{ width: 80%; margin: 0 auto 5px; font-size: 14px;}
#footer_sph .inner ul.footer_sph01{ padding: 20px 20px 10px; box-sizing: border-box; }
#footer_sph .inner ul.footer_sph01 li{ float:left; margin-right: 10px; margin-bottom: 10px; width: 50%; width: calc((100% - 11px) / 2); width: -webkit-calc((100% - 11px) / 2); width: -moz-calc((100% - 11px) / 2); box-sizing:border-box; text-align: center; position: relative;}
#footer_sph .inner ul.footer_sph01 li:nth-child(2n){ margin-right: 0px;}
#footer_sph .inner ul.footer_sph01 li a{}
#footer_sph .inner ul.footer_sph01 li a{ display: block; background-color: #ececec; font-size: 13px; line-height: 13px; text-decoration: none; padding: 10px; box-sizing: border-box;}
#footer_sph .inner ul.footer_sph01 li a span{ position: relative; display: block; padding: 0 0 0 20px; color: #000; vertical-align: middle; text-decoration: none;}
#footer_sph .inner ul.footer_sph01 li a span::before,
#footer_sph .inner ul.footer_sph01 li a span::after{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle;}
#footer_sph .inner ul.footer_sph01 li a span::before{ width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background: #000;}
#footer_sph .inner ul.footer_sph01 li a span::after{ left: 5px; box-sizing: border-box; width: 3px; height: 3px; border: 3px solid transparent; border-left: 3px solid #fff;}

#footer_sph .inner ul.footer_sph02{ text-align: center; margin-bottom: 30px;}
#footer_sph .inner ul.footer_sph02 li{ display: inline;}
#footer_sph .inner ul.footer_sph02 li:nth-child(2){ border-left: 1px solid #000;}
#footer_sph .inner ul.footer_sph02 li a{ color: #000; font-size: 12px; padding: 0 10px;}
#footer_sph .footer_logo{ width: 100px; height: auto; margin: 0 auto 20px;}
#footer_sph .footer_logo img{ width: 100%; height: auto;}
#footer_sph .pp{ text-align: center; font-size: 12px; margin-bottom: 10px;}
#footer_sph .instagram_foot{box-sizing: border-box;padding:0 20px;}
#footer_sph .instagram_foot a{display:block;margin-top:20px;}
#footer_sph .instagram_foot a img{width:100%;height:auto;}

}





/*-------------------------
__drawermenu
-------------------------*/
#menu.sph_menu{ position:fixed; top:0; text-align:left; right:-260px; width:260px; height:100%; background-color:none; overflow-y:auto; -webkit-overflow-scrolling:touch; font-size:14px; line-height:1.2em; padding-bottom: 20px;}
#menu.sph_menu .lg_logo{ width: 100%; padding: 0 40px; margin: 20px 0 10px; box-sizing: border-box;}
#menu.sph_menu .lg_logo img{ width: 100%; height: auto;}
#menu.sph_menu a { text-decoration:none; color:#373332;}
#menu.sph_menu p a{ color:#fff;}

#menu.sph_menu .mysearch{}
#menu.sph_menu .mysearch ul{ padding:13px 10px;}
#menu.sph_menu .mysearch ul li{border-bottom:#ddd solid 1px;}
#menu.sph_menu .mysearch ul li a{ display: block; font-size: 13px; padding: 10px; background: #eee;}

#menu.sph_menu dl{ padding:13px 10px;}
#menu.sph_menu dt{ font-size:15px; font-weight: 700; padding:0 10px 10px; color:#005032;}
#menu.sph_menu dd{}
#menu.sph_menu dd ul li{border-bottom:#ddd solid 1px;}
#menu.sph_menu dd ul li > span{ display: inline-block; font-size: 13px; padding: 10px; font-weight: 700; color: #005032;}
#menu.sph_menu dd ul li a{ display: block; font-size: 13px; padding: 10px;}
#menu.sph_menu dd ul li.lgs a{ transform: scale(0.8, 1); margin-left: -10%;}
#menu.sph_menu dd ul li.rows2 a{line-height:1.2em;padding:10px;}
#menu.sph_menu .member .member_inner{ background-color: #005032; padding: 20px; box-sizing: border-box;}
#menu.sph_menu .member .member_inner .member_logo{ width: 100%; height: auto;}
#menu.sph_menu .member .member_inner .member_logo img{ width: 100%; height: auto;}
#menu.sph_menu .member .member_inner p{ font-size: 12px; line-height: 18px; color: #fff; text-align: center; margin-bottom:10px;}
#menu.sph_menu .member .member_inner p span{ display: block;}
#menu.sph_menu .member .member_inner .member_fukidashi{ text-align: center; margin-bottom: 5px;}
#menu.sph_menu .member .member_inner .member_fukidashi span{ display: block; margin: 0 auto; font-size: 14px; font-weight: 700; color: #fff; position: relative;}
#menu.sph_menu .member .member_inner .member_fukidashi span:before{ content: ''; position: absolute; top: 50%; left: 30px; display: inline-block; width: 25px; height: 1px; background-color: white; -webkit-transform: rotate(60deg); transform: rotate(60deg);}
#menu.sph_menu .member .member_fukidashi span:after{ content: ''; position: absolute; top: 50%; display: inline-block; width: 25px; height: 1px; background-color: white; -webkit-transform: rotate(-60deg); transform: rotate(-60deg);}
#menu.sph_menu .member .member_inner ul{}
#menu.sph_menu .member .member_inner ul li{ text-align: center; margin-bottom: 15px;}
#menu.sph_menu .member .member_inner ul li a{ text-decoration: none; color: #fff; font-weight: 700;}
#menu.sph_menu .member .member_inner ul li:nth-child(1) a{ display: block; font-size: 16px; line-height: 16px; background-color: #aa910e; padding: 12px 0; border-radius: 5px; box-shadow: 4px 4px #003427;}
#menu.sph_menu .member .member_inner ul li:nth-child(2) a{ display: inline-block; font-size: 13px; line-height: 13px; padding: 10px 15px; border-radius: 5px; border: 1px solid #fff;}
#menu.sph_menu .member .member_inner .value_list{}
#menu.sph_menu .member .member_inner .value_list table{ width:100%;}
#menu.sph_menu .member .member_inner .value_list table tr{ display: block; width: 100%;  color: #fff; font-size: 13px; line-height: 20px; zoom:1;}
#menu.sph_menu .member .member_inner .value_list table tr:after{content:"";display:block;clear:both;}
#menu.sph_menu .member .member_inner .value_list table tr.all{ font-size: 13px; border-bottom: 1px solid #fff; margin-bottom: 5px;}
#menu.sph_menu .member .member_inner .value_list table tr th{ float: left;}
#menu.sph_menu .member .member_inner .value_list table tr td{ float: right;  text-align: right;}
#menu.sph_menu .member .member_inner .value_list table tr td span{ font-size: 1.2em;}


/*ログイン中*/
#menu.sph_menu .member .member_inner.login{ background-color: #aa910e; padding: 20px; box-sizing: border-box;}
#menu.sph_menu .member .member_inner.login .member_name_box{}
#menu.sph_menu .member .member_inner.login .member_name_box .welcome{font-size: 13px; line-height: 13px; color: #ffffff; margin-bottom: 5px; font-weight: 700;}
#menu.sph_menu .member .member_inner.login .member_name_box .member_name{ background-color: #fff; font-size: 13px; line-height: 13px; padding: 10px 15px; border-radius: 5px; box-sizing: border-box; margin-bottom: 10px; text-align: right;}
#menu.sph_menu .member .member_inner.login .logout_btn{ text-align: center; margin-bottom: 15px;}
#menu.sph_menu .member .member_inner.login .logout_btn a{ background-color: #005032; display: inline-block; font-size: 13px; line-height: 13px; padding: 10px 15px; border-radius: 5px; color: #fff; text-decoration: none; font-weight: 700;}

/*-------------------------
__drawer開閉
-------------------------*/
#wrap,#menu{ -webkit-transition:ease 0.5s; transition:ease .5s;}
#wrap.open,#menu.open{-webkit-transform:translate3d(-260px, 0, 0); transform:translate3d(-260px, 0, 0);}
#overlay{ background: rgba(0, 0, 0, 0.2); position:absolute; top:0; bottom:0; left:0; right:0; z-index:100100;}
#wrap.open {overflow:hidden;}
#menu{ background-color:#ffffff; z-index:9999;}

/*-------------------------
__drawerメニューボタン
-------------------------*/

.menu__wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1; background-color: #005032; padding: 12px;
/*position:absolute;*/ position: fixed; top:0px; right:0px; z-index:10000; width:35px; height:35px; /*-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;*/ -webkit-transition:ease 0.5s; transition:ease .5s;
border-left: 1px solid #fff; border-bottom: 1px solid #fff;}
.menu__wrapper.open { -webkit-transform:translate3d(-260px, 0, 0); transform:translate3d(-260px, 0, 0);}
.menu__wrapper > div { width: 36px; height: 36px;/*padding: 20px;*/ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; cursor: pointer;}
.box { transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.box { width: 6px; height: 6px; background: #fff; margin: 3px 3px; display: inline-block;}
.open .menu__wrapper > div { outline: none;}
.open .menu__item--bento .box:nth-child(2),
.open .menu__item--bento .box:nth-child(4),
.open .menu__item--bento .box:nth-child(6),
.open .menu__item--bento .box:nth-child(8) { opacity: 0;}

@media screen and (min-width: 768px) {
#menu.sph_menu,
.menu__wrapper{ display: none;}
}


.re_top{display:none;height:60px;width:60px;overflow:hidden;position:fixed;z-index:9999; right: 25px; bottom: 25px; background: #333631;}
div#chat_inquity[style]+.re_top {right: 400px;}
.re_top a{ display:block; position: relative; width: 60px; height: 60px; text-decoration: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;}
.re_top a::before{}
.re_top a::after{ position: absolute; top: -5px; bottom: 0; margin: auto; content: ""; vertical-align: middle; left: 23px; box-sizing: border-box; width: 9px; height: 9px; border: 8px solid transparent; border-bottom: 13px solid #fff;}
.re_top a:hover{background: #666;}

@media screen and (max-width: 1024px){
.re_top{display:none;height:60px;width:60px;overflow:hidden;position:fixed;z-index:9999; left: 30px; bottom: 30px;}
}

@media screen and (max-width: 768px) {
.re_top{position:fixed; left: 20px; bottom: 20px;}
}

/*============ ドロップダウンメニューここから ============*/

@media screen and (min-width: 1025px){

.gnav-wrapper { position: relative; z-index: 9000; width: 100%;}
.gnav { justify-content: space-between;}
.gnav li:nth-child(1),
.gnav li:nth-child(2),
.gnav li:nth-child(3),
.gnav li:nth-child(4){ transition: all .3s ease-in-out;}
.gnav > li:nth-child(1):hover .sidemenu01,
.gnav > li:nth-child(2):hover .sidemenu02,
.gnav > li:nth-child(3):hover .sidemenu03,
.gnav > li:nth-child(4):hover .sidemenu04 { max-height: 9999px; opacity: 1; padding: 0;}

.megamenu { background-color: rgba(0,0,0,0.9); max-height:0; opacity: 0; overflow: hidden; width: 280px; height: 100%; position: fixed; top: 0px; left: 280px; transition: all .2s ease-in; z-index: 10000;}
.megamenu-inner { height: 100vh; overflow-y: auto; overflow-x: hidden;}
#side .inner .menu ul li ul.megamenu-inner{ padding: 25px 0; box-sizing: border-box; text-align: left;}
#side .inner .menu ul li ul.megamenu-inner li a{ width: 100%; text-decoration: none; display: inline-block; font-size: 13px; line-height: 16px; font-weight: 700; padding: 8px 0px; box-sizing: border-box; color: #ffffff; border-bottom: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all  0.3s ease;text-align:left;padding-left:20px;}
#side .inner .menu ul li ul.megamenu-inner li.par a{padding: 15px 0 0 20px;}
#side .inner .menu ul li ul.megamenu-inner li.sub{position:relative; padding: 0 0 0 15px; box-sizing: border-box;}
#side .inner .menu ul li ul.megamenu-inner li.sub::before{content:"";display:block;width:10px;height:1px;background:#fff;position:absolute;left:35px;top:50%;}
#side .inner .menu ul li ul.megamenu-inner li.sub a{ font-size:13px; padding: 5px 0 5px 35px; position:relative;}
#side .inner .menu ul li ul.megamenu-inner li a:hover{ color: #aa910e; background-color: rgba(0,0,255,0);}
#side .inner .menu ul li ul.megamenu-inner li > span{ display: inline-block; font-size:13px; color: #777; font-weight: 700; padding: 5px 20px 5px; box-sizing: border-box;}
.megamenu-inner a { border-left: none;}

}

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

.tab_none{ display: none;}
.gnav-wrapper { position: relative; z-index: 9000; width: 100%;}
.gnav { justify-content: space-between;}
.gnav li:nth-child(1),
.gnav li:nth-child(2),
.gnav li:nth-child(3),
.gnav li:nth-child(4){ transition: all .3s ease-in-out;}
.gnav > li:nth-child(1):hover .sidemenu01,
.gnav > li:nth-child(2):hover .sidemenu02,
.gnav > li:nth-child(3):hover .sidemenu03,
.gnav > li:nth-child(4):hover .sidemenu04{ max-height: 9999px; opacity: 1; padding: 0;}

.megamenu { background-color: rgba(0,0,0,0.8); max-height: 0; opacity: 0; overflow: hidden; width: 100%; position: fixed; top: 170px; left: 0px; transition: all .2s ease-in; z-index: 10000;}
.megamenu-inner { display: flex; flex-wrap: wrap;}
.megamenu-inner li { width: calc( (100% / 5) ); padding: 0;}
#side .inner .menu ul li ul.megamenu-inner{ padding: 15px 0; box-sizing: border-box; display: flex; align-items: center;}
#side .inner .menu ul li ul.megamenu-inner li{ width: 33.33333%; width: calc(100% / 3); width: -webkit-calc(100% / 3); width: -moz-calc(100% / 3); box-sizing:border-box; text-align: center; height: 40px; position: relative;}
#side .inner .menu ul li ul.megamenu-inner li a{ width: 100%; text-decoration: none; display: inline-block; font-size: 12px; line-height: 15px; font-weight: 700; box-sizing: border-box; color: #ffffff; border-left: none; border-bottom: none; height: 30px; padding: 0;}
#side .inner .menu ul li ul.megamenu-inner li a{ display: block; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%;}
#side .inner .menu ul li ul.megamenu-inner li a:hover{ /*color: #aa910e;*/ background-color: rgba(0,0,255,0);}
.megamenu-inner a { border-left: none;}
}

#chat_inquity{
	width:360px;
	height:60px;
	position:fixed;
	z-index:10100;
	bottom: 25px;
	right: 25px;
	overflow:hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
	/*-webkit-overflow-scrolling;*/
	display:none;
}
#chat_inquity::-webkit-scrollbar {  /* Chrome, Safari 対応 */
	display:none;
}
#chat_inquity .inner {
	width:100%;
	height:100%;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
#chat_inquity.chat_open .inner {
    width:100%;
    height:100%;
    overflow: auto;
    -webkit-overflow-scrolling:touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#chat_inquity.chat_open .inner::-webkit-scrollbar {  /* Chrome, Safari 対応 */display:none;}
#chat_inquity.chat_close .inner {
}
#chat_inquity.chat_open{
	animation: chat_open_frames 0.5s;
	animation-fill-mode	:forwards;
}
#chat_inquity.chat_close{
	animation: chat_close_frames 0.5s;
	animation-fill-mode	:forwards;
}

#chat_inquity iframe{
	border: none;
	position: relative;
	z-index: 0;
	width: 100%;
	height:100%;
	overflow:hidden;
}
@keyframes chat_open_frames {
	0% {height: 60px;}
	100% {height: 500px;}
}
@keyframes chat_close_frames {
	0% {height: 500px;}
	100% {height: 60px;}
}

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

/*iphoneで見たときに必要です。*/
/*200623 iframe側の自動スクロールが動作できないためコメントアウト
#chat_box{position:fixed;}
#chat_box .chat_box_inner{position:fixed;width:100%;height:100%;box-sizing:border-box; overflow: auto;-webkit-overflow-scrolling:touch;-ms-overflow-style: none;scrollbar-width: none;}
*/
/*iphoneで見たときに必要です。*/
#chat_inquity{ width:70px; height:70px; position:fixed; bottom: 10px; right: 10px;}
#chat_inquity.chat_open{
	animation: chat_open_frames_sp 0.5s;
	animation-fill-mode	:forwards;
}
#chat_inquity.chat_close{
	animation: chat_close_frames_sp 0.5s;
	animation-fill-mode	:forwards;
}
#chat_inquity.chat_open .inner {}
}

@keyframes chat_open_frames_sp {
	0% {height: 70px;width:70px;bottom: 10px;right: 10px;}
	100% {height: 100%;width:100%;bottom: 0;right: 0;}
}
@keyframes chat_close_frames_sp {
	0% {height: 100%;width:100%;bottom: 0;right: 0;}
	100% {height: 70px;width:70px;bottom: 10px;right: 10px;}
}


/*共通ヘッダーフッターのないページ専用トップページへ戻るボタン*/
.lg_top_backbtn{ text-align: center; padding: 30px 0; box-sizing: border-box;}
.lg_top_backbtn a{ display: inline-block; font-size: 1.7em; line-height: 1; text-decoration: none; color: #fff; font-weight: 700; background-color: #005032; padding: 25px 35px; border-radius: 10px; box-shadow: 4px 4px #bbb; transition: all 0.3s ease; transition: .5s ease;}
.lg_top_backbtn a span{ display: inline-block; padding-left: 25px; position: relative;}
.lg_top_backbtn a span:after{ content: ''; position: absolute; top: calc(50% - 4px); left: 0; transform: translateY(-50%); display: block; transform: rotate(45deg); width: 8px; height: 8px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: '';}
@media screen and (min-width: 768px) {
.lg_top_backbtn a:hover{ opacity: 0.6;}
}
@media screen and (max-width: 767px) {
.lg_top_backbtn{ padding: 15px 0;}
.lg_top_backbtn a{ font-size: 1.4em; padding: 20px 25px;}
.lg_top_backbtn a span{ padding-left: 15px;}
.lg_top_backbtn a span:after{ top: calc(50% - 3px); width: 6px; height: 6px;}
}