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

/* ヘッダー

/*=========================================================*/
/* headerの高さ */
:root{
	--header-height: calc(120rem/16);
	--header-height-is-change: calc(72rem/16);
	/* is clamp setting / max 320px min 240px / max-vw 1280px min-vw 320px */
	--header-logo-size: clamp(15rem, 13.333rem + 8.33vw, 20rem);

	--logo-scale: scale(1);
	--logo-scale-is-change: scale(0.85);
}
@media (max-width: 1023px) { /* tablet以下 */
    :root{
		--header-height: calc(80rem/16);
    }
}
@media (max-width: 767px) { /* smartphone以下 */
	:root{
		--header-height: calc(64rem/16);
	}
}
/* コンテナ */
#header{
	width: 100%;
	height: var(--header-height);
	background-color: var(--c-white);

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

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

	z-index: 10;
}
#header__inner{
	width: 100%;
	height: 100%;

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

		animation-duration: 1s;
		animation-timing-function: var(--easeOutCubic);
		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 #headerLogo > a{
		animation-duration: 1s;
		animation-timing-function: var(--easeOutCubic);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"] #headerLogo > a{
		animation-name: logo-shrink;
	}
	#header.is-change[data-is-change="false"] #headerLogo > a{
		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__wrapper{
		animation-duration: 1s;
		animation-timing-function: var(--easeOutCubic);
		animation-fill-mode: forwards;
		z-index: 10;
	}
	#header.is-change[data-is-change="true"] .header-tel__wrapper{
		animation-name: header-tel-off;
	}
	#header.is-change[data-is-change="false"] .header-tel__wrapper{
		animation-name: header-tel-on;
	}
	@keyframes header-tel-off{
		from{
			opacity: 1;
			max-height: var(--txt-2xl);
			margin-top: 5px;
			visibility: visible;
		}
		to{
			opacity: 0;
			max-height: 0;
			margin-top: 0;
			visibility: hidden;
		}
	}
	@keyframes header-tel-on{
		from{
			opacity: 0;
			max-height: 0;
			margin-top: 0;
			visibility: hidden;
		}
		to{
			opacity: 1;
			max-height: var(--txt-2xl);
			margin-top: 5px;
			visibility: visible;
		}
	}
}
/* アンカーページ遷移時のヘッダーずれ対策 */
:target{
	scroll-margin-top: calc(var(--header-height) + 24px);
}
/* ロゴ */
#headerLogo{
	width: calc(var(--header-logo-size) + calc(2 * var(--mp-lr-reg)));
	height: 100%;
	display: flex;
	align-items: center;
	margin-right: auto;
}
#headerLogo > a{
	width: 100%;
	height: 100%;
	padding: 0 var(--mp-lr-reg);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .3s var(--easeOutCubic);
}
#headerLogo > a > img{
	width: 100%;
	height: auto;
}

/* hover設定 */
@media(any-hover:hover){
	#headerLogo > a:hover,
	#headerLogo > a:focus{
		opacity: 0.7;
	}
}



/*----------------*/
/* ナビゲーション */
#header__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	
	height: 100%;
	padding-right: var(--mp-lr-reg);
	margin-left: auto;
}
#nav__wrapper{
	width: auto;
	height: auto;
}
#nav__inner{
	width: auto;
	height: auto;
	margin-left: auto;

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

	box-sizing: border-box;
}
#nav__inner > li{
	width: auto;
	height: auto;
	position: relative;
}
/* ナビの区切り線（PCのみ） */
@media (min-width: 1024px) {
	#nav__inner > li:not(.contact-btn-li)::after {
		content: "";
		display: block;
		width: 1px;
		height: 20px;
		background-color: var(--c-sub);
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
	#nav__inner > li:nth-of-type(5):after{
		content: none;
	}
}

#nav__inner > li > a{
	font-size: var(--txt-reg);
	color: var(--c-bk);

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

	position: relative;
	text-decoration: none;

	transition: color .3s var(--easeOutCubic);
}

/* リンク下のホバー線 */
#nav__inner > li > a::before{
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background-color: var(--c-accent);
	position: absolute;
	bottom: 0;
	left: 0;

	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s var(--easeOutCubic);
}
#nav__inner > li > a.btn-contact::before {
	display: none; /* ボタンには線を引かない */
}

/* hover設定 */
@media(any-hover:hover){
	#nav__inner > li > a:hover::before{
		transform: scaleX(1);
		transform-origin: center;
	}
}
/* お問い合わせボタン */
#nav__inner .btn-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--c-main);
	color: var(--c-white);
	border: solid 2px var(--c-main);

	width: 240px;
	height: 56px;

	border-radius: 40px;
	font-weight: bold;
	transition: background-color 0.3s var(--easeOutCubic), 
	opacity 0.3s var(--easeOutCubic);
}
/* hover設定 */
@media(any-hover:hover){
	#nav__inner .btn-contact:hover,
	#nav__inner .btn-contact:focus							 {
		background-color: var(--c-white);
		color: var(--c-main);
	}
}

/* 電話番号のレイアウト */
.header-tel__wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 15px;
	margin-top: 5px;
	overflow: hidden;
}
/* 受付時間 */
.header-tel-time {
	font-size: var(--txt-reg);
	color: var(--c-bk);
	margin-bottom: 5px;
}
/* 電話番号 */
.header-address {
	font-style: normal;
}
.header-tel_number {
	font-size: var(--txt-xl);
	font-weight: 700;
	color: var(--c-main);
	text-decoration: none;
	line-height: 1;
	display: flex;
	align-items: baseline;
	font-family: 'Lato', sans-serif;
}
.header-tel_number span {
	font-size: var(--txt-lg);
	font-weight: bold;
	color: var(--c-main);
	margin-right: 5px;
}

@media (max-width: 1023px) {
	#nav__inner > li > a::before{
		content: none;
	}
	#nav__inner > li+li > a::before{
		content: none;
	}
	.header-tel__wrapper {
		display: none;
	}
}
/*--------------------------------*/

/* ナビゲーション ドロップダウン*/

/*--------------------------------*/
button.menu-parent{
	color:  var(--c-white);
	font-size: var(--txt-sm);

	width: 100%;
	height: 100%;

	position: relative;
}
button.menu-parent > svg{
	fill: var(--c-white);
	width: 16px;

	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}
/* 下の線 */
button.menu-parent::after{
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background-color: var(--c-accent);

	position: absolute;
	bottom: 0;
	left: 0;

	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s var(--easeOutCubic);
}
nav li.has-child{
	position: relative;

	width: 100%;
	height: 100%;
}
/*下の階層を持っているulの指定*/
nav li.has-child ul{
	position: absolute;
    left: 0;
    top: 100%;
	z-index: 10;

	background-color: var(--c-white);
	width: 100%;

    /*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
    /*アニメーション設定*/
	transition: all .3s ease-in-out;
}
nav li.has-child ul li{
	width: 100%;
	height: calc(40rem/16);
	background-color: var(--c-white);

	display: flex;
	align-items: center;
	z-index: 10;
}
nav li.has-child ul li + li{
	border-top: solid 1px var(--c-gray-light);
}
nav li.has-child ul li > a{
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;

	color: var(--c-bk);
	padding-left: 0.8em;

	transition: background-color .3s ease-in-out,
	color .3s ease-in-out;

	position: relative;
	-webkit-user-drag: none;
}

/* 上の線 */
/* nav li.has-child ul li > a::before{
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background-color: var(--c-main-strong);

	position: absolute;
	top: 0;
	left: 0;

	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s var(--easeOutCubic);
} */
/* 下の線 */
nav li.has-child ul li > a::after{
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background-color: var(--c-accent);

	position: absolute;
	bottom: 0;
	left: 0;

	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s var(--easeOutCubic);
}
/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
	visibility: visible;
	opacity: 1;
	z-index: 10;
}
/* hover */
@media(any-hover:hover){
	/* 下の線 */
	#nav__inner > li > a:hover::after,
	#nav__inner > li > a.focus::after,
	#nav__inner > li > button:hover::after,
	#nav__inner > li > button:focus::after{
		transform: scaleX(1);
		transform-origin: center;
	}
	/* メニュー背景と文字 */
	#nav__inner > li > a:hover,
	#nav__inner > li > a:focus,
	#nav__inner > li > button:hover,
	#nav__inner > li > button:focus{
		color: var(--c-main);
	}
	/* ex link svg */
	#nav__inner > li.ex-link__nav-item > a:hover > svg,
	#nav__inner > li.ex-link__nav-item > a:focus > svg{
		fill: var(--c-white);
	}
	#nav__inner > li > button:hover > svg,
	#nav__inner > li > button:focus > svg{
		fill: var(--c-white)
	}
}



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

/* Tablet 1024px */

/*------------------------------*/
@media (max-width: 1023px) { /* tablet以下 */
	#nav__inner li.is-current > a::before,
	#nav__inner li.is-current > a::after{
		width: 4px;
		height: 100%;
	}
	#nav__inner li.has-child.is-current > button::before,
	#nav__inner li.has-child.is-current > button::after{
		width: 4px;
		height: 100%;
	}
}
/*----------------*/
/* バーガーボタン */
#nav-open-button,
#nav-close-button
{
	display: none;
}



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

/* Tablet 1023px */

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

	opacity: 1;
	transform: none;

	transition:
	opacity .6s var(--easeOutCubic),
	transform .3s var(--easeOutCubic)
	;

    display: flex;
    align-items: center;
    justify-content: center;
}
#nav-close-button{
	width: calc(64rem/16);
	height: calc(64rem/16);
	background-color: var(--c-main-red);
	margin-left: auto;

	color: white;
	text-align: center;

	display: flex;
	align-items: center;
	justify-content: center;
}
#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 .3s var(--easeOutCubic),
	opacity .3s var(--easeOutCubic)
	;
	transition-delay: .3s;
}
/*----------------*/
/* ナビゲーション */
#nav__wrapper,
#nav__inner{
	width: calc(100% - 14vw);
	max-width: calc(400rem / 16);
	height: 100vh;
	min-height: 100vh;
	min-height: var(--height-100vh);
	background-color: var(--c-main);

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

	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;

	z-index: -1;
	overflow-y: auto;
	transition: right .4s var(--easeOutCubic);
	box-sizing: border-box;
}
#nav__inner li{
	flex-shrink: 0;
	width: 100%;

	position: relative;
}
#nav__inner > li > a{
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	padding: calc(32rem/16) 0;
}
#nav__inner > li + li > a::before{
	content: "";
	display: block;
	width: 50%;
	height: 1px;
	background-color: var(--c-white);

	position: absolute;
	top: 0;
	left: 50%;
}
#nav__inner li.contact-btn-li{
	margin-top: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
}
/* お問い合わせボタン */
#nav__inner .btn-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--c-white);
	color: var(--c-main);

	height: 64px;
	max-width: 100%;

	border-radius: 40px;
	font-weight: bold;
	transition: background-color 0.3s var(--easeOutCubic), 
	opacity 0.3s var(--easeOutCubic);
}
/* お問い合わせ番号 */
.header-tel__res-wrapper{
	margin-top: 2em;
	text-align: center;
	color: var(--c-white);

	position: relative;
}
.header-tel__res-wrapper .header-tel-time{
	color: var(--c-white)!important;
}
.header-tel__res-wrapper .header-tel_number{

	justify-content: center;
	color: var(--c-white)!important;
}
.header-tel__res-wrapper .header-tel_number span{
	color: var(--c-white)!important;
}
/* hover */
#nav__inner > li > a.link-hover::before{
	transform: scaleY(1);
	transform-origin: center;
}


/* カバー */
#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 767px */

/*------------------------------*/
@media(max-width:767px){
	#nav__inner > li > a{
		padding: calc(24rem / 16) 0;
	}
}