@charset "UTF-8";
/*
 * トップページ（メインビジュアル・カテゴリ以降のセクション）
 * front-page.css の続き。Figma「TOPページ-パソコン版」1920px 基準の実測値。
 */

/* ============================================================
 * 背景の飾り（葉・影）
 * Figma では TOPページフレーム直下に絶対座標で散らしてある。
 * .site-main を基準にした座標をインラインの --x / --y で受け取る。
 * ========================================================== */

/*
 * 重なりの決まり（.site-main が作るスタッキングコンテキストの中）
 *   -2 … 各帯の地色（.band::before / .band--upper::before / .ranking::before）
 *   -1 … 飾り（.deco-layer / .band__deco / .ranking__deco）
 *    0 … 本文
 * 飾りは地色より上・本文より下に入る。
 */
.deco-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

/*
 * ミウルの影だけは地色（-2）より後ろに敷く。
 * Figma でも影は帯や波の下に潜っていて、境界でスパッと切れている
 * （影1 は bg_pickup、影2 は bg_accessranking、影3 は ミウルのおうちの波、
 *   影4 は フッターの波 に隠れる）。
 * 葉は従来どおり地色の前（-1）。
 */
.deco-layer--behind {
	z-index: -3;
	/*
	 * フッター脇の影は波と重なる位置にある。.site-main の下端で切ると
	 * 波の手前で直線的に切れてしまい、波の谷間から覗かない。
	 * 下だけ外へ逃がす（左右は従来どおり切る）。
	 * フッターは .site-main より手前に描かれるので、はみ出した影は波の後ろに入る。
	 */
	inset: 0 0 -160px 0;
}

/*
 * Figma の元画像には不透明度が乗っていないので、--op で受け取って掛ける
 * （書き出した合成画像なら適用済みだが、それだと白地が付いてしまう）。
 */
/*
 * 置き方は2通り（midonavi_deco_pos() がどちらかを渡してくる）。
 *   --x … 左端からの距離（画面の左半分にある飾り）
 *   --r … 右端からの距離（右半分にある飾り）
 * Figma の 1920px 基準の座標をそのまま left に入れると、画面がそれより狭いときに
 * 右側の飾りが画面の外へ逃げてしまうため。
 */
.deco-layer__item {
	position: absolute;
	left: var(--x, auto);
	right: var(--r, auto);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	max-width: none;
	object-fit: cover;
	opacity: var(--op, 1);
}

/* ============================================================
 * 帯（背景色のついたセクションのまとまり）
 * Figma の bg_* は幅 1870px で、左右どちらかに 50px の余白と角丸 50px を持つ
 * ========================================================== */

.band {
	position: relative;
}

.band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
}

/*
 * bg_news (6136:428)。MV の CTA から イベント情報の終わりまでを覆う。
 * 素の background ではなく ::before に持たせる。background だと
 * 負の z-index の飾りより上に描かれてしまい、葉が隠れるため。
 */
.band--upper {
	position: relative;
	/* 帯は MV 写真の下端 y616 から。CTA はそこから 29px 下 */
	padding-top: 29px;
}

.band--upper::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, var(--midori-band-light), rgb(202 238 171 / 30%));
	z-index: -2;
}

/* ピックアップ＋イベント情報：右に50px余白、右側だけ角丸 */
.band--pickup {
	margin-top: var(--space-xl);
	padding-block: var(--space-7xl) 0;
}

.band--pickup::before {
	inset: 0 50px 0 0;
	background: var(--midori-bg-soft);
	border-radius: 0 50px 50px 0;
}

/*
 * 帯の形で切り抜く飾り。Figma では bg_pickup をマスクにしているので、
 * 同じ形・同じ角丸の箱で overflow:hidden して同じ見え方にする。
 * ::before より後ろの要素なので、地色の上・本文の下に入る。
 */
.band__deco {
	position: absolute;
	inset: 0 50px 0 0;
	border-radius: 0 50px 50px 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.band__deco img {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	height: var(--h);
	max-width: none;
	opacity: 0.5;
}

/* お知らせ＋ランキング：全幅のグラデーション */
.band--news {
	padding-block: var(--space-7xl) 0;
}

.band--news::before {
	background: linear-gradient(to bottom, rgb(202 238 171 / 30%), var(--midori-band-light));
}

/* ミウルのおうち＋モデルコース：全幅、下だけ角丸。上端は波でつなぐ */
.band--miuru {
	margin-top: var(--space-10xl);
	padding-bottom: var(--space-2xl);
}

.band--miuru::before {
	/*
	 * 上端の波も地色と同じこの1枚に描く（2026-09-30）。波を別の要素（.band__wave）に置いていたときは、
	 * 地色だけがスクロールでせり上がって出るので波と地色が別々に見えた。2枚を一緒に動かしても、
	 * 半透明の途中で重なり目が線になって見えるので、1枚にまとめた。
	 * 地色は 184px から（波の画像が全幅で塗られているのは 184px まで。185px から下は右半分が透明）。
	 * .band__wave は高さ（後続の位置）だけを受け持つ。
	 */
	top: 0;
	background:
		url("../images/bg-wave-miuru.png") center top / max(1920px, 100%) 191px no-repeat,
		linear-gradient(transparent 184px, var(--midori-bg-soft) 184px);
	border-radius: 0 0 50px 50px;
}

/*
 * 1920x191（上が透明・下が #caeeab）。
 * Figma では波の 68px 地点から見出しが始まるので、その分だけ後続を持ち上げる。
 */
.band__wave {
	height: 191px;
	margin-bottom: -123px;
	/*
	 * 絵は .band--miuru::before が描く（地色と一緒にフェードさせるため）。ここは高さだけ。
	 * ⚠️ 波の横幅は max(1920px, 100%)。原寸のままだと広い画面で波の左右が途切れ、地色だけが四角く飛び出す。
	 */
}

/* ============================================================
 * ピックアップ
 * ========================================================== */

.pickup {
	padding-bottom: var(--space-7xl);
}

.pickup .carousel {
	margin-top: var(--space-5xl);
}

/* ============================================================
 * イベント情報
 * ========================================================== */

.event-info {
	padding-bottom: var(--space-6xl);
}

.event-info .carousel {
	margin-top: var(--space-5xl);
}

/* ============================================================
 * お知らせ
 * ========================================================== */

.news {
	padding-bottom: var(--space-10xl);
}

/* Figma: 1300x382 の白パネル。3行ぶんの高さを下限として固定する */
.news__list {
	width: var(--content-width);
	min-height: 382px;
	margin: var(--space-5xl) auto 0;
	padding: var(--space-xl) var(--space-4xl);
	border-radius: 20px;
	background: #fff;
}

/* Figma の件と件の間隔は 15px。スケールでいちばん近い 16px を当てる */
.news-item + .news-item {
	margin-top: var(--space-sm);
}

.news-item__link {
	display: block;
	color: inherit;
}

.news-item__head {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

/*
 * Figma の Frame44: #67b37e / padding 10-5 / 角丸20px / 20px bold 白。
 * 中の文字は行高 1.2（テキストノードの高さが 24px）。
 * ここを 1.45 にしていたぶんラベルが 37px に膨らみ、3件ぶんで 15px 余分に高くなっていた。
 */
.news-item__label {
	flex: none;
	display: grid;
	place-items: center;
	padding: var(--space-3xs) var(--space-xs);
	border-radius: 20px;
	background: var(--midori-green-light);
	color: #fff;
	font-size: var(--fs-news-label);
	font-weight: 700;
	line-height: 1.2;
}

.news-item__title {
	font-size: var(--fs-news-title);
	font-weight: 700;
	line-height: 1.6;
	color: #000; /* Figma 2026:273: 黒の太字 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.news-item__text {
	margin-top: var(--space-xs);
	font-size: var(--fs-news-body);
	line-height: 1.75;
	color: #000; /* Figma 2026:276: 黒 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* ============================================================
 * アクセスランキング
 * Figma: タブ 276x91 が2つ隣接、その下に 1870x5 の下線
 * ========================================================== */

/*
 * bg_accessranking (2026:160)。Figma では x50 y3901 の 1870x766、左側だけ角丸。
 * セクション本体は y3990 から始まるので、地色はその 89px 上から敷く。
 */
.ranking {
	position: relative;
	padding-bottom: var(--space-6xl);
}

.ranking::before {
	content: "";
	position: absolute;
	inset: -89px 0 0 50px;
	background: var(--midori-bg-soft);
	border-radius: 50px 0 0 50px;
	z-index: -2;
}

/* 地色と同じ形で切り抜く飾り（002 1 / 002 2） */
.ranking__deco {
	position: absolute;
	inset: -89px 0 0 50px;
	border-radius: 50px 0 0 50px;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

/*
 * Figma は 741x773 の枠の中で 719.7x684.7 を -94.69度 回している。
 * 枠を置いて中央で回すと同じ見え方になる。
 */
.ranking__deco-box {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: grid;
	place-items: center;
	width: var(--w);
	height: var(--h);
}

.ranking__deco-box img {
	width: 720px;
	height: 685px;
	max-width: none;
	rotate: -94.69deg;
	opacity: 0.5;
}

.ranking__tabs {
	display: flex;
	justify-content: center;
	/* 英字の下端 4125 → タブ 4185 */
	margin-top: var(--space-5xl);
}

/*
 * Figma: 276x91 / 5px #0e682e の枠 / 上だけ角丸50px
 *   選択中 … 地色 #e2e76e
 *   それ以外 … 白
 * 文字はどちらも #2f7b3b の 20px bold。
 * 下の罫線（Rectangle 118）と枠が重なるので、下辺の線は持たせない。
 */
.ranking__tab {
	width: 276px;
	height: 91px;
	border: 5px solid var(--midori-green-deep);
	border-bottom: 0;
	border-radius: 50px 50px 0 0;
	background: #fff;
	color: var(--midori-green-text);
	font-size: var(--fs-tab);
	font-weight: 700;
}

.ranking__tab.is-active {
	background: var(--midori-yellow-green);
	color: var(--midori-green-text);
}

/*
 * ランキングは3枚を中央寄せ。横スクロールも自動送りもしない。
 *
 * ⚠️ flex ＋ カード 300px 固定だと、本文幅が 932px（300×3＋隙間）を下回った時点で
 *    **中央寄せのまま左右にはみ出して切れる**（834px で左 -56px / 右 +57px あふれていた）。
 *    格子にして「入るだけ並べる」ようにすると、狭い幅では自然に段が折れる。
 *    1300px では今までどおり3枚が横に並ぶ。
 */
.card-list--ranking {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 300px));
	justify-content: center;
	overflow-x: visible;
	gap: var(--space-sm);
	width: var(--content-width);
	margin: 0 auto;

	/*
	 * `.card-list` が左右に空けている 80px は**カルーセルの矢印のための逃げ**。
	 * ランキングに矢印は無いので外す。残したままだと内寸が 160px 削られ、
	 * 3枚入る幅（1024px）でも2段に折れてしまう。
	 */
	padding-inline: 0;
	padding-top: var(--space-xl);
	/* Rectangle 118（1870x5・#0e682e） */
	border-top: 5px solid var(--midori-green-deep);
}

/* 格子の列幅に合わせる（カード側の 300px 固定を外す） */
.card-list--ranking .info-card {
	width: 100%;
}

.card-list--ranking .info-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 260 / 147;
}

.card-list--ranking[hidden] {
	display: none;
}

/* ============================================================
 * 緑区観光マップ
 * ========================================================== */

.map-sec {
	padding-block: var(--space-8xl) 0;
	text-align: center;
}

.map-sec__frame {
	width: var(--content-width);
	/* 英字の下端 4891 → 地図 4937 */
	margin: var(--space-3xl) auto 0;
	border-radius: 10px;
	overflow: hidden;
}

.map-sec__frame img {
	width: 100%;
	height: auto;
}

/* Google マップの埋め込み。枠はカンプの地図画像と同じ比率、狭い画面では操作できる高さを残す */
.map-sec__iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1300 / 505;
	min-height: 360px;
	border: 0;
}

/*
 * 横幅は 1000px まで（2026-09-30 指示表 行22「横幅が大きすぎる」）。
 * 本文幅いっぱい（1300px）だと画面の大半が地図になり、スクロールの途中で必ず地図に掛かる。
 * ⚠️ 高さは以前のまま（本文幅 x 505/1300）。トップの飾りは絶対座標なので、地図の高さが変わると下の飾りがずれる。
 */
.map-sec__frame {
	position: relative;
	max-width: 1000px;
}

.map-sec__iframe {
	aspect-ratio: auto;
	height: max(360px, calc(min(100vw - var(--gutter) * 2, 1300px) * 505 / 1300)); /* --content-width の % はここでは高さ基準になるので vw で書く */
}

/* 押すまで地図にホイール・タッチを渡さない覆い。JS がある（html.has-js）ときだけ出す */
.map-sec__guard {
	display: none;
}

.has-js .map-sec__guard {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 0 var(--space-sm); /* SWELL の button の padding を打ち消す */
	border: 0;
	background: transparent;
	cursor: pointer;
}

.map-sec__guard span {
	padding: var(--space-3xs) var(--space-sm);
	border-radius: 999px;
	background: rgb(0 0 0 / 60%);
	font-size: 14px;
	color: #fff;
	opacity: 0;
	transition: opacity 0.3s var(--ease-soft);
}

.map-sec__guard:hover span,
.map-sec__guard:focus-visible span {
	opacity: 1;
}

/* タッチの端末ではホバーが無いので、案内を最初から出しておく */
@media (hover: none) {
	.map-sec__guard span {
		opacity: 1;
	}
}

.map-sec__frame.is-active .map-sec__guard {
	display: none;
}

/* ============================================================
 * ミウルのおうち
 * ========================================================== */

.miuru {
	text-align: center;
}

/* 英字の下端から 23px（Figma: 6161 → 6184） */
.miuru__chara {
	margin-top: var(--space-lg);
}

.miuru__chara img {
	width: 261px;
	height: 287px;
	object-fit: contain;
	transition: scale 0.35s var(--ease-soft);
}

/*
 * イラストは /miuru-profile/ へのリンク（依頼表 No.12）。
 * 触ると少し大きく、押すと見出しと同じ系統の「ぽよん」と弾む動き（2026-09-29 依頼）。
 * 弾み終わってから移動するのは js/front-page.js。サイト共通の「薄くなる」ホバーはここでは使わない。
 */
.miuru__chara a,
.miuru__chara a:hover {
	display: inline-block;
	opacity: 1;
}

.miuru__chara a:hover img {
	scale: 1.04;
}

.miuru__chara img.is-boing {
	animation: mdn-boing 0.5s var(--ease-soft);
}

@keyframes mdn-boing {
	0% {
		scale: 1.04;
	}

	30% {
		scale: 0.9;
	}

	65% {
		scale: 1.1;
	}

	100% {
		scale: 1;
	}
}

/*
 * ふわふわ揺れる（Figma SP の演出メモ 4310:533「ミウル ふわふわ揺れる動き」）。
 * 画像の scale（ホバー・弾む）とぶつからないよう、外側のリンクの translate で上下させる。
 * 親の .miuru__chara は data-fx（出る演出）で translate を使うので、そこにも置かない（CLAUDE.md の罠3）。
 */
.miuru__chara a {
	animation: mdn-miuru-float 3.2s ease-in-out infinite;
}

@keyframes mdn-miuru-float {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -10px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.miuru__chara img {
		transition: none;
	}

	.miuru__chara a {
		animation: none;
	}

	.miuru__chara a:hover img {
		scale: 1;
	}
}

/* キャラの下端から 70px（Figma: 6471 → 6541） */
/* アイコンは 68px の丸。間隔は Figma の画像（4つで 317px）と同じくらい */
.miuru__sns {
	display: flex;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-6xl);
	padding: 0;
	list-style: none;
}

.miuru__sns img {
	display: block;
	width: 68px;
	height: 68px;
}

/* ============================================================
 * モデルコース
 * Figma: カード 300x388 / 白 / 角丸20px
 * ========================================================== */

.course {
	margin-top: var(--space-9xl);
	text-align: center;
}

.course .carousel {
	margin-top: var(--space-5xl);
}
/* ============================================================
 * 下部バナー（2列 x 2段）
 * Figma: 528x170 / x420・972 / y7583・7775
 * ========================================================== */

.banners {
	padding-block: var(--space-8xl) var(--space-4xl);
}

/*
 * Figma は 528px を2列。⚠️ px で固定すると本文幅が 1080px を下回った時点で
 * **中央寄せのまま左右にはみ出す**（834px で ±130px あふれていた）。
 * 上限 528px の可変列にして、入らなくなったら段を折る。
 */
.banners__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 528px));
	gap: var(--space-lg);
	justify-content: center;
}

.banners__list img {
	width: 100%;
	height: auto;
	border-radius: 10px;
}