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

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

.c-gnav {
	display: none;
	background: #9D7D69;
	transition: all 0.3s ease;
	position: absolute;
	width: 100%;
	.c-gnav__list {
		position: relative;
		width: 94%;
		height: 46px;
		max-width: 1080px;
		margin: 0 auto;
		display: flex;
	}
	.c-gnav__item {
		width: calc(100% / 6);
		height: 46px;
		line-height: 46px;
		text-align: center;
		border-left: 1px solid #846856;
		&:last-child{
			border-right: 1px solid #846856;
		}
		&:hover {
			color: #fff;
			opacity: 1;
			background: #725644;
		}
		a {
			transition: none;
		}
	}
	.c-gnav__link {
		display: block;
		color: #fff;
		font-size: 12px;
	}
	.c-gnav__link:hover {
		opacity: 1;
	}
	
	@media (min-width: 751px) {
		display: block;
	}
	@media (min-width: 1001px) {
		.c-gnav__link {
			font-size: 15px;
		}
	}
	@media screen and (min-width: 1181px) {
		.c-gnav__list {
			width: 100%;
		}
	}
}

.c-gnav-product,
.c-gnav-sub,
.c-gnav-third ,
.c-gnav-fourth {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 1;
}

.c-gnav__item.--multi:hover .c-gnav-product,
.c-gnav__item.--multi:hover .c-gnav-sub{
	visibility: visible;
	opacity: 1;
}
.c-gnav-sub__item.--multi:hover .c-gnav-third{
	visibility: visible;
	opacity: 1;
}

.c-gnav-sub {
	text-align: left;
	top: 46px;
	width: 30%;
	background: rgba(255,255,255,1);
	box-shadow: rgba(0,0,0,0.2) 0px 3px 2px 1px;
}

.c-gnav-third {
	top: -1px;
	left: 100%;
	width: 100%;
	background: var(--color-white);
	box-shadow: rgba(0,0,0,0.2) 0px 3px 2px 1px;
}

.c-gnav-product{
	top: 46px;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255,255,255,1);
	box-shadow: rgba(0,0,0,0.2) 0px 3px 2px 1px;
	
	.c-gnav-product__list{
		padding: 30px;
		display: flex;
		flex-wrap: wrap;
		gap:30px;
	}
	.c-gnav-product__item{
		width: calc((100% - 90px)/4);
		line-height: 140%;
		text-align: center;
		img {
			width: 100%;
			outline: 3px solid #e4e4e4;
			outline-offset: -3px;
			transition: all 0.1s ease 0s;
			border-radius: 15px;
		}
		img:hover {
			outline: 3px solid #9D7D69;
			outline-offset: -5px;
		}
		a {
			color: var(--color-black);
		}
	}
	
	@media (min-width: 901px) {
		.c-gnav-product__list{
			gap: 40px;
		}
		.c-gnav-product__item{
			width: calc((100% - 120px)/4);
		}
	}
}

.c-gnav__link,
.c-gnav-sub__link,
.c-gnav-third__link,
.c-gnav-fourth__link {
	display: block;
	color: #333;
	font-size: 12px;
}

.c-gnav-sub__item,
.c-gnav-third__item,
.c-gnav-fourth__item{
	border-top: 1px solid rgba(237,237,237,.8);
	line-height: 140%;
	position: relative;
}
/*
.c-gnav-sub__item:hover,
.c-gnav-third__item:hover,
.c-gnav-fourth__item:hover{
	background: rgba(114,38,193,0.15);
}
*/
.c-gnav-sub__link,
.c-gnav-third__link,
.c-gnav-fourth__link {
	padding: 13px;
	color: #000;
	font-weight: 400;
	&:hover{
		background: #FCF9F7;
		color: #725644;
	/*	text-decoration: underline;*/
	}
}

/* 下矢印 */
.c-gnav__link.--down:after {
	content: '';
	display: none;
	width: 5px;
	height: 5px;
	margin: 0 0 3px 6px;
	border-right: 1px solid var(--color-white);
	border-bottom: 1px solid var(--color-white);
	transform: rotate(45deg);
}

/* 右矢印 */
.c-gnav-sub__link.--right {
	position: relative;
}
.c-gnav-sub__link.--right:after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	top: 18px;
	right: 10px;
	border-right: 1px solid #666;
	border-top: 1px solid #666;
	transform: rotate(45deg);
	position:  absolute;
}

@media (min-width: 901px) {
	.c-gnav__link.--down:after {
		display: inline-block;
	}
}
@media screen and (min-width: 1001px) {
	.c-gnav-sub__link,
	.c-gnav-third__link,
	.c-gnav-fourth__link {
		font-size: 14px;
	}

	.c-gnav-sub__link.--right :after {
		top: 16px;
	}

	/* 下矢印 */
	.c-gnav__link.--down:after {
		width: 7px;
		height: 7px;
		margin: 0 0 4px 10px;
	}
}

/*----------------------------------------
	Gナビ上スクロールで非表示
----------------------------------------*/

header.is-hide {
	box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
}
.is-hide .c-gnav {
    transform: translateY(-100%);
}
.l-header__inner-wrap {
    background-color: #fff;
    padding-bottom: 15px;
    position: relative;
    z-index: 100;
}
.is-hide .l-header__inner-wrap {
    padding-bottom: 10px;
}
.is-hide .l-header__header {
	display: none;
}

@media screen and (max-width: 480px) {
	.l-header__inner-wrap,
	.is-hide .l-header__inner-wrap {
		padding: 0;
	}
}

/*----------------------------------------
	トグルメニュー
----------------------------------------*/

.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-white);
	padding: 15px 0 0 15px;
}

.c-gnav-sp__logo {
	margin: 50px 0;
	text-align: center;
}

.c-gnav-sp__logo img {
	width: 200px;
	opacity: .7;
}

@media (min-width: 481px) {
	.c-gnav-sp {
	    right: -320px;
	    width: 300px;
	}
}

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

.c-gnav-sp__title {
	display: block;
	position: relative;
	font-size: 14px;
	font-weight: normal;
	cursor: pointer;
	border-bottom: 1px solid #EFECE1;
}
/*
.c-gnav-sp__title:hover {
	background: #5e2b97;
}
*/
.c-gnav-sp__title.--accordion{
	padding: 15px 15px 12px 10px;
	&: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 #9D7D69;
		border-right: solid 2px #9D7D69;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
}

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

.c-gnav-sp__link {
	color: var(--color-primary) !important;
	display: block;
	text-decoration: none;
	padding: 15px 15px 12px 10px;
	&:hover{
		opacity: 0.7; 
	}
}

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

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

.c-gnav-sp-sub__item {
	border-bottom: 1px solid rgba(255,255,255,0.3);
	background: #FAF9F5;
	ul  li{
	    background: #fff;
	}
}  

.c-gnav-sp-sub__link {
	color: var(--color-primary) !important;
    padding: 15px 15px 12px 10px;
	display: block;
}

.c-gnav-sp-sub__link:hover {
	opacity: 0.7;
}