@charset "utf-8";

@property --root-font-size {
	syntax: "<number>";
	inherits: false;
	initial-value: 16;
}

:root {
	/* inner */
	--inner: 1600px;
	--padding-pc: 25px;
	--padding-sp: 15px;

	/* color */
	--color-white: #fff;
	--color-black: #000;
	--color-gray: #d9d9d9;

	/* font-weight */
	--regular: 300;
	--normal: 400;
	--medium: 500;
	--bold: 700;

	/* font-family */
	--base-font-family: "Noto Sans JP", sans-serif;
	--second-font-family: "Hind Siliguri", sans-serif;
	--number-font-family: "Staatliches", sans-serif;
	--rem: calc(1rem / var(--root-font-size)); /* 1px を rem に変換する単位 */
	/*  how to use
font-size: calc(24 * var(--rem));*/
}

/*========================
SPのみ表示　PCのみ表示
========================*/

@media (max-width: 767px) {
	[data-device="pc"] {
		display: none;
	}
	.pc{
		display: none;
	}
}

@media (min-width: 768px) {
	[data-device="sp"] {
		display: none;
	}
	.sp{
		display:none;
	}
}
/*========================
リキッドレイアウト対応
========================*/
html {
	font-size: 16px;
}
@media (max-width: 412px) {
	html {
		font-size: 3.883495vw;
	}
}
@media screen and (min-width: 768px) {
	html {
		font-size: 1vw;
	}
}
@media (min-width: 1600px) {
	html {
		font-size: 16px;
	}
}

html {
	font-family: Noto Sans JP, MyYuGothicM, YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
	position: relative;
	box-sizing: border-box;
}
html,
body {
	position: relative;
	scroll-behavior: smooth;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

body h1,
body h2,
body h3,
body h4,
body h5 {
	font-weight: 700;
}

a img {
	transition: 0.3s;
}
@media (hover: hover) {
	a img:hover {
		opacity: 0.6;
	}
}

body.is-open {
	overflow: hidden;
	/* スクロールの連鎖を防ぐ（iOS対応向上） */
	overscroll-behavior: none;
}

/*========================
l-inner
========================*/
.l-inner {
	width: 100%;
	max-width: calc(var(--inner) + var(--padding-pc) * 2);
	padding-right: var(--padding-pc);
	padding-left: var(--padding-pc);
}
@media screen and (max-width: 767px) {
	.l-inner {
		padding-right: var(--padding-sp);
		padding-left: var(--padding-sp);
		margin-right: auto;
		margin-left: auto;
	}
}
/*========================
header
========================*/

.p-header {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 900;
	background: linear-gradient(rgba(48, 48, 48, 1), rgba(78, 78, 78, 0));
}
.p-header__inner {
	padding-inline: calc(80 * var(--rem));
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.p-header__logo {
	width: calc(484 / 1920 * 100vw);
}
.p-header__logo img {
	width: 100%;
	aspect-ratio: 484/161;
	height: auto;
	object-fit: contain;
}

.p-pcmenu {
	display: flex;
	gap: calc(8 * var(--rem));
	list-style: none;
	align-items: center;
}

.p-pcmenu li a {
	text-decoration: none;
	color: var(--color-white);
	border-radius: 50px;
	font-weight: 700;
	letter-spacing: 0;
	display: block;
	overflow: hidden;
	position: relative;
	transition-duration: 0.4s;
	z-index: 2;
	font-size: max(calc(20 * var(--rem)), 16px);
	padding: calc(10 * var(--rem)) calc(40 * var(--rem));
	transition: 0.3s;
}

.p-pcmenu li.rev a {
	color: var(--color-black);
	background-color: var(--color-white);
	border-radius: 50px;
}

.p-pcmenu li a::after {
	background-color: var(--color-white);
	border-radius: 50%;
	content: "";
	display: block;
	margin: auto;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	width: 100%;
	padding-top: 100%;
	height: 0;
	z-index: -1;
	transform: translateY(-50%) scale(0.1);
	transition: opacity 0.5s, transform 0s;
	transition-delay: 0s, 0.4s;
}

.p-pcmenu li.rev a::after {
	background-color: var(--color-black);
}

@media (hover: hover) {
	.p-pcmenu li a:hover {
		color: var(--color-black);
	}
	.p-pcmenu li a:hover::after {
		opacity: 1;
		transform: translateY(-50%) scale(1.1);
		transition-delay: 0s;
		transition: opacity 0.8s, transform 0.6s ease-in-out;
	}
	.p-pcmenu li.rev a:hover {
		color: var(--color-white);
	}
}

/*========================
footer
========================*/
.p-footer {
	width: 100%;
	background-color: var(--color-black);
	padding-top: calc(210 / 1920 * 100vw);
	color: var(--color-white);
	position: relative;
}
.p-footer::before {
	content: "";
	width: 100%;
	aspect-ratio: 1919/1203;
	height: auto;
	background: url(../images/common/footer_bg.png);
	background-size: contain;
	opacity: 0.3;
	position: absolute;
	bottom: calc(40 / 1920 * 100vw);
	left: 0;
	z-index: -1;
}

.p-footer__inner {
	padding-inline: calc(80 * var(--rem));
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
}
.p-footer__nav {
	display: flex;
	gap: calc(76 / 1920 * 100vw);
}
.p-footer__menu,
.p-footer__sns {
	list-style: none;
}

.p-footer__menu a,
.p-footer__sns a {
	text-decoration: none;
	font-size: max(calc(24 * var(--rem)), 16px);
	font-weight: 700;
	color: currentColor;
	text-decoration: none;
	transition: 0.3s;
	line-height: 2.2;
	display: block;
}
.p-footer__menu--policy {
	margin-top: calc(16 / 1920 * 100vw);
	border-top: 1px solid currentColor;
}
.p-footer__menu--policy a {
	font-size: max(calc(20 * var(--rem)), 14px);
	padding-top: calc(20 / 1920 * 100vw);
}
.p-footer__menu,
.p-footer__sns {
	padding-left: 0;
}
@media (hover: hover) {
	.p-footer__menu a:hover,
	.p-footer__sns a:hover {
		opacity: 0.3;
	}
}

.p-footer__address {
	font-size: max(calc(18 * var(--rem)), 14px);
	font-weight: 700;
}
.p-footer__address small {
	display: block;
	font-size: max(calc(18 * var(--rem)), 14px);
	font-weight: 700;
}
.p-footer__logo {
	width: 100%;
	margin-top: calc(40 / 1920 * 100vw);
}
.p-footer__logo img {
	width: 100%;
	aspect-ratio: 1920/192;
	height: auto;
	object-fit: contain;
}
/*========================
　下層ページ page-header
========================*/

.p-pageheader {
	color: var(--color-white);
	padding-top: calc(238 * var(--rem));
}
.p-pageheader__title {
	font-size: calc(140 * var(--rem));
	text-transform: uppercase;
	font-family: var(--second-font-family);
	line-height: 1;
	color: currentColor;
	span {
		display: inline-block;
		font-size: calc(30 * var(--rem));
		margin-left: calc(50 * var(--rem));
	}
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
共通パーツ　ここから
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
タイトルテキストグラデーション
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.c-textgrad {
	background: linear-gradient(90deg, #9d9b97 2%, #ffffff 41%, #ffffff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.c-textgrad2 {
	background: linear-gradient(90deg, #000 0%, #6d6d6d 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
c-button
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.c-button {
	font-size: calc(67 * var(--rem));
	padding-right: calc(160 * var(--rem));
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: var(--color-white);
	font-weight: 700;
}
.c-button::before {
	content: "";
	width: calc(128 * var(--rem));
	aspect-ratio: 1;
	height: auto;
	border-radius: 50%;
	border: 1px solid currentColor;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}
.c-button::after {
	content: "";
	width: calc(128 * var(--rem));
	aspect-ratio: 1;
	height: auto;
	mask-image: url(../images/common/arrow.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	background-color: var(--color-white);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: 0.3s;
}
@media (hover: hover) {
	.c-button:hover::before {
		transform: translateY(-50%);
	}
	.c-button:hover::after {
		transform: translate(10%, -50%);
	}
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
c-button2
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.c-button2 {
	font-size: calc(30 * var(--rem));
	padding: calc(10 * var(--rem)) calc(80 * var(--rem)) calc(10 * var(--rem)) calc(60 * var(--rem));
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: var(--color-black);
	border-radius: 50px;
	background-color: var(--color-gray);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	overflow: hidden;
	position: relative;
	transition-duration: 0.4s;
	z-index: 2;
}
.c-button2::before {
	content: "+";
	color: currentColor;
	font-size: calc(30 * var(--rem));
	font-weight: 500;
	text-align: center;
	line-height: calc(30 * var(--rem));
	width: calc(30 * var(--rem));
	aspect-ratio: 1;
	height: auto;
	position: absolute;
	top: 50%;
	right: calc(24 * var(--rem));
	transform: translateY(-50%);
}
.c-button2::after {
	background-color: var(--color-black);
	border-radius: 50%;
	content: "";
	display: block;
	margin: auto;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	width: 100%;
	padding-top: 100%;
	height: 0;
	z-index: -1;
	transform: translateY(-50%) scale(0.1);
	transition: opacity 0.5s, transform 0s;
	transition-delay: 0s, 0.4s;
}
@media (hover: hover) {
	.c-button2:hover {
		color: var(--color-white);
	}
	.c-button2:hover::after {
		opacity: 1;
		transform: translateY(-50%) scale(1.1);
		transition-delay: 0s;
		transition: opacity 0.8s, transform 0.6s ease-in-out;
	}
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
画像スクロールアニメーション
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.js-reveal {
	/* parent needs positioning so the pseudo element (::before) is positioned correctly */
	position: relative;
	/* use hidden for broader browser support (overflow: clip has spotty support on some mobile browsers) */
	overflow: hidden;
	/* don't collapse the element with scaleX(0) — that can make IntersectionObserver report ratio:0
	   use the pseudo-element (::before) as the visual mask instead */
	transform: none;
}

/* 画像は常に表示状態 */
.js-reveal img {
	/* ensure the image fills the reveal container and stacks under the pseudo-mask */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 1;
}

/* 疑似要素：マスク（初期は画像を覆う） */
.js-reveal::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #ccc;
	transform: translateX(0%);
	transition: transform 0.4s ease-out;
	transition-delay: 0.5s; /* ストレッチ後に動く */
	z-index: 2;
}

/* アニメーション開始 */

/* 疑似要素が上に抜けていく */
.js-reveal.is-visible::before {
	transform: translateX(100%);
}

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
モバイル
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media (max-width: 767px) {
	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
c-button
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
	.c-button {
		font-size: max(calc(15 * var(--rem)), 15px);
		padding-right: calc(40 * var(--rem));
	}
	.c-button::before {
		width: max(calc(30 * var(--rem)), 30px);
	}
	.c-button::after {
		width: max(calc(30 * var(--rem)), 30px);
	}
	/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
c-button2
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

	.c-button2 {
		font-size: calc(20 * var(--rem));
	}
	.c-button2::before {
		font-size: calc(24 * var(--rem));
		line-height: calc(24 * var(--rem));
		width: calc(24 * var(--rem));
	}
	/*========================
　モバイルheader
========================*/
	.p-header__inner {
		padding-inline: calc(16 * var(--rem));
		z-index: 200;
	}
	.p-header__logo {
		width: calc(220 * var(--rem));
	}
	.p-header__logo img {
		aspect-ratio: 192/55;
		height: auto;
		object-fit: cover;
	}
	.p-header__hamburger {
		width: calc(50 * var(--rem));
		aspect-ratio: 1;
		height: auto;
		background: none;
		position: relative;
		border: none;
	}
	.p-header__hamburger span {
		display: block;
		width: 60%;
		height: calc(1 * var(--rem));
		background-color: var(--color-white);
		position: absolute;
		transition: 0.3s;
		left: 50%;
		transform: translateX(-50%);
	}
	.p-header__hamburger span:nth-child(1) {
		top: 40%;
	}
	.p-header__hamburger span:nth-child(2) {
		bottom: 40%;
	}
	.p-header__hamburger.is-open span:nth-child(1) {
		top: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
		background-color: var(--color-black);
	}
	.p-header__hamburger.is-open span:nth-child(2) {
		bottom: 50%;
		transform: translate(-50%, 50%) rotate(-45deg);
		background-color: var(--color-black);
	}
	.p-header.is-open .p-header__logo img {
		filter: invert(1);
	}
	.p-header__drawer {
		position: fixed;
		z-index: -1;
		top: 0;
		opacity: 0;
		visibility: hidden;
		transition: 0.3s;
	}
	.p-header__drawer.is-open {
		opacity: 1;
		visibility: visible;
	}

	.p-drawer {
		background-color: var(--color-white);
		width: 100%;
		height: 100dvh;
	}
	.p-drawer__inner {
		padding: calc(100 * var(--rem)) calc(16 * var(--rem)) calc(30 * var(--rem));
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	.p-spmenu {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(64 * var(--rem));

		width: 100%;
		text-align: center;
	}
	.p-spmenu li a {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		max-width: calc(240 * var(--rem));
		font-family: var(--second-font-family);
		font-size: calc(20 * var(--rem));
		letter-spacing: 0.02em;
		font-weight: 700;
		color: var(--color-black);

		text-decoration: none;
	}
	.p-spmenu li a span {
		font-size: calc(12 * var(--rem));
		color: var(--color-white);
	}
	.p-spmenu li:last-child a {
		height: calc(53 * var(--rem));
		background-color: var(--color-black);
		color: var(--color-white);
		border-radius: 60px;
	}
	/*========================
　モバイルfooter
========================*/
	.p-footer {
		padding-top: calc(40 * var(--rem));
	}
	.p-footer::before {
		bottom: 0;
	}

	.p-footer__inner {
		padding-inline: calc(16 * var(--rem));
		flex-direction: column;
		gap: calc(16 * var(--rem));
		align-items: flex-start;
	}
	.p-footer__nav {
		gap: calc(10px / 1920 * 100vw);
	}

	.p-footer__menu a,
	.p-footer__sns a {
		font-size: max(calc(15 * var(--rem)), 13px);
	}
	.p-footer__menu--policy {
		margin-top: max(calc(15 * var(--rem)), 13px);
	}
	.p-footer__menu--policy a {
		font-size: max(calc(15 * var(--rem)), 13px);
	}

	.p-footer__address {
		width: 100%;
		font-size: 12px;
		text-align: right;
	}
	.p-footer__address small {
		font-size: 10px;
	}
	.p-footer__logo {
		margin-top: calc(32 * var(--rem));
	}
	/*========================
　下層ページ page-header
========================*/

	.p-pageheader {
		padding-top: calc(120 * var(--rem));
	}
	.p-pageheader__title {
		font-size: calc(56 * var(--rem));
		span {
			display: block;
			font-size: calc(24 * var(--rem));
			margin-left: 0;
			margin-top: calc(8 * var(--rem));
		}
	}
}