@charset "utf-8";

/* 旧トップの背景・中央タイトル・レスポンシブ設定を復元。
   下に続く商品説明へ影響しないよう .opening の内側に限定する。
   写真メニューの配置とアニメーションは既存の fractal-opening.css を使用。 */
.opening {
	/* 背景写真（正方形）は画面を覆う大きさのまま上へずらし、
	   陶器の下辺（写真の上から74.5%）を「香るフラクタル」より少し上に置く。
	   タイトルの折り返しで「香るフラクタル」の位置は画面中央から27〜68px上に変わるため、72px 上を基準にする */
	--opening-h: max(110vh, 900px);
	--bg-size: max(100vw, var(--opening-h));
	--bg-y: calc(var(--opening-h) / 2 - 72px - var(--bg-size) * 0.745);
	position: relative;
	width: 100%;
	height: 110vh;
	min-height: 900px;
	overflow: hidden;
	font-size: 15px;
	line-height: 2.2;
	background-color: #cbcbca; /* 写真下端の紙の色。写真より下の余白を同じ色で埋める */
	background-image:
		linear-gradient(rgba(10, 11, 13, 0.63), rgba(10, 11, 13, 0.77)),
		url("../images/top-bg-contrast.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%, var(--bg-size) var(--bg-size);
	background-position: 0 0, center var(--bg-y);
}

.opening::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(circle at center, transparent 10%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.72) 100%);
	pointer-events: none;
}

.opening h1 {
	position: absolute;
	top: 0;
	z-index: 20;
	width: 100%;
	padding: 5px 15px;
	color: var(--text);
	font-family: "Inter", sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.24em;
	text-align: center;
	background: rgba(0, 0, 0, 0.74);
}

.opening .site-title {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: min(660px, 78vw);
	color: #fff;
	text-align: center;
	transform: translate(-50%, -50%);
	text-shadow:
		0 2px 5px rgba(0, 0, 0, 1),
		0 4px 24px rgba(0, 0, 0, 1);
	pointer-events: none;
}

.opening .site-title .en {
	display: block;
	font-family: "Shippori Mincho", serif;
	font-size: clamp(30px, 4.5vw, 64px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.12em;
}

.opening .site-title .jp {
	display: block;
	margin-top: 6px;
	font-family: "Shippori Mincho", serif;
	font-size: clamp(17px, 2vw, 26px);
	letter-spacing: 0.35em;
}

.opening .site-title .tagline {
	display: block;
	max-width: 38em;
	margin: 22px auto 0;
	padding: 8px 18px;
	font-size: clamp(11px, 1.15vw, 14px);
	line-height: 1.8;
	letter-spacing: 0.1em;
	background: rgba(0, 0, 0, 0.56);
}

.opening .site-title .price {
	display: inline-block;
	margin-top: 12px;
	padding: 7px 16px;
	font-family: "Inter", sans-serif;
	font-size: 13px;
	letter-spacing: 0.12em;
	background: rgba(0, 0, 0, 0.56);
}

.opening .site-title .price .row {
	display: block;
	line-height: 1.75;
}

.opening .site-title .price .is-sub {
	font-size: 11px;
	letter-spacing: 0.1em;
	opacity: 0.82;
}

.opening .scroll-cue {
	position: absolute;
	bottom: 24px;
	left: 50%;
	z-index: 12;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-decoration: none;
	transform: translateX(-50%);
}

.opening .scroll-cue::after {
	content: "";
	display: block;
	width: 1px;
	height: 42px;
	margin: 8px auto 0;
	background: rgba(255, 255, 255, 0.75);
}

@media screen and (max-width: 800px) {
	.opening {
		--opening-h: max(110vh, 760px);
		height: 110vh;
		min-height: 760px;
	}
}

@media screen and (max-width: 480px) {
	.opening {
		height: 110vh;
		min-height: 760px;
		font-size: 13px;
		line-height: 1.75;
	}

	.opening .site-title {
		width: 76vw;
	}

	.opening .site-title .en {
		font-size: 28px;
		letter-spacing: 0.08em;
	}

	.opening .site-title .jp {
		font-size: 16px;
	}

	.opening .site-title .tagline {
		font-size: 10px;
	}

	.opening .site-title .price {
		font-size: 12px;
		letter-spacing: 0.06em;
	}

	.opening .site-title .price .is-sub {
		font-size: 10.5px;
	}
}