@charset "UTF-8";
/* 
CSS base.css */
/*
base #302b2b
blue #0358B8
red #f90307
*/


/*///////////////////////////////////
Header
///////////////////////////////////*/
#header { width: 100%; z-index: 200; position: fixed; top: 0; left: 0; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 110px; position: relative; transition: 0.3s; }
#header .logo { line-height: 0; margin-left: 40px; transition: 0.3s; margin-top: 20px; }
#header .logo img { width: 283px; transition: 0.3s; }
/* スクロール時fixed */
#header.fixed .mainbox { margin: 0; height: 80px; background:rgba(255,255,255,0.9); pointer-events: auto; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);}
/* backdrop-filter 非対応ブラウザ用 */
@supports not ((-webkit-backdrop-filter: blur(30px)) or (backdrop-filter: blur(30px))) {
	#header.fixed .mainbox { background: #fff; }
}
#header.fixed .logo{ margin-top: 0px;}
#header.fixed .logo img{ width: 210px; }
@media screen and (max-width: 1300px) {
	#header .logo { margin-left: 25px; margin-top: 15px; }
	#header .logo img{ width: 230px; }
	#header.fixed .logo img{ width: 210px; }
}
@media screen and (max-width: 1100px) {
	#header .mainbox { height: 90px;  }
	#header .logo { margin-top: 5px; }
	#header.spfixed .mainbox { background: #fff; }
}
@media screen and (max-width: 767px) {
	#header .logo img{ width: 210px; }
}
@media screen and (max-width: 500px) {
	#header .mainbox { height: 80px; }
	#header .logo { margin-left: 15px; margin-top: 3px; }
	#header .logo img { width: 180px; }
}
@media screen and (max-width: 400px) {
	#header .logo { left: 15px; }
}
@media screen and (max-width: 350px) {
	#header .logo { left: 10px; }
}


/*///////////////////////////////////
Nav
///////////////////////////////////*/
#gnav { z-index: 101; display: flex; justify-content: center; align-items: center; height: 110px; transition: 0.3s; }
#gnav .navbox { line-height: 1; display: flex; align-items: center; padding-right: 110px;}
#gnav ul.main { display: flex; align-items: center; }
#gnav ul.main>li { margin-right: 1em; }
#gnav ul.main>li a { color: #fff; position: relative; transition: 0.5s; }
#gnav ul.main>li:last-child { margin-right: 0; }
#header.fixed #gnav { height: 80px; }
#header.fixed #gnav ul.main>li a { color: #0358B8; }
@media screen and (min-width: 1101px) {
	#gnav ul.main>li a:hover { color: #bbb; }
}
@media screen and (max-width: 1300px) {
	#gnav ul.main { padding: 0 1.2em; }
	#gnav ul.main>li { margin-right: 0.8em;  }
	#gnav ul.main>li a,
	#gnav .contactbtn a { font-size: 1.6rem; }
}
@media screen and (max-width: 1200px) {
	#gnav{ width: 74px; height: 90px;}
	#gnav .wrap{ display: none!important; }
}
@media screen and (max-width: 500px) {
	#gnav{ width: 50px; height: 70px;}
}


#widenav { position: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: 1s cubic-bezier(0.23, 1, 0.32, 1); width: 600px; height:100vh; height:100svh; padding: 100px 6%; background: #0358B8; box-sizing: border-box; top: 0; right: -600px; z-index: 102; pointer-events: none; ;}
#widenav.is-open { pointer-events: auto; right: 0;}
/* backdrop-filter 非対応ブラウザ用 */
@supports not ((-webkit-backdrop-filter: blur(30px)) or (backdrop-filter: blur(30px))) {
	#widenav { background: #302b2b; }
}
#widenav .navbox { display: flex; flex-direction: column;; padding: calc(20px + 3vh) 0; box-sizing: border-box; }
#widenav ul.main { line-height: 1; }
#widenav ul.main>li { margin-right: 0; font-size: 2.2rem; letter-spacing: 0.15em; margin-bottom: calc(5px + 1.5vh);}
#widenav ul.main>li a { color: #fff; position: relative; transition: 0.5s;}
#widenav ul.main>li a:hover { opacity: 0.3;}
#widenav ul.main>li:last-child { margin-right: 0; }
#widenav ul.contactbox { display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 30px; margin-top: 20px; border-top: 1px solid #fff; }
#widenav ul.contactbox>li{ display: inline-block; width: 100%; }
#widenav ul.contactbox>li>a{ color: #fff; padding-left: 54px; justify-content: flex-start; height: 44px;}
#widenav ul.contactbox>li>a span { font-size: 3.6rem; }
#widenav ul.contactbox>li>a::before{ border: 1px solid #fff; width: 44px; height: 44px; border-radius: 23px; transition: 0.4s; background: rgba(255,255,255,0.2); }
#widenav ul.contactbox>li.txt { font-size: 1.8rem; line-height: 1.6; margin-top: 15px; color: #fff;}
#widenav ul.contactbox>li.telbox { margin-right: 0; margin-bottom: 10px;}
#widenav ul.contactbox>li.telbox a::after{ background: url(../img/common/icon_tel_w.svg) no-repeat; left: 14px; }
#widenav ul.contactbox>li.mailbox a::after{background: url(../img/common/icon_mail_w.svg) no-repeat; left: 13px; }
@media screen and (max-width: 1300px){
	#widenav ul.contactbox>li>a span { font-size: 3rem; }
	#widenav ul.contactbox>li.telbox a::after{ left: 16px; }
	#widenav ul.contactbox>li.mailbox a::after{ left: 14px; }	
}
@media screen and (max-width: 900px){
	#widenav ul.main>li { font-size: 2rem; padding: 12px 0; margin-bottom: 0; }
	#widenav ul.contactbox>li>a { padding-left: 44px; height: 34px;}
	#widenav ul.contactbox>li>a::before{ width: 34px; height: 34px; }
	#widenav ul.contactbox>li>a span { font-size: 2.8rem; }
	#widenav ul.contactbox>li.telbox a::after{ left: 12px; }
	#widenav ul.contactbox>li.mailbox a::after{ left: 11px; }
}
@media screen and (max-width: 767px){
	#widenav { width: 100%; right: -100%; }
	#widenav ul.main>li { padding: 9px 0; }
}
@media screen and (max-width: 500px){
	#widenav ul.main>li { padding: 7px 0; font-size: 1.7rem; margin-bottom: 0; }
	#widenav ul.contactbox { padding-top: calc(8px + 3vh); margin-top: 3vh; }
	#widenav ul.contactbox>li>a span { font-size: 2.4rem; }
	#widenav ul.contactbox>li.txt { font-size: 1.6rem; margin-top: 10px; }
	#widenav ul.contactbox>li.telbox a .main { font-size: 2.6rem; }
}








/*///////////////////////////////////
Menubtn
///////////////////////////////////*/
#menubtn {position: fixed; top:24px; right: 10px; display: block; background: transparent; width: 90px; height: 60px; cursor: pointer; transition: 0.4s; z-index: 103; }
#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; }
#menubtn a .line {width: 60px;height: 1px;position: absolute;right: 0;transition: .4s;left: 0;margin-left: auto;margin-right: auto;}
#menubtn a .line:before { content: ""; background: #fff; display: inline-block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 1px; width: 100%; margin: auto; }
#menubtn a #line1 {top: 23px;}
#menubtn a #line3 { top: 37px; }
#menubtn a:hover #line1 {top: 26px;}
#menubtn a:hover #line3 { top: 34px; }
#menubtn.active { right: 15px;}
#menubtn.active a .line{ width: 74px;}
#menubtn.active a .line:before { background: #fff!important; }
#menubtn.active a #line1 {
	-webkit-transform:translateY(7px) rotate(-25deg);
	transform: translateY(7px) rotate(-25deg);
}
#menubtn.active a #line3 {
	-webkit-transform:translateY(-7px) rotate(25deg);
	transform: translateY(-7px) rotate(25deg);
}
#menubtn.active a:hover #line1 {
	-webkit-transform:translateY(4px) rotate(-18deg);
	transform: translateY(4px) rotate(-18deg);
}
#menubtn.active a:hover #line3 {
	-webkit-transform:translateY(-4px) rotate(18deg);
	transform: translateY(-4px) rotate(18deg);
}
#header.fixed #menubtn { top: 10px;}
#header.fixed #menubtn a .line { height: 2px; }
#header.fixed #menubtn a .line:before { height: 2px; background: #0358B8; }
@media screen and (max-width: 1100px) {
	#menubtn { top:15px; right: 0; }
	#header.spfixed #menubtn a .line:before { background: #0358B8; }
}
@media screen and (max-width: 500px){
	#menubtn { top:10px; right: 0; }
	#menubtn a .line {width: 50px; height: 2px; }
	#menubtn a .line:before { height: 2px; background: #0358B8; }
	#menubtn a #line1 {top: 25px;}
	#menubtn a #line3 { top: 35px; }
	#menubtn.active { right: 5px;}
	#menubtn.active a .line{ width: 60px;}
}




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

#mainv.under { position: relative; width: 100%; padding: calc(200px + 8vw) 0 calc(30px + 2vw); border-bottom: 1px solid #bbb; }
#mainv.under .cover { background: #000; opacity: 0.3; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#mainv.under img.bg { position: absolute; top: 0; left: 0; object-fit: cover; font-family: 'object-fit: cover;'; display: block; width: 100%; height:100%; z-index: -1; }
#mainv.under .pagetitle { margin-left: calc(40px + 6vw); text-align: left; position: relative; }
#mainv.under .pagetitle .main span { color: #fff; font-size: 2.8rem; color: rgba(255,255,255,0.0); display: inline; position: relative;}
#mainv.under .pagetitle .main span::before{ content: ""; position: absolute; z-index: 1; top: 0%; right: 100%; bottom: 0%; left: 0%; background : #0358B8; }
#mainv.under .pagetitle.-in .main span{ animation-name: textanime1_white; animation-delay: 0.3s; animation-duration: 1.5s; animation-fill-mode: forwards; }
#mainv.under .pagetitle.-in .main span::before{ animation-name: textanime2; animation-delay: 0.3s; animation-duration: 1.5s; animation-fill-mode: forwards; }
#mainv.under .pagetitle .en { margin-bottom: 20px; }
#mainv.under .pagetitle .en span { font-size: 8rem; color: #fff; color: rgba(255,255,255,0.0); position: relative; color: transparent; display: inline; }
#mainv.under .pagetitle .en span::before{ content: ""; position: absolute; z-index: 1; top: 0%; right: 100%; bottom: 0%; left: 0%; background : #0358B8; }
#mainv.under .pagetitle.-in .en span{ animation-name: textanime1_white; animation-duration: 1.5s; animation-fill-mode: forwards; }
#mainv.under .pagetitle.-in .en span::before{ animation-name: textanime2; animation-duration: 1.5s; animation-fill-mode: forwards; }
@media screen and (max-width: 1100px){
	#mainv.under .pagetitle { margin-left: 8%; }
	#mainv.under .pagetitle .main span { font-size: 2.4rem; }
	#mainv.under .pagetitle .en span { font-size: 6rem; }
}
@media screen and (max-width: 767px){
	#mainv.under .pagetitle .main span { font-size: 1.8rem; }
	#mainv.under .pagetitle .en span { font-size: 5rem; }
}
@media screen and (max-width: 500px){
	#mainv.under { padding: calc(160px + 8vw) 0 calc(10px + 2vw); }
	#mainv.under .pagetitle .main span { font-size: 1.6rem; }
	#mainv.under .pagetitle .en span { font-size: 4.6rem; }
}


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

#pankuzu { line-height: 1.4; padding:10px 0; text-align: right;}
#pankuzu ol { margin: 0 40px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 1.4rem; letter-spacing: 0.08em; color: #aaa; }
#pankuzu ol li:before {content:"";/*border-right: 1px solid #302b2b; border-top: 1px solid #302b2b; width: 4px; height: 4px;*/border-right: 1px solid #302b2b;width: 1px;height: 16px;display: inline-block;margin: 0 8px 0 5px;transform: rotate(25deg);vertical-align: -2px;font-size: 0;}
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a { color: #302b2b; }
#pankuzu ol li a:hover { text-decoration: underline; }
@media screen and (max-width: 767px) { 
	#pankuzu{ display: none; }
	#pankuzu ol { margin: 0 6%; }
}


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

#footer { margin-top: 200px;  }
#index #footer { margin-top: 160px;  }
@media screen and (max-width: 1100px){
	#footer { margin-top: 180px;  }
	#footer .incnt.wider { width: 100%;}
}
@media screen and (max-width: 767px){
	#footer, #index #footer { margin-top: 100px;  }
	#footer .incnt.fix { width: 100%;}
}
/* footerinfo */
#footer .fcontactbox{ background: #F5F3F1; color: #0358B8; padding: 110px 0; position: relative; z-index: 2;}
#footer .fcontactbox .inwrap { display: flex; justify-content: center; align-items: center; }
#footer .fcontactbox .toptitle{flex-shrink: 0;margin-right: 70px; margin-bottom: 0; }
#footer .fcontactbox .insec { }
#footer .fcontactbox .insec .txt1 { font-size: 2.2rem; margin-bottom: 10px;}
#footer .fcontactbox .insec .txt2 { }
#footer .fcontactbox .contactbox { margin-top: 20px; }
@media screen and (max-width: 1300px){
	#footer .fcontactbox .toptitle{ margin-right: 40px; }
}
@media screen and (max-width: 1100px){
	#footer .fcontactbox .inwrap{ display: block; text-align: center; }
	#footer .fcontactbox .toptitle { text-align: center; margin-right: 0;}
	#footer .fcontactbox .insec { padding: 0 6%;}
	#footer .fcontactbox .insec .txt1 { margin-top: 20px; }
}
@media screen and (max-width: 767px){
	#footer .fcontactbox{ padding: 70px 0;}
	#footer .fcontactbox .insec .txt1 { font-size: 1.7rem; }
}
@media screen and (max-width: 500px){
	#footer .fcontactbox .insec .txt2 { text-align: justify; }
	#footer .fcontactbox .insec .txt2 br { display: none; }
}
/* fnav */
#fnav{ background: #0358B8; margin-top: -300px; padding-top: 300px; }
#fnav ul.main{ display: flex; justify-content: center; align-items: center; text-align: center; padding: 70px 0; flex-wrap: wrap; }
#fnav ul.main>li { font-size: 1.8rem; line-height: 1.8; margin: 0 0.5em; }
#fnav ul.main>li a { color: #fff; }
#fnav ul.main>li a:hover { opacity: 0.5; }
@media screen and (max-width: 1200px){
	#fnav ul.main>li { font-size: 1.6rem; }
}
@media screen and (max-width: 767px) { 
	#fnav { display: none;}
	#fnav ul.main { padding: 40px 0; flex-wrap: wrap; }
	#fnav ul.main>li { font-size: 1.6rem; margin-bottom: 10px; margin: 0; margin-right: 1em;}
}
@media screen and (max-width:400px) { 
	#fnav ul.main { flex-direction: column; padding: 30px 0; align-items: flex-start; }
	#fnav ul.main>li { font-size: 1.4rem; }
}
/* fmainbox */
#footer .fmainbox { padding: 60px 0; font-size: 1.5rem; }
#footer .fmainbox .inwrap{ display: flex; justify-content: space-between; }
#footer .fmainbox .logobox { display: flex; align-items: center; justify-content: center;}
#footer .fmainbox .logobox .logo { width: 320px; padding-right: 30px;}
#footer .fmainbox .logobox .txt1 { line-height: 1.6;}
#footer .fmainbox .logobox .txt1 br.last { display: none; }
#footer .fmainbox .crbox { display: flex; align-items: center; justify-content: center; }
#footer .fmainbox .crbox .link { margin-left: 15px; }
@media screen and (max-width: 1500px){
	#footer .fmainbox .logobox .logo { width: 260px; padding-right: 25px;}
}
@media screen and (max-width: 1100px){
	#footer .fmainbox { padding: 40px 0; }
	#footer .fmainbox .inwrap{ flex-direction: column; }
	#footer .fmainbox .logobox { margin-bottom: 20px; }
}
@media screen and (max-width: 767px){
	#footer .fmainbox { font-size: 1.4rem; padding: 50px 0 0;}
	#footer .fmainbox .crbox { background: #0358B8; color: #fff; padding: 8px 0; }
	#footer .fmainbox .crbox .link a { color: #fff; }
	#footer .fmainbox .logobox .logo { width: 210px; padding-right: 0;}
	#footer .fmainbox .logobox { flex-direction: column; margin-bottom: 40px;}
	#footer .fmainbox .logobox .txt1 { text-align: center; line-height: 1.8; margin-top: 20px;}
	#footer .fmainbox .logobox .txt1 br.last { display: block; }
	#footer .fmainbox .logobox .txt1 span { display: none; }
}
@media screen and (max-width: 500px){
	#footer .fmainbox .crbox { padding: 5px 0; font-size: 1.3rem;}
	#footer .fmainbox .logobox .logo { width: 180px; }
}