/**
 * NEO front page styles（トップページのみ読み込み）
 *
 * - neo-base.css の変数・部品（.neo-button）を前提とする.
 * - スマホを基準に書き、画面幅に応じて PC 向けの指定を追加する.
 *   区切りは Lightning と同じ 576px / 768px（575.98px 以下はファーストビューの調整のみ）.
 * - グラデーション・発光・アニメーションは使わない.
 */

/* ==========================================================================
   1. トップページ全体
   ========================================================================== */

.neo-front {
	display: block;
	background-color: var(--neo-color-bg);
	color: var(--neo-color-text);
}

/* ==========================================================================
   2. セクション共通
   ========================================================================== */

.neo-section {
	padding-block: 3rem;
	border-top: 1px solid var(--neo-color-line);
}

.neo-section__title {
	margin: 0 0 2rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.16em;
	color: var(--neo-color-text);
}

/* Lightning / スキンの見出し装飾（下線・疑似要素）を打ち消す */
.neo-section__title::before,
.neo-section__title::after {
	content: none;
}

/* 見出し + 補助文 */
.neo-section__header {
	margin-bottom: 2rem;
}

.neo-section__header .neo-section__title {
	margin-bottom: 0.5rem;
}

.neo-section__lead {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--neo-color-text-sub);
}

/*
 * セクション内の補助導線（INFORMATION「料金・営業時間を見る」/ ACCESS「Googleマップで見る」）.
 * Hero より控えめな副ボタン（.neo-button--secondary）を内容に合わせた幅で置く. 画面幅を超えない.
 */
.neo-front-action {
	margin: 1.75rem 0 0;
}

.neo-front-action .neo-button {
	max-width: 100%;
}

/* ==========================================================================
   3. ファーストビュー
   ========================================================================== */

.neo-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--neo-color-bg);
	color: var(--neo-color-text);
}

.neo-hero--has-image {
	min-height: 72vh; /* svh 非対応ブラウザ用 */
	min-height: 72svh;
}

/* 画像がない場合は黒背景のみ. 何もない空間が大きくなりすぎないよう低めにする */
.neo-hero--no-image {
	min-height: 56vh;
	min-height: 56svh;
}

.neo-hero__media {
	position: absolute;
	inset: 0;
}

.neo-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * 文字を読みやすくするための単色の暗い層（グラデーションは使わない）.
 * 不透明度 0.55 なら、白い写真の上でも白文字のコントラストが約 4.7:1 になる.
 */
.neo-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.55);
}

.neo-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-block: 3rem 2.5rem;
}

.neo-hero__catch {
	margin: 0;
	max-width: 36rem;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--neo-color-text);
}

.neo-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* キャッチコピーがある場合のみ、ボタンとの間隔をあける */
.neo-hero__catch + .neo-hero__actions {
	margin-top: 2rem;
}

.neo-hero__actions .neo-button {
	width: 100%;
}

/* ==========================================================================
   4. ABOUT（固定ページの本文）
   ========================================================================== */

.neo-about__content {
	font-size: 1rem;
	line-height: 1.9;
	color: var(--neo-color-text);
	overflow-wrap: anywhere;
}

.neo-about__content > * {
	margin-block: 0;
}

.neo-about__content > * + * {
	margin-top: 1.25em;
}

/* 本文中の見出し（h3 以下を想定）: Lightning / スキンの装飾を打ち消し、控えめにする */
.neo-about__content h2,
.neo-about__content h3,
.neo-about__content h4,
.neo-about__content h5,
.neo-about__content h6 {
	margin-top: 2em;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--neo-color-text);
}

.neo-about__content h2::before,
.neo-about__content h2::after,
.neo-about__content h3::before,
.neo-about__content h3::after,
.neo-about__content h4::before,
.neo-about__content h4::after,
.neo-about__content h5::before,
.neo-about__content h5::after,
.neo-about__content h6::before,
.neo-about__content h6::after {
	content: none;
}

/* 本文中のリンクは下線で示す（ボタンは除く） */
.neo-about__content a:where(:not(.wp-block-button__link):not(.vk_button_link):not(.btn)) {
	color: var(--neo-color-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.neo-about__content img {
	max-width: 100%;
	height: auto;
}

/* 幅広・全幅ブロックも本文幅に収める（横スクロールを出さない） */
.neo-about__content .alignwide,
.neo-about__content .alignfull {
	width: auto;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* 横に長い表・整形済みテキストは、ページではなくその要素の中でスクロールさせる */
.neo-about__content table,
.neo-about__content pre {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ==========================================================================
   5. INFORMATION（料金・営業時間）
   ========================================================================== */

/*
 * 料金・営業時間は曜日やイベントで変わるため、トップページでは案内文と「料金・営業時間」ページへのボタンのみ.
 * スマホのスクロール量を増やさないよう、他セクションより上下余白を小さくする.
 */
.neo-info {
	padding-block: 2.5rem;
}

.neo-info__body {
	font-size: 1rem;
	line-height: 1.9;
	color: var(--neo-color-text);
	overflow-wrap: anywhere;
}

.neo-info__body p {
	margin: 0;
}

/* 2文目の前だけ間隔をあける（上の margin: 0 と二重にならないよう隣接要素にのみ指定） */
.neo-info__body p + p {
	margin-top: 0.5em;
}

/* 「料金・営業時間」「来店予告BBS」の副ボタンを縦に並べる. 幅は長い方にそろえる（画面幅は超えない） */
.neo-info__actions {
	display: inline-flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 100%;
}

/* ==========================================================================
   6. ACCESS（住所・アクセス補足）
   ========================================================================== */

.neo-access__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	overflow-wrap: anywhere;
}

.neo-access__address {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--neo-color-text);
}

.neo-access__note {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--neo-color-text-sub);
}

/* 電話の案内（補足文と同じグレー・小さめ）+ 電話番号（白・少し大きめ. タップで発信） */
.neo-access__phone {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.neo-access__phone-note {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--neo-color-text-sub);
}

.neo-access__phone-number {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* 受話器アイコン + 電話番号. タップしやすい高さを確保する. 下線は番号テキストにだけ常時付ける */
.neo-access__phone-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	color: var(--neo-color-text);
	text-decoration: none;
}

.neo-access__phone-icon {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	color: var(--neo-color-text-sub);
	transition: color 0.2s ease;
}

.neo-access__phone-text {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-color: var(--neo-color-text-sub);
	transition: text-decoration-color 0.2s ease;
}

.neo-access__phone-link:hover,
.neo-access__phone-link:focus-visible {
	color: var(--neo-color-text);
	text-decoration: none;
}

.neo-access__phone-link:hover .neo-access__phone-icon,
.neo-access__phone-link:focus-visible .neo-access__phone-icon {
	color: var(--neo-color-text);
}

.neo-access__phone-link:hover .neo-access__phone-text,
.neo-access__phone-link:focus-visible .neo-access__phone-text {
	text-decoration-color: var(--neo-color-text);
}

/* ==========================================================================
   7. LINKS（公式X のリンクカード1枚）
   ========================================================================== */

/* カード全体がリンク. 濃いグレーの面 + 細い枠. 右上に控えめな外部リンクの印 */
.neo-x-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	box-sizing: border-box;
	min-height: 7.5rem;
	padding: 1.5rem 3.5rem 1.5rem 1.5rem;
	background-color: var(--neo-color-surface);
	border: 1px solid var(--neo-color-line);
	color: var(--neo-color-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.neo-x-card:visited {
	color: var(--neo-color-text);
}

/* hover できる環境では面と枠をわずかに明るくするだけ */
.neo-x-card:hover {
	color: var(--neo-color-text);
	background-color: var(--neo-color-surface-hover);
	border-color: var(--neo-color-line-strong);
}

/* X アイコン + OFFICIAL X を1行に並べる */
.neo-x-card__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.2em;
	color: var(--neo-color-text-muted);
}

/* X アイコン（装飾. 文字より少し明るいグレーで、主張させすぎない） */
.neo-x-card__icon {
	display: block;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	color: var(--neo-color-text-sub);
}

.neo-x-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--neo-color-text);
}

/* @アカウント名: 公式X の名前より小さく、説明文より少し目立たせる（アカウント名は最大15文字のため通常は1行に収まる） */
.neo-x-card__account {
	margin-top: -0.125rem;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--neo-color-text-sub);
}

.neo-x-card__text {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--neo-color-text-sub);
}

.neo-x-card__arrow {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--neo-color-text-sub);
}

.neo-x-card:hover .neo-x-card__arrow,
.neo-x-card:hover .neo-x-card__icon {
	color: var(--neo-color-text);
}

/* ==========================================================================
   8. 画面幅ごとの指定
   ========================================================================== */

/*
 * 575.98px 以下・画像ありのファーストビュー: キャッチコピーとボタンの間隔を 3rem 広げ、ボタンを背景画像の下寄りへ.
 * 中身は下端そろえ（align-items: flex-end）のため、最小の高さも同じ 3rem 増やし、キャッチコピーの上からの位置を保つ.
 */
@media (max-width: 575.98px) {
	.neo-hero--has-image {
		min-height: calc(72vh + 3rem);
		min-height: calc(72svh + 3rem);
	}

	.neo-hero--has-image .neo-hero__catch + .neo-hero__actions {
		margin-top: 5rem;
	}

	/*
	 * 画像全体を中央寄せの位置から 3.5rem（56px）上へずらし、ロゴ・右下の装飾を上へ見せる.
	 * 画像は <img>（object-fit: cover）のため background-position ではなく object-position で指定する.
	 * 画像の上下に余りがない場合、下端の 3.5rem は画像がなくヒーローの背景色（黒）になる.
	 */
	.neo-hero--has-image .neo-hero__image {
		object-position: center calc(50% - 3.5rem);
	}
}

/* 576px 以上: ボタンを横並びに */
@media (min-width: 576px) {
	.neo-hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.neo-hero__actions .neo-button {
		width: auto;
		min-width: 12rem;
	}
}

/* 768px 以上 */
@media (min-width: 768px) {
	.neo-section {
		padding-block: 4.5rem;
	}

	.neo-hero--has-image {
		min-height: clamp(32rem, 80vh, 52rem);
		min-height: clamp(32rem, 80svh, 52rem);
	}

	.neo-hero__inner {
		padding-block: 4rem 4rem;
	}

	/* ABOUT / ACCESS: 文章を横に広げすぎない */
	.neo-about__content,
	.neo-access__body {
		max-width: 40rem;
	}

	/* INFORMATION: 案内文のみのため、他セクション（4.5rem）より余白を小さく・文章幅を抑える */
	.neo-info {
		padding-block: 3.5rem;
	}

	.neo-info__body {
		max-width: 40rem;
	}

	/* LINKS: ACCESS の文章と同じ幅にそろえ、余白を少し広げる */
	.neo-x-card {
		max-width: 40rem;
		padding: 2rem 4rem 2rem 2rem;
	}

	.neo-x-card__arrow {
		top: 1.75rem;
		right: 2rem;
	}
}