@charset "UTF-8";
/*=========================================================*/

/* ヘッダー

/*=========================================================*/
/* headerの高さ */
:root{
	--header-height: calc(90rem/16);
	--header-height-is-change: calc(64rem/16);
	/* is clamp setting / max 240px min 160px / max-vw 1200px min-vw 320px */
	--header-logo-size: clamp(10rem, 8.182rem + 9.09vw, 15rem);
	--header-logo-size--fb: 200px;

	--logo-scale: scale(1);
	--logo-scale-is-change: scale(0.8);
}
@media(max-width:959px){
    :root{
		--header-height: calc(80rem/16);
        --header-logo-size--fb: 240px;
    }
}
@media(max-width: 559px){
	:root{
		--header-height: calc(64rem/16);
		--header-logo-size--fb: 180px;
	}
}
/* コンテナ */
#header{
	width: 100%;
	height: var(--header-height);
	background-color: var(--c-white);

	display: flex;
	align-items: center;
	justify-content: flex-end;

	position: fixed;
	top: 0;
	left: 0;

	z-index: 10;
}
#header__inner{
	width: 100%;
	height: 100%;
	padding-left: var(--mp-lr-reg);

	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
/*-----------------------------*/
/* ナビアニメーション headerの高さ */
@media(min-width: 960px){
	#header.is-change{
		height: var(--header-height-is-change);
		position: fixed;
		top: 0;
		left: 0;

		animation-duration: 1s;
		animation-timing-function: var(--easeInOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"]{
		animation-name: header-shrink;
	}
	#header.is-change[data-is-change="false"]{
		animation-name: header-expand;
	}
	@keyframes header-shrink{
		from{
			height: var(--header-height);
			
		}
		to{
			height: var(--header-height-is-change);
		}
	}
	@keyframes header-expand{
		from{
			height: var(--header-height-is-change);
		}
		to{
			height: var(--header-height);
		}
	}
	#header.is-change #header-logo{
		animation-duration: 1s;
		animation-timing-function: var(--easeInOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"] #header-logo{
		animation-name: logo-shrink;
	}
	#header.is-change[data-is-change="false"] #header-logo{
		animation-name: logo-expand;
	}
	@keyframes logo-shrink{
		from{
			transform: var(--logo-scale);
		}
		to{
			transform: var(--logo-scale-is-change);
		}
	}
	@keyframes logo-expand{
		from{
			transform: var(--logo-scale-is-change);
		}
		to{
			transform: var(--logo-scale);
		}
	}

	#header.is-change .header-tel{
		position: absolute;
		right: 0;
		top: var(--header-height-is-change);

		animation-duration: 1s;
		animation-timing-function: var(--easeInOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"] .header-tel{
		animation-name: header-tel-shrink;
	}
	#header.is-change[data-is-change="false"] .header-tel{
		animation-name: header-tel-expand;
	}
	@keyframes header-tel-shrink{
		from{
			height: var(--header-height);
			top: var(--header-height);
		}
		to{
			height: var(--header-height-is-change);
			top: var(--header-height-is-change);
		}
	}
	@keyframes header-tel-expand{
		from{
			height: var(--header-height-is-change);
			top: var(--header-height-is-change);
		}
		to{
			height: var(--header-height);
			top: var(--header-height);
		}
	}
}
/* アンカーページ遷移時のヘッダーずれ対策 */
:target{
	scroll-margin-top: calc(var(--header-height) + 24px);
}
/*----------------*/
/* ロゴ */
#headerLogo a{
	white-space: nowrap;
	width: 100%;
	color: var(--c-main);
	font-size: var(--txt-lg);

	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.1em;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: color .2s var(--easeInOutSine);
}
#headerLogo a > span{
	display: inline-block;
	transform: rotate(-6deg); 

	font-size: var(--txt-md);
	line-height: var(--lh-sm);
	color: var(--c-sub);
	letter-spacing: 0;

	font-family: "Caveat", cursive;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;

	margin-top: 0.1em;
	margin-left: 0.2em;
}
/* hover */
#headerLogo a.link-hover{
	color: var(--c-sub);
}

/*----------------*/
/* ナビゲーション */
#nav__wrapper{
	width: calc(100% - calc(180rem/16));
	height: 100%;
}
#nav__inner{
	width: calc(100% - var(--mp-lr-reg));
	height: 100%;
	max-width: calc(800rem / 16);
	margin-left: auto;
	padding-right: var(--mp-lr-reg);

	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
#nav__inner > li{
	width: calc(100%/4);
	height: 100%;

	display: flex;
	align-items: center;
}
#nav__inner > li:nth-of-type(4){
	margin-right: var(--mp-lr-xs);
}
#nav__inner > li.online-shop-item{
	display: flex;
	align-items: center;

	width: calc(320rem/16);
}
#nav__inner > li > a{
	width: 100%;
	height: calc(var(--header-height)*0.5);

	font-size: var(--txt-sm);
	color: var(--c-bk);

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	transition: color .2s var(--easeInOutSine),
	background-color .2s var(--easeInOutSine);
}
#nav__inner > li.online-shop-item > a.button.-online-shop{
	width: 100%;
	height: calc(56rem/16);

	font-size: var(--txt-sm);
	color: var(--c-white);

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	transition: color .2s var(--easeInOutSine),
	background-color .2s var(--easeInOutSine);
}
#nav__inner > li > a::before{
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--c-main);
	position: absolute;
	bottom: 0;
	left: 0;

	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform .2s var(--easeInOutSine);
}
#nav__inner > li.online-shop-item > a.button.-online-shop::before{
	content: none;
}


/* hover */
@media(any-hover:hover){
	/* 下の線 */
	#nav__inner > li > a:hover::before,
	#nav__inner > li > a:focus::before{
		transform: scaleX(1);
		transform-origin: bottom left;
	}
	/* メニュー背景と文字 */
	#nav__inner > li > a:hover,
	#nav__inner > li > a:focus{
		color: var(--c-sub);
	}
	/* オンラインショップボタン */
	#nav__inner > li.online-shop-item > a.button.-online-shop:hover,
	#nav__inner > li.online-shop-item > a.button.-online-shop:focus{
		background-color: var(--c-sub);
		color: var(--c-white);
	}
	#nav__inner > li.online-shop-item > a.button.-online-shop:hover svg,
	#nav__inner > li.online-shop-item > a.button.-online-shop:focus svg{
		fill: var(--c-white);
	}
}
/*----------------*/
/* バーガーボタン */
#nav-open-button,
#nav-close-button
{
	display: none;
}



/*-------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
/*----------------*/
/* バーガーボタン */
#nav-open-button{
	width: calc(64rem/16);
	height: 100%;
	background-color: var(--c-main);
	color: var(--c-white);

	opacity: 1;
	transform: none;

	transition:
	opacity .6s var(--easeInOutSine),
	transform .4s var(--easeInOutSine)
	;

    display: flex;
    align-items: center;
    justify-content: center;
}
#nav-close-button{
	width: calc(80rem/16);
	height: calc(80rem/16);
	margin-left: auto;

	color: var(--c-main);
	text-align: center;

	display: flex;
	align-items: center;
	justify-content: center;

	z-index: 100;
}
#nav-close-button .burger-close-line-top{
	opacity: 0;
	transform: rotate(45deg);
}
#nav-close-button .burger-close-line-bottom{
	opacity: 0;
	transform: rotate(-45deg);
}
#nav-close-button .burger-close-line-top,
#nav-close-button .burger-close-line-bottom{
	transform-origin: center center;
	transition:
	transform .2s var(--easeInOutSine),
	opacity .2s var(--easeInOutSine)
	;
	transition-delay: .3s;
}
/*----------------*/
/* ナビゲーション */
#nav__wrapper,
#nav__inner{
	width: calc(100% - 50vw);
	max-width: calc(480rem / 16);
	height: 100vh;
	min-height: 100vh;
	min-height: var(--height-100vh);
	background-color: var(--c-white);

	position: fixed;
	top: 0;
	right: -100%;
}
#nav__wrapper{
	overflow: hidden;
	transition: right .3s var(--easeInOutSine);
}
#nav__inner{
	padding: calc(80rem/16) 0;

	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;

	z-index: -1;
	overflow-y: auto;
	transition: right .3s var(--easeInOutSine);
}
#nav__inner li{
	flex-shrink: 0;
	width: 100%;
	height: calc(80rem/16);
}
#nav__inner > li > a{
	height: 100%;
	justify-content: flex-start;
	padding-left: var(--mp-lr-reg);
}
#nav__inner > li > a::before{
	width: 4px;
	height: 100%;
	transform: scaleY(0);
	transform-origin: left bottom;
}
#nav__inner > li.online-shop-item{
	width: 100%;
	margin-top: 2em !important;
	margin-left: auto;
	margin-right: auto;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
#nav__inner > li.online-shop-item > a.button.-online-shop{
	padding-left: 0;
	max-width: var(--fx-width);
	height: calc(80rem/16);
}
/* hover */
#nav__inner > li > a.link-hover::before{
	transform: scaleY(1);
	transform-origin: left top;
}

/* カバー */
#nav__cover{
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	min-height: var(--height-100vh);
	background-color: rgba(25, 25, 25, .5);

	position: fixed;
	top: 0;
	left: 0;
	z-index: -9;
	opacity: 0;
	cursor: pointer;
	display: none;
}
/*-----------------------*/
/* スクロールバー
/*-----------------------*/
@media (any-hover:hover){
	/* 表示されるスクロールバーをデザインに合う形にする */
	#nav__inner::-webkit-scrollbar{
		width: 8px;
		height: 8px;
		background-color: transparent;
	}
	/*スクロールバーのレール*/
	#nav__inner::-webkit-scrollbar-track {
		background-color: var(--c-scroll-bar);
		border: none;
		border-radius: 4px;
	}
	/*スクロールバーの動く部分*/
	#nav__inner::-webkit-scrollbar-thumb{
		background-color: var(--c-scroll-bar-body);
		border-radius: 0;
		box-shadow: none;
	}
}/* any-hover */
/*------------------*/
/* オープン */
/*------------------*/
/* オープン/クローズアニメーション */
/* オープン */
body.open #nav-open-button{
	opacity: 0;
	transform: translateX(calc(64rem/16));
}
@media (any-hover:none){
	/* 最新のsafari用 */
	_::-webkit-full-page-media, _:future,
	:root body.open #nav-open-button{
		opacity: 1;
		transform: none;
	}
	/* safari用 */
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		::i-block-chrome, body.open #nav-open-button{
			opacity: 1;
			transform: none;
		}
	}
}
#nav__wrapper.is-open,
#nav__wrapper.is-open #nav__inner
{
	right: 0;
}
#nav__wrapper.is-open #nav__cover{
	display: block;
	opacity: 1;
}
#nav__wrapper.is-open #nav-close-button .burger-close-line-top,
#nav__wrapper.is-open #nav-close-button .burger-close-line-bottom
{
	opacity: 1;
	transform: none;
}
}/*Tablet END*/



/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	/*----------------*/
	/* ナビゲーション */
	#nav__wrapper,
	#nav__inner{
		width: calc(100% - 30vw);
	}
}/*Smartphone END*/