@charset "utf-8";
/* 
	
CSS base.css */



/*
base #191919
main #0000ff
*/



/*//////////////////


Header


//////////////////*/

#header { width: 100%; z-index: 100;  }
#header .box{display:flex;justify-content: space-between;height:140px; align-items:center; }
#header .logobox{ display:flex; justify-content:center; align-items:center; height:100%; flex-direction:column; padding:0 40px; border-right:1px solid #ddd; }
#header .logobox .logo { line-height: 0; }
#header .logobox .logo img { width: 220px; }
#header .logobox .cap{font-size:13px;}

/* スクロール時fixed */
#header.fixed { position: fixed; top: 0; background: #fff; background: rgba(255,255,255,0.97); animation: navfit 0.5s ease-out 0s 1 normal both; border-bottom:1px solid #ddd}
#header.fixed .box { height: 100px; }
#header.fixed .logo img {width: 180px;}
@media screen and (max-width: 1280px) {
	#header .logobox{ padding:0 30px;}
}
@media screen and (max-width: 1040px) {
	#header .box{ height:100px; }
	#header .logobox{  padding:0 20px; }
	#header .logobox .logo img { width: 160px; }
	#header .logobox .cap{ display:none; }
}
@media screen and (max-width: 767px) {
	#header .box{ height:80px; }
	#header .logobox .logo img { width: 120px; }
}

/* スクロール時fixedのアニメーション */
@keyframes navfit {
  0% { transform: translate(0px, -50px); }
  100% { transform: translate(0px, 0px);  }
}


#sidebox{width: 130px;position: fixed;top: 195px;right: 0;z-index: 10000;}

#sidebox>ul>li:not(:last-child){ margin-bottom: 20px; }
#sidebox a{ background: #01b603; display: flex; align-items: center; justify-content: center; width: 100%; height: 140px; color: #fff; font-size: 15px; flex-direction: column; }
#sidebox a .txt{ line-height: 1.4; font-weight: bold; text-align: center; }
#sidebox a .icon{ margin-top: 10px; }
#sidebox a .icon>.inwrap{ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-left: auto; margin-right: auto; border-radius: 50%; background: #fff; border: 1px solid #01b603; padding-top: 2px; box-sizing: border-box; }
#sidebox a .icon>.inwrap>img{ width: 24px; }
#sidebox a:hover{ background: #f7f7f7; color: #01b603; }
#sidebox>ul>li:nth-child(2) a{ background: #D3A53A; color: #fff; font-size: 12px; }
#sidebox>ul>li:nth-child(2) a .icon>.inwrap{ background: #fff; border: 1px solid #D3A53A; }
#sidebox>ul>li:nth-child(2) a .icon>.inwrap img{ width: 100%; }
#sidebox>ul>li:nth-child(2) a:hover{ background: #f7f7f7; color: #D3A53A; }
@media screen and (max-width: 1040px) {
	#sidebox{ top: auto; bottom: 0; left: 0; right: 0; width: 100%;  }
	#sidebox a{ font-size: 14px; flex-direction: row; align-items: center; height: 60px; }
	#sidebox a .txt{ margin-right: 10px; }
	#sidebox a .txt .tablethide{ display: none; }
	#sidebox a .icon{ margin-top: 0; }
	#sidebox>ul{ display: flex; flex-direction: row; }
	#sidebox>ul>li{ width: 50%; }
	#sidebox>ul>li:not(:last-child){ margin-bottom: 0; }
}
@media screen and (max-width: 767px) {
	#sidebox>ul>li a br{ display: block !important; }
	#sidebox a .txt{ text-align: left;}
}



/*//////////////////


Nav


//////////////////*/

#gnav { flex: 1; height:100%; }
#gnav .innav {display: flex;justify-content: space-between;align-items:center;height:100%;}
#gnav .navlogo { display:none; }
#gnav ul.main{display:flex;justify-content: center;flex: 1;}
#gnav ul.main>li:first-child { display: none; }
#gnav ul.main>li a { margin-right:30px; font-family: 'Montserrat', sans-serif; }
#gnav ul.main>li a:hover { color:#0000ff; }
#gnav ul.main>li:last-child a { margin-right:0px; }
#gnav .snsbox{height:100%;display:flex;flex-wrap: wrap;align-items: center;justify-content: center;text-align: center;padding:0 40px;border-left:1px solid #ddd;}
#gnav .snsbox .box1 .txt{ font-size:13px;}
#gnav .snsbox .iconlist{ display:flex; justify-content: center; }
#gnav .snsbox .iconlist>li { margin-right:10px;}
#gnav .snsbox .iconlist>li:last-child { margin-right:0px;}
#gnav .snsbox .iconlist>li img {width:22px; height:22px;}
#gnav .snsbox .iconlist>li a:hover { opacity:0.7; }
#gnav .snsbox .iconlist>li a:hover img {transform:scale(1.05); }
#gnav .snsbox .iconlist>li._line{ display: none; }
@media screen and (max-width: 1280px) {
	#gnav ul.main>li a { margin-right:20px; font-size: 14px; }
	#gnav .snsbox{  padding:0 30px; display: none; }
}
@media screen and (max-width: 1040px){
	#gnav { z-index: 1000; height: 100%; width:100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none;  }
	#gnav .innav { height:100%; width: 88%; padding: 0 6%; background:#fff; transition:0.6s; flex-direction:column;justify-content: center;opacity: 0; }
	#gnav ul.main{ flex:none; flex-wrap:wrap; opacity: 0;}
	#gnav ul.main>li a{ font-size: 1em;}
	#gnav .snsbox{ height:auto; width:100%; display:flex;flex-wrap: wrap;align-content: center;justify-content: center;text-align: center; padding:0; padding-top:30px; margin-top:30px; border-left:none; border-top:1px solid #191919;opacity: 0;}
	#gnav .snsbox .iconlist>li._line{ display: block; }
	#gnav.is-open { pointer-events: auto; opacity: 1; }
	#gnav.is-open .innav {  opacity: 1; }
	#gnav.is-open ul.main{ opacity: 1;}
	#gnav.is-open .snsbox{ opacity: 1;}
}







/*//////////////////


Menubtn


//////////////////*/

#menubtn {display: none; z-index: 1001; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 0; right: 0; display: block; background: transparent; width: 100px; height: 100px; transition : 0.3s; cursor: pointer; }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; background:#fff; }
	#menubtn a .line {
		width: 50px; height: 2px; background: #0000ff; position: absolute; left: 50%; margin-left: -25px;
		-webkit-transition: all 0.3s; transition: all 0.3s; /*animation: menuback 0.3s ease-out 0s 1 normal both;*/
	}
	#menubtn a #line1 { top: 46px; }
	#menubtn a #line3 { top: 54px; }
	/*#menubtn a:hover #line1 { animation: menuhover1 0.3s ease-out 0s 1 normal both;}
	#menubtn a:hover #line3 { animation: menuhover2 0.3s ease-out 0s 1 normal both; }*/
	#menubtn.active a .txt { display: none; }
	#menubtn.active a .line { width: 29px; }
	#menubtn.active a #line1 {
		top: 40px; width:52px!important;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg);
		transform:translateY(10px) translateX(0) rotate(-30deg);
	}
	#menubtn.active a #line3 { 
		top: 60px; width:52px!important;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg); 
		transform:translateY(-10px) translateX(0) rotate(30deg);
	}
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; width: 80px; height: 80px;  }
	#menubtn a #line1 { top: 36px; }
	#menubtn a #line3 { top: 44px; }
	#menubtn.active a #line1 { top: 30px; }
	#menubtn.active a #line3 { top: 50px; }
}
@keyframes menuhover1 {
  0% { width:10px; }
  100% { width:30px; }
}
@keyframes menuhover2 {
  0% { width:20px; }
  100% { width:50px; }
}
@keyframes menuback {
  0% { width:60px;}
  100% { width:50px; }
}











/*//////////////////


Pankuzu


//////////////////*/

#pankuzu {line-height: 1.4;padding: 17px 4%;text-align: right;position: relative; z-index: 10;width: 46%; margin-left: auto; box-sizing: border-box;}
#pankuzu ol li { display:inline; font-size: 14px; }
#pankuzu ol li:before {content:">";display: inline-block;margin: 0 8px 0 5px;font-size: 1rem;vertical-align: 2px;font-size: 12px;}
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li:first-child img{width: 14px;height: 14px;vertical-align: -1px;}
#pankuzu ol li a{ text-decoration: none; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; }
@media screen and (max-width: 1040px) { 
	#pankuzu{ display: none; }
}





/*//////////////////


Content


//////////////////*/

#main {margin-top: 100px;margin-bottom: 130px;}
@media screen and (max-width: 767px) { 
	#main { margin-top: 40px; margin-bottom: 60px; }
}










/*//////////////////


Cntside


//////////////////*/

#side {  }













/*//////////////////


Footer


//////////////////*/


#footer { display:flex; }
#footer .box{width: 350px;}
#footer .box .logobox{background:#f7f7f7;padding: 40px 0;text-align:center;}
#footer .box .logobox .logo{width:200px; height:42px;}
#footer .box .logobox p{font-size:13px;}
#footer .box .infolist { background:#0000ff;color:#fff;display: flex;justify-content: center;align-items: center;}
#footer .box .infolist ul { padding:80px 6%;}
#footer .box .infolist ul li{ margin-bottom:40px;}
#footer .box .infolist ul li:last-child{margin-bottom:0px;}
#footer .mapbox{ width:85%;}
#footer .mapbox .map{ height:calc(100% - 140px);}
#footer .crbox{display:flex;height: 140px;}
#footer .crbox .top{font-size:14px;background:#191919;width:12%;display:flex;align-items:center;text-align: center;font-family: 'Montserrat', sans-serif;justify-content: center;}
#footer .crbox .top a{color:#fff;}
#footer .crbox .fnav{font-size:14px;display: flex;flex:1;align-items: center;padding: 0 3%;letter-spacing: 0.1em;}
#footer .crbox .fnav>li{font-family: 'Montserrat', sans-serif;margin-right: 25px;}
#footer .crbox .top span,
#footer .crbox .fnav>li span,
#footer .crbox .fnav>li .cr{font-weight:bold;}
#footer .crbox .snsbox{width: 190px;text-align:center;align-items: center;justify-content: center;text-align: center;height: 100%;display: flex;flex-wrap: wrap;position: relative; border-left:1px solid #ddd;}
#footer .crbox .snsbox .txt{font-size:13px;}
#footer .crbox .snsbox .iconlist{display:flex;text-align: center;justify-content: center;}
#footer .crbox .snsbox .iconlist>li{margin-right:10px;}
#footer .crbox .snsbox .iconlist>li .icon_insta,
#footer .crbox .snsbox .iconlist>li .icon_line,
#footer .crbox .snsbox .iconlist>li .icon_map{ width:22px; height:22px;} 
@media screen and (max-width: 1400px) {
	#footer { display:block; }
	#footer .box{width:100%;text-align:center;}
	#footer .box .logobox{padding: 30px 0;}
	#footer .mapbox{width:100%;}
	#footer .mapbox .map{height: 600px;}
	#footer .box .infolist ul { padding:40px 6%;}
	#footer .crbox .fnav { width:100%;justify-content:center;  margin-right: 18px;}
	#footer .crbox{height: 80px;}
	#footer .crbox .top,
	#footer .crbox .fnav li,
	#footer .crbox .snsbox {display: none;}
	#footer .crbox .fnav li:last-child { display:block; }
}
@media screen and (max-width: 1040px) {
	#footer { margin-bottom: 60px; }
}
@media screen and (max-width: 767px) {
	#footer .box .logobox .logo{width:160px; height:32px;}
	#footer .mapbox .map{height: 400px;}
	#footer .crbox{height: 60px;}
}