@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:#5480ff;
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,#global-nav2{position:relative;}
#global-nav{display:none;}
#global-nav ul{
list-style: none;
position: absolute;
left: 0px;
right: 0px;
margin: auto auto;
font-size: 15px;
width:825px;
}
#main_nav{position:relative;}
#global-nav2 ul{
list-style: none;
position:absolute;
left: 0px;
right: 0px;
top:-28px;
margin: auto auto;
font-size: 15px;
width:860px;
z-index:100;
}
@media screen and (min-width:1000px) {
#global-nav2 ul{
width:90%;
max-width:1020px;
}
}
@media screen and (max-width: 860px) {
#global-nav2 ul{
width:760px;
}
}
@media screen and (max-width: 768px) {
#global-nav ul{width:100%;}
#global-nav{display:block;}
#global-nav2 {display:none;}
#top-head a{
color: #555;
border:none;
}
}
#top #global-nav ul{top:380px;}
#global-nav ul,#global-nav2 ul{
display:flex;
justify-content:space-around;
}
#global-nav ul li,
#global-nav2 ul li{
position: relative;
}
@media screen and (max-width: 860px) {
#global-nav ul li,
#global-nav2 ul li{
margin-left:20px;
}
}
#global-nav ul li:nth-of-type(1),#global-nav2 ul li:nth-of-type(1){margin-left:0;}
#global-nav ul li a ,#global-nav2 ul li a {
padding: 0;
color:#555;
font-weight:bold;
text-align:center;
display:block;
line-height:1.5;
border:none;
width:85px;
font-size:90%;
}
#global-nav ul li a span,#global-nav2 ul li a span{font-size:75%;}
#global-nav2 ul li:nth-of-type(1) a span{color:#f44779;}
#global-nav2 ul li:nth-of-type(2) a span{color:#5480ff;}
#global-nav2 ul li:nth-of-type(3) a span{color:#c4ae00;}
#global-nav2 ul li:nth-of-type(4) a span{color:#ff6522;}
#global-nav2 ul li:nth-of-type(5) a span{color:#b86ad7;}
#global-nav2 ul li:nth-of-type(6) a span{color:#56b29a;}
#global-nav2 ul li:nth-of-type(7) a span{color:#ffb000;}
#global-nav2 ul li img{
margin-bottom:0.5em;
width:45px;
height:auto;}
@media screen and (min-width: 1000px) {
#global-nav2 ul li img{
width:56px;
height:auto;}
}
/* Btn Hover */
#global-nav ul li:after,
#global-nav2 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-nav2 ul li:nth-of-type(1):hover:after {background: #f44779;}
#top #global-nav2 ul li:nth-of-type(1):after {background: #f44779;}
#global-nav2 ul li:nth-of-type(2):hover:after {background: #5480ff;}
#about #global-nav2 ul li:nth-of-type(2):after {background: #5480ff;}
#global-nav2 ul li:nth-of-type(3):hover:after {background: #c4ae00;}
#interaction #global-nav2 ul li:nth-of-type(3):after {background: #c4ae00;}
#global-nav2 ul li:nth-of-type(4):hover:after {background: #ff6522;}
#policy #global-nav2 ul li:nth-of-type(4):after {background: #ff6522;}
#global-nav2 ul li:nth-of-type(5):hover:after {background: #b86ad7;}
#nursery #global-nav2 ul li:nth-of-type(5):after {background: #b86ad7;}
#global-nav2 ul li:nth-of-type(6):hover:after {background: #56b29a;}
#contact #global-nav2 ul li:nth-of-type(6):after {background: #56b29a;}
#global-nav2 ul li:nth-of-type(7):hover:after {background:#ffb000;}
#information #global-nav2 ul li:nth-of-type(7):after {background:#ffb000;}
/* 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;
display:block;
}
#top-head.fixed #global-nav ul,
#top-head.fixed #global-nav2 ul{
top:0;
margin:0 auto;
width:860px;
}
@media screen and (max-width: 860px) {
#top-head.fixed #global-nav ul{width:760px;}
}
#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:#f44779;border-bottom:2px solid #f44779;}
#top-head.fixed #global-nav ul li:nth-of-type(2) a:hover{color:#54c6ff;border-bottom:2px solid #54c6ff;}
#top-head.fixed #global-nav ul li:nth-of-type(3) a:hover{color:#c4ae00;border-bottom:2px solid #c4ae00;}
#top-head.fixed #global-nav ul li:nth-of-type(4) a:hover{color:#ff6522;border-bottom:2px solid #ff6522;}
#top-head.fixed #global-nav ul li:nth-of-type(5) a:hover{color:#b86ad7;border-bottom:2px solid #b86ad7;}
#top-head.fixed #global-nav ul li:nth-of-type(6) a:hover{color:#56b29a;border-bottom:2px solid #56b29a;}
#top-head.fixed #global-nav ul li:nth-of-type(7) a:hover{color:#ffb000;border-bottom:2px solid #ffb000;}

#top #top-head.fixed #global-nav ul li:nth-of-type(1) a{border-bottom:2px solid #f44779;}
#kourinkai #top-head.fixed #global-nav ul li:nth-of-type(2) a{border-bottom:2px solid #54c6ff;}
#interaction #top-head.fixed #global-nav ul li:nth-of-type(3) a{border-bottom:2px solid #c4ae00;}
#policy #top-head.fixed #global-nav ul li:nth-of-type(4) a{border-bottom:2px solid #ff6522;}
#nursery #top-head.fixed #global-nav ul li:nth-of-type(5) a{border-bottom:2px solid #b86ad7;}
#contact #top-head.fixed #global-nav ul li:nth-of-type(6) a{border-bottom:2px solid #56b29a;}
#information #top-head.fixed #global-nav ul li:nth-of-type(7) a{border-bottom:2px solid #ffb000;}
/* 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: 768px) {
article {padding: 0 30px;}
.inner {width: 100%;}
#global-nav2 ul{
font-size: 12px;
max-width:530px;
}
#global-nav2 ul li{margin-left:20px;}
#global-nav2 ul li a {width:90px;}
}
@media screen and (max-width: 768px) {
#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;
padding:15px 0 0 10px;
z-index:9999;
}
#sp_logo span{padding-left:10px;font-size:180%;}
#sp_logo img{
display:block;
width:250px;
height:auto;
padding-top:0px;
}/* Fixed reset */
#top-head.fixed {
padding-top: 0;
background: transparent;
}
#mobile-head {
background: #fff;
width: 100%;
height: 50px;
z-index:99999;
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;
z-index:999;
}
#global-nav ul{
display:block;
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;
z-index:999;
}
#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,
#top-head.fixed #global-nav ul li:nth-of-type(5) a:hover,
#top-head.fixed #global-nav ul li:nth-of-type(6) a:hover,
#top-head.fixed #global-nav ul li:nth-of-type(7) a:hover{color:#fff;border-bottom:none;}
#top-head.fixed #global-nav ul li:nth-of-type(1) a{border-bottom:none;}
#nav-toggle {display: block;}
#top #top-head.fixed #global-nav ul li:nth-of-type(1) a,
#kourinka #top-head.fixed #global-nav ul li:nth-of-type(2) a,
#interaction #top-head.fixed #global-nav ul li:nth-of-type(3) a,
#policy #top-head.fixed #global-nav ul li:nth-of-type(4) a,
#nursery #top-head.fixed #global-nav ul li:nth-of-type(5) a,
#contact #top-head.fixed #global-nav ul li:nth-of-type(6) a,
#information #top-head.fixed #global-nav ul li:nth-of-type(7) a{border:none;}
/* #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);
}
}