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



/*
base #191919
blue #0083c3
*/










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


baselayout


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

#contentsbox { margin-left: 46%; }
@media screen and (max-width: 1280px){
	#contentsbox { margin-left: 42%; }
}
@media screen and (max-width: 767px){
	#contentsbox { margin-left: 0; }
}









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


Header


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

#header { width: 100%; z-index: 100; }
#header .mainbox { }
#header .logo { position: fixed; top: 30px; left: 40px; width: 74px; z-index: 100;}
#header .logo img { width: 100%;}

/* telbox */
#header .telbox { position: absolute; top: 15px; right: 120px; text-align: center; letter-spacing: 0.05em; }
#header .telbox .txt1 { font-size: 1.4rem; }
#header .telbox .tel { text-align: center; display: inline-block; }
#header .telbox .tel a { text-decoration: none; font-size: 2.8rem; line-height: 1; color: #191919; letter-spacing: 0.05em;}
#header .telbox .tel a .icon { width: 28px; padding-right: 5px; vertical-align: -5px; }
#header .telbox .linetxt{ font-weight: bold; font-size: 1.3rem; text-align: center; line-height: 1; margin-top: 5px; color: #2dad38; margin-left: 30px; }
#header .telbox .txt2 { font-size: 1.3rem; text-align: center; line-height: 1; margin-left: 30px; }

/* navbtnbox */
#header .navbtnbox { position: fixed; right: -1px; top: 210px; z-index: 1003; }
#header .navbtnbox li { width: 52px; border: 1px solid #191919; background: #fff; }
#header .navbtnbox li:first-child { margin-bottom: 10px; }
#header .navbtnbox li a { display: block;  width: 100%; padding: 20px 0; text-align: center; color: #191919; }
#header .navbtnbox li.mail a { background: #0083c3; color: #fff; }
#header .navbtnbox li img { display: inline-block; width: 28px; font-size: 0; margin-bottom: 5px; }
#header .navbtnbox li img:nth-child(2) { display: inline-block; }
#header .navbtnbox li img:first-child { display: none; }
#header .navbtnbox li.mail a:hover { background: #fff; color: #0083c3; }
#header .navbtnbox li.line a:hover { background: #2dad38; color: #fff; }
#header .navbtnbox li a:hover img:nth-child(2) { display: none; }
#header .navbtnbox li a:hover img:first-child { display: inline-block; }

/* スクロール時fixed */
#index #header .logo { transition: 0.6s; opacity: 0;}
#index #header.fixed .logo { opacity: 1; }
@media screen and (max-width: 1040px) {
	#header .telbox { display: none; }
    #header .navbtnbox { left:calc(50% - 125px); right: auto; top: auto; bottom: -1px; text-align: center; display: flex; justify-content: center;  }
    #header .navbtnbox li { width: 120px; }
    #header .navbtnbox li span { -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb; }
    #header .navbtnbox li:first-child { margin-bottom: 0; margin-right: 10px; }
    #header .navbtnbox li a { padding: 8px 0; }
    #header .navbtnbox li img { margin-bottom: 0; margin-right: 5px; }
    #header .navbtnbox li.mail a:hover { background: #0083c3; color: #fff; }
    #header .navbtnbox li.line a:hover { background: #fff; color: #191919; }
    #header .navbtnbox li a:hover img:nth-child(2) { display: inline-block; }
    #header .navbtnbox li a:hover img:first-child { display: none; }
    #header .navbtnbox { opacity: 0; pointer-events: none; transition: 0.5s; }
    #header.fixed .navbtnbox,
    body.is-open #header .navbtnbox{ opacity: 1; pointer-events: auto;}
}
@media screen and (max-width: 767px) {
    #header .logo { top: 10px; left: 20px; width: 50px; }
}







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


Nav


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

#gnav{ z-index: 1002; margin: 0; position: fixed; top: 0; right:-650px; display: flex; justify-content: space-between; align-items: center; height: 100vh; width: 650px; pointer-events: none; background: url(../img/common/bg_blue.jpg); background-position: center center; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; transition: 1s cubic-bezier(0.25, 1, 0.5, 1); }
#gnav::-webkit-scrollbar { display: none; }
#gnav .navbox { z-index: 10; width: 65%; padding: 0 20% 0 15%; display: block; }
#gnav.is-open{ pointer-events: auto; right: 0; }
#gnavbg { opacity: 0; pointer-events: none; transition: 1s; background: #fff; height: 100%; width: 100%; position: fixed; top: 0; left: 0; z-index: 1; }
#gnavbg.is-open { opacity: 0.7; }
#gnav ul.main { display: block; text-align: left; padding: 8vh 0; }
#gnav a { text-decoration: none; color: #fff; font-size: 1.8rem; font-weight: bold; }
#gnav ul.main>li { display: block; position: relative; margin-bottom: 1.6em; padding-bottom:1.6em; line-height: 1; border-bottom: 1px dashed #80c1e1; }
#gnav ul.main>li a:before { content:url(../img/common/dot_white.svg); font-size: 0; margin-right: 6px; width: 8px; display: inline-block; vertical-align:2px }
#gnav ul.main>li span { vertical-align: middle; color:#fff; }
#gnav ul.main>li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
#gnav ul.main>li>ul.sub { padding: 10px 0 0; line-height: 2;}
#gnav ul.main>li>ul.sub li { display: inline-block; margin-right:1em; }
#gnav ul.main>li>ul.sub li:last-child { margin-right:0; }

#gnav ul.main>li { opacity: 0; margin-left: 30px; }
#gnav.is-open ul.main>li { opacity:1; transition: 1s cubic-bezier(0.25, 1, 0.5, 1); margin-left: 0; }
#gnav.is-open ul.main>li:nth-child(1) { transition-delay: .4s; }
#gnav.is-open ul.main>li:nth-child(2) { transition-delay: .5s; }
#gnav.is-open ul.main>li:nth-child(3) { transition-delay: .6s; }
#gnav.is-open ul.main>li:nth-child(4) { transition-delay: .7s; }
#gnav.is-open ul.main>li:nth-child(5) { transition-delay: .8s; }
#gnav.is-open ul.main>li:nth-child(6) { transition-delay: .9s; }
#gnav.is-open ul.main>li:nth-child(7) { transition-delay: 1.0s; }
#gnav.is-open ul.main>li:nth-child(8) { transition-delay: 1.1s; }
#gnav.is-open .telbox { opacity:1; transition: 1.6s cubic-bezier(0.25, 1, 0.5, 1); transition-delay: 1.8s; margin-left: 0;}
@media screen and (max-width: 767px){
	#gnav { right: -100%; width: 100%; }
	#gnav .navbox { width: 80%; padding: 0 10%; display: block; }
	#gnav ul.main { padding: 60px 0 100px; }
	#gnav a { font-size: 1.6rem; }
	
	#gnav ul.main>li { opacity: 1; margin-left: 0; }
	#gnav.is-open ul.main>li { opacity:1; transition: none; }
}
@media screen and (max-width: 350px){
	#gnav .navbox { width: 84%; padding: 0 8%;  }
	#gnav a { font-size: 1.4rem; }
}





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


Menubtn


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

#menubtn { position: fixed; top: 10px; right: 20px; display: block; width: 76px; height: 76px; transition : 0.6s; cursor: pointer; z-index: 1005; }
#menubtn a { text-decoration: none; position: relative; display: block; height: 100%; width: 100%; }
#menubtn a .line { width: 34px; height: 4px; background: #0083c3; position: absolute; left: 50%; margin-left: -17px; transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0s; }
#menubtn a #line1 { top: 28px; }
#menubtn a #line2 { top: 38px; }
#menubtn a #line3 { top: 48px; }
#menubtn a .txt { position: absolute; top: 61px; left: 0; width: 100%; text-align: center; font-size: 1.4rem; font-family: 'Lato', sans-serif; font-weight: 900; letter-spacing: 0.02em; color: #0083c3; line-height: 1; transition: 0.2s; }
#menubtn a .txt.close { opacity: 0; color:#fff; }
#menubtn a:hover { transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0s;}
#menubtn a:hover .line { background: #0083c3; }
#menubtn a:hover #line1,
#menubtn a:hover #line2,
#menubtn a:hover #line3 { top: 38px; }
#menubtn.active a { transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0s; }
#menubtn.active a #line1,
#menubtn.active a #line2,
#menubtn.active a #line3 { top: 38px; background : #fff; transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0s; }
#menubtn.active a .txt.menu { opacity: 0; }
#menubtn.active a .txt.close { opacity: 1; }
@media screen and (max-width: 767px){
	#menubtn { top: 0; right: 0; width: 76px; height: 76px; background: #fff; }
	#menubtn a #line1 { top: 18px; }
	#menubtn a #line2 { top: 28px; }
	#menubtn a #line3 { top: 38px; }
	#menubtn a .txt { top: 50px; font-size: 1.2rem; }
	#menubtn a:hover #line1,
	#menubtn a:hover #line2,
	#menubtn a:hover #line3 { top: 28px; }
	#menubtn.active a #line1,
	#menubtn.active a #line2,
	#menubtn.active a #line3 { top: 28px; background : #0083c3;}
	#menubtn a .txt.close { color:#0083c3; }
}









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


Mainv.index


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


#mainv.index { position: fixed; height: 100%; width: 46%; left: 0; top: 0; }
#mainv.index .mvlist { width: 100%; height: 100%; position: relative; overflow: hidden;}
#mainv.index .mvlist li { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; }
#mainv.index .bg { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ }
@media screen and (max-width: 1280px){
	#mainv.index { width: 42%; }
}
@media screen and (max-width: 767px){
	#mainv.index { position: static; height: 65vh; width:100%; }
}

#maint.index { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; box-sizing: border-box; min-height: 740px; }
#maint.index:before,
#maint.index:after { content: ""; width: 100%; height: 60%; position: absolute; bottom: 0; left: 0; background: url(../img/index/mv_bg.jpg); background-position: center top; z-index: -1; }
#maint.index:after { height: 340px; bottom: -340px; background-position: center bottom;}
#maint.index .logo { width: 128px; margin: 25px 0 50px; }
#maint.index ul.tategaki li { padding-left: 0!important; padding-top: 1em!important; text-align: right;}
#maint.index ul.tategaki li:before { content: "●"; margin-right: 0; margin-bottom: 0.5em; font-size: 0.5em; color:#0083c3; }
#maint.index .txt { font-size: 2.0rem; }
#maint.index .txt span { display: inline-block; background: #fff; padding: 10px 5px; margin-right: 10px; font-weight: bold; position: relative; letter-spacing: 0.2em; }
#maint.index .txt span:first-child { margin-right: 0; }
#maint.index .txt span:before { width: calc(100% - 12px); height: 0; display: block; position: absolute; left: 0; content: ""; border-bottom: solid 12px #fff; border-left: solid 12px transparent; bottom: 100%; }
#maint.index .txt span:after { height: 0; display: block; position: absolute; left: 0; content: ""; border-bottom: solid 12px #f2f2f2; border-left: solid 12px transparent; bottom: 100%; }
@media screen and (max-width: 1040px){
    #maint.index ul.tategaki li { font-weight: bold; }
    #maint.index .txt { font-size: 1.6rem; }
	#maint.index .logo { width: 90px; margin: 15px auto 40px; }
}
@media screen and (max-width: 767px){
	#maint.index { display: block; position: relative; height: auto; margin:-95px 0 40px; min-height:0; text-align: center; }
    #maint.index:before,
    #maint.index:after { height: 270px; background-size: 800px; }
    #maint.index:after { height: 260px; bottom: -260px; }
}

/* scrolldown */
#maint.index .scrolldown { position: fixed; bottom: 15px; left: calc(45.7% - 15px); text-align: center;}
#maint.index .scrolldown .mouse { position:relative; font-size: 0; }
#maint.index .scrolldown .icon1 { width: 24px; }
#maint.index .scrolldown .icon2 { width: 6px; position: absolute; left: calc(50% - 3px); top: 6px; animation: 4s dotmove infinite running ease-out; opacity: 0;}
#maint.index .scrolldown .txt { font-size: 1.2rem; line-height: 1.6; }
#maint.index.fixed .scrolldown { transition: 0.5s; opacity: 0;}
@media screen and (max-width: 1280px){
    #maint.index .scrolldown { left: calc(50% - 15px); }
}
@media screen and (max-width: 767px){
	#maint.index .scrolldown { display: none; }
}
@keyframes dotmove {
  0 { top: 6px; opacity: 0; }
  10% { opacity: 1; }
  30% { top: 6px; }
  50% { top: 20px; }
  70% { opacity: 1; }
  80% { opacity: 0; }
  100% { top: 20px; }
}












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


Mainv.under


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

#mainv.under { position: fixed; height: 100%; width: 46%; left: 0; top: 0; z-index:-1; }
#mainv.under .mvlist { width: 100%; height: 100%; position: relative; overflow: hidden;}
#mainv.under .mvlist li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#mainv.under .bg { height: 100%; width: 100%; object-fit: cover; font-family: 'object-fit: cover;'; /*IE対策*/ }
@media screen and (max-width: 1280px){
	#mainv.under { width: 42%; }
}
@media screen and (max-width: 767px){
	#mainv.under { position: static; height: 300px; width:100%; }
}

#maint.under { display: flex; flex-direction: column; justify-content: center; /* align-items: center; */ height: 500px; box-sizing: border-box; margin-top: 150px; }
#maint.under .box { display: flex; align-items: center; margin-right: 16%; }
#maint.under .box .pagetitle { margin-top: -5px; }
#maint.under .box .txt { flex: 1; margin-left: calc(15px + 3vw); }
@media screen and (max-width: 1040px){
	#maint.under { display: block; margin-top: 150px; position:relative; height: auto; }
	#maint.under .box { display: block; margin-right:0;}
	#maint.under .box .txt { flex:none; margin: 60px 8% 80px; }
	#maint.under .box .pagetitle { margin-top: 0; }
}
@media screen and (max-width: 767px){
	#maint.under { margin-top: -25px; }
	#maint.under .box { display: block; margin-right:0;}
	#maint.under .box .txt { flex:none; margin: 30px 6% 60px; }
}







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


Pankuzu


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

#pankuzu { line-height: 1.4; padding:15px 6%; text-align: right; }
#pankuzu ol { font-size: 0; }
#pankuzu ol li { display:inline; font-size: 1.4rem; letter-spacing: 0.08em; }
#pankuzu ol li img { width: 15px; font-size: 0; margin-right:3px; vertical-align:-2px; }
#pankuzu ol li:before { content:">"; display: inline-block; margin: 0 8px; transform:scaleX(70%) }
#pankuzu ol li:first-child:before { display: none; }
#pankuzu ol li:first-child { display:inline-flex; align-items:center;}
#pankuzu ol li a { text-decoration: none; }
#pankuzu ol li a:hover { opacity: 0.7; transition: 0.3s; text-decoration: underline; }
@media screen and (max-width: 1040px) { 
	#pankuzu{ display: none; }
}















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


Content


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

#main { }
@media screen and (max-width: 767px) { 
	#main {  }
}












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


Footer


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

#footer {  }

/* contactbox */
#footer .contactbox { text-align: center; background: url(../img/common/bg_blue.jpg); background-position: center center; color: #fff; }
#footer .contactbox .tel a { text-decoration: none; font-size: 2.8rem; line-height: 1; color: #fff; letter-spacing: 0.05em;}
#footer .contactbox .tel a .icon { width: 28px; padding-right: 5px; vertical-align: -5px; }
#footer .contactbox .txt2 { font-size: 1.3rem; text-align: center; line-height: 1; margin-left: 30px; color: #fff; }
#footer .contactbox .btnbox { display: flex; justify-content: center; align-items: center; }
#footer .contactbox .btnbox li:first-child { margin-right: 20px; }
#footer .contactbox .btnbox li a { font-family: inherit; font-size: 1.6rem; padding: 13px 20px; color: #fff; min-width: 210px; }
#footer .contactbox .btnbox li a:before,
#footer .contactbox .btnbox li a:after,
#footer .contactbox .btnbox li a>span:before,
#footer .contactbox .btnbox li a>span:after  { background: #fff; }
#footer .contactbox .btnbox li a>span span { font-size: 1.2rem;}
#footer .contactbox .btnbox li .icon { display: inline-block; width: 28px; font-size: 0; margin-right: 5px; }
#footer .contactbox .btnbox li .icon:nth-child(2) { display: inline-block; }
#footer .contactbox .btnbox li .icon:first-child { display: none; }
@media screen and (max-width: 1040px) {
	#footer .contactbox .copy br { display: none; }
    #footer .contactbox .tel a { font-size: 2.4rem; }
    #footer .contactbox .tel a .icon { width: 24px; vertical-align: -4px; }
    #footer .contactbox .txt2 { font-size: 1.2rem; margin-left: 25px; }
    #footer .contactbox .btnbox { display: block; }
    #footer .contactbox .btnbox li:first-child { margin-right: 0; margin-bottom: 15px; }
    #footer .contactbox .btnbox li a { font-size: 1.4rem;  min-width: 280px; }
    #footer .contactbox .btnbox li a>span span { font-size: 1.2rem;}
    #footer .contactbox .btnbox li .icon { width: 22px; }
}


/* footerinfo */
#footer .footerinfo .incnt { padding: 60px 0; }
#footer .footerinfo .box1 { display: flex; width: 560px; margin: 0 auto; max-width: 100%; margin-bottom: 60px; }
#footer .footerinfo .box1 .txt { font-size: 1.8rem; font-weight: bold; letter-spacing: 0.2em; color: #fff; margin-top: 12px; }
#footer .footerinfo .box1 .txt span { display: inline-block; background: #f18e19; padding: 0 5px; font-weight: bold; position: relative; letter-spacing: 0.2em; justify-content:center; display: flex; }
#footer .footerinfo .box1 .txt span:before { width: calc(100% - 12px); height: 0; display: block; position: absolute; left: 0; content: ""; border-bottom: solid 12px #f18e19; border-left: solid 12px transparent; bottom: 100%; }
#footer .footerinfo .box1 .txt span:after { height: 0; display: block; position: absolute; left: 0; content: ""; border-bottom: solid 12px #cf720d; border-left: solid 12px transparent; bottom: 100%; }
#footer .footerinfo .box1 .txtbox { padding: 20px 30px; background: #f7f7f7; }

#footer .footerinfo .box2 { display: flex; justify-content: center; font-size: 1.5rem; margin-bottom: 40px; }
#footer .footerinfo .box2 .logo { width: 125px; margin-right: 30px; }
#footer .footerinfo .dotlist.s3 { text-align: center; }
#footer .footerinfo .dotlist.s3 li { font-size: 1.5rem; color: #191919; }
#footer .footerinfo .cr { font-size: 1.5rem; padding: 10px 0; width: 100%; text-align: center; background: #f7f7f7; }
#footer .footerinfo .cr a {text-decoration: none;}
#footer .footerinfo .cr a:hover {text-decoration: underline;}
@media screen and (max-width: 1040px) {
	#footer .footerinfo .incnt { padding: 60px 0; }
	#footer .footerinfo .box1 { display: block; width: 100%; margin: 0 auto; margin-bottom: 40px; }
	#footer .footerinfo .box1 .txt { font-size: 1.6rem; width: 100%; -webkit-writing-mode:horizontal-tb; -ms-writing-mode:lr-tb; writing-mode:horizontal-tb; }
	#footer .footerinfo .box1 .txt span { display: inline-block; width: 100%; text-align: center; padding:4px 0 14px; line-height:1; }
	#footer .footerinfo .box1 .txtbox { padding: 20px 6%; }
    #footer .footerinfo .box2 { display: block; font-size: 1.4rem; margin-bottom: 30px; text-align: center; }
    #footer .footerinfo .box2 .logo { width: 90px; margin: 0 auto 20px; display: block; }
    #footer .footerinfo .box2 .txt2:first-child { margin-bottom: 20px; }
    #footer .footerinfo .dotlist.s3 li { font-size: 1.4rem; margin: 0 0.2em;}
    #footer .footerinfo .cr { font-size: 1.2rem; padding: 20px 0 70px; }
}