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

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

/*---------------------------------------------------
	ヘッダーのスタイル
---------------------------------------------------*/
.l-header{
	padding: 0;
	position: fixed;
	background: #fff;
	z-index: 999;
	width: 100%;
	
	.l-header__header {
		display: flex;
		flex-wrap: none;
		align-items: end;
		margin: 5px 0 12px;
		justify-content: space-between;
	}

	.l-header__logo-wrap{
		width: 80px;
		.l-header__logo{
			display:block;
			width: 70px;
			img {
				width: 100%;
			}
		}
	}
	
	h1{
		display: none;
		color: #FF981F;
		font-weight: bold;
		line-height: 150%;
		font-size: 12px;

	}
	
	.l-header__top-menu{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		height:34px;
		margin-top: 2px;
		
		.l-header__top-item {
			margin-right: 10px;
		}
		.l-header__top-item:last-child {
			margin-right: 0;
		}
		.l-header__top-link {
			font-size: 10px;
			color: #333;
			text-decoration: none;
			padding: 22px 0 0 0;
			height: 20px;
			display: inline-block;
			background-size: auto 20px; 
			background-repeat: no-repeat;
			background-position: top center;
			&.--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/hIcon02.png");}
			&.--cart{background-image: url("../images/common/header-cart.png");}
		}
		.l-header__top-link:hover {
			opacity: .7;
		}
	}

	.l-header__sp-nav {
		display: none;
	}

	.l-header__hamburger {
		position: relative;
		width: 44px; /* 幅を指定する */
	    height: 24px; /* 高さを指定する */
		cursor: pointer;
		z-index: 300;
		transition: all .6s;
		p {
			position: relative;
			text-align: center;
			font-size: 10px;
			padding-top: 23px;
			user-select: none;
		}
		&:hover {
			opacity: 0.7;
		}

		.l-header_hamburger-line {
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			width: 26px;
			height: 2px;
			background-color: #333;
			transition: all .6s;

			&.--line1 { top: 0;}
			&.--line2 { top: 9px;}
			&.--line3 { top: 18px;}
		}
	}

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

	.nav-open .black-bg {
		opacity: .8;
		visibility: visible;
	}

	&.is-hide{
		box-shadow: 0 0 4px 2px rgba(0,0,0,0.1);
		padding: 0;
		.c-gnav{
			display: none;
		}
		h1 {
			display: none;
		}
		.l-header__header {
			margin: 5px 0 15px;
		}
	}
	
	@media (min-width: 381px) {
		.l-header__header{
			align-items: end;
			.l-header__top-item{
				margin-right: 20px;
			}
			.l-header__top-item:last-child {
				margin-right: 0;
			}
		}
	}
	
	@media (min-width: 481px) {
		padding-top:10px;
		.l-header__header{
			align-items: start;
			margin: 10px 0 10px;
		}
		.l-header__logo-wrap{
			width: 170px;
			.l-header__logo{
				width: 150px;
			}
		}
		.l-header__top-menu{
			.l-header__top-link {
				font-size: 11px;
				padding: 26px 0 0 0;
				height: 24px;
				background-size: auto 24px; 
			}
		}
		
		.l-header__hamburger {
			height: 34px; /* 高さを指定する */
			p {
				font-size: 11px;
				padding-top: 26px;
			}
			.l-header_hamburger-line {
				width: 30px;

				&.--line1 { top: 0;}
				&.--line2 { top: 11px;}
				&.--line3 { top: 22px;}
			}
		}
		&.is-hide{
			padding-top:0;
			.l-header__header {
				margin: 15px 0;
			}
		}
	}
	@media (min-width: 751px) {
		.l-header__header{
			align-items: center;
			margin:10px 0 20px;
		}
		.l-header__logo-wrap{
			.l-header__logo{
				width: 100%;
			}
		}
		.l-header__top-menu{
			height:44px;
			margin-top: 4px;
			.l-header__top-item{
				margin-top: 10px;
				margin-right: 30px;
			}
			.l-header__top-link{
				font-size: 14px;
				padding: 0 0 0 26px;
				background-position: 0 0;
				&.--login{
					padding-left:26px;
					span{
						display:inline-block;
					}
				}
				&.--logout{padding-left:28px;}
				&.--cart{padding-left:36px;}
			}
		}
		.l-header__hamburger{
			width:100px;
			 .l-header_hamburger-line{
			 	margin:0;
			 }
			p{
				position: absolute;
				right: 0;
				padding:0;
				font-size: 14px;
			}
		}
	}
	@media (min-width: 981px) {
		.l-header__logo-wrap{
			display: flex;
			width: 400px;
			flex-direction: column-reverse;
			gap: 5px;
			.l-header__logo{
				width: 240px;
				margin-top:0;
			}
		}
		h1{
			display:flex;
		}
		.g-nav > li a {
			font-size: 13px;
		}
	}
}


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

	.l-header__sp-nav{
		display: block;
		position: absolute;
		top: 60px;
		width: 90%;
		padding: 20px;
		left: 0;
		right: 0;
		margin: auto;
		
		height: 85vh;
		background-color: #fff;
		z-index: 200;
		overflow-y: auto;
		box-shadow: rgba(0,0,0,0.2) 0 0 2px 1px;
		border-radius: 10px;
	}
	.l-header__hamburger {
		z-index: 300;
		transition: all .6s;
		
		.l-header_hamburger-line{
			transition: all .6s;
			&.--line1{
				transform: rotate(45deg);
				top: 10px;
			}
			&.--line2{
				opacity: 0;
				width: 0;
			}
			&.--line3{
				transform: rotate(-45deg);
				top: 10px;
			}
		}
	}
	.l-header_black-bg{
		opacity: .8;
		visibility: visible;
	}
	.c-gnav-sp{
		position: relative;
	}
	
	@media (min-width: 481px) {
		.l-header__sp-nav{
			top: 100px;
			width: 90%;
			padding: 30px;
		}
	}
	@media (min-width: 1181px) {
		.l-header__sp-nav{
			width: 1080px;
		}
	}
}


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

.c-gnav {
	display:none;
	border-bottom: 3px solid #FFA32C;
	.c-gnav__list {
		position: relative;
		width: 94%;
		height: 46px;
		max-width: 1200px;
		margin: 0 3%;
		display:flex;
	}
	.c-gnav__item {
		height: 46px;
		line-height: 46px;
		text-align: center;
		width:15%;
		&:hover {
			background: #FFF8EF;
			transition: all .3s;
		}
		.c-gnav__link{
			display: block;
			color: #292929;
			font-size: 12px;
			text-decoration: none;
			transition: all .3s;
			
			&:hover {
				color: #FF981F;
				opacity: 1;
			}
			&.--down::after{
				content: '';
				display: inline-block;
				width: 6px;
				height: 6px;
				margin: 0 0 4px 10px;
				border-right: 1px solid #FFA02B;
				border-bottom: 1px solid #FFA02B;
				transform: rotate(45deg);
			}
		}
		&:nth-child(3),&:nth-child(4){
			width:20%;
		}
		&.--multi{
			position:relative;
		}
		&.--multi:hover .c-gnav-sub{
			top: 46px;
			visibility: visible;
			opacity: 1;
		}

	}
	

	.c-gnav-sub{
		visibility: hidden;
		z-index: 1;
		opacity: 0;
		position: absolute;
		top: 46px;
		width: 150%;
		left: 75%;
		transform: translateX(-50%);
		background: rgba(255,255,255,1);
		display: flex;
		flex-wrap: wrap;
		box-shadow: rgba(0,0,0,0.2) 0px 3px 2px 1px;
		
		.c-gnav-sub__list{
			width: 100%;
			line-height: 140%;
			text-align: left;
		}
		.c-gnav-sub__item:hover{
			background: #FFF8EF;
		}
		.c-gnav-sub__link{
			display: block;
			color: #292929;
			font-size: 13px;
			text-decoration: none;
			transition: all .3s;
			padding: 15px 12px;
			border-bottom: 1px solid #FFF5EA;
			margin: 0 15px;
			&:hover{
				color: #FF981F;
				opacity: 1;
			}
		}

	}
	@media (min-width: 751px) {
		display:flex;
		.c-gnav__item {
			.c-gnav__link{
				font-size: 13px;
			}
		}
	}
	@media (min-width: 951px) {
		.c-gnav__list {
			.c-gnav__item {
				.c-gnav__link,
				.c-gnav-sub__link{
					font-size: 15px;
				}
			}
		}
	}
	@media (min-width: 1181px) {
		.c-gnav__list {
			margin: 0 auto;
			width:100%;
			.c-gnav__item {
				width:100%;
			}
		}
	}
}

/*----------------------------------------
	ハンバーガーナビ
----------------------------------------*/
.c-gnav-sp{
	.c-gnav-sp__title {
		display: block;
		position: relative;
		padding: 12px 0 10px;
		font-size: 14px;
		font-weight: normal;
		cursor: pointer;
		border-bottom: 1px solid #eee;
		
		&: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 #cecece;
			border-right: solid 2px #cecece;
			-webkit-transform: rotate(135deg);
			transform: rotate(135deg);
		}
	}
	
	.is-open:after {
		transform: rotate(-45deg);
		top: 45%;
	}

	.c-gnav-sp-sub{
		display: none;
		.c-gnav-sp-sub__link{
			font-size: 14px;
			display: block;
			padding: 10px 0 10px 20px;
			border-bottom: 1px solid #eee;
			position: relative;
			color: #777;
			transition: none;
			position: relative;
			text-decoration: none;
			line-height:1.2;
			&:hover {
				opacity: 0.7;
			}
			&:after {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -4px;
				transition: all 0.2s ease-in-out;
				display: block;
				width: 6px;
				height: 6px;
				border-top: solid 1px #cecece;
				border-right: solid 1px #cecece;
				transform: rotate(45deg);
			}
			&:hover::after {
				left: .3em;
				border-top: solid 1px #cecece;
				border-right: solid 1px #cecece;   
			}
		}
	}
	@media (min-width: 481px) {
		.c-gnav-sp__list{
			display:flex;
			flex-wrap: wrap;
			gap:5%;
			.c-gnav-sp__item{
				width:47.5%;
				
			}
			.c-gnav-sp__item:nth-child(n+3) .c-gnav-sp__title{
				margin-top: 7.5%
			}
		}
		.c-gnav-sp__title{
			font-size: 16px;
			padding:0 0 0 15px;
			margin-bottom: 10px;
			border-bottom:none;
			&:before {
				content: "●";
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -11px;
				color: #FFA32C;
				font-size: 11px;
				-webkit-text-size-adjust: 100%;
			}
			&:after {
				content:none;
			}
		}
		.c-gnav-sp-sub{
			display: block;
			.c-gnav-sp-sub__item{
				margin-top:10px;
			}
			.c-gnav-sp-sub__link{
				line-height:1.4;
				font-size: 13px;
				border-bottom:none;
				padding: 0 0 0 20px;
				&:hover {
					opacity: inherit;
					color: #FF981F;
					text-decoration: underline;
				}
				&:hover::after {
					border-top: solid 1px #FF981F;
					border-right: solid 1px #FF981F;  
				}
			}
		}
	}
	@media (min-width: 751px) {
		.c-gnav-sp__list{
			.c-gnav-sp__item{
				width:30%;
			}
			.c-gnav-sp__item:nth-child(3) .c-gnav-sp__title{
				margin-top: 0;
			}
			.c-gnav-sp__item:nth-child(3) .c-gnav-sp__title:nth-child(3),
			.c-gnav-sp__item:nth-child(n+4) .c-gnav-sp__title{
				margin-top: 17.5%;
			}
		}
		.c-gnav-sp-sub{
			.c-gnav-sp-sub__item{
				margin-top:5px;
			}
			.c-gnav-sp-sub__link{
				line-height:1.6;
				font-size: 14px;
			}
		}
		
	}
}

/* SNSナビ */
.l-header__sp-nav-sns {
	display: flex;
	gap:20px;
	justify-content: center;
}

.l-header__sp-nav-calendar{
	display:flex;
	flex-wrap:wrap;
	&.u-dc-mt-50{
		margin-top:5% !important;
	}
	.c-calendar-sp-table{
		margin-top:10px;
	}
	table{
		width:100%;
	}

	@media (min-width: 481px) {
		table{
			margin-right: 20px;
			width:230px;
		}
	}
}