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


/* 
ベース：base { color: #191919; } 
黒：black { color: #000; }
白：white { color: #fff; }
ライトグレー：light { color: #f0f0f0; }
グレー：grey { color: #aaa; }
赤：red { color: #ff0000; }
黄色：yellow { color: #ffff00; }
キーカラーA：colorA { color: #d60a0f; }

border：#ccc
bg：#f7f7f7
*/





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


Header


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

#header { position: relative; width: 100%; transition: 0.6s; z-index: 1000; }
#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 .inwrap { max-width: 1180px; width: 88%; margin: 0 auto; }
#header .mainbox { display: flex; -ms-align-items: center; align-items: center; height: 130px; }
#header .logo { line-height: 0; margin-top: -5px; position: absolute; left: 60px;display: flex;height: 100%;}
#header .logo>a{ display: flex; }
#header .logo img { width: 215px; }
#header.fixed .mainbox { height: 80px; }
#header.fixed .logo img { width: 180px; }
@media screen and (max-width: 1280px) {
	#header .logo { position: absolute!important; left: 40px; }
	#header .logo img { width: 180px; }
}
@media screen and (max-width: 1040px) {
	#header { height: 75px; }
	#index #header { background: #fff; position: absolute; top: 0; }
	#header .inwrap { width: 100%; }
	#header .logo { top: 30px; }
	#header .logo img { width: 190px; }
}
@media screen and (max-width: 767px) {
	#header .logo { left: 20px; }
}

/* スライド画像のエフェクト */
@keyframes navfit {
  0% { transform: translate(0px, -60px); }
  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 ul.main { margin-left: 275px; }
#gnav ul.main>li { display: inline-block; margin-left: 15px; float: left; position: relative; }
#gnav ul.main>li:first-child { display: none; }
#gnav ul.main>li a { text-decoration: none; }
#gnav ul.main>li.current>a:before { content: ""; display: block; position: absolute; top: 50%; margin-top: 58px; width: 100%; left: 0; background: #d60a0f; height: 5px; }
#gnav ul.contact { position: absolute; right: 0; top: 0; width: 280px; }
#gnav ul.contact li{ height: 65px; width: 100%; }
#gnav ul.contact li a { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; height: 100%; font-weight: bold; }
#gnav ul.contact li a svg { margin-right: 7px; display: inline-block; }
#gnav ul.contact li a span { font-weight: bold; }
#gnav ul.contact li.mail a { color: #fff; background-color: #d60a0f; }
#gnav ul.contact li.mail a svg { width: 24px; height: 18px; fill: #fff;}
#gnav ul.contact li.mail a:hover { opacity: 1; background-color: #f7f7f7; color: #d60a0f; }
#gnav ul.contact li.mail a:hover svg { fill:#d60a0f; }
#gnav ul.contact li.tel a { color: #d60a0f; font-size: 25px; -webkit-transition: 0s; -moz-transition: 0s; transition: 0s; }
#gnav ul.contact li.tel a svg { width: 32px; height: 32px; fill: #d60a0f; }
#gnav ul.contact li.current>a:before { display: none; }
/* スクロールfixed */
.fixed #gnav ul.main { margin-left: 245px; }
.fixed #gnav ul.main>li.current>a:before { margin-top: 32px; }
.fixed #gnav ul.contact { width: 300px; display: flex; justify-content: flex-end; flex-direction: row-reverse;}
.fixed #gnav ul.contact li { height: 80px; }
.fixed #gnav ul.contact li.tel { width: calc(100% - 80px); text-align: right; margin-right: 10px; }
.fixed #gnav ul.contact li.tel a { font-size: 1.25em; }
.fixed #gnav ul.contact li.tel a svg { width: 26px; height: 26px; }
.fixed #gnav ul.contact li.mail { width: 80px; }
.fixed #gnav ul.contact li.mail a svg { margin-right: 0; }
.fixed #gnav ul.contact li.mail a span { display: none; }
@media screen and (max-width: 1280px) {
	#gnav ul.main { margin-left: 220px; }
}
@media screen and (max-width: 1040px){
	#gnav { z-index: 1000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; opacity: 0; transition : 0.6s; }
	#gnav .navbox { position: absolute; top: 50%; left: 0; text-align: center; width: 88%; padding: 0px 6%; /* Safari用 */ transform: translate(0, -50%); }
	#gnav.is-open { pointer-events: auto; opacity: 1; }
	#gnav .bg {
		background: #d60a0f; 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); }
	#gnav .img1 { width: 300px; }
	#gnav ul.main { margin-left: 0!important; }
	#gnav ul.main>li { margin-bottom: 10px; display: block; text-align: center; float: none; margin-left: 0; opacity: 0; }
	#gnav ul.main>li:first-child { display: block; }
	#gnav ul.main>li a { color: #fff; font-size: 18px; }
	#gnav ul.main>li.current>a:before { top: 50%; margin-top: 17px; width: 100px; left: 50%; margin-left: -50px; background: #fff; height: 1px; }
	#gnav ul.contact { position: static; width: 100%; max-width: 380px; margin: 40px auto 0; }
	#gnav ul.contact li { height: 65px; width: 100%; opacity: 0; }
	#gnav ul.contact li a { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; height: 100%; font-weight: bold; }
	#gnav ul.contact li a svg { margin-right: 10px; display: inline-block; }
	#gnav ul.contact li a span { font-weight: bold; }
	#gnav ul.contact li.mail a { color: #d60a0f; background-color: #fff; font-size: 18px }
	#gnav ul.contact li.mail a svg { fill: #d60a0f;}
	#gnav ul.contact li.mail a:hover { opacity: 1; background-color: #f7f7f7; color: #d60a0f; }
	#gnav ul.contact li.mail a:hover svg { fill:#d60a0f; }
	#gnav ul.contact li.tel a { color: #fff; }
	#gnav ul.contact li.tel a svg { fill: #fff; }
	#gnav ul.contact li.current>a:before { display: none; }
	
	#gnav.is-open ul.main>li,
	#gnav.is-open ul.contact>li { opacity:1; transition: 1s; }
	#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.contact>li:nth-child(1) { -webkit-transition-delay: .64s; transition-delay: .64s; }
	#gnav.is-open ul.contact>li:nth-child(2) { -webkit-transition-delay: .72s; transition-delay: .72s; }
}










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


Menubtn


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

#menubtn {display: none; z-index: 1001; }
@media screen and (max-width: 1040px){
	#menubtn { position: fixed; top: 5px; right: 3px; 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: #d60a0f; position: absolute; left: 50%; margin-left: -13px;
		-webkit-transition: all 0.3s; transition: all 0.3s;
	}
	#menubtn a #line1 { top: 22px; }
	#menubtn a #line2 { top: 30px; }
	#menubtn a #line3 { top: 38px; }
	#menubtn a:hover #line1 { top: 26px; }
	#menubtn a:hover #line2 { opacity: 0; }
	#menubtn a:hover #line3 { top: 34px; }
	#menubtn.active a .line { background: #fff; }
	#menubtn.active a .txt { display: none; }
	#menubtn.active a #line1 {
		top: 23px;
		width: 29px;
		-webkit-transform:translateY(10px) translateX(0) rotate(-45deg);
		transform:translateY(10px) translateX(0) rotate(-45deg);
	}
	#menubtn.active a #line2{ display: none; }
	#menubtn.active a #line3 { 
		width: 29px;
		top: 43px;
		-webkit-transform:translateY(-10px) translateX(0) rotate(45deg); 
		transform:translateY(-10px) translateX(0) rotate(45deg);
	}
}










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


Mainv_index


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

#mainv_index { position: relative; z-index: -1; }
#mainv_index .box { position: absolute; top: 50%; left: 0; text-align: center; width: 100%; -webkit-transform: translate(0, -50%); /* Safari用 */ transform: translate(0, -50%); }
#mainv_index .box .tategaki { }
#mainv_index .box .txt { font-size: 30px; padding: 0;  }
#mainv_index .box .txt span { display: inline-block; font-weight: bold; line-height: 1; background-color: #fff; padding: 23px 16px; margin-left: 10px; }
#mainv_index .box .txt span.reading { padding-bottom: 8px; }
#mainv_index .logo { width: 215px; position: absolute; top: 30px; left: 60px; display: none; }
#mainv_index .slidebox { z-index: -1; }
#mainv_index .slidebox { width: 100%; height: 100%; }
#mainv_index .slidebox li .bg { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ display: block; }
#mainv_index .slidebox li.swiper-slide-active .bg,
#mainv_index .slidebox li.swiper-slide-duplicate-active .bg,
#mainv_index .slidebox li.swiper-slide-prev .bg{ animation: zoomout 10s linear 0s 1 normal both; }
@media screen and (max-width: 1040px){
	#mainv_index { height: 800px; margin-top: 75px; }
	#mainv_index .box .txt { padding: 20px 0 0; }
}
@media screen and (max-width: 767px){
	#mainv_index { height: 500px; }
	#mainv_index .box .txt { font-size: 20px; }
	#mainv_index .box .txt span { padding: 18px 11px; margin-left: 8px; }
}
@media screen and (max-width: 479px){
	#mainv_index { height: 400px; }
}

/* スライド画像のエフェクト */
@keyframes zoomout {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}







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


Mainv


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

#mainv { height: 230px; position: relative; background-color: #d60a0f; display: flex; justify-content: center; align-items: center;  }
@media screen and (max-width: 1040px){
}
@media screen and (max-width: 767px){
	#mainv { height: 140px; }
}
@media screen and (max-width: 479px){
}










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


Pankuzu


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

#pankuzu { line-height: 1.4; padding:15px 0; background: #fff; }
#pankuzu ol { margin: 0 60px; }
#pankuzu ol li { display:inline-block; }
#pankuzu ol li:before { content:"/"; display: inline-block; margin-right: 3px }
#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 { padding-top: 80px; padding-bottom: 150px; margin-bottom: 80px; background: #f7f7f7; }
#main.index { padding: 0; margin: 0; background: none; }
@media screen and (max-width: 767px) { 
	#main { padding-top: 40px; padding-bottom: 40px; margin-bottom: 60px; }
}







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


Cntside


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

#side {  }













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


Footer


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

#footer {  }

/* contactbox */
#footer .contactbox { margin-bottom: 120px; }
#footer .contactbox .inbox { background-color: #d60a0f; padding: 80px 6%; color: #fff;  text-align: center; }
#footer .contactbox ul.box { display: flex; justify-content: center; align-items: center; }
#footer .contactbox ul.box li { display: inline-block; position: relative; vertical-align: middle;}
#footer .contactbox ul.box a { text-decoration: none; color: #fff; display: block; }
#footer .contactbox ul.box a span { font-weight: bold; vertical-align: middle; margin-left: 3px; }
#footer .contactbox ul.box a svg { vertical-align: middle; fill: #fff; }
#footer .contactbox ul.box .tel span { font-size: 28px; }
#footer .contactbox ul.box .tel svg { width: 32px; height: 32px; }
#footer .contactbox ul.box .tel:before { content:""; background-color: #fff; width: 1px; height: 58px; transform: rotate(20deg); position: absolute; right: -32px; top: 0; bottom: 0; margin:auto 0; display: inline-block; }
#footer .contactbox ul.box .mail { margin-left: 60px; }
#footer .contactbox ul.box .mail span { font-size: 20px; }
#footer .contactbox ul.box .mail svg { width: 28px; height: 20px; }
#footer .contactbox ul.box .mail a:hover { opacity: 0.7; }
@media screen and (max-width: 767px) {
	#footer .contactbox .inbox { padding: 6%; }
	#footer .contactbox { margin-bottom: 60px; }
	#footer .contactbox ul.box { display: block; }
	#footer .contactbox ul.box li { display: block; padding-bottom: 5px; margin-bottom: 5px; margin-top: -10px; }
	#footer .contactbox ul.box .tel span { font-size: 22px; }
	#footer .contactbox ul.box .tel svg { width: 24px; height: 24px; }
	#footer .contactbox ul.box .tel:before { width: 60px; height: 1px; transform: rotate(0deg); right: 0; top: auto; left:0; margin: 0 auto; }

	#footer .contactbox ul.box .mail { margin:0; padding: 0; }
	#footer .contactbox ul.box .mail span { font-size: 18px; }
	#footer .contactbox ul.box .mail svg { width: 24px; height: 17px; }
	#footer .contactbox ul.box .mail a:hover { opacity: 0.7; }
}



/* partnerbox */
#footer #swrap_pb { background: #f7f7f7; z-index: -1 }
#footer .partnerbox .inwrap { position: relative; }
#footer .partnerbox .txt { text-align: center; }
#footer .partnerbox .bnrbox .swiper-slide img { width: 100%; }
#footer .partnerbox .swiper-button-prev,
#footer .partnerbox .swiper-button-next { width: 40px; height: 40px; margin-top: -20px; }
#footer .partnerbox .swiper-button-prev,
#footer .partnerbox .swiper-button-next { background-size: contain; transition: 0.3s; }
#footer .partnerbox .swiper-button-prev { background-image:url(../img/common/prev.svg); left: -20px; }
#footer .partnerbox .swiper-button-next { background-image:url(../img/common/next.svg); right: -20px; }
#footer .partnerbox .swiper-button-prev:hover { background-image:url(../img/common/prev_h.svg); }
#footer .partnerbox .swiper-button-next:hover { background-image:url(../img/common/next_h.svg); }
@media screen and (max-width: 767px) {
	#footer .partnerbox .bnrbox { }
	#footer .partnerbox .swiper-button-prev,
	#footer .partnerbox .swiper-button-next { width: 30px; height: 30px; margin-top: -15px; }
	#footer .partnerbox .swiper-button-prev { left: -15px; }
	#footer .partnerbox .swiper-button-next { right: -15px; }
}



#pagetop { font-size: 16px; position: fixed; bottom: 50px; right: 40px; z-index: 999; background: #fff; height: 100px; width:100px; border-radius: 50%; }
#pagetop a { text-decoration: none; position: relative; display: flex; justify-content: center; align-items: center; height: 100%;}
#pagetop a:hover { opacity: 1; }
#pagetop a:before { content: ""; display: inline-block; width: 8px; height: 8px; border-top: 1px solid #d60a0f; border-right: 1px solid #d60a0f; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: 0.3s ease-out; backface-visibility: hidden; position: absolute; left: 0; right: 0; top: calc(50% - 20px); margin: 0 auto; }
#pagetop a:hover:before { top: calc(50% - 25px); }
#pagetop a span { color: #d60a0f; display: inline-block; padding-top: 8px; }
@media screen and (max-width: 767px) {
	#pagetop { bottom: 10px; right:10px; height: 60px; width:60px; border-radius: 50%; }
	#pagetop a span { display: none; }
	#pagetop a:before { top: calc(50% - 3px); }
	#pagetop a:hover:before { top: calc(50% - 8px); }
	
}


/* footerinfo */
#footer .footerinfo { margin: 80px 0 30px; position: relative;}
#footer .footerinfo .box1 { display: flex; align-items: center; justify-content: space-between; height: 130px; }
#footer .footerinfo .box1 .logo { width: 215px; margin-top: -10px; }
#footer .footerinfo .navbox { width: calc(100% - 225px); display: flex; align-items: center; justify-content: space-between;  }
#footer .footerinfo .navbox #fnav { text-align: left; }
#footer .footerinfo .navbox #fnav li { float: left; display: inline-block; margin-left: 20px; }
#footer .footerinfo .navbox #fnav li a { text-decoration: none; color: #191919;  }
#footer .footerinfo .navbox #fnav li a:hover { text-decoration: underline;  }

#footer .footerinfo .navbox ul.contact { position: absolute; right: 0; top: 0; width: 280px; }
#footer .footerinfo .navbox ul.contact li { height: 65px; width: 100%; }
#footer .footerinfo .navbox ul.contact li a { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; height: 100%; font-weight: bold; }
#footer .footerinfo .navbox ul.contact li a svg { margin-right: 7px; display: inline-block; }
#footer .footerinfo .navbox ul.contact li a span { font-weight: bold; }
#footer .footerinfo .navbox ul.contact li.mail a { color: #fff; background-color: #d60a0f; }
#footer .footerinfo .navbox ul.contact li.mail a svg { width: 24px; height: 18px; fill: #fff;}
#footer .footerinfo .navbox ul.contact li.mail a:hover { opacity: 1; background-color: #f7f7f7; color: #d60a0f; }
#footer .footerinfo .navbox ul.contact li.mail a:hover svg { fill:#d60a0f; }
#footer .footerinfo .navbox ul.contact li.tel a { color: #d60a0f; font-size: 25px; transition: 0s; }
#footer .footerinfo .navbox ul.contact li.tel a svg { width: 32px; height: 32px; fill: #d60a0f; }
#footer .footerinfo .box2 .cap { font-weight: bold; }
#footer .footerinfo .box2 .inbox { display: flex; align-items: flex-end; justify-content: space-between;}
#footer .footerinfo .box2 a.tel { text-decoration: none; }
#footer .footerinfo .box2 .cr { font-size: 14px; }
#footer .footerinfo .box2 .inbox .copyright { display: flex; }
#footer .footerinfo .box2 .inbox .copyright a { text-decoration: none; }
#footer .footerinfo .box2 .inbox .copyright a:hover { text-decoration: underline; }
@media screen and (max-width: 1280px) {
	#footer .navbox #fnav { display: none; }
	#footer .footerinfo .box2 .inbox { display: block; }
}
@media screen and (max-width: 1040px) {
	#footer .footerinfo .box2 .inbox { display: block; }
}
@media screen and (max-width: 767px) {
	#footer .footerinfo { margin: 40px 0 20px; position: relative;}
	#footer .footerinfo .box1 { height: auto; display: block;  }
	#footer .footerinfo .box1 .logo { width: 215px; margin: 0 auto 20px; }
	#footer .footerinfo .navbox ul.contact { display: none; }
	#footer .footerinfo .navbox ul.contact li a { display: block; } 
	#footer .footerinfo .box2 .cap { font-weight: normal; text-align: left; }
	#footer .footerinfo .box2 .cap br { display: none;  }
	#footer .footerinfo .box2 .inbox .copyright { display: block; }
	#footer .footerinfo .box2 .inbox .sp { display: none; }
	#footer .footerinfo .box2 .address { margin-bottom: 10px; }
	#footer .footerinfo .box2 .address,
	#footer .footerinfo .box2 .cr { text-align: left; line-height: 1.8; }

}