@charset "UTF-8";
/*
 * レスポンシブ
 *
 * Figma: SP-TOPページ（別ファイル fOQGMBq84Giwoq8caZhVJ0 の 2026:24 / 393 x 6007）
 *
 * ⚠️ カンプの px は写していない（CLAUDE.md の「絶対値は取らない」方針）。
 * カンプから取ったのは **並び方**（何列になるか・どこで縦積みになるか）と、
 * 文字や余白の「大きさの程度」まで。実際の寸法はコンテナと中身に決めさせる。
 *
 * 段は2つ。
 *   〜767px  … SP。列を減らして縦に積む
 *   768px〜  … PC のレイアウトのまま。幅は --content-width が吸収する
 * 中間（タブレット）に専用の段は作らない。PC 用に固定していた寸法を
 * ここで可変に直しているので、そのまま縮んで収まる。
 *
 * このファイルは **front-page 系より後**に読み込む（functions.php）。
 * PC 用に書いた固定値を打ち消す側なので、順番が意味を持つ。
 */

/* ============================================================
 * 1. 画面の横端に中身がくっつかないようにする
 *
 * 帯・波・メインビジュアルのような「地」は全幅のままでよい。
 * それ以外（カード・文字・ボタン）は必ず --gutter ぶん内側に入れる。
 * ========================================================== */

/*
 * 本文幅に収めて、画面の縁に触れないようにする。
 * どれも幅の指定がなく、親（＝全幅）いっぱいに広がっていた。
 */
.banners__list,
.map-sec__frame,
.miuru__chara {
	width: var(--content-width);
	margin-inline: auto;
}

/*
 * ボタンも本文幅より外へ出さない（中央寄せは margin-inline: auto で確実に）。
 *
 * text-align も自分で持たせる。親から継承すると、置かれた場所によって
 * 同じ部品が中央だったり左寄せだったりする（`.btn-outline` でそうなっていた）。
 * 1行のときは flex/grid の中央寄せが効いているので見た目に差は出ないが、
 * 折り返した2行目から左に寄ってしまう。
 */
.btn-yellow,
.btn-green,
.btn-access {
	width: min(750px, var(--content-width));
	margin-inline: auto;
}

/*
 * 白い枠のボタンは「◯◯一覧はこちら」の小さいボタン（Figma: 324x93）。
 * 750px にすると本文幅いっぱいの帯になり、カードの下で浮いて見える。幅は中身なりで、上限だけ持つ。
 */
.btn-outline {
	width: fit-content;
	max-width: var(--content-width);
	margin-inline: auto;
}

.btn-yellow,
.btn-green,
.btn-outline {
	text-align: center;
}

/* ランキングのタブ・カード、リード文も端にくっつけない */
.ranking__tabs,
.card-list--ranking,
.category__lead {
	width: var(--content-width);
	margin-inline: auto;
}

/*
 * カテゴリの6枚。カンプは 360px の正方形 ×3列だが、
 * 固定のままだと 1140px 未満で本文幅から溢れて端にはみ出す。
 * 上限だけ 360px にして、狭ければ縮ませる。
 */
.category__grid {
	grid-template-columns: repeat(3, minmax(0, 360px));
	width: var(--content-width);
	margin-inline: auto;
}

.cat-card {
	width: auto;
	height: auto;
	aspect-ratio: 1;
}

/*
 * カルーセルの矢印は本文幅の **外側** に置いてある（カンプがそう）。
 * 本文幅 1300px ＋ 矢印 60px ×2 ＋ 余白 20px ×2 = 1460px より画面が狭いと
 * 矢印が画面の外へ出て押せなくなる（横あふれは overflow-x: clip で切っているため）。
 * 収まらない幅では内側に入れて、カードの端に少し重ねる。
 */
@media (max-width: 1460px) {

	.carousel__arrow--prev {
		right: auto;
		left: 0;
	}

	.carousel__arrow--next {
		left: auto;
		right: 0;
	}

	/*
	 * 矢印がカードの中身を隠しすぎないよう、その幅だけ内側に寄せる。
	 *
	 * ⚠️ ランキングは矢印を持たないので外す。含めると内寸が 160px 削られ、
	 *    3枚並ぶ幅（1024px）でも2段に折れてしまう。
	 *    front-page-sections.css 側の `padding-inline: 0` は、**このファイルが
	 *    あとに読まれるため同じ詳細度では勝てない**。原因のこちらで除く。
	 */
	.card-list:not(.card-list--ranking),
	.pickup__list {
		padding-inline: var(--space-7xl);
	}
}

/* ============================================================
 * 2. 高さ・画像の固定値を可変に直す
 *    （タブレット幅で溢れないように。SP 専用の指定ではない）
 * ========================================================== */

.btn-access {
	height: auto;
	min-height: 170px;
}

/*
 * 帯の下の余白を揃える。
 * ピックアップ帯とお知らせ帯は中身（.pickup / .ranking）が 72〜80px 持っていたが、
 * ミウル帯だけ 40px しかなく、ボタンが帯の下端に詰まって見えた。
 * 帯の側に持たせて、どの帯も同じだけ空くようにする。
 */
.band--miuru {
	padding-bottom: var(--space-7xl);
}

/*
 * ヘッダーのロゴとサイト名。合わせて 859px あり、そのままだと
 * 1000px を切ったあたりで右の Search / Language / MENU に重なる。
 * 画面幅に対する割合で縮め、広い画面では原寸で止める。
 */
.site-header__logo {
	width: clamp(110px, 22vw, 340px);
}

.site-header__sitename {
	width: clamp(120px, 34vw, 519px);
}

/* 見出しの画像。原寸より広い画面では原寸、狭ければ縮む */
.sec-head__img {
	max-width: 100%;
	height: auto;
}

/*
 * ミウルの SNS は4つのアイコンが **1枚の画像**（317x68）になっている。
 * 個別のリンクは張れないので、まとめて1つのボタンとして扱う。
 * 狭い画面でも潰れないよう、幅だけ可変にして高さは比率に任せる。
 */
/* 地図・写真など、本文幅いっぱいに置いていたもの */
.map-sec__frame img,
.miuru__chara img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
 * 3. SP（〜767px）
 * ========================================================== */

@media (max-width: 767px) {

	:root {
		/* 画面が狭いぶん、左右の余白を詰める */
		--gutter: 16px;
	}

	/* --- ヘッダー ------------------------------------------- */

	:root {
		--header-height: 57px;
	}

	.site-header__inner {
		padding-inline: var(--space-2xs) var(--space-xs);
	}

	/* ロゴとサイト名は縦に重ねず、まとめて縮める */
	.site-header__brand {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.site-header__utils {
		gap: var(--space-xs);
	}

	.header-util__icon {
		width: 22px;
		height: 22px;
	}

	.header-util__icon--menu {
		width: 34px;
		height: 36px;
	}

	.header-util__label {
		font-size: 10px;
	}

	/* --- ヘッダーのパネル ------------------------------------ */

	/* 画面が狭いので、検索パネルは端から端まで使う */
	.search-panel {
		right: var(--gutter);
		left: var(--gutter);
		width: auto;
	}

	.search-panel__form {
		padding: var(--space-md) var(--space-sm) var(--space-sm);
	}

	/*
	 * メニューは **右から出るドロワー**（Figma: SP-menu 4302:404）。
	 * 幅いっぱいに降ろすと本文が完全に隠れるので、右側だけを覆う。
	 * 左側だけ角丸、背面のページは見えたままにして「戻れる」ことを示す。
	 */
	.menu-panel {
		/*
		 * ⚠️ `fixed` にしない。fixed は **画面の上端**が基準なので、
		 * ログイン中に WordPress の管理バー（32px / 狭い画面は 46px）が入ると
		 * ヘッダーだけが下へずれて、メニューがヘッダーに被る。
		 * ヘッダーを基準にした `absolute` + `top: 100%` なら、
		 * 管理バーがあってもなくても必ずヘッダーのすぐ下から出る。
		 * （.site-header は sticky なので、スクロールしても画面に残る）
		 */
		position: absolute;
		top: 100%;
		right: 0;
		bottom: auto;
		left: auto;
		width: min(362px, 92vw);
		/*
		 * 高さは **画面いっぱいに伸ばさず一定**にして、中身が多ければ中でスクロールさせる。
		 * 下にも余白を残すことで、画面に貼り付いた板ではなく浮いたパネルに見える。
		 * dvh はアドレスバーの出入りで高さが変わる端末向け（vh のほうは古い環境の受け皿）。
		 * 管理バーが出ているぶんは --admin-bar が持つ。
		 */
		height: min(697px, calc(100vh - var(--header-height) - var(--admin-bar) - var(--space-md)));
		height: min(697px, calc(100dvh - var(--header-height) - var(--admin-bar) - var(--space-md)));
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		border-radius: 50px 0 0 50px;
		/* 上から下ではなく横から。clip-path はここでは使わない */
		clip-path: none;
		translate: 100% 0;
		transition: translate 0.2s var(--ease-out);
	}

	.menu-panel.is-open {
		translate: none;
		transition-duration: 0.3s;
		transition-timing-function: var(--ease-soft);
	}

	/* パネルごと動くので、中身を別に動かす必要はない */
	.menu-panel__inner,
	.menu-panel.is-open .menu-panel__inner {
		translate: none;
		transition: none;
	}

	/* 飾りは右上と左下に置く（カンプの 004 3 / 004 2） */
	.menu-panel__deco img {
		width: 119%;
		height: auto;
	}

	.menu-panel__deco img:first-child {
		right: -60%;
		top: -28%;
	}

	.menu-panel__deco img:last-child {
		left: -54%;
		top: 56%;
	}

	.menu-panel__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		row-gap: var(--space-lg);
		width: auto;
		margin-inline: 0;
		padding: var(--space-lg) var(--space-md) var(--space-2xl);
	}

	.menu-panel__block {
		grid-row: auto;
		grid-template-rows: auto;
	}

	/*
	 * 3列を2列に畳む。単純に流し込むと列の意味が崩れるので、
	 * カンプと同じ組み合わせになるよう位置を指定する。
	 *   MENU      … 左列にカテゴリと案内を続けて、右列に各地区
	 *   関連リンク … 左列に観光協会と商工会、右列に関連サイト
	 */
	/*
	 * 等分にすると左列が狭く、「八王子観光コンベンション」のような
	 * 長い項目がことごとく折り返す。カンプと同じく左を広く取る。
	 */
	/*
	 * 等分。左を広げると右列の英字（CityOffice Sagamihara など）が軒並み折り返し、
	 * 右を広げると左列の「八王子観光コンベンション」が折り返す。
	 * 等分＋文字を一段落とすのが、折り返しがいちばん少なかった。
	 */
	.menu-panel__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--space-2xs);
		align-items: start;
	}

	/* ぶら下がりのインデントも、狭いぶん浅くする */
	.menu-panel__sub {
		padding-left: 0.6em;
	}

	.menu-panel__block:first-child .menu-panel__col:nth-child(1) { grid-area: 1 / 1; }
	.menu-panel__block:first-child .menu-panel__col:nth-child(2) { grid-area: 2 / 1; }
	.menu-panel__block:first-child .menu-panel__col:nth-child(3) { grid-area: 1 / 2 / span 2; }

	.menu-panel__block:last-child .menu-panel__col:nth-child(1) { grid-area: 1 / 1; }
	.menu-panel__block:last-child .menu-panel__col:nth-child(2) { grid-area: 1 / 2; }
	.menu-panel__block:last-child .menu-panel__col:nth-child(3) { grid-area: 2 / 1; }

	/* カンプでは項目が続けて並ぶので、PC 用の空行は詰める */
	.menu-panel__spacer {
		display: none;
	}

	.menu-panel__col {
		line-height: 1.9;
	}

	/* --- フッター -------------------------------------------- */

	/*
	 * カンプは2列。PC の4列をそのまま畳むと列の意味が変わるので、
	 * 「サイト内の案内」と「カテゴリ・言語」で2列に寄せる。
	 */
	.site-footer__main {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-lg);
	}

	.site-footer__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--space-sm);
	}

	.site-footer__contact {
		padding: var(--space-sm);
		font-size: 12px;
	}

	.site-footer__column {
		line-height: 2.2;
	}

	.site-footer__spacer {
		height: 0;
	}

	.site-footer__copyright {
		line-height: 2;
	}

	.site-footer__wave {
		height: 46px;
		background-size: 1400px 94px;
	}

	.site-footer__body {
		padding-block: var(--space-xl) var(--space-sm);
	}

	/* --- メインビジュアル ------------------------------------ */

	/*
	 * SP は管理画面の SP 画像（カンプ 393x345 の比率）を <picture> で出す。
	 * SP 画像が無いスライドは PC 画像を同じ枠に切り抜く。
	 */
	.mv__stage {
		height: auto;
		aspect-ratio: 393 / 345;
	}

	/* ボタンは写真の幅に合わせて縮める。飾りのミウルはボタンの上にのぞかせる（旧サイトと同じ） */
	.mv__link {
		width: min(90%, 360px);
	}

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

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

	/* SP はすぐ下にサムネイルがあるのでドットは出さない（ボタンと重なる） */
	.mv__dots {
		display: none;
	}

	.mv__link-body {
		min-width: 0;
		padding: var(--space-xs) var(--space-md);
	}

	.mv__link--deco::after {
		top: 0;
		right: 50%;
		width: 110px;
		height: 60px;
		background-image: url("../images/mv-miuru-tap.png");
		translate: 50% -85%;
	}

	.mv__thumbs {
		gap: var(--space-xs);
	}

	.band--upper {
		padding-top: var(--space-md);
	}

	/* --- カテゴリ6枚 ----------------------------------------- */

	/*
	 * カンプは 3列 x 2段の横長タイル。正方形をやめて横長にする。
	 * 幅は画面いっぱいに 3等分（カンプも左右の余白なし）。
	 */
	/* もともと本文幅の外にいるので、負のマージンで広げる必要はない */
	.category__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2px;
	}

	/*
	 * 360px 未満（320px の端末など）は3列だとカードが 90px しかなく、
	 * 「GOURMET＆」の＆が落ちて3行になり、日本語が右下の矢印に重なる。2列にする。
	 */
	@media (width < 360px) {
		.category__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	.cat-card {
		width: auto;
		height: auto;
		aspect-ratio: 131 / 115;
	}

	.cat-card__text {
		left: var(--space-2xs);
	}

	/*
	 * 英字は「GOURMET＆PRODUCTS」のように長いものがあり、
	 * 大きいままだと3行になって右下の矢印に重なる。カード幅に対して収まる大きさに。
	 * --en-size はカード側から渡ってくる PC 用の値なので、ここで上書きする。
	 */
	/*
	 * ⚠️ 320px 前後ではカードが 140px ほどしかなく、最小の 17px でも「PRODUCTS」が
	 * カードの右端から 11px はみ出して切れていた。カードの幅に対する上限（cqi）も掛けて、
	 * 狭いときだけ縮める（375px 以上はこれまでどおり）。
	 */
	.cat-card {
		container-type: inline-size;
	}

	.cat-card__en {
		/* いちばん長い行「GOURMET＆」（約 5.9em）と左の 8px がカード幅に収まる上限 = 17% − 1.5px */
		font-size: min(var(--fs-cat-en), calc(17cqi - 1.5px));
		line-height: 1.15;

		/*
		 * 「GOURMET＆」が箱の幅より 1px ほど広く、＆だけ次の行に落ちて3行になり、
		 * 日本語が右下の矢印に重なっていた（360〜400px）。字間をわずかに詰めて2行に収める。
		 */
		letter-spacing: -0.02em;
	}

	/*
	 * SP はカードが 110〜130px しかなく、カンプの比率（9.72%）では 11px ほどになって読めない。
	 * 比率を上げる（12.5%）。375px で 13.5px・414px で 15px・320px（2列）で 17px。
	 * 上限は「グルメ・特産品」（7字）と左の 8px がカード幅に収まるところ。
	 */
	.cat-card__ja {
		font-size: clamp(13px, 12.5cqi, 24px); /* 上限は PC 側（768px で 23px）と段差が出ない値 */
		line-height: 1.3;
	}

	.cat-card--single-line .cat-card__ja {
		margin-top: 0;
	}

	.cat-card__arrow {
		right: var(--space-3xs);
		bottom: var(--space-3xs);
		width: 26px;
		height: 26px;
	}

	/* 帯は 30px も要らない */
	.cat-card {
		--band-ratio: 0.06;
	}

	/* --- ボタン ---------------------------------------------- */

	/*
	 * PC は 750x90〜170 の大きなボタンに 30px の文字。
	 * そのままだと文字がボタンから溢れるので、高さは中身なり、文字は読める最小限に。
	 */
	.btn-yellow,
	.btn-green {
		height: auto;
		min-height: 56px;
		padding: var(--space-2xs) var(--space-sm);
		border-radius: 14px;
		line-height: 1.4;
		text-align: center;
	}

	.btn-yellow {
		gap: var(--space-2xs);
	}

	.btn-yellow__icon {
		width: 26px;
		height: 26px;
	}

	.btn-outline {
		height: auto;
		min-height: 48px;
		padding-inline: var(--space-lg);
	}

	/*
	 * アクセスのバナーは中身を絶対配置で置いているが、
	 * 座標が 750px 幅を前提にしている。SP では横並びに組み直す。
	 */
	/* 左に「日本語（画像）＋英字」、右に地図。地図は2行ぶんにまたがる */
	.btn-access {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title map"
			"en    map";
		align-items: center;
		gap: 0 var(--space-2xs);
		height: auto;
		min-height: 0;
		padding: var(--space-xs) var(--space-sm);
		border-radius: 14px;
	}

	.btn-access__title,
	.btn-access__en,
	.btn-access__map {
		position: static;
		top: auto;
		left: auto;
		right: auto;
	}

	.btn-access__title {
		grid-area: title;
		width: 100%;
		max-width: 216px;
		height: auto;
	}

	.btn-access__en {
		grid-area: en;
		padding-left: var(--space-2xl);
		font-size: 12px;
	}

	.btn-access__map {
		grid-area: map;
		width: 76px;
		height: auto;
	}

	/* --- 見出し ---------------------------------------------- */

	.sec-head__img {
		width: min(240px, 62vw);
	}

	.sec-head--map .sec-head__img {
		width: min(280px, 72vw);
	}

	.sec-head__en {
		font-size: 13px;
	}

	.sec-head__icon {
		width: 52px;
		height: 52px;
	}

	.sec-head--map .sec-head__row {
		margin-right: 8px;
	}

	/* --- 帯 --------------------------------------------------- */

	/*
	 * ⚠️ 帯の中の飾りを切り抜く箱（.band__deco / .ranking__deco）も地色と同じ形にそろえる。
	 *    地色だけ全幅にしていたとき、飾りの箱が PC の形（片側 50px 空け・角丸 50px・ランキングは上へ 89px はみ出し）のまま残り、
	 *    その縁が帯の上に段差として見えていた（2026-09-28 依頼表 No.20「ランキングのつなぎ目がガタつく」）。
	 */
	.band--pickup::before,
	.ranking::before,
	.band__deco,
	.ranking__deco {
		inset: 0;
		border-radius: 0;
	}

	/* 帯の上下を同じだけ空ける。PC の 80px は狭い画面では大きすぎる */
	.band--pickup,
	.band--news {
		padding-block: var(--space-4xl) 0;
	}

	.band--miuru {
		padding-bottom: var(--space-4xl);
	}

	/* 中身が持っている下余白も、帯に合わせて詰める */
	.pickup,
	.ranking {
		padding-bottom: var(--space-4xl);
	}

	/* --- カルーセル ------------------------------------------- */

	/*
	 * カンプは「1枚を大きく見せて、左右に丸い矢印」。
	 * 矢印はコンテンツの外に置けないので、カードの上に重ねる。
	 */
	.carousel {
		width: 100%;
		padding-inline: var(--gutter);
	}

	.carousel__arrow {
		width: 42px;
		height: 42px;
		z-index: 3;
	}

	.carousel__arrow img {
		width: 42px;
		height: 42px;
	}

	.carousel__arrow--prev {
		right: auto;
		left: 0;
	}

	.carousel__arrow--next {
		left: auto;
		right: 0;
	}

	/*
	 * ⚠️ `:not(.card-list--ranking)` まで書く。1460px 以下の矢印よけ（padding 80px）が
	 *    `.card-list:not(…)`（0,2,0）で書かれていて、`.card-list` だけだと詳細度で負け、
	 *    SP でもイベント情報・モデルコースの左に 80px 空いていた（2026-09-29 SP 照合で発見）。
	 */
	.card-list:not(.card-list--ranking),
	.pickup__list {
		gap: var(--space-sm);
		padding-inline: var(--space-2xl);
	}

	/* カードは画面幅に対する割合で。1枚ずつ見せる／隣を覗かせる */
	.pickup-card {
		width: min(300px, 78vw);
		min-height: 0;
	}

	.pickup-card__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 280 / 205;
	}

	.info-card {
		width: min(260px, 68vw);
		min-height: 0;
	}

	.info-card__photo,
	.course-card__photo {
		width: 100%;
		height: auto;
		aspect-ratio: 260 / 147;
	}

	.course-card {
		width: min(280px, 72vw);
		min-height: 0;
	}

	/* --- お知らせ --------------------------------------------- */

	/*
	 * PC は白い箱に3行。カンプは1件ずつ独立したカード。
	 * 箱の背景を外して、各行をカードに見せる。
	 */
	.news__list {
		min-height: 0;
		padding: 0;
		border-radius: 0;
		background: none;
	}

	.news-item {
		padding: var(--space-sm);
		border-radius: 12px;
		background: #fff;
	}

	.news-item + .news-item {
		margin-top: var(--space-xs);
	}

	/* 日付とタイトルを縦に積む */
	.news-item__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2xs);
	}

	.news-item__title {
		-webkit-line-clamp: 3;
	}

	/* 本文はカンプに無い。狭い画面では日付とタイトルだけにする */
	.news-item__text {
		display: none;
	}

	/* --- アクセスランキング ----------------------------------- */

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

	.ranking__tab {
		width: auto;
		min-width: 0;
		flex: 1;
		height: auto;
		min-height: 48px;
		padding-inline: var(--space-2xs);
	}

	/*
	 * ランキングは横スクロールをやめて縦に積む（カンプもそう）。
	 * 3件しかないので、横に送らせるより並べたほうが見やすい。
	 */
	.card-list--ranking {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-sm);
		padding-inline: 0;
		overflow: visible;
	}

	.card-list--ranking .info-card {
		width: 100%;
	}

	/* 縦積みだと画像が小さいままなので、幅いっぱいに使う */
	.card-list--ranking .info-card__photo {
		width: 100%;
		aspect-ratio: 272 / 154;
	}

	.info-card__crown {
		width: 38px;
		height: 38px;
	}

	.info-card--ranked:first-child .info-card__crown {
		width: 44px;
		height: 44px;
	}

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

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

	.miuru__chara img {
		width: min(200px, 52vw);
	}

	/* --- バナー ----------------------------------------------- */

	/* カンプは1列 x 4段 */
	.banners__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-sm);
	}

	.banners__list img {
		width: 100%;
		height: auto;
	}

	/* --- 飾り ------------------------------------------------- */

	/*
	 * 背景の飾りは PC の座標のまま。SP では画面外に出たり大きすぎたりするので、
	 * まとめて小さくして、位置も画面幅に対する割合に置き換える。
	 */
	.deco-layer__item {
		width: calc(var(--w) * 0.45);
		height: calc(var(--h) * 0.45);
	}
}

/* ============================================================
 * SP でもカード・アイコンは2列（2026-09-29 クライアント修正 PDF 全ページ共通）
 *
 * 「モバイルで1つずつ縦に並ぶとスクロールが増えて煩雑」への対応。
 * auto-fill / auto-fit の最小幅だと 375px 前後で1列に落ちるので、SP では列数を2に決め打つ。
 * 文字が主役のもの（紹介カード feature-cards・横長のリンクカード・バナー）は1列のまま。
 * セレクタは元の指定と同じ詳細度にそろえている（:has() 付きのタイルなど）。
 * ========================================================== */
@media (max-width: 767px) {

	.card-grid,
	.archive-grid,
	.event-cards,
	.person-cards,
	.district-cards,
	.tile-cards,
	.tile-cards:has(> :nth-child(5)),
	.card-list--ranking,
	.entry-body .is-style-gourmet-tiles > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-md) var(--space-xs);
	}

	/* 奇数個のとき最後の1枚が左に寄って右が空くのは、2列の格子ではふつうの見え方なのでそのまま
	   （イベントカレンダーの月ごとのカードだけは中央に寄せる。この下の末尾「イベントカレンダー」） */

	/*
	 * トップのお知らせ〜ランキングの間。PC の 160px は背景の帯・飾りの位置合わせの値なので、SP だけ詰める
	 * （SP の Figma は約 40px。160px だと「一覧はこちら」の下に大きな空白が出ていた）
	 */
	.news {
		padding-bottom: var(--space-3xl);
	}

	/* 各地区のカード: 幅が半分になると帯が写真の大半を覆うので、写真を縦に伸ばし帯の文字を一段小さく */
	.district-card__photo,
	.entry-body .is-style-gourmet-tile .wp-block-image img {
		aspect-ratio: 4 / 3;
	}

	/* グルメ・特産品の品目タイルも同じ見え方に（2026-09-30 指示表 行34「地区紹介のバナーと同じ見え方に」） */
	.district-card__ja,
	.entry-body .gourmet-tile__name {
		font-size: 17px;
	}

	.district-card__en,
	.entry-body .gourmet-tile__en {
		font-size: 11px;
	}
}

/* ============================================================
 * SP のメニュー: 関連リンクの折り返し（2026-09-29 SP デザイン 4302:404 照合）
 *
 * 「観光のご相談は観光協会へ」「お仕事のご相談は商工会へ」「八王子観光コンベンション」が
 * 列幅（約150px）に1〜2文字足りず、「へ」「ン」だけ次の行に落ちていた。
 * Figma SP は、小見出しを1行のまま右の列の上まで伸ばし、右の列（関連サイト）を1行ぶん下げている。
 * 右の列の先頭の空行（spacer）を SP でも残し、左の列は折り返さずに右へはみ出させる
 * （はみ出す行の右側は空行 or 右の列の項目が尽きたあとなので重ならない）。
 * ========================================================== */
@media (max-width: 767px) {

	.menu-panel__block:last-child .menu-panel__spacer {
		display: list-item;
		list-style: none;
		height: 1lh;
	}

	.menu-panel__block:last-child .menu-panel__col:nth-child(odd) {
		white-space: nowrap;
	}
}

/* ============================================================
 * トップのカテゴリ6枚を PC で小さく・見出しを7割に（2026-09-29 クライアント修正 PDF p.3）
 *
 * 「PC での表示の際大きすぎる → 横に6枚並べるか、半分のサイズに」のうち、横6枚にした
 * （半分のサイズ 3列2段だと本文幅の中央に小さく固まり、左右が大きく空く）。
 * 6枚並ぶ幅が取れる 1024px 以上だけ。768〜1023px はこれまでどおり 3列2段、SP も据え置き。
 *
 * カード内の文字・矢印は Figma の 360px のカードに対する比率（cqi）で縮める。
 * 英字の比率は front-page.php が --en-ratio で渡す（60px → 16.667、グルメ 55px → 15.278）。
 *
 * ⚠️ トップの飾り（$decorations）は .site-main からの絶対座標で置いているので、カテゴリの高さが
 *    縮んだぶん、カテゴリより下の飾り（is-after-cat）を --cat-shift だけ上へずらす。
 *    縮む量 = 3列2段の高さ（2 × min(360px, 本文幅/3) + 行間12px） − 6枚横並びの高さ（本文幅/6）。
 *    100vw はスクロールバーを含むので、実際の本文幅より最大15px広く見積もる（ずれは 8px 未満）。
 *
 * 見出し（画像）は scale で7割にする。scale はレイアウトの大きさを変えないので、
 * 見出しの下の段がずれず飾りの位置も保たれる（縮んだぶん見出しの上が少し空く）。
 * ========================================================== */
/* ============================================================
 * PC の MV は画像と同じ比率（1920:520）で出す（2026-09-30 PPTX p1「画像が変なところで切れている。FV 画像と同じ縦横比で」）。
 * 以前は高さ 516px 固定で、1440px では左右が 240px ずつ切れていた。
 *
 * ⚠️ トップの飾り（$decorations）は .site-main からの絶対座標で、すべて MV より下にある。
 *    MV が 516px より低くなったぶん（--mv-shift）飾りも上へずらす（--cat-shift と同じ考え方）。
 *    100vw はスクロールバーを含むので、MV の高さを最大 4px 大きく見積もる（飾りのずれは 4px 未満）。
 *    1920px を超える画面では MV が 516px より高くなり、--mv-shift は負（飾りが下へ）になる。
 * ========================================================== */
@media (min-width: 768px) {

	:root {
		--mv-shift: calc(516px - 100vw * 520 / 1920);
	}

	.mv__stage {
		height: auto;
		aspect-ratio: 1920 / 520;
	}

	.deco-layer__item {
		top: calc(var(--y) - var(--mv-shift));
	}

}

@media (min-width: 1024px) {

	:root {
		--cat-cw: min(100vw - var(--gutter) * 2, 1300px);
		--cat-shift: calc(2 * min(360px, var(--cat-cw) / 3) + var(--space-xs) - var(--cat-cw) / 6);
	}

	.category__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		width: var(--content-width);
	}

	.cat-card__text {
		left: 4.444cqi; /* 16 / 360 */
	}

	.cat-card__en {
		font-size: calc(var(--en-ratio, 16.667) * 1cqi);
		line-height: 1;
	}

	.cat-card--single-line .cat-card__ja {
		margin-top: 0.833cqi; /* 3 / 360 */
	}

	.cat-card__arrow {
		right: 3.333cqi;
		bottom: 3.333cqi;
		width: 16.667cqi;
		height: 16.667cqi;
	}

	.deco-layer__item.is-after-cat {
		top: calc(var(--y) - var(--cat-shift) - var(--mv-shift, 0px));
	}
}

@media (min-width: 768px) {

	.sec-head__img,
	.sec-head--map .sec-head__row {
		scale: 0.7;
		transform-origin: 50% 100%;
	}

	.sec-head--map .sec-head__img {
		scale: none;
	}
}

/*
 * SP のトップ「緑区観光マップ」の見出し: 日本語の画像（最大 280px）とミウルのアイコンが1行に収まらず、
 * アイコンだけ次の行に落ちていた（375px）。折り返さず、画像のほうを縮めて横に並べる。
 */
@media (max-width: 767px) {

	.sec-head--map .sec-head__row {
		flex-wrap: nowrap;
		max-width: 100%;
	}

	/*
	 * ⚠️ 幅は画面幅から決める。以前の min(280px, 100% - 60px) は、行（中身なりの幅）の % を取るので循環して 0 になり、
	 * 画像が行の外へはみ出して見出し全体が左に寄っていた（2026-09-30 PPTX p3「SP で左に寄っている」）。
	 * 60px ＝ ミウルのアイコン 52px ＋ 余白。
	 */
	.sec-head--map .sec-head__img {
		min-width: 0;
		width: min(280px, 100vw - var(--gutter) * 2 - 60px);
	}

	/* PC 用の「アイコンぶん日本語を左に寄せる」は SP では要らない（行ごと中央に置く） */
	.sec-head--map .sec-head__row {
		margin-right: 0;
	}
}

/* ============================================================
 * SP の余白と角丸を詰める（2026-09-29 指摘「SP で余白が大きく縦長な印象」）
 *
 * PC 用の大きな余白（セクション間 60〜160px、ページ下 80px など）が SP にも残っていて、
 * スクロールが長く間延びして見えていた。SP だけ段階を1〜3つ下げる。
 * 角丸も、SP でカードの幅が半分（2列）になったぶん 20px だと丸すぎるので小さくする。
 * 値はすべて --space-* から選んでいる。PC には影響しない。
 * ========================================================== */
@media (max-width: 767px) {

	/* --- トップ ----------------------------------------------- */

	.band--pickup,
	.band--news {
		padding-top: var(--space-2xl);
	}

	.band--miuru {
		margin-top: var(--space-5xl);
		padding-bottom: var(--space-2xl);
	}

	.pickup,
	.event-info,
	.ranking {
		padding-bottom: var(--space-2xl);
	}

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

	.pickup .carousel,
	.event-info .carousel,
	.course .carousel,
	.news__list,
	.ranking__tabs,
	.map-sec__frame {
		margin-top: var(--space-lg);
	}

	.btn-yellow,
	.btn-green,
	.miuru__sns {
		margin-top: var(--space-xl);
	}

	.map-sec {
		padding-top: var(--space-3xl);
	}

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

	.banners {
		padding-block: var(--space-3xl) var(--space-2xl);
	}

	/* --- 下層の骨格 --------------------------------------------- */

	.page-body {
		gap: var(--space-xl);
		padding-top: var(--space-lg);
		padding-bottom: var(--space-4xl);
	}

	.page-hero + .breadcrumb {
		margin-top: calc(var(--space-xl) * -1 + var(--space-2xs));
	}

	.entry-body h2,
	.hiking-more .entry-body h2 {
		margin-top: var(--space-xl);
	}

	.entry-body h3 {
		margin-top: var(--space-lg);
	}

	.event-months,
	.course-body {
		gap: var(--space-xl);
	}

	.event-month {
		gap: var(--space-md);
	}

	/* 一覧・投稿のページ見出しの帯と白い箱 */
	.archive-hero {
		min-height: 0;
		padding: var(--space-lg) var(--space-md);
		border-radius: 16px;
	}

	.post-page {
		padding-block: var(--space-xl) var(--space-3xl);
	}

	.post-card {
		padding: var(--space-lg) var(--space-md) var(--space-md);
		border-radius: 20px;
	}

	/* --- 箱・カードの角丸と内側の余白 ------------------------------ */

	.intro-card,
	.entry,
	.district-intro,
	.archive-search.search-panel__card {
		padding: var(--space-md) var(--space-sm);
		border-radius: 14px;
	}

	.info-card,
	.course-card,
	.archive-card,
	.event-card,
	.person-card,
	.district-card,
	.link-card__link,
	.entry-body .is-style-gourmet-tile,
	.entry-body .is-style-gourmet-product {
		border-radius: 12px;
	}
}

/* SP の余白（続き）: 部品の中の縦の長さ */
@media (max-width: 767px) {

	/* トップのお知らせのカード */
	.news-item {
		padding: var(--space-xs) var(--space-sm);
	}

	/* グルメ: 品目の間・商品の箱の間を詰め、写真は高さを抑える（縦長の瓶の写真で箱が長くなっていた） */
	.entry-body .is-style-gourmet-item {
		margin-top: var(--space-2xl);
	}

	.entry-body .is-style-gourmet-product {
		margin-top: var(--space-sm);
		padding: var(--space-sm);
	}

	.entry-body .is-style-gourmet-product .wp-block-image img {
		width: 100%;
		max-height: 200px;
		object-fit: contain;
	}

	/* コースの行程: 箱と箱をつなぐ「徒歩◯分」の段と、箱の内側 */
	.is-style-course-move,
	.is-style-course-move-bus,
	.is-style-course-move-cable {
		min-height: 52px;
	}

	.is-style-course-step {
		padding: var(--space-sm) var(--space-md);
	}
}

/*
 * SP の内側の余白（2026-09-29「パディングが多い」）
 * 画面の左右 20px に、箱やカードの内側 16〜20px が重なって、文字の入る幅が狭くなっていた
 * （2列の記事カードでは1行に5〜6文字）。SP は内側を 8〜12px に。
 */
@media (max-width: 767px) {

	/* 記事カード（2列）: 写真と文字をカードの端近くまで広げる */
	.info-card__link,
	.info-card--tall .info-card__link {
		padding: var(--space-2xs);
	}

	.info-card__title,
	.info-card--tall .info-card__title {
		margin-top: var(--space-2xs);
		padding-inline: var(--space-3xs);
	}

	/* 下層の白い箱 */
	.intro-card,
	.entry,
	.district-intro,
	.archive-search.search-panel__card {
		padding: var(--space-sm) var(--space-xs);
	}

	/* 投稿ページ: 左右の余白と白い箱の内側を詰める */
	.post-page {
		width: calc(100% - var(--space-xs) * 2);
	}

	.post-card {
		padding: var(--space-md) var(--space-xs) var(--space-sm);
	}
}

@media (max-width: 767px) {

	/* イベントカレンダーの月ごとのカード（2列） */
	.event-card__body {
		padding: var(--space-2xs) var(--space-xs) var(--space-xs);
	}
}

@media (max-width: 767px) {

	/* 本文の枠線ブロック（SWELL の has-border。点線・実線の囲み）: 内側 1.5em を詰める */
	:is(.entry-body, .post-card) [class*="has-border"] {
		padding: var(--space-sm) var(--space-xs);
	}
}

/* ============================================================
 * メインビジュアルを現行サイト（midori.city.sagamihara.kanagawa.jp）と同じに（2026-09-30 指示）
 * 旧テーマ css/top.css の .mv-link / .swiper-mv-pagination / .swiper-mv-thumbs の値を写した。
 * 写真の大きさ（PC 1920:520・SP 393:345 相当）は元から現行と同じ（1440px で 1425x386、375px で 360x316）。
 *
 * ⚠️ トップの飾りは位置を数値で固定しているので、写真の下（ドット＋サムネイル）の合計の高さは以前と同じにしてある
 *    （PC 105px ＝ 以前の余白 29 ＋ サムネイル 76、SP 53px ＝ 20 ＋ 33）。中身を変えたら合計を合わせ直すこと。
 * ========================================================== */

/* --- 写真に重ねるボタン（PC）: 22px・普通の太さ・余白 1em・枠 2px・大きさは画面幅によらず一定 --- */
.mv__link-body {
	min-width: 0;
	padding: 1em;
	border-width: 2px;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.6;
	white-space: nowrap;
}

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

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

/* ボタンの横のミウル（管理画面で付けたときだけ）: 150px 角、ボタンの右端に中心 */
.mv__link--deco::after {
	width: 150px;
	height: 150px;
	translate: 50% -50%;
}

/* --- ドット: 写真のすぐ下。12px・灰色、今のスライドだけ緑。上下 10px --- */
.mv__dots {
	position: static;
	transform: none;
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

.mv__dot {
	width: 12px;
	height: 12px;
	padding: 0; /* SWELL の button の padding を打ち消す */
	border: 0;
	background: #ccc;
}

.mv__dot.is-active,
.mv__dot:hover {
	background: var(--midori-green);
	opacity: 1;
}

/* --- サムネイル（PC）: ドットの 6px 下、122x38 を 4px 間隔、今のもの以外は 40% --- */
.band--upper {
	padding-top: 0;
}

.mv__thumbs {
	gap: 4px;
	margin: 6px 0 29px; /* 下の 29px で写真の下の合計を以前と同じ 105px に（32 + 6 + 38 + 29） */
}

.mv__thumbs > li {
	flex: 0 0 122px;
}

.mv__thumb {
	aspect-ratio: auto;
	height: 38px;
	border-radius: 0;
	opacity: 0.4;
}

@media (max-width: 767px) {

	/* SP のボタン: 幅 90%・18px・下から 5%（上は 20%） */
	.mv__link {
		width: 90%;
	}

	.mv__link-body {
		padding: 1em;
		font-size: 18px;
	}

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

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

	.mv__link--deco::after {
		top: 0;
		right: 50%;
		width: 125px;
		height: 80px;
		translate: 50% -55%;
	}

	/* SP はドットだけ（現行はサムネイルを出さない）。合計 53px を保つため下に 21px */
	.mv__dots {
		display: flex;
		margin-bottom: 21px;
	}

	.mv__thumbs {
		display: none;
	}
}

/* ============================================================
 * SP: ミウルのおうちの波の後ろから、ミウルの影が頭の先だけのぞく（2026-10-01 クライアント修正）
 *
 * 背景の飾りは PC の座標（.site-main 基準の --y）のままなので、セクションの高さが
 * まるで違う SP では、たまたま右の影（miuru-shade 2・--y 3618px）が帯の真上に来て、
 * 頭がまるごと波より上に出ていた（幅によって帯との位置関係も変わる）。
 * SP ではその影を消し、帯の疑似要素として帯の上端を基準に置き直す。
 * z-index -3 は .deco-layer--behind と同じ（.band は重なりの文脈を作らないので、
 * .site-main の中で地色と波を描く ::before（-2）の後ろに入る）。
 * 出方は飾りの影と同じく、帯が出てから少し遅れて下からせり上がる。
 * ========================================================== */
@media (max-width: 767px) {

	.deco-layer--behind .deco-layer__item[style*="--y:3618px"] {
		display: none;
	}

	.band--miuru::after {
		content: "";
		position: absolute;
		z-index: -3;
		top: -24px;   /* 116px のうち上 40px ほどが波の上に出る */
		right: 7%;
		width: 134px; /* 飾りの影と同じ大きさ（297 x 257 の 0.45 倍） */
		height: 116px;
		background: url("../images/deco-shade.png") center / contain no-repeat;
		pointer-events: none;
	}

	.has-js .band--miuru::after {
		opacity: 0;
		translate: 0 40%;
		transition: opacity var(--fx-fast) var(--ease-soft) 0.3s,
			translate var(--fx-fast) var(--ease-soft) 0.3s;
	}

	.has-js .band--miuru.is-inview::after {
		opacity: 1;
		translate: 0 0;
	}
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.has-js .band--miuru::after {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* ============================================================
 * イベントカレンダー: 月ごとのカードで、列に満たない段は中央に寄せる（2026-10-01 クライアント修正）
 *
 * 格子（grid）だと端数の段が左に寄る（PC 4列で2枚の月・SP 2列で最後の1枚など）。
 * flex の折り返し＋中央寄せにして、1枚の幅は今までの列の割り方と同じに決める。
 * 列数は今までの auto-fill（最小 280px・横の間 24px）と同じ境目で、カードの格子の幅を見て切り替える
 * （n 列になる幅 = 280n + 24(n-1)）。SP は従来どおり2列（横の間 12px）。
 * ========================================================== */
.event-cards {
	--ev-cols: 1;
	--ev-gap: var(--space-lg);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: var(--ev-gap);
	container-type: inline-size;
}

.event-cards > .event-card {
	flex: 0 0 calc((100% - (var(--ev-cols) - 1) * var(--ev-gap)) / var(--ev-cols));
	min-width: 0;
}

@container (min-width: 584px) {
	.event-cards > .event-card { --ev-cols: 2; }
}

@container (min-width: 888px) {
	.event-cards > .event-card { --ev-cols: 3; }
}

@container (min-width: 1192px) {
	.event-cards > .event-card { --ev-cols: 4; }
}

@media (max-width: 767px) {
	.event-cards {
		--ev-gap: var(--space-xs);
	}

	.event-cards > .event-card {
		--ev-cols: 2;
	}
}

/* ============================================================
 * SP: トップの「緑区をもっと知ろう！楽しもう！」を上へ（2026-10-01 クライアント修正）
 *
 * iPhone 16 の Safari の初期表示（393x659 前後）で、6つのカテゴリの2段目が画面の下で切れていた
 * （2段目の下端 700px）。ドットの下〜見出し（ドットの下 21px と見出しの上 32px が相殺して 32px）と、
 * 見出し〜カードの間（20px）を詰めて 44px 上げる（2段目の下端 656px）。
 * ドットの下の 21px は「写真の下の合計 53px」を保つためのものだったが、その合計を飾りの位置の計算
 * （--mv-shift / --cat-shift）に使うのは 768px 以上だけなので、SP では詰めてよい。
 * ========================================================== */
@media (max-width: 767px) {

	.mv__dots {
		margin-bottom: 0;
	}

	.category {
		margin-top: 0;
	}

	.category__grid {
		margin-top: var(--space-2xs);
	}
}

/*
 * SP: アクセスランキングの見出しの上を空ける（2026-10-01 クライアント修正「上が詰まっている」）。
 * PC は帯（.ranking::before、上へ 89px はみ出す）の上端から見出しまで約 90px あるが、SP は帯の上端と見出しが
 * ほぼくっついていた。ピックアップの帯（SP 上 40px）と同じだけ帯の中に余白を取る。
 */
@media (max-width: 767px) {

	.ranking {
		padding-top: var(--space-2xl);
	}
}