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


/*
base #333
green #00af84
*/


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


Header


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

#header { width: 100%; z-index: 100; position: absolute; top: 0; left: 0; }
#header>.logo { line-height: 0; position: absolute; left: 60px; top: 50px; transition: 0.6s; }
#header>.logo img { width: 120px; }
@media screen and (max-width: 1100px) {
	#header>.logo { left: 6%; }
}
@media screen and (max-width: 767px) {
	#header>.logo { top: 30px; left: 30px; }
	#header>.logo img { width: 110px; }
}







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


Nav


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

#snav { position: absolute; top: 55px; right: 180px; }
#snav ul.list { display: flex; align-items: center; font-size: 0; }
#snav ul.list li { margin-left: 15px; }
#snav ul.list li { width: 16px; }
#snav ul.list li:last-child { margin-left: 25px; width: auto; }
#snav ul.list li:last-child a.btn.base { padding: 0 0 5px; color: #fff; }
#snav ul.list li:last-child a.btn.base:after { background: #fff;}
#snav ul.list li:last-child a.btn.base:hover:after { width: calc(100% - 20px); left: 10px; }
#snav ul.list { display: flex; justify-content: space-between; align-items: center; }
@media screen and (max-width: 1100px){
	#snav { right: calc(4% + 110px); }
}
@media screen and (max-width: 767px){
	#snav { display: none; }
}

#gnav { z-index: 1000; position: fixed; top: 0; left: -50vw; display: flex; justify-content: space-between; align-items: center; height: 100vh; overflow-y: scroll; width: 50vw; background: #eee; pointer-events: none; transition: 1s cubic-bezier(.51,.09,.43,1) 0s; -ms-overflow-style: none; scrollbar-width: none; }
#gnav::-webkit-scrollbar { display:none; }
#gnav .wrap { width: 100%; height: 100%; display: block; display: flex; align-items: center; justify-content: center; position: relative; }
#gnav .navbox { z-index: 10; width: 100%; padding: 0 8%; box-sizing: border-box; }
#gnav.is-open{ pointer-events: auto; left: 0; }
#gnav ul.main { margin: calc(8vh) 0 20px; text-align: left; }
#gnav ul.main>li { font-size: 1.8rem; display: inline-block; margin-right: 0.8em; }
#gnav ul.sub { margin-bottom: calc(8vh + 60px); }
#gnav ul.sub>li { font-size: 1.6rem; display: inline-block;  margin-right: 0.8em; }
#gnav .contactbox { width: 100%; position: absolute; bottom: 60px; left: 8%; }
#gnav .contactbox .txt3 { font-size: 1.4rem; font-weight: bold; font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; letter-spacing: 0.18em; line-height: 1; margin-top: 25px; }
#gnav .contactbox .inbox { display: flex; align-items: flex-end;}
#gnav .contactbox .inbox .logo { width: 140px; margin-right: 30px; }
#gnav .contactbox .inbox .logo.white { display: none; }
#gnav .contactbox .inbox ul.snslist { width: 140px; margin-right: 40px; display: flex; align-items: center; font-size: 0; }
#gnav .contactbox .inbox ul.snslist li { width: 20px; margin-right: 13px; }
#gnav .contactbox .inbox ul.snslist li img:nth-child(2) { display: none; }
#gnav .contactbox .inbox ul.snslist li:nth-child(3) { width: 19px; }
#gnav .contactbox .inbox ul.snslist li:nth-child(4) { width: 22px;}
@media screen and (max-width: 767px){
	#gnav { left: -100vw; width: 100vw; background: #333; }
	#gnav ul.main { margin-top: 60px; }
	#gnav ul.main>li { font-size: 1.8rem; margin-right: 0; display: block; }
	#gnav ul.main>li a { color: #fff; }
	#gnav ul.sub { margin-bottom: 60px; }
	#gnav ul.sub>li { font-size: 1.4rem; margin-right: 0; display: block; }
	#gnav ul.sub>li a { color: #fff; }
	#gnav .contactbox { padding-bottom: 40px; position: static; }
	#gnav .contactbox .txt3 { color: #fff; font-size: 1.2rem; margin-top: 18px; }
	#gnav .contactbox .inbox ul.snslist li img:nth-child(1) { display: none; }
	#gnav .contactbox .inbox ul.snslist li img:nth-child(2) { display: block; }
	#gnav .contactbox .inbox .logo { width: 120px; margin-right: 20px; display: none; }
	#gnav .contactbox .inbox .logo.white { display: block; }
	#gnav .contactbox .inbox ul.snslist li { margin-right: 8px; }
}
@media screen and (max-width: 500px){
	#gnav ul.main { margin-bottom: 15px;}
	#gnav ul.main>li { font-size: 1.6rem; }
	#gnav ul.sub>li { font-size: 1.4rem; }
}
@keyframes bgfadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes bgfadeout {
  0% { visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}










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


Menubtn


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

#menubtn { position: fixed; top: 50px; right: 60px; display: block; background: transparent; width: 80px; height: 30px; transition: 1.15s cubic-bezier(0.25, 1, 0.5, 1) 0s; cursor: pointer; z-index: 1001; }
#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; }
#menubtn a .line { width: 80px; height: 1px; background: #fff; position: absolute; left: 0; transition: 0.3s; }
#menubtn a #line1 { top: 10px; }
#menubtn a #line2 { top: 20px; }
#menubtn a:hover #line1 { top: 15px; }
#menubtn a:hover #line2 { top: 15px; }
#menubtn.active {  }
#menubtn.active a #line1 {
	top: 15px;
	-webkit-transform:translateY(0) translateX(0) rotate(-20deg);
	transform:translateY(0) translateX(0) rotate(-20deg);
}
#menubtn.active a #line2 { 
	top: 15px;
	-webkit-transform:translateY(-0) translateX(0) rotate(20deg); 
	transform:translateY(-0) translateX(0) rotate(20deg);
}
#menubtn.change a .line { background: #333; }
@media screen and (max-width: 1100px){
	#menubtn { right: 4%; }
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; top: 30px; right: 20px; width: 60px; }
	#menubtn a .line { width: 60px; }
	#menubtn a #line1 { top: 11px; }
	#menubtn a #line2 { top: 19px; }
	#menubtn a:hover #line1 { top: 12px; }
	#menubtn a:hover #line2 { top: 18px; }
	#menubtn.active a .line { background: #fff; }
	#menubtn.active a #line1,
	#menubtn.active a #line2 { top: 15px; }
}










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


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%; }
@media screen and (max-width: 1500px){
	#mainv.under { height: 600px; }
}
@media screen and (max-width: 1100px){
	#mainv.under { height: calc(200px + 20vw); }
}
@media screen and (max-width: 767px){
	#mainv.under { height: 400px; margin-bottom: 80px; }
}












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


Pankuzu


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

#pankuzu { line-height: 1.4; padding-top:18px;text-align: center; margin-bottom: 120px; }
#pankuzu ol { margin: 0 40px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 1.4rem; }
#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; margin-bottom: 80px; }
	#pankuzu ol { margin: 0 6%; }
}










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


Content


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

#article { margin-top: 120px; margin-bottom: 200px; }
@media screen and (max-width: 767px) { 
	#article { margin-top: 60px; margin-bottom: 160px; }
}










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


Cntside


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

#side {  }










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


Footer


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

/* #pagetop */
#pagetop { position: fixed; right: 40px; bottom: 40px; z-index: 100; }
#pagetop a.icon { position: relative; width: 40px; height: 25px; display: block; }
#pagetop a.icon::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 26px; height: 26px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(-45deg); transition: 0.6s; }
#pagetop a.icon::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 36px; height: 1px; background: #333; }
#pagetop a.icon:hover::before { top: 10px;}
@media screen and (max-width: 767px) { 
	#pagetop { right: 30px; bottom: 30px; }
	#pagetop a.icon { width: 30px; height: 20px; }
	#pagetop a.icon::before { width: 20px; height: 20px; }
	#pagetop a.icon::after { width: 28px; }
	#pagetop a.icon:hover::before { top: 0;}
}


/* contactbox */
#footer .contactbox { text-align: center; /* margin-bottom: 200px; */ margin-bottom: 120px; }
#footer .contactbox .copy { text-align: center; }
#footer .contactbox .inbox { display: flex; justify-content: center; align-items: center; }
#footer .contactbox .btnbox { margin-top: 40px; }
#footer .contactbox .btnbox li .base.btn { font-size: 2.8rem; line-height: 1.1;}
#footer .contactbox .btnbox li:nth-child(3) .base.btn { font-size: 2.0rem; padding-bottom: 14px; padding-top: 5px; }
@media screen and (max-width: 767px) { 
	#footer .contactbox { /* margin-bottom: 160px; */ margin-bottom: 100px; }
	#footer .contactbox .btnbox { margin-top: 20px; }
	#footer .contactbox .btnbox li { display: block; margin-top: 20px; }
	#footer .contactbox .btnbox li .base.btn { font-size: 1.8rem;}
	#footer .contactbox .btnbox li:nth-child(3) .base.btn { font-size: 1.6rem; padding-bottom: 10px; padding-top: 2px;}
}
@media screen and (max-width: 500px) { 
	#footer .contactbox { text-align: left; }
}

/* zebbox */
#footer .zebbox { margin-bottom: 120px; text-align: center; }
#footer .zebbox .copy.s2 { text-align: center; }
@media screen and (max-width: 767px) {
}

/* katarinebox */
#footer .katarinebox { margin-bottom: 80px; text-align: center; }
#footer .katarinebox .copy.s3 { margin-bottom: 10px; text-align: center; }
#footer .katarinebox .txt1 { font-size: 1.4rem; margin-bottom: 40px; }
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 767px) {
	#footer .katarinebox .txt1 { font-size: 1.3rem; margin-bottom: 30px; }
}

/* footerinfo */
#footer .mainbox { display: flex; justify-content: space-between; position: relative; height: 100vh; min-height: 700px; }
#footer .mainbox .logobox { width: 50%; padding: 0 10%; box-sizing: border-box; display: flex; align-items: center; background: #f7f7f7; }
#footer .mainbox .logobox img { width: 140px; }
#footer .mainbox .logobox .txt1 { margin-top: 20px; font-size: 1.5rem; font-weight: bold; font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; letter-spacing: 0.15em; }
#footer .mainbox .footerinfo { width: 50%; display: flex; justify-content: center; align-items: center; background: #eee; }
#footer .mainbox .footerinfo .infobox { text-align: left; width: 480px; }
#footer .mainbox .footerinfo #fnav ul a:hover {text-decoration: underline; }
#footer .mainbox .footerinfo #fnav ul.main { margin: 40px 0 15px; }
#footer .mainbox .footerinfo #fnav ul.main>li { display: inline-block; margin-right: 0.8em; }
#footer .mainbox .footerinfo #fnav ul.sub>li { display: inline-block; margin-right: 0.8em; }
#footer .mainbox .bottombox { display: flex; position: absolute; bottom: 20px; right: 40px; align-items: center; }
#footer .mainbox .bottombox .cr { margin-left: 15px; }
#footer .mainbox .bottombox .txt3 { font-size: 1.4rem;}
#footer .mainbox .bottombox .txt3:hover { text-decoration: underline; }
#footer .mainbox .bottombox ul.snslist { margin-right: 5px; display: flex; align-items: center; font-size: 0; }
#footer .mainbox .bottombox ul.snslist li { width: 20px; margin-right: 13px; }
#footer .mainbox .bottombox ul.snslist li img:nth-child(2) { display: none; }
#footer .mainbox .bottombox ul.snslist li:nth-child(3) { width: 19px; }
#footer .mainbox .bottombox ul.snslist li:nth-child(4) { width: 22px;}
@media screen and (max-width: 1280px) {
	#footer .mainbox .footerinfo .infobox { text-align: left; width: auto; padding: 0 15%; }
}
@media screen and (max-width: 1100px) {
	#footer .mainbox { padding: 0 6%; background: #f7f7f7; }
	#footer .mainbox .logobox { width: 300px; padding: 0;}
	#footer .mainbox .footerinfo { width: calc(100% - 300px); background: none; }
	#footer .mainbox .footerinfo .infobox { width: auto; padding: 0; }
	#footer .mainbox .bottombox { display: flex; left: 6%; right: auto; }
}
@media screen and (max-width: 767px) {
	#footer .mainbox { display: block; min-height: 0; height: auto; padding: 80px 6% 20px; }
	#footer .mainbox .logobox { width: auto; padding: 0; margin-bottom: 30px; }
	#footer .mainbox .logobox img { width: 120px; }
	#footer .mainbox .logobox .txt1 { font-size: 1.4rem; letter-spacing: 0.1em; }
	#footer .mainbox .footerinfo #fnav ul.main { margin: 40px 0 0; }
	#footer .mainbox .footerinfo #fnav ul.main>li,
	#footer .mainbox .footerinfo #fnav ul.sub>li { display: block; margin-right: 0; }
	#footer .mainbox .bottombox { position: static; display: block; margin-top: 60px; }
	#footer .mainbox .bottombox .cr { margin-left: 0; margin-top: 10px; }
	#footer .mainbox .footerinfo { display: block;  width: auto; background: none; }
}
@media screen and (max-width: 500px) {
}