@charset "UTF-8";
/*
 * 共通の部品（全ページで読む）
 *
 * セクション見出し / カルーセル / カード3種 / ボタン4種。
 * トップで作ったものを下層ページでも使い回すため、front-page-sections.css から切り出した。
 * **ここを直すとトップと下層の両方が変わる。**
 */

/* ============================================================
 * セクション見出し（画像タイトル＋英字）
 * ========================================================== */

/*
 * Figma ではどの見出しも「日本語の画像」＋10px＋「英字 25px」で揃っている。
 * 画像は日本語部分だけを書き出したもの（英字まで入った書き出しは白地が付くので使わない）。
 */
.sec-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
}

.sec-head__img {
	width: auto;
	height: auto;
}

/* 観光マップだけ、日本語の右にミウルのアイコンが隣接する（Figma: image 76） */
.sec-head__row {
	display: flex;
	align-items: flex-start;
}

/*
 * ミウルのアイコン（Figma: image 76 / 2026:370）。枠は 83x83、元画像は 840x961 の縦長。
 * Figma は枠の高さいっぱいに**切らずに全体を収めている**（幅 87.41%・左 6.3% ＝ contain と同じ）。
 * 以前は cover で正方形に切り抜いていて、上下が切れていた（2026-09-28 依頼表 No.16）。
 * ※ 元の絵そのものが帽子の上端・右端と足元で切れている（Figma の元画像も同じ）。ここでは直せない。
 */
.sec-head__icon {
	width: 83px;
	height: 83px;
	object-fit: contain;
	margin-top: var(--space-2xs);
}

/* 行全体の中心は画面中心から 7.5px 左（アイコンぶん日本語が寄る） */
.sec-head--map .sec-head__row {
	margin-right: 15px;
}

/* Figma: 25px bold / #2f7b3b / 中央揃え */
.sec-head__en {
	font-size: var(--fs-sec-en);
	font-weight: 700;
	color: var(--midori-green-text);
	line-height: 1.2;
}

/* ============================================================
 * カルーセル（左右の矢印＋横並びのカード）
 * 矢印は Figma で x290 / x1630 = コンテンツ 1300px の外側
 * ========================================================== */

.carousel {
	position: relative;
	width: var(--content-width);
	margin-inline: auto;
}

/*
 * SWELL が button に padding 4px 8px を当てている。box-sizing: border-box なので
 * そのままだと中身が 44x52 に縮み、img の max-width:100% が幅だけ 44px に
 * 押さえてしまう（高さは 60px のまま通るので、丸が縦長に潰れる）。
 * padding をここで 0 に戻す。
 */
.carousel__arrow {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	background: none;
	z-index: 2;
}

.carousel__arrow--prev {
	right: calc(100% + var(--space-md));
	rotate: 180deg;
}

.carousel__arrow--next {
	left: calc(100% + var(--space-md));
}

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

.carousel__arrow:hover {
	opacity: 0.7;
}

/*
 * カードを 300px 等幅で横に並べる。
 * Figma の x 間隔は 335px（カード300 + 隙間35）。4枚でちょうど 1300px に収まる。
 * 5枚以上あるときは横スクロールになり、矢印と自動送りが効く。
 * スクロールバーは出さない（矢印で操作するため）。
 */
/*
 * scroll-snap は付けない。自動送りは 1秒に十数px しか動かさないので、
 * 吸着が効くと動いたぶんが毎回もとの位置へ戻されて、まったく流れなくなる。
 */
.card-list,
.pickup__list {
	display: flex;
	gap: var(--space-xl);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.card-list::-webkit-scrollbar,
.pickup__list::-webkit-scrollbar {
	display: none;
}

.card-list > *,
.pickup__list > * {
	flex: none;
}

/*
 * カードが少なくて1画面に収まるときは中央に寄せる（モデルコースは3件しか無い）。
 * justify-content: center だと、あふれたときに先頭が左へはみ出してスクロールで戻れなくなる。
 * 両端の auto の余白なら、あふれたときは 0 になって左詰めのまま。
 * ランキングは grid なので外す（auto の余白でカードが縮む）。
 */
.card-list:not(.card-list--ranking) > :first-child {
	margin-inline-start: auto;
}

.card-list:not(.card-list--ranking) > :last-child {
	margin-inline-end: auto;
}

/* Figma のカード高は 437px。中身の量で段差が出ないよう下限を固定する */
/*
 * Figma（image 42）ではカードが白い角丸の箱に入っている。箱が無いと、
 * 写真と文字が帯の緑にじかに乗って背景から浮いて見える（ほかのカードとも揃わない）。
 */
.pickup-card {
	width: 300px;
	min-height: 437px;
	border-radius: 20px;
	background: #fff;
}

.pickup-card__link {
	display: block;
	padding: var(--space-2xs) var(--space-2xs) var(--space-sm);
}

.pickup-card__photo {
	width: 100%;
	height: 205px;
	object-fit: cover;
}

.pickup-card__date {
	display: block;
	margin-top: var(--space-sm);
	font-size: var(--fs-card-date);
	color: #6b6b6b;
	line-height: 1.5;
}

.pickup-card__title {
	display: block;
	margin-top: var(--space-2xs);
	font-size: var(--fs-card-title);
	font-weight: 700;
	line-height: 1.6;
	color: #1a1a1a;
}

.pickup-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);

	/*
	 * タグはリンクの外（カード直下）にあるので、左右と下の余白はここで持つ。
	 * 上はリンクの下の余白がそのまま間になる（タグの無いカードでも下が詰まらない）。
	 */
	padding: 0 var(--space-2xs) var(--space-sm);
}

.pickup-card__tags a {
	display: inline-block;
	padding: var(--space-3xs) var(--space-xs);
	border-radius: 4px;
	background: var(--midori-green);
	color: #fff;
	font-size: var(--fs-card-date);
	font-weight: 500;
	line-height: 1.6;
}

.pickup-card__tags a:hover {
	background: var(--midori-green-deep);
	opacity: 1;
}

/* ============================================================
 * 情報カード（イベント情報・アクセスランキング共通）
 * Figma: 300x280 / 白 / 角丸20px / 画像 260x147 を 20px インセット
 * ========================================================== */

.info-card {
	width: 300px;
	min-height: 280px;
	border-radius: 20px;
	background: #fff;
}

.info-card__link {
	position: relative;
	display: block;
	padding: var(--space-md);
	color: #000;
}

.info-card__photo {
	width: 260px;
	height: 147px;
	object-fit: cover;
}

.info-card__title {
	display: block;
	margin-top: var(--space-md);
	font-size: var(--fs-card-title);
	line-height: 20.8px;
}

/*
 * 縦長のカード（トップのピックアップ・イベント情報）。
 * Figma（2026-09 更新。Frame 243 / 244）: 白い箱 300x327・余白 22/20・写真 260:197・写真とタイトルの間 17px。
 * ランキングのカード（300x280・写真 260x147）は変わっていないので、そちらは元のまま。
 * 写真は比率で持たせる（SP で幅が縮んでも同じ形）。詳細度を1つ上げて SP の比率指定（responsive.css）に勝たせる。
 */
.info-card--tall {
	min-height: 327px;
}

.info-card--tall .info-card__link {
	padding: var(--space-lg) var(--space-md);
}

.info-card.info-card--tall .info-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 260 / 197;
}

.info-card--tall .info-card__title {
	margin-top: var(--space-sm);
}

/*
 * 順位の王冠。
 * Figma ではカードの外ではなく内側に置かれていて、
 * カード左上から +7 / +6 の位置。1位だけ 55px、2位以降は 46px。
 */
.info-card__rank {
	position: absolute;
	top: 6px;
	left: 7px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	z-index: 2;
}

.info-card:first-child .info-card__rank {
	width: 55px;
	height: 55px;
}

.info-card__rank img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.info-card__rank-num {
	position: absolute;
	top: 52%;
	font-size: 15px;
	font-weight: 700;
	color: #000; /* 白は王冠の黄色の上で読みにくい（2026-09-28 依頼表 No.11 で黒に） */
	line-height: 1;
}

.info-card:first-child .info-card__rank-num {
	font-size: 18px;
}

/* 緑のボタン Figma: 750x103 / #2db479 / 角丸20px / 30px bold */
.btn-green {
	display: grid;
	place-items: center;
	width: 750px;
	height: 103px;
	margin: var(--space-5xl) auto 0;
	border-radius: 20px;
	background: var(--midori-green);
	color: #fff;
	font-size: var(--fs-btn-lg);
	font-weight: 700;
}

.btn-green:hover {
	background: var(--midori-green-deep);
	opacity: 1;
}

/* 黄色のバナーボタン Figma: 6097:1682 / 750x170 / #fbe349 */
.btn-access {
	position: relative;
	display: block;
	width: 750px;
	height: 170px;
	margin: var(--space-xl) auto 0;
	border-radius: 20px;
	background: var(--midori-yellow);
}

.btn-access__title {
	position: absolute;
	top: 35px;
	left: 67px;
	width: 484px;
	height: 87px;
}

.btn-access__en {
	position: absolute;
	top: 105px;
	left: 155px;
	font-size: var(--fs-sec-en);
	font-weight: 700;
	color: var(--midori-green-text);
}

.btn-access__map {
	position: absolute;
	top: 19px;
	right: 31px;
	width: 169px;
	height: 132px;
}

.btn-access:hover {
	opacity: 0.85;
}

/* ============================================================
 * 黄色ボタン Figma: 6004:334 / 750x90 / #fbe349 / 角丸20px
 * ========================================================== */

.btn-yellow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	width: 750px;
	height: 90px;
	margin: var(--space-6xl) auto 0;
	border-radius: 20px;
	background: var(--midori-yellow);
	color: var(--midori-green);
	font-size: var(--fs-btn-lg);
	font-weight: 700;
}

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

.btn-yellow:hover {
	opacity: 0.85;
}

/* ============================================================
 * 白抜きボタン Figma: 2026:166 / 白 / 2px #0e682e / 角丸70px
 * ========================================================== */

.btn-outline {
	display: table;
	margin: var(--space-2xl) auto 0;
	/*
	 * 上下は 16px（2026-09-29 クライアント修正 PDF p.6「全ページ、ボタンが縦に大きい」）。
	 * 以前は Figma の Frame47（324x93）に合わせて上下 32px で、高さ 88px の縦長の楕円になっていた。
	 */
	padding: var(--space-sm) var(--space-5xl);
	border: 2px solid var(--midori-green-deep);
	border-radius: 70px;
	background: #fff;
	color: var(--midori-green-deep);
	font-size: var(--fs-btn-sm);
	font-weight: 700;
	line-height: 1.45;
	/*
	 * 自分で中央に寄せる。これが無いと **親の text-align を継承**してしまい、
	 * 「モデルコース一覧はこちら」（親が中央寄せ）は中央、
	 * 「お知らせ一覧はこちら」（親が指定なし）は左寄せ、と同じ部品で見え方が割れる。
	 */
	text-align: center;
}

.btn-outline:hover {
	background: var(--midori-green-deep);
	color: #fff;
	opacity: 1;
}


.course-card {
	width: 300px;
	min-height: 388px;
	border-radius: 20px;
	background: #fff;
	text-align: left;
}

/* 20+147+20+20.8+10+30+10+30+10+75+15 = 388px（Figma のカード高） */
.course-card__link {
	display: block;
	padding: var(--space-md) var(--space-md) var(--space-sm);
}

.course-card__photo {
	width: 260px;
	height: 147px;
	object-fit: cover;
}

.course-card__title {
	display: block;
	margin-top: var(--space-md);
	font-size: var(--fs-btn-sm);
	font-weight: 700;
	line-height: 20.8px;
	color: var(--midori-green-deep);
}

.course-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3xs);
	margin-top: var(--space-2xs);
	font-size: var(--fs-news-text);
	font-weight: 700;
	color: var(--midori-green);
}

.course-card__icon {
	flex: none;
	width: 30px;
	height: 30px;
}

/* 徒歩アイコンは丸（SVG）の上に人（PNG 11x20）を重ねる */
.course-card__icon--stack {
	position: relative;
	display: grid;
	place-items: center;
}

.course-card__icon--stack img:first-child {
	position: absolute;
	inset: 0;
	width: 30px;
	height: 30px;
}

.course-card__icon-glyph {
	position: relative;
	width: 11px;
	height: 20px;
}

.course-card__text {
	display: block;
	margin-top: var(--space-2xs);
	font-size: var(--fs-news-text);
	font-weight: 700;
	line-height: 25px;
	color: var(--midori-green-deep);
}

/* ============================================================
 * 記事のサムネイルは全体を見せる（2026-09-28 クライアント修正依頼 ③）
 *
 * チラシ・ポスターの縦長画像が多く、枠いっぱいに切り抜く（cover）と上下が切れて
 * 日付や見出しが読めなくなる。現行サイトのピックアップと同じく、画像全体を収めて
 * 余白を淡い緑（--thumb-bg）で埋める。横長の写真はこれまでとほぼ同じに見える。
 *
 * 対象は「記事（投稿・CPT）のアイキャッチ」を出すカードだけ。
 * 固定ページの写真（コース・タイル・地区カード・ページヘッダー）は切り抜きのまま。
 *
 * カード名と写真の2段で書いて詳細度を (0,2,0) にしてある。
 * page.css（あとから読まれる）の `.archive-card__photo { object-fit: cover }` などに勝たせるため。
 * ========================================================== */

/*
 * モデルコースのカード（トップ・ハイキング）も同じにした（2026-09-30 クライアント指摘「陣馬山の白い馬の首が切れて不吉」）。
 * コースの写真は 4:3 などで、横長の枠（260:147）に切り抜くと上下が切れていた。
 */
.info-card .info-card__photo,
.archive-card .archive-card__photo,
.link-card .link-card__photo,
.event-card .event-card__photo,
.course-card .course-card__photo {
	object-fit: contain;
	background: var(--thumb-bg);
}

/*
 * アイキャッチの無い記事の代わりの画像（images/noimage.webp。600x600 のクリーム地の中央にロゴとミウル。2026-10-01 支給）。
 * サムネイルは contain で全体を見せる決まりだが、この画像は正方形なので横長の枠に入れると左右に緑の地が出る。
 * 中央のロゴは上下の余白の中にあるので、cover で枠いっぱいに敷く（2026-09-30 PPTX p6）。
 * カードごとの contain（.info-card などカード名＋写真の2段）に1つの指定で勝つため !important。
 */
img[src*="/noimage"] {
	object-fit: cover !important;
}