@charset "utf-8";
/* =====================================================================
   footer-general.css  ／  総合フッター（footer-general.php）

   ・間隔はすべて rem（1rem = 16px）。ボタン内側は em
   ・コンテンツ幅は 80rem
   ・文字サイズ／フォントは style.css の変数（--fs**, --font-jp）に準拠
   ・フッターだけ SP 切替を 1000px にしています
     （規約ボタン3つを折り返さずに並べるために必要な幅のため）
   ・SP では施設一覧を非表示（カンプ準拠）
   ===================================================================== */

.l-footer2 {
	background-color: #282828;
	color: #fff;
	font-family: var(--font-jp);
	padding: 4.375rem 0 1.875rem;
}
.l-footer2 a {
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s;
	-webkit-tap-highlight-color: transparent;
}
.l-footer2 a:hover {
	opacity: 0.6;
}
.l-footer2__inner {
	width: 80%;
	max-width: 80rem;
	margin: 0 auto;
}

/* --- ロゴ ---------------------------------------------------------- */
.l-footer2__logo {
	width: 15rem;
	margin-bottom: 2.5rem;
}
.l-footer2__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 本体（サイトメニュー ＋ 施設一覧） ------------------------------ */
.l-footer2__body {
	display: flex;
	align-items: flex-start;
	gap: 2.5rem;
}

/* サイトメニュー */
.l-footer2__nav {
	flex: 0 0 auto;
}
.l-footer2__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	font-size: var(--fs15);
	line-height: 1.4;
	white-space: nowrap;
}

/* 施設一覧 ＋ 規約ボタン（内容ぶんの幅で右に寄せる） */
.l-footer2__right {
	flex: 0 1 auto;
	min-width: 0;
	margin-left: auto;
}

/* 施設一覧
   ・ul は内容ぶんの幅までしか広げない（width: max-content）
   ・3カラムを 1fr で等分 → 全 li が「いちばん長い施設名」の幅で揃う
   ・左の列から縦に流す（grid-auto-flow: column） */
.l-footer2__hotels {
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	max-width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	column-gap: 1.25rem;
	row-gap: 1.125rem;
	font-size: var(--fs15);
	line-height: 1.4;
}
.l-footer2__hotels li {
	white-space: nowrap;
}
.l-footer2__hotels a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}
/* 行頭のダッシュ */
.l-footer2__hotels a::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5625rem;
	height: 1px;
	background-color: currentColor;
}

/* --- 規約ボタン（SP になるまで折り返さない） ------------------------ */
.l-footer2__policies {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	gap: clamp(0.625rem, 1.6vw, 1.25rem);
	margin-top: 2.8125rem;
}
/* 左の斜め線は背景画像（パスは footer-general.php の <style> で指定） */
.l-footer2__policy-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: clamp(0.875rem, 2.3vw, 1.875rem);
	padding: 0.9375rem 0.3125rem 0.625rem clamp(2.125rem, 3.9vw, 3.125rem);
	background-image: url("../img/kumamoto-namikizaka/buttonback-white.webp");
	background-repeat: no-repeat;
	background-position: left top;
	font-size: var(--fs15);
	white-space: nowrap;
}
.l-footer2__policy-btn img {
	width: 0.625rem;
	height: auto;
	flex: 0 0 auto;
}

/* --- コピーライト -------------------------------------------------- */
.l-footer2__copyright {
	margin: 1.875rem 0 0;
	text-align: center;
	font-size: var(--fs14);
}

/* =====================================================================
   〜1200px：内側の幅を広げて、規約ボタンの並びを確保
   ===================================================================== */
@media (max-width: 1200px) {
	.l-footer2__inner {
		width: 92%;
	}
	.l-footer2__body {
		gap: 1.5625rem;
	}
	.l-footer2__hotels {
		column-gap: 0.875rem;
	}
}

/* =====================================================================
   SP（〜1000px ／ 最小 375px）
   ===================================================================== */
@media (max-width: 1000px) {
	.l-footer2 {
		padding: 2.25rem 0 1.25rem;
	}
	.l-footer2__inner {
		width: 100%;
		padding: 0 3%;
	}
	.l-footer2__logo {
		width: 11.25rem;
		margin-bottom: 1.875rem;
	}

	/* 縦積み。施設一覧はカンプ準拠で非表示 */
	.l-footer2__body {
		display: block;
	}
	.l-footer2__nav-list {
		gap: 0.875rem;
		font-size: var(--fs20);
	}
	.l-footer2__hotels {
		display: none;
	}

	/* 規約ボタンは縦積み。幅は内容ぶんだけにして矢印を文字のすぐ右に置く */
	.l-footer2__policies {
		display: block;
		margin-top: 2.1875rem;
	}
	.l-footer2__policy-btn {
		width: fit-content;
		justify-content: flex-start;
		column-gap: 1.5rem;
		padding: 0.9375rem 0.3125rem 0.75rem 2.8125rem;
		font-size: var(--fs18);
	}
	.l-footer2__policy-btn + .l-footer2__policy-btn {
		margin-top: 0.875rem;
	}

	.l-footer2__copyright {
		margin-top: 1.5625rem;
		text-align: right;
		font-size: var(--fs16);
	}
}

/* =====================================================================
   footer.php（旧フッター）で使っている背景画像
   ※ footer.php は最後に get_footer('general') を呼ぶので、
     この CSS は footer.php を使うページでも必ず読み込まれます
   ===================================================================== */
.slash {
	background-image: url("../img/kumamoto-namikizaka/nanamesen.webp");
}
.l-footer__policy-btn {
	background-image: url("../img/kumamoto-namikizaka/buttonback-white.webp");
}

/* =====================================================================
   【一時非表示 A】施設一覧を先頭 8 件だけにしています（2026-09-04 更新）
   ---------------------------------------------------------------------
   ■ 何をしているか
     PHP は変更していません。footer-general.php の $sova_footer_hotels は
     12 件のままで、HTML にも 12 件そのまま出力されています。
     この CSS で 9 件目以降を隠し、グリッドを 3列×4行 から 3列×3行 に
     変えて、残る 8 件がきれいに収まるようにしています。

   ■ 隠している 4 件（配列の 9〜12 番目）
     熊本桜町(仮) ／ 鹿児島天文館 ／ 熊本下通(仮) ／ 熊本下通(仮)2

   ■ 12 件表示に戻す手順
     1) この【一時非表示 A】ブロックを、この行から下の閉じカッコまで
        丸ごと削除する
     2) css/header-general.css にも同じ【一時非表示 A】ブロックが
        あるので、そちらも丸ごと削除する
     削除するだけで元に戻ります。PHP など他のファイルを触る必要は
     ありません。元の grid-template-rows: repeat(4, auto) は、この
     ブロックより上の .l-footer2__hotels にそのまま残っています。

   ■ 補足
     この施設一覧は 1000px 以下では元から display: none になっており
     （カンプ準拠）、スマホでは表示されません。ここの調整が効くのは
     PC 表示のときだけです。

   ■ 施設を 8 件以外の数にするとき
     grid-template-rows の行数を「件数 ÷ 3（端数切り上げ）」にし、
     nth-child(n+9) の 9 を「表示したい件数 + 1」に変えてください。
   ===================================================================== */
.l-footer2__hotels {
	grid-template-rows: repeat(3, auto);
}
.l-footer2__hotels li:nth-child(n+9) {
	display: none;
}