@charset "UTF-8";
/*
 * トップページ
 * Figma「TOPページ-パソコン版」1920px 基準の実測値で組んでいる。
 */

/* ============================================================
 * メインビジュアル
 * 写真 y100-616 (1920x516) ／ ドット y591 (65x15, 中央)
 * サムネイル y645 (170x76 が3枚, 中央) = 写真の下端から 29px ／ ボタンは写真に重ねる
 * ========================================================== */

.mv__stage {
	position: relative;
	height: 516px;
	overflow: hidden;
}

/* 切り替わりは長めに取る。写真が大きいので、速いと目が痛い */
/*
 * 見えていないスライドは押せないようにする（2026-10-01）。透明なだけで重なったままだと、
 * DOM で最後のスライドのボタン（イベントカレンダー）がいちばん上に残り、
 * リンクの無いスライドの同じ位置を押すとそちらへ飛んでいた。
 */
.mv__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s var(--ease-soft);
}

.mv__slide.is-active {
	z-index: 1;
	opacity: 1;
	pointer-events: auto;
}

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

/* ドットは 3個 x 15px ＋ 間隔 10px で合計 65px（Figma の実測幅） */
.mv__dots {
	position: absolute;
	bottom: var(--space-xs);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--space-xs);
	z-index: 2;
}

/*
 * Figma (Group 79) の中身は直径15pxの円が3つ、間隔25px。
 * 現在地は #67B37E の塗り、それ以外は同じ色の1px枠だけ。
 */
.mv__dot {
	display: block;
	width: 15px;
	height: 15px;
	border: 1px solid var(--midori-green-light);
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	appearance: none;
	transition: background-color 0.2s var(--ease-out);
}

.mv__dot.is-active {
	background: var(--midori-green-light);
}

.mv__dot:hover {
	background: var(--midori-green-light);
	opacity: 0.6;
}

/*
 * 写真に重ねるボタン（Figma: 「WEB写真館はこちら」。管理画面で 上・中央・下 を選べる）。
 * 白地・緑の文字の角丸。飾りのミウル（mv__link--deco）はボタンの右に半分はみ出して置く。
 */
.mv__link {
	position: absolute;
	left: 50%;
	z-index: 2;
	translate: -50% 0;
}

.mv__link--top {
	top: 10%;
}

.mv__link--center {
	top: 50%;
	translate: -50% -50%;
}

.mv__link--bottom {
	bottom: 13%;
}

.mv__link-body {
	display: block;
	min-width: 326px;
	padding: var(--space-md) var(--space-2xl);
	border: 2px solid var(--midori-green);
	border-radius: 999px;
	background: #fff;
	font-size: var(--fs-mv-cta);
	font-weight: 700;
	line-height: 1.4;
	color: var(--midori-green);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}

a.mv__link-body:hover {
	background: var(--midori-green);
	color: #fff;
	opacity: 1;
}

.mv__link--deco::after {
	position: absolute;
	top: 50%;
	right: 0;
	width: 150px;
	height: 150px;
	background: url("../images/mv-miuru.png") center / contain no-repeat;
	content: "";
	translate: 60% -50%;
	pointer-events: none;
}

/*
 * 写真の下のサムネイル（Figma: image 32 / 33 ＝ 170x76 が3枚・間隔 約40px。写真の下端から 29px）。
 * 写真の下端からの 29px は .band--upper の padding-top が持つ。
 */
.mv__thumbs {
	display: flex;
	justify-content: center;
	gap: var(--space-2xl);
	margin: 0;
	padding: 0 var(--gutter);
	list-style: none;
}

/* 枚数は管理画面しだい（Figma は3枚）。多くて収まらないときは縮める */
.mv__thumbs > li {
	flex: 0 1 170px;
	min-width: 0;
}

.mv__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 170 / 76;
	padding: 0; /* SWELL が button に padding を当てるので消す */
	overflow: hidden;
	border: 0;
	border-radius: 4px;
	background: none;
	opacity: 0.45;
	cursor: pointer;
	transition: opacity 0.4s var(--ease-soft);
}

.mv__thumb.is-active,
.mv__thumb:hover {
	opacity: 1;
}

.mv__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
 * カテゴリ（6枚）
 * 見出し y754 ／ カード y809・y1179、x420・780・1140
 * = 360px の正方形を 3列（横の隙間なし）x 2段（縦 10px）
 * ========================================================== */

.category {
	margin-top: var(--space-xl);
}

.category__lead {
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: var(--midori-green-text); /* Figma 2055:189 #2f7b3b */
}

.category__grid {
	display: grid;
	grid-template-columns: repeat(3, 360px);
	gap: var(--space-xs) 0;
	justify-content: center;
	margin-top: var(--space-md);
}

/* --- カード ------------------------------------------------- */

.cat-card {
	position: relative;
	display: block;
	width: 360px;
	height: 360px;
	overflow: hidden;
	background: var(--midori-green);
	color: #fff;
	container-type: inline-size; /* 日本語の大きさをカード幅で決める（cqi） */
	--band-ratio: 0.0833; /* 左の帯の幅 ÷ カードの幅（30 / 360）。帯と黒のかぶせの境目はこの値で揃える */
}

/*
 * SWELL のリンク色と hover の薄まりを打ち消す。
 * ただし .cat-card 自体に opacity を書かないこと。
 * data-fx="up" の出現アニメーション（opacity 0 → 1）を打ち消してしまう
 * （motion.css より front-page.css のほうが後に読まれるため）。
 */
.cat-card,
.cat-card:hover {
	color: #fff;
	text-decoration: none;
}

.cat-card:hover {
	opacity: 1;
}

.cat-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 黒のかぶせ。左の帯（30px）には掛からない。
 * 濃さはカードごと（既定 25%、スポーツだけ 50%）。
 */
.cat-card::after {
	content: "";
	position: absolute;
	/*
	 * 左端は帯の右端と同じ位置から。帯はカードの幅に比例して細くなるので、
	 * ここを 30px 固定にしていると狭い画面で帯とのあいだに素の写真の縦筋が出る。
	 */
	inset: 0 0 0 calc(var(--band-ratio) * 100%);
	background: rgb(0 0 0 / var(--overlay, 25%));
	z-index: 1;
}

/*
 * 帯は列ごとに色が変わるのでカード側から受け取る。
 *
 * 触ると、この左端の帯がそのまま右へ伸びてカードを覆う。
 * 写真を消して下地の緑を出すのではなく、帯そのものが広がるので
 * 「左の色が流れてくる」ように見える。
 *
 * 幅は 100% にしておいて、横方向の scale で 30px 相当まで縮めてある。
 * width を動かすと毎フレーム描き直しになるが、scale なら合成で済んで滑らか。
 * 0.0833 は 30 / 360（帯の幅 ÷ カードの幅）。
 */
.cat-card__band {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	background: var(--band, #00783d);
	transform-origin: left center;
	scale: var(--band-ratio) 1;
	transition: scale 0.55s var(--ease-soft);
	z-index: 2;
}

.cat-card:hover .cat-card__band {
	scale: 1 1;
}

.cat-card__text {
	position: absolute;
	top: 0;
	left: var(--space-sm);
	z-index: 3;
	/*
	 * カンプに無い薄い影。写真の明るいところ（スポーツのユニフォームの白など）に
	 * 白字が乗っても読めるように（2026-09-24 クライアント依頼）。ぼかしだけで縁取りには見せない。
	 */
	text-shadow: 0 0 8px rgb(0 0 0 / 45%);
}

/*
 * Figma は行高 60px 固定。2行のカードで日本語の位置（top 119〜120）が
 * ちょうど合う。グルメだけ字が大きいので 55px をカード側から渡す。
 */
.cat-card__en {
	display: block;
	/* ⚠️ --en-size（グルメ 55px）を効かせないと、1440px 以上で「GOURMET＆」の＆が落ちて3行になる */
	font-size: min(var(--fs-cat-en), var(--en-size, 60px));
	font-weight: 700;
	line-height: 60px;
}

/*
 * 日本語はカードの幅に対して決める（Figma: 360px のカードに 35px ＝ 9.72%）。
 * 以前は画面幅（vw）で縮めていたので、1440px 未満ではカンプより小さく、
 * 1024px で 26px・768px で 20px まで落ちていた（2026-09-24 クライアント依頼
 * 「日本語をもう少し大きく」）。SP は responsive.css で別に決める。
 */
.cat-card__ja {
	display: block;
	font-size: min(35px, 100cqi * 35 / 360);
	font-weight: 700;
	line-height: 1.2;
}

/* 英字1行のカードは Figma の日本語が 63-64px の位置。行高60pxとの差を足す */
.cat-card--single-line .cat-card__ja {
	margin-top: 3px;
}

.cat-card__arrow {
	position: absolute;
	right: var(--space-xs);
	bottom: var(--space-xs);
	width: 60px;
	height: 60px;
	z-index: 3;
}