/* --------------------------------------------------------------------------------------
	ヘッダー
--------------------------------------------------------------------------------------- */

header {
	align-items: center;
	display: flex;
	gap: 32px;
	justify-content: space-between;
	left: 36px;
	position: absolute;
	top: 32px;
	width: calc(100% - 72px);
	z-index: 1000;
}

header h1 { max-width: 89px; }
header h1.font { max-width: 183px; }

header.fixed {
	animation: fixed-animate .6s cubic-bezier(0, .8, .56, 1) both;
	background-color: #000;
	left: 0;
	padding: 20px 36px;
	position: fixed;
	top: 0;
	width: 100%;
}

@keyframes fixed-animate {
	0% { transform: translateY(-150px); }
	100% { transform: translateY(0); }
}

header.fixed:has(.nav-open) h1 a {
	background: url(../img/common/logo-width.svg) no-repeat;
	background-size: 100% auto;
	display: block;
	height: 34px;
	width: 124px;
}

header.fixed:has(.nav-open) h1 a img { display: none; }

header nav ul {
	display: flex;
	gap: 0 43px;
}

header nav li a {
	background: var(--gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
	display: block;
	font-size: 18px;
	font-weight: var(--Medium);
	-webkit-text-fill-color: #fff;
	transition: all .3s ease-in-out;
}

@media (any-hover: hover) {

	header nav li a:hover {
		text-decoration: none;
		-webkit-text-fill-color: transparent;
	}

}

header nav li .current { -webkit-text-fill-color: transparent; }

@media (max-width: 1150px) {

	header nav ul { gap: 0 2.333vw; }
	header nav li a { font-size: 1.583vw; }

}

.hamburger-btn {
	align-items: center;
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 100vw;
	cursor: pointer;
	display: none;
	flex-direction: column;
	height: 88px;
	justify-content: center;
	position: relative;
	width: 88px;
}

.hamburger-btn .line-design {
	height: 21px;
	position: relative;
	width: 45px;
}

.hamburger-btn .line-design span {
	border-top: 1px solid #fff;
	display: block;
	left: 0;
	position: absolute;
	top: 50%;
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
	width: 100%;
}

.hamburger-btn .line-design span:nth-of-type(1) { transform: translateY(-10px); }
.hamburger-btn .line-design span:nth-of-type(2) { transform: translateY(0); }
.hamburger-btn .line-design span:nth-of-type(3) { transform: translateY(10px); }

.hamburger-btn.close .line-design span:nth-of-type(1) { transform: translateY(0) rotate(45deg); }

.hamburger-btn.close .line-design span:nth-of-type(2) {
	opacity: 0;
	transform: translateY(0) scaleX(0);
}

.hamburger-btn.close .line-design span:nth-of-type(3) { transform: translateY(0) rotate(-45deg); }

.hamburger-btn .text {
	color: #fff;
	display: inline-block;
	line-height: 1;
	margin-top: 10px;
}

@media (max-width: 900px) {

	header {
		gap: 0;
		left: 3.745vw;
		position: fixed;
		top: 3.745vw;
		width: calc(100% - 7.491vw);
	}

	header.fixed {
		animation: none;
		padding: 3.745vw;
	}

	header h1 { max-width: 11.236vw; }
	header h1.font { max-width: 31.98vw; }

	header.fixed:has(.nav-open) h1 a {
		height: 8.333vw;
		width: 25.333vw;
	}

	header nav {
		background-color: #000;
		height: 100%;
		left: 0;
		position: fixed;
		text-align: center;
		top: 0;
		transform: translateX(100vw);
		transition: all .6s cubic-bezier(0, .8, .56, 1);
		width: 100%;
		z-index: -1;
	}

	header .nav-open { transform: translateX(0); }

	header nav ul {
		align-items: flex-start;
		flex-direction: column;
		margin-left: 6.242vw;
		margin-right: 6.242vw;
		padding-top: 20.333vw;
		text-align: left;
	}

	header nav li { width: 100%; }
	header nav li:nth-of-type(n+2) { border-top: 1px solid #fff; }

	header nav li a {
		display: block;
		font-size: 3.745vw !important;
		padding: 3.998vw 0;
	}

	header .hamburger-btn {
		display: flex;
		height: 11.236vw;
		width: 11.236vw;
	}

	.hamburger-btn .line-design {
		height: 2.622vw;
		width: 5.618vw;
	}

	.hamburger-btn .line-design span:nth-of-type(1) { transform: translateY(-1.248vw); }
	.hamburger-btn .line-design span:nth-of-type(3) { transform: translateY(1.248vw); }

	.hamburger-btn .text {
		font-size: 1.998vw;
		margin-top: 1.648vw;
	}

}

/* --------------------------------------------------------------------------------------
	ボックス
--------------------------------------------------------------------------------------- */

.box {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: min(100% - 60px, 1000px);
	z-index: 1;
}

.box-padding {
	padding-bottom: 88px;
	padding-top: 88px;
}

.gray-texture {
	background-color: #000;
	position: relative;
	z-index: 0;
}

.gray-texture::before,
.gray-texture::after {
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.gray-texture::before {
	background: url(../img/common/texture.jpg) no-repeat center bottom / cover;
	mix-blend-mode: luminosity;
	opacity: 0.15;
	z-index: -2;
}

.gray-texture::after {
	background: url(../img/common/texture-front.png) no-repeat center 68% / cover;
	z-index: -1;
}

.wagara-bg {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 73.15%, rgba(0, 0, 0, 0.80) 100%),
		#000 url(../img/common/wagara-bg.png) repeat center center;
}

.white-texture {
	background: url(../img/common/white-bg.jpg) repeat-y center top / 100% auto;
	color: #000;
}

.ripple-bg {
	position: relative;
	z-index: 0;
}

.ripple-bg.jquery-ripples > img {
	position: relative;
	z-index: -2;
}


.ripple-bg.jquery-ripples > canvas { z-index: -2 !important; }

.steam-layer {
	display: none;
	inset: 0;
	-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, .6) 78%, rgba(0, 0, 0, .25) 100%);
	mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 45%, rgba(0, 0, 0, .6) 78%, rgba(0, 0, 0, .25) 100%);
	mix-blend-mode: screen;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

.ripple-bg.jquery-ripples > .steam-layer { display: block; }

.steam-fog {
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	position: absolute;
}

.steam-fog1 {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1000'%20height%3D'1000'%3E%3Cfilter%20id%3D'c'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.004'%20numOctaves%3D'3'%20seed%3D'7'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%201.15%200%200%200%20-0.58'%2F%3E%3CfeGaussianBlur%20stdDeviation%3D'6'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'1000'%20height%3D'1000'%20filter%3D'url(%23c)'%2F%3E%3C%2Fsvg%3E");
	opacity: .16;
}

.steam-fog2 {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1000'%20height%3D'1000'%3E%3Cfilter%20id%3D'c'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.009'%20numOctaves%3D'4'%20seed%3D'19'%2F%3E%3CfeColorMatrix%20type%3D'matrix'%20values%3D'0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%201.25%200%200%200%20-0.64'%2F%3E%3CfeGaussianBlur%20stdDeviation%3D'4'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'1000'%20height%3D'1000'%20filter%3D'url(%23c)'%2F%3E%3C%2Fsvg%3E");
	opacity: .10;
}

.steam-wisps {
	filter: blur(2px);
	inset: 0;
	position: absolute;
}

.steam-wisps svg {
	display: block;
	height: 100%;
	width: 100%;
}


.fadeIn { opacity: 1; }
.fadeOut { opacity: 0; }

.object-fit {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

@media (max-width: 900px) {

	.box { width: min(100% - 12.484vw, 1000px); }

	.box-padding {
		padding-bottom: 9.988vw;
		padding-top: 9.988vw;
	}
}

/* --------------------------------------------------------------------------------------
	テキスト関連
--------------------------------------------------------------------------------------- */

.head-title { text-align: center; }
.head-title.left { text-align: left; }

.head-title strong {
	display: block;
	font-size: 32px;
	font-weight: var(--Bold);
	line-height: 150%;
}

.head-title small {
	display: block;
	font-size: 20px;
	font-weight: var(--Bold);
	line-height: 200%;
	margin-top: 4px;
}

.head-title small.small { font-size: 16px; }

.line-title { text-align: center; }

.line-title strong {
	border-bottom: 1px solid var(--color-gold);
	display: inline-block;
	font-size: 20px;
	font-weight: var(--Bold);
	padding-bottom: 8px;
}

.color-red { color: var(--color-red); }
.color-orange { color: var(--color-orange); }

@media (max-width: 900px) {

	.head-title strong { font-size: 4.994vw; }

	.head-title small {
		font-size: 3.496vw;
		line-height: 150%;
		margin-top: 1.333vw;
	}

	.head-title small.small { font-size: 2.996vw; }
}

/* --------------------------------------------------------------------------------------
	バナー
--------------------------------------------------------------------------------------- */

.banner { display: inline-block; }

.banner a,
.banner button {
	align-items: center;
	appearance: none;
	background-color: #fff;
	border: 2px solid #fff;
	border-radius: 8px;
	color: #000;
	cursor: pointer;
	display: flex;
	font-weight: var(--Bold);
	justify-content: center;
	line-height: 200%;
	min-height: 64px;
	min-width: 253px;
	outline: none;
	overflow: hidden;
	padding: 16px;
	position: relative;
	transition: all .3s ease-in-out;
	width: 100%;
	z-index: 0;
}

.icon-banner {
	align-items: center;
	background: url(../img/common/icon-circle.svg) no-repeat right center;
	display: inline-flex;
	font-weight: var(--Light);
	min-height: 30px;
	padding-right: 50px;
	transition: all .3s ease-in-out;
}

.icon-pdf {
	align-items: center;
	background: url(../img/common/icon-pdf.svg) no-repeat right center;
	background-size: 24px auto;
	display: inline-flex;
	padding-right: 28px;
}

.over { transition: all .3s ease-in-out; }

/* ロールオーバーで金色になるリンク。黒背景で .over の opacity では変化が分かりにくい箇所に使う */
.over-gold { transition: all .3s ease-in-out; }

@media (any-hover: hover) {

	.banner a:hover,
	.banner button:hover {
		background-color: #000;
		color: #fff;
		text-decoration: none;
	}

	.over:hover,
	.icon-banner:hover {
		opacity: .6;
		text-decoration: none;
	}

	/* reset.css の a:hover { color: #fff } より詳細度を上げて確実に金色にする */
	.over-gold:hover,
	.over-gold:focus-visible {
		color: var(--color-gold);
		text-decoration: none;
	}

}

@media (max-width: 768px) {

	.icon-banner {
		background-size: auto 4.993vw;
		font-size: 2.996vw;
		min-height: 4.993vw;
		padding-right: 8.333vw;
	}

	.banner a,
	.banner button {
		padding-bottom: 2.985vw;
		padding-top: 2.985vw;
	}

}

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

.key-image {
	align-items: self-end;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	height: 400px;
	justify-content: center;
	padding-bottom: 64px;
}

.key-image h2 strong {
	display: block;
	font-size: 40px;
	font-weight: var(--SemiBold);
}

.key-image h2 small {
	display: block;
	font-size: 20px;
	font-weight: var(--SemiBold);
}

@media (max-width: 900px) {

	.key-image {
		height: 49.938vw;
		padding-bottom: 7.99vw;
	}

	.key-image h2 strong { font-size: 5.993vw; }

	.key-image h2 small { font-size: 3.496vw; }
}

/* --------------------------------------------------------------------------------------
	パンくず
--------------------------------------------------------------------------------------- */

.breadcrumb { padding-top: 48px; }

.breadcrumb ul {
	align-items: center;
	display: flex;
	font-size: 12px;
}

.breadcrumb li {
	display: block;
	line-height: 1;
	position: relative;
}

.breadcrumb li:nth-of-type(n+2) { margin-left: 20px; }

.breadcrumb li:nth-of-type(n+2):before {
	border-bottom: 1px solid var(--color-text);
	border-right: 1px solid var(--color-text);
	content: '';
	display: block;
	height: 5px;
	left: -13px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
	width: 5px;
}

.breadcrumb li a { color: var(--color-text); }

@media (max-width: 900px) {

	.breadcrumb { padding-top: 4.975vw; }

	.breadcrumb ul { font-size: 2.985vw; }

	.breadcrumb li { white-space: nowrap; }

	.breadcrumb li:nth-of-type(n+2):before { left: -3.367vw; }

	.breadcrumb li:last-of-type span {
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-align: left;
		text-overflow: ellipsis;
		white-space: normal;
		width: unset;
	}
}

/* --------------------------------------------------------------------------------------
	お知らせ
--------------------------------------------------------------------------------------- */

.news-list li:nth-of-type(n+2) { border-top: 1px solid #fff; }

.news-list li a {
	display: flex;
	justify-content: space-between;
	padding: 24px 0;
}

.news-list li a p { width: 86%; }

.page-nation {
	display: flex;
	gap: 24px;
	justify-content: center;
}

.page-nation > div {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: center;
	position: relative;
}

.page-nation ul {
	display: flex;
	gap: 24px;
	justify-content: center;
}

.page-nation li a {
	display: block;
	position: relative;
}

.page-nation li .current::after {
	background-color: var(--color-red);
	content: '';
	display: block;
	height: 1px;
	position: absolute;
	width: 100%;
}

.page-nation .preview::before,
.page-nation .next::after,
.page-nation .last::after {
	background: url(../img/common/icon-arrow.svg) no-repeat;
	content: '';
	display: block;
	height: 12px;
	width: 7px;
}

.page-nation .preview::before { transform: scale(-1,1); }

.page-nation .last::after {
	background-repeat: repeat-x;
	width: 13px;
}

@media (max-width: 900px) {

	.news-list li a {
		display: block;
		font-size: 2.996vw;
		padding: 2.996vw 0;
	}

	.news-list li a p {
		margin-top: 1.498vw;
		width: auto;
	}
}

/* --------------------------------------------------------------------------------------
	デバイス切り替え
--------------------------------------------------------------------------------------- */

.sp { display: none; }

@media (max-width: 900px) {

	.pc { display: none; }
	.sp { display: block; }
}

/* --------------------------------------------------------------------------------------
	アニメーション
--------------------------------------------------------------------------------------- */

.slide-item,
.slide-item-top {
	filter: blur(10px);
	opacity: 0;
	transition: all 1s cubic-bezier(.5, 1, .89, 1);
}

.slide-top { transform: translateY(-30px); }
.slide-bottom { transform: translateY(30px); }

.slide-left {
	opacity: 0;
	transform: translateX(-50px);
}

.slide-right  {
	opacity: 0;
	transform: translateX(50px);
}

.slide-item.slide-bg-white {
	opacity: 1;
	position: relative;
}

.slide-item.slide-bg-white::before {
	background-color: #fff;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 1.6s cubic-bezier(.16, 1, .3, 1);
	width: 100%;
	z-index: 1;
}

.slide-item.slide-bg-white-animate::before { width: 0; }

.slide-top-animate,
.slide-bottom-animate,
.slide-right-animate,
.slide-left-animate,
.slide-right-animate::after,
.slide-left-animate::before {
	filter: blur(0);
	opacity: 1;
	transform: translateY(0) translateX(0);
}

@keyframes fade-animate {
	0% {
		opacity: 0;
		transform: translateY(150px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --------------------------------------------------------------------------------------
	アコーディオン
--------------------------------------------------------------------------------------- */

details { overflow: hidden; }

details summary {
	cursor: pointer;
	display: block;
	list-style: none;
	position: relative;
}

.accordion-plus summary {
	background: #464646 url(../img/common/icon-plus.svg) no-repeat calc(100% - 20px) center;
	border-radius: var(--border-radius);
	font-size: 18px;
	font-weight: var(--Bold);
	padding: 16px 50px 16px 20px;
}

.accordion-plus[open] > summary {
	background-image: url(../img/common/icon-minus.svg);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.accordion-plus .accordion-content {
	background-color: #464646;
	padding: 16px;
}

/* --------------------------------------------------------------------------------------
	フッター
--------------------------------------------------------------------------------------- */

footer {
	background: url(../img/common/texture.jpg) no-repeat center bottom / cover;
	font-size: 14px;
	padding: 32px 0 64px;
	position: relative;
	z-index: 0;
}

footer .box { width: min(100% - 60px, 1280px);}

footer::before {
	background-color: rgba(0, 0, 0, 0.32);
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

footer .main-navi {
	align-items: center;
	border-bottom: 1px solid #fff;
	display: flex;
	gap: 43px;
	padding-bottom: 16px;
}

footer .main-navi li a,
footer .other-navi li a,
footer .other-navi small { font-weight: var(--Medium); }

footer .company {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	line-height: 180%;
	margin-top: 16px;
}

footer .company .name { font-weight: var(--Medium); }

footer .company .sns {
	align-items: center;
	display: flex;
	gap: 16px;
}

footer .company .sns img { height: 24px; }

footer .company .address { white-space: nowrap; }

footer .other-navi {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
}

footer .other-navi ul {
	align-items: center;
	display: flex;
	gap: 43px;
}

footer .other-navi small { font-size: 14px; }

@media (max-width: 900px) {

	footer {
		font-size: 2.996vw;
		padding-bottom: 4.744vw;
		padding-top: 3.995vw;
	}

	footer .main-navi {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 2.248vw;
		padding-bottom: 3.333vw;
	}

	footer .main-navi li { min-width: 29%; }

	footer .company {
		display: block;
		margin-top: 3.333vw;
	}

	footer .company .sns {
		gap: 2.996vw;
		justify-content: center;
		margin-top: 2.248vw;
	}

	footer .company .sns img { height: 4.994vw; }

	footer .company .address { font-size: 2.497vw; }

	footer .other-navi { margin-top: 3.333vw; }

	footer .other-navi ul {
		gap: 2.248vw;
	}

	footer .other-navi small { font-size: 2.497vw; }
}