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

/* base */

/*=========================================================*/
/*-- font-size-----

	1rem = 16px

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

/* レイアウト  */

/*-----------------------*/
body {
	padding: 0;
	margin: 0;

	font-family: var(--baseFonts);
	font-size: var(--txt-md);
	font-weight: var(--normal);
	line-height: var(--lh-md);
	letter-spacing: 0.05em;
	color: var(--c-main);

	background-color: var(--c-base);

	width:100%;
	height: 100%;
	min-height: 100vh;

    display: flex;
    flex-direction: column;
}
#layout{
	width: 100%;
	flex-grow: 1;
}
/*-----------------------*/
/* コンテンツ//
sectionあるいは直下の要素==>
.content__wrapper
.contentMax
*/
/*-----------------------*/
#content{
	width: 100%;
	margin: 0 auto;
}
.content__wrapper{
	width: 100%;
    margin-top: var(--mp-tb-2xl);
}
.content__fx-wrapper{
	width: var(--fx-width);
	margin-left: auto;
	margin-right: auto;
}



/*=========================================================*/

/* ヘッダー

/*=========================================================*/
/* headerの高さ */
:root{
	--header-height: calc(90rem/16);
	--header-height-is-change: calc(64rem/16);
	/* is clamp setting / max 240px min 160px / max-vw 1280px min-vw 320px */
	--header-logo-size: clamp(10rem, 8.333rem + 8.33vw, 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の高さ */
@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(--easeOutSine);
		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(--easeOutSine);
		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(--easeOutSine);
		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);
}
/* ロゴ */
#header-logo{
	width: calc(var(--header-logo-size--fb) + calc(2 * var(--mp-lr-reg)));
	width: calc(var(--header-logo-size) + calc(2 * var(--mp-lr-reg)));
	height: 100%;
	display: flex;
	align-items: center;
	margin-right: auto;
}
#header-logo > a{
	width: 100%;
	height: 100%;
	padding: 0 var(--mp-lr-reg);
	display: flex;
	align-items: center;
	transition: opacity .4s var(--easeOutSine);
}
#header-logo > a > img{
	width: 100%;
	height: auto;
}
/* hover設定 */
@media(any-hover:hover){
	#header-logo > a:hover,
	#header-logo > a:focus{
		opacity: 0.5;
	}
}



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

/* ナビゲーション */

/*-----------------------*/
/* コンテナ */
#nav__wrapper,
#nav__inner{
	height: 100%;
	display: flex;
	align-items: center;
}
/* ナビアイテム */
#header .nav__item{
	height: 100%;
}
#header .nav__item > a{
	height: 100%;
	padding: 0 2.3em;

	font-size: var(--txt-reg);
	font-family: var(--alphabet);
	letter-spacing: 0.2em;
	color: var(--c-main);

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

	transition: opacity .6s var(--easeOutSine);
}
#header .nav__item:last-of-type{
	background-color: var(--c-main);
	height: 100%;
}
#header .nav__item:last-of-type > a{
	height: 100%;
	width: 240px;
	font-size: var(--txt-reg);
	font-family: var(--alphabet);
	letter-spacing: 0.2em;
	color: var(--c-white);
	background-color: var(--c-main);
	border: solid 1px var(--c-main);

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

	transition: background-color .6s var(--easeOutSine),
	color .4s var(--easeOutSine),
	opacity .4s var(--easeOutSine);
}
/* 区切り線 */
#header .nav__item{
	position: relative;
}
#header .nav__item::before{
	content: "";
	display: block;
	width: 1px;
	height: 40%;
	background-color: var(--c-main);

	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#header .nav__item:last-of-type:before{
	content: none;
}
/* hover設定 */
@media(any-hover:hover){
	.nav__item > a:hover,
	.nav__item > a:focus{
		opacity: 0.4;
	}
	#header .nav__item:last-of-type > a:hover,
	#header .nav__item:last-of-type > a:focus{
		opacity: 1;
		color: var(--c-main);
		background-color: var(--c-white);
	}
}
/* -------------------- */
/* バーガーボタン */
/*----------------------*/
/* オープンボタン */
#nav-open-button{
	width: 64px;
	height: auto;
	align-self: stretch;
	display: none;

	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 7px 0;

	transform-origin: center center;
}
#nav-open-button .nav-open-button__line{
	display: block;
	width: 48%;
	height: 2px;
	background-color: var(--c-main);
	transition: transform .6s var(--easeOutSine);
}
/* クローズボタン */
#nav-close-button{
	width: 64px;
	height: 64px;
	display: none;

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

	transition: opacity .6s var(--easeOutSine);
	transform-origin: center center;
}
.nav-close-button__inner{
	width: 100%;
	height: 100%;
	background-color:  transparent;

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

	position: relative;
}
.nav-close-button__line{
	width: 40%;
	height: 2px;
	border-radius: 1px;
	background-color: var(--c-main);

	position: absolute;
	top: 50%;
	left: 50%;
}
.nav-close-button__line.-top{
	transform: translate(-50%,-50%);
}
.nav-close-button__line.-bottom{
	transform: translate(-50%,-50%);
}

/* 店名と電話番号 */
.header-tel{
	height: var(--header-height);
	width: 240px;
	background-color: rgba(255, 255, 255, .7);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	font-size: var(--txt-md);
	color: var(--c-bk);
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	position: absolute;
	right: 0;
	top: var(--header-height);
}
/* 受付時間 */
.header-tel p{
	line-height: 1.2;
}
/* 電話番号 */
.header-tel_number{
	font-family: "Roboto Slab", serif;
	font-optical-sizing: auto;
	text-decoration: none;
	font-size: var(--txt-lg);
	font-weight: 700;
	font-style: normal;
	color: var(--c-main) !important;
	line-height: var(--lh-sm);
}
.header-tel .header-tel_number > span{
	font-size: var(--txt-md);
}
.header-tel .header-tel_time{
	font-feature-settings: "palt";
	font-size: var(--txt-reg);
	letter-spacing: 0.07em;
	line-height: 1;
}
/* ブログページ遷移ボタン */
/* .header-tel.blog__btn-wrapper{
	width: calc(var(--header-logo-size--fb) + calc(2 * var(--mp-lr-reg)));
	width: calc(var(--header-logo-size) + calc(2 * var(--mp-lr-reg)));
	left: 0;
}
.header-tel.blog__btn-wrapper a{
	width: 100%;
	height: 100%;

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

	color: var(--c-main);

	transition:
	background-color .6s var(--easeOutSine),
	color .6s var(--easeOutSine)
	;
}
.header-tel.blog__btn-wrapper a:hover{
	color: var(--c-white);
	background-color: var(--c-main);
} */
/*-------------------------------*/

/* Tablet iPad Pro */

/*------------------------------*/
@media (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait),
       (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {

	#header .nav__item > a{
		padding: 0 1em;
	}
}



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

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
	/* -------------------- */
	/* バーガーボタン */
	#nav-open-button,
	#nav-close-button{
		display: flex;
	}
	#nav-close-button{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
	}
	/* ナビゲーション コンテナ */
	/* ナビアイテム */
	#nav__wrapper,
	#nav__inner{
		display: none;
		padding: 104px 0;
		width: calc(320rem / 16);
		max-width: calc(100% - 14vw);
		height: 100%;
		min-height: 100vh;

		position: fixed;
		top: 0;
		right: 0;
		z-index: 1;
	}
	#nav__inner{
		overflow: auto;
		background-color: var(--c-white);
	}
	#nav__inner .nav__item{
		width: 100%;
		height: auto;
	}
	#nav__inner .nav__item > a{
		width: 100%;
		padding: calc(24rem/16) min(4vw, calc(64rem/16));
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	#nav__inner .nav__item:last-of-type{
		width: calc(100% - calc(min(4vw, calc(64rem/16))*2));
		height: auto;
		margin: 0 auto;
		margin-top: calc(24rem/16);
	}
	#nav__inner .nav__item:last-of-type > a{
		width: 100%;
		padding: 1.5em min(4vw, calc(64rem/16));

		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 区切り線 削除 */
	#header .nav__item::before{
		content: none;
	}
	/* カバー */
	#nav__wrapper.is-open #nav__cover{
		width: 100%;
		height: 100vh;
		min-height: 100vh;
		min-height: var(--height-100vh);
		background-color: rgba(0, 0, 0, .2);
		backdrop-filter: blur(6px) saturate(110%);
		-webkit-backdrop-filter: blur(6px) saturate(110%);

		position: fixed;
		top: 0;
		left: 0;
		z-index: -9;
		cursor: pointer;
	}
	/* オープン/クローズアニメーション */
	/*------------------*/
	/* オープン */
	/*------------------*/
	body.nav-open{
		overflow: hidden;
	}
	#nav__wrapper.is-open,
	#nav__wrapper.is-open #nav__inner{
		display: block;
	}
	/* ボタン アニメーション */
	body.nav-open #nav-open-button .nav-line-icon.-top{
		transform: rotate(-45deg);
	}
	body.nav-open #nav-open-button .nav-line-icon.-bottom{
		transform: rotate(45deg);
	}
	body.nav-open #nav-open-button .nav-line-icon.-center{
		opacity: 0;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav-close-button__line.-top{
		animation-name: nav-close-icon-top;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav-close-button__line.-bottom{
		animation-name: nav-close-icon-bottom;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes nav-close-icon-top {
		from{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
		to{
			transform: translate(-50%,-50%) rotate(-45deg);
			opacity: 1;
		}
	}
	@keyframes nav-close-icon-bottom {
		from{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
		to{
			transform: translate(-50%,-50%) rotate(45deg);
			opacity: 1;
		}
	}
	/* ナビ アニメーション */
	#nav__wrapper.is-open[aria-hidden="false"] #nav__inner{
		animation-name: navOpen;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes navOpen{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	#nav__wrapper.is-open[aria-hidden="false"] #nav__cover{
		animation-name: coverOpen;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes coverOpen{
		from{
			background-color: rgba(0, 0, 0, 0);
			backdrop-filter: blur(0px) saturate(100%);
			-webkit-backdrop-filter: blur(0px) saturate(100%);
		}
		to{
			background-color: rgba(0, 0, 0, .2);
			backdrop-filter: blur(6px) saturate(110%);
			-webkit-backdrop-filter: blur(6px) saturate(110%);
		}
	}
	/* ナビゲーションリストのアニメーション */
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item{
		animation-name: navItemSlide;
		animation-duration: .6s;
		animation-delay: .4s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: both;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .header-tel{
		animation-name: navItemSlide;
		animation-duration: .6s;
		animation-delay: .4s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: both;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(2){
		animation-delay: .45s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(3){
		animation-delay: .5s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(4){
		animation-delay: .55s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .nav__item:nth-child(5){
		animation-delay: .6s;
	}
	#nav__wrapper.is-open[aria-hidden="false"] .header-tel{
		animation-delay: .65s;
	}
	@keyframes navItemSlide{
		from{
			opacity: 0;
			filter: blur(6px);
			transform: translateX(-10px);
		}
		to{
			opacity: 1;
			filter: blur(0);
			transform: translateX(0);
		}
	}
	/*------------------*/
	/* クローズ */
	/*------------------*/
	/* ボタン アニメーション */
	#nav__wrapper[aria-hidden="true"] .nav-close-button__line.-top{
		animation-name: nav-close-icon-top-is-close;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper[aria-hidden="true"] .nav-close-button__line.-bottom{
		animation-name: nav-close-icon-bottom-is-close;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	#nav__wrapper[aria-hidden="true"] #nav-close-button{
		opacity: 0;
	}
	@keyframes nav-close-icon-top-is-close {
		from{
			transform: translate(-50%,-50%) rotate(-45deg);
		}
		to{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
	}
	@keyframes nav-close-icon-bottom-is-close {
		from{
			transform: translate(-50%,-50%) rotate(45deg);
		}
		to{
			transform: translate(-50%,-50%) rotate(0);
			opacity: 0;
		}
	}
	/* ナビ アニメーション */
	#nav__wrapper[aria-hidden="true"] #nav__inner{
		animation-name: navClose;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes navClose{
		from{
			opacity: 1;
		}
		to{
			opacity: 0;
		}
	}
	#nav__wrapper[aria-hidden="true"] #nav__cover{
		animation-name: coverClose;
		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
	}
	@keyframes coverClose{
		from{
			background-color: rgba(0, 0, 0, .2);
			backdrop-filter: blur(6px) saturate(110%);
			-webkit-backdrop-filter: blur(6px) saturate(110%);
		}
		to{
			background-color: rgba(0, 0, 0, 0);
			backdrop-filter: blur(0px) saturate(100%);
			-webkit-backdrop-filter: blur(0px) saturate(100%);
		}
	}
	/* 電話番号・受付時間 */
	.header-tel{
		position: static;
		margin: 0 auto;
		margin-top: 0.5em;
	}

}
/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	/* バーガーボタン */
	#nav-open-button{
		width: 48px;
		gap: 5px 0;
	}
	#nav-close-button{
		width: 48px;
		height: 48px;
	}
	/* ナビゲーション コンテナ */
	/* ナビアイテム */
	#nav__wrapper,
	#nav__inner{
		padding: 80px 0;
	}
}




/*=========================================================*/

/* フッター

/*=========================================================*/
/* ページトップへ戻る */
#page-top-scroll{
	z-index: 20;
	width: 60px;
	height: 100px;

	position: fixed;
	right: -60px;
	bottom: 20px;

 	transition: transform .6s var(--easeOutSine); /* スピード調整はここ */
}
#page-top-scroll > a{
	width: 100%;
	height: 100%;
	background-color: var(--c-main);
	border: solid 1px var(--c-main);

	font-size: var(--txt-md);
	font-family: "Roboto Slab", serif;
	font-optical-sizing: auto;
	color: var(--c-white);
	letter-spacing: 0.15em;

	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 1em;

	transition:
	background-color .6s var(--easeOutSine),
	color .6s var(--easeOutSine)
	;
	cursor: pointer;

	position: relative;
}
#page-top-scroll > a > svg{
	position: absolute;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);

	height: 24px;
	fill: var(--c-white);

	transition: top .4s var(--easeOutSine);
}
/* ホバー */
#page-top-scroll > a.link-hover{
	background-color: var(--c-white);
	color: var(--c-main);
}
#page-top-scroll > a.link-hover > svg{
	top: 6px;
	fill: var(--c-main);
}
/*-----------------------*/
/* is-change設定 */
/*-----------------------*/
	#footer__wrapper.is-change #page-top-scroll{
		position: fixed;
		right: 0;
		bottom: 20px;

		animation-duration: .6s;
		animation-timing-function: var(--easeOutSine);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#footer__wrapper.is-change[data-is-change="true"] #page-top-scroll{
		animation-name: scroll-show;
	}
	#footer__wrapper.is-change[data-is-change="false"] #page-top-scroll{
		animation-name: scroll-away;
	}
	@keyframes scroll-away{
		from{
			opacity: 1;
		}
		to{
			opacity: 0;
		}
	}
	@keyframes scroll-show{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
/*-------------------------------*/
/* コンテナ */
/*------------------------------*/
#footer__wrapper{
	width: 100%;
	margin-top: var(--mp-tb-2xl);
	padding: 0 var(--mp-lr-reg);
	padding-bottom: var(--mp-tb-reg);
	background-color: var(--c-logo-bk);

	position: relative;
}
/*===========================================*/
/* gridインナー */
#footer__inner{
	height: 100%;
	margin: 0 auto;
	padding-top: var(--mp-tb-xl);

    display: grid;
    grid-template-columns: 1fr calc(200rem/16) 1fr;
    place-content: center;
    grid-template-areas:
    "nm-tel logo sitemap "
    "copy copy copy"
    ;
}
/* 店名と電話番号 */
.footer-tel{
    grid-area: nm-tel;
}
/* ロゴ */
#footerLogo{
    grid-area: logo;
	place-content: center;
}
/* サイトマップ */
.footer__sitemap-wrapper{
    grid-area: sitemap;
}
/* コピーライト */
#bottom-box{
    grid-area: copy;
}
/*===========================================*/
/*-------------------------------*/
/* footer 左側 */
/*-------------------------------*/
/* 店名と電話番号 */
.footer-tel{
	font-size: var(--txt-md);
	color: var(--c-white);
	margin-right: 1em;
	
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
/* 店名 */
.footer-tel h3{
	font-size: var(--txt-xl);
	font-family: "Roboto Slab", serif;
	font-optical-sizing: auto;
	font-weight: var(--bold);
	line-height: var(--line-height-sm);
	color: var(--c-white);
	letter-spacing: 0.1em;
}
.footer-tel h3 > span{
	font-size: var(--txt-lg);
}
/* 受付時間 */
.footer-tel p{
	line-height: 1.2;
}
/* 電話番号 */
.footer-tel .footer-tel_number{
	text-decoration: none;

	font-size: var(--txt-xl);
	font-weight: 700;
	font-style: normal;
	line-height: var(--lh-reg);
	color: var(--c-white);
}
.footer-tel .footer-tel_number > span{
	font-size: var(--txt-md);
}
.footer-tel .footer-tel_time{
	font-feature-settings: "palt";
	font-size: var(--txt-reg);
	letter-spacing: 0.07em;
	line-height: 1;
}
/*-------------------------------*/
/* footer 真ん中 */
/*-------------------------------*/
/* ロゴ */
#footerLogo{
    width: calc(200rem / 16);
    margin: 0 auto;
}
#footerLogo > a
{
	width: 100%;
	transition: opacity .4s ease-in-out;
}
#footerLogo > a > img{
	width: 100%;
	height: auto;
}
#footerLogo a.link-hover{
	opacity: 0.5;
}
/* 住所 */
.place-address__wrapper{
	margin-top: 1em;
	width: 100%;
}
.place-address__wrapper p{
	font-size: var(--txt-reg);
	color: var(--c-white);
	line-height: 1.3;
}
/*-------------------------------*/
/* footer 右側 */
/*-------------------------------*/
/* サイトマップ */
#footer__sitemap{
	width: 100%;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: min(2vw,calc(24rem/16)) 0;
}
#footer__sitemap li{
	margin: 0 var(--mp-lr-xs);
}
#footer__sitemap li:last-of-type{
	margin-right: 0;
}
#footer__sitemap li > a{
	font-family: "Kosugi Maru", sans-serif;
	color: var(--c-white);
	font-size: var(--txt-reg);
}
/* コンタクトボタン */
.contact-square{
	margin-top: 2em;
	width: 100%;

	display: flex;
	justify-content: end;
	align-items: center;
}
.contact-square > a{
	width: 240px;
	height: 56px;
	padding: 20px;
	border: solid 1px var(--c-white);

	font-family: "Kosugi Maru", sans-serif;
	font-size: var(--txt-reg);
	color: var(--c-main);
	background-color: var(--c-white);

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

	transition: 
	color .6s var(--easeOutSine),
	background-color .6s var(--easeOutSine);
}
/* hover */
#footer__inner .contact-square a.link-hover{
	background-color: var(--c-main);
	color: var(--c-white);
}
/* コピーライト */
#bottom-box{
	margin: 0 auto;
	margin-top: var(--mp-tb-xl);
}
#copyright{
	color: var(--c-white);
	font-size: var(--txt-sm);
}
/*-------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
	/*===========================================*/
	/* gridインナー */
	#footer__inner{
		place-content: center;
		grid-template-columns: 1fr;
		grid-template-areas:
		"nm-tel"
		"sitemap"
		"contact"
		"logo"
		"copy"
		;
	}
	/* 店名と電話番号 */
	.footer-tel{
		align-items: center;
		margin-right: 0;
	}
	.place-address__wrapper p{
		text-align: center;
	}
	/* サイトマップ */
	#footer__sitemap{
		border-top: solid 1px var(--c-white);
		border-bottom: solid 1px var(--c-white);
		padding-top: 1em;
		padding-bottom: 1em;
		margin-top: var(--mp-tb-md);
		justify-content: center;
	}
	/* お問い合わせ */
	.contact-square{
		margin-top: var(--mp-tb-md);
		justify-content: center;
	}
	/* ロゴ */
	#footerLogo{
		margin-top: var(--mp-tb-xl);
		grid-area: logo;
		place-content: center;
	}
	/* コピーライト */
	#bottom-box{
		grid-area: copy;
	}
	/*===========================================*/
	/*===========================================*/

}/*Tablet END*/
/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	/* ページトップへ戻る */
	#page-top-scroll{
		width: 48px;
		height: 64px;

		bottom: 1em;
	}
	#page-top-scroll > a{
		letter-spacing: 0.05em;
		padding-bottom: 0.4em;
	}
	#page-top-scroll > a > svg{
		height: 20px;
		top: 6px;
	}

	/* ロゴ */
	#footerLogo{
		width: calc(160rem/16);
	}
	/* サイトマップ */
	.footer__sitemap-wrapper{
		width: 100%;
	}
	#footer__sitemap{
		margin-top: var(--mp-tb-md);
		width: 100%;
		
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	#footer__sitemap li {
		margin: 0;
		width: 100%;
		height: 50px;
	}
	#footer__sitemap li:first-of-type{
		border-top: solid 1px var(--c-gray-light);
	}
	#footer__sitemap li + li{
		border-top: solid 1px var(--c-gray-light);
	}
	#footer__sitemap li:last-of-type{
		border-bottom: solid 1px var(--c-gray-light);
	}
	#footer__sitemap li > a{
		display: block;
		width: 100%;
		height: 100%;

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



/*=========================================================*/

/* PARTS */

/*=========================================================*/
/* コンテナ */
/* ======▼ヒーロー画像▼====== */
#lower-hero{
	padding: 0 15vw;
	width: 100%;
	height: 30vw;	
	min-height: calc(240rem/16);
	max-height: calc(480rem/16);
	background-repeat: no-repeat;
	background-size: cover;

	margin-top: var(--header-height);

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

	position: relative;
}
/*------------------------*/
/* 下層ページのヒーロー画像 */
.terms-mainImg__wrapper{
    background-image: url(../images/terms/hero__terms.jpg);
    background-position: center;
	background-size: cover;
}
.hero-heading{
	display: inline-block;
    word-break: break-word; 
    overflow-wrap: anywhere;
    white-space: normal;

    background: rgba(255,255,255,0.75);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    padding: 1em 1.5em;
    width: auto;
	font-size: var(--txt-xl);

    box-sizing: border-box; /* paddingも含めてwidthを制御 */
    z-index: 2;
}
/* 英字 */
.hero-heading span:first-of-type{
	display: block;
	font-size: var(--txt-xl);
	font-family: "Roboto Slab", serif;
	font-optical-sizing: auto;
	color: var(--c-main-soft);
	line-height: 1;
	letter-spacing: 0.05em;
}
/* 日本語 */
.hero-heading span:nth-of-type(2){
	margin-top: 0.5em;
	display: block;
	font-size: var(--txt-xl);
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	color: var(--c-main);
	line-height: var(--lh-xs);

	width: 100%;

	position: relative;
}
.hero-heading span:nth-of-type(2)::after{
	content: "";
	display: block;
	width: calc(100% - 4.5em);

	height: 1px;
	background-color: var(--c-main-soft);

	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
/*-----------------------*/
/* SVG
/*-----------------------*/
/* ロゴ */
.logo{
	fill: currentColor;
	/* 親要素のcolorを継承する//safariでfillのtransitionが効かない対策 */
}
/* burger */
.burger-icon{
	fill:none;
	stroke: currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-miterlimit:10;
}
.burger-close-icon{
	fill:none;
	stroke: currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-miterlimit:10;
}
/* arrow */
.arrow--style{
	display: block;
	fill: currentColor;
	width: var(--txt-md);
}
/*-----------------------*/
/* 画像
/*-----------------------*/
/* aspect設定 */
.ph-asp{
	width: 100%;
	position: relative;
}
.ph-asp::before{
	content: "";
	display: block;
}
.ph-asp16-9::before{
	padding-top: 56.25%;
}
.ph-asp3-2::before{
	padding-top: 66.666%;
}
.ph-asp4-3::before{
	padding-top: 75%;
}
.ph-asp img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}
/*-----------------------*/
/* パーツ
/*-----------------------*/
/*---------------*/
/* テキスト設定 */
.txt{
	font-size: var(--txt-md);
	line-height: var(--lh-md);
	text-align: justify;
}
/*-----------------------*/
/*headline*/
/*-----------------------*/
.headline{
	font-size: var(--txt-xl);
	font-weight: var(--bold);
	line-height: var(--lh-sm);
	color: var(--c-main);
}
/* 英字 */
.headline span:first-of-type{
	display: block;
	font-size: var(--txt-3xl);
	font-family: "Roboto Slab", serif;
	font-optical-sizing: auto;
	color: var(--c-gray-pale);
	line-height: 1;
	letter-spacing: 0.05em;
}
/* 日本語 */
.headline span:nth-of-type(2){
	margin-top: 2em;
	display: block;
	font-size: var(--txt-xl);
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	color: var(--c-main);
	line-height: var(--lh-xs);

	width: 100%;

	position: relative;
}
.headline span:nth-of-type(2)::after{
	content: "";
	display: block;

	height: 1px;
	background-color: var(--c-main-soft);

	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
/* メガネランドについて */
#home_about .headline span:nth-of-type(2)::after{
	/* 文字数+1em分引く */
	width: calc(100% - 13em);
}
/* 当店のこだわり */
#home_commitment .headline span:first-of-type{
	padding-left: var(--head-match-mp);
}
#home_commitment .headline span:nth-of-type(2){
	padding-left: var(--head-match-mp);
}
#home_commitment .headline span:nth-of-type(2)::after{
	/* 文字数+1em分引く */
	width: calc(100% - 8em - var(--head-match-mp));
}
/* 商品紹介 */
#home_product .headline span:nth-of-type(2)::after{
	/* 文字数+1em分引く */
	width: calc(100% - 5em);
}
/* 店舗案内 */
#shop_overview .headline span:first-of-type{
	padding-left: var(--head-match-mp);
}
#shop_overview .headline span:nth-of-type(2){
	padding-left: var(--head-match-mp);
}
#shop_overview .headline span:nth-of-type(2)::after{
	/* 文字数+1em分引く */
	width: calc(100% - 5em - var(--head-match-mp));
}
/* お問い合わせ */
#contact-form .headline span:first-of-type{
	padding-left: var(--head-match-mp);
}
#contact-form .headline span:nth-of-type(2){
	padding-left: var(--head-match-mp);
}
#contact-form .headline span:nth-of-type(2)::after{
	/* 文字数+1em分引く */
	width: calc(100% - 7em - var(--head-match-mp));
}
/*-----------------------*/
/*subhead*/
/*-----------------------*/
.subhead{
	font-size: var(--txt-lg);
	font-weight: var(--bold);
	line-height: var(--lh-sm);
	color: var(--c-main);

	display: flex;
	flex-direction: column;
}
/* 英字 */
.subhead span:first-of-type{
	font-size: var(--txt-xl);
	font-family: "Roboto Slab", serif;
	font-optical-sizing: auto;
	color: var(--c-main-soft);
	line-height: 1;
	letter-spacing: 0.1em;
}
.subhead span:first-of-type span{
	font-size: var(--txt-reg);
}
/* 日本語 */
.subhead span:nth-of-type(2){
	margin-top: 0.5em;
	font-size: var(--txt-lg);
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 700;
	color: var(--c-main);
	line-height: var(--lh-xs);
}
/* テキストリンク */
.txtLink{
	color: var(--c-link);
	text-decoration: underline;
	transition:
		color .2s ease-in-out,
		text-decoration .2s ease-in-out
	;
}
.txtLink.txtLink-hover{
	color: var(--c-link--hover);
}
/*---------*/
/* button */
a.button{
	width: 100%;
	max-width: 280px;
	height: 48px;
	background-color: var(--c-main);
	border: 1px solid var(--c-main);

	color: white;
	font-size: var(--txt-reg);

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

	position: relative;

	transition:
	color .6s var(--easeInSine),
	background-color .6s  var(--easeInSine)
	;
}
a.button > .scroll-arrow{
	width: 28px;
	fill: var(--c-white);

	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);

	transition: transform .4s var(--easeInSine);
}
a.button > .ex-link{
	width: 20px;
	fill: var(--c-white);

	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);

	transition: fill.4s var(--easeInSine),
	transform .4s var(--easeInSine);
}
/* instagramアイコン */
a.icon-btn{
	margin-top: 2em;
	color: var(--c-white);
	width: 220px;
	position: relative;

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

	transition: color .6s var(--easeOutSine);
}
a.icon-btn > img{
	display: inline-block;
	width: 28px;
	height: auto;

	transition: 
	transform .4s var(--easeOutSine),
	opacity .6s var(--easeOutSine);
}
/* instagramアイコンの線 */
a.icon-btn::after{
	content: "";
	display: block;

	width: 32px;
	height: 1px;
	background-color: var(--c-white);

	position: absolute;
	top: 50%;
	right: calc(28px + 14px);/* アイコン幅b + アイコン幅の半分の余白（ロゴガイドラインに則って） */
	transform-origin: left center;
	transform: translateY(-50%);

	transition: 
	background-color .6s var(--easeOutSine),
	transform .6s var(--easeOutSine);
}

/*------------------------------*/
/*hover設定*/
/*------------------------------*/
a.button.button-hover{
	color: var(--c-main);
	background-color: white;
}
a.button.button-hover > .scroll-arrow{
	fill: var(--c-main);
	transform: translateY(-20%);
}
a.button.button-hover > .ex-link{
	fill: var(--c-main);
	transform: translateY(-70%) translateX(20%);
}
/* instagramアイコン */
a.icon-btn.button-hover{
	color: var(--c-main-soft)
}
a.icon-btn.button-hover img{
	opacity: 0.7;
	transform: scale(0.9);
}
a.icon-btn.button-hover::after{
	animation: line-pulse 1s var(--easeOutSine) infinite;
	background-color: var(--c-white);
}
@keyframes line-pulse{
  0%  { transform:translateY(-50%) scaleX(0); }
  100%{ transform:translateY(-50%) scaleX(1); }
}
/*-------------------------------*/

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){

	/* 当店のこだわり */
	#home_commitment .headline span:first-of-type{
		padding-left: 0;
	}
	#home_commitment .headline span:nth-of-type(2){
		padding-left: 0;
	}
	#home_commitment .headline span:nth-of-type(2)::after{
		/* 文字数+1em分引く */
		width: calc(100% - 8em);
	}
}/*Tablet END*/
/*-------------------------------*/

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	.headline span:nth-of-type(2) {
    	margin-top: 0.5em;
	}
	/* メガネランド原田について 線 */
	#home_about .headline span:nth-of-type(2)::after {
		width: calc(100% - 9em);
	}
}/*Smartphone END*/