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



/*
base #191919
blue #005fa3
*/



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


Header


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

#header { width: 100%; z-index: 100; position: fixed; left: 0; top: 0; background: #fff;  }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 160px; transition:0.5s;}
#header .logo { line-height: 0; margin-left: 80px; }
#header .logo img { width: 328px; transition:0.5s; }
/* スクロール時fixed */
#header.fixed { }
#header.fixed .mainbox { height: 100px; }
#header.fixed .logo img { width: 260px; }
@media screen and (max-width: 1500px) {
	#header .logo { margin-left: 6%; }
}
@media screen and (max-width: 1280px) {
    #header .mainbox { height: 140px; }
    #header .logo img { width: 280px; }
}
@media screen and (max-width: 1040px) {
    #header .mainbox { height: 100px; }
    #header .logo img { width: 240px; }
}
@media screen and (max-width: 767px) {
	#header .mainbox { height: 90px; }
    #header .logo { margin-left: 20px; }
	#header .logo img { width: 200px; }
}
@media screen and (max-width: 500px) {
}

/* スクロール時fixedのアニメーション */
@keyframes navfit {
  0% { transform: translate(0px, -50px); }
  100% { transform: translate(0px, 0px);  }
}







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


Nav


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

#gnav { margin-right: 4%; margin-bottom: 5px; }
#gnav .navbox { display: flex; align-items: flex-end; flex-direction: column-reverse; }

#gnav .pbox { text-align: right; transition: 0.5s; }
#gnav .pbox .txt1 br { display: none; }
#gnav .pbox ul.pnav { display: flex; justify-content: flex-end; align-items: center; margin: 8px 0 18px; }
#gnav .pbox ul.pnav li { margin-left: 25px; }
#gnav .pbox ul.pnav li a { position: relative; display: flex; font-size: 2.8rem; line-height:1; font-family: 'Fjalla One', sans-serif; letter-spacing: 0.02em; text-decoration: none; color: #005fa3;}
#gnav .pbox ul.pnav li a img { margin-right: 8px; font-size: 0; }
#gnav .pbox ul.pnav li a img.white { display: none; }
#gnav .pbox ul.pnav li:nth-child(1) a img { width: 28px; }
#gnav .pbox ul.pnav li:nth-child(2) a img { width: 22px; }
#gnav .pbox ul.pnav li:nth-child(3) a img { width: 18px; }
#gnav .pbox ul.pnav li a:after { position: absolute; content: ""; background: #005fa3; height: 2px; width: 0; bottom: -6px; left: 0; transition: 0.3s; }
#gnav .pbox ul.pnav li a:hover:after { width: 100%; }

#gnav ul.main { display: flex; justify-content: flex-end; align-items: center; }
#gnav ul.main>li { position: relative; margin-left: 20px; }
#gnav ul.main>li:first-child { display: none; }
#gnav ul.main>li a { text-decoration: none; }
#gnav ul.main>li a:after { position: absolute; content: ""; background: #005fa3; height: 2px; width: 0; bottom: -6px; left: 0; transition: 0.3s; }
#gnav ul.main>li a:hover:after { width: 100%; }
#gnav ul.main>li a:hover { color: #005fa3; opacity: 1; }

#header.fixed #gnav { margin-bottom: 0; }
#header.fixed #gnav .pbox { margin-top:-120px; margin-bottom:38px; }
@keyframes pnavfade {
  0% {  }
  100% { margin-top:-120px; margin-bottom:60px; }
}
@media screen and (max-width: 1040px){
	#gnav{ z-index: 1002; margin: 0; position: fixed; top: 0; right: -500px; display: flex; justify-content: space-between; align-items: center; height: 100vh; width: 500px!important; pointer-events: none; background: #005fa3; transition:0.6s cubic-bezier(0,.38,.29,1) 0s; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
	#gnav::-webkit-scrollbar { display: none; }

	#gnav .navbox { z-index: 10; width: 80%; padding: 0 10%; flex-direction: column; align-items: center; justify-content: center; }
	#gnav.is-open{ pointer-events: auto; right: 0; }
		
	#gnav ul.main { display: block; text-align: center; margin-bottom: 40px; padding-top: 100px;}
	#gnav ul.main>li { display: block!important; margin: 0 0 10px; }
	#gnav ul.main>li a { font-size: 2.0rem; color: #fff; font-weight: bold;}
	#gnav ul.main>li a:hover { color: #fff; }
    #gnav ul.main>li a:after { display: none; }
	
    #gnav .pbox { text-align: center; color: #fff; padding-bottom: 100px; }
    #gnav .pbox .txt1 br { display: block; }
    #gnav .pbox ul.pnav { justify-content: center; align-items: normal; flex-wrap: wrap; margin: 20px auto 0; max-width: 400px; }
    #gnav .pbox ul.pnav li { margin-left: 0; }
    #gnav .pbox ul.pnav li:nth-child(2) { margin-left: 25px; }
    #gnav .pbox ul.pnav li:nth-child(3) { margin: 20px auto; }
    #gnav .pbox ul.pnav li a { color: #fff;}
    #gnav .pbox ul.pnav li a img { display: none; }
    #gnav .pbox ul.pnav li a img.white { display: block; }

	#gnav.is-open ul.main>li { opacity:1; transition: 3s; }
	#gnav.is-open ul.main>li:nth-child(1) { -webkit-transition-delay: .24s; transition-delay: .24s; }
	#gnav.is-open ul.main>li:nth-child(2) { -webkit-transition-delay: .32s; transition-delay: .32s; }
	#gnav.is-open ul.main>li:nth-child(3) { -webkit-transition-delay: .40s; transition-delay: .40s; }
	#gnav.is-open ul.main>li:nth-child(4) { -webkit-transition-delay: .48s; transition-delay: .48s; }
	#gnav.is-open ul.main>li:nth-child(5) { -webkit-transition-delay: .56s; transition-delay: .56s; }
	#gnav.is-open ul.main>li:nth-child(6) { -webkit-transition-delay: .64s; transition-delay: .64s; }
	#gnav.is-open ul.main>li:nth-child(7) { -webkit-transition-delay: .72s; transition-delay: .72s; }
	#gnav.is-open ul.main>li:nth-child(8) { -webkit-transition-delay: .80s; transition-delay: .80s; }
}
@media screen and (max-width: 767px){
	#gnav{ right: -100vw; width: 100vw!important; }
}
@media screen and (max-width: 500px){
	#gnav ul.main>li a { font-size: 1.6rem; }
    #gnav .pbox ul.pnav li:nth-child(2) { margin-left: 20px; }
    #gnav .pbox ul.pnav li a { font-size: 2.5rem; }
}
@keyframes bgfadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes bgfadeout {
  0% { visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}


#onlinebtn { position: fixed; top: 200px; right: 0; width: 160px; z-index: 999; text-decoration: none; }
#onlinebtn .icon { background: #2990d0; color: #fff; font-size: 2.4rem; line-height:1; font-family: 'Fjalla One', sans-serif; letter-spacing: 0.02em; text-decoration: none; padding: 15px 0 10px; text-align: center; }
#onlinebtn .icon img { margin-right: 0; font-size: 0; width: 26px; }
#onlinebtn .txtbox { background: #005fa3; line-height: 1.6; color: #fff; font-size: 1.5rem; padding: 15px 0; text-align: center; }
#onlinebtn:hover { width: 180px; }
@media screen and (max-width: 1040px){
	#onlinebtn { display: none; }
}






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


Menubtn


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

#menubtn {display: none; z-index: 1004; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 18px; right: 20px; display: block; background: transparent; width: 60px; height: 60px; transition : 0.3s; cursor: pointer; }
	#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; color: #fff; }
	#menubtn a .line {
		width: 40px; height: 3px; background: #005fa3; position: absolute; left: 50%; margin-left: -20px;
		-webkit-transition: all 0.3s; transition: all 0.3s; border-radius: 2px;
	}
	#menubtn a #line1 { top: 22px; }
	#menubtn a #line2 { top: 30px; }
	#menubtn a #line3 { top: 38px; }
	#menubtn a:hover #line1 { width: 0; }
	#menubtn a:hover #line3 { width: 0; margin-left: 20px }
	#menubtn.active a .txt { display: none; }
	#menubtn.active a .line { width: 44px; background: #fff; }
	#menubtn.active a #line1 {
		top: 23px;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg);
		transform:translateY(10px) translateX(0) rotate(-30deg);
	}
	#menubtn.active a #line2 { display: none; }
	#menubtn.active a #line3 { 
		top: 43px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg); 
		transform:translateY(-10px) translateX(0) rotate(30deg);
	}
	#menubtn.active a:hover #line1 { width: 44px; }
	#menubtn.active a:hover #line3 { width: 44px; margin-left: -20px }
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; top: 15px; right: 5px; }	
	#menubtn a:hover #line1 { width: 40px; }
	#menubtn a:hover #line3 { width: 40px; margin-left: -20px }
}









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


Mainv.index


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

#mainv.index { position: relative; height: 800px; margin-top: 160px; }
#mainv.index .bg { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ }
#mainv.index .copybox { position: absolute; bottom: 10%; left: 8%; text-align: left; color: #004680; color: #fff;width: 520px; }
#mainv.index .copybox .mvcopy { font-size: 4.6rem; margin-left: 10px; vertical-align: top;}
#mainv.index .copybox .subcopy { font-size: 1.8rem; vertical-align: top; line-height: 2.5; }
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1040px){
	#mainv.index { margin-top: 100px; }
	#mainv.index .copybox { width: 490px }
	#mainv.index .copybox .mvcopy { font-size: 4.0rem; margin-left: 5px; }
	#mainv.index .copybox .subcopy { font-size: 1.8rem; }
}
@media screen and (max-width: 767px){
	#mainv.index { height: 480px; margin-top: 90px; }
	#mainv.index .copybox { width: 200px }
	#mainv.index .copybox .mvcopy { font-size: 3.0rem; margin-left: 0; }
	#mainv.index .copybox .subcopy { display: none; }
}
@media screen and (max-width: 500px){
	#mainv.index { height: 400px;}
	#mainv.index .copybox { width: 200px }
	#mainv.index .copybox .mvcopy { font-size: 2.6rem; }
}






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


Mainv.under


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

#mainv.under { height: 260px; margin-top: 160px; position: relative; background: #eaf4fa; }
#mainv.under .pagetitle { width: 100%; position: absolute; left: 0; bottom: -70px; }
@media screen and (max-width: 1040px){
	#mainv.under { margin-top: 100px; }
}
@media screen and (max-width: 767px){
	#mainv.under { height: 130px; margin-top: 90px; }
	#mainv.under .pagetitle { bottom: -45px; }
}
@media screen and (max-width: 500px){
	#mainv.under { height: 100px;}
}












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


Pankuzu


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

#pankuzu { line-height: 1.4; padding:15px 0; background: #f7f7f7; }
#pankuzu ol { margin: 0 60px; font-size: 0; }
#pankuzu ol li { display:inline; font-size: 1.6rem; }
#pankuzu ol li:before { content:"/"; display: inline-block; margin: 0 5px }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; }
@media screen and (max-width: 767px) { 
	#pankuzu{ display: none; }
	#pankuzu ol { margin: 0 6%; }
}






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


Content


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

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










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


Cntside


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

#side {  }













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


Footer


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

#footer { background: #f7f7f7;  }
#footer .incnt { display: flex; justify-content: space-between; align-items: center; padding: 40px 0;  }
#footer .infobox { display: flex; align-items: center; }
#footer .infobox .logobox { border-right: 1px solid #ccc; margin-right: 30px; padding-right: 30px; }
#footer .infobox .logobox .logo { width: 284px; margin-bottom: 20px; }
#footer .infobox .telbox .txt { text-align: left; font-weight: bold; margin-bottom: 10px; }
#footer .infobox .telbox .teltxt { display: flex; align-items: center; }
#footer .infobox .telbox .teltxt a {text-decoration: none; font-size: 3.4rem; line-height:1; font-family: 'Fjalla One', sans-serif; letter-spacing: 0.02em; color: #005fa3; }
#footer .infobox .telbox .teltxt span { margin: 0 5px; font-family: 'Fjalla One', sans-serif; color: #005fa3;}
#footer .infobox .telbox img { width: 18px; font-size: 0;}
#footer .onlinebox .txt { text-align: center; margin-bottom: 15px; }
#footer .onlinebox ul.iconlist { display: flex; align-items: center;}
#footer .onlinebox ul.iconlist li:nth-child(1) { margin-right: 20px; }
#footer .onlinebox ul.iconlist li a { display: flex; font-size: 2.8rem; line-height:1; font-family: 'Fjalla One', sans-serif; letter-spacing: 0.02em; text-decoration: none; color: #fff; background: #005fa3; padding: 18px 20px 15px; min-width: 260px; box-sizing: border-box; justify-content: center; }
#footer .onlinebox ul.iconlist li a:hover { background:#191919; }
#footer .onlinebox ul.iconlist li a img { margin-right: 8px; font-size: 0; }
#footer .onlinebox ul.iconlist li:nth-child(2) a { background: #2990d0; }
#footer .onlinebox ul.iconlist li:nth-child(2) a:hover { background:#191919; }
#footer .onlinebox ul.iconlist li:nth-child(1) a img { width: 22px; }
#footer .onlinebox ul.iconlist li:nth-child(2) a img { width: 28px; }
@media screen and (max-width: 1500px) {
	#footer .incnt { display: flex; flex-direction: column; align-items: center; padding: 60px 0;  }
	#footer .infobox { margin-bottom: 40px; }
	#footer .onlinebox .txt { display: none; }
}
@media screen and (max-width: 1040px) {
	#footer .infobox .telbox .teltxt a { font-size: 3rem; } 
}
@media screen and (max-width: 767px) {
	#footer .infobox { flex-direction: column; margin-bottom: 30px; }
	#footer .infobox .telbox .txt { display: none; }
	#footer .infobox .telbox .teltxt a { font-size: 2.8rem; } 
	#footer .infobox .telbox img { width: 15px;}
	#footer .infobox .logobox { border-right: none; margin-right: 0; padding-right: 0; text-align: center; margin-bottom: 20px; }
	#footer .infobox .logobox .logo { width: 200px; margin-bottom: 15px; }
	#footer .onlinebox ul.iconlist li a { font-size: 2.0rem; min-width: 200px; }
	#footer .onlinebox ul.iconlist li:nth-child(1) { margin-right: 10px; }
	#footer .onlinebox ul.iconlist li:nth-child(1) a img { width: 16px; }
	#footer .onlinebox ul.iconlist li:nth-child(2) a img { width: 22px; }
}
@media screen and (max-width: 500px) {
	#footer .onlinebox ul.iconlist li a { min-width: 140px; }
}

#footer .cr { background: #005fa3; padding: 15px 0; font-size: 1.4rem; color: #fff; text-align: center; }
@media screen and (max-width: 767px) {
	#footer .cr { font-size: 1.3rem;}
}