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


/*
base #333
yellowgreen #b4d344
green #439e37;
blue #9fd9f6;
*/


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


Header


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

#header { width: 100%; z-index: 100; position: absolute; top: 0; left: 0; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; position: relative; }
#header .logobox { position: fixed; top: 0; left: 0; display: flex; }
#header .logobox .logo { width: 230px; height: 230px; display: flex; justify-content: center; align-items: center; background: #fff; border-bottom-right-radius: 40px; transition: 0.6s;}
#header .logobox .logo img { width: 150px; transition: 0.6s; }
#header .logobox .cap { font-weight: bold; line-height: 1.7; margin: 30px 0 0 30px; font-size: 1.6rem; transition: 0.3s; color: #fff; }
#index header .logobox .cap { color: #333; }
/* スクロール時fixed */
#header.fixed .logobox .logo { width: 140px; height: 140px; border-bottom-right-radius: 25px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);}
#header.fixed .logobox .logo img { width: 80px; }
#header.fixed .logobox .cap {opacity: 0; }
@media screen and (max-width: 1280px) {
	#header .logobox .logo { width: 180px; height: 180px; border-bottom-right-radius: 30px; }
	#header .logobox .logo img { width: 110px; }
}
@media screen and (max-width: 1100px) {
	#header .logobox .cap { display: none; }
}
@media screen and (max-width: 767px) {
	#header .logobox .logo { width: 100px; height: 100px; border-bottom-right-radius: 20px; }
	#header .logobox .logo img { width: 60px; }
}
@media screen and (max-width: 500px) {
	#header.fixed .logobox .logo { width: 80px; height: 80px; }
	#header.fixed .logobox .logo img { width: 50px; }
}










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


Nav


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

#pcnav { height: 100px; background: #fff; border-bottom-left-radius: 40px; position: fixed; top: 0; right: 0; transition: 0.6s; }
#pcnav ul { margin-left: 60px; display: flex; align-items: center; height: 100%;}
#pcnav ul li { display: flex; align-items: center; margin-right: 1em; height: 100%; }
#pcnav ul li a { font-weight: bold; }
#pcnav ul li a:hover { color: #9fd9f6; }
#pcnav ul li:last-child { margin-right: 0; }
#pcnav ul li:last-child a { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; width: 100%; padding: 0 20px; box-sizing: border-box; background:#9fd9f6; line-height: 1; color: #fff; margin-left: 15px; }
#pcnav ul li:last-child .icon { width: 31px; margin-bottom: 8px; font-size: 0; }
#pcnav ul li:last-child a:hover { background:#b4d344; }
#header.fixed #pcnav { height: 80px; border-bottom-left-radius: 25px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.1); }
#header.fixed #pcnav ul { margin-left: 40px; transition: 0.6s; }
#header.fixed #pcnav ul li a { font-size: 1.5rem; }
#header.fixed #pcnav ul li:last-child a { padding: 0 15px; margin-left: 5px; }
#header.fixed #pcnav ul li:last-child .icon { width: 26px; margin-bottom: 5px; }
@media screen and (max-width: 1100px){
	#pcnav { display: none; }
}

#gnav { display: none; }
@media screen and (max-width: 1100px){
	#gnav { display: none; z-index: 1000; position: fixed; top: 0; right: -580px; display: flex; justify-content: space-between; align-items: center; height: 100vh; overflow-y: scroll; width: 580px; background: #9fd9f6; pointer-events: none; transition: right 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s; -ms-overflow-style: none; scrollbar-width: none; /* opacity: 0; */ }
	#gnav::-webkit-scrollbar { display:none; }
	#gnav .wrap { width: 100%; height: 100%; display: block; display: flex; align-items: center; justify-content: center; }
	#gnav .navbox { z-index: 10; width: 100%; padding: 0 12%; box-sizing: border-box; }
	#gnav.is-open{ pointer-events: auto; right: 0; opacity: 1;}
	#gnav ul.main { margin: calc(8vh) 0 calc(2vh + 10px); }
	#gnav ul.main>li { margin-bottom: 5px;}
	#gnav ul.main>li a { font-size: 2.0rem; font-weight: bold;}
	#gnav .contactbtn { margin-bottom: 30px;}
	#gnav .contactbtn a.white { background: #fff; min-width: 260px; width: 260px; }
	#gnav .contactbtn a.white:hover { background: #f7f7f7; }
	#gnav .contactbtn a.white span { color: #333; }
	#gnav .tel a { font-size: 3rem; line-height: 1; }
	#gnav .tel a .icon { width: 26px; margin-right: 5px; }
	#gnav .tel .txt { font-size: 1.6rem;}
}
@media screen and (max-width: 767px){
	#gnav { right: -100vw; width: 100vw; }
	#gnav ul.main>li a { font-size: 1.8rem; }
	#gnav .tel a { font-size: 2.4rem; }
	#gnav .tel a .icon { width: 18px;}
	#gnav .tel .txt { font-size: 1.4rem;}
}
@media screen and (max-width: 500px){
	#gnav .contactbtn a.white { min-width: 0; width: 100%; }
}









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


Menubtn


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

#menubtn { display: none; }
@media screen and (max-width: 1100px){
	#menubtn { position: fixed; top: 0; right: 0; display: block; background: transparent; width: 100px; height: 100px; cursor: pointer; z-index: 1001;  }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; background: #9fd9f6; border-bottom-left-radius: 20px; transition: 0.6s; }
	#menubtn a .line { width: 50px; height: 2px; background: #333; position: absolute; left: 50%; margin-left: -25px; transition: 0.6s; }
	#menubtn a #line1 { top: calc(47% - 10px); }
	#menubtn a #line2 { top: 47%; }
	#menubtn a #line3 { top: calc(47% + 10px); }
	#menubtn a:hover #line1,
	#menubtn a:hover #line2,
	#menubtn a:hover #line3 { top: 47%; }
	#menubtn.active a { background: #fff; }
	#menubtn.active a .line { width: 50px; }
	#menubtn.active a #line1 {
		top: calc(48%);
		-webkit-transform:translateY(0) translateX(0) rotate(-45deg);
		transform:translateY(0) translateX(0) rotate(-45deg);
	}
	#menubtn.active a #line2 { opacity: 0; }
	#menubtn.active a #line3 { 
		top: calc(48%);
		-webkit-transform:translateY(-0) translateX(0) rotate(45deg); 
		transform:translateY(-0) translateX(0) rotate(45deg);
	}
}
@media screen and (max-width: 767px){
	#menubtn { width: 80px; height: 80px;  }
	#menubtn a .line { width: 40px; margin-left: -20px; }
	#menubtn a #line1 { top: calc(47% - 8px); }
	#menubtn a #line2 { top: 47%; }
	#menubtn a #line3 { top: calc(47% + 8px); }
	#menubtn a:hover #line1 { top: calc(47% - 8px); }
	#menubtn a:hover #line2 { top: 47%; }
	#menubtn a:hover #line3 { top: calc(47% + 8px); }
	#menubtn.active a .line { width: 48px; margin-left: -24px; }
	#menubtn.active a #line1 { top: 47%; }
	#menubtn.active a #line3 { top: 47%; }
}








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


Mainv.under


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

#mainv.under { position: relative; width: 100%; height: calc(300px + 20vw); }
#mainv.under img { object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height: 100%; }
#mainv.under .pagetitle { position: absolute; left: 8%; bottom: 15%; }
@media screen and (max-width: 1600px){
	#mainv.under { height: 620px; }
}
@media screen and (max-width: 1100px){
	#mainv.under { height: 500px; }
}
@media screen and (max-width: 767px){
	#mainv.under { height: 300px; margin-top: 0; }
	#mainv.under .pagetitle { left: 6%; bottom: 12%; }
}












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


Pankuzu


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

#pankuzu { line-height: 1.4; padding-top:18px; float: right; }
#pankuzu ol { margin: 0 40px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 1.5rem; }
#pankuzu ol li img { width: 13px; vertical-align: 0px; margin-right: 5px; }
#pankuzu ol li:before { content:""; border-right: 1px solid #333; border-top: 1px solid #333; width: 4px; height: 4px; display: inline-block; margin: 0 15px 0 10px; transform: rotate(45deg); vertical-align: 2px; font-size: 0; }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a:hover { text-decoration: underline; }
@media screen and (max-width: 767px) { 
	#pankuzu{ display: none; }
	#pankuzu ol { margin: 0 6%; }
}










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


Content


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

#article { margin-top: 120px; margin-bottom: 120px; }
#article.index { margin-top: 0; }
@media screen and (max-width: 767px) { 
	#article { margin-top: 80px; margin-bottom: 100px; }
	#article.index { margin-top: 0; }
}










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


Cntside


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

#side {  }










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


Footer


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


/* contactbox */
#sec_contact { background: url(../img/common/f_bg1.jpg); background-position: center center; background-size: cover; }
#sec_contact .incnt { display: flex; align-items: center; justify-content: space-between; }
#sec_contact .box1 { color: #fff; margin-right: 80px; width: 320px; }
#sec_contact .box1 .title { font-size: 3.8rem; margin-bottom: 20px; }
#sec_contact .txt {  }
#sec_contact .box2 { font-size: 3.2rem; line-height: 1; flex: 1; }
#sec_contact .box2 a { color: #fff; position: relative; padding: 0 10px; }
#sec_contact .box2 a:after { content: ""; background: #b4d344; width: 0; height: 100%; display: inline-block; position: absolute; top: 0; left: 0; z-index: 1; transition: 0.4s; }
#sec_contact .box2 a span { z-index: 2; position: relative; }
#sec_contact .box2 a img { z-index: 3; position: relative; }
#sec_contact .box2 a:hover:after { width: 100%; }
#sec_contact .box2 .txt { font-size: 1.6rem; margin-left: 10px; color: #fff; line-height: 2;}
#sec_contact .box2>* { display: flex; align-items: center; }
#sec_contact .box2 .telbox { border-bottom: 1px solid #fff; margin-bottom: 60px; padding-bottom: 60px; }
#sec_contact .box2 .telbox .tel .icon { width: 26px; vertical-align: -2px; margin-right: 10px; }
#sec_contact .box2 .telbox .tel .mont { letter-spacing: 0.1em; }
#sec_contact .box2 .mailformbox .mailform .icon { width: 32px; vertical-align: 0px; margin-right: 10px;}
@media screen and (max-width: 1280px) {
	#sec_contact .box2 { font-size: 2.8rem; }
	#sec_contact .box2 .telbox .tel .icon { width: 22px; }
	#sec_contact .box2 .mailformbox .mailform .icon { width: 28px; }
}
@media screen and (max-width: 1100px) {	
	#sec_contact .incnt { display: block; }
	#sec_contact .box1 { margin-right: 0; width: 100%; margin-bottom: 40px; }
	#sec_contact .box1 .title { margin-bottom: 0; }
	#sec_contact .box2 .telbox { margin-bottom: 20px; padding-bottom: 20px; }
}
@media screen and (max-width: 767px) {
	#sec_contact .box1 {  margin-bottom: 20px; }
	#sec_contact .box1 .title { font-size: 2.4rem; }
	#sec_contact .box2 { font-size: 2rem; }
	#sec_contact .box2>* { display: block; }
	#sec_contact .box2 a { padding: 0; }
	#sec_contact .box2 a:after { display: none; }
	#sec_contact .box2 .txt { font-size: 1.4rem; display: block; margin-left: 0; margin-top: 10px; }
	#sec_contact .box2 .telbox .tel .icon { width: 16px; margin-right: 5px; }
	#sec_contact .box2 .mailformbox .mailform .icon { width: 18px; margin-right: 5px; }
}

/* footerinfo */
#footer .infobox {  display: flex; align-items: center; background: #439e37; }
#footer .infobox .logo { width: 240px; height: 240px; background: #fff; }
#footer .infobox .logo a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
#footer .infobox .logo img { width: 160px; height: 160px; }
#footer .inbox { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; }
#footer .inbox .cap { color: #fff}
#footer .inbox .fnav { flex: 1; margin-left: 40px; }
#footer .inbox .fnav ul { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
#footer .inbox .fnav ul li { margin-left: 1em; }
#footer .inbox .fnav ul li a { color: #fff;}
#footer .crbox { font-size: 1.6rem; line-height: 1.8; padding: 20px 0; background: #f7f7f7; }
#footer .crbox .incnt { display: flex; justify-content: space-between; align-items: center; }
#footer .crbox li { display: inline-block; margin-left: 1em; }
#footer .crbox li.mec img { width: 100px; vertical-align: -3px; }
@media screen and (max-width: 1280px) {
	#footer .infobox .logo { width: 180px; height: 180px; }
	#footer .infobox .logo img { width: 110px; }
}
@media screen and (max-width: 1100px) {
	#footer .inbox .fnav { display: none; }
}
@media screen and (max-width: 767px) {
	#footer .infobox .logo { width: 100px; height: auto; }
	#footer .infobox .logo img { width: 60px; height: 120px; }
	#footer .inbox { padding: 0 6%; }
	#footer .crbox { font-size: 1.4rem; }
	#footer .crbox .incnt { flex-direction: column-reverse; text-align: center; }
	#footer .crbox li { display: inline-block; margin-left: 0; }
	#footer .crbox .cr { margin-top: 20px; }
}
@media screen and (max-width: 500px) {
	#footer .infobox .logo { width: 80px; height: auto; }
	#footer .infobox .logo img { width: 50px; }
	#footer .inbox .cap { line-height: 1.7; }
}