/*layout*/
@charset "utf-8";
.wrapper { width: 100%; overflow-x: hidden;  }

.contents-wrap-l { width: 100%; padding: 0 2rem; }
.contents-wrap-wide { width: 84%; max-width: 1312px;  margin: 0 auto; }
.contents-wrap { width: 84%; max-width: 1184px;  margin: 0 auto; }
.contents-wrap-m { width: 84%; max-width: 992px;  margin: 0 auto; margin-top: 100px}
.contents-wrap-n { width: 84%; max-width: 992px;  margin: 0px auto; }
.contents-wrap-s { width: 84%; max-width: 800px;  margin: 0 auto; }


.box-section { padding: 70px 0;  }
.box-section-t { padding-top: 70px;  }
.box-section_s { padding: 0px 0;  }

.box-section-f { padding: 0px 0;  padding-bottom: 30px}

@media screen and (max-width: 900px) {
	.contents-wrap-l { padding: 0 5%; }
	.box-section { padding: 30px 0;  }
	.box-section-t { padding-top: 30px;  }
    .box-section_s { padding: 0px 0;  }
    .box-section-f { padding: -20px 0;}
	
	.contents-wrap-wide { width: 90%; }
	.contents-wrap { width: 90%;  }
	.contents-wrap-m { width: 90%; }
	.contents-wrap-s { width: 90%; }
	
.contents-wrap-s .contents-wrap-s { width: 100%; }
	
}


.column { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; margin-top: 2rem;  }
.mainColumn { width: 70%; }
.sideColumn { width: 25%; }


/*ヘッダー*/
.header {  }
.header-top { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }

.header .head-logo { position: fixed; top: 3.5rem; left: 0.5vw; width: 100%; max-width: 100px;  height: auto; margin: auto; z-index: 10000; -ms-transform: translateY(-45%); -webkit-transform: translateY(-45%); transform: translateY(-45%); }

.global-navi { postion: relative;  }

/*
.global-navi #here-marker {  position: absolute; margin: auto; }
.global-navi .here-icon { width: 1.5em; height: 1px; margin-top: 5em; display: block;background: #333;  }
*/
/*
.global-navi .here-icon { width: 1.5em; height: 1.5em; margin-top: 1em; display: block;background: url(../img/baloon.svg) no-repeat center top / contain;  }
.global-navi .is-active .here-icon{ -webkit-animation: fuwafuwa 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) alternate infinite;  animation: fuwafuwa 2s alternate cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite; }
 
@-webkit-keyframes fuwafuwa {
  0%   { transform: translateY(0);  }
  50%  { transform: translateY(8px); }
  100%  { transform: translateY(0); }
}
@keyframes fuwafuwa {
  0%   { transform: translateY(0);  }
  50%  { transform: translateY(8px); }
  100%  { transform: translateY(0); }
}
*/


.global-navi #here-marker {  position: absolute; margin: auto; }
.global-navi .here-icon { width: 1.5em; height: 1.5em; margin-top: 5em; display: block; overflow: hidden; }
/*
.global-navi .here-icon:before { content: ''; width: 200%; height: 100%; display: block; background: url(../img/walk.png) repeat-x left top / 1.5rem auto; -webkit-animation: walk .3s steps(4);  animation: walk .8s steps(2) infinite; animation-play-state: paused;   }

.global-navi .is-active .here-icon{  }
.global-navi #here-marker.goleft { transform: scaleX(-1);transform: scaleX(-1);transform: scaleX(-1); }
@-webkit-keyframes walk {
  0%   { transform: translateX(0);  }
  100%  { transform: translateX(-50%); }
}
@keyframes walk {
  0%   { transform: translateX(0);  }
  100%  { transform: translateX(-50%); }
}

*/

 /*
@-webkit-keyframes fuwafuwa {
  0%   { transform: translateY(0);  }
  50%  { transform: translateY(8px); }
  100%  { transform: translateY(0); }
}
@keyframes fuwafuwa {
  0%   { transform: translateY(0);  }
  50%  { transform: translateY(8px); }
  100%  { transform: translateY(0); }
}
*/



.gNav { text-align: center; position: relative;  }
.gNav > li { display: inline-block; vertical-align: middle; padding: 1.5em 0;  font-weight: bold; position: relative; line-height: 100%; }
.gNav > li + li { margin-left: 3rem; }

.gNav > li > a { padding: 1.5em 0; display: block; position: relative; }
.gNav .gnavi-item { position: relative; }
.gNav .gnavi-item:after { content: ''; width: 100%; height: 1px; background: #333; display: block; position: absolute; bottom: 1.5rem; left: 0;  right: 0; -ms-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; transform: scaleX(0); -ms-transition: transform .5s; -webkit-transition: transform .5s; transition: transform .5s;  }
.gNav.hover .gnavi-item:hover:after { -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }


.gNav .gnavi-item.here:after { -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); }


.btn_humberger { color: #333; width: 4vw; height: 4rem; font-size: .9rem; display: block; background: none; outline: none; padding: 0; line-height:  100%;  border: 0;  z-index: 9999; position: fixed; top: 1.5rem; right: 2vw; margin: auto; text-indent: 100%; overflow: hidden; white-space:nowrap; cursor: pointer; }
.btn_humberger:before,
.btn_humberger:after { content:''; width: 100%; height: 1px; background: #333; border-radius: 2px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;  transition: -webkit-transform .3s;  transition: transform .3s;  }
.btn_humberger:before { -ms-transform: translateY(-.5em); -webkit-transform: translateY(-.5em); transform: translateY(-.5em); box-shadow: 0 .5em #333; }
.btn_humberger:after { -ms-transform: translateY(.5em); -webkit-transform: translateY(.5em); transform: translateY(.5em); -ms-transition: transform .3s; }
.btn_humberger.open:before { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); box-shadow: none; }
.btn_humberger.open:after { -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

.header.home { position: absolute; top: 0; left: 0; right: 0 ;margin: auto; z-index: 99; opacity: 0; pointer-events: none; }


.fixed-navi { opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999; background: #FFF; display: flex; justify-content: center; align-items: center; -ms-transition: all .5s; -webkit-transition: all .5s;  transition: all .5s;  }
.global-navi.open .fixed-navi{ opacity: 1; pointer-events: auto;  }

.fixed-navi > ul {  -ms-transform: scale(.95) translateY(15px); -webkit-transform: scale(.95) translateY(15px);transform: scale(.95) translateY(15px); -ms-transition: all .5s; -webkit-transition: all .5s;  transition: all .5s; text-align: left; }
.global-navi.open .fixed-navi.fixed-navi > ul { -ms-transform: scale(1); -webkit-transform: scale(1);transform: scale(1);   }

.fixed-navi > ul > li { font-weight: bold;  padding-right: 3em; position: relative; }
.fixed-navi > ul > li + li { margin-top: 8vh; }
.fixed-navi > ul > li:after { content: ''; width: 2em; height: 3em; display: block; position:absolute; right: 0; bottom: 0; margin: auto;  background: url(../img/arrow-r.png) no-repeat right center/ auto 6px; -ms-transition: all .3s; -webkit-transition: all .5s;  transition: all .5s; }

.fixed-navi.hover > ul > li:hover:after { -ms-transform: translateX(.5rem); -webkit-transform: translateX(.5rem); transform: translateX(.5rem);}

@media screen and (max-width: 900px) {
	.header { text-align: center; padding-top: 6rem;}
	.header .head-logo { position: fixed; width: 100%; height: auto; margin: 1.5rem auto; left: 0; right: 0; top: 0; -ms-transform: none; -webkit-transform: none;  transform: none; }
	.btn_humberger { top: 1rem; right: 5%; min-width: 1.7rem; }
	.global-navi {  position: fixed; top: 0; left: 0; right: 0; z-index: 98; width: 100%; height: 100vh; pointer-events: none; }
	.global-navi .gNav { display: none; }
	.global-navi.open { display: block; pointer-events: normal;}
	
	.gNav > li { display: block; width: 100%; }
	.gNav > li + li { margin-left: 0 ;margin-top: 1rem;  }

.fixed-navi > ul {  -ms-transform: scale(.95) translateY(10px); -webkit-transform: scale(.95) translateY(10px);transform: scale(.95) translateY(10px); }
	.global-navi .fixed-navi > ul { width :90%;  }

}



.btn-scroll { position: fixed; right: 0; bottom: 3rem; margin: auto; background: none; border: none; outline:none; cursor: pointer; overflow: visible; padding: 0;  }

.btn-scroll .cat { width : 8vw; height: 5vw; display: block; -webkit-animation: r1 2.5s cubic-bezier(.23,.55,.78,.52) infinite;  animation: r1 2.5s cubic-bezier(.23,.55,.78,.52) infinite; -webkit-animation-play-state: paused;  animation-play-state: paused; }
.btn-scroll .cat:after { content: ''; width: 100%; height: 100%; display: block; background: url(../img/cat.png) no-repeat center center / contain; -webkit-animation: r1 2s linear infinite;  animation: r1 2s linear infinite; animation-play-state: paused; }

.btn-scroll:before { content: ''; width: 1rem; height: 0; display: block; margin: auto auto 1rem; position: absolute; left: 0; right: 0 ; bottom: 100%; background: url(../img/arrow-top.png) no-repeat center top /3px auto; -ms-transition:  all 1s; -webkit-transition: all 1s .2s; transition:  all 1s .2s;  }
.btn-scroll:after { content: ''; width: 1rem; height: 3rem; display: block; margin: 1rem auto 0; background: url(../img/scroll-arrow.png) no-repeat center bottom /3px auto; -ms-transition:  all 1s; -webkit-transition: all 1s .2s; transition:  all 1s .2s;  }


.btn-scroll .inner { -ms-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; }

.btn-scroll.scrolled:before { height: 3rem; -ms-transform: translateY(80px); -webkit-transform: translateY(80px);  transform: translateY(80px); -ms-transition:  height 1s ws; -webkit-transition: height 1s 1s; transition:  height 1s 1s; }
.btn-scroll.scrolled .inner,
.btn-scroll:hover .inner { -ms-transform: translateY(80px); -webkit-transform: translateY(80px);  transform: translateY(80px);  }

.btn-scroll.moving .cat, 
.btn-scroll:hover .cat { -webkit-animation-play-state: running;  animation-play-state: running; }


.btn-scroll.scrolled:after,
.btn-scroll:hover:after { -ms-transform: translateY(100px); -webkit-transform: translateY(100px);  transform: translateY(100px);  }

.btn-scroll.scrolling .cat:after,
.btn-scroll:hover .cat:after {  -webkit-animation-play-state: running;  animation-play-state: running; }
 
@-webkit-keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes r1 {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (max-width: 900px) {
.btn-scroll { display: none!important; }
}

/*フッター*/
.copyright { font-size: .7rem; text-align: center; margin: 2rem 0; }


.foot-contact { border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; display: flex; align-items: center; padding: 3rem 8%; font-size: .875rem; }
.foot-contact .title { text-transform:uppercase; letter-spacing: .2em; font-size: 2rem; margin-right: 1em;}
.foot-contact .btn-arrow { text-transform:uppercase; letter-spacing: .2em; margin-left: auto; margin-right: 0; }


.link-foot-contact.hover { -ms-transition: background .5s, color .5s; -webkit-transition: background .5s, color .5s; transition: background .5s, color .5s; display: block; }
.link-foot-contact.hover:hover { background: #333; color: #FFF; }


.link-foot-contact.hover:hover .btn-arrow { }
.link-foot-contact.hover:hover .btn-arrow:after { background:#FFF; -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -ms-transform-origin: right center; -webkit-transform-origin: right center;  transform-origin: right center;  }

@media screen and (max-width: 900px) {
	.copyright { margin: 3rem 0;  }
	.foot-contact { padding: 2rem 0; text-align: center; display: block; }
	.foot-contact .title { margin-bottom: .5em; margin-right: 0; }
	.foot-contact .btn-arrow { margin-top: 1em; }
}
@media screen and (max-width: 600px) {
		.foot-contact .title { font-size: 1.5rem; }
}


.inviewStd { opacity: 0; -ms-transition: opacity .5s .3s; -webkit-transition: opacity .5s .3s; transition: opacity .5s .3s;  }
.inviewStd.inview { opacity: 1; }
.loading { widht: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 9999; background: #FFF;}