@charset "UTF-8";
/* CSS Document */


#hamburger {
	display: none;
	cursor: pointer;
	width: 22px;
	height: 16px;
	flex-direction: column;
	justify-content: space-between;
}

#hamburger span {
	display: block;
	height:1px;
	background: #fff;
	border-radius: 2px;
	transition: 0.3s;
}


/*==================================================
For Smartphone
==================================================*/

@media all and (max-width:640px) {

a {
outline:none;
}
a:link {color:#fff; text-decoration:none;}
a:visited {color:#fff; text-decoration:none;}
a:hover {color:#888;text-decoration:none;}

#globalNav a {
display:block;
padding:1em;
background-image:none;
text-align:center;
}

#header {
background:#232323;
width:100%;
position:sticky;
top:0;
right:0;
z-index:100;
}

#header h1 {
text-indent:-10000px;
margin:0 auto;
width:140px;
}

#header h1 a {
background:url(../images/common/nav.png) no-repeat;
background-size:700px;
display:block;
height:43px;
text-indent:-10000px;
width:140px !important;
}

#header h1 a:link {background-position:0 0;}
#header h1 a:visited {background-position:0 0;}
#header h1 a:hover {background-position:0 -47px;}



#hamburger {
display: flex;
position:absolute;
top:14px;
right:15px;
}

#globalNav {
position: absolute;
top: 43px;
right: 0;
width: 100%;
background: #333;
opacity: 0;
transform: translateY(-10px);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}

#globalNav.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

#globalNav ul {
flex-direction: column;
padding:0;
}

#globalNav li {
border-bottom: 1px solid #444;
padding:0;
}
    
/* ▼ ハンバーガー → × のアニメーション */
#hamburger.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#hamburger.active span:nth-child(2) {
opacity: 0;
}
#hamburger.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}


}

/*==================================================
For PC
==================================================*/

@media all and (min-width:641px) {


/*========== Navigation ==========*/

#header h1 {
float:left;
height:65px;
text-indent:-10000px;
width:200px;
}

#header h1 a {
background:url(../images/common/nav.png) no-repeat;
background-size:980px;
display:block;
height:65px;
text-indent:-10000px;
width:200px !important;
}

#header h1 a:link {background-position:0 0;}
#header h1 a:visited {background-position:0 0;}
#header h1 a:hover {background-position:0 -65px;}

nav {
width:780px;
}

nav li {
float:left;
width:156px;
}

nav li a {
background:url(../images/common/nav.png) no-repeat;
background-size:980px;
display:block;
width:156px;
height:65px;
text-indent:-10000px;
}

/*Program*/
.btnprogram a {
background:url(../images/common/nav.png) no-repeat;
background-size:980px;
}
.btnprogram a:link {background-position:-200px 0px;}
.btnprogram a:visited {background-position:-200px 0px;}
.btnprogram a:hover {background-position:-200px -65px;}

/*Request*/
.btnrequest a {
background:url(../images/common/nav.png) no-repeat;
background-size:980px;
}
.btnrequest a:link {background-position:-356px 0px;}
.btnrequest a:visited {background-position:-356px 0px;}
.btnrequest a:hover {background-position:-356px -65px;}

/*Event*/
.btnevent a {
background:url(../images/common/nav.png) no-repeat;
background-size:980px;
}
.btnevent a:link {background-position:-512px 0px;}
.btnevent a:visited {background-position:-512px 0px;}
.btnevent a:hover {background-position:-512px -65px;}

/*Promotion*/
.btnpromotion a {
background:url(../images/common/nav.png) no-repeat;
background-size:980px;
}
.btnpromotion a:link {background-position:-668px 0px;}
.btnpromotion a:visited {background-position:-668px 0px;}
.btnpromotion a:hover {background-position:-668px -65px;}

/*Company*/
.btncompany a {
background:url(../images/common/nav.png) no-repeat;
background-size:980px;
}
.btncompany a:link {background-position:-824px 0px;}
.btncompany a:visited {background-position:-824px 0px;}
.btncompany a:hover {background-position:-824px -65px;}

}