@charset "UTF-8";
/* ----- 共通のモジュール（部品）を定義 ----- */

/* ----- ブレイクポイントに関して ----- */
/*	480px以下はスマホ用
	481px以上750px以下はタブレット
	751px以上がPC用 */

/*---------------------------------------------------
	ヘッダーのスタイル
---------------------------------------------------*/
.l-header{
	padding: 10px 0 0;
	
	.l-header__inner {
		position: relative;
	}

	.l-header__header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.l-header__body{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin: min(2vw, 15px) 0 0;
		padding-bottom:20px;
		min-height:70px;
	}

	.l-header__logo{
		img {
			position: absolute;
			top: 30px;
			left: 0;
			width: clamp(30px, 25vw, 100px);
		}
	}
	
	h1{
		color: #333;
		line-height: 140%;
		width: 100%;
		font-size: min(1.83vw, 11px);
	}
	
	.l-header__top-menu{
		position: absolute;
		right: 60px;
		top: 35px;
	}
	.l-header__top-list{
		display: flex;
		align-items: center;
	}
	.l-header__top-item {
		margin-right: 20px;
	}
	.l-header__top-item:last-child {
		margin-right: 0;
	}
	.l-header__top-link {
		font-size: 11px;
		color: #333;
		text-decoration: none;
		background-repeat: no-repeat;
		background-position: top center;
		background-size: auto 24px;
		padding: 26px 0 0;
		display:inline-block;
		height: 24px;
		user-select: none;
		&.--login{
			background-image: url("../images/common/header-mypage.png");
			span{
				display:none;
			}
		}
		&.--logout{background-image: url("../images/common/header-logout.png");}
		&.--mypage{background-image: url("../images/common/header-mypage.png");}
		&.--member{background-image: url("../images/common/header-mypage.png");}
		&.--cart{background-image: url("../images/common/header-cart.png");}
	}
	.l-header__top-link:hover {
		opacity: .7;
	}

	.l-header__bottom-menu{
		display: none;
	}

	/* グローバルナビ用ボタン */
	.l-header__gnav-button {
		position: absolute;
		right: 10px;
		top: 45px;
		width: 44px; /* 幅を指定する */
		height: 34px; /* 高さを指定する */
		cursor: pointer;
		z-index: 300;
		transition: all .6s;
	}

	.l-header__gnav-button-bar {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		width: 30px;
		height: 2px;
		background-color: #333;
		transition: all .6s;
		
		&.--bar01 {
			top: 0;
		}

		&.--bar02 {
			top: 11px;
		}

		&.--bar03 {
			top: 22px;
		}
	}

	.l-header__gnav-sp-bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		background-color: #000;
		opacity: 0;
		visibility: hidden;
		transition: all .6s;
		cursor: pointer;
	}

	.l-header__gnav-button-text {
		font-size: 11px;
		text-align: center;
		margin-top: 26px;
		user-select:none
	}
	
	@media (min-width: 401px) {
		.l-header__logo{
			img {
				top: 25px;
				left: 0;
				width: clamp(30px, 28.9vw, 130px);
			}
		}
	}
	
	@media (min-width: 451px) {
		.l-header__logo{
			img {
				left: 10px;
				width: clamp(150px, 20vw, 240px);
			}
		}
	}

	@media (min-width: 769px) {
		.l-header__logo{
			img {
				position: static;
			}
		}
		h1{
			width: calc(100% - 300px);
			font-size: 11px;
		}
		
		.l-header__top-menu{
			right: 0;
			top: 0;
		}
		.l-header__top-list{
			flex-wrap: wrap;
		}
		.l-header__top-item {
			margin-left: 30px;
			margin-right: 0;
		}
		.l-header__top-link {
			font-size: 14px;
			background-position: left top;
			padding-top: 0;
			height: 24px;
			&.--login{
				span{
					display: inline;
				}
			}
			&.--logout{
				padding-left: 28px;
			}
			&.--login,
			&.--mypage,
			&.--member{
				padding-left: 26px;
			}
			&.--cart{
				padding-left: 36px;
			}
		}
		.l-header__bottom-menu{
			display: block;
		}

		.l-header__bottom-list {
			display: flex;
		}

		.l-header__bottom-item:not(:first-child) {
			margin-left: 10px;
		}

		.l-header__bottom-link {
			color: #391D13;
			font-size: clamp(11px, 1.2vw, 14px);
			padding: 10px 15px 8px;
			background: #F7DD64;
			border-radius: 4px;
			border-bottom: 1px solid #C8943C;
			display: flex;
			align-items: center;
			position: relative;
			text-decoration: none;

			&::before {
				content: "";
				display: inline-block;
				width: clamp(2px, .4vw, 5px);
				height: clamp(2px, .4vw, 5px);
				border-radius: 50%;
				background: #926c2a;
				margin-right: 5px;
			}
			&:hover {
				opacity: .7;
			}
		}
	}
}


/* 表示された時用のCSS */
.is-nav-open {
	position: fixed;
	width: 100%;
	overflow-y: scroll;

	.l-header__sp-nav {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99999;
	}

	.c-gnav-sp {
		right: 0;
	}

	.l-header__gnav-button {
		position: absolute;
		right: 290px;
		z-index: 300;
		color: #fff;
		transition: all .6s;
	}

	.l-header__gnav-sp-bg {
		opacity: .8;
		visibility: visible;
	}

	.l-header__gnav-button-bar {
		background-color: #fff;
		transition: all .6s;

		&.--bar01 {
			transform: rotate(45deg);
			top: 10px;
		}

		&.--bar02 {
			width: 0;
			left: 50%;
		}

		&.--bar03 {
			transform: rotate(-45deg);
			top: 10px;
		}
	}
	@media (min-width: 501px) {
		.l-header__gnav-button {
			right: 320px;
		}
	}
}

/* PCでは非表示 */
@media (min-width: 769px) {
	.l-header__sp-nav {
		display: none;
	}
}


/*---------------------------------------------------
	ヘッダーナビゲーション（グローバルナビ）
---------------------------------------------------*/

.c-gnav {
	display:none;
	background: var(--color-primary);
	border-bottom: 2px solid #991F00;
	
	.c-gnav__list {
		position: relative;
		width: 94%;
		height: 46px;
		max-width: 1080px;
		margin: 0 3%;
		display:flex;
	}
	
	.c-gnav__link,.c-gnav-sub__link {
		transition: none;
	}
	
	.c-gnav__item {
		width: 14.2857%;
		height: 46px;
		text-align: center;
		background: var(--color-primary);
		border-left: 1px solid #D24103;
		
		&:last-child {
			border-right: 1px solid #D24103;
		}
		
		&:hover {
			background: #C50900;
			transition: all .3s;
		}
		
		&.--multi{
			position:relative;
		}
		
		&.--multi:hover .c-gnav-sub{
			top: 46px;
			visibility: visible;
			opacity: 1;
		}
	}
	.c-gnav__link{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 46px;
		color: #fff;
		font-size: 11px;
		text-decoration: none;
		transition: all .3s;
		
		&:hover {
			color: #fff;
			opacity: 1;
		}
	}

	/* ドロップダウンメニュー */
	.c-gnav-sub{
		visibility: hidden;
		z-index: 1;
		opacity: 0;
		position: absolute;
		top: 46px;
		width: 180%;
		background: rgba(0,0,0,0.85);
		display: flex;
		flex-wrap: wrap;
	}
		
	.c-gnav-sub__list,
	.c-gnav-third__list,
	.c-gnav-fourth__list {
		width: 100%;
		line-height: 140%;
		text-align: left;
	}
	
	.c-gnav-sub__item,
	.c-gnav-third__item,
	.c-gnav-fourth__item {
		position: relative;
		border-top: 1px solid rgba(55,55,55,0.85);
		&:hover{
			background: rgba(0,0,0,0.85);
		}
	}
	
	.c-gnav-sub__link,
	.c-gnav-third__link,
	.c-gnav-fourth__link {
		display: block;
		color: #fff;
		text-decoration: none;
		transition: all .3s;
		padding: 8px;
		&:hover{
			color: #fff;
			opacity: 1;
		}
	}
	.c-gnav__link,
	.c-gnav-sub__link,
	.c-gnav-third__link,
	.c-gnav-fourth__link {
		font-size: 11px;
	}

	
	/* 一番後ろの項目の場合 */
	.c-gnav__item.--multi:last-child .c-gnav-sub {
		left: -80%;
	}
	
	/* c-gnav-third-listを表示 */
	.c-gnav-sub__item:hover .c-gnav-third__list {
		visibility: visible;
		opacity: 1;
	}
	
	/* c-gnav-subより下の階層共通以外 */
	.c-gnav-third__list,
	.c-gnav-fourth__list {
		visibility: hidden;
		opacity: 0;
	}
	
	.c-gnav-third__list {
		position: absolute;
		top: -1px;
		left: 100%;
		width: 100%;
		background: rgba(0,0,0,0.8);
	}
	
	.c-gnav-third__link:hover {
		background: rgba(0,0,0,0.8);
	}
	
	.c-gnav-fourth__list {
		position: absolute;
		top: -1px;
		left: 100%;
		width: 100%;
		background: rgba(0,0,0,0.75);
	}

	.c-gnav-third__link:hover .c-gnav-fourth__link{
		visibility: visible;
		opacity: 1;
	}
	
	.c-gnav-fourth__link:hover {
		background: rgba(0,0,0,0.75);
	}

	/* 下矢印 */
	.c-gnav__link {
		position: relative;
		&.--down::after {
			content: '';
			display: none;
			width: 4px;
			height: 4px;
			margin: 0 0 3px 6px;
			border-right: 1px solid #fff;
			border-bottom: 1px solid #fff;
			transform: rotate(45deg);
		}
	}
	
	/* 右矢印 */
	.c-gnav__link.--right {
		position: relative;
		display: block;
		padding: 8px;
	}

	.c-gnav__link.--right:after {
		content: '';
		display: inline-block;
		width: 6px;
		height: 6px;
		top: 15px;
		right: 10px;
		border-right: 1px solid #fff;
		border-top: 1px solid #fff;
		transform: rotate(45deg);
		position:  absolute;
	}
	
	@media (min-width: 751px) {
		display: block;
		margin-top: 20px;
	}
	@media (min-width: 801px) {
		.c-gnav__link,
		.c-gnav-sub__link,
		.c-gnav-third__link,
		.c-gnav-fourth__link {
			font-size: 12px;
		}
	}
	@media (min-width: 901px) {
		.c-gnav__link.--down::after{
			display: inline-block;
		}
	}
	@media (min-width: 1001px) {
		
		.c-gnav__link{
			font-size: 13px;
		}
		.c-gnav-sub{
			width: 140%;
		}
		.c-gnav-sub__link,
		.c-gnav__link.--right,
		.c-gnav-third__link,
		.c-gnav-fourth__link {
			font-size: 12px;
			padding: 10px;
		}
		.c-gnav__item.--multi:last-child .c-gnav-sub {
			left: -40%;
			width: 140%;
		}
		.c-gnav__link.--right::after{
			top: 18px;
		}
		.c-gnav__link.--down::after{
			width: 6px;
			height: 6px;
			margin: 0 0 4px 10px;
		}
	}
	@media (min-width: 1181px) {
		.c-gnav__list {
			width: 100%;
			max-width: 1080px;
			margin: 0 auto;
		}
	}
}

/*----------------------------------------
	ハンバーガーナビ
----------------------------------------*/
.c-gnav-sp{
	position: fixed;
	right: -290px;
	top: 0;
	width: 270px;
	height: 100vh;
	transition: all .6s;
	z-index: 200;
	overflow-y: auto; /* スクロール */
	background: var(--color-primary);
	
	.c-gnav-sp__logo {
		margin: 50px 0;
		text-align: center;
	}

	.c-gnav-sp__logo img {
		width: 200px;
		opacity: .7;
	}
	
	@media (min-width: 501px) {
		right: -320px;
	    width: 300px;
	}
}

/* SPナビアコーディオン */
.c-gnav-sp__container {
	position: relative;
	width: 100%;
	border-top: none;
	outline: 0;
	cursor: pointer;
	color: #fff;
}

.c-gnav-sp__title {
	display: block;
	position: relative;
	font-size: 14px;
	font-weight: normal;
	cursor: pointer;
	border-bottom: 1px solid rgba(255,255,255,0.3);
	line-height:160%;
}

.c-gnav-sp__title:hover {
	background: #e4641e;
}

.c-gnav-sp__title.--accordion{
	padding: 15px 15px 12px;
	&:after {
		content: "";
		position: absolute;
		right: 20px;
		top: 42%;
		transition: all 0.2s ease-in-out;
		display: block;
		width: 8px;
		height: 8px;
		border-top: solid 2px #fff;
		border-right: solid 2px #fff;
		transform: rotate(135deg);
	}
}

.c-gnav-sp__title.is-open:after {
	transform: rotate(-45deg);
	top: 45%;
}

.c-gnav-sp__link {
	color: #fff;
	display: block;
	text-decoration: none;
	padding: 15px 15px 12px;
}

.c-gnav-sp__link:hover {
	opacity: 1 !important;
	background: #e67a3f;
}  

.c-gnav-sp-sub, .c-gnav-sp-third {
	display: none;
}

.c-gnav-sp-sub__list {
	font-size: 14px;
	background: #e4641e;
}

.c-gnav-sp-sub__item, .c-gnav-sp-third__item {
	border-bottom: 1px solid rgba(255,255,255,0.3);
}  

.c-gnav-sp-sub__link {
	color: #fff;
	padding: 15px 30px 12px;
	display: block;
	text-decoration: none;
}

.c-gnav-sp-sub__link:hover {
	opacity: 1;
	background: #ee8f5d;
}


/* c-gnav-sp-subの子供項目 */
.c-gnav-sp-sub .c-gnav-sp__title {
	background: #e4641e;
}

.c-gnav-sp-sub .c-gnav-sp__title:hover {
	background: #e67a3f;
}

.c-gnav-sp-third__link {
	padding: 10px 15px 8px 45px;
	background: #e67a3f;
	color: #fff;
	display: block;
	text-decoration: none;
}

.c-gnav-sp-third__link:hover {
	opacity: 1;
	background: #e67a3f;
}