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


/*
base #191919
green #1e2e53
*/





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


Body


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

body.fixed{
  width: 100%;
  position: fixed;
}








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


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; height: 130px; }
#header .logo { line-height: 0; position: fixed; left: 50px; top: 40px; width: 190px; transition: 0.6s; }
/* スクロール時fixed */
#header.fixed .mainbox { height: 100px; }
#header.fixed .logo { top: 30px; width: 160px; left: 40px; }
@media screen and (max-width: 1300px) {
	#header .logo img { width: 170px; }
}
@media screen and (max-width: 1100px) {
	#header .logo { top: 30px; }
}
@media screen and (max-width: 767px) {
	#header .logo { top: 20px; left: 20px; }
	#header .logo img { width: 120px; }
}










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


Nav


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

#mnav { position: fixed; right: 150px; top: 40px; transition: 0.6s; }
#mnav a { color: #1e2e53; }
#header.fixed #mnav { right: 120px; top: 25px; }
@media screen and (max-width: 1100px) {
	#mnav { top: 30px; }
}
@media screen and (max-width: 767px) {
	#mnav { right: 85px; top: 18px; }
}
@media screen and (max-width: 350px) {
	#mnav { display: none; }
}





#gnav { display: none; z-index: 1000; position: fixed; top: 0; right: -50%; display: block; width: 50%; background: #1e2e53; pointer-events: none; transition: right 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0s; -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; }
#gnav::-webkit-scrollbar { display:none; }
#gnav .wrap { width: 100%; height: 100%; display: block; 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 { padding-top: calc(8vh + 60px); padding-bottom: calc(4vh + 60px); line-height: 1.6; }
#gnav ul.main>li { margin-bottom: 5px;}
#gnav ul.main>li a { position: relative; }
#gnav ul.main>li a:after { content: ""; height: 1px; width: 100%; background: #fff; position: absolute; bottom: 5px; left: 0; transition: bottom 0.3s; opacity: 0; }
#gnav ul.main>li li>a:after { left: 15px; width: calc(100% - 15px); bottom: -2px; }
#gnav ul.main>li a:hover:after { bottom: 2px; opacity: 1; }
#gnav ul.main>li li>a:hover:after { bottom: -5px; }
#gnav ul.main>li .redhot { font-family: 'Red Hat Display', sans-serif; letter-spacing: 0.06em; font-size: 3.8rem; color: #fff; }
#gnav ul.main>li ul { text-align: left; margin-bottom: 20px; }
#gnav ul.main>li li { display: inline-block; margin-right: 1em; line-height: 2; }
#gnav ul.main>li li>a { font-size: 1.8rem; color: #fff; }
#gnav ul.main>li li>a:before { content: ""; height: 1px; background: #fff; width: 10px; font-size: 0; display: inline-block; vertical-align: 5px; margin-right: 5px;  }
#gnav .navinstalink{ padding-top: 30px; }
#gnav .navinstalink>a{ background: #fff; padding: 25px; border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; box-sizing: border-box; border: 1px solid #fff; }
#gnav .navinstalink>a:after{ content: none!important; }
#gnav .navinstalink>a:hover{ background: #ccc; }
@media screen and (max-width: 1300px){
	#gnav { right: -680px; width:680px; }
}
@media screen and (max-width: 767px){
	#gnav { right: -100vw; width: 100vw; }
	#gnav .navbox { padding: 0 10%; }
	#gnav ul.main { padding-top: calc(4vh + 30px); padding-bottom: calc(2vh + 30px); }
	#gnav ul.main>li .redhot { font-size: 2.8rem; margin-bottom: 5px;  }
	#gnav ul.main>li li { display: block; margin-right: 0; line-height: 1.5; margin-bottom: 6px; text-indent: -1em; padding-left: 1em; }
	#gnav ul.main>li li>a { font-size: 1.6rem; }
	#gnav .navinstalink>a{ padding: 17px; width: 60px; height: 60px; }
}
@media screen and (max-width: 500px){
	#gnav .contactbtn a.white { min-width: 0; width: 100%; }
}








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


Menubtn


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

#menubtn { position: fixed; top: 50px; right: 40px; display: block; background: transparent; width: 70px; height: 40px; 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: 100%; height: 1px; background: #1e2e53; position: absolute; left: 0; transition: 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.05s; }
#menubtn a #line1 { top: 10px; }
#menubtn a #line2 { top: 20px; }
#menubtn a:hover #line1 { top: 15px; }
#menubtn a:hover #line2 { top: 15px; }
#menubtn a .txt { font-size: 2.0rem; color: #fff; position: absolute; top: 5px; left: -80px; opacity: 0; transition: 0.6s; line-height: 1; pointer-events: none; }
#menubtn.active a .txt { opacity: 1; pointer-events: auto; }
#menubtn.active a .line { background: #fff; }
#menubtn.active a #line1 { top: 15px; }
#menubtn.active a #line2 { top: 15px; }
#header.fixed #menubtn { top: 35px; right: 30px; }
@media screen and (max-width: 1100px){
	#menubtn { top: 40px; }
}
@media screen and (max-width: 767px){
	#menubtn { top: 23px; right: 20px; width: 50px; height: 30px; }
	#menubtn a #line1 { top: 10px; }
	#menubtn a #line2 { top: 16px; }
	#menubtn a:hover #line1 { top: 10px; }
	#menubtn a:hover #line2 { top: 16px; }
	#menubtn a .txt { font-size: 2rem; left: -70px; top: 3px; }
	#menubtn.active a #line1,
	#menubtn.active a #line2 { top: 13px; }
}









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


Mainv.under


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

#mainv.under { position: relative; width: 100%; margin-top: 130px; 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: 6%; bottom: 20%; width: 88%; text-align: center; }
@media screen and (max-width: 1500px){
	#mainv.under { height: 600px; }
}
@media screen and (max-width: 1100px){
	#mainv.under { height: calc(300px + 20vw); }
}
@media screen and (max-width: 767px){
	#mainv.under { height: 300px; margin-top: 75px; }
}












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


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.4rem; letter-spacing: 0.1em; }
#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: 200px; margin-bottom: 260px; }
#article.index { margin: 0; }
#article.min { }
@media screen and (max-width: 767px) { 
	#article { margin-top: 100px; margin-bottom: 120px; }
	#article.index { margin-top: 60px; }
}










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


Cntside


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

#side {  }










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


Footer


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

#footer {  }

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


/* finfo */
#footer .contactbox { }
#index #footer .contactbox { display: none; }
#footer .contactbox .copy.s3 { text-align: center; position: relative; padding: 0 6%; }
#footer .contactbox .copy.s3:before { content: ""; background: #1e2e53; font-size: 0; width: 9px; height: 9px; border-radius: 50%; position: absolute; bottom: -15px; left: calc(50% - 4px); animation: floop1 5s ease-in-out infinite; }
#footer .contactbox .copy.s3:after { content: ""; background: #1e2e53; font-size: 0; width: 1px; height: 60px; position: absolute; bottom: -75px; left: 50%; }
#footer .contactbox .inbox { display: flex; flex-wrap: wrap; text-align: center; width: 100%; }
#footer .contactbox .inbox>* { display: flex; justify-content: center; flex-direction: column; text-align: center; height: 480px; width: 33.33%;}
#footer .contactbox .copy.s4 { margin-bottom: 10px; color: #1e2e53; }
#footer .contactbox .copy.s4 br { display: none; }
#footer .contactbox .link a { font-size: 2.8rem; color: #1e2e53; position: relative;}
#footer .contactbox .link a:after { content:""; font-size:0; width: 0; height:1px; background: #1e2e53; position: absolute; bottom: -6px; left: 50%; transition: 0.6s; }
#footer .contactbox .link a:hover:after { width: 100%; margin-left: -50%; }
#footer .contactbox .link .icon { margin-right: 10px; font-size: 0;}
#footer .contactbox .telbox { background: #f7f7f7; }
#footer .contactbox .telbox a { font-size: 3.2rem; letter-spacing: 0.06em;}
#footer .contactbox .telbox .icon { width: 30px; vertical-align: -5px;}
#footer .contactbox .mailbox { }
#footer .contactbox .mailbox .icon { width: 36px; vertical-align: -4px;  }
#footer .contactbox .onlinebox { background: #f7f7f7; }
#footer .contactbox .onlinebox .icon { width: 42px; vertical-align: -8px; }
@media screen and (max-width: 1500px) { 
	#footer .contactbox .copy.s4 br { display: block; }
}
@media screen and (max-width: 1100px) { 
	#footer .contactbox .inbox>* { height: 400px!important; }
	#footer .contactbox .telbox a { font-size: 2.6rem; }
}
@media screen and (max-width: 767px) { 
	#footer .contactbox .copy.s3 span { font-size: 1.8rem; }
	#footer .contactbox .copy.s3 span:before { width: 7px; height: 7px; bottom: -15px; left: calc(50% - 3px); animation: floop2 5s ease-in-out infinite;}
	#footer .contactbox .copy.s3 span:after { height: 40px;bottom: -55px; }
	#footer .contactbox .inbox>* { width: 100%!important; height: 200px!important;  }
	#footer .contactbox .link a { font-size: 2rem; }
	#footer .contactbox .copy.s4 { margin-bottom: 5px; }
	#footer .contactbox .copy.s4 br { display: none; }
	#footer .contactbox .telbox a { font-size: 2rem; }
	#footer .contactbox .telbox .icon { width: 22px; vertical-align: -5px; }
	#footer .contactbox .mailbox { width: 33.33%; height: 480px; }
	#footer .contactbox .mailbox .icon { width: 26px; vertical-align: -3px;  }
	#footer .contactbox .onlinebox { width: 33.33%; height: 480px; }
	#footer .contactbox .onlinebox .icon { width: 30px; vertical-align: -8px; }
}
@media screen and (max-width: 500px) { 
	#footer .contactbox .inbox>* { height: 180px!important;  }
}
@keyframes floop1 {
  0% { bottom: -20px; opacity: 0;}
  10% { bottom: -20px; opacity: 1;}
  60% { bottom: -80px; opacity: 1; }
  70% { bottom: -80px; opacity: 1; }
  80% { bottom: -80px; opacity: 0; }
  100% { bottom: -80px; opacity: 0; }
}
@keyframes floop2 {
  0% { bottom: -20px; opacity: 0;}
  10% { bottom: -20px; opacity: 1;}
  60% { bottom: -60px; opacity: 1; }
  70% { bottom: -60px; opacity: 1; }
  80% { bottom: -60px; opacity: 0; }
  100% { bottom: -60px; opacity: 0; }
}

#footer .finstabox{ border-top: 1px solid #1e2e53; text-align: center; padding: 120px 0; }
#footer .finstabox .finstatitle{ color: #1e2e53; }
#footer .finstabox .finstalink>a{ margin-left: -10px; display: inline-block; }
#footer .finstabox .finstalink>a .finstaicon,
#footer .finstabox .finstalink>a .finstalinktxt{ display: inline-block; vertical-align: middle; margin-left: 10px; }
#footer .finstabox .finstalink>a .finstaicon{ width: 40px; height: 40px; }
#footer .finstabox .finstalink>a .finstalinktxt{ position: relative;color: #1e2e53;font-size: 2rem; }
#footer .finstabox .finstalink>a .finstalinktxt::before{ content: ""; background: #1e2e53; position: absolute; bottom: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; display: inline-block; height: 1px; width: 0; transition: .4s; }
#footer .finstabox .finstalink>a:hover .finstalinktxt::before{ width: 100%; }
@media screen and (max-width: 767px) {
	#footer .finstabox{ padding: 90px 0; }
	#footer .finstabox .finstalink>a .finstaicon{ width: 30px; height: 30px; }
	#footer .finstabox .finstalink>a .finstalinktxt{ font-size: 1.6rem; }
}


/* finfo */
#footer .mainbox { padding: 160px 0 100px; background: #1e2e53; }
#footer .mainbox .finfo { color: #fff; }
#footer .mainbox .finfo .logobox { width: 300px; margin-bottom: 60px; }
#footer .mainbox .finfo .infobox { margin-top: 60px; display: flex; text-align: left; }
#footer .mainbox .finfo .infobox .redhot span { margin-left: 15px; }
#footer .mainbox .finfo .infobox li:first-child { margin-right: 40px; }
@media screen and (max-width: 1100px) {
	#footer .mainbox { padding: 120px 0 100px; }
	#footer .mainbox .finfo .infobox { display: block; }
	#footer .mainbox .finfo .infobox li:first-child { margin-right: 0; margin-bottom: 20px; }
}
@media screen and (max-width: 767px) {
	#footer .mainbox { padding: 80px 0; }
	#footer .mainbox .finfo .infobox { margin-top: 40px; }
	#footer .mainbox .finfo .logobox { width: 150px; margin-bottom: 30px; }
}

/* ftxtbox */
#footer .ftxtbox { padding: 60px 0; font-size: 1.5rem; line-height: 1.8; }
@media screen and (max-width: 767px) {
	#footer .ftxtbox { padding: 40px 0; font-size: 1.3rem; }
}

/* fnavbox */
#footer .fnavbox { background: #f7f7f7; padding-top: 120px; }
#footer .fnavbox .inbox { display: flex; justify-content: space-between; flex-direction: row-reverse; padding-bottom: 40px; }
#footer .fnavbox .bnrbox { width: 300px; height: 140px; background: #1e2e53; }
#footer .fnavbox .bnrbox a {display: block; height: 100%; display: flex; justify-content: center; align-items: center; transition: 0.6s; position: relative; }
#footer .fnavbox .bnrbox a:after { content: url(../img/common/arr1_white.svg); font-size: 0; width: 8px; transform: rotate(-90deg); position: absolute; right: 20px; top: calc(50% - 3px); }
#footer .fnavbox .bnrbox a:hover { background: #333; }
#footer .fnavbox .bnrbox img { width: 155px; }
#footer .fnavbox .crbox { background: #fff; }
#footer .fnavbox .crbox .cr { padding: 20px 0; display: flex; justify-content: flex-end; flex-direction: row-reverse; flex-wrap: wrap; }
#footer .fnavbox .crbox .cr li { display: inline-block; margin-right: 20px; font-size: 1.5rem; }
#footer .fnavbox .crbox .cr li a:hover{ opacity: 0.3; }
#footer .fnavbox #fnav .redhot { font-size: 2.4rem; color: #1e2e53; }
#footer .fnavbox #fnav>ul { display: flex; width: 100%; margin-bottom: 10px; }
#footer .fnavbox #fnav>ul>li { margin-left: 30px; }
#footer .fnavbox #fnav ul.hassub { display: block; width: auto; }
#footer .fnavbox #fnav ul.hassub>li { display: block; line-height: 1.8; text-indent: -1em; padding-left: 1em;}
#footer .fnavbox #fnav ul.hassub>li:before { content: ""; background: #333; height: 1px; width: 12px; display: inline-block; vertical-align: 5px; font-size: 0; margin-right: 5px; }
#footer .fnavbox #fnav a:hover { opacity: 0.3; }
@media screen and (max-width: 1500px) {
	#footer .fnavbox .inbox { display: block; }
	#footer .fnavbox .bnrbox { margin: 40px 0; }
	#footer .fnavbox #fnav>ul { flex-wrap: wrap; margin-bottom: 0; }
	#footer .fnavbox #fnav>ul>li { margin-bottom: 20px; margin-left: 0; margin-right: 30px; }
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 767px) {
	#footer .fnavbox { padding: 0; margin:  0; }
	#footer .fnavbox .inbox { padding: 0; padding: 30px 0;}
	#footer .fnavbox .bnrbox { height: 100px; margin: 0 auto; }
	#footer .fnavbox .bnrbox img { width: 120px; }
	#footer .fnavbox .bnrbox a:hover { background: #1e2e53; }
	#footer .fnavbox #fnav>ul { display: none; }
	#footer .fnavbox .crbox .cr { justify-content: center; }
	#footer .fnavbox .crbox .cr li { font-size: 1.3rem; }
	#footer .fnavbox .crbox .cr li a:hover{ opacity: 1; }
}
@media screen and (max-width: 500px) {
	#footer .fnavbox .bnrbox { width: 100%; }
}