@charset "UTF-8";
/* ----- ヘッダーのスタイル ----- */

.l-header{
	padding: 10px 0 0;
	position: fixed;
	top: 0;
	left: 0;
	height: 60px;
	width: 100%;
	z-index: 99;
	background-color: #fff;
	
	a {
		text-decoration: none;
	}
	.l-header__inner-wrap {
		background-color: #fff;
		padding-bottom: 0;
		position: relative;
		z-index: 100;
	}
	.l-header__inner {
		position: relative;
	}
	.l-header__header {
		display: flex;
		justify-content: space-between;
	}
	.l-header__header-h1 {
		display: none;
		font-size: 11px;
		line-height: 140%;
	}
	.l-header__header-free-shipping {
		display: none;
		font-size: 15px;
		background-image: url("../images/common/souryo_icon.png");
		background-position: left center;
		background-repeat: no-repeat;
		padding-left: 33px;
	}

	.l-header__body {
		display: block;
		margin-bottom: 1%;
	}

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

	.l-header__index {
		width: 160px;
		padding-top: 3px;
		img {
			width:92%;
		}
	}

	.l-header__copy {
		display: none;
	}

	.l-header__logo.--sp {
		img {
			width: 86px;
			margin: 0 0 5px;
		}
	}

	.l-header__menu{
		display:flex;
		flex-direction: row;
	}

	.l-header__menu-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		position: absolute;
		right: 50px;
		top: 2px;
	}

	.l-header__menu-item {
		margin-right: 10px;
	}

	.l-header__menu-item:last-child {
		margin-right: 0;
	}

	.l-header__menu-link {
		font-size: 11px;
		color: var(--color-black);
		display:inline-block;
		
		&.--logout{
			background: url("../images/common/header-logout.png") no-repeat top center;
			background-size: auto 22px;
			padding: 24px 0 0 0;
			height: 22px;
		}

		&.--mypage{
			background: url("../images/common/header-mypage.png") no-repeat top center;
			background-size: auto 22px;
			padding: 24px 0 0 0;
			height: 22px;
		}

		&.--login{
			background: url("../images/common/header-mypage.png") no-repeat top center;
			background-size: auto 22px;
			padding: 24px 0 0 0;
			height: 22px;
		}

		&.--member{
			background: url("../images/common/header-mypage.png") no-repeat top center;
			background-size: auto 22px;
			padding: 24px 0 0 0;
			height: 22px;
		}

		&.--cart{
			background: url("../images/common/header-cart.png") no-repeat top center;
			background-size: auto 22px;
			padding: 24px 0 0 0;
			height: 22px;
		}
		&:hover{
			opacity: 0.7;
			text-decoration: none;
		}
	}

	.l-header__menu-link-text{
		display: none;
	}

	.l-header__menu-button{
		display: none;
	}

	.l-header__sample-button {
		color: #553928;
		font-size: 14px;
		background: #f4ede7;
		padding: 10px 18px;
		text-align: center;
		border-radius: 6px;
		text-decoration: none;
		margin-left: 30px;
	}

	/* グローバルナビ用ボタン */
	.l-header__gnav-button {
		position: absolute;
		right: 8px;
		top: 14px;
		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: 26px;
		height: 2px;
		background-color: var(--color-black);
		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: var(--f-size-xxs);
		text-align: center;
		margin-top: 22px;
		user-select:none
	}

	/* Gナビ上スクロールで非表示 */
	&.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;
	    position: relative;
	    z-index: 100;
	}

	@media (min-width: 481px) {
		height: auto;
		.l-header__body {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
		}
		
		.l-header__index {
			width: 210px;
		}

		.l-header__logo.--sp {
			display: none;
		
			img {
				width: auto;
				margin: 0;
			}
		}

		.l-header__menu-list{
			right: 60px;
			top: 16px;
		}

		.l-header__menu-item {
			margin-right: 20px;
		}

		/* グローバルナビ用ボタン */
		.l-header__gnav-button {
		    right: 20px;
			top: 25px;
		}

		.l-header__gnav-button-bar {
			width: 30px;

			&.--bar01 {
				top: 0;
			}

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

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

		.l-header__gnav-button-text {
			margin-top: 26px;
		}
		
		/* Gナビ上スクロールで非表示 */
		&.is-hide .l-header__inner-wrap {
		    padding-bottom: 10px;
		}
		.l-header__header-h1 {
			display: block;
		}
		&.is-hide .l-header__header-h1 {
			display: none;
		}
	}
	
	@media (min-width: 751px) {
		height:122px;
		padding: 20px 0 0;
		
		.l-header__sp-nav{
			display: none;
		}

		.l-header__inner {
			height: 102px;
		}

		.l-header__body {
			margin-bottom: 0;
		}

		.l-header__index {
		  width: auto;
		}

		.l-header__index img {
			width: 250px;
		}

		.l-header__copy {
			display: block;
			margin-right: 5px;
		}

		.l-header__copy img {
			width: 170px;
		}

		.l-header__menu-list{
			position:static;
		}
		
		.l-header__menu-item {
			margin-right: 30px;
		}
		
		.l-header__menu-link {
			font-size: var(--f-size-s);
			&.--logout {
				background: url("../images/common/header-logout.png") no-repeat;
				background-size: auto 24px; 
				padding: 0 0 0 28px;
				height: 24px;
				user-select: none;
			}

			&.--mypage {
				background: url("../images/common/header-mypage.png") no-repeat;
				background-size: auto 24px; 
				padding: 0 0 0 26px;
				height: 24px;
				user-select: none;
			}

			&.--login {
				background: url("../images/common/header-mypage.png") no-repeat;
				background-size: auto 24px; 
				padding: 0 0 0 26px;
				height: 24px;
				user-select: none;
			}

			&.--member {
				background: url("../images/common/header-mypage.png") no-repeat;
				background-size: auto 24px; 
				padding: 0 0 0 26px;
				height: 24px;
				user-select: none;
			}

			&.--cart {
				background: url("../images/common/header-cart.png") no-repeat;
				background-size: auto 24px; 
				padding: 0 0 0 36px;
				height: 24px;
				user-select: none;
			}
		}
		
		.l-header__menu-link-text {
			display: inline-block;
			margin-right:5px;
		}

		.l-header__menu-button{
			display: block;
		}

		/* トグルメニュー非表示 */
		.l-header__sp-nav {
			display: none;
		}
		
		/* Gナビ上スクロールで非表示 */
		&.is-hide{
			height:85px;
			.l-header__inner {
				height: auto;
			}
		}
		.l-header__header-free-shipping {
			display: block;
		}
		&.is-hide .l-header__header-free-shipping {
			display: none;
		}
	}

	@media (min-width: 901px) {
		.l-header__copy {
		
			img {
				width: auto;
			}
		}
	}
}

/* 表示された時用の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: 286px;
		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: 481px) {
		.l-header__gnav-button {
			right: 320px;
		}
	}
}