@charset "UTF-8";

/**************************************************



 * header SP用



 **************************************************/
/* 769px以上はSP用ヘッダーを全て非表示 */
.rst .dnr-header-sp {
	display: block;
}
@media screen and (min-width: 1024px) {
	.rst .dnr-header-sp {
		display: none;
	}
}



/***************************************************





 * 上段 .top-shelf





 **************************************************/
.dnr-header-sp .top-shelf {
	position: relative;
	height: 44px;
	background: #fff;
	z-index: 502;
}
.dnr-header-sp .top-shelf .contents-wrapper {
	position: relative;
	height: 100%;
}
.dnr-header-sp  .top-shelf .contents-wrapper::before {
	content: "";
	position: absolute;
	display: block;
	width: 166.8px;
	height: 82.4px;
	top: 1px;
	left: -57px;
	background: url(../img/common/header_logo_ornament.png) no-repeat;
	background-size: contain;
}
/* ヘッダーロゴ */
.dnr-header-sp .header-logo {
	position: absolute;
	width: 44px;
	top: 8px;
	left: 16px;
}
.dnr-header-sp .header-logo img {
	z-index: 2;
}
/* カートボタン */
.dnr-header-sp .cart {
	position: absolute;
	display: block;
	width: 44px;
	height: 44px;
	padding: 12px 0 0;
	right: 44px;
	text-align: center;
}
.dnr-header-sp .cart img {
	width: 24px;
}



/***************************************************
 * ハンバーガーボタン .sp-menu-btn
 **************************************************/
.sp-menu-btn {
	position: absolute;
	width: 44px;
	height: 44px;
	top: 0px;
	right: 0px;
	cursor: pointer;
	z-index: 10000;
}
.sp-menu-btn span::before,
.sp-menu-btn span::after {
	content: "";
	position: relative;
}
.sp-menu-btn span,
.sp-menu-btn span::before,
.sp-menu-btn span::after {
	display: block;
	width: 24px;
	height: 2px;
	background: #4c9290;
	transition: all ease .5s;
}
.sp-menu-btn span {
	position: relative;
	top: 20px;
	left: 10px;
}
.sp-menu-btn span::before {
	top: -9px;
}
.sp-menu-btn span::after {
	top: 7px;
}
.sp-menu-btn.menu-open span {
	width: 0;
}
.sp-menu-btn.menu-open span::before {
	top: 1px;
	transform: rotateZ(225deg);
}
.sp-menu-btn.menu-open span::after {
	top: -1px;
	transform: rotateZ(-225deg);
}
@media screen and (min-width: 1023px) {
	.sp-menu-btn {
		display: none;
	}
}



/***************************************************
 * スマホメニュー .sp-menu
 **************************************************/
.rst .sp-menu {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 0vh;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, .96);
	z-index: 9999;
	transition: height .5s ease;
}
.sp-menu.menu-open {
	height: 100vh;
}
.sp-menu ul {
	overflow-y: auto;
	height: calc(100vh - 100px);
}
.sp-menu ul li {
	border-top: 1px solid #ccc;
}
.sp-menu ul li:last-child {
	border-bottom: 1px solid #ccc;
}
.sp-menu ul li a {
	position: relative;
	display: block;
	height: 100%;
	padding: 16px 10px;
	color: #231815;
	font-size: 16px;
}
.sp-menu ul li a::after {
	content: "";
	position: absolute;
	display: block;
	width: 7.5px;
	height: 13.5px;
	margin: auto 0;
	top: 0;
	bottom: 0;
	right: 16px;
	background-image: url(../img/top/arrow_right.png);
	background-repeat: no-repeat;
	background-size: contain;
}
/* オープン時、htmlをスクロールさせない */
@media screen and (max-width: 1024px) {
	html.menu-open,
	html.menu-open body {
		overflow: hidden;
	}
}
/* 検索窓 */
.sp-menu .search {
	position: relative;
	margin: 44px 0 24px;
	padding: 0 10px;
}
.sp-menu .search input[type="text"] {
	width: 100%;
	height: 32px;
	padding: 8px 0 8px 16px;
	border: 1px solid #231815;
	border-radius: 16px;
	transition: border .3s ease;
}
.sp-menu .search input:focus {
	border: 1px solid #4c9290;
}
.sp-menu .search .submit {
	position: absolute;
	display: none;
}
.sp-menu .search .submit + label {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 0;
	right: 10px;
	padding: 8px;
	border-radius: 16px;
	cursor: pointer;
	opacity: 1;
	transition: opacity .5s ease;
}
.sp-menu .search .submit + label:hover {
	opacity: .6;
}
/*
 * プレースホルダー
 */
.sp-menu .search input:placeholder-shown {
	color: #999;
	font-size: 16px;
}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
.sp-menu .search input::-webkit-input-placeholder {
	color: #999;
	font-size: 16px;
}
/* Firefox 18- */
.sp-menu .search input:-moz-placeholder {
	color: #999;
	font-size: 16px;
}
/* Firefox 19+ */
.sp-menu .search input::-moz-placeholder {
	color: #999;
	font-size: 16px;
}
/* IE 10+ */
.sp-menu .search input:-ms-input-placeholder {
	color: #999;
	font-size: 16px;
}



/* Google Chrome, Safari, Opera 15+, Android, iOS */
@media screen and (min-width: 1025px) {
	.sp-menu,
	.sp-menu.menu-open {
		display: none;
	}
}



/***************************************************





 * 下段 .second-shelf





 **************************************************/
.dnr-header-sp .second-shelf {
	position: relative;
	width: 100%;
	height: 32px;
	background: #e9eff0;
	z-index: 501;
}

/* カテゴリー展開ボタン */
.rst .dnr-header-sp .category-head {
	position: absolute;
	display: block;
	height: 24px;
	top: 4px;
	right: 10px;
	padding: 4px 24px 4px 8px;
	color: #fff;
	font-weight: bold;
	background: #4c9290;
	cursor: pointer;
}
.dnr-header-sp .category-head span {
	position: absolute;
	display: block;
	width: 9px;
	height: 1px;
	top: 0;
	bottom: 0;
	right: 8px;
	margin: auto 0;
	background: #fff;
	transition: all ease .5s;
}
.dnr-header-sp .category-head span::before {
	content: "";
	position: absolute;
	display: block;
	width: 1px;
	height: 9px;
	top: -4px;
	left: 4px;
	background: #fff;
}
.dnr-header-sp .category-head.category-open {
	background: #231815;
}
.dnr-header-sp .category-head::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 0px;
	left: 0;
	top: 100%;
	background: #231815;
	transition: height .2s ease;
}
.dnr-header-sp .category-head.category-open::after {
	height: 4px;
	background: #231815;
}
.dnr-header-sp .category-head.category-open span {
	transform: rotateZ(225deg);
}
/* カテゴリー展開メニュー */
.dnr-header-sp .sp-category-menu {
	position: absolute;
	overflow-y: auto;
	width: 100%;
	height: 0vh;
	padding-bottom: 0px;
	transition: height .5s ease, padding .5s ease;
	top: 32px;
	font-size: 16px;
	font-family: 'Noto Serif JP', serif;
	background: #231815;
}
.dnr-header-sp .sp-category-menu.category-open {
	height: calc(100vh - 76px);
	padding-bottom: 120px;
}
.dnr-header-sp .sp-category-menu span {
	position: relative;
	display: block;
	padding: 16px 10px;
	color: #fff;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
.dnr-header-sp .sp-category-menu span::after {
	content: "";
	position: absolute;
	display: block;
	width: 13.5px;
	height: 7.5px;
	margin: auto 0;
	top: 0;
	bottom: 0;
	right: 16px;
	background-image: url(../img/top/arrow_down_w.png);
	background-repeat: no-repeat;
	background-size: contain;
	transition: transform .2s ease;
}
.dnr-header-sp .sp-category-menu span.item-open::after {
	transform: scale(1, -1)
}
.dnr-header-sp .sp-category-menu li li {
	border-bottom: 1px solid #ccc;
}
.dnr-header-sp .sp-category-menu a {
	position: relative;
	display: block;
	height: 48px;
	padding: 16px 10px;
	color: #fff;
	background: #4f4644;
}
.dnr-header-sp .sp-category-menu a::after {
	content: "";
	position: absolute;
	display: block;
	width: 7.5px;
	height: 13.5px;
	margin: auto 0;
	top: 0;
	bottom: 0;
	right: 18px;
	background-image: url(../img/top/arrow_right_w.png);
	background-repeat: no-repeat;
	background-size: contain;
}
/* カテゴリー展開メニューの中のメニュー */
.dnr-header-sp .sp-category-menu ul {
	overflow: hidden;
	height: 0px;
	transition: height .5s ease;
}
/* オープン時、htmlをスクロールさせない */
@media screen and (max-width: 1024px) {
	html.category-open,
	html.category-open body {
		overflow: hidden;
	}
}

/* このファイルを読み込んでいるときはPCスタイルを非表示にする(768px以下) */
.rst .dnr-header-pc {
	display: none;
}