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

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

/*---------------------------------------------------
	ヘッダーのスタイル
---------------------------------------------------*/
.l-header{
	padding: 10px 0 0;
	position: -webkit-sticky;
	/* 
	position: sticky;
	top: 0;
	*/
	background: rgba(255,255,255,.8);
	z-index: 2;
	a {
		text-decoration: none;
	}
	.l-header__inner {
		position: relative;
	}
	.l-header__header {
		font-size: 11px;
		margin-bottom: 5px;
		line-height: 140%;
		display: block;
		padding-right: 0;
		margin-bottom: 10px;
	}

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

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

	.l-header__index {
		display: none;
	}

	.l-header__copy {
		display: none;
	}

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

	.l-header__top-menu{
		position: absolute;
		top: 38px;
		right: 42px;
	}

	.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: var(--color-black);
		display:inline-block;
		
		&.--logout{
			background: url("../images/common/header-logout.png") no-repeat top center;
			background-size: auto 24px; 
			padding: 26px 0 0 0;
			height: 24px;
		}

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

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

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

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

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

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

	.l-header__bottom-list {
		display: flex;
		margin-top: 10px;
	}

	.l-header__bottom-item:first-child {
		margin-right: 10px;
	}

	.l-header__bottom-link {
		color: var(--color-black);
		font-size: var(--f-size-xs);
		padding: 9px 10px 9px 32px;
		background: #FFE73A;
		border-radius: 4px;
		display: block;
		line-height: 110%;
		width: 135px;
		position: relative;
		text-decoration: none;

		&::before {
			position: absolute;
			content: url("../images/common/linkArrow05.png");
			top: 8px;
			left: 10px;
		}
	}

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

	.l-header__gnav-button-bar {
		position: absolute;
		left: 0;
		width: 30px;
		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: 24px;
		user-select:none
	}

	@media (min-width: 481px) {
		.l-header__header {
			margin-bottom: 10px;

			br {
				display: none;
			}
		}

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

		.l-header__index {
			display: block;
			width: 180px;
			margin-right: 20px;
		}

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

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

		.l-header__top-menu{
			top: 28px;
			right: 60px;
		}

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

		/* グローバルナビ用ボタン */
		.l-header__gnav-button {
		    right: 20px;
			top: 36px;
		    width: 34px; /* 幅を指定する */
		    height: 34px; /* 高さを指定する */
		}

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

			&.--bar01 {
				top: 0;
			}

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

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

		.l-header__gnav-button-text {
			margin-top: 28px;
		}
	}

	@media screen and (min-width: 501px) {
		.l-header__header {
			margin-bottom: 15px;
		}
	}

	@media (min-width: 751px) {
		.l-header__header {
			padding-right: calc(260px + 2%);
			br {
				display: block;
			}
		}

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

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

		.l-header__index {
		  width: auto;
		}

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

		.l-header__copy {
			display: block;
		}

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

		.l-header__top-menu{
		  top: 0;
		  right: 0;
		}

		.l-header__top-item {
			margin-right: 30px;
		}

		.l-header__top-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__top-link-text {
			display: inline-block;
		}

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

		/* トグルメニュー非表示 */
		.l-header__sp-nav {
			display: none;
		}
	}

	@media (min-width: 901px) {
		.l-header__header {
			br {
				display: none;
			}
		}

		.l-header__index {
			margin-right: 50px;
		
			img {
				width: 230px;
			}
		}

		.l-header__copy {
		
			img {
				width: auto;
			}
		}

		.l-header__bottom-link {
			font-size: var(--f-size-s);
			padding: 12px 12px 10px 35px;
			width: 145px;

			&::before {
				top: var(--f-size-xxs);
			}
		}
	}
}

/* 表示された時用の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;
		}
	}
}

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

.c-gnav {
  display: none;
  background: rgba(237,237,237,.8);
}

.c-gnav__list {
  position: relative;
  width: 94%;
  height: 46px;
  max-width: 1080px;
  margin: 0 3%;
}

.c-gnav__link,.c-gnav-sub__link {
  transition: none;
}

.c-gnav__list {
  display:flex;
}

.c-gnav__item {
  width: 14.2857%;
  height: 46px;
  line-height: 46px;
  text-align: center;
  border-left: 1px solid #fff;
}

.c-gnav__item:last-child {
   border-right: 1px solid #fff;
}

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

.c-gnav__link:hover {
  color: #333;
  opacity: 1;
}

.c-gnav-sub {
  visibility: hidden;
  z-index: 1;
  opacity: 0;
  text-align: left;
}

.c-gnav-third {
  visibility: hidden;
  opacity: 0;
}

.c-gnav-fourth {
  visibility: hidden;
  opacity: 0;
}

.c-gnav__item:hover {
  background: rgba(136,136,136,.2);
  -webkit-transition: all .3s;
  transition: all .3s;
}

.c-gnav-sub__item,
.c-gnav-third__item,
.c-gnav-fourth__item {
  border-top: 1px solid rgba(255,255,255,.7);
  line-height: 140%;
}

.c-gnav-sub__link,
.c-gnav-third__link,
.c-gnav-fourth__link {
  font-size: 11px;
  padding: 8px;
  color: #fff;
}

.c-gnav-sub__link:hover,
.c-gnav-third__link:hover,
.c-gnav-fourth__link:hover {
  font-size: 12px;
  padding: 10px;
  color: #A6A6A6;
}

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

.c-gnav__item.--multi {
  position: relative;
}

.c-gnav-sub {
  position: absolute;
  top: 46px;
  width: 180%;
  background: rgba(33,31,39,0.8);
}

.c-gnav__item.--multi:last-child .c-gnav-sub {
  position: absolute;
  top: 46px;
  left: -80%;
  width: 180%;
  background: rgba(33,31,39,0.8);
}

.c-gnav__item.--multi:hover .c-gnav-sub {
  top: 46px;
  visibility: visible;
  opacity: 1;
}

.c-gnav-sub__item {
  position: relative;
}

.c-gnav-sub__item:hover {
  background: rgba(33,31,39,0.2);
}

.c-gnav-third {
  position: absolute;
  top: -1px;
  left: 100%;
  width: 100%;
  background: rgba(0,0,0,0.8);
}

.c-gnav-sub__item:hover .c-gnav-third-list {
  visibility: visible;
  opacity: 1;
}

.c-gnav-third-item {
  position: relative;
}

.c-gnav-third-item:hover {
  background: rgba(0,0,0,0.8);
}

.c-gnav-fourth {
  position: absolute;
  top: -1px;
  left: 100%;
  width: 100%;
  background: rgba(0,0,0,0.75);
}

/* 右矢印 */
.c-gnav__link.--right {
  position: relative;
}

.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;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position:  absolute;
}

@media (min-width: 751px) {
	.c-gnav{
		display: block;
		margin-top: 20px;
	}
}

@media screen and (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 screen and (min-width: 1001px) {
  .c-gnav__link,
  .c-gnav-sub__link,
  .c-gnav-third__link,
  .c-gnav-fourth__link {
    font-size: 13px;
  }

  .c-gnav-sub__link,
  .c-gnav-third__link,
  .c-gnav-fourth__link {
    font-size: 12px;
    padding: 10px;
  }

  .c-gnav-sub {
    width: 140%;
  }

  .c-gnav__item.--multi:last-child .c-gnav-sub {
    left: -40%;
    width: 140%;
  }
  
  .--right:after {
      top: 18px;
  }
  
  /* 下矢印 */
  .c-gnav__link.--down:after {
    content: '';
    width: 6px;
    height: 6px;
    margin: 0 0 4px 10px;
  }
}

@media (min-width: 1081px) {
  .c-gnav__list {
    width: 100%;
    height: 46px;
    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: #5d4e41;
}

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

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

.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;
		-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: #fff;
	display: block;
	text-decoration: none;
	padding: 15px 15px 12px;
}

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

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

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

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

.c-gnav-sp-sub__link {
	color: #fff;
	padding: 10px 15px 8px 30px;
	display: block;
}

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