@charset "utf-8";
/*

　menu.css

*/

/*

◆メニュー表示時、メニューボタン「閉じる」状態の時は、
　JavaScriptで bodyタグ に _status_groval_menu_open クラスを付加。
　→　._status_groval_menu_open ではじまる指定

*/


/**********************************************************************************************************************************************************************/
/*====================================================================================================================================================================


    PCサイズ　及び基本値


======================================================================================================================================================================*/




/******************************************************************

     ナビゲーションフレーム

******************************************************************/


#global_menu_bk {
	position:fixed;
	top:0;
	right:0;
	width:100%;
	/*background-color:#666666;*/
	z-index:1000;
}


#global_menu {
	margin: 0 0 0 0;
	padding: 0;
	width:100%;
	z-index:1000;
	/*background: rgba(128,128,128,1.0);*/
	background-color:#333;
/*	border-top:1px solid #666;
	border-bottom:1px solid #666;*/
}

#global_menu_content {
	margin:auto auto auto auto;
	padding:0;
	max-width:auto;
	box-sizing:border-box;
}

#global_menu a {
	color:#FFF;
	text-decoration:none;
}




/*========= 上部固定させるためのCSS ===============*/


#menu_box {
	position:relative;
	/*background-color:#666;
	padding:1.0rem;*/
	color:#FFF;
	width:100%;
}





/*JSを使いfixedクラスが付与された際の設定*/
/*
#menu_box.fixed{
	position: fixed;
    z-index: 1002;
    top:0;
    left:0;/
	margin:0;
}
*/



/******************************************************************

     ナビゲーションボタン

******************************************************************/


/*======================================
    ボタン本体
======================================*/

#global_menu_button {
	display:block;
	position:fixed;
	top:0;
	right:-50px; /* PCサイズでは画面外 */
	
	/* PC、タブレットサイズではメニューコンテンツより後ろ */
	z-index:1001; /* メニュー基準値＋1 */
	
	width:50px;
	height:50px;
	background-color:#000;
	border-radius:0 0 0 10px;
	opacity:0.8;
	color:#FFF;
	text-align:center;
	line-height:30px;
	font-size:1.2rem;
	cursor:pointer;
	
	
	
	
	
}
	/* ※PC画面では非表示だがサイズ変更時の表示遅延を防ぐため現箇所で指定 */


/*======================================
    ボタン内バー
======================================*/

/* ボタン内バー基本 */
#global_menu_button span {
	display: block;
	position: absolute;
	height: 1px;
	width: 50%;
	background: #FFF;
	left: 0;

	/* ▼ transition set */
		/* すべてのプロパティに適用 */
		-webkit-transition: all .35s ease-in-out;
		-moz-transition: all .35s ease-in-out;
		transition: all .35s ease-in-out;
	/* ▲ transition set */
}
#global_menu_button span:nth-child(1) {
    top:12px;
	left:12px;
}
#global_menu_button span:nth-child(2) {
    top:23px;
	left:12px;
}
#global_menu_button span:nth-child(3) {
    top:34px;
	left:12px;
}

/* ボタン内バー 閉じるボタン状態 */
._status_groval_menu_open #global_menu_button span:nth-child(1) {
    top: 23px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
._status_groval_menu_open #global_menu_button span:nth-child(2) {
    width: 0;
    left: 50%;
}
._status_groval_menu_open #global_menu_button span:nth-child(3) {
    top: 23px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}






/******************************************************************

     ナビゲーション内部デザイン

******************************************************************/


/*======================================
    ナビゲーションタイトル
======================================*/

header #menu_title {
	padding:5px 0;
	position:relative;
	width:100%;
	height:50px;
	margin:auto auto;
	background-color:#FFF;
}

header #menu_title #logo {
	position:absolute;
	top:0px;
	left:10px;
	z-index:10000;
}

header #menu_title #logo img {
	width:300px;
	height:auto;
}

/*
header #menu_title #logo{
	transition: .5s;
}

header #menu_title #logo.hide{
	transform: translateX(-25%)translateY(-25%)scale(0.5);
}
*/



/*======================================
    ナビゲーションリスト
======================================*/

#global_menu_content {
	display:flex;
}


#global_menu_content ul {
	width:100%;
	margin:0;
	/*display:none;*//*PC時は非表示*/
	display:flex;
}

#global_menu_content ul:first-of-type {
	min-width:800px;
	margin:0 0 0 0;
}


#global_menu_content ul li {
	list-style:none;
	vertical-align:middle;
	position:relative;
	margin:0 0 0 0;
	padding:0 0 0 0;
	text-align:center;
	width:100%;
}

#global_menu_content ul li > a {
	color:#FFF;
	font-size:1.4rem;
	font-weight:500;
	text-decoration:none;
	white-space:nowrap;
	display:block;
	padding:2.0rem 1.5rem;
	position:relative;
	overflow:hidden;
}


#global_menu_content ul:nth-child(1) li > a:after {
	background:#FFFFFF;
	content:"";
	width: 100%;
	height: 1px;
	position: absolute;
	left: -50px;
	bottom: 10px;
	margin: auto;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .25s ease-out;
}

#global_menu_content ul:nth-child(1) li > a:hover {
	color:#FFF;
}

#global_menu_content ul:nth-child(1) li > a:hover:after {
	left: 0;
	transform: scale(1, 1);	
}



/*

#global_menu_content ul li:before {
	content:"";
	position:absolute;
	top:0;
	left:11px;
	padding:0 14px ;
	color:#FFF;
}


#global_menu_content ul li:after {
	position:absolute;
	content:"";
	top:0;
	right:-15px;
	padding:0;
	width: 0;
	height: 0;
}
*/


#global_menu_content ul li.actives > a {
	position:relative!important;
}
/*
#global_menu_content ul li.actives a:after {
	font-size:14px;
	font-family: 'FontAwesome';
	content: "\f00c";
	position: absolute;
	transform:rotate(0deg);
	color:#F03;
}
*/

#global_menu_content ul li > a:before {
}



#global_menu_content ul li > a:hover:before {
	color:#000;
}


#global_menu_content ul li.actives > a:before {
	font-size:14px;
	font-family: 'FontAwesome';
	content: "\f00c";
	position: absolute;
	transform:rotate(0deg);
	color:#FFF;
	margin:0 0 0 -24px;
}
#global_menu_content ul li.actives > a {
	color:#000;
}



#global_menu_content  ul li.sp {
	display:none;
}



#global_menu_content ul.sp_view {
	display:none;
}




/********************** メニュー内、ログイン・ポイント表示 **********************/ 

#global_menu {
	display:flex;
	align-items:center;
	justify-content:center;
}


#global_menu_content {
	width:100%;
	max-width:1200px;
	margin:auto auto;
	letter-spacing:0.0rem;
}


#global_menu nav.personal_point {
	display:block;
	border:none;
	margin:0 0 0 2.0rem;
}


#global_menu nav ul.personal_point {
	color:#111;
	font-size:1.4rem;
}

#global_menu nav ul.personal_point {
	border:none;
	margin:auto auto;
	display:flex;
	justify-content:flex-end;
	align-items:center;
}

#global_menu nav ul.personal_point li {
	margin:0;
	padding:0.5rem;
	background-color:#FFF;
	white-space:nowrap;
}

#global_menu nav ul.personal_point li span {
	color:#FF4536;
	font-weight:500;
}

#global_menu nav ul.personal_point li img {
	width:18px;
	height:auto;
	vertical-align:middle;
}

@media (min-width: 1081px) and (max-width:1279px) {
#global_menu nav ul.personal_point {
	display:none;
}
}


@media screen and (max-width : 1080px) {
	
#global_menu nav ul.personal_point {
	flex-wrap:wrap;
	padding:0.5rem 0.75rem;
	margin:auto auto;
	background-color:#06C167;
}
	
	
#global_menu nav ul.personal_point li {
	width:100%;
	text-align:right;
	margin:1px;
}

}












/* PCサイズ及び基本値　ここまで */
/**********/
/*====================================================================================================================================================================*/
/**********************************************************************************************************************************************************************/





/**********************************************************************************************************************************************************************/
/*====================================================================================================================================================================


    タブレットサイズ


======================================================================================================================================================================*/

@media (min-width: 768px) and (max-width:1081px) {


#global_menu_content ul li a {
	font-size:1.2rem;
}


#global_menu_content ul:first-of-type {
	min-width:auto;
}




}
/* タブレットサイズ　ここまで */




/*====================================================================================================================================================================*/
/**********************************************************************************************************************************************************************/








/**********************************************************************************************************************************************************************/
/*====================================================================================================================================================================


    スマートフォントサイズ


======================================================================================================================================================================*/

@media screen and (max-width : 767px) {





/******************************************************************

     スマートフォントサイズ　ナビゲーションフレーム

******************************************************************/



#global_menu_bk {
	display:block;
	width:0px;
	height: 100%;

	/* メニュー開閉のためright, widthにtransitionを設定 */
	/* ▼ transition set */
		/* 対象プロパティ */
		-webkit-transition-property: right, width;
		-moz-transition-property: right, width;
		transition-property: right, width;
		/* 動作時間 */
		-webkit-transition-duration: .35s;
		-moz-transition-duration: .35s;
		transition-duration: .35s;
		/* 動作イージング */
		-webkit-transition-timing-function: ease-in-out;
		-moz-transition-timing-function: ease-in-out;
		transition-timing-function: ease-in-out;
	/* ▲ transition set */
}
#global_menu {
	display:block;
	position:fixed;
	top:0;
	right:0px;
	width:0px;
	height: 100%;
	
	/* メニュー領域変更のため対象プロパティにwidthを追加 */
	/* ▼ transition set */
		/* 対象プロパティ */
		-webkit-transition-property: top, right, width;
		-moz-transition-property: top, right, width;
		transition-property: top, right, width;
		/* 動作時間 */
		-webkit-transition-duration: .35s;
		-moz-transition-duration: .35s;
		transition-duration: .35s;
		/* 動作イージング */
		-webkit-transition-timing-function: ease-in-out;
		-moz-transition-timing-function: ease-in-out;
		transition-timing-function: ease-in-out;
	/* ▲ transition set */
}

#global_menu_content {
	padding-top:50px;
	height: 100vh;
	width: 100vw;
	overflow-y:scroll;
}

/* メニュー表示時 */
._status_groval_menu_open #global_menu_bk {
	right:0;
	width:100%;
}

._status_groval_menu_open #global_menu {
	right:0;
	width:100%;
}

._status_groval_menu_open #global_menu_content {
}

/* カラー等調整 */
#global_menu {
	background-color:#AD1922;
	border:none;
}

/******************************************************************

     スマートフォントサイズ　ナビゲーションボタン

******************************************************************/


/*======================================
    ボタン本体
======================================*/


#global_menu_button {
	position:fixed;
	right:0px;
	/* スマートフォンサイズではメニューコンテンツより手前 */
	z-index:1003; /* メニュー基準値＋3 */
	
}

/* メニュー表示時 */
._status_groval_menu_open #global_menu_button {
	right:0px;
}

/* カラー等調整 */
._status_groval_menu_open #global_menu_button {
	background-color:#FFF;
}

._status_groval_menu_open #global_menu_button span {
	background-color:#111;
}




/*↓ absolute調整版*/
/*
#global_menu_button {
	position:absolute;
	top:0;
	right:0px;
	
	z-index:1003; 
	
}

._status_groval_menu_open #global_menu_button {
	right:0px;
}



header.fixed_sp #global_menu_button {
	top:0;
}
*/


/******************************************************************

     スマートフォントサイズ　ナビゲーション内部デザイン

******************************************************************/

#global_menu_content {
	position:relative;
	display:block;
}


header #menu_title {
	position:absolute;
	display:block;
	top:0%;
	left:0%;
	height:75px;
}

header #menu_title #logo {
	top:10px;
}

header #menu_title #logo img {
	width:150px;
	height:auto;
}







#global_menu_content ul:first-of-type {
	/*position:absolute;*/
	width:100%;
	min-width:100%;
	margin:50px auto auto auto;
	flex-wrap:wrap;
	justify-content: flex-start;
	padding:0.5rem;
}


#global_menu_content ul li {
	min-width:50%;
	margin:0;
	padding:0.25rem 0.5rem;
	text-align:left;
}

#global_menu_content ul li:before {
	display:none;
}

#global_menu_content ul li a {
	display:block;
	width:100%;
	color:#FFFFFF;
	text-decoration:none;
	/*font-size:1.6rem;*/
	padding:1.0rem;
	margin:0;
	position:relative;
	/*letter-spacing:0.25rem;*/
	border:1px solid #FFF;
	border-radius:5px;
}

#global_menu_content ul li a:after {
	display:none;
}

#global_menu_content ul li a:before {
	content:"";
	border-top:3px double #FFF;
	padding:0.75rem 0;
}



#global_menu_content ul li.sp {
	display:block;
}






/* 追加 ログインボタン等 タブレット・スマホのみ */

#global_menu_content ul#user_control_sp {
	width:94%;
	padding:2.0rem 1.0rem;
	margin:2.0rem auto;
	border:2px solid #FFF;
	border-radius:6px;
	background-color:#FFF;
}

#global_menu_content ul#user_control_sp li a {
	color:#333;
	padding:1.0rem 2.0rem;
	margin:0 0 0.5rem 0;
	border:1px solid #333;
	border-radius:25px;
	position:relative;
}

#global_menu_content ul#user_control_sp li > a:after {
	content:"\f105";
	font-size:2.5rem;
	font-family: FontAwesome;
	vertical-align:middle;
	position:absolute;
	top:calc( 50% - 23px );
	right:2.0rem;
	color:#AD1922;
	/*color:#FFF;*/
}

/*
#global_menu_content ul#user_control_sp li a.user_mypage {
	border:1px solid #FFCC00;
	background-color:#FFCC00;
	color:#FFF;
}

#global_menu_content ul#user_control_sp li a.user_watchlist {
	border:1px solid #3399CC;
	background-color:#3399CC;
	color:#FFF;
}

#global_menu_content ul#user_control_sp li a.user_login {
	border:1px solid #333333;
	background-color:#333333;
	color:#FFF;
}
*/




#global_menu_content ul.sp_view {
	display:block;
}







#global_menu_content ul#user_control_sp li a div.count {
	border-radius:9999px;
    background-color: #F69;
    color: #FFF;
    text-align: center;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 0 0 0 2px;
	padding:0 2px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}









}


@media screen and (max-height : 481px) {


#global_menu_content {
	overflow-y:auto;
}

#global_menu_content ul li {
}


}


@media screen and (max-width:376px){
#global_menu_content ul li {
	width:auto;
}


#global_menu_content ul li a {
	white-space:normal;
}








/**********************************************************************************************************************************************************************/
/**********************************************************************************************************************************************************************/