@charset "utf-8";

/*
************************************************************************
* ヘッダー
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
#header
{
}
#header-contents
{
}

/*
************************************************************************
 ナビゲーションラッパー
************************************************************************
*/
#header .navigation-wrapper
{
}


/*
************************************************************************
 ナビゲーション
************************************************************************
*/
#header .navigation-wrapper .navigation-top,
#header .navigation-wrapper .navigation-bottom
{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center ;
    align-content:space-between;
}
#header .navigation-wrapper .navigation-top
{
	z-index:1;
}
#header .navigation-wrapper .navigation-bottom
{
	z-index:0;
}
#header .navigation-wrapper .navigation-top > *,
#header .navigation-wrapper .navigation-bottom > *
{
	flex:1 0 auto;
}
#header .navigation-wrapper .navigation-top
{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center ;
    align-items:stretch;
    align-content:stretch;
    
    overflow:hidden;
/*
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(248, 245, 230, 1) 7px, rgba(248, 245, 230, 1) 23px );
*/
background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(246, 175, 33, 0.7) 10px, rgba(246, 175, 33, 0.7) 30px );
}
#header .navigation-wrapper .navigation-bottom:before
{
	content:"";
	display:block;
	
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	width:100%;
	height:100%;
}

/*
************************************************************************
 ロゴ部
************************************************************************
*/
#header .navigation-wrapper .navigation-top > .visual
{
	padding:0.0em;
	flex:0 1 1000px;
}
#header .navigation-wrapper .navigation-top > .sponsor
{
	padding:0.0em;
	flex:0 0 100%;
}
#header .navigation-wrapper .navigation-top > .sponsor .sponsor-banner
{
	max-width:1000px;
	width:100%;
	margin:0 auto;
	
	background-color:#c1d9cc;
	padding:1em;
	
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:center;
	align-content:stretch;
	justify-content:center;
}
#header .navigation-wrapper .navigation-top > .sponsor .sponsor-banner .label
{
	margin:0em 0em;
	color:#00a84d;
	font-weight:bold;
}
#header .navigation-wrapper .navigation-top > .sponsor .sponsor-banner .sponsor-banner-item
{
	margin:0em 1em;
}
#header .navigation-wrapper .navigation-top > .sponsor .sponsor-banner .sponsor-banner-item img
{
	border:1px solid #CCCCCC;
}

#header .navigation-wrapper .navigation-top > .blur
{
	position:absolute;
	top:-2em;
	bottom:-2em;
	left:-2em;
	right:-2em;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	
	-ms-filter: blur(1em);
	filter: blur(1em);
}
#header .navigation-wrapper .navigation-bottom .ope.ope-right
{
	flex:1 0 auto;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	align-items:center ;
	align-content:stretch;
	justify-content:flex-end;
	
	margin:0;
	padding:0.0em;
	list-style:none;
	
	line-height:1.0;
	
	display:none;
}
#header .navigation-wrapper .navigation-bottom .ope > li
{
	margin:0;
	padding:0.5em;
	list-style:none;
}
#header .navigation-wrapper .navigation-bottom .ope > li > a
{
	display:block;
	text-align:center
}
#header .navigation-wrapper .navigation-bottom .ope > li > a > span
{
	display:block;
}
#header .navigation-wrapper .navigation-bottom .ope > li > a > span.eyecatch
{
	font-size:2.5rem;
}
#header .navigation-wrapper .navigation-bottom .ope > li > a > span.label
{
	margin-top:0.25em;
	font-size:1.0rem;
}


/*
************************************************************************
 ナビ部
************************************************************************
*/
#header .navigation-wrapper .navigation-bottom > ul.global-nav
{
	display:flex;
	justify-content: center;
	align-items: center;
	
	list-style:none;
	margin:0;
	padding:0;
	
	line-height:1.0;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav > li
{
	list-style:none;
	margin:0;
	padding:0;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav > li.disable
{
	opacity:0.5;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav > li.disable a
{
	pointer-events: none;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav > li:after
{
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	
	height:0.25em;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav > li > a
{
	display:block;
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav > li > a > span
{
	display:block;
	padding:1.0em 1.2em;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav > li > a > span > .main
{
	display:block;
	font-size:1.4rem;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav > li > a > span > .sub
{
	display:block;
	font-size:1.0rem;
	margin-top:0.40em;
}

/*
************************************************************************
 小階層
************************************************************************
*/
#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul
{
	display:none;
	position:absolute;
	top:calc(100%);
	left:0;
	min-width:100%;
	width:10em;
	width:max-content;
	
	list-style:none;
	margin:0;
	padding:0.5em;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child:hover > ul
{
	display:block;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul > li
{
	list-style:none;
	margin:0;
	padding:0;
	line-height:1.0;
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
	border-left:0.25em solid transparent;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul > li > a
{
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul > li > a:hover
{
	text-decoration:underline;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul > li > a > span
{
	display:block;
	padding:0.5em 0.5em;
	font-size:1.4rem;
}
#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul > li > a > span > .icon
{
	vertical-align:middle;
}

/*
************************************************************************
 メニューボタン
************************************************************************
*/
#header .navigation-wrapper .navigation-bottom .ope .btnMobileMenu
{
	border:0px solid transparent;
	background: none;
	width:100%;
	height:100%;
}
#header .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span.border
{
	display:block;
	position:absolute;
	
	left:20%;
	right:20%;
	
	width:60%;
	height:0px;
}
#header .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span
{
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
	transform: translate3d(0,0,0);
}
#header .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span.border:nth-child(1){top:20%;}
#header .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span.border:nth-child(2){top:40%;}
#header .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span.border:nth-child(3){top:60%;}
#header .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span.label
{
	display:block;
	position:absolute;
	bottom:5%;
	left:0%;
	right:0%;
	
	font-size:0.6em;
	text-align:center;
}
#header.showMenu .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span.border:nth-child(1)
{
	transform:rotate(45deg);
	top:40%;
}
#header.showMenu .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span.border:nth-child(2)
{
	filter:alpha(opacity=0);
	-moz-opacity: 0.0;
	opacity: 0.0;
}
#header.showMenu .navigation-wrapper .navigation-bottom .ope .btnMobileMenu > span.border:nth-child(3)
{
	transform:rotate(-45deg);
	top:40%;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1100px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	#header .navigation-wrapper .navigation-top > .visual
	{
		padding:0.0em;
		flex:0 0 100vw;
	}
	#header .navigation-wrapper .navigation-top > .sponsor .sponsor-banner .label
	{
		margin:0em 1em 0em 0em;
	}
	#header .navigation-wrapper .navigation-top > .sponsor .sponsor-banner .sponsor-banner-item
	{
		margin:0em 1em 0em 0em;
	}
	
	/*
	************************************************************************
	 メニューボタン
	************************************************************************
	*/
	#header .navigation-wrapper .navigation-top
	{
	    flex-wrap:wrap;
    }
	#header .navigation-wrapper .navigation-bottom .ope.ope-right
	{
		display:flex;
	}
	#header .navigation-wrapper .navigation-bottom .ope.ope-right .ope-right-title
	{
		flex:1 1 100%;
		padding:1.0em;
	}
	#header .navigation-wrapper .navigation-bottom .ope.ope-right .ope-right-title .label
	{
		font-size:1.2em;
		color:#FFFFFF;
		font-weight:bold;
	}
	#header .navigation-wrapper .navigation-bottom .ope .btnMobileMenu
	{
		width:12vw;
		height:12vw;
	}
	
	/*
	************************************************************************
	 ナビ部
	************************************************************************
	*/
	#header .navigation-wrapper .navigation-bottom
	{
		/* display:none; */
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav
	{
		display:none;
	}
	#header.showMenu .navigation-wrapper .navigation-bottom
	{
		display:block;
	}
	#header.showMenu .navigation-wrapper .navigation-bottom > ul.global-nav
	{
		opacity:1.0;
		
		position:absolute;
		top:100%;
		left:0;
		right:0;
		/*height:calc(100vh);*/
		
		display:block;
		/* justify-content: flex-start; */
		/* justify-content: center; */
		/* justify-content: flex-end; */
		flex-wrap: wrap;
		align-items: center;
		
		list-style:none;
		margin:0;
		padding:1.0em;
		
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav >li
	{
		width:100%;
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav > li:after
	{
		content:"";
		display:block;
		position:absolute;
		top:0;
		bottom:0;
		left:0;
		right:auto;
		
		height:auto;
		width:0.25em;
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav > li > a > span > .main
	{
		font-size:2.0rem;
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav > li > a > span > .sub
	{
		font-size:1.8rem;
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul
	{
		position:relative;
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul > li > a > span
	{
		font-size:2.0rem;
		padding:0.8em 0.8em 0.8em 0.8em;
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child > ul > li > a > span > .icon
	{
		font-size:1.0rem;
		margin-top:-0.5em;
	}
	#header .navigation-wrapper .navigation-bottom > ul.global-nav li.has-child:hover > ul
	{
		display:none;
	}
	.accordion-trigger.on
	{
		
	}
	.accordion-contents.on
	{
		display:block !important;
	}

}