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



/*
base #3e3a39
green #00af59
blue #00aca2
*/




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


Header


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

#header { width: calc(100% - 6% - 255px); z-index: 100; padding: 0 255px 0 6%; position: relative;}
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 130px; }
#header .logo { line-height: 0; }
#header .logo img { width: 260px; }
/* スクロール時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; }
#header.fixed .mainbox { height: 80px; }
#header.fixed .logo img { width: 180px; }

/* contactアイコン　*/
#header .contactbox { position: absolute; right: 0; top: 0; height: 160px; width: 230px; background: linear-gradient(135deg, rgba(0, 172, 162, 1) 0%, rgba(0, 175, 89, 1) 100%); color: #fff; display: flex; flex-direction: column; text-align: center; justify-content: center;
  align-items: center;}
#header .contactbox .txt { font-size: 12px;}
#header .contactbox a { display: block; color: #fff; }
#header .contactbox .tel { font-size: 28px; margin: 2px 0 15px; line-height: 1; }
#header .contactbox .tel svg {font-size: 0; width: 16px; height: 26px; margin-right: -2px; }
#header .contactbox .tel svg .st0 { fill: #fff; }
#header .contactbox .whitebtn { display: inline-block; width: 180px; height: 40px; line-height: 40px; border-radius: 20px; background: #fff; color: #00af59; font-weight: bold; text-decoration: none; margin: 0 auto;}
@media screen and (max-width: 1280px) {
	#header { width: calc(100% - 40px - 255px); padding-left: 40px; }
	#header .cap { display: none; }
	#header .logo img { width: 240px; }
}
@media screen and (max-width: 1040px) {
	#header .logo { top: 0px; left: 40px; }
	#header,
	#header .mainbox { height: 100px; }
	#header .contactbox { display: none; }
}
@media screen and (max-width: 767px) {
	#header { width: calc(100% - 20px); padding-left: 20px; }
	#header,
	#header .mainbox { height: 80px; }
	#header .logo { left: 20px; }
	#header .logo img { width: 200px; }
}
@media screen and (max-width: 500px) {
	#header .logo img { width: 180px; }
}
/* スクロール時fixedのアニメーション */
@keyframes navfit {
  0% { transform: translate(0px, -50px); }
  100% { transform: translate(0px, 0px);  }
}






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


Nav


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

#gnav { }
#gnav::after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#gnav .bg { opacity: 0; }
#gnav .navlogo { display: none; }
#gnav ul.main { text-align: right; }
#gnav ul.main>li { display: inline-block; float: left; position: relative; }
#gnav ul.main>li::after { content: "/"; padding: 0 10px; vertical-align: middle; }
#gnav ul.main>li a { text-decoration: none; position: relative; vertical-align: middle; font-size: 15px; font-weight: bold; }
#gnav ul.main>li a:hover { color: #aaa; opacity: 1; }
#gnav ul.main>li span.en { display: none; }
#gnav ul.main>li:nth-child(6)::after { display: none; }
#gnav ul.main>li[data-state="spblock"] { display: none; }

@media screen and (max-width: 1280px) {
	#gnav ul.main { right: -40px; }
	#gnav ul.main>li:after { padding: 0 7px; }
}
@media screen and (max-width: 1180px) {
	#gnav ul.main>li { margin-left: 8px; font-size: 15px; }
	#gnav ul.main>li:after { display: none; }
}
@media screen and (max-width: 1040px){
	#gnav { z-index: 1000; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; }
	#gnav .innav { position: absolute; top: 50%; left: 0; text-align: center; width: 84%; padding: 0px 8%; /* Safari用 */ transform: translate(0, -50%); }
	#gnav ul.main { position: static; display: block; text-align: center; }
	#gnav ul.main>li { display: block!important; margin: 0; float: none; opacity: 0; font-size: 18px; text-align:left; line-height:1; margin-bottom:30px; }
	#gnav ul.main>li a { color: #fff; }
	#gnav ul.main>li span.en { font-size:48px; display: inline-block; margin-right:15px; }
	#gnav.is-open { pointer-events: auto; opacity: 1; }
	#gnav .bg {
		background : linear-gradient(135deg, rgba(0, 172, 162, 1) 0%, rgba(0, 175, 89, 1) 100%); position: absolute; top: 0; right: 0; bottom: 0px; left: 100%; overflow: hidden; z-index: -1; opacity: 1; transition: 0.6s;
 	}
	#gnav.is-open .bg { opacity: 1; -webkit-transform:scale(1,1); transform:scale(1,1);right: 0; left: 0; }
	#gnav.is-open ul.main>li { opacity:1; transition: 3s; }
}
@media screen and (max-width: 639px){
	#gnav ul.main>li { font-size: 18px; margin-bottom:15px; }
	#gnav ul.main>li a { color: #fff; font-size:12px; }
	#gnav ul.main>li span.en { font-size:32px; display: block; margin-bottom:2px; }
}









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


Menubtn


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

#menubtn {display: none; z-index: 1001; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 20px; right: 10px; display: block; background: transparent; width: 60px; height: 60px; transition : 0.3s; cursor: pointer; }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; }
	#menubtn a .line {
		width: 36px; height: 4px; background: #00af59; position: absolute; left: 50%; margin-left: -18px;
		-webkit-transition: all 0.3s; transition: all 0.3s;
	}
	#menubtn a #line1 { top: 26px; }
	#menubtn a #line3 { top: 34px; }
	#menubtn a:hover #line1 { top: 24px; }
	#menubtn a:hover #line3 { top: 36px; }
	#menubtn.active a .txt { display: none; }
	#menubtn.active a .line { width: 36px; background: #fff; }
	#menubtn.active a #line1 {
		top: 23px;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg);
		transform:translateY(10px) translateX(0) rotate(-30deg);
	}
	#menubtn.active a #line3 { 
		top: 43px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg); 
		transform:translateY(-10px) translateX(0) rotate(30deg);
	}
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; top: 10px; right: 5px; }
}









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


Mainv.index


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

#mainv.index { position: relative; height: 900px; display: flex; justify-content: space-between; align-items: flex-end; }
#mainv.index .copybox { margin-left: 10%; text-align: left; color: #fff; margin-bottom: 8%; }
#mainv.index .copybox .copy { font-size: 36px; line-height: 1.7; font-weight: bold; margin-bottom: 20px; }
#mainv.index .copybox .txt { font-size: 18px; margin-bottom: 30px; font-weight: bold; letter-spacing: 0.1em }
@media screen and (max-width: 1280px){
	#mainv.index .copybox  { left: 6%; }
}
@media screen and (max-width: 1040px){
	#mainv.index { height: 600px; }
	#mainv.index .copybox { margin-left: 10%; }
	#mainv.index .copybox .copy { font-size: 32px;margin-bottom: 20px; }
	#mainv.index .copybox .txt { font-size: 18px; margin-bottom: 20px; }
}
@media screen and (max-width: 767px){
	#mainv.index { height: 480px; }
	#mainv.index .copybox { margin-top: 30px; }
	#mainv.index .copybox .copy { font-size: 24px; margin-bottom: 10px; }
	#mainv.index .copybox .txt { font-size: 15px;  }
}
@media screen and (max-width: 639px){
	#mainv.index { height: 340px; align-items: center; }
	#mainv.index .copybox .copy { font-size: 20px; margin-bottom: 20px; }
	#mainv.index .copybox .txt { display: none; }
}

/* slidebox */
#mainv.index .bglist{  position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -2;}
#mainv.index .slidebox { z-index: -2; }
#mainv.index .slidebox,
#mainv.index .slidebox div,
#mainv.index .slidebox li { width: 100%; height: 100%; }
#mainv.index .slidebox li .bg { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; }
#mainv.index .slidebox li.slick-current .bg,
#mainv.index .slidebox li.slick-slide[tabindex="0"] .bg { animation: zoomout 10s linear 0s 1 normal both; }
#mainv.index .slidebox li.slick-slide[tabindex="-1"] .bg { width: 100%; height: 100%; }
@keyframes zoomout {
	0% { transform: scale(1);}
	100% { transform: scale(1.2); }
}



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


Mainv.under


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

#mainv.under { height: calc(240px + 10vw); position: relative; }
#mainv.under .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#mainv.under .bg img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; text-align: center; }
#mainv.under .pagetitle { position: absolute; bottom: -80px; left: 0; padding: 50px 80px; z-index:1; } 
@media screen and (max-width: 1040px){ 
	#mainv.under .pagetitle { bottom: -100px; } 
}
@media screen and (max-width: 767px){
	#mainv.under { height: 360px; }
	#mainv.under .pagetitle { bottom: -80px; padding: 40px 8%; } 
}
@media screen and (max-width: 500px){
	#mainv.under { height: 200px; }
}











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


Pankuzu


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

#pankuzu { line-height: 1.4; padding:20px 0; background: #f7f7f7; text-align: right; }
#pankuzu ol { margin: 0 60px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 14px; letter-spacing: 0.04em; }
#pankuzu ol li:before { content:">"; display: inline-block; margin: 0 5px; font-size: 10px; transform: scale(0.6, 1); vertical-align: 1px; }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; }
@media screen and (max-width: 1180px) { 
	#pankuzu{ display: none; }
	#pankuzu ol { display: none;}
}






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


Content


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

#main { margin-top: 120px; margin-bottom: 140px; }
#index #main { margin-top: 80px; margin-bottom: 140px; }
@media screen and (max-width: 1180px) { 
	#main { margin-top: 160px; }
}
@media screen and (max-width: 767px) { 
	#main { margin-top: 140px; margin-bottom: 80px; }
	#index #main { margin-top: 60px; margin-bottom: 80px; }
}



#content { display: flex; justify-content: space-between; }
#content #base { flex: 1; margin-right: 80px; }
#content #side { width: 220px; }
@media screen and (max-width: 1180px) { 
	#content #base { margin-right: 60px; }
}
@media screen and (max-width: 1040px) { 
	#content { display: block; }
	#content #base { margin-right: 0px; }
	#content #side { width: 100%; margin-top: 100px; }
}
@media screen and (max-width: 767px) { 
}









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


Cntside


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

#side {  }













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


Footer


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

#footer {  }

/* contactbox */
#footer .contactwrap { padding: 80px 8%; position: relative; }
#footer .contactwrap .bg { background: #ebf8f8; position: absolute; top: 0; right: 0; width: calc(92% - 60px); z-index: -1; height: 100%; }
#footer .contactbox { padding: 100px 0; background: linear-gradient(135deg, rgba(0, 172, 162, 1) 0%, rgba(0, 175, 89, 1) 100%); color: #fff; }
#footer .contactbox .incnt { display: flex; justify-content: space-between; align-items: center; }
#footer .contactbox .titlebox { text-align: center; color: #fff; margin-right: 20px; }
#footer .contactbox .titlebox .topsectitle { text-align: left; }
#footer .contactbox .titlebox .txt2 {text-align: justify; }
#footer .contactbox .inbox { display: flex; flex-direction: column; text-align: center; justify-content: center; align-items: center;}
#footer .contactbox .inbox .txt1 { letter-spacing: 0.15em; }
#footer .contactbox .inbox .txt2 { margin-bottom: 20px; }
#footer .contactbox .inbox .tel { font-size: 46px; margin: 5px 0; line-height: 1; color: #fff; }
#footer .contactbox .inbox .tel svg { font-size: 0; width: 24px; height: 40px; margin-right: -2px; }
#footer .contactbox .inbox .tel svg .st0 { fill: #fff; }
@media screen and (max-width: 1040px) {
	#footer .contactwrap { margin-bottom: 80px; }
}
@media screen and (max-width: 767px) {
	#footer .contactwrap { padding: 40px 0%; margin-bottom: 40px; }
	#footer .contactbox .inbox .txt1 { letter-spacing: 0.1em; }
	#footer .contactbox .inbox .tel { font-size: 32px;  }
	#footer .contactbox .inbox .tel svg { width: 16px; height: 26px; }
}
@media screen and (max-width: 639px) {
	#footer .contactwrap .bg { width: calc(100% - 40px); }
	#footer .contactbox { padding: 60px 0; }
	#footer .contactbox .titlebox { margin-bottom: 40px; margin-right: 0; }
	#footer .contactbox .titlebox .topsectitle { text-align: center; }
	#footer .contactbox .incnt { flex-direction: column; }
}


#footer .areabox { padding: 60px 0; background: #0098ab; text-align: center; color: #fff; }
#footer .areabox .title1 { font-weight: bold; font-size: 18px; }
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) {
	#footer .areabox { padding: 40px 0; }
}


#footer .fnavbox { padding: 80px 0; }
#footer .fnavbox .fnav { text-align: center; font-size: 0; }
#footer .fnavbox .fnav li { display: inline-block; font-size: 16px; }
#footer .fnavbox .fnav li:after { content: "/"; margin: 0 5px; }
#footer .fnavbox .fnav li:last-child:after { content: ""; margin: 0 5px; }
#footer .fnavbox .fnav li a { text-decoration: none; }
#footer .fnavbox .fnav li a:hover { text-decoration: underline; color: inherit; }
@media screen and (max-width: 1040px) {
	#footer .fnavbox  { display: none; }
}
@media screen and (max-width: 767px) {
}


#footer .infobox { padding: 65px 0; background: #ebf9f2; }
#footer .infobox .incnt { display: flex; justify-content: space-between; align-items: center; }
#footer .infobox .logo { width: 240px; margin-right: 30px; }
#footer .infobox .address { flex: 1; text-align: left;}
#footer .infobox .cr { text-align: right; font-size: 16px; color: #00aca2; }
@media screen and (max-width: 1040px) {
	#footer .infobox .incnt { flex-wrap: wrap; }
	#footer .infobox .logo {  margin-right: 0px; width: 100%; margin-bottom: 20px; }
	#footer .infobox .logo img { width: 240px; display: block; margin-right: auto; }
	#footer .infobox .address { flex: none; }
}
@media screen and (max-width: 767px) {
	#footer .infobox { padding: 40px 0 20px; background: #ebf9f2; }
	#footer .infobox .incnt { flex-direction: column; text-align: center; align-items: stretch; }
	#footer .infobox .address { margin: 10px 0 40px; text-align: center; }
	#footer .infobox .cr { text-align: center; font-size: 12px; }
	#footer .infobox .logo img {margin: 0 auto; }
}
@media screen and (max-width: 500px) {
	#footer .infobox .logo img { width: 200px; }
}