@charset "UTF-8";
/* CSS Document */
/* PC HEADER */
#header { width:100%; padding: 0; box-sizing: border-box; margin: 0 auto; position: relative; position: fixed; top: 0; left: 0; z-index: 999}
#header .inBox{ max-width: 1900px; padding: 0 10px 0 20px; box-sizing: border-box; margin: 0 auto; position: relative; width: 100%;}
#header h1{ width: 180px; box-sizing: border-box; display: table; height: auto; text-align: center; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
#header h1 span{ display: table-cell; vertical-align: middle;}
#header h1 span img{ width: 100%;}
#header a{ color: #000;}
#gNavi { width: 100%; padding:30px 20px ; box-sizing: border-box; }
#gNavi ul { width:100%;  box-sizing: border-box; margin: 0 auto; display: flex; justify-content:flex-end; align-items: center; flex-wrap: wrap; align-content: center; }
#gNavi ul li { font-size: 17px; margin: 0; position: relative;} 
#gNavi ul li:before{ content: ''; width: 1px; height: 18px; background-color:#004831; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
#gNavi ul li:nth-child(3):after{ content: ''; width: 1px; height: 18px; background-color:#004831; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#gNavi ul li.btn_app:before{ display: none;}
#gNavi ul li a{ text-decoration: none; font-weight: bold; color: #004831; display: flex; align-items: center; padding: 10px 0; padding: 0 2em ; } 
#gNavi ul li a:hover,
#gNavi ul li a.active { opacity: 0.6; }
#gNavi ul li.btn_app a{ margin-left: 1.5em}

/*　ナビ固定、下に下がる動き　*/
#gNavi.nav_fixed{ position: fixed; top: 0; left: 0; animation: DownAnime 0.5s forwards; padding: 10px 20px; background-color: #fff; box-shadow: 0 5px 10px hsla(0,0%,0%,0.2); }
@keyframes DownAnime{
  from { opacity: 0; transform: translateY(-100px); }
  to { opacity: 1; transform: translateY(0); }
}

/* SP HEADER for CONTENT PAGE */
#spHeader { display:none; position:fixed; width:12vw; top:0; right:0; z-index:99999; overflow:visible; font-family: 'Noto Sans JP', sans-serif;}
#spHeader #spHeaderBox { padding:80px 0 0 0; position:relative; z-index:99999;}
#spHeader #spNavi { top:0; left:0; width:100%; height:0px; margin:0 0 0 0; overflow:hidden; position:fixed; transition:opacity 0.5s ease-in 0s; z-index:99998; padding:0 0 0 0; box-sizing:border-box; opacity:0; background:hsla(0,0%,100%,0.90); }
#spHeader #spNavi.active { height:100%; padding:16.25% 0 0 0; opacity:1; }
#spHeader #spNavi p.title{ text-align: center; margin: 0 auto 10vw}
#spHeader #spNavi p.title img{ width: 40vw;}
#spHeader #spNavi ul { box-sizing:border-box; padding:0 20px 50px; height:100%; overflow:auto; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; align-content: flex-start;}
#spHeader #spNavi ul li { display:block; width:100%; margin-bottom: 2.5em; box-sizing:border-box; position:relative; z-index:9999; text-align: center; }
#spHeader #spNavi ul li a { display:block; font-size:4vw; text-align:center; color:#004831; line-height:1.2em; padding:0; text-decoration:none; font-weight: bold;}
#spHeader #spNavi ul li a.active{ color: #00498a;}
#spHeader #spNavi ul li a:hover,
#spHeader #spNavi ul li a.active {text-shadow: none !important ;}
#spHeader #spNavi ul li.logo { margin: 0 auto 15vw}
#spHeader #spNavi ul li.logo img{ width: 60%;}
#spHeader #spNavi ul li.btn_app a{ padding: 0.8em 3em !important; width: auto; display: inline-block; margin: 0.5em auto 0;}
#spHeader #spHeaderBox .spMenu { position:absolute; display:block; width:12vw; height:12vw; top:0; right:0; z-index:99999; background-color:#004831; }

/*ハンバーガーメニューアニメーション*/
#spHeaderBox li a.menu-trigger:hover,#spHeaderBox li a.menu-trigger span:hover{ opacity: 1;}
#spHeaderBox li p.title{ text-align: center; font-family: abolition, sans-serif; font-weight: 400; font-style: normal; font-size: 3.5vw; letter-spacing: 0.15em}
.menu-trigger,.menu-trigger span { display: inline-block; transition: all .6s; box-sizing: border-box; z-index: 9999; }
.menu-trigger { position: absolute; top: 3.7vw; right:2.7vw; width: 6vw; height: 5vw; cursor: pointer;}
.menu-trigger span { position: absolute; left: 0; width: 100%;  height: 2px; background-color: #fff;}
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 2.5vw; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger.active span {background-color: #fff; }
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(2.3vw) rotate(-42deg); transform: translateY(2.35vw) rotate(-42deg); }
.menu-trigger.active span:nth-of-type(2) { opacity: 0;}
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-2.3vw) rotate(42deg); transform: translateY(-2.35vw) rotate(42deg); }
.menu-trigger.active:hover span:nth-of-type(2) { opacity: 0;}

/* FOOTER */
#page-top { position: fixed; width: 50px; height: 50px; bottom: 20px; right: 20px; z-index: 999;}
#page-top a{ display: block; transition: all .3s; }
#page-top a:hover{ transform: translate(0,-5px); }
#page-top span{ display: table-cell; vertical-align: middle;}
#footer { width: 100%; padding: 30px 0; font-size: 12px; text-align: center; box-sizing: border-box; color: #004831; }
#footer .title{ width: 498px; margin: 0 auto 20px; max-width: 60%;}
#footer a{ color: #004831; margin: 0 0 0 30px;}
#footer a:hover{ opacity: 0.6}


/* COMMON PAGE */
h3{ text-align: center; font-weight: bold; margin-bottom: 50px;}
h3.title .en{ color: #004831; font-size: 40px;font-family: "Avenir", Verdana,"游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif; line-height: 1}
h3.title .ja{ color: #666; font-size: 16px; display: block;}
h3.title .en.sub{ font-size: 30px;}
h3.title .ja{ color: #666; font-size: 16px; display: block;}
.commonContent { padding:80px 50px; max-width: 1200px; width: 100%; margin: 0 auto;}
.sub{ margin: 0 0 40px 0;}
.sub:last-child{ margin-bottom: 0;}
.title_sub{ font-weight: bold; margin: 0 0 30px 0;}

@media screen and ( max-width:1000px) {

}
@media screen and (max-width:768px) {

/* HEADER */
#header { display:none; }	

/* SP HEADER for CONTENT PAGE */
#spHeader { display:block; }

/* SP HEADER for TOP PAGE */
#spHeaderTop { display:block; }

/* COMMON PAGE */
.commonContent { padding:50px 20px 50px 20px; min-width: auto; max-width: 100%; box-sizing: border-box; width: 100%; }
h3.title .en{ font-size: 30px;}
h3.title .en.sub{ font-size: 22px;}


/* FOOTER */
#footerCaption{ padding:30px 20px 50px 20px;}
#footer { width: 100%; }
#footer a{ display: block; margin: 0;}
}