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


/*
base #191919
green #00af84
*/


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


Header


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

#header { width: 100%; z-index: 100; position: absolute; top: 0; left: 0; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 130px; position: relative; }
#header .logo { line-height: 0; position: fixed; left: 50%; top: 80px; margin-left: -90px; transition: 0.6s; }
#header .logo img { width: 180px; }
/* スクロール時fixed */
#header.fixed .logo { top: 40px; }
@media screen and (max-width: 1100px) {
	#header .logo { top: 40px; }
}
@media screen and (max-width: 767px) {
	#header { height: 90px; background: #fff; }
	#header .logo { top: 30px; margin-left: -70px; position: absolute;  }
	#header .logo img { width: 130px; }
}










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


Nav


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

#mnav { }
#mnav .list ul.sub,
#mnav .list ul.main { position: absolute; right: 30px; display: flex; align-items: center; transition: 0.6s; }
#mnav .list ul.sub { top: 20px; }
#mnav .list ul.sub li { margin-left: 1em; line-height: 1; position: relative; font-size: 1.5rem; }
#mnav .list ul.sub li .icon { width: 24px; margin-left: 0; vertical-align: -3px; display: inline-block; transition: 0.6s; }
#mnav .list ul.main { top: 88px; }
#mnav .list ul.main li { margin-left: 1em; line-height: 1; position: relative; }
#mnav .list li a:after { content:""; width: 0; height: 1px; background: #191919; position: absolute; bottom: -5px; left: 0; transition: 0.6s; }
#mnav .list li a:hover:after { width: 100%; }
#mnav .list ul.sub li:last-child a:after { display: none; }
@media screen and (max-width: 1500px) {
	#mnav .list ul.sub,
	#mnav .list ul.main { display: none; }
}

#gnav { 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: #f7f7f7; pointer-events: none; transition: right 1.2s cubic-bezier(0.25, 1, 0.5, 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; }
#gnav .navbox { z-index: 10; width: 100%; padding: 0 9%; box-sizing: border-box; }
#gnav.is-open{ pointer-events: auto; right: 0; }
#gnav ul.main { margin: calc(8vh) 0 calc(3vh + 10px); margin-left: 80px; }
#gnav ul.main>li { font-size: 2.0rem; }
#gnav ul.main>li:first-child { display: none; }
#gnav ul.sub>li { font-size: 1.6rem; margin-left: 80px; }
#gnav ul.sub>li:first-child { display: block; }
#gnav .contactbox { width: 100%; padding: calc(6vh + 10px) 0; }
#gnav .contactbox .txt1 { font-size: 1.8rem; text-align: center; margin-bottom: calc(2vh); }
#gnav .contactbox .txt1 br { display: none; }
#gnav .contactbox .btnbox {/* justify-content: space-between; */margin-bottom: calc(5vh);}
#gnav .contactbox .btnbox a {width: calc(50% - 5px);height: 74px;display: block;position: relative;box-sizing: border-box;display: flex;justify-content: center;align-items: center;background: #fff;padding-right: 15px;}
#gnav .contactbox .btnbox a:after { content: ""; position: absolute; top: 0; bottom: 0; right: 15px; margin: auto 0; width: 12px; height: 12px; border-top: 1px solid #191919; border-right: 1px solid #191919; transform: rotate(45deg); transition: 0.6s; }
#gnav .contactbox .btnbox a:hover::after { right: 10px; }
#gnav .contactbox .btnbox a:nth-child(1) { text-align: left; }
#gnav .contactbox .btnbox a:nth-child(1) .txt2 { font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.1em; }
#gnav .contactbox .btnbox a:nth-child(1) .txt2 span { font-size: 1.5rem; letter-spacing: 0.1em; }
#gnav .contactbox .btnbox a:nth-child(1) .txt3 { font-size: 1.8rem; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; display: flex; align-items: center; margin-left: 3px; font-weight: bold; }
#gnav .contactbox .btnbox a:nth-child(1) .txt3 span { font-size: 4.4rem; line-height: 1; }
#gnav .contactbox .btnbox a:nth-child(2) .txt4 { font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.1em; margin-top: 3px; }
#gnav .contactbox .btnbox a:nth-child(2) .txt4 span { font-size: 1.8rem; }
#gnav .contactbox .credit { text-align: center; }
#gnav .contactbox .credit .txt5 { font-size: 2.4rem; line-height: 1.6; }
#gnav .contactbox .credit .txt6 { font-size: 1.4rem; }
@media screen and (max-width: 767px){
	#gnav { right: -100vw; width: 100vw; }
	#gnav ul.main {margin-left: 0;}
	#gnav ul.main>li { font-size: 1.8rem;   }
	#gnav ul.main>li:first-child { display: block; }
	#gnav ul.sub>li { font-size: 1.6rem; margin-left: 0; }
	#gnav ul.sub>li:first-child { display: none; }
	#gnav .contactbox .txt1 { font-size: 1.6rem; }
}
@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; }
	#gnav .contactbox { padding: calc(4vh) 0 calc(8vh); }
	#gnav .contactbox .txt1 { display: none; }
	#gnav .contactbox .btnbox { display: block; margin-bottom: 0; }
	#gnav .contactbox .btnbox a {width: 100%;}
	#gnav .contactbox .btnbox a:first-child { margin-bottom: 10px; }
	#gnav .contactbox .credit { display: none; }
}
@keyframes bgfadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes bgfadeout {
  0% { visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}










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


Menubtn


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

#menubtn { position: fixed; top: 50%; margin-top: -20px; right: 30px; display: block; background: transparent; width: 50px; height: 20px; 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; border-radius: 25px; }
#menubtn a .line { width: 50px; height: 1px; background: #191919; position: absolute; left: 50%; margin-left: -25px; transition: 1.15s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; }
#menubtn a #line1 { top: 4px; }
#menubtn a #line2 { top: 10px; }
#menubtn a #line3 { top: 16px; }
#menubtn a:hover #line1 { top: 10px; }
#menubtn a:hover #line2 { top: 10px; }
#menubtn a:hover #line3 { top: 10px; }
#menubtn.active { height: 50px; margin-top: -35px; right: 555px; transition: 1.15s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; }
#menubtn.active a { background: #191919; }
#menubtn.active a .line { width: 50px; background: #fff; transition: 1.15s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; }
#menubtn.active a #line1 {
	top: 25px;
	-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: 25px;
	-webkit-transform:translateY(-0) translateX(0) rotate(45deg); 
	transform:translateY(-0) translateX(0) rotate(45deg);
}
@media screen and (max-width: 1500px){
	#menubtn { top: 80px; margin-top: 0; }
	#menubtn.active { top: 65px; margin-top: 0; }
}
@media screen and (max-width: 1100px){
	#menubtn { top: 50px; }
	#menubtn.active { top: 35px; }
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; top: 35px; right: 20px; transition: 0.6s; }
	#menubtn a .line { transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
	#menubtn a:hover #line1 { top: 4px; }
	#menubtn a:hover #line2 { top: 10px; }
	#menubtn a:hover #line3 { top: 16px; }
	#menubtn.active { right: 20px; top: 20px; transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
	#menubtn.active a { background: none; }
	#menubtn.active a .line { background: #191919; transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);}
	#menubtn.active a #line1,
	#menubtn.active a #line2,
	#menubtn.active a #line3 { top: 25px; }
}










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


Mainv.index


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

.popupbox { width: 200px; position: fixed; right: 25px; bottom: 25px; z-index: 10; }
.popupbox .inwrap { width: 100%; height: 100%; position: relative; }
.popupbox a { display: block; position: relative; }
.popupbox a .imgbox { height: 100px; width: 100%; overflow: hidden; }
.popupbox a .imgbox img { object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height: 100%; transition: 0.6s; }
.popupbox a:hover .imgbox img { transform: scale(1.05); }
.popupbox a .txtarea { width: 100%; padding: 15px 10px; box-sizing: border-box;}
.popupbox a .txt1 { font-size: 1.3rem; line-height: 1; padding: 5px 8px; background: #00af84; position: absolute; top: 0; left: 0; letter-spacing: 0.05em; color: #fff;}
.popupbox a .txtarea  { display: flex; justify-content: center; align-items: center; letter-spacing: 0.05em; background: #f7f7f7; }
.popupbox a .txtarea .txt2 { font-size: 1.2rem; line-height: 1.5; }
.popupbox a .txtarea .txt2 span { font-size: 1.5rem; letter-spacing: 0.1em; }
.popupbox a .txtarea .txt3 { font-size: 1.8rem; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; display: flex; align-items: center; margin-left: 3px; font-weight: bold; }
.popupbox a .txtarea .txt3 span { font-size: 4.4rem; line-height: 1; }
.popupbox a.close { position: absolute; top: -10px; right: -10px; width: 24px; height: 24px; font-size: 0; border-radius: 13px; background: #191919; }
.popupbox a.close .line { width: 24px; height: 1px; background: #fff; position: absolute; left: 50%; margin-left: -12px; transition: 0.6s; transform:translateY(12px) translateX(0) rotate(-45deg); }
.popupbox a.close .line:nth-child(2) { transform:translateY(12px) translateX(0) rotate(45deg); }
.popupbox a.close:hover { background: #00af84;  }
@media screen and (max-width: 1100px){
	.popupbox { display: none; }
}










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


Mainv.under


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

#mainv.under { position: relative; width: 100%; margin-top: 180px; 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%; color: #fff; margin-right: 6%; }
#mainv.min { margin: 320px 0 100px; text-align: center; }
#mainv.min .pagetitle .title { margin-bottom: 30px; color: #191919; }
#mainv.min .pagetitle .en { color: #191919; }
@media screen and (max-width: 1500px){
	#mainv.under { height: 600px; }
}
@media screen and (max-width: 1100px){
	    height: calc(300px + 20vw);
	#mainv.under { height: 600px; margin-top: 120px; }
}
@media screen and (max-width: 767px){
	#mainv.under { height: 400px; margin-top: 0; }
	#mainv.under .pagetitle { left: 6%; bottom: 12%; }
	#mainv.min { margin: 160px 6% 0; text-align: left; }
	#mainv.min .pagetitle .title { margin-bottom: 10px; text-align: center; }
	#mainv.min .pagetitle .en { text-align: center; }
}












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


Pankuzu


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

#pankuzu { line-height: 1.4; padding-top:18px; float: right; }
#pankuzu.min { text-align: center; float: none;}
#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 #191919; border-top: 1px solid #191919; 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: 240px; margin-bottom: 260px; }
#article.index { margin-top: 120px; }
#article.min { margin-top: 80px; }
@media screen and (max-width: 767px) { 
	#article { margin-top: 100px; margin-bottom: 140px; }
	#article.index { margin-top: 60px; }
	#article.min { margin-top: 80px; }
}










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


Cntside


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

#side {  }










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


Footer


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

#footer {  }

/* contactbox */
#footer .contactbox { margin-bottom: 260px; }
#footer .contactbox .insec { display: flex; align-items: center; height: 660px; }
#footer .contactbox .insec .imgbox { width: 50%; height: 100%; }
#footer .contactbox .insec .imgbox img { object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height: 100%; }
#footer .contactbox .insec .txtbox { background: #f7f7f7; width: 50%; height: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 4%; }
#footer .contactbox .insec .txtbox .inbox .e1 { font-size: 1.8rem; }
#footer .contactbox .insec .txtbox .inbox .telbox .tel { display: flex; align-items: center;}
#footer .contactbox .insec .txtbox .inbox .telbox .tel a { font-size: 3.6rem; line-height: 1.5; letter-spacing: 0.12em; }
#footer .contactbox .insec .txtbox .inbox .telbox .tel span.txt { font-size: 1.4rem; margin-left: 15px; vertical-align: 8px; }
#footer .contactbox .insec .txtbox .inbox .telbox .txt1 { font-size: 1.4rem;}
#footer .contactbox .insec .txtbox .inbox .btnbox { justify-content: flex-start; }
#footer .contactbox .insec .txtbox .inbox .btnbox .btn.base { min-width: 220px; }
#footer .contactbox .insec .txtbox .inbox .btnbox .btn.base>span { flex-direction: column; padding: 0 20px;}
#footer .contactbox .insec .txtbox .inbox .btnbox .btn.base span.txt1 { font-size: 1.4rem; display: block; }
#footer .contactbox .insec .txtbox .inbox .btnbox .btn.base span.txt2 { font-size: 2.2rem;}
@media screen and (max-width: 1280px) {
	#footer .contactbox .insec .txtbox .inbox .telbox .tel { margin-bottom: 20px; }
	#footer .contactbox .insec .txtbox .inbox .telbox .tel a { font-size: 3.2rem; }
	#footer .contactbox .insec .txtbox .inbox .telbox .tel span.txt { vertical-align: 4px; }
	#footer .contactbox .insec .txtbox .inbox .telbox .txt1 span span { display: none; }
	#footer .contactbox .insec .txtbox .inbox .telbox .txt1 span.inb { display: block; }
}
@media screen and (max-width: 1100px) {
	#footer .contactbox .insec .txtbox .inbox .e1 { font-size: 1.6rem; }
	#footer .contactbox .insec .txtbox .inbox .telbox .tel { display: block; margin-top: -10px; }
	#footer .contactbox .insec .txtbox .inbox .telbox .tel span { display: block; }
	#footer .contactbox .insec .txtbox .inbox .telbox .tel span.txt { margin-left: 0; }	
}
@media screen and (max-width: 767px) {
	#footer .contactbox { margin-bottom: 80px; }
	#footer .contactbox .insec { display: block; height:auto; }
	#footer .contactbox .insec .imgbox { width: 100%; height: calc(30vw + 300px); }
	#footer .contactbox .insec .txtbox { width: 100%; padding: 80px 6%; }
	#footer .contactbox .insec .txtbox .inbox .e1 { font-size: 1.4rem; }
	#footer .contactbox .insec .txtbox .inbox .telbox .tel a { font-size: 3rem; }
	#footer .contactbox .insec .txtbox .inbox .telbox .tel span.txt { font-size: 1.2rem; }
}

/* #pagetop */
#pagetop { position: fixed; right: 40px; bottom: 40px; }
#pagetop a.icon { position: relative; width: 40px; height: 30px; 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 #191919; border-right: 1px solid #191919; 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: #191919; }
#pagetop a.icon:hover::before { top: 15px;}
@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;}
}

/* footerinfo */
#footer .mainbox { margin: 0 6% 80px; display: flex; justify-content: space-between; position: relative; }
#footer .mainbox .footerinfo .logobox { display: flex; justify-content: flex-start; align-items: center; margin-bottom:90px; }
#footer .mainbox .footerinfo .logobox .logo { margin-right: 40px; }
#footer .mainbox .footerinfo .logobox .logo img { width: 190px;}
#footer .mainbox .footerinfo .logobox .box1 { text-align: left; line-height: 1.8; }
#footer .mainbox .footerinfo .logobox .box1 .txt1 { font-size: 1.6rem; margin-bottom: 10px; }
#footer .mainbox .footerinfo .logobox .box1 .txt2 { font-size: 2rem; }
#footer .mainbox .footerinfo .logobox .box1 .txt3 { font-size: 1.4rem; }
#footer .mainbox .footerinfo .infobox { font-size: 1.5rem; }
#footer .mainbox #fnav { }
#footer .mainbox #fnav .mainlist { display: flex; }
#footer .mainbox #fnav .mainlist ul { margin-left: 30px;}
#footer .mainbox #fnav .mainlist ul li a:hover { text-decoration: underline; }
#footer .mainbox #fnav .insta { font-size: 2.0rem; position: absolute; bottom: 0; right: 0; }
#footer .mainbox #fnav .insta .icon { width: 24px; margin-left: 0; vertical-align: -3px; display: inline-block; transition: 0.6s; }
#footer .mainbox #fnav .insta:hover { color: #00af84; }
@media screen and (max-width: 1280px) {
	#footer .mainbox { margin: 0 4% 80px; }
}
@media screen and (max-width: 1100px) {
	#footer .mainbox { margin: 0 6% 80px;display: block; text-align: center; }
	#footer .mainbox .footerinfo .logobox { justify-content: center; margin-bottom:50px; }
	#footer .mainbox #fnav .mainlist { justify-content: center; margin: 120px 0 30px; text-align: left; }
	#footer .mainbox #fnav .insta { position: static; }
}
@media screen and (max-width: 767px) {
	#footer .mainbox { margin: 0 6%; }
	#footer .mainbox .footerinfo { margin-bottom: 60px;}
	#footer .mainbox .footerinfo .logobox { display: block; }
	#footer .mainbox .footerinfo .logobox .logo { margin-bottom: 30px; margin-right: 0; display: block; }
	#footer .mainbox .footerinfo .logobox .box1 { text-align: center; }
	#footer .mainbox .footerinfo .logobox .box1 .copy { text-align: center; }
	#footer .mainbox .footerinfo .infobox { font-size: 1.4rem; }
	#footer .mainbox #fnav { background: #f7f7f7; margin: 0 -7%; padding: 60px 7%;}
	#footer .mainbox #fnav .mainlist { margin: 0 0 30px; }
	#footer .mainbox #fnav .insta { font-size: 1.6rem; position: static; }
	#footer .mainbox #fnav .insta .icon { width: 18px; }
}
@media screen and (max-width: 500px) {
	#footer .mainbox .footerinfo .logobox .logo img { width: 130px;}
	#footer .mainbox .footerinfo .infobox span { display: block!important; }
	#footer .mainbox .footerinfo .infobox br,
	#footer .mainbox .footerinfo .infobox span.shide { display: none!important; }
	#footer .mainbox #fnav { text-align: left; }
	#footer .mainbox #fnav .mainlist { margin-bottom: 30px; display: block; }
	#footer .mainbox #fnav .mainlist ul { margin-left: 0;}
}

/* outrobox */
#footer .outrobox { background: #00af84; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; }
#footer .outrobox .txtbox { text-align: center; padding: 0 8%; color: #fff; }
#footer .outrobox .txtbox .txt1 { font-size: 2.4rem; margin-bottom: 0px; }
#footer .outrobox .txtbox .cr { font-size: 1.4rem; }
@media screen and (max-width: 767px) {
	#footer .outrobox .txtbox .txt1 { font-size: 1.8rem; }
	#footer .outrobox .txtbox .cr { font-size: 1.2rem; }
}