@media print, screen and (min-width:980px) {

#top-head {
position: fixed;
width: 100%;
padding: 10px;
line-height: 1;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
box-sizing: border-box;
z-index: 1500;
}

#top-head:after {

}

#top-head a,
#top-head {
color: #fff;
text-decoration: none;
}

#top-head .inner {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0;
}

#top-head .logo {
position: absolute;
background: url(../img/logo_s@2x.png) no-repeat;
background-size: 219px;
width: 219px;
height: 33px;
top: 10px;
left: 10px;
z-index: 502;
opacity: 0;
}

#top-head .logo span {
width: 227px;
height: 72px;
text-align: left;
display: block;
text-indent: -9999px;
cursor: pointer;
z-index: 502;
}

#top-head #share {
position: absolute;
font-family: 'Pathway Gothic One', sans-serif;
width: 100px;
font-size: 14px;
color: #fff;
text-align: right;
top: 11px;
right: 76px;
}

#top-head #sns {
position: absolute;
top: 4px;
right: 10px;
z-index: 502;
}

#global-nav ul {
display: inline-block;
margin: 0 auto;
padding: 0;
}

#global-nav ul li {
display: inline-block;
position: relative;
}

#global-nav ul li a {
font-family: 'Pathway Gothic One', sans-serif;
font-size: 20px;
color: #fff;
margin: 10px;
}

/* transition */
#top-head,
#top-head:after,
#top-head .logo,
#top-head .logoCo,
#global-nav ul,
#global-nav ul li,
#global-nav ul li a,
#login,
#sns {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

#top-head.fixed {
background: #202020;
height: 50px;
}
#top-head.fixed .logo {
position: absolute;
background: url(../img/logo_s@2x.png) no-repeat;
background-size: 219px;
width: 219px;
height: 33px;
top: 10px;
left: 20px;
z-index: 501;
opacity: 1;
}

#top-head.fixed .logo span {
width: 227px;
height: 72px;
display: block;
text-indent: -10000px;
cursor: pointer;
z-index: 501;
}

#top-head.fixed:after {

}

#top-head.fixed #share {
position: absolute;	font-family: 'Pathway Gothic One', sans-serif;
width: 100px;
font-size: 14px;
font-weight: 600;
color: #666;
text-align: right;
top: 11px;
right: 76px;
}

#top-head.fixed #sns {
position: absolute;
top: -3px;
right: 10px;
z-index: 502;
}

#top-head.fixed #global-nav ul  {
display: inline-block;
margin: 0 auto;
padding: 0;
}

#top-head.fixed #global-nav ul li a {
font-size: 18px;
color: #fff;
margin: 6px 7px 0 7px;
/*-transform: scale(0.9);
webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);*/
}

#top-headCo {
position: fixed;
background: #202020;
width: 100%;
padding: 10px;
line-height: 1;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
box-sizing: border-box;
z-index: 500;
}

#top-headCo:after {

}

#top-headCo a,
#top-headCo {
color: #fff;
text-decoration: none;
}

#top-headCo .inner {
position: relative;
width: 100%;
margin: 0 auto;
}

#top-headCo .logoCo {
position: absolute;
background: url(../img/hayanochika_new_logo.svg) no-repeat;
background-size: 219px;
width: 219px;
/* height: 33px; */
top: 5px;
left: 20px;
z-index: 502;
}

#top-headCo .logoCo span {
width: 227px;
height: 72px;
text-align: left;
display: block;
text-indent: -9999px;
cursor: pointer;
z-index: 502;
}

#top-headCo #share {
position: absolute;
font-family: 'Pathway Gothic One', sans-serif;
width: 100px;
font-size: 14px;
color: #fff;
text-align: right;
top: 11px;
right: 76px;
}

#top-headCo #sns {
position: absolute;
top: 4px;
right: 10px;
z-index: 502;
}

#global-navCo ul {
display: inline-block;
margin: 0 auto;
padding: 0;
}

#global-navCo ul li {
display: inline-block;
position: relative;
}

#global-navCo ul li a {	font-family: 'Pathway Gothic One', sans-serif;
font-size: 20px;
color: #fff;
margin: 10px;
}

/**/

#onlineStoreNav {
position: fixed;
background: #2E2E2E;
width: 100%;
text-align: right;
margin: 0 auto;
padding: 69px 10px 7px 10px;
box-sizing: border-box;
line-height: 1;
top: 0;
z-index: 400;
}

#onlineStoreNav ul {
display: inline-block;
margin: 0 auto;
padding: 0;
}

#onlineStoreNav ul li {
display: inline-block;
position: relative;
}

#onlineStoreNav ul li a {	font-family: 'Pathway Gothic One', sans-serif;
font-size: 14px;
color: #fff;
margin: 0 7px;
}

/* transition */
#top-headCo,
#top-headCo:after,
#top-headCo .logoCo,
#global-nav ul,
#global-nav ul li,
#global-nav ul li a,
#sns {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
padding-right:10px;
}
/* Fixed */
#top-headCo.fixed {
background: #1D1C1C;
height: 80px;
}
#top-headCo.fixed .logoCo {
position: absolute;
background: url(../img/hayanochika_new_logo.svg) no-repeat;
background-size: 219px;
width: 219px;
height: 60px;
top: 10px;
left: 20px;
z-index: 501;
opacity: 1;
}

#top-headCo.fixed .logoCo span {
width: 227px;
height: 72px;
display: block;
text-indent: -10000px;
cursor: pointer;
z-index: 501;
}

#top-headCo.fixed:after {

}

#top-headCo.fixed #share {
position: absolute;
font-family: 'Pathway Gothic One', sans-serif;
width: 100px;
font-size: 14px;
font-weight: 600;
color: #666;
text-align: right;
top: 11px;
right: 76px;
}

#top-headCo.fixed #sns {
position: absolute;
top: -3px;
right: 10px;
z-index: 502;
}

#top-headCo.fixed #global-nav ul  {
display: inline-block;
margin: 0 auto;
padding: 0;
}

#top-headCo.fixed #global-nav ul li a {
font-size: 20px;
color: #fff;
margin: 6px 7px 0 7px;
}

#global-nav ul li a {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
padding-bottom: 3px;
}

#global-nav ul li a:before {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
background: #fff;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
z-index: 2;
}

#global-nav ul li a:hover:before,
#global-nav ul li a:focus:before,
#global-nav ul li a:active:before {
right: 0;
}

.fixed #global-nav ul li a {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
padding-bottom: 3px;
}

.fixed #global-nav ul li a:before {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
background: #fff;
height: 2px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
z-index: 2;
}

.fixed #global-nav ul li a:hover:before,
.fixed #global-nav ul li a:focus:before,
.fixed #global-nav ul li a:active:before {
right: 0;
}

#onlineStoreNav {
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

#onlineStoreNav.fixed {
position: fixed;
top: 0;
padding: 56px 10px 7px 10px;
}

}

@media screen and (min-width:0px) and (max-width:979px) {

#top-head,
#top-headCo,
#onlineStoreNav {
display: none;
}

.logoSp {
background: url(../img/hayanochika_new_logo.svg) no-repeat;
background-size: 180px;
width: 200px;
/* height: 33px; */
margin: 0 auto;
}

.logoSp span {
background-size: 180px;
height: 50px;
display: block;
text-indent: -10000px;
}

.fbIcon {
position: absolute;
width: 22px;
height: 22px;
top: 58px;
right: 14px;
}


}