/* CSS Document */

.site {
	overflow: hidden;
}

/*投稿ページの設定*/
.entry-header {
	height: auto !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	position: relative !important;
	z-index: 0 !important;
}

#primary {
	width: 100% !important;
}

#secondary {
	display: none !important;
}

/*
.wp-block-group__inner-container{display: flex;align-items: center;}*/
/*投稿ページここまで*/

.span-inline {
	display: inline-block;
}

.pc {}

.sp {
	display: none !important;
}

@media(max-width:970px) {
	.pc {
		display: none !important;
	}

	.sp {
		display: block !important;
	}
}

.mada {
	opacity: 0.5;
}

/*全体共通スタイル*/
/*.fs16{font-size:clamp(12.5px,0.8333vw,0.8333vw);}
.fs18{font-size:clamp(12.5px,0.9375vw,0.9375vw);}
.fs20{font-size:clamp(12.5px,1.0417vw,1.0417vw);}
.fs23{font-size:clamp(13.5px,1.1979vw,1.1979vw);}
.fs24{font-size:clamp(13.5px,1.2500vw,1.2500vw);}
.fs25{font-size:clamp(13.5px,1.3021vw,1.3021vw);}
.fs28{font-size:clamp(13.5px,1.4583vw,1.4583vw);}
.fs30{font-size:clamp(13.5px,1.5625vw,1.5625vw);}
.fs31{font-size:clamp(13.5px,1.6vw,1.6vw);}
.fs35{font-size:clamp(13.5px,1.7vw,1.7vw);}
.fs37{font-size:clamp(13.5px,1.8vw,1.8vw);}
.fs40{font-size:clamp(13.5px,2vw,2vw);}
.fs45{font-size:clamp(13.5px,2.5vw,2.5vw);}
.fs47{font-size:clamp(13.5px,2.75vw,2.75vw);}
.fs50{font-size:clamp(13.5px,3vw,3vw);}
.fs56{font-size:clamp(13.5px,3vw,3vw);}*/
.fs16 {
	font-size: 0.8333vw;
}

.fs18 {
	font-size: 0.9375vw;
}

.fs20 {
	font-size: 1.0417vw;
}

.fs23 {
	font-size: 1.1979vw;
}

.fs24 {
	font-size: 1.2500vw;
}

.fs25 {
	font-size: 1.3021vw;
}

.fs28 {
	font-size: 1.4583vw;
}

.fs30 {
	font-size: 1.5625vw;
}

.fs31 {
	font-size: 1.6vw;
}

.fs35 {
	font-size: 1.7vw;
}

.fs37 {
	font-size: 1.8vw;
}

.fs40 {
	font-size: 2vw;
}

.fs45 {
	font-size: 2.5vw;
}

.fs47 {
	font-size: 2.75vw;
}

.fs50 {
	font-size: 3vw;
}

.fs56 {
	font-size: 3vw;
}

@media(max-width:970px) {
	.fs16 {
		font-size: 3vw;
	}

	.fs18 {
		font-size: 3vw;
	}

	.fs20 {
		font-size: 3vw;
	}

	.fs23 {
		font-size: clamp(14px, 3.5vw, 3.5vw);
	}

	.fs24 {
		font-size: clamp(14px, 4vw, 4vw);
	}

	.fs25 {
		font-size: clamp(14px, 4vw, 4vw);
	}

	.fs28 {
		font-size: clamp(14px, 4.5vw, 4.5vw);
	}

	.fs30 {
		font-size: clamp(14px, 5vw, 5vw);
	}

	.fs31 {
		font-size: clamp(14px, 5vw, 5vw);
	}

	.fs35 {
		font-size: 5.5vw;
	}

	.fs37 {
		font-size: 7vw;
	}

	.fs40 {
		font-size: 8vw;
	}

	.fs45 {
		font-size: 9vw;
	}

	.fs47 {
		font-size: 9.5vw;
	}

	.fs50 {
		font-size: 10vw;
	}

	.fs56 {
		font-size: 11vw;
	}
}

#first-view-region {
	width: 100%;
	aspect-ratio: 2 / 1;
	/*margin-top: -12vh;*/
	background-size: 100% 100%;
}

.kazari::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 1.8em;
	background-color: #AFAFAF;
	position: absolute;
	top: -0.9em;
	left: 50%;
	z-index: 2;
}

/*h2{margin:auto;}*/

@media(max-width:970px) {
	#first-view-region {
		margin-top: 0;
	}

	.kazari::before {
		height: 2.6em;
		top: -1.3em;
	}
}

.bold {
	font-weight: bold;
}

.fit-content {
	width: fit-content;
}

html {
	margin: 0 !important;
	padding: 0 !important;
	width: 100vw !important;
}

header {
	width: 100vw !important;
}

@media(max-width:970px) {
	header {
		height: 76px;
	}
}

body {
	overflow: hidden auto;
}

body,
h1,
h2,
h3,
h4 {
	color: rgb(56, 76, 82);
	/*color: #384C52;*/
	font-family: "源ノ明朝", "Source Han Serif JP", "Noto Serif CJK JP", "游明朝体", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	position: relative;
	height: max-content;
	font-weight: 500;
}

.ne {
	font-family: "Zen Old Mincho", "源ノ明朝", serif !important;
}

footer .ne {
	font-weight: bold;
}

img {
	width: 100%;
}

/*footer{height:100vh;}*/
span {
	display: inline-block;
}

@media(min-width:971px) {

	#header-section,
	.page-header {
		display: none !important;
	}

	header {
		display: block !important;
	}
}

.page-header {
	display: none;
}

a {
	text-decoration: none !important;
	color: rgb(56, 76, 82);
}

a:hover {
	opacity: 0.6;
	text-decoration: none !important;
}

/*ヘッダースタイルここから************************/
header {
	width: 100%;
	padding-top: 1%;
	padding-bottom: 1%;
	position: sticky;
	top: 0;
	z-index: 9999;
	background-color: white;
	height: 11.5dvh;
}

header a {
	color: rgb(56, 76, 82);
	text-decoration: none;
	font-size: clamp(13.5px, 0.8333vw, 0.8333vw);
	white-space: nowrap;
}

header a:hover {
	opacity: 0.6;
	text-decoration: none;
}

#header-content-region {
	/* width:76%; */
	width: 90%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 8px;
}

#header-box {
	width: 100%;
	background-color: rgb(56, 76, 82);
	padding: 7% 5%;
	color: rgb(255, 255, 255);
	letter-spacing: -0.05vw;
	text-align: center;
	white-space: normal;
}

#header-shop-region {
	width: 13%;
	max-width: 192px;
}

/*メインコンテンツここから************************/

/*スプラッシュスクリーン************************/
.splash-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(40, 53, 44);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(13.5px, 1.5625vw, 1.5625vw);
	color: white;
	z-index: 9999;
	flex-direction: column;
	/* 縦方向に配置 */
	text-align: center;
	/* 中央に配置 */
}

#splash-text {
	margin-bottom: 2%;
}

#splash-image {
	margin-top: 2%;
	width: 30%;
}

@media (max-width: 970px) {
	#splash-text {
		/*font-size: 1.2em;*/
		font-size: 1.56em;
	}

	.splash-screen {
		/*font-size: clamp(14px,5vw,5vw);*/
	}

	#splash-image {
		/*width:60%;*/
		width: 84%;
	}
}

.hidden {
	opacity: 0;
}

.fade-in {
	opacity: 1;
	transition: opacity 1s ease-in-out;
	/* 1秒間でフェードイン */
}

.fade-out {
	animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
	to {
		opacity: 0;
	}
}

/*１スクロールで画面ごと移動************************/
.box {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: auto;
	aspect-ratio: 16/9;
	width: 100%;
}

@media(max-width:970px) {
	.box {
		height: 100vh;
		aspect-ratio: auto;
		width: 100%;
	}

	#box1 {
		height: 88vh !important;
	}
}

/* スクロールバーを非表示にするクラス */
.no-scrollbar {
	overflow: hidden;
}

/*流れるテキスト************************/
.slide-in {
	overflow: hidden;
	display: inline-block;
}

.slide-in_inner {
	display: inline-block;
}

/* 上下のアニメーション */
.textslideAnime {
	opacity: 0;
	/* 事前に透過0にして消しておく */
	white-space: nowrap;
	/* テキストが折り返されないようにする */
	writing-mode: vertical-rl;
	/* テキストを縦書きにする */
	text-align: left;
}

.textslideAnime-l,
.textslideAnime-r {
	opacity: 0;
	transition: transform 2s ease;
	/* アニメーションの設定 */
}

.slideAnimeTopBottom {
	animation-name: slideTextY100;
	animation-duration: 2.0s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes slideTextY100 {
	from {
		transform: translateY(-30%);
		/* 要素を上の枠外に移動 */
		opacity: 0;
	}

	to {
		transform: translateY(0);
		/* 要素を元の位置に移動 */
		opacity: 1;
	}
}

.slideAnimeBottomTop {
	animation-name: slideTextY-100;
	animation-duration: 2.0s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes slideTextY-100 {
	from {
		transform: translateY(30%);
		/* 要素を下の枠外に移動 */
		opacity: 0;
	}

	to {
		transform: translateY(0);
		/* 要素を元の位置に移動 */
		opacity: 1;
	}
}

.line {
	display: block;
	animation: slideTextY100 2.0s forwards;
	/* アニメーションのデフォルト設定 */
	opacity: 0;
	/* アニメーション前は非表示 */
}

/*じわっと表示*/
.blur {
	animation-name: blurAnime;
	/*	animation-delay: 1s;*/
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

@keyframes blurAnime {
	from {
		filter: blur(10px);
		transform: scale(1.02);
		opacity: 0;
	}

	to {
		filter: blur(0);
		transform: scale(1);
		opacity: 1;
	}
}

.blurTrigger {
	opacity: 0;
}

/*横スクロールスタイル*/
.area {
	overflow: hidden;
}

.wrap {
	display: flex;
}

.item {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

#box4-l,
#box4-r {
	overflow: hidden;
}

/* 左右からふわっとアニメーション */
.fadeLeft {
	opacity: 0;
	transform: translateX(-100%);
	animation-name: fadeLeftAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

.fadeRight {
	opacity: 0;
	transform: translateX(100%);
	animation-name: fadeRightAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-100%);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes fadeRightAnime {
	from {
		opacity: 0;
		transform: translateX(100%);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.fadeLeftTrigger,
.fadeRightTrigger {
	opacity: 0;
}

@media(max-width:970px) {
	header {
		padding-top: 0;
		padding-bottom: 0;
		height: fit-content !important;
	}
}


/*ハンバーガーメニューのスタイル*/
#menu-item253,
#menu-item254,
#menu-item255 {
	width: 20% !important;
}



@media screen and (min-width: 971px) and (max-width: 1000px) {
	#header-content-region {
		width: 96%;
		height: 9dvh;
		margin: auto;
		padding: 0;
	}

	body header {
		padding: 0;
		height: fit-content !important;
	}

}