@charset "UTF-8";
/* 
CSS base.css */
/*
base #191919
purple #235BC8
red #f90307
*/




/*///////////////////////////////////
Header
///////////////////////////////////*/
#header { width: 100%; z-index: 100; position: fixed; top: 0; left: 0; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 90px; position: relative; transition: 0.3s; margin: 30px 40px 0 40px; background: #fff; border-radius: 6px; box-sizing: border-box; }
#header .logo { line-height: 0; margin-left: 35px; transition: 0.3s; }
#header .logo img { width: 330px; transition: 0.3s; }
/* スクロール時fixed */
#header.fixed .mainbox { margin: 0;  height: 80px; border-radius: 0; }
#header.fixed .logo img{ width: 300px; }
@media screen and (max-width: 1300px) {
	#header .mainbox { margin: 0;  height: 80px; border-radius: 0; }
	#header .logo { margin-left: 25px; }
	#header .logo img,
	#header.fixed .logo img{ width: 280px; }
}
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 500px) {
	#header .mainbox { height: 60px; }
	#header .logo { top: 20px; left: 20px; }
	#header .logo { margin-left: 18px; }
	#header .logo img { width: 245px; }
}
@media screen and (max-width: 400px) {
	#header .logo { top: 15px; left: 15px; }
}
@media screen and (max-width: 350px) {
	#header .logo { left: 10px; }
	#header .logo img { width: 220px; }
}


/*///////////////////////////////////
Nav
///////////////////////////////////*/
#gnav { z-index: 101; display: flex; justify-content: center; align-items: center; }
#gnav .navbox { line-height: 1; margin-right: 30px; }
#gnav ul.main { display: flex; align-items: center; }
#gnav ul.main>li { margin-right: 17px; }
#gnav ul.main>li a { color: #191919; letter-spacing: 0.1em; padding-bottom: 5px; position: relative; transition: none;}
@media screen and (min-width: 1101px) {
	#gnav ul.main>li:not(:last-child) a:hover { color: #235BC8; }#gnav ul.main>li a::before { background: #235BC8; content: ''; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; transform-origin: right top; transform: scale(0, 1); transition: transform .3s; }
	#gnav ul.main>li:not(:last-child) a:hover::before { transform-origin: center top; transform: scale(1, 1); }
}
#gnav ul.main>li:first-child { display: none; }
/* #gnav ul.main>li:last-child { margin-right: 0; }
#gnav ul.main>li:last-child a { line-height: 1; color: #fff; background: #235BC8; border-radius: 20px; padding: 10px 15px; display: inline-block; transition: 0.4s; letter-spacing: 0.06em; box-sizing: border-box; border: 2px solid #235BC8;}
#gnav ul.main>li:last-child a:hover { color: #235BC8; background: #f4f2ee; } */
#gnav .contactbtn { display: none;}
#gnav .telbtn { display: none;}
@media screen and (max-width: 1300px) {
	#gnav .navbox { margin-right: 25px; }
	#gnav ul.main>li { margin-right: 1.2em; }
	#gnav ul.main>li a { font-size: 1.5rem; }
	#gnav ul.main>li { margin-right: 1em; }
}
@media screen and (max-width: 1100px) {
	#gnav{ position: fixed; top: 0; right: -550px; height: 100vh!important; display: flex; justify-content:center; align-items: center; width: 550px; transition: right 1s cubic-bezier(0.25, 1, 0.5, 1) 0s; background: #f4f2ee; border-left: 1px solid #235BC8; box-sizing: border-box; }
	#gnav .navbox{ position: relative; z-index: 10; display: flex; justify-content:center; align-items: flex-start; flex-direction: column; height: 100vh; margin-right: 0;}
	#gnav ul.main {display: block; }
	#gnav ul.main>li { margin-right: 0; margin-bottom: 1.3em; }
	#gnav ul.main>li:first-child { display: block; }
	/*#gnav ul.main>li:last-child { display: none; }*/
	#gnav ul.main>li a { color: #235BC8; font-size: 2.0rem;}
	#gnav ul.main>li a:hover { color: #235BC8; }
	#gnav .contactbtn { display: block; margin-top: 30px;}
	#gnav .contactbtn a { border: 1px solid #235BC8; min-width: 260px; width: 260px; padding: 0 20px; box-sizing: border-box; height: 70px; position: relative; font-size: 2rem; line-height: 1.5; color: #fff; background: #235BC8; height: 60px; border-radius: 30px; display: flex; align-items:center; justify-content:center; }
	#gnav .contactbtn a .icon { width: 25px; margin-right: 8px; }
	#gnav .contactbtn a .icon._h { display: none; }
	@media (any-hover: hover) { 
		#gnav .contactbtn a:hover { background: #fff; color: #235BC8; }
		#gnav .contactbtn a:hover .icon { display: none; }
		#gnav .contactbtn a:hover .icon._h { display: block; }
	}
	#gnav .telbtn { display: block; margin-top: 30px;}
	#gnav .telbtn a { font-size: 3rem; line-height: 1;  color: #235BC8; letter-spacing: 0; display: flex; }
	#gnav .telbtn a .icon { width: 26px; margin-right: 5px; }
	#gnav .telbtn .txt { font-size: 1.5rem;color: #235BC8; }
	#gnav.is-open{ pointer-events: auto; right: 0; }
}
@media screen and (max-width: 767px){
	#gnav { right: calc(-100vw - 1px); width: calc(100vw + 1px); }
	#gnav ul.main>li { margin-right: 0; margin-bottom: 1.1em; }
	#gnav ul.main>li a { font-size: 1.8rem;}
	#gnav .contactbtn { margin-top: 25px;}
	#gnav .contactbtn a { font-size: 1.8rem; min-width: 222px; width: 222px;}
	#gnav .contactbtn a .icon { width: 20px; margin-right: 6px; }
	#gnav .telbtn { margin-top: 25px;}
	#gnav .telbtn a { font-size: 2.6rem; }
	#gnav .telbtn a .icon { width: 23px; }
	#gnav .telbtn .txt { font-size: 1.3rem; }
}

#menubtn {display: none; z-index: 100001; }
@media screen and (max-width: 1100px){
	#menubtn {position: fixed;top: 18px;right: 20px;display: block;background: transparent;width: 94px;height: 44px;cursor: pointer;}
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; }
	#menubtn a .line {width: 60px;height: 3px;position: absolute;right: 0;transition: .6s;left: 0;margin-left: auto;margin-right: auto;}
	#menubtn a .line:before { content: ""; background: #235BC8; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 3px; width: 100%; margin: auto; border-radius:2px; }
	#menubtn a #line1 {top: 10px;}
	#menubtn a #line2 {top: calc(50% - 1px);}
	#menubtn a #line3 { bottom: 10px; }
	#menubtn.active a .line{width: 80px;}
	#menubtn.active a .line:before { background: #235BC8!important; }
	#menubtn.active a #line1 {
		-webkit-transform:translateY(11px) rotate(-22deg);
		transform: translateY(11px) rotate(-22deg);
	}
	#menubtn.active a #line2 { opacity: 0; }
	#menubtn.active a #line3 {
		-webkit-transform:translateY(-11px) rotate(22deg);
		transform: translateY(-11px) rotate(22deg);
	}
	#header.fixed #menubtn a .line:before{ background: #235BC8; }
}
@media screen and (max-width: 767px){
	#menubtn a .line { margin-right: 0; }
}
@media screen and (max-width: 500px){
	#menubtn { top: 10px; right: 15px; width: 80px; height: 40px; }
	#menubtn a .line { width: 56px; }
	#menubtn.active a .line{width: 68px;}
	#menubtn.active a #line1 {
		-webkit-transform:translateY(9px) rotate(-22deg);
		transform: translateY(9px) rotate(-22deg);
	}
	#menubtn.active a #line2 { opacity: 0; }
	#menubtn.active a #line3 {
		-webkit-transform:translateY(-9px) rotate(22deg);
		transform: translateY(-9px) rotate(22deg);
	}
}



/*///////////////////////////////////
Mainv.under
///////////////////////////////////*/

#mainv.under { position: relative; width: 100%; padding: calc(80px + 8vw) 0 calc(30px + 3vw); border-bottom: 1px solid #bbb;}
#mainv.under .pagetitle { padding: 0 6%;}
#mainv.under .pagetitle .main { font-size: 5rem; line-height: 1.3; letter-spacing: 0.05em; font-weight: 600; }
#mainv.under .pagetitle .en { font-size: 1.8rem; line-height: 1.3; color: #235BC8; margin-bottom: 12px; }
#mainv.under .pagetitle .en::before { content: "●"; padding-right: 0.8em; font-size: 0.8em; }
@media screen and (max-width: 1100px){
	#mainv.under .pagetitle .main { font-size: 4.0rem;  }
}
@media screen and (max-width: 767px){
	#mainv.under .pagetitle .en { font-size: 1.4rem; }
	#mainv.under .pagetitle .main { font-size: 2.6rem;  }
}


/*///////////////////////////////////
Pankuzu
///////////////////////////////////*/

#pankuzu { line-height: 1.4; padding-top:13px; text-align: right;}
#pankuzu ol { margin: 0 6%; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 1.5rem; letter-spacing: 0.08em; }
#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 8px 0 5px; 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
///////////////////////////////////*/

#main { margin-top: 60px; }
#main.index { margin-top: 0; }
@media screen and (max-width: 767px) { 
	#main { margin-top: 60px; }
	#main.index { margin-top: 0; }
}



/*///////////////////////////////////
Cntside
///////////////////////////////////*/

#side {  }



/*///////////////////////////////////
Footer
///////////////////////////////////*/

#footer {  }

/* footerinfo */
#footer .fcontact { padding: 80px 0; display: flex; justify-content: center; align-items: center; }
#footer .fcontact .titlebox { flex-shrink: 0; margin-right: 80px; border-right: 1px solid #235BC8; display: flex; flex-direction: column; justify-content: center; padding: 40px 80px 40px 0; }
#footer .fcontact .titlebox .en { color: #235BC8; line-height: 1.2; font-size: 6rem; letter-spacing: 0.01em;  }
#footer .fcontact .titlebox .jn { font-size: 1.8rem; text-align: center; font-weight: bold; }
#footer .fcontact ul.linklist { display: flex; justify-content: center; align-items: center; }
#footer .fcontact ul.linklist>li{ display: inline-block;  }
#footer .fcontact ul.linklist>li:first-child { margin-right: 60px;}
#footer .fcontact ul.linklist>li>a{ position: relative; display: flex; justify-content: center; flex-direction: column; padding-left: 80px; }
#footer .fcontact ul.linklist>li>a::before{ content: ""; border: 1px solid #235BC8; width: 60px; height: 60px; display: inline-block; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; left: 0; border-radius: 30px; transition: 0.4s; }
#footer .fcontact ul.linklist>li>a:not(.tel):hover { color: #235BC8; }
#footer .fcontact ul.linklist>li>a:not(.tel):hover::before{ border: 1px solid #235BC8; background: #ebe9f1; }
#footer .fcontact ul.linklist>li.telbox a { line-height: 1.4;}
#footer .fcontact ul.linklist>li.telbox a .main { font-size: 3.2rem; letter-spacing: 0;}
#footer .fcontact ul.linklist>li.telbox a::after{ content: ""; background: url(../img/common/icon_tel.svg) no-repeat; background-size: contain; width: 24px; height: 24px; display: inline-block; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; left: 18px; }
#footer .fcontact ul.linklist>li.mailbox a { font-size: 2.2rem; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; }
#footer .fcontact ul.linklist>li.mailbox a::after{ content: ""; background: url(../img/common/icon_mail.svg) no-repeat; background-size: contain; width: 25px; height: 19px; display: inline-block; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; left: 19px; }
#footer .fcontact .linklist ul li._form a:not(.tel):hover{ transition:0; color: #235BC8; opacity: 1; }
#footer .fcontact .linklist ul li._form a:not(.tel):hover .contacticon_st1.st1{stroke:#fff;}
#footer .fcontact .linklist ul li._form a:not(.tel):hover .contacticon_st2.st2{stroke:#235BC8;fill:#235BC8}
#footer .fcontact .linklist ul li._form a>.inwrap{ display: inline-block; position: relative; }
#footer .fcontact .linklist ul li._form a>.inwrap:after{ content:""; display: inline-block; background: #235BC8; position: absolute; top: 0; bottom: 0; left: 0; width: 0; transition: .4s; margin-top: auto; margin-bottom: auto; height: 1px; z-index: 1; }
#footer .fcontact .linklist ul li._form a:hover>.inwrap:after{ width: 100%; }
@media screen and (max-width: 1380px){
	#footer .fcontact ul.linklist { flex-direction: column; align-items: flex-start;} 
	#footer .fcontact ul.linklist>li:first-child { margin-right: 0; margin-bottom: 30px;}
}
@media screen and (max-width: 1100px){
	#footer .fcontact { display: block; }
	#footer .fcontact .titlebox { margin-right: 0; display: block; text-align: center; border-right: none; margin-bottom: 40px; line-height: 1; padding: 0;}
	#footer .fcontact .titlebox .en {font-size: 5rem; margin-right: 0; padding-bottom: 8px; }
	#footer .fcontact ul.linklist { align-items: center; }
}
@media screen and (max-width: 767px){
	#footer .fcontact { padding-top: 60px; padding-bottom: 60px; }
	#footer .fcontact .titlebox {  padding: 0; }
	#footer .fcontact .titlebox .en { font-size: 3.4rem;}
	#footer .fcontact .titlebox .jn { font-size: 1.6rem; }
	#footer .fcontact ul.linklist>li>a{ padding-left: 52px; }
	#footer .fcontact ul.linklist>li>a::before{ width: 40px; height: 40px; border-radius: 20px; }
	#footer .fcontact ul.linklist>li.telbox a::after{ width: 20px; height: 20px; left: 11px; }
	#footer .fcontact ul.linklist>li.telbox a .main { font-size: 2.2rem; }
	#footer .fcontact ul.linklist>li.mailbox a { font-size: 1.8rem; }
	#footer .fcontact ul.linklist>li.mailbox a::after{ width: 21px; height: 16px; left: 11px; }
	#footer .fcontact ul.linklist>li:first-child { margin-bottom: 20px;}
}

#footer { position: relative; }
#footer .fmainbox { background: #e2ecff; }
#footer .fmainbox .incnt { position: static; }
#footer .fmainbox .insec{ display: flex; justify-content: space-between; padding: 80px 0 60px;}
#footer .fmainbox .insec .siteinfo .sitetitle { width: 320px; margin-bottom: 10px;}
#footer .fmainbox .insec .siteinfo .access { line-height: 1.9;}
#footer .fmainbox .insec nav.fnav {margin-left: -50px;text-align: right;}
#footer .fmainbox .insec nav.fnav ul.mainlist,
#footer .fmainbox .insec nav.fnav p.snslink{display: inline-block;vertical-align: top;}
#footer .fmainbox .insec nav.fnav ul.mainlist>li { display: inline-block; margin-left: 40px; vertical-align: top; }
#footer .fmainbox .insec nav.fnav ul.mainlist>li>ul.clm { text-align: left; }
#footer .fmainbox .insec nav.fnav ul.mainlist>li>ul.clm li a{ display: inline-block; position: relative; }
#footer .fmainbox .insec nav.fnav ul.mainlist>li>ul.clm li a:hover{ text-decoration: underline; color: #235BC8; }
#footer .fmainbox .insec nav.fnav p.snslink {margin-left: 50px;padding-top: 5px;}
#footer .fmainbox .insec nav.fnav p.snslink>a{ width: 26px;height: 26px; transition: .4s; display: inline-block; }
#footer .fmainbox .insec p.fscobnr { width: 156px; position: absolute; bottom: 20px; right: 20px; }
#footer .fmainbox p.cr { text-align: center; letter-spacing: 0.05em; padding: 20px 0; }
@media screen and (max-width: 1100px){
	#footer .fmainbox { text-align: center; padding-top: 60px; }
	#footer .fmainbox .insec{ display: block; padding: 0; }
	#footer .fmainbox .insec .siteinfo .sitetitle { margin: 0 auto 10px;}
	#footer .fmainbox .insec p.fscobnr{ position: static; margin-left: auto; margin-right: auto; margin-top: 30px; width: 110px; }
	#footer .fmainbox .insec nav.fnav{ display: none; }
	#footer .fmainbox p.cr{ margin-top: 20px; }
}
@media screen and (max-width: 767px){
	#footer .fmainbox .insec p.fscobnr{ margin-top: 20px;}
	#footer .fmainbox p.cr { font-size: 1.3rem;}
}