/*layout*/
.baseconts { position: relative; }
.contents-wrapL { width: 90%; max-width:1500px; margin: 0 auto; }
.contents-wrap { width: 90%; max-width:1000px; margin:0 auto;}

.anchor { padding-top: 50px; margin-top: -50px; }

.pc_only { display: inline-block; }
.sp_only { display: none; }

@media screen and (max-width: 1000px) {
	.pc_only { display: none; }
	.sp_only { display: inline-block; }
}

#loading { width: 100%; height: 100%; display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background:url(../img/loading.gif)#8bb220 center no-repeat; background-size:50px;  z-index: 10000; }
/*#loading img{ width:50px; height:50px; direction:inherit; position:absolute; left:50%; top:50%; -webkit-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); }*/

/*header*/
header { display:-ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack:justify;-webkit-box-pack: justify; justify-content: space-between; align-items: center; padding: 1.5rem 50px 0; background: #8BB220; }
.head-sns { color: #FFF; }
.head-sns > li { display: inline-block; vertical-align: middle;}
.head-sns > li + li { margin-left: 1rem;  }

header .logo { width: 20vw; height: 7vw; max-width: 265px; max-height: 88px; }

@media screen and (max-width: 1500px) {
	header .logo { width: 17vw; }
	

}


@media screen and (max-width: 1300px) {
	.header-wrapper { padding: 1rem 5%; }
	 header .logo {  width: 33vw; height: 12vw; margin-top: .1vh;}
	.head-sns > li + li { margin-left: .5rem;  }

}

@media screen and (max-width: 600px) {
.header-wrapper {   padding:3%;}
}


main { position :relative; z-index: 2; }
.wrapper{ overflow:hidden; display:block;}

/* ///////////////   ハンバーガーボタン   ///////////////////////*/
.btn_gNavi { width: 5em; height: 4em; padding: .5em 0 1.5rem; border: none; background: #FFF; position: fixed; top: 100%; left: 0; right: 0; margin: auto; border-radius: 0 0 2em 2em; text-indent: 100%; overflow: hidden; white-space: nowrap; z-index: 9999;display: none;  }
.btn_gNavi:before,
.btn_gNavi:after { content: ''; width: 2em; height: 1px; display: block; position: absolute; top: 2em; left: 0; right: 0; margin: auto; background: #4D4012; }
.btn_gNavi:before { -ms-transform: translateY(-.5em); -webkit-transform: translateY(-.5em); transform: translateY(-.5em); box-shadow: 0 .5em #4D4012; }
.btn_gNavi:after  { -ms-transform: translateY(.5em); -webkit-transform: translateY(.5em); transform: translateY(.5em); }

.btn_gNavi:before, .btn_gNavi:after {    top: 2.6em;}

@media screen and (max-width: 1300px) {
	.btn_gNavi { display: block; border: 1px solid #8bb220;}
	.btn_gNavi.open { background: #4D4012; border:1px solid #4D4012;  }
	.btn_gNavi.open:before { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #FFF; }
	.btn_gNavi.open:after  { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background: #FFF; }
}

.global-navi { display: inline-block; }
.global-navi > ul > li { display: inline-block; color: #FFF; }
.global-navi > ul > li svg { fill: currentColor; width: auto; height: 1.2rem; -ms-transition: fill .3s; -webkit-transition: fill .3s; transition: fill .3s; }
.global-navi > ul > li:hover svg { fill: #FFFF00; width: auto; height: 1.2rem; }

.global-navi > ul > li + li { margin-left: 2rem; }
.btn-head-info { width: 265px; padding: .6em 0; margin-top:-0.5em;  }
.btn-head-info >svg { fill: #FFF;height: 1rem; display: inline-block; vertical-align :middle; }
.btn-head-info:hover >svg { fill: #4D4012; }

.global-navi .menu-logo { display: none; }
.gnavi-submenu { display: none; }

@media screen and (max-width: 1300px) {
	.global-navi > ul > li svg {  width: auto; height: 1rem; }
	.global-navi > ul > li:hover svg { fill: #4D4012; width: auto; height: 1rem; }
}
@media screen and (max-width: 1500px) {
.btn-head-info{ width:228px;}
}

@media screen and (max-width: 600px) {
	.btn-head-info{ right: 3vw; margin-top:0;}
	.clock {   width: 50vw; height: 50vw;  max-width: 600px;    max-height: 600px;  background: #CCC;    border-radius: 50%;    margin: 0 auto;    position: relative;}
}


@media screen and (max-width: 1300px) {
	header { position: reaetive; width: 100%; background: #8BB220; }
	
	
	.global-navi .menu-logo { display: block; width: auto; height: 5rem; margin: 1.5rem auto 1.5rem;}
	.global-navi .menu-logo svg { display: block; margin: 0 auto;}
	
	.global-navi { width: 90%; z-index: 999; position:fixed; top: 0; left: 0; right: 0; margin: auto; background: #FFF;  border: 3px solid; border-top: none; 
	border-radius: 0 0 2rem 2rem;
	 -ms-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%);
	-webkit-animation: pullup .3s linear forwards ; animation: pullup .3s linear forwards ; 
	-ms-transform-origin: top center; -webkit-transform-origin: top center; transform-origin: top center; }
	.global-navi.open { display: block;
	-ms-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%);
	-webkit-animation: pulldown .3s linear forwards ; animation: pulldown .3s linear forwards ; }
	
	.global-navi > ul > li { width: 50%; color: #4D4012; text-align: center; padding: 3rem; display: inline-block; vertical-align: middle; padding: 0; border-bottom: 3px solid #4D4012;  }
	.global-navi > ul > li > a { width: 100%; padding: 1.5em 0; display: block; }
	.global-navi > ul > li:nth-child(-n + 2) { border-top: 3px solid #4D4012; }
	.global-navi > ul > li:nth-child(n + 2) + li { margin-left: 0; }
	.global-navi > ul > li:nth-child(even) { margin-left: 0; border-left: 3px solid #4D4012; }
	.global-navi > ul > li svg { margin: 0 auto; height: 1rem; }
	
	.gnavi-submenu { display: block; margin: 1.5rem 0 1.5rem;}
	.gnavi-submenu .btn-info { display: inline-block; width: auto; line-height: 120%; padding: .5rem 1rem; border-radius: 2rem; margin-bottom: .8rem; }
	.gnavi-submenu .btn-info > svg { fill: #FFF; display: inline-block; height: 1rem; margin: 0 auto; }
	.gnavi-submenu .btn-info:hover > svg { fill: #4D4012; display: inline-block; height: 1rem; margin: 0 auto; }
	
	.btn-head-info { width: auto; line-height: 120%; padding:.4rem 1rem; border-radius: 2rem; font-size: .7rem; letter-spacing: .2em; position: absolute; top: 3vw; right: 3%; margin: auto; }
	
	
	.btn-head-info > svg { display: block; margin: 0 auto; height: 1rem; }
	.btn-head-info > svg:first-child{ margin-bottom:3px; margin-top:2px;}
	.btn-head-info > svg.pc_only { display: none; }

}
@media screen and (max-width: 1000px) {
	.btn-head-info > svg { height: .8rem; }
}

@-webkit-keyframes pullup { 
	0% { -ms-transform: scaleY(1) translateY(0%); -webkit-transform: scaleY(1) translateY(0%); transform: scaleY(1) translateY(0%);  }
/*	60% { -ms-transform: scaleY(1.1) translateY(0%); -webkit-transform: scaleY(1.1) translateY(0); transform: scaleY(1.1) translateY(0);  }
	80% { -ms-transform: scaleY(1) translateY(-5%); -webkit-transform: scaleY(1) translateY(0%); transform: scaleY(1) translateY(0%);  }
*/	100% { -ms-transform: scaleY(1) translateY(-100%); -webkit-transform: scaleY(1) translateY(-100%); transform: scaleY(1) translateY(-100%);  }
}	
@keyframes pullup { 
	0% { -ms-transform: scaleY(1) translateY(0%); -webkit-transform: scaleY(1) translateY(0%); transform: scaleY(1) translateY(0%);  }
/*	60% { -ms-transform: scaleY(1.1) translateY(0%); -webkit-transform: scaleY(1.1) translateY(0); transform: scaleY(1.1) translateY(0);  }
	80% { -ms-transform: scaleY(1) translateY(-5%); -webkit-transform: scaleY(1) translateY(0%); transform: scaleY(1) translateY(0%);  }
*/	100% { -ms-transform: scaleY(1) translateY(-100%); -webkit-transform: scaleY(1) translateY(-100%); transform: scaleY(1) translateY(-100%);  }
}


@-webkit-keyframes pulldown { 
	0% { -ms-transform: scaleY(1) translateY(-100%); -webkit-transform: scaleY(1) translateY(-100%); transform: scaleY(1) translateY(-100%);  }
/*	60% { -ms-transform: scaleY(1.05) translateY(0%); -webkit-transform: scaleY(1.05) translateY(0); transform: scaleY(1.05) translateY(0);  }
	80% { -ms-transform: scaleY(.95) translateY(-5%); -webkit-transform: scaleY(.95) translateY(0%); transform: scaleY(.95) translateY(0%);  }
*/	100% { -ms-transform: scaleY(1) translateY(0%); -webkit-transform: scaleY(1) translateY(0%); transform: scaleY(1) translateY(0%);  }
}
@keyframes pulldown { 
	0% { -ms-transform: scaleY(1) translateY(-100%); -webkit-transform: scaleY(1) translateY(-100%); transform: scaleY(1) translateY(-100%);  }
/*	60% { -ms-transform: scaleY(1.05) translateY(0%); -webkit-transform: scaleY(1.05) translateY(0); transform: scaleY(1.05) translateY(0);  }
	80% { -ms-transform: scaleY(.95) translateY(-5%); -webkit-transform: scaleY(.95) translateY(0%); transform: scaleY(.95) translateY(0%);  }
*/	100% { -ms-transform: scaleY(1) translateY(0%); -webkit-transform: scaleY(1) translateY(0%); transform: scaleY(1) translateY(0%);  }
}


/*footer*/
footer { position: relative;letter-spacing: .1em; background: url(../img/bg-foot.gif) top center; background-size:689px; margin-top:100px;}
footer .footInner{width:400px;background:#FFFFFF;margin: 0 auto; padding-bottom:80px;}
.foot-logo { margin-bottom: 2rem; height: 10rem; text-align: center; }
.foot-logo svg { margin: 0 auto; }
.foot-info { display: inline-block; }
.foot-info .tel_sp{ padding-left:1em;}

.foot-info > * { width: 100%; margin-bottom: .5em; font-weight: bold; }
.foot-info .address { margin-bottom: 1rem; }
.foot-info .company span { font-size: .8rem; display: block; line-height: 150%; }
.foot-info .tel { font-size: 1.2rem; }
.foot-info a { margin-top: 1rem; }
.copyright {font-size: .8rem;margin-top: 50px;}

@media screen and (max-width: 600px) {
	footer { padding: 5rem 0 3rem; font-size: .8rem; margin-top:5vh; }
	footer { position: relative;letter-spacing: .1em; background:url(../img/bg-foot.gif) center bottom repeat; background-size:345px;}
	footer .footInner{width:100%;background:#FFFFFF;margin: 0 auto; padding:10% 0;}
	.foot-logo { height: 6rem; }
	.foot-info .address { margin-bottom: 0; }
	.copyright { font-size: .6rem; margin-top: 3rem; }
	
}

.address-attention { font-size: .8rem; font-weight: normal; line-height: 150%; margin-top: 1em; }
.address-attention a {margin: 1em 0; display: block; text-decoration: underline; }

.octagon-sns { width: 50vw; height: 50vw; max-width: 200px; max-height: 200px; position: relative; margin: 0 auto; }
.octagon-sns:before,
.octagon-sns:after { content:'';  width: 100%; height: 100%; background-image: url(../img/tri-border-h.png), url(../img/tri-border-h.png), url(../img/tri-border-v.png), url(../img/tri-border-v.png); background-repeat: no-repeat; background-position: center top, center bottom, left center, right center; background-size: 60% auto, 60% auto, auto 60%, auto 60%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: -1; }
.octagon-sns:after { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.octagon-sns.sns-one { width: 5rem; height: 5rem; }

.octagon-sns h2 { font-size: 1.2rem; margin: -2rem auto 1rem; }

.conts-sns { height: 2rem; }
.conts-sns > li { display: inline-block; }
.conts-sns > li + li { margin-left: .5rem; }
.conts-sns .btn-sns { width: 2rem; height: 2rem; }
@media screen and (max-width: 600px) {
	.conts-sns { height: 1.5rem; }
	.conts-sns > li + li { margin-left: .25rem; }
	.conts-sns .btn-sns { width: 1.5rem; height: 1.5rem; }

	.octagon-sns { width: 60vw; height: 40vw; }
	.octagon-sns:before { background: url(../img/octagon-sp.png) no-repeat center center; background-size: 100% auto;  }
	.octagon-sns:after { display: none; }
	.octagon-sns h2 { margin: -.6rem auto 0; }

}
.inviewContents.inviewStd {opacity: 0;-ms-transition: all .8s .5s;-webkit-transition: all .8s .5s;transition: all .8s .5s;padding:0;display: block;}
.inviewContents.inviewStd.inview { opacity: 1; }

.inviewContents.pokopoko figure { -ms-transform: scale(0.8); -webkit-transform: scale(0.8); transform: scale(0.8); }
.inviewContents.pokopoko figure img{ opacity:0; -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2);}
.inviewContents.pokopoko.inview figure { 
	-webkit-animation: poko 1s cubic-bezier(0.37, 0, 0.47, 1.1) forwards ; animation: poko 1s cubic-bezier(0.37, 0, 0.47, 1.1) forwards ; 
	-ms-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.inviewContents.pokopoko.inview figure img{ opacity:1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);}
.inviewContents.pokopoko.inview > li:nth-child(1) figure { -webkit-animation-delay: .5s; animation-delay: .5s; }
.inviewContents.pokopoko.inview > li:nth-child(2) figure { -webkit-animation-delay: 0s; animation-delay: 0s; }
.inviewContents.pokopoko.inview > li:nth-child(3) figure { -webkit-animation-delay: 1s; animation-delay: 1s; }
.inviewContents.pokopoko.inview > li:nth-child(4) figure { -webkit-animation-delay: 2s; animation-delay: 2s; }
.inviewContents.pokopoko.inview > li:nth-child(5) figure { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }

.inviewContents.pokopoko .conts-txt { opacity: 0; -ms-transition: all .5s 1.8s; -webkit-transition: all .5s 1.8s; transition: all .5s 1.8s; }
.inviewContents.pokopoko.inview .conts-txt  { opacity: 1; }


@-webkit-keyframes poko { 
	0% { -ms-transform: scale(.8); -webkit-transform: scale(.8); transform: scale(.8); }
	100% { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes poko { 
	0% { -ms-transform: scale(.8); -webkit-transform: scale(.8); transform: scale(.8);  }
	100% { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1);  }
}

.view360 { max-width: 700px; text-align: center; position: relative; }
.view360 img.dummy { width: 100%; }
.view360 .popup-close { position: absolute; top: -1.2rem; right: -1.2rem; margin: auto; z-index: 2; width: 3rem; height: 3rem; display: block; text-align: center; line-height: 3rem; padding: 0; border-radius: 50%; opacity: 1; }
.view360 p{ padding-top:1em;}
.view360 .ricoh-theta-spherical-image { width: 100%!important; height: 0!important; padding: 0 0 67%!important; margin: 0 auto; position: relative; }
.view360 .ricoh-theta-spherical-image >div { width: 100%!important; height: 100%!important;  }
.view360 .ricoh-theta-spherical-image iframe { width: 100%!important; height: 100%!important; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

.popup-btn{}


@media screen and (max-width: 600px) {
	.inviewContents.inviewStd {padding:50px 0 50px;display: block;}
}