@charset "utf-8";
/* CSS Document */
.inner {
width: 100%;
margin: 0 auto;
}
.inner:after {
content: "";
clear: both;
display: block;
}
/* header */
#top-head {
font-size:14px;
top: -130px;
position: absolute;
width: 100%;
margin: 100px auto 0;
padding: 30px 0 0;
line-height: 1;
z-index: 999;
}
#top-head a,
#top-head {
color: #fff;
text-decoration: none;
}
#top-head .inner {position: relative;}
#top-head #logo {
position:relative;
font-size: 12px;
text-align:center;
background:#0080ec;
padding:0.8em 0;
}
#sp_logo{display:none;}
#top-head #logo span{
position:absolute;
bottom:-10px;
display:block;
left: 0;
right: 0;
margin: auto;
}
#global-nav{
position:relative;
margin-top:50px;
}
#global-nav ul{
list-style:none;
display:flex;
justify-content:center;
margin-top:100vh;
padding-top:390px;
font-size: 15px;
}
#about #global-nav ul,
#information #global-nav ul,
#contact #global-nav ul{
margin-top:0;
padding-top:390px;
}
#global-nav ul li{
position:relative;
margin:0 2em;
}
@media screen and (min-width:1400px){
#global-nav ul li{margin:0 3em;}
}
#global-nav ul li a {
padding: 0;
color:#555;
font-weight:bold;
text-align:center;
display:block;
line-height:1.5;
width:104px;
border:none;
}
#global-nav ul li a span{font-size:80%;}
#global-nav ul li:nth-of-type(1) a span{color:#0080ec}
#global-nav ul li:nth-of-type(2) a span{color:#ff6f96;}
#global-nav ul li:nth-of-type(3) a span{color:#b3a48d;}
#global-nav ul li:nth-of-type(4) a span{color:#56b29a;}
#global-nav ul li img{margin-bottom:0.5em;}
@media screen and (max-width: 640px) {
#global-nav{position:relative;}
#global-nav ul{
width:100%;
display:block;
margin-top:0;
padding-top:0;
}
}

/* Btn Hover */
#global-nav ul li:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 3px;
bottom: -10px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
#global-nav ul li:nth-of-type(1):hover:after {background: #0080ec;}
#global-nav ul li:nth-of-type(2):hover:after {background: #ff6f96;}
#global-nav ul li:nth-of-type(3):hover:after {background: #b3a48d;}
#global-nav ul li:nth-of-type(4):hover:after {background: #56b29a;}
#top #global-nav ul li:nth-of-type(1):after {background: #0080ec;}
#about #global-nav ul li:nth-of-type(2):after {background: #ff6f96;}
#information #global-nav ul li:nth-of-type(3):after {background: #b3a48d;}
#contact #global-nav ul li:nth-of-type(4):after {background: #56b29a;}


/* Fixed */
#top-head.fixed {
padding-top: 0px;
margin-top: 0;
top: 0;
position: fixed;
height: 90px;
background: #fff;
background: rgba(255,255,255,.9);
transition: top 0.65s ease-in;
-webkit-transition: top 0.65s ease-in;
-moz-transition: top 0.65s ease-in;
}
#top-head.fixed #global-nav ul img{display:none;}
#top-head.fixed h1{z-index:999;}
#top-head.fixed #global-nav{
background:#fff;
margin-top:0px;
}
#top-head.fixed #global-nav ul{
margin:0 auto;
padding-top:0;
}
#top-head.fixed #global-nav ul span{display:none;}
#top-head.fixed #global-nav ul li:after {display:none}
#top-head.fixed #global-nav ul li:nth-of-type(1) a:hover{color:#0080ec;border-bottom:2px solid #0080ec;}
#top-head.fixed #global-nav ul li:nth-of-type(2) a:hover{color:#ff6f96;border-bottom:2px solid #ff6f96;}
#top-head.fixed #global-nav ul li:nth-of-type(3) a:hover{color:#b3a48d;border-bottom:2px solid #b3a48d;}
#top-head.fixed #global-nav ul li:nth-of-type(4) a:hover{color:#56b29a;border-bottom:2px solid #56b29a;}
#top #global-nav ul li:nth-of-type(1) a{color:#555;}
#top #top-head.fixed #global-nav ul li:nth-of-type(1) a{border-bottom:2px solid #0080ec;}
#about #top-head.fixed #global-nav ul li:nth-of-type(2) a{border-bottom:2px solid #ff6f96;}
#information #top-head.fixed #global-nav ul li:nth-of-type(3) a{border-bottom:2px solid #b3a48d;}
#contact #top-head.fixed #global-nav ul li:nth-of-type(4) a{border-bottom:2px solid #56b29a;}

@media screen and (max-width: 640px) {
#global-nav ul li a{border-bottom:none;}
#top #top-head.fixed #global-nav ul li:nth-of-type(1) a,
#about #top-head.fixed #global-nav ul li:nth-of-type(2) a,
#information #top-head.fixed #global-nav ul li:nth-of-type(3) a,
#contact #top-head.fixed #global-nav ul li:nth-of-type(4) a
{border-bottom:none;}
}
/* Transition */
/*#top-head,#top-head .logo,#global-nav ul li,#global-nav ul li a {transition: all0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;}*/
/* Toggle Button */
#nav-toggle {
display: none;
position: absolute;
right: 12px;
top: 14px;
width: 34px;
height: 36px;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {position: relative;}
#nav-toggle span {
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #666;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}
@media screen and (max-width: 900px) {
article {padding: 0 30px;}
.inner {width: 100%;}
#global-nav ul{
font-size: 12px;
}
#global-nav ul li{margin-left:10px;}
#global-nav ul li a {width:90px;}
}
@media screen and (max-width: 640px) {
#top-head,
.inner {
width: 100%;
padding: 0;
}
#top-head {
top: 0;
position: fixed;
margin-top: 0;
}
#top-head #logo {display:none;}
#sp_logo{
display:block;
color:#555;
font-size:80%;
padding:10px;
}
#sp_logo span{padding-left:30px;}
#sp_logo img{
display:block;
width:250px;
height:auto;
margin-top:-3px;
}
/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: #fff;
width: 100%;
height: 50px;
z-index: 999;
position: relative;
}
#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -507px;
background: #333;
width: 100%;
text-align: center;
padding: 10px 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 11px;
}
#global-nav ul li{
float: none;
position: static;
padding:0;
margin:0;
font-size:130%;
}
#global-nav ul li span,#global-nav ul li br{display:none;}
#global-nav ul li img{
width:35px;
height:auto;
vertical-align:middle;
padding-right:8px;
}
#global-nav ul li:after{display: none;}
#top-head #global-nav ul li a,#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #fff;
padding: 8px 0;
}
#top-head.fixed #global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
background: #333;
width: 100%;
text-align: center;
padding: 10px 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#top-head.fixed #global-nav ul {
list-style: none;
position: static;
right: 0;
bottom: 0;
font-size: 11px;
}
#top-head.fixed #global-nav ul li{
float: none;
position: static;
padding:0;
margin:0;
font-size:130%;
}
#top-head.fixed #global-nav ul li span,#top-head.fixed #global-nav ul li br{display:none;}
#top-head.fixed #global-nav ul li img{
width:35px;
height:auto;
vertical-align:middle;
padding-right:8px;
}
#top-head.fixed #global-nav ul li:after{display: none;}
#top-head.fixed #top-head #global-nav ul li a,
#top-head.fixed #top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
color: #fff;
padding: 8px 0;
}
#top-head.fixed #global-nav ul img{display:inline-block;}
#top-head.fixed h1{z-index:999;}
#top-head.fixed #global-nav ul{
top:0;
margin:0 auto;
width:100%;
display:block;
}
#top-head.fixed #global-nav ul span{display:none;}
#top-head.fixed #global-nav ul li:after {display:none}
#top-head.fixed #global-nav ul li:nth-of-type(1) a:hover,
#top-head.fixed #global-nav ul li:nth-of-type(2) a:hover,
#top-head.fixed #global-nav ul li:nth-of-type(3) a:hover,
#top-head.fixed #global-nav ul li:nth-of-type(4) a:hover{color:#fff;border-bottom:none;}
#top #global-nav ul li:nth-of-type(1) a{color:#0080ec;}
#about #global-nav ul li:nth-of-type(2) a{color:#ff6f96;}
#top #top-head.fixed #global-nav ul li:nth-of-type(1) a:hover{color:#0080ec;border-bottom:none;}
#top-head.fixed #global-nav ul li:nth-of-type(1) a{border-bottom:none;}
#nav-toggle {display: block;}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {width: 0;left: 50%;}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(556px);
-webkit-transform: translateY(556px);
transform: translateY(556px);
}
}