@charset "utf-8";
/*=============================================================
 header
=============================================================*/
/* header-block
-------------------------------------------------------------*/
#header-block{
	display: flex;
	flex-direction: column-reverse;
}
#header-box{
	height: 0px;
	margin: 169px 0 0;
	position: relative;
}
#header{
	background-color:#000;
	padding-top:0;
	width:100%;
	position:absolute;
	top:-169px;
	left:0;
	z-index:21;
}
#header a{color:#fff;}

/* hdr-logo
-------------------------------------------------------------*/
#hdr-logo{
	position:absolute;
}

/* globalNavSet
-------------------------------------------------------------*/
#globalNavSet{position:relative;}
#globalNavSet>dt{display:none;}

/* delete JS Style */
@media only screen and (min-width:768px){
#container{margin-top:0 !important;}
}
#globalNavSet>dd>div{
	display:flex;
	flex-wrap:wrap;
	flex-direction:row-reverse;
}
/* boxGNavBg */
.boxGNavBg{
	background:rgba(0,0,0,.5);
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:20;
	visibility:hidden;
	opacity:0;
	transition:.2s;
}
/* globalNav
-------------------------------------------------------------*/
#globalNav{
	display:flex;
	width:100%;
	margin:40px 0;
	font-size: 16px;
}
@media only screen and (max-width:1024px) and (min-width:768px){
#globalNav{font-size:calc(100vw * 16 / 1024);}
}

#globalNav>li{
	line-height:1.2;
	box-sizing:border-box;
	text-align:center;
	margin:0;
	padding:0 3px 0 4px;
	flex:1 1 auto;
	position:relative;
}
#globalNav>li:last-child{padding-right:4px;}
#globalNav>li::before,
#globalNav>li:last-child::after{
	content:"";
	border-left:1px solid #ccc;
	position:absolute;
	top:13px;
	bottom:13px;
	left:0;
}
#globalNav>li:last-child::after{
	right:0;
	left:auto;
}
#globalNav>li>a{
	color:#fff;
	text-decoration:none;
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	height:100%;
	padding:30px 0 40px;
	position:relative;
}
#globalNav>li>a::after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom:0;
	left:50%;
	width: 8px;
	height: 8px;
	margin: 0 0 20px 0;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg) translateX(-50%);
}
#globalNav>li>a:hover{opacity: 0.6;}


@media only screen and (min-width:768px){

html:not(.touchDevice) #globalNav>li>a:hover,
#globalNav>li>a.icon-blank::after{}
html:not(.touchDevice) #globalNav>li>a.icon-blank:hover::after{}

/* act *//* body#XXX -> add.act  #globalNav>#gb-XXX */
#globalNav>.act>a{color:#0072bf;}
#globalNav>.act>a::after{
	content:"";
	display:block;
	background-color:#0072bf;
	height:4px;
	position:absolute;
	right:13px;
	left:13px;
	bottom:0;
}

}
/* header shrink
-------------------------------------------------------------*/
@media only screen and (min-width:768px){
.setShrink#header,
.setShrink #hdr-logo,
.setShrink #globalNavSet,
.setShrink #globalNav{transition:all 0.2s ease-out;}

.hdrShrink .setShrink#header{
	position: fixed;
	top: 0;
	background: #fff;
	background-color: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(5px);
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
	transition:all 0.0s ease-out;
	transition:top 0.5s ease-out;
}
.setShrink #hdr-logo{
	/*width:160px;*/
	display: none;
	overflow:hidden;
	transition-property:width;
}
.hdrShrink .setShrink #hdr-logo{
	display: block;
	width:120px;
	top:50%;
	transform:translate(0,-50%);
}
.setShrink #hdr-logo img{max-width:none;}
.hdrShrink .setShrink #globalNavSet{
	margin-left:246px;
}
.hdrShrink .setShrink #globalNav{
	margin:0;
}
.hdrShrink .setShrink #globalNav>li>a{
	padding: 40px 0;
	color: #000;
}
.hdrShrink .setShrink #globalNav>li::before,
.hdrShrink .setShrink #globalNav>li:last-child::after{
	top:43px;
	bottom:43px;
}	
.hdrShrink .setShrink #globalNav>li>a::after{content: none;}
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:767px){
	
/* header-block
-------------------------------------------------------------*/
#header-block{}
#header-box{
	height: 0px;
	margin: 218px 0 0;
	position: relative;
}
#header{
	background-color:#000;
	padding-top:0;
	width:100%;
	position:absolute;
	top:-218px;
	left:0;
	z-index:21;
}
.hdrShrink #header{
	position: fixed;
	top: 0;
	height:60px;
	padding-top:0;
	background-color: #fff;
	transition:top 0.5s ease-out;
}
.hdrShrink #header>.contentsInner{
	display:flex;
	align-items:center;
	height:100%;
}
/* hdr-logo
-------------------------------------------------------------*/
.setShrink #hdr-logo {
	width:60px;
	display: none;
	overflow: hidden;
	transition-property: width;
}
.hdrShrink #hdr-logo{
	width:60px;
	display: block;
	position:static;
}
/* globalNavSet
-------------------------------------------------------------*/
#globalNavSet{position:static;}
#globalNavSet a{color:#fff;}
.hdrShrink #globalNavSet>dt{
	background-color:#000;
	display:block;
	width:60px;
	height:60px;
	position:absolute;
	top:0;
	right:0;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.hdrShrink #globalNavSet>dt::before,
.hdrShrink #globalNavSet>dt::after{
	content:"";
	background-color:#fff;
	display:block;
	width:20px;
	height:2px;
	position:absolute;
	top:29px;
	left:50%;
	margin-left:-10px;
	z-index:1;
}
.hdrShrink #globalNavSet>dt>span::before{
	content:"";
	width:20px;
	height:16px;
	margin-left:-10px;
	border-top:2px solid #fff;
	border-bottom:2px solid #fff;
	top:20px;
	left:50%;
	position:absolute;
}
.hdrShrink #globalNavSet>dt>span .open,
.hdrShrink #globalNavSet.open>dt>span .close{display:none;}
.hdrShrink #globalNavSet.open>dt>span .open{display:inherit;}
.hdrShrink #globalNavSet>dt::before,
.hdrShrink #globalNavSet>dt::after,
.hdrShrink #globalNavSet>dt>span{
	transition:all 0.3s ease;
}
.hdrShrink #globalNavSet.open>dt>span::before{border-color:rgba(255,255,255,0);}
.hdrShrink #globalNavSet.open>dt::before{transform:rotate(45deg);}
.hdrShrink #globalNavSet.open>dt::after{transform:rotate(-45deg);}
.hdrShrink #globalNavSet>dt>span>span{display:none;}
.hdrShrink #globalNavSet>dd{
	color:#fff;
	background-color:#000;
	text-align: center;
	box-sizing:border-box;
	width:100%;
	visibility:hidden;
	overflow:hidden;
	position:fixed;
	top:60px;
	bottom:100%;
	left:0;
	z-index:71;
	opacity:0;
	transition:all 0.3s ease;
	height:0;
}
.hdrShrink #globalNavSet.open>dd{
	height:calc(100vh - 50px);
	visibility:visible;
	/*bottom:0;*/
	opacity:1;
}
.hdrShrink #globalNavSet>dd>div{display:block;}
.hdrShrink #globalNavSet>dd>*{visibility:hidden;}
.hdrShrink #globalNavSet.open>dd>*{visibility:inherit;padding-top:0;}
html.gNavOpen,
/*html.gNavOpen body{
	height:100%;
	overflow:hidden;
}*/
html.gNavOpen #globalNavSet>dd>div{
	box-sizing:border-box;
	width:100%;
	height:100%;
	padding-top:20px;
	overflow:auto;
	position:relative;
	-webkit-overflow-scrolling:touch;
}
/* set drawer animation */
#globalNavSet.setOpenDrawerR>dd{
	height:calc(100vh - 50px);
	left:100%;
	bottom:0;
}
#globalNavSet.setOpenDrawerR.open>dd{left:0;}

/* boxGNavBg */
html.gNavOpen .boxGNavBg{
	visibility:visible;
	opacity:1;
}

/* globalNav
-------------------------------------------------------------*/
#globalNav {
	margin: 20px 0;
	flex-wrap: wrap;
}
#globalNav>li{
	width: calc(100% / 3);
}
#globalNav>li#gb-gb003::before{
	content: "";
	border-right: 1px solid #ccc;
	position: absolute;
	top: 13px;
	bottom: 13px;
	right: 0;
}	
.hdrShrink #globalNav{
	display:block;
	margin-top: 0;
}
.hdrShrink #globalNav>li{
	width: calc(100%);
	padding:0 !important;
	border-bottom:1px solid #7f7f7f;
}
.hdrShrink #globalNav>li:before,
.hdrShrink #globalNav>li:last-child:after{display:none;}
.hdrShrink #globalNav>li>a,
.hdrShrink #globalNav>li>a+.toggle-btn{
	color:#fff !important;
	font-weight:bold;
	box-sizing:border-box;
	display:block;
	padding:20px 4% 20px 4%;
}
/*.hdrShrink #globalNav>li>a:hover{
	margin-left:4%;
	padding:3px 0 25px 10px;
	border-top:1px solid #aaa;
}*/

/* act */
.hdrShrink #globalNav>li>a::after{display:none !important;}




}