@charset "UTF-8";


/*=====================================================================
 *  グローバルナビゲーション 
 *  商品一覧画面（category.php）専用のスマホ用メニューの調整
 *   (style.cssからの抜粋   style.cssの後にリンク)
 =====================================================================*/


/*================================================
 *  グローバルナビゲーション
 ================================================*/
/* PC用 */

@media print, screen and (min-width:768px) {   /*(min-width:769px)*/
	nav.gnav:after {
		content: '';
		display: block;
		clear: both;
	}
	nav.gnav {
		display: block !important;
		float: right;
	}

	/* 共通 */
	nav.gnav ul {
		margin: 0;
		padding: 0;
	}
	nav.gnav ul li {
		position: relative;
		line-height: 50px; /*50px*/
		margin: 0;
		padding: 0;
		list-style: none;
	}
	nav.gnav ul li a {
		display: block;
		  /*off状態のメニューの背景色　background:#000*/
		color: #000;  /*off状態のメニューの文字色　#fff*/
		font-size: 15px;
		/*font-weight: bold;*/  /*2019.10.25 削除*/
		text-decoration: none;
		font-family:  sans-serif,"ＭＳ Ｐゴシック","Osaka"; /*2019.10.25追加*/
	}
	nav.gnav ul li:hover > a {
		color: #000; /*on状態のメニューの文字色　#fff*/
		/*background: #333;   background: linear-gradient(transparent 60%, #ffff66 60%);*/
		/*background: #E6E6E6;*/
        background: linear-gradient(transparent 90%, #A40D19 90%); /*#FF3300  メニューONのアンダーライン*/
		
	}

	/* 1段目 */
	nav.gnav > ul > li {
		position: relative;
		width: 75px;  /*off状態のメニュー項目の横幅　120px*/
		float: left;
		margin: 0;
		/*padding: 0;*/
		text-align: center;
		list-style: none;
		line-height: 30px; /*40px メニュー項目とアンダーラインの間隔調整*/
		padding: 40px 0px 0px 0px;  /* padding: 0 0 0 10px;   上余白、、、左余白　ヘッダーロゴ画像の余白調整*/ /*2019.10.25 変更　padding:35px*/
	}
	nav.gnav > ul > li.subnav a {
		padding-right: 20px;
	}
	nav.gnav > ul > li.subnav > a:after {
		position: absolute;
		content: "";
		top: 50%;
		width: 0;
		height: 0;
		margin-top: -2.5px;
		margin-left: 10px;
		border: 5px solid transparent;
		border-top-color: #fff; /* 下階層がある項目につける▼マーク#fff*/
	}

	/* 2段目 */
	nav.gnav ul li ul {
		position: absolute;
		z-index: 3;
		top: 100%;
		left: 0;
		width: 180px;
		margin: 0;
		padding: 0;
	}
	nav.gnav ul li ul li {
		overflow: hidden;
		height: 0;
		color: #fff;
		transition: .2s;
	}
	nav.gnav ul li ul li a {
		padding: 0 15px;
		text-align: left;
		/*background: #E6E6E6;*/
		background-color: rgba( 204, 255, 204, 0.55 );
		font-weight: normal;
	}
	nav.gnav ul li ul li a:hover {
		/*background: #F4EFB5;*/  /*#444*/
		background-color: rgba( 244, 239, 181, 0.55 );
	}
	nav.gnav ul li:hover > ul > li {
		overflow: visible;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #555;
	}
	nav.gnav ul li:hover ul li:last-child {
		border-bottom: none;
	}
	nav.gnav > ul > li:last-child > ul {
		left: -60px;
	}
	nav.gnav ul li ul li ul:before {
		position: absolute;
		content: "";
		top: 17.5px;
		left: -20px;
		width: 0;
		height: 0;
		border: 5px solid transparent;
		border-left-color: #fff;
	}
	nav.gnav > ul > li:last-child ul li ul:before {
		position: absolute;
		content: "";
		top: 17.5px;
		left: 200%;
		margin-left: -20px;
		border: 5px solid transparent;
		border-right-color: #fff;
	}

	/* 3段目 */
	nav.gnav ul li ul li ul {
		top: 0;
		left: 100%;
	}
	nav.gnav ul li ul li ul li {
		width: 100%;
	}
	nav.gnav ul li ul li:hover > ul > li {
		border-bottom: 1px solid #555;
	}
	nav.gnav > ul > li:last-child > ul li ul {
		left: -100%;
	}
	nav.gnav ul li ul li ul li a {
		/*background: #E6E6E6;*/ /*#444*/
		background-color: rgba( 204, 255, 204, 0.55 );
	}
	nav.gnav ul li ul li ul li a:hover {
	    /*background: #F4EFB5;*/ /*#666*/
		background-color: rgba( 244, 239, 181, 0.55 );
	}

	/* 3段目 */
	nav.gnav > ul {
		display: block !important;
	}
	#spMenu {
		display: none;
	}
	
	/* メニュー項目別のサイズ設定スタイル */
	
	nav.gnav > ul > li.menu_style01 {
		width: 74px;
		font-size: 15px;
	}
	nav.gnav > ul > li.menu_style02 {
		width: 72px;
		font-size: 15px;
	}
	nav.gnav > ul > li.menu_style03 {
		width: 73px;
		font-size: 15px;
	}
	nav.gnav > ul > li.menu_style04 {
		width: 135px;
		font-size: 13px;
	}
	nav.gnav > ul > li.menu_style05 {
		width: 90px;
		font-size: 15px;
	}
	
	/*-------------------------------
	nav.gnav > ul > li.menu_style06 {
		width: 90px;
		font-size: 15px;
	}
	nav.gnav > ul > li.menu_style07 {
		width: 90px;
		font-size: 15px;
	}
	nav.gnav > ul > li.menu_style08 {
		width: 90px;
		font-size: 15px;
	}
	-----------------------------------*/
	
	
	
/* 800サイズラップトップ 2019.10.25 */
@media screen and (max-width:800px) {  /*(max-width:768px)*/
	
		/* 1段目 */
	nav.gnav > ul > li {
		position: relative;
		width: 90px;  /*off状態のメニュー項目の横幅　120px*/
		float: left;
		margin: 0;
		/*padding: 0;*/
		text-align: center;
		list-style: none;
		line-height: 20px; /*40px メニュー項目とアンダーラインの間隔調整  →　30px 2019.11.8調整*/
		padding: 0px 0px 0px 0px; /* padding: 0 0 0 10px;   上余白、、、左余白　ヘッダーロゴ画像の余白調整*/
        /*2019.10.25 変更　padding:35px*/
	}

	
	}
	
}

/* タブレット・スマートフォン用 */
@media screen and (max-width:767px) {  /*(max-width:768px) (max-width:767px)*/
	nav.gnav {
		display: none;
	}
	nav.gnav ul {
		margin: 0;
		padding: 0;
	}
	nav.gnav > ul {
		z-index: 2;
		overflow: auto;
		position:relative; /*fixed;*/
		top: 52px; /* 40→50px 20200113*/
		right: 0;
		width: 100%;
		height: 88%;
		height: -webkit-calc(100% - 50px);
		height: calc(100% - 50px);
	}
	nav.gnav li {
		position: relative;
		width: 100%;
		float: none;
		margin: 0;
		text-align: left;
		list-style: none;
		border-bottom: 1px solid #333;
		background: #000;
	}
	nav.gnav li:first-child {
		border-top: 0;
	}
	nav.gnav li:last-child {
		border-bottom: 0;
	}
	nav.gnav li a {
		display: block;
		padding: 10px 20px;
		color: #fff;
		text-decoration: none;
		background: #000;
				z-index:250;
	}
	nav.gnav li a:hover {
		color: #fff;
		background: #222;
	}
	nav.gnav ul ul {
		display: none;
		position: relative;
	}
	nav.gnav li li a {
		box-sizing: border-box;
		width: 100%;
		padding: 10px 30px 10px 34px;
		text-align: left;
	}
	nav.gnav li li li a {
		padding: 10px 20px 10px 48px;
	}

	nav.gnav .subnav > a:before {
		display: block;
		content: "";
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 20px;
		right: 20px;
		width: 10px;
		height: 10px;
		margin-top: -5px;
		background: #f1f1f1;
	}
	nav.gnav .subnav > a:after {
		display: block;
		content: "";
		position: absolute;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		top: 20px;
		right: 20px;
		width: 10px;
		height: 10px;
		margin-top: -10px;
		background: #000;
	}
	nav.gnav .subnav a:hover:after {
		background: #222;
	}
	nav.gnav .subnav.active > a:before {
		margin-top: 0;
	}
	nav.gnav .subnav.active > a:after {
		margin-top: 5px;
	}

	.spMenuWrap {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
		background: transparent;
	}

	#spMenu {
		position: absolute;
		top: 30px;
		right: 10px;
	}

	#spMenu:hover {
		cursor: pointer;
	}

	#navBtn {
		display: inline-block;
		position: relative;
		width: 30px;
		height: 30px;
		border-radius: 5%;
		background: #333;
	}
	#navBtnIcon {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 14px;
		height: 2px;
		margin: -1px 0 0 -7px;
		background: #f1f1f1;
		transition: .2s;
	}
	#navBtnIcon:before,
	#navBtnIcon:after {
		display: block;
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 14px;
		height: 2px;
		background: #f1f1f1;
		transition: 0.3s;
	}
	#navBtnIcon:before {
		margin-top: -6px;
	}
	#navBtnIcon:after {
		margin-top: 4px;
	}
	#navBtn .close {
		background: transparent;
	}
	#navBtn .close:before,
	#navBtn .close:after {
		margin-top: 0;
	}
	#navBtn .close:before {
		-webkit-transform: rotate(-45deg);
				transform: rotate(-45deg);
	}
	#navBtn .close:after {
		-webkit-transform: rotate(-135deg);
				transform: rotate(-135deg);
	}
	
	
	.menu_scrolly1 { /*20211011*/
	    overflow-y: scroll;
	    height: 310px;
	}
	
}


@media screen and (max-width:600px) {/*max-width:568px*/

	#spMenu {
		position: absolute;
		top: 25px;
		right: 10px;
	}

}


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

	#spMenu {
		position: absolute;
		top: 32px;
		right: 10px;
	}

}



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

	#spMenu {
		position: absolute;
		top: 27px;
		right: 10px;
	}


	nav.gnav > ul {
		z-index: 2;
		overflow: auto;
		position:relative; /*fixed;*/
		top: 52px; /*50px→60*/
		right: 0;
		width: 100%;
		height: 88%;
		height: -webkit-calc(100% - 50px);
		height: calc(100% - 50px);
	}

}

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

	#spMenu {
		position: absolute;
		top: 22px;
		right: 10px;
	}



	nav.gnav > ul {
		z-index: 2;
		overflow: auto;
		position:relative; /*fixed;*/
		top: 50px; /*50px→60*/
		right: 0;
		width: 100%;
		height: 88%;
		height: -webkit-calc(100vh - 100px);
		height: calc(100vh - 100px);
	}

}




/*横向きにした時の縦サイズが400以下の画面で、スマホメニューをスクロールさせる*/
@media screen and (orientation: landscape) and (max-height: 400px) and (max-width: 767px){

	nav.gnav > ul {
		z-index: 2;
		overflow: auto;
		position:relative; /*fixed;*/
		top: 52px; /*50px→60*/
		right: 0;
		width: 100%;
		height: 88%;
		height: -webkit-calc(100vh - 120px);
		height: calc(100vh - 120px);
	}

}