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



/*
main #004680
sub #79511b
*/



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


Header


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

#header { width: 100%;  z-index: 100; }
#header.fixed { position: fixed; top: 0; background: #fff; background: rgba(255,255,255,0.97); animation: navfit 0.5s ease-out 0s 1 normal both; }
#header .mainbox { display: flex; align-items: center; justify-content: space-between; height: 130px; }
#header .logo { line-height: 0; }
#header .logo img { width: 270px; }
#header.fixed .mainbox { height: 80px; }
#header.fixed .logo img { width: 210px; }
@media screen and (max-width: 1280px) {
	#header .logo { margin-top: 0; }
	#header .cap { display: none; }
}
@media screen and (max-width: 1040px) {
	#header .logo { top: 0px; left: 40px; margin-top: 0; }
	#header, #header .mainbox { height: 100px; }
}
@media screen and (max-width: 767px) {
	#header, #header .mainbox { height: 80px; }
	#header .logo { left: 20px; }
	#header .logo img { width: 220px; }
}

/* スライド画像のエフェクト */
@keyframes navfit {
  0% { transform: translate(0px, -50px); }
  100% { transform: translate(0px, 0px);  }
}






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


Nav


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

#gnav { }
#gnav:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#gnav .bg { opacity: 0; }
#gnav .navlogo { display: none; }
#gnav ul.main { text-align: right; }
#gnav ul.main>li { display: inline-block; float: left; font-family: yu-mincho-pr6n,"游明朝体",YuMincho,"Yu Mincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif; position: relative; }
#gnav ul.main>li:first-child { display: none; }
#gnav ul.main>li a { text-decoration: none; position: relative; vertical-align: middle; }
#gnav ul.main>li:after { content: "/"; padding: 0 10px; vertical-align: middle;}
#gnav ul.main>li a:hover { color: #004680; opacity: 1;}
#gnav ul.main>li[data-cat="faq"]:after,
#gnav ul.main>li[data-cat="contact"]:after { display: none; }
#gnav ul.main>li[data-cat="contact"] { display: inline; transition: 0.3s; width: 30px; height: 30px; margin-left: 10px; }
#gnav ul.main>li[data-cat="contact"] a svg { transition: 0.3s; }
#gnav ul.main>li[data-cat="contact"] a:hover svg { fill:#004680; }
#gnav ul.main>li.current>a:before { content: ""; display: block; position: absolute; top: 50%; margin-top: 59px; width: 100%; left: 0; background: #004680; height: 5px; }
#index #gnav ul.main>li[data-cat="contact"] { display: none; }
	
/* sub */
#gnav ul.main>li>ul.sub { display: none; position: absolute; top: 45px; left: 50%; margin-left: -120px; min-width: 200px; box-sizing: border-box; padding: 40px; background: #f7f7f7; z-index: 2; text-align: center; }
#gnav ul.main>li>ul.sub>li:after { display: none; }
#gnav ul.main>li.current>li a:before { display: none; }

/* contactbox */
#gnav .contactbox { position: absolute; top: 110px; right: 0px; background: #f7f7f7; text-align: center; z-index: 1; transition: 0.3s; display: none;  }
#index #gnav .contactbox { display: block; }
#gnav .contactbox .txt1 { font-size: 15px; margin-top: 20px; }
#gnav .contactbox .txt2 { background: #004680; font-size: 15px; text-align: center; color: #fff; width: 100%; padding: 3px 0;}
#gnav .contactbox .linkbox { display: flex; justify-content: center; align-items: center;  padding: 0 20px 10px; }
#gnav .contactbox .linkbox .telbox a { text-decoration: none; margin-right: 10px; line-height: 1; }
#gnav .contactbox .linkbox .telbox a>span { vertical-align: middle; font-size: 24px; color: #004680; font-weight: bold; }
#gnav .contactbox .linkbox .telbox>span { display: block; font-size: 13px; }
#gnav .contactbox .linkbox .telbox svg { width: 17px; height: 28px; fill:#004680; vertical-align: -6px; }
#gnav .contactbox .linkbox a.mail svg { width: 36px; height: 36px; fill:#004680; transition: 0.3s; }
#gnav .contactbox .linkbox a.mail:hover svg { fill:#79511b; }

/* スクロールfixed */
.fixed #gnav ul.main li[data-cat="contact"] { display: inline; }
.fixed #gnav ul.main li[data-cat="contact"]:after { display: none; }
.fixed #gnav .contactbox { opacity: 0; pointer-events: none; }
.fixed #gnav ul.main>li.current a:before { margin-top: 34px; }
@media screen and (max-width: 1280px) {
	#gnav ul.main { right: -40px; }
	#gnav ul.main>li:after { padding: 0 7px; }
}
@media screen and (max-width: 1180px) {
	#gnav ul.main>li { margin-left: 8px; font-size: 15px; }
	#gnav ul.main>li:after { display: none; }
	#gnav ul.main>li.current>a:before { margin-top: 60px; }
	.fixed #gnav ul.main>li.current a:before { margin-top: 35px; }
}
@media screen and (max-width: 1040px){
	#gnav { z-index: 1000; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; }
	#gnav .navbox { position: absolute; top: 50%; left: 0; text-align: center; width: 88%; padding: 0px 6%; /* Safari用 */ transform: translate(0, -50%); }
	#gnav ul.main { position: static; display: block; text-align: center; }
	#gnav ul.main>li { display: block!important; margin: 2px 10px; float: none; opacity: 0; }
	#gnav ul.main>li[data-cat="contact"] { display: none!important; }
	#gnav ul.main>li a { color: #333; }
	#gnav ul.main>li.current a:before { display: none; margin-top: 0; }
	#gnav ul.main li.current>a { text-decoration: underline; }
	
	/* sub */
	#gnav ul.main>li>ul.sub { display: none; position: static; margin-left: 0px; min-width: 0; padding: 10px 20px; margin: 5px 0; text-align: center; }
	#gnav ul.main>li>ul.sub li:after { display: none; }
	#gnav ul.main>li>ul.sub li { display: inline!important; opacity: 1; margin: 2px 5px;}
	#gnav ul.main>li.hassub>a:after,
	#gnav ul.main>li.hassub>a:before { content: ""; display: block!important; position: absolute; top : 50%; left: auto; right: -25px; width: 10px; height: 1px; line-height: 0; transition : 0.3s; background: #142d58; }
	#gnav ul.main>li.hassub>a:after { -webkit-transform:translateY(0px) translateX(0) rotate(-45deg); transform:translateY(0px) translateX(0) rotate(-45deg); }
	#gnav ul.main>li.hassub>a:before { -webkit-transform:translateY(0px) translateX(-6px) rotate(45deg); transform:translateY(-0px) translateX(-6px) rotate(45deg); }
	#gnav ul.main>li.hassub.sub-open>a:after { -webkit-transform:translateY(0px) translateX(0) rotate(45deg); transform:translateY(0px) translateX(0) rotate(45deg); }
	#gnav ul.main>li.hassub.sub-open>a:before { -webkit-transform:translateY(0px) translateX(-6px) rotate(-45deg); transform:translateY(-0px) translateX(-6px) rotate(-45deg); }
	
	#gnav.is-open { pointer-events: auto; opacity: 1; }
	#gnav .bg {
		background: #fff; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; z-index: -1; opacity: 0;
		-webkit-transform:scale(0.9,0.9); transform:scale(0.9,0.9);
		-webkit-transition: all 0.6s cubic-bezier(0,.53,.41,1); transition: all 0.6s cubic-bezier(0,.53,.41,1);
 	}
	#gnav.is-open .bg { opacity: 1; -webkit-transform:scale(1,1); transform:scale(1,1); }
	
	/* telbox */	
	#gnav .contactbox { display: block; position: static; background:none; opacity: 0; }
	#gnav .contactbox .txt1 { margin-top: 30px; }
	#gnav .contactbox .txt2 { width: auto; display:inline-block; padding: 5px 20px;}
	
	#gnav.is-open ul.main>li,
	#gnav.is-open .contactbox { 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; }
	#gnav.is-open .contactbox { -webkit-transition-delay: 1.08s; transition-delay: 1.08s; }
}










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


Menubtn


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

#menubtn {display: none; z-index: 1001; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 20px; right: 10px; 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: 26px; height: 2px; background: #142d58; position: absolute; left: 50%; margin-left: -13px;
		-webkit-transition: all 0.3s; transition: all 0.3s;
	}
	#menubtn a #line1 { top: 26px; }
	#menubtn a #line3 { top: 34px; }
	#menubtn a:hover #line1 { top: 24px; }
	#menubtn a:hover #line3 { top: 36px; }
	#menubtn.active a .txt { display: none; }
	#menubtn.active a span { width: 29px; }
	#menubtn.active a #line1 {
		top: 23px;
		-webkit-transform:translateY(10px) translateX(0) rotate(-30deg);
		transform:translateY(10px) translateX(0) rotate(-30deg);
	}
	#menubtn.active a #line3 { 
		top: 43px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(30deg); 
		transform:translateY(-10px) translateX(0) rotate(30deg);
	}
}
@media screen and (max-width: 767px){
	#menubtn { position: fixed; top: 10px; right: 5px; }
}









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


Mainv_index


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

#mainv_index { position: relative; height: 800px; }
#mainv_index .bg { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ }
#mainv_index .copybox { position: absolute; top: 200px; left: 14%; text-align: left; color: #004680; }
#mainv_index .copybox .shoulder { font-size: 20px; margin-bottom: 10px; }
#mainv_index .copybox .maincopy { font-size: 44px; line-height: 1.5; font-weight: bold; margin-bottom: 10px; }
#mainv_index .copybox .subtxt { font-size: 20px; }

#mainv_index ul.appeal { position: absolute; bottom: 50px; left: 8%; text-align: center; }
#mainv_index ul.appeal li { margin-bottom: 10px; display: block; }
#mainv_index ul.appeal li a { background: #79511b; padding: 10px 0; width: 370px; font-size: 18px; color: #fff; margin-bottom: 10px; display: block; text-decoration: none; position: relative; }
#mainv_index ul.appeal li:last-child a { background: #004680; }
#mainv_index ul.appeal li a:after { content: url(../img/common/arr1.svg); position: absolute; top: 50%; margin-top: -3px; right: 20px; width: 6px; line-height: 0; }
#mainv_index ul.appeal li a:hover { background: #f7f7f7; color: #79511b; }
#mainv_index ul.appeal li:last-child a:hover { color: #004680; }
#mainv_index ul.appeal li a:hover:after { content: url(../img/common/arr1_cha.svg); }
#mainv_index ul.appeal li:last-child a:hover:after { content: url(../img/common/arr1_blue.svg); }
@media screen and (max-width: 1280px){
	#mainv_index .copybox,
	#mainv_index ul.appeal { left: 6%; }
}
@media screen and (max-width: 1040px){
}
@media screen and (max-width: 767px){
	#mainv_index { height: 380px; margin-bottom: 200px; }
	#mainv_index .copybox { top: 50%; margin-top: -40px; }
	#mainv_index .copybox .shoulder { font-size: 16px; }
	#mainv_index .copybox .maincopy { font-size: 28px; }
	#mainv_index .copybox .subtxt { font-size: 16px; }
	#mainv_index ul.appeal { position: absolute; bottom: -160px; width: 88%; text-align: center; }
	#mainv_index ul.appeal li { width: 100%; }
	#mainv_index ul.appeal li a { width: 100%; font-size: 15px; }
}
@media screen and (max-width: 639px){
	#mainv_index .copybox { margin-top: 0px; }
	#mainv_index .copybox .shoulder { font-size: 15px; margin-bottom: 5px; }
	#mainv_index .copybox .maincopy { font-size: 22px; margin-bottom: 5px; }
	#mainv_index .copybox .subtxt { font-size: 15px; }
}







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


Mainv


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

#mainv { height: 380px; position: relative; display: flex; justify-content: flex-start; align-items: center; background: url(../img/common/mv_bg.jpg); background-position: center center; background-size: cover; }
@media screen and (max-width: 1040px){
}
@media screen and (max-width: 767px){
	#mainv { height: 200px; }
}












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


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: 16px; }
#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: 100px; margin-bottom: 150px; }
@media screen and (max-width: 767px) { 
	#main { margin-top: 40px; margin-bottom: 60px; }
}










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


Cntside


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

#side {  }













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


Footer


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

#footer {  }

/* contactbox */
#footer .contactbox { padding: 60px 0; text-align: center; background: #004680; }
#footer .contactbox .copy { font-size: 28px; margin-bottom: 10px; text-align: center; color: #fff; line-height: 1.6; }
#footer .contactbox .txt1 { text-align: center; color: #fff; }
#footer .contactbox ul.box { display: flex; justify-content: center; }
#footer .contactbox ul.box li { background: #fff; height: 120px; width: 500px; border: 1px solid #fff; }
#footer .contactbox ul.box li a { display: flex; justify-content: center; align-items: center; height: 100%; text-decoration: none; }
#footer .contactbox ul.box li.telbox { margin-right: 20px; }
#footer .contactbox ul.box li.telbox .txt { margin-top: 10px; line-height: 1; }
#footer .contactbox ul.box li.telbox .tel svg { width: 20px; height: 33px; fill: #004680; vertical-align: middle; margin-top: -4px; }
#footer .contactbox ul.box li.telbox .tel span { font-size: 30px; font-weight: bold; vertical-align: middle; line-height: 1; }
#footer .contactbox ul.box li.mailbox svg { width: 30px; margin-right: 5px; fill: #004680; }
#footer .contactbox ul.box li.mailbox span { font-size: 20px; }
#footer .contactbox ul.box li a:hover { background:#004680; color: #fff; }
#footer .contactbox ul.box li.telbox a:hover .tel svg { fill: #fff; }
#footer .contactbox ul.box li.mailbox a:hover svg { fill: #fff; }
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) {
	#footer .contactbox .copy { font-size: 20px; }
	#footer .contactbox ul.box { display: block; }
	#footer .contactbox ul.box li { display: block; width: 100%; height: 90px; }
	#footer .contactbox ul.box li:first-child { margin-bottom: 10px; }
	#footer .contactbox ul.box li.telbox .tel span { font-size: 24px; }
	#footer .contactbox ul.box li.mailbox span { font-size: 16px; }
}

/* #pagetop */
#pagetop { width: 100%; z-index: 10000; }
#pagetop a { text-decoration: none; display: block; padding: 10px 0; text-align: center; background: #f7f7f7; }
#pagetop a:hover { opacity: 1; background: #e6e6e6;  }
#pagetop svg { stroke:#333; width: 16px; height: 12px; fill-opacity: 0; }
@media screen and (max-width: 767px) { 
}

/* footerinfo */
#footer .footerinfo { position: relative; text-align: center; }
#footer .footerinfo:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; overflow:hidden; line-height:0; font-size: 0; }
#footer .footerinfo .map { width: 50%; float: left; height: 750px; }
#footer .footerinfo .infobox { width: 50%; height: 750px; float: right; display: flex; justify-content: center; align-items: center; }
#footer .footerinfo .inbox { text-align: left; max-width: 70%; }
#footer .footerinfo .logo { width: 260px; display: inline-block; margin-bottom: 40px; }
#footer .footerinfo p.telbox { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; font-size: 25px; color: #142d58; }
#footer .footerinfo p.telbox a { text-decoration: none; color: #142d58; display: flex; justify-content: center; align-items: center; }
#footer .footerinfo p.telbox a:last-child .txt1 { position: relative; }
#footer .footerinfo p.telbox a:last-child .txt1:after { content:""; background-color: #142d58; position: absolute; bottom: 0; left: 0; height: 1px; transition: 0.3s; width: 0; }
#footer .footerinfo p.telbox a:last-child:hover .txt1:after{ width: 100%; }
#footer .footerinfo .txt1 { font-size: 18px; }
#footer .footerinfo svg { width: 26px; height: 20px; fill: #142d58; padding-right: 5px; }
#footer .footerinfo .slash { padding: 0 10px; }
#footer .crbox { padding: 15px 0; background-color: #004680; color: #fff;}
#footer .crbox .incnt { display: flex; justify-content: space-between; align-items: center;  }
#footer .crbox .fnav { text-align: left; font-size: 0; }
#footer .crbox .fnav li { display: inline; font-size: 16px; }
#footer .crbox .fnav li:after { content: "/"; margin: 0 5px; }
#footer .crbox .fnav li a { color: #fff; text-decoration: none; font-family: yu-mincho-pr6n,"游明朝体",YuMincho,"Yu Mincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif; }
#footer .crbox .cr { font-size: 14px; }
@media screen and (max-width: 1280px) {
	#footer .crbox .fnav { display: none; }
	#footer .crbox .incnt { justify-content: flex-end; }
}
@media screen and (max-width: 1040px) {
	#footer .footerinfo .map { width: 100%; height: 500px; }
	#footer .footerinfo .infobox { width: 88%; padding: 60px 6%; height: auto; display: block; }
	#footer .footerinfo .inbox { max-width: none; }
	#footer .crbox { padding: 0; background: none; color: #333; text-align: left; margin-bottom: 30px;}
	#footer .crbox .incnt { display: block; }
}
@media screen and (max-width: 767px) {
	#footer .footerinfo .logo { width: 240px; margin-bottom: 20px; }
}