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

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

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

	.l-header__header {
		font-size: 11px;
		margin-bottom: 10px;
		line-height: 120%;
		display: none;
	}

	.l-header__body{
		margin-bottom: 3%;
	}

	.l-header__logo{
		.l-header__logo-list{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.l-header__logo-item:first-child {
			display:none;
			margin-right: 30px;
			img {
				width: 230px;
			}
		}
		.l-header__logo-item:nth-child(2) {
			display:none;
		}
		&.--sp{
			width: 80px;
			img {
				width: 86px;
			}
		}
	}
	
	.l-header__top-menu{
		position: absolute;
		right: 50px;
        top: 8px;
	}
	.l-header__top-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.l-header__top-item {
		margin-right: 10px;
	}
	.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__top-link-text{
		display: none;
	}

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

	/* グローバルナビ用ボタン */
	.l-header__gnav-button {
		position: absolute;
		right: 10px;
		top: 22px;
		width: 28px; /* 幅を指定する */
		height: 28px; /* 高さを指定する */
		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: 9px;
		}

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

	.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: 481px) {
		.l-header__header {
			display: block;
		}
		.l-header__body{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
		}
		.l-header__logo{
			.l-header__logo-item:first-child {
				display: block;
			}
			&.--sp{
				display:none;
			}
		}
		.l-header__top-menu{
			right: 60px;
			top: 20px;
		}
		.l-header__top-item {
			margin-right: 20px;
		}
	}

	@media (min-width: 751px) {
		.l-header__body{
			margin-bottom: 0;
		}
		.l-header__logo{
			.l-header__logo-item:nth-child(2) {
				display: block;
			}
		}
		.l-header__top-menu{
			position: static;
		}
		.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__top-link-text{
			display: inline-block;
		}
	}
	@media (min-width: 1081px) {
		.l-header__bottom-menu{
			display: block;
			background: #242525;
			border-top: 1px solid #000;
			color: #fff;
			padding: 10px 0;
			
			p{
				.f20 {
					color: #F9C81E;
					font-weight: bold;
					font-size: 20px;
					line-height: 160%;
				}
				.f11 {
					font-size: 11px;
					line-height: 140%;
				}
			}
		}

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

		.l-header__bottom-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}

		.l-header__bottom-item {
			display: flex;
			align-items: center;
		}

		.l-header__bottom-item:nth-child(1) {
			position: relative;
			padding-left: 10px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-right: 15px;
			&::before {
				content: "";
				background: #F9C81E;
				display: inline-block;
				width: 4px;
				height: 4px;
				border-radius: 2px;
				vertical-align: middle;
				position: absolute;
				left: 0;
			}
			.l-header__bottom-link {
				color: #fff;
				text-decoration: underline;
			}
			.l-header__bottom-link:hover {
				text-decoration: none;
				opacity: 1;
			}
		}

		.l-header__bottom-item:nth-child(2) {
			margin: 0 10px 0 20px;
		}

		.l-header__bottom-item:nth-child(2) a ,
		.l-header__bottom-item:nth-child(3) a {
			color: #242525;
			background: #F9C81E;
			border-radius: 3px;
			display: block;
			padding: 6px 10px;
			text-decoration: none;  
		}

		.l-header__bottom-item:nth-child(2) a:hover ,
		.l-header__bottom-item:nth-child(3) a:hover {
			opacity: .7;
		}

		.l-header__bottom-item:nth-child(2) a p {
			background: url("../images/common/hIcon04.png") no-repeat left center;
			padding-left: 24px;
		}

		.l-header__bottom-item:nth-child(3) a p {
			background: url("../images/common/hIcon05.png") no-repeat left center;
			padding-left: 28px;
		}
	}
}


/* 表示された時用の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);
	
	.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 #A31717;
		
		&:last-child {
			border-right: 1px solid #A31717;
		}
		
		&:hover {
			background: #650E0E;
			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: 10;
		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-fourth-listを表示 */
	.c-gnav-third__item:hover .c-gnav-fourth__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-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;
		height: auto;
		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: 14px;
			font-size: 1.1vw;
		}
		.c-gnav-sub{
			width: 140%;
		}
		.c-gnav-sub__link,
		.c-gnav__link.--right,
		.c-gnav-third__link,
		.c-gnav-fourth__link {
			font-size: 14px;
			font-size: 1.1vw;
			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__link{
			font-size: 14px;
		}
		.c-gnav-sub__link,
		.c-gnav__link.--right,
		.c-gnav-third__link,
		.c-gnav-fourth__link {
			font-size: 12px;
		}
	}
}

/*----------------------------------------
	ハンバーガーナビ
----------------------------------------*/
.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: #cd3334;
}

.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: #cf6364;
}  

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

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

.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;
	
	dl {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 2px;
	}

	dt {
		color: #C71B1D;
		background: #fff;
		font-size: 11px;
		padding: 1px 10px 0;
		border-radius: 4px;
		margin-right: 10px;
		display: inline-block;
	}

	dd {
		display: inline-block;
	}
}

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


/* c-gnav-sp-subの子供項目 */
.c-gnav-sp-sub .c-gnav-sp__title {
	background: #cd3334;
	padding: 15px 30px 12px 30px;
}

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

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

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

/* キーワード検索 */
.c-gnav-sp__search{
	margin: 50px 20px 0;
}

.c-gnav-sp__search form {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}

.c-gnav-sp__search-text:focus {
	outline: 0;
}

.c-gnav-sp__search-text {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px;
	border: 1px solid #fff;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	height: 34px;
}

.c-gnav-sp__search-submit {
	flex: 0 0 36px;
	border: none;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	background: url("../images/common/search.png") no-repeat center center #333;
	background-size: 14px auto;
	height: 34px;
	cursor: pointer;
	outline: 0;  
}

.c-gnav-sp__search-submit:hover {
	opacity: 0.7;
}