@charset "utf-8";

/**
 * サイト共通の初期表示アニメーションと汎用UI部品を管理する。
 *
 * assets/css/foundation/layout.css より前に読み込み、画面遷移やページトップなど横断部品の基底状態を確定する。
 * ページ固有の配色・余白・レイアウトはここへ追加せず、各ページCSSへ分離する。
 */

.shs-material-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

/**
 * 1.0 初期表示と画面遷移
 *
 * 3本バーは実際の読み込みが一定時間を超えた場合だけ表示する。
 * 読み込み完了後は、従来の明るいピンクを使った全画面パネルを
 * 左から右へ1回だけ通過させ、画面中央を覆った時点で本文を表示する。
 */

.site-splash {
	position: fixed;
	inset: 0;
	z-index: 9999999;
	display: grid;
	place-items: center;
	background: #fff;
	color: #9e5369;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.site-splash__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

html.shs-loader-visible .site-splash {
	opacity: 1;
	visibility: visible;
}

.splashbg {
	display: none;
}

body.appear .splashbg {
	display: block;
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--shs-pink, #ef78bc);
	transform: translateX(-100%);
	animation: shsPageWipeRight 0.8s ease-in-out forwards;
	pointer-events: none;
}

@keyframes shsPageWipeRight {
	0% {
		transform: translateX(-100%);
	}

	50% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(100%);
	}
}

/* ワイプが画面全体を覆う瞬間に本文を表示し、余分な待ち時間を作らない。 */
.site-container {
	opacity: 0;
}

body.appear .site-container {
	animation: shsPageContentAppear 0.01s linear 0.4s forwards;
}

@keyframes shsPageContentAppear {
	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.appear .splashbg {
		animation-duration: 0.01ms;
	}

	body.appear .site-container {
		animation-delay: 0s;
	}
}

/**
 * 2.0 汎用ナビゲーションの基本配置
 *
 * ページ本文内で使う階層ナビゲーションの基底値を定義する。
 * 共通ヘッダーのメガメニューとモバイルメニューは assets/css/shared/site/header.css を正とする。
 */

/* 第1階層だけ横並びにし、主要導線を同じ高さで比較できるようにする。 */

nav ul {
	list-style: none;
	display: flex;
	justify-content: center;
}

/* 第2階層以降は項目数が増えても読み順が崩れないよう縦積みに戻す。 */

nav ul ul {
	display: block;
}

/* 子要素の位置決め基準を各項目へ閉じ込めるため、liを配置基準にする。 */

nav ul li {
	position: relative;
}

/* クリック領域を確保し、階層間で余白の基準を共有する。 */

nav ul li a {
	display: block;
	text-decoration: none;
	padding: 20px 35px;
	transition: all 0.3s;
}

nav ul ul a {
	padding: 10px 35px;
}

@media screen and (max-width: 1200px) {
	nav ul li a {
		padding: 20px;
	}

	nav ul ul a {
		padding: 10px 20px;
	}
}

nav ul li a:hover {
	color: #9e5369;
}

/* ヘッダーの子ナビゲーションはassets/css/shared/site/header.cssで管理し、モバイルでは絶対配置を使用しない。 */

/* 960px以下では横幅不足を避けるため、汎用ナビゲーションを縦積みに切り替える。 */

@media screen and (max-width: 960px) {
	nav {
		padding: 0;
	}

	nav ul {
		display: block;
	}

	nav ul li a {
		border-bottom: 1px solid #9e5369;
	}
}

/**
 * 3.0 ページトップボタン
 *
 * スクロール量に応じて表示される固定導線。表示・非表示は左右移動のクラスで切り替える。
 */

.page-top a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border: 1px solid #adadad;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 0.6rem;
	transition: all 0.3s;
}

.page-top a:hover {
	background: #777;
}

/* 本文を覆いすぎないよう右下へ固定し、非表示時は画面外へ退避する。 */

.page-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	opacity: 0;
	transform: translateX(100px);
}

.page-top span {
	display: inline-block;
	width: 13px;
	height: 13px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	transform: rotate(45deg);
	margin: 8px 0 0 0;
}

/* 表示時は画面外から左へ移動し、固定位置まで戻す。 */

.page-top.LeftMove {
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime {
	from {
		opacity: 0;
		transform: translateX(100px);
	}

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

/* 非表示時は右方向へ退避し、クリック対象から視覚的に外す。 */

.page-top.RightMove {
	animation: RightAnime 0.5s forwards;
}

@keyframes RightAnime {
	from {
		opacity: 1;
		transform: translateX(0);
	}

	to {
		opacity: 1;
		transform: translateX(100px);
	}
}

/**
 * 4.0 ギャラリーレイアウト
 *
 * 既存の段組み順を維持する。PCは4列、小型画面は2列。
 * 各タイルだけ3:2に統一し、右端画像だけ高さがずれる問題を解消する。
 */

.gallery {
	columns: 4;
	column-gap: 20px;
	padding: 0 15px;
	list-style: none;
}

.gallery li {
	display: inline-block;
	width: 100%;
	aspect-ratio: 3 / 2;
	margin: 0 0 20px;
	break-inside: avoid;
	overflow: hidden;
	vertical-align: top;
}

.gallery li > div,
.gallery li > div > a {
	display: block;
	width: 100%;
	height: 100%;
}

.gallery img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}

@media only screen and (max-width: 600px) {
	.gallery {
		columns: 2;
		column-gap: 14px;
	}

	.gallery li {
		margin-bottom: 14px;
	}
}

/**
 * 5.0 背景ワイプと画像ホバーの共通アニメーション
 *
 * 背景色の伸縮と本文の表示タイミングを分離し、同じ演出を左右どちらからでも再利用できるようにする。
 */

.bgextend {
	animation-name: bgextendAnimeBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden;
	opacity: 0;
}

@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ワイプ終了後に本文を表示し、背景と文字が同時にちらつくのを防ぐ。 */

.bgappear {
	animation-name: bgextendAnimeSecond;
	animation-duration: 1s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* 左から右へ背景を伸ばし、中央到達後は右端を基点に縮める。 */

.bgLRextend::before {
	animation-name: bgLRextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

@keyframes bgLRextendAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}

	50% {
		transform-origin: left;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}

/* 右から左へ背景を伸ばし、中央到達後は左端を基点に縮める。 */

.bgRLextend::before {
	animation-name: bgRLextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

@keyframes bgRLextendAnime {
	0% {
		transform-origin: right;
		transform: scaleX(0);
	}

	50% {
		transform-origin: right;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: left;
	}

	100% {
		transform-origin: left;
		transform: scaleX(0);
	}
}

/* スクロール監視対象は発火前に非表示とし、初期描画で完成状態が一瞬見えるのを防ぐ。 */

.bgappearTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
	opacity: 0;
}

/**
 * 画像リンクはホバー時にわずかに拡大・回転させ、クリック可能な要素であることを示す。
 * backface-visibility は変形中の描画ちらつきを抑えるために指定する。
 */

.zoomInRotate {
	backface-visibility: hidden;
}

.zoomInRotate img {
	transform: scale(1);
	transition: 0.3s ease-in-out;
}

.zoomInRotate a:hover img {
	transform: rotate(5deg) scale(1.2);
}