/*
Theme Name: THE HIVE WEDDING
Description: THE HIVE WEDDING様のための結婚式場・プランナー会社サイト用オリジナルテーマ
Author: THE HIVE WEDDING
Version: 4.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-hive-wedding
*/

/* ---------- Variables ---------- */
:root {
	--color-bg: #ffffff;
	--color-soft: #faf7f2;
	--color-text: #333333;
	--color-text-light: #333333;
	--color-accent: #c9a66b;
	--color-accent-dark: #a9884f;
	--color-border: #e8e2d8;
	--font-heading: "Jost", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
	--font-label: "Jost", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
	--font-body: "Jost", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, sans-serif;
	--font-title: "Jost", "Noto Sans JP", sans-serif;
	--max-width: 1300px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Hero opening intro (video pages only): blocks scrolling until the white
   cover has revealed the video (see main.js), so visitors can't scroll past
   the reveal early. */
html.hero-intro-locked,
html.hero-intro-locked body {
	overflow: hidden;
	height: 100%;
}
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.8;
	font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-dark); text-decoration: none; }
a:hover { color: var(--color-accent); }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 500;
	line-height: 1.4;
	margin: 0 0 0.6em;
	color: var(--color-text);
}
.screen-reader-text { position: absolute; left: -9999px; }

/* ---------- Layout helpers ---------- */
.container {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 24px;
}
.section {
	padding: 96px 0;
}
.section--soft { background: var(--color-soft); }
.section-heading {
	text-align: center;
	margin-bottom: 56px;
}
.section-heading .eyebrow {
	display: inline-block;
	font-family: var(--font-label);
	letter-spacing: 0.2em;
	color: var(--color-accent-dark);
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 12px;
}
.section-heading h2 {
	font-size: 34px;
}
.section-heading p {
	color: var(--color-text-light);
	max-width: 640px;
	margin: 12px auto 0;
}
.btn {
	display: inline-block;
	padding: 14px 40px;
	border: 1px solid var(--color-accent-dark);
	color: var(--color-accent-dark);
	font-family: var(--font-heading);
	letter-spacing: 0.1em;
	border-radius: 2px;
	transition: all 0.25s ease;
}
.btn:hover {
	background: var(--color-accent-dark);
	color: #fff;
}
.btn--solid {
	background: var(--color-accent-dark);
	color: #fff;
}
.btn--solid:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

/* ---------- Scroll reveal (fade in + rise up as elements enter the viewport) ---------- */
.reveal-up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 1.6s ease, transform 1.6s ease;
}
.reveal-up.is-in-view {
	opacity: 1;
	transform: translateY(0);
}
/* Direct children rise up one after another (top to bottom) — used for text blocks.
   Children are revealed one at a time by JS (adds is-in-view with a delay per
   child) rather than via CSS transition-delay, so components with their own
   hover transitions (e.g. .about-teaser-more) aren't left with a lingering delay. */
.reveal-stagger > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1.1s ease, transform 1.1s ease;
}
.reveal-stagger > *.is-in-view {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.reveal-up,
	.reveal-stagger > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}
/* PCのプラン一覧カード（結婚式プラン／撮影プラン）は、Your Whyセクションと同じ
   フェードイン＋下から上がってくる演出をカード単位で適用する。スマホは横スクロールの
   カルーセル表示のため対象外（min-width: 881pxのみ）。 */
@media (min-width: 881px) {
	.menu-item-reveal {
		opacity: 0;
		transform: translateY(40px);
		transition: opacity 1.6s ease, transform 1.6s ease;
	}
	.menu-item-reveal.is-in-view {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.menu-item-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.96);
	transition: background 0.3s ease, top 0.3s ease;
}
body.home .site-header {
	position: absolute;
	left: 0;
	right: 0;
	top: 20px;
	transform: translateY(0);
	background: transparent;
}
body.home .site-header .custom-logo {
	filter: brightness(0) invert(1);
}
body.home .site-header.is-scrolled {
	position: fixed;
	top: 0;
	transform: translateY(-100%);
	transition: background 0.3s ease;
	background: rgba(255, 255, 255, 0.96);
}
body.home .site-header.is-scrolled .custom-logo {
	filter: none;
}
body.home .site-header.is-scrolled.is-revealed {
	transform: translateY(0);
	transition: background 0.3s ease, transform 0.8s ease;
}
/* Keep the fixed/sticky header below the logged-in admin toolbar instead of hiding under it. */
.admin-bar .site-header {
	top: 32px;
}
body.admin-bar.home .site-header {
	top: 52px;
}
body.admin-bar.home .site-header.is-scrolled {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
	body.admin-bar.home .site-header {
		top: 66px;
	}
	body.admin-bar.home .site-header.is-scrolled {
		top: 46px;
	}
}
/* Below 600px the hero photo/video frame border shrinks from 20px to 10px
   (see .hero-media), so the floating header needs to match or the gap above
   it looks uneven. */
@media (max-width: 600px) {
	body.home .site-header {
		top: 10px;
	}
	.site-header,
	body.home .site-header.is-scrolled {
		background: #fff;
	}
}
@media (min-width: 900px) {
	body.home .site-header .site-title,
	body.home .site-header .site-tagline,
	body.home .site-header .main-navigation a,
	body.home .site-header .header-line-link,
	body.home .site-header .header-contact-link,
	body.home .site-header .header-actions-divider {
		color: #fff;
	}
	body.home .site-header.is-scrolled .site-title,
	body.home .site-header.is-scrolled .main-navigation a,
	body.home .site-header.is-scrolled .header-line-link,
	body.home .site-header.is-scrolled .header-contact-link {
		color: var(--color-text);
	}
	body.home .site-header.is-scrolled .header-actions-divider {
		color: #000;
	}
	body.home .site-header.is-scrolled .site-tagline {
		color: #000;
	}
}
/* Mobile/tablet home header: same transparent-overlay-on-hero treatment as
   desktop, but targeting the mobile-only controls (hamburger, MAP link,
   tablet-range LINE/CONTACT icons) instead of the desktop nav/text. */
@media (max-width: 899px) {
	body.home .site-header .menu-toggle-bars span,
	body.home .site-header .menu-toggle-bars::before,
	body.home .site-header .menu-toggle-bars::after {
		background: #fff;
	}
	body.home .site-header .menu-toggle-label,
	body.home .site-header .header-map-link,
	body.home .site-header .header-map-label,
	body.home .site-header .header-line-link,
	body.home .site-header .header-contact-link,
	body.home .site-header .header-actions-divider {
		color: #fff;
	}
	body.home .site-header .header-map-divider {
		background: #fff;
	}
	body.home .site-header.is-scrolled .menu-toggle-bars span,
	body.home .site-header.is-scrolled .menu-toggle-bars::before,
	body.home .site-header.is-scrolled .menu-toggle-bars::after {
		background: var(--color-text);
	}
	body.home .site-header.is-scrolled .menu-toggle-label,
	body.home .site-header.is-scrolled .header-map-link,
	body.home .site-header.is-scrolled .header-map-label,
	body.home .site-header.is-scrolled .header-line-link,
	body.home .site-header.is-scrolled .header-contact-link {
		color: var(--color-text);
	}
	body.home .site-header.is-scrolled .header-actions-divider {
		color: #000;
	}
	body.home .site-header.is-scrolled .header-map-divider {
		background: var(--color-text);
	}
}
.site-header .container {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 24px;
	height: 80px;
}
.site-branding {
	justify-self: start;
	margin-left: 10px;
}
.site-branding a {
	position: relative;
	left: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--color-text);
}
.site-branding img {
	height: 40px;
	width: auto;
}
.site-title-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.site-branding .site-tagline {
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #000;
}
.site-branding .site-title {
	font-family: var(--font-title);
	font-size: 10px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.08em;
	color: #000;
}
.main-navigation {
	justify-self: center;
}
.mobile-nav-menu {
	display: none;
}
.mobile-nav-photo {
	display: none;
}
.main-navigation ul {
	display: flex;
	align-items: center;
	gap: 40px;
}
.main-navigation a {
	position: relative;
	display: inline-block;
	color: var(--color-text);
	font-family: var(--font-label);
	font-size: 13px;
	letter-spacing: 0.05em;
}
.qa-amp {
	display: inline-block;
	margin: 0 1px;
}
.main-navigation .desktop-nav-menu a::after {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: calc(100% + 10px);
	height: 1px;
	background: currentColor;
	z-index: -1;
	transform: translateY(-50%) scaleX(0);
	transition: transform 0.25s ease;
}
.main-navigation .desktop-nav-menu a:hover,
.main-navigation .desktop-nav-menu .current-menu-item > a {
	color: var(--color-accent-dark);
}
.main-navigation .desktop-nav-menu a:hover::after,
.main-navigation .desktop-nav-menu .current-menu-item > a::after {
	transform: translateY(-50%) scaleX(1);
}

/* ---------- PC版メガメニュー（ヘッダーのタブにホバーで開く / 2026-08-16〜） ----------
   参考: picniko.com。`.desktop-nav-menu` の中に出力しているので、
   880px以下では親ごと非表示になり、スマホ版メニューには影響しない。
   パネルは li（position: relative）を基準にした position: absolute で、
   タブの中央に合わせて幅は中身に合わせて自動で決まる（横幅を縮めた/2026-08-16）。
   li の中にある＝パネル上にマウスがある間も li:hover が続くので、
   開いたまま項目を選べる。 */
.desktop-nav-menu .menu-item-has-mega {
	position: relative;
}
/* タブとパネルの間（ヘッダーの下余白）を渡るときにホバーが切れないよう、
   タブ自身の真下にだけ透明な“橋”を伸ばす（タブ幅のみ＝この橋の外に
   マウスを外すとメニューは閉じる）。 */
.desktop-nav-menu .menu-item-has-mega::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 5px;
}
.mega-menu {
	position: absolute;
	left: 50%;
	top: 100%;
	width: max-content;
	transform: translate(-50%, 0);
	background: #fff;
	color: var(--color-text);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path 0.3s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.3s;
	text-align: left;
	cursor: default;
}
.desktop-nav-menu .menu-item-has-mega:hover > .mega-menu,
.desktop-nav-menu .menu-item-has-mega:focus-within > .mega-menu {
	visibility: visible;
	clip-path: inset(0 0 0% 0);
}
.mega-menu-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 44px 28px 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px 48px;
}
.mega-menu-group-name {
	position: relative;
	display: block;
	padding-left: 24px;
	font-family: var(--font-label);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	line-height: 1;
	color: var(--color-text);
}
.mega-menu-group-name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 14px;
	height: 1px;
	background: var(--color-accent);
}
.mega-menu-items {
	margin-top: 22px;
	display: grid;
	grid-template-columns: repeat(var(--mega-columns, 1), auto);
	gap: 20px 28px;
}
/* プラン名（Dress + Kimono / PHOTO SHOOT など）は途中で折り返さない。 */
.mega-menu-item {
	min-width: 250px;
}
.mega-menu--wedding .mega-menu-item {
	min-width: 200px;
	width: 200px;
}
.mega-menu--wedding .mega-menu-item {
	padding-block: 25px;
}
.mega-menu--wedding .mega-menu-photo {
	width: 130px;
}
.mega-menu--wedding .mega-menu-name {
	letter-spacing: 0.06em;
}
.mega-menu--wedding .mega-menu-foot {
	justify-content: center;
}
.mega-menu--wedding .mega-menu-items {
	column-gap: 56px;
}
.mega-menu--photo .mega-menu-photo {
	width: 130px;
}
.main-navigation .desktop-nav-menu .mega-menu-item {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--color-text);
}
/* 通常のヘッダーリンク用の下線（a::after）とホーム最上部の白文字化は
   パネル内には効かせない。 */
.main-navigation .desktop-nav-menu .mega-menu a::after {
	content: none;
}
body.home .site-header .main-navigation .mega-menu a:not(.mega-menu-more),
body.home .site-header.is-scrolled .main-navigation .mega-menu a:not(.mega-menu-more) {
	color: var(--color-text);
}
.mega-menu-photo {
	flex: 0 0 auto;
	width: 108px;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-soft);
}
.mega-menu-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.mega-menu-item:hover .mega-menu-photo img {
	transform: scale(1.06);
}
.mega-menu-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.mega-menu-lead {
	font-family: var(--font-body);
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--color-text);
}
.mega-menu-name {
	margin-top: 10px;
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.1em;
	white-space: nowrap;
	color: var(--color-text);
	transition: color 0.25s ease;
}
.mega-menu-item:hover .mega-menu-name {
	color: var(--color-accent-dark);
}
.mega-menu-meta {
	margin-top: 8px;
	font-family: var(--font-label);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.08em;
	color: #8b8b8b;
}
.mega-menu-foot {
	width: 100%;
	margin-top: 4px;
	padding-top: 22px;
	border-top: 1px solid var(--color-border);
	display: flex;
	justify-content: flex-end;
}
.main-navigation .desktop-nav-menu .mega-menu-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 140px;
	height: 35px;
	padding: 7.5px 24.5px;
	border: 1px solid #B4B2AE;
	background: #B4B2AE;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	transition: background 0.25s ease, color 0.25s ease;
}
.main-navigation .desktop-nav-menu .mega-menu-more:hover {
	background: #fff;
	border-color: #B4B2AE;
	color: #B4B2AE;
}
/* 背後を暗くする膜。ヘッダー（z-index:100）より下に敷く。 */
.mega-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s;
}
body:has(.desktop-nav-menu .menu-item-has-mega:hover) .mega-overlay,
body:has(.desktop-nav-menu .menu-item-has-mega:focus-within) .mega-overlay {
	opacity: 1;
	visibility: visible;
}
.header-actions {
	position: relative;
	left: -10px;
	justify-self: end;
	margin-right: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.header-line-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-text);
	font-family: var(--font-label);
	font-size: 13px;
	letter-spacing: 0.05em;
}
.header-line-link::after {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: calc(100% + 10px);
	height: 1px;
	background: currentColor;
	z-index: -1;
	transform: translateY(-50%) scaleX(0);
	transition: transform 0.25s ease;
}
.header-line-link:hover {
	color: var(--color-accent-dark);
}
.header-line-link:hover::after {
	transform: translateY(-50%) scaleX(1);
}
.header-line-icon {
	width: 17px;
	height: 17px;
}
.header-actions-divider {
	color: #000;
	font-size: 13px;
}
.header-contact-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-text);
	font-family: var(--font-label);
	font-size: 13px;
	letter-spacing: 0.05em;
}
.header-contact-link::after {
	content: "";
	position: absolute;
	left: -5px;
	top: 50%;
	width: calc(100% + 10px);
	height: 1px;
	background: currentColor;
	z-index: -1;
	transform: translateY(-50%) scaleX(0);
	transition: transform 0.25s ease;
}
.header-contact-link:hover {
	color: var(--color-accent-dark);
}
.header-contact-link:hover::after {
	transform: translateY(-50%) scaleX(1);
}
.header-contact-icon {
	width: 17px;
	height: 17px;
}
.menu-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	top: 2px;
}
.menu-toggle-bars {
	position: relative;
	width: 18px;
	height: 16px;
}
.menu-toggle-bars span,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	background: var(--color-text);
	transition: 0.25s;
}
.menu-toggle-bars::before { top: 0; }
.menu-toggle-bars span { top: 7px; }
.menu-toggle-bars::after { top: 14px; }
body.nav-is-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}
body.nav-is-open .menu-toggle-bars::before {
	top: 7px;
	transform: rotate(45deg);
}
body.nav-is-open .menu-toggle-bars span {
	opacity: 0;
}
body.nav-is-open .menu-toggle-bars::after {
	top: 7px;
	transform: rotate(-45deg);
}
.menu-toggle-label {
	display: inline-block;
	width: 36px;
	font-family: var(--font-label);
	font-size: 9px;
	letter-spacing: 0.1em;
	color: var(--color-text);
	text-align: center;
	position: relative;
	left: 1px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border);
}
.breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.breadcrumb li {
	display: flex;
	align-items: center;
	font-size: 12px;
	letter-spacing: 0.03em;
	color: var(--color-text-light);
}
.breadcrumb li:not(:last-child)::after {
	content: "\203a";
	margin: 0 8px;
	color: var(--color-text-light);
}
.breadcrumb a {
	color: var(--color-text-light);
}
.breadcrumb a:hover {
	color: var(--color-accent-dark);
}
.breadcrumb [aria-current="page"] {
	color: var(--color-text);
}
@media (max-width: 600px) {
	.breadcrumb { padding: 10px 0; }
	.breadcrumb li { font-size: 11px; }
}

/* ---------- Hero (top photo, full height) ---------- */
.hero-top {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 560px;
	padding: 20px;
	background: #F8F7F5;
	overflow: hidden;
}
.hero-media {
	position: absolute;
	inset: 20px;
	overflow: hidden;
}
.hero-slide {
	position: absolute;
	inset: 0;
	background: center 60% / cover no-repeat;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.hero-slide.is-active {
	opacity: 1;
}
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.15);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-nav:hover {
	background: rgba(0, 0, 0, 0.32);
	border-color: #fff;
}
.hero-nav--prev {
	left: 54px;
}
.hero-nav--next {
	right: 54px;
}
.hero-numbers {
	position: absolute;
	left: 60px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	z-index: 2;
}
.hero-number {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--font-label);
	font-size: 16px;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s ease;
}
.hero-number::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 1px;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: width 0.3s ease;
}
.hero-number:hover {
	color: #fff;
}
.hero-number.is-active {
	color: #fff;
}
.hero-number.is-active::after {
	width: 16px;
}
@media (max-width: 600px) {
	.hero-top {
		padding: 10px;
	}
	.hero-media,
	.hero-message {
		inset: 10px;
	}
	.hero-nav {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
	.hero-nav--prev {
		left: 12px;
	}
	.hero-nav--next {
		right: 12px;
	}
	.hero-numbers {
		left: 12px;
		gap: 16px;
	}
}
.hero-scrim {
	position: absolute;
	inset: -30px;
	background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.18));
	pointer-events: none;
}
/* ---------- Hero opening intro (video only): white cover fades away while the
   message text's own color glides from black to white, revealing the video.
   The fade is triggered by JS (main.js) once the video's own playback has
   actually reached ~4s, not by a fixed page-load timer — on slower
   connections (mobile in particular) the video can start playing later than
   the page loads, so a fixed timer would reveal an earlier, unintended point
   in the footage. ---------- */
.hero-video-reveal {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: #fff;
	pointer-events: none;
	opacity: 1;
	transition: opacity 1.2s ease;
}
.hero-video-reveal.is-revealing {
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.hero-video-reveal {
		display: none;
	}
}
.hero-message {
	position: absolute;
	inset: 20px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 100px;
	pointer-events: none;
}
.hero-message-en {
	font-family: var(--font-label);
	font-size: 18px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 22px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero-message-jp {
	font-family: var(--font-heading);
	font-size: 33px;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: 0.1em;
	color: #fff;
	margin: 0;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.hero-message--with-intro .hero-message-en,
.hero-message--with-intro .hero-message-jp {
	opacity: 0;
	text-shadow: none;
	transition: color 1.2s ease, text-shadow 1.2s ease;
}
.hero-message--with-intro .hero-message-en {
	color: #000;
	animation: hero-text-fade-in 1.7s ease forwards;
	animation-delay: 0.2s;
}
.hero-message--with-intro .hero-message-jp {
	color: #000;
	animation: hero-text-fade-in 1.3s ease forwards;
	animation-delay: 1.2s;
}
.hero-message--with-intro.is-revealing .hero-message-en,
.hero-message--with-intro.is-revealing .hero-message-jp {
	color: #fff;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
@keyframes hero-text-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-message--with-intro .hero-message-en,
	.hero-message--with-intro .hero-message-jp {
		animation: none;
		opacity: 1;
		color: #fff;
	}
	.hero-message--with-intro .hero-message-en {
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}
	.hero-message--with-intro .hero-message-jp {
		text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
	}
}
@media (max-width: 880px) {
	.hero-message {
		padding: 0 70px;
	}
	.hero-message-en {
		font-size: 14px;
		letter-spacing: 0.3em;
		margin-bottom: 18px;
	}
	.hero-message-jp {
		font-size: 26px;
	}
}
@media (max-width: 600px) {
	.hero-message {
		padding: 0 40px;
	}
	.hero-message-en {
		font-size: 11px;
		letter-spacing: 0.25em;
		margin-bottom: 9px;
	}
	.hero-message-jp {
		font-size: 17px;
		line-height: 1.7;
	}
}

/* ---------- Sub-page hero banner (same 20px framing as .hero-top, lower height) ---------- */
.page-hero {
	position: relative;
	height: 400px;
	min-height: 280px;
	padding: 20px;
	background: var(--color-soft);
}
.page-hero-image {
	position: absolute;
	inset: 20px;
	background: center / cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}
.page-hero-label {
	position: relative;
	z-index: 1;
	max-width: calc(100% - 40px);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 38px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-align: center;
}
.page-hero-label .sub {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	letter-spacing: 0.3em;
	text-transform: none;
}
@media (max-width: 600px) {
	.page-hero { height: 180px; min-height: 0; padding: 0; }
	.page-hero-image { inset: 0; }
	.page-hero-label { letter-spacing: 0.15em; }
}

/* About hero: two-line label (en/jp), font size matched to .contact-hero-label */
.page-hero-label-multi { font-size: inherit; }
.page-hero-label-multi .en {
	display: block;
	font-size: 38px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.page-hero-label-multi .jp {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	letter-spacing: 0.3em;
}
@media (max-width: 600px) {
	.page-hero-label { font-size: 18px; }
	.page-hero-label .sub { font-size: 10px; letter-spacing: 0.1em; }
	.page-hero-label-multi .en { font-size: 18px; letter-spacing: 0.3em; }
	.page-hero-label-multi .jp { font-size: 10px; letter-spacing: 0.1em; }
}

/* ---------- Plan list (プラン・サービス一覧): category heading + line,
   then photo-left/text-right rows with price + DETAIL. PICNIKO's
   wedding-movies page is the design reference. Whole block sits in a
   slightly narrower column than the page's full container, so photos/
   text/spacing all read a bit more compact together. ---------- */
.plan-category {
	max-width: 1150px;
	margin: 0 auto;
}
/* 見出しを削除した結婚式プラン・撮影プラン・出張撮影プランの3ページのみ、
   パンくずリストからタブまでの余白（.sectionのpadding-top: 96px）を80pxにする。
   見出しが残っているプラン・サービス一覧ページ（.plan-category--overview）は対象外。 */
.plan-category:not(.plan-category--overview) {
	margin-top: -16px;
}
.plan-category-heading-row {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 8px 0 48px;
}
.plan-category-heading-row h2 {
	font-size: 22px;
	white-space: nowrap;
	margin: 0;
}
.plan-category-line {
	display: block;
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-border);
}
.plan-list {
	display: flex;
	flex-direction: column;
}
.plan-row {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	align-items: center;
	gap: 90px;
	padding: 64px 0;
	border-bottom: 1px solid var(--color-border);
}
.plan-row:first-child {
	border-top: 1px solid var(--color-border);
}
.plan-row-photo img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	display: block;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.plan-row-text .eyebrow {
	display: inline-block;
	font-family: var(--font-label);
	color: var(--color-accent-dark);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 11px;
	margin-bottom: 14px;
}
.plan-row-text h3 {
	font-size: 22px;
	font-weight: 500;
	margin-bottom: 18px;
}
.plan-price {
	margin: 0 0 22px;
}
.plan-price-main {
	display: block;
	font-family: var(--font-label);
	font-size: 17px;
	color: var(--color-accent-dark);
}
.plan-price-sub {
	display: block;
	font-family: var(--font-label);
	font-size: 12px;
	color: var(--color-text-light);
	margin-top: 6px;
}
.plan-description {
	font-size: 12px;
	line-height: 1.8;
	color: var(--color-text-light);
	margin-bottom: 26px;
}
.plan-detail-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 140px;
	height: 35px;
	padding: 7.5px 24.5px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	color: var(--color-text);
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.15em;
}
@media (max-width: 880px) {
	.plan-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		padding: 40px 0;
	}
	.plan-category-heading-row {
		margin-bottom: 32px;
	}
}
/* プラン・サービス一覧ページのみ：プランを区切る線（見出し下の一番上の線を含む）
   を非表示にする。.plan-rowは結婚式プランページ（template-wedding-plan.php）と
   共通クラスのため、このページ専用の .plan-category--overview で絞る。 */
.plan-category--overview .plan-row {
	border-top: none;
	border-bottom: none;
}
/* このページの各プラン写真を、トップページWEDDINGセクションの写真と同じ縦横比に揃える。
   横幅は550px。ただし写真の列がそれより狭い画面（タブレット幅など）では
   はみ出さないよう、列幅を超えない範囲に収める（min()）。 */
.plan-category--overview .plan-row-photo img {
	width: min(550px, 100%);
	aspect-ratio: 3 / 2;
	position: relative;
	left: 50px;
}
/* DETAILボタンの色を、トップページの各プランのDETAILボタンと揃える。 */
.plan-category--overview .plan-detail-btn {
	border-color: #B4B2AE;
	background: #B4B2AE;
	color: #fff;
	transition: background 0.25s ease, color 0.25s ease;
}
.plan-category--overview .plan-detail-btn:hover {
	background: #fff;
	border-color: #B4B2AE;
	color: #B4B2AE;
}
.plan-category--overview .plan-category-heading-row h2 {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 5px;
}
.plan-category--overview > .eyebrow {
	font-size: 11px;
	letter-spacing: 2px;
}
@media (max-width: 600px) {
	.plan-category-heading-row {
		gap: 16px;
		margin: 8px 0 24px;
	}
	.plan-category-heading-row h2 {
		font-size: 19px;
	}
	.plan-row {
		padding: 28px 0;
	}
	.plan-price-main {
		font-size: 15px;
	}
	.plan-price-sub {
		font-size: 11px;
	}
	.plan-detail-btn {
		width: 110px;
		height: 30px;
		padding: 5.5px 20.5px;
		font-size: 9px;
	}
}

/* ---------- 結婚式プラン詳細ページ（template-wedding-plan.php）のタブ切り替え ----------
   FAQのタブ（.faq-tab-btn）と見た目は揃えつつ、選ばれていないプランは
   スクロールで送るのではなく完全に隠す（.plan-tab-panelはdisplay:none、.is-activeのみ表示）。 */
.plan-tabs-nav {
	margin-bottom: 48px;
}
.plan-tabs-nav-inner {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	width: 100%;
}
.plan-tab-btn {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 8px;
	background: none;
	border: 1px solid #B4A590;
	color: #B4A590;
	font-family: var(--font-heading);
	font-size: 15px;
	letter-spacing: 0.06em;
	border-radius: 0;
	cursor: pointer;
	white-space: normal;
	text-align: center;
	transition: all 0.25s ease;
}
.plan-tab-btn:hover,
.plan-tab-btn.is-active {
	background: #B4A590;
	color: #fff;
}
.plan-tab-panel {
	display: none;
}
.plan-tab-panel.is-active {
	display: block;
}
.plan-tab-panel.is-sliding-in-from-right {
	animation: planTabSlideFromRight 2s ease;
}
.plan-tab-panel.is-sliding-in-from-left {
	animation: planTabSlideFromLeft 2s ease;
}
@keyframes planTabSlideFromRight {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes planTabSlideFromLeft {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.plan-tab-panel.is-sliding-in-from-right,
	.plan-tab-panel.is-sliding-in-from-left {
		animation: none;
	}
}
.plan-tab-header {
	max-width: 680px;
	margin: 0 auto 40px;
	text-align: center;
}
.plan-tab-header .eyebrow {
	display: inline-block;
	font-family: var(--font-label);
	color: var(--color-accent-dark);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 11px;
	margin-bottom: 14px;
}
.plan-tab-header h3 {
	font-size: 29px;
	font-weight: 400;
	letter-spacing: 3px;
	margin-top: -10px;
	margin-bottom: 10px;
}
.plan-tab-subtitle {
	font-family: var(--font-label);
	font-size: 10px;
	color: var(--color-accent-dark);
	margin-top: -7px;
	margin-bottom: 20px;
}
.plan-tab-description {
	font-size: 13px;
	line-height: 1.9;
	color: var(--color-text-light);
	margin-top: 5px;
	margin-bottom: 24px;
}
.plan-tab-features {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: -10px 0 0;
	padding: 0;
}
.plan-tab-features li {
	padding: 6px 16px;
	border: 1px solid var(--color-border);
	font-size: 11px;
	color: var(--color-text-light);
}
.plan-tab-photo {
	margin: 0 0 40px;
}
.plan-tab-photo img {
	width: 100%;
	max-width: 780px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	margin: 0 auto;
}
.plan-tab-quicknav {
	max-width: 780px;
	margin: 0 auto 40px;
}
.plan-tab-quicknav-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.plan-tab-quicknav-item {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 150px;
	padding: 16px 0;
	padding-left: 150px;
	border-bottom: 1px solid var(--color-border);
}
.plan-tab-quicknav-item:first-child {
	border-top: 1px solid var(--color-border);
}
.plan-tab-quicknav-item--price {
	align-items: center;
}
.plan-tab-quicknav-item:has(.plan-tab-quicknav-caption-list) {
	align-items: center;
}
.plan-tab-quicknav-btn {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 35px;
	padding: 7.5px 14.5px;
	border: 1px solid #B4B2AE;
	border-radius: 0;
	background: #fff;
	color: #B4B2AE;
	font-family: var(--font-label);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.15em;
}
.plan-tab-quicknav-caption {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 35px;
	font-size: 14px;
	color: var(--color-text-light);
}
.plan-tab-quicknav-caption-main {
	display: block;
	font-family: var(--font-label);
	font-size: 14px;
	color: var(--color-accent-dark);
}
.plan-tab-quicknav-caption-sub {
	display: block;
	font-family: var(--font-label);
	font-size: 10.5px;
	color: var(--color-text-light);
	margin-top: 3px;
}
.plan-tab-quicknav-caption-amount {
	font-size: calc(1.1em + 3px);
}
.plan-tab-quicknav-caption-label {
	font-size: 0.85em;
}
.plan-tab-quicknav-caption-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.plan-tab-quicknav-caption-list li {
	padding: 4px 0;
}
.plan-tab-quicknav-flow {
	max-width: 780px;
	margin: 72px auto 0;
}
.plan-tab-quicknav-flow .plan-tab-block-heading {
	font-size: 16px;
}
.plan-tab-quicknav-flow-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.plan-tab-quicknav-flow-item {
	padding: 10px 0;
	text-align: center;
}
.plan-tab-quicknav-flow-label {
	display: inline-block;
	background: #EDEBE7;
	color: var(--color-text);
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	margin-bottom: 10px;
}
.plan-tab-quicknav-flow-desc {
	font-size: 12px;
	line-height: 1.9;
	color: var(--color-text-light);
	text-decoration: underline;
}
.plan-tab-price {
	text-align: center;
	margin-bottom: 56px;
}
.plan-tab-content,
.plan-tab-flow {
	max-width: 680px;
	margin: 0 auto 56px;
}
.plan-tab-block-heading {
	font-family: var(--font-label);
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
	text-align: center;
	margin: 0 0 24px;
}
.plan-tab-content-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.plan-tab-content-list li {
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border);
	font-size: 13px;
	color: var(--color-text-light);
}
.plan-tab-content-list li:first-child {
	border-top: 1px solid var(--color-border);
}
.plan-tab-flow-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.plan-tab-flow-list li {
	display: flex;
	align-items: baseline;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
}
.plan-tab-flow-list li:first-child {
	border-top: 1px solid var(--color-border);
}
.plan-tab-flow-number {
	font-family: var(--font-label);
	font-size: 13px;
	color: var(--color-accent-dark);
	flex-shrink: 0;
	width: 28px;
}
.plan-tab-flow-title {
	font-size: 13px;
}
.plan-tabs .plan-detail-btn {
	display: flex;
	margin: 0 auto;
	width: 200px;
}
@media (max-width: 880px) {
	.plan-tabs-nav {
		margin-bottom: 32px;
	}
	.plan-tab-btn {
		padding: 10px 8px;
		font-size: 14px;
	}
	.plan-tab-header h3 {
		font-size: 22px;
	}
}
@media (max-width: 600px) {
	.plan-tabs-nav-inner {
		gap: 6px;
	}
	.plan-tab-btn {
		padding: 9px 4px;
		font-size: 12px;
		letter-spacing: 0.02em;
	}
	.plan-tab-header h3 {
		font-size: 19px;
	}
	.plan-tab-description {
		font-size: 12px;
	}
	.plan-tab-content-list li,
	.plan-tab-flow-title {
		font-size: 12px;
	}
	.plan-tab-quicknav {
		margin-bottom: 28px;
	}
	.plan-tab-quicknav-item {
		gap: 14px;
		padding: 12px 0;
		padding-left: 0;
	}
	.plan-tab-quicknav-btn {
		width: 100px;
		height: 33px;
		padding: 5.5px 12px;
		font-size: 9px;
	}
	.plan-tab-quicknav-caption {
		min-height: 33px;
		font-size: 13px;
	}
	.plan-tab-quicknav-caption-main {
		font-size: 13px;
	}
	.plan-tab-quicknav-caption-sub {
		font-size: 9.5px;
	}
}

/* ---------- Hero intro (tagline text, below the photo) ---------- */
.hero-intro {
	padding: 96px 0;
	text-align: center;
	background: var(--color-bg);
}
.hero-intro-inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 24px;
}
.hero-intro-inner .eyebrow {
	display: inline-block;
	font-family: var(--font-label);
	letter-spacing: 0.35em;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--color-accent-dark);
	margin-bottom: 28px;
}
.hero-tagline {
	font-size: 32px;
	font-weight: 500;
	line-height: 1.7;
	margin-bottom: 28px;
}
.hero-lead {
	font-size: 15px;
	color: var(--color-text-light);
	line-height: 2;
	margin-bottom: 40px;
}

/* ---------- Company overview / content ---------- */
.about-content-solo {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.about-content-solo .eyebrow {
	display: inline-block;
	font-family: var(--font-label);
	color: var(--color-accent-dark);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 13px;
	margin-bottom: 12px;
}
.about-content-solo h2 {
	font-size: 32px;
	margin-bottom: 24px;
}
.about-content-solo p { color: var(--color-text-light); }

/* ---------- About teaser (photo right / text left + About Us link, front page) ---------- */
.about-teaser {
	/* 共通の.section上下96pxのうち、上を16px、下を20px減らす */
	padding-top: 76px;
	padding-bottom: 72px;
}
.about-teaser-inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 64px;
}
.about-teaser-text {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.about-teaser-photo img {
	width: 80%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	margin: 0 auto;
}
.about-teaser-line {
	display: block;
	width: 60px;
	height: 3px;
	background: var(--color-text);
	margin: 0 auto 44px;
}
.about-teaser-text .eyebrow {
	display: inline-block;
	font-family: var(--font-label);
	color: var(--color-text-light);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom: 22px;
}
.about-teaser-text h2 {
	font-size: 33px;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 40px;
}
.about-teaser-text p {
	font-size: 14px;
	color: var(--color-text-light);
}
.about-teaser-mobile-break {
	display: none;
}
.about-teaser-mobile-photo {
	display: none;
}
.about-teaser-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 140px;
	height: 35px;
	padding: 7.5px 24.5px;
	margin-top: 40px;
	border: 1px solid #B4A590;
	border-radius: 0;
	background: #B4A590;
	color: #fff;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.15em;
	transition: opacity 1.1s ease, transform 1.1s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}
.about-teaser-more-text {
	font-weight: 400;
}
.about-teaser-more:hover {
	background: #fff;
	border-color: #B4A590;
	color: #B4A590;
}
.about-teaser-more:active {
	background: #fff;
	border-color: #B4A590;
	color: #B4A590;
	transition: none;
}
@media (max-width: 880px) {
	.about-teaser-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.about-teaser-photo {
		order: -1;
	}
	.about-teaser-text .eyebrow {
		font-size: 14px;
	}
	.about-teaser-text h2 {
		font-size: 26px;
	}
}
@media (max-width: 600px) {
	.about-teaser-inner {
		gap: 24px;
	}
	.about-teaser-photo {
		display: none;
	}
	.about-teaser-text {
		text-align: center;
	}
	.about-teaser-text .eyebrow {
		font-size: 11px;
		margin-bottom: 10px;
	}
	.about-teaser-text h2 {
		font-size: 17px;
		margin-bottom: 25px; /* 基本の40pxから15px縮小（スマホ版のみ）。説明文・写真・MOREを差し引き5px上に移動 */
	}
	.about-teaser-line {
		width: 40px;
		height: 2px;
		margin: 0 auto 15px;
	}
	.about-teaser-text p {
		font-size: 10px;
	}
	.about-teaser-mobile-break {
		display: inline;
	}
	.about-teaser-mobile-photo {
		display: block;
		padding: 0 30px;
		margin-top: 30px;
	}
	.about-teaser-mobile-photo img {
		width: 100%;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		display: block;
	}
	.about-teaser-more {
		width: 115px;
		height: 33px;
		padding: 5.5px 20.5px;
		margin: 30px auto 0;
		font-size: 9px;
	}
}

.entry-content { font-size: 16px; }
.entry-content h2 { font-size: 28px; margin-top: 1.6em; }
.entry-content h3 { font-size: 22px; margin-top: 1.4em; }
.entry-content p { margin: 0 0 1.4em; }

/* Plan / service cards — apply CSS class "plan-card" to a Group block */
.plan-card {
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: 40px 32px;
	background: #fff;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.plan-card:hover {
	box-shadow: 0 16px 40px rgba(0,0,0,0.08);
	transform: translateY(-4px);
}
.plan-card h3 {
	color: var(--color-accent-dark);
	font-size: 24px;
}
.plan-card .price {
	font-family: var(--font-heading);
	font-size: 28px;
	color: var(--color-text);
	margin: 12px 0 20px;
}

/* Case / gallery cards — apply CSS class "case-card" to a Group block */
.case-card {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	overflow: hidden;
}
.case-card img { aspect-ratio: 4/3; object-fit: cover; }
.case-card .case-card-body { padding: 20px 24px; }

/* Native gallery block polish */
.wp-block-gallery img {
	border-radius: 4px;
	transition: transform 0.3s ease;
}
.wp-block-gallery figure:hover img { transform: scale(1.03); }

/* ---------- Contact ---------- */
.contact-hero-photo {
	position: relative;
	height: 360px;
	min-height: 240px;
	margin: 20px;
	background: center / cover no-repeat var(--color-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}
.contact-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}
.contact-hero-label {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #fff;
}
.contact-hero-label .en {
	display: block;
	font-family: var(--font-heading);
	font-size: 38px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}
.page-template-template-line-php .contact-hero-label .en {
	color: #fff;
}
.contact-hero-label .jp {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	letter-spacing: 0.3em;
}
@media (max-width: 600px) {
	.contact-hero-photo { height: 160px; min-height: 0; margin: 0; }
	.contact-hero-label .en { font-size: 18px; }
	.contact-hero-label .jp { font-size: 10px; letter-spacing: 0.1em; }
}

.contact-wrap {
	max-width: 900px;
	margin: 0 auto;
}
.contact-info {
	display: flex;
	justify-content: center;
	gap: 48px;
	margin-bottom: 48px;
	flex-wrap: wrap;
	text-align: center;
}
.contact-info .item .label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.15em;
	color: var(--color-accent-dark);
	text-transform: uppercase;
	margin-bottom: 6px;
}

.contact-hero + .section {
	padding-top: 48px;
}
.contact-form-card {
	padding: 40px 40px 48px;
	background: #F8F7F5;
	border-radius: 0;
}
@media (max-width: 600px) {
	.contact-form-card {
		padding: 24px 20px 32px;
	}
}
.contact-form-card .entry-content {
	max-width: 600px;
	margin: 0 auto;
}
.contact-form-card .entry-content > p {
	text-align: left;
	color: #000;
	font-size: 13px;
	line-height: 1.9;
	margin: 0 0 3px;
}
.contact-form-card .entry-content > p:first-of-type {
	margin-top: 20px;
}
.contact-form-card .entry-content > p:last-of-type {
	margin-bottom: 40px;
}
.contact-form-card .entry-content > p a {
	font-weight: 700;
	text-decoration: underline;
}

.wpcf7-form .cf7-field {
	margin-bottom: 26px;
}
.wpcf7-form .cf7-field label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-label);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-text);
	margin-bottom: 5px;
}
.wpcf7-form .cf7-field label::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 1.1em;
	background: #B4A590;
	flex-shrink: 0;
}
.wpcf7-form .cf7-field-checkbox label {
	margin-bottom: 10px;
}
.wpcf7-form .cf7-field label .req {
	color: #c0392b;
	font-size: 14px;
	line-height: 1;
}
.wpcf7-form .cf7-caption {
	font-size: 12px;
	color: var(--color-text-light);
	margin: 0 0 5px;
}

/* CF7 wraps every field in an inline-block <span>; without an explicit
   block + 100% width, that wrap shrinks to the input's native "size"
   attribute width instead of the field's actual column, which pushed
   text/email inputs past the viewport edge on narrow screens. */
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

/* Checkbox groups (お問い合わせ内容 / ご検討の内容 / どこで知ったか) */
.wpcf7-form .cf7-field-checkbox .wpcf7-form-control-wrap {
	display: block;
}
.wpcf7-form .wpcf7-checkbox {
	display: flex;
	flex-wrap: wrap;
	column-gap: 28px;
	row-gap: 14px;
}
.wpcf7-form-control-wrap[data-name="your-consideration"] .wpcf7-checkbox {
	row-gap: 3px;
}
.wpcf7-checkbox-break {
	flex-basis: 100%;
	height: 0;
}
.wpcf7-form .wpcf7-list-item {
	margin: 0;
	display: inline-flex;
	align-items: center;
}
.wpcf7-form-control-wrap[data-name="your-inquiry-type"] .wpcf7-list-item:not(:first-child) {
	margin-left: -10px;
}
.wpcf7-form-control-wrap[data-name="your-consideration"] .wpcf7-list-item {
	margin-left: -10px;
}
.wpcf7-form-control-wrap[data-name="your-consideration"] .wpcf7-list-item:first-child,
.wpcf7-form-control-wrap[data-name="your-consideration"] .wpcf7-checkbox-break + .wpcf7-list-item {
	margin-left: 0;
}
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
	width: 15px;
	height: 15px;
	margin: 0 6px 0 0;
	accent-color: var(--color-accent-dark);
	cursor: pointer;
	flex-shrink: 0;
}
.wpcf7-form .wpcf7-list-item-label {
	font-size: 11px;
	color: var(--color-text);
	cursor: pointer;
	user-select: none;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: #fff;
	font-family: var(--font-body);
	font-size: 15px;
	transition: border-color 0.2s ease;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select {
	height: 30px;
	padding: 0 16px;
}
#your-name,
#your-email,
#your-email-confirm {
	height: 35px;
	width: 400px;
}
@media (max-width: 600px) {
	#your-name,
	#your-email,
	#your-email-confirm {
		width: 100%;
	}
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--color-accent-dark);
}
.wpcf7-form textarea { min-height: 120px; max-width: 600px; resize: vertical; }

.wpcf7-form .cf7-submit {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 40px;
}
.wpcf7-form .cf7-submit .wpcf7-spinner {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 0 0 12px;
}
.wpcf7-form input[type="submit"] {
	display: inline-block;
	min-width: 220px;
	height: 52px;
	padding: 0 40px;
	line-height: 52px;
	background: #B4B2AE;
	color: #fff;
	border: none;
	border-radius: 0;
	font-family: var(--font-heading);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.2s ease;
}
.wpcf7-form input[type="submit"]:hover {
	transform: translateY(-2px);
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
	border-color: #c0392b;
}
.wpcf7-not-valid-tip { color: #c0392b; font-size: 13px; font-weight: 600; margin-top: 6px; }
.wpcf7-response-output { border-radius: 0; padding: 16px 20px !important; margin-top: 24px !important; text-align: center; }
@media (max-width: 600px) {
	/* The desktop checkbox rows rely on negative margins tuned for a
	   multi-column wrap; on narrow screens that wraps too tightly and
	   staggers, so stack one choice per line instead. */
	.wpcf7-form .wpcf7-checkbox {
		flex-direction: column;
		row-gap: 3px;
	}
	.wpcf7-form .wpcf7-list-item,
	.wpcf7-form-control-wrap[data-name="your-inquiry-type"] .wpcf7-list-item:not(:first-child),
	.wpcf7-form-control-wrap[data-name="your-consideration"] .wpcf7-list-item {
		width: 100%;
		margin-left: 0;
	}
	.wpcf7-form .wpcf7-list-item-label {
		white-space: normal;
	}
	.wpcf7-checkbox-break {
		display: none;
	}
}

.contact-notes {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.contact-notes li {
	position: relative;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--color-text-light);
}
.contact-notes li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #B4A590;
}
@media (max-width: 600px) {
	.contact-form-card { padding: 36px 24px; }
}

/* ---------- LINE ---------- */
.line-qr-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
	padding: 8px 0 0;
}
.line-qr-image {
	width: 220px;
	height: 220px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 4px;
}
.line-qr-caption {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--color-text-light);
	letter-spacing: 0.05em;
}
.line-add-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 260px;
	height: 52px;
	margin-top: 24px;
	padding: 0 32px;
	background: #06c755;
	color: #fff;
	border-radius: 999px;
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.05em;
	transition: background 0.25s ease, transform 0.2s ease;
}
.line-add-button:hover {
	background: #05b34c;
	color: #fff;
	transform: translateY(-2px);
}
.line-add-button-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
@media (max-width: 600px) {
	.line-qr-image { width: 180px; height: 180px; padding: 12px; }
	.line-add-button { width: 100%; min-width: 0; }
}

/* ---------- Footer ---------- */
.site-footer {
	background: #F8F7F5;
	color: var(--color-text-light);
	padding: 64px 0 0;
}
.site-footer a { color: var(--color-text-light); }
.site-footer a:hover { color: var(--color-accent-dark); }
.footer-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 40px;
}
.footer-brand {
	font-family: var(--font-heading);
	font-size: 22px;
	color: var(--color-text);
}
.footer-nav ul { display: flex; gap: 28px; flex-wrap: wrap; font-size: 10px; }
@media (min-width: 881px) {
	.footer-nav ul li a {
		display: inline-block;
		padding: 5px 0;
	}
}
.footer-bottom {
	background: #F8F7F5;
	padding: 24px 0;
	font-size: 10px;
	text-align: center;
	color: var(--color-text-light);
}
@media (max-width: 600px) {
	.site-footer {
		padding-top: 15px;
	}
	.footer-grid {
		margin-bottom: 0;
	}
	.footer-nav ul {
		justify-content: center;
		gap: 4px 20px;
	}
	.footer-bottom {
		padding: 6px 0 21px;
	}
	.section.footer-contact-section {
		padding-top: 0 !important;
		padding-bottom: 0;
	}
}

/* ---------- Front page WEDDING menu (sticky left MENU nav + photo left / text right list) ---------- */
/* WEDDING PLANS区切り線の上からPHOTO PLANSセクションの終わり（INSTAGRAMの手前）まで、
   コンタクトページのフォームカード背景（.contact-form-card）と同じ色を敷く。 */
#wedding-menu,
#photo-menu {
	background: #F8F7F5;
}
.wedding-menu-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 80px;
}
.wedding-menu-sidebar-inner {
	position: sticky;
	top: calc( var( --site-header-height, 0px ) + 40px );
	left: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
@media (min-width: 881px) {
	/* 追従メニューの上の横棒（.wedding-menu-sidebar-dash）を、帯の線
	   （.wedding-menu-divider-top-line）と同じ高さに揃える。PCのみ対象。
	   仮の数値なので、実際の見た目を見て微調整すること。 */
	#wedding-menu .wedding-menu-sidebar-inner,
	#photo-menu .wedding-menu-sidebar-inner {
		margin-top: -23px;
	}
	/* 追従メニューが一番下まで到達したとき、ALL PLANボタンの下線が
	   一番下の写真につく枠線（.wedding-menu-item::after、bottom: 45px）の
	   下線と同じ高さになるよう、追従メニュー側にも同じ45pxのオフセットを
	   持たせる。PCのみ対象。 */
	#wedding-menu .wedding-menu-sidebar-inner,
	#photo-menu .wedding-menu-sidebar-inner {
		margin-bottom: 45px;
	}
	/* ALL PLANボタンを10px下にずらす。PCのみ対象。 */
	#wedding-menu .wedding-menu-sidebar-more,
	#photo-menu .wedding-menu-sidebar-more {
		margin-top: 10px;
	}
}
.wedding-menu-sidebar-dash {
	display: block;
	width: 40px;
	height: 1px;
	margin-top: 0;
	background: var(--color-text);
}
.wedding-menu-sidebar-title {
	font-family: var(--font-heading);
	font-size: 35px;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: 20px 0 0;
}
.wedding-menu-sidebar-subtitle {
	font-family: var(--font-label);
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--color-text);
	margin: 0;
}
.wedding-menu-sidebar-desc {
	font-size: 12px;
	line-height: 1.8;
	color: var(--color-text-light);
	margin: 0;
}
/* WEDDINGセクションのタイトル・説明文は、Your Whyセクション
   （「それが、あなただけの理由」.about-teaser-text h2 / p）と
   フォントサイズを揃える。PHOTOセクションも同じサイズにする。 */
#wedding-menu .wedding-menu-sidebar-title,
#photo-menu .wedding-menu-sidebar-title {
	font-size: 30px;
}
#wedding-menu .wedding-menu-sidebar-subtitle,
#wedding-menu .wedding-menu-sidebar-desc,
#photo-menu .wedding-menu-sidebar-subtitle,
#photo-menu .wedding-menu-sidebar-desc {
	font-size: 12px;
}
/* タイトル→説明文の余白を、Your Whyセクション（.about-teaser-text h2の
   margin-bottom: 40px）と揃える。.wedding-menu-sidebar-inner側のgapに
   上乗せする形になるため、gap分を差し引いた値をmargin-topに指定している。 */
#wedding-menu .wedding-menu-sidebar-subtitle {
	margin-top: 20px; /* 40px − 親のgap 20px（デスクトップ） */
}
.wedding-menu-sidebar-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 140px;
	height: 35px;
	font-family: var(--font-label);
	font-size: 12px;
	letter-spacing: 0.1em;
	color: #fff;
	border: 1px solid #B4A590;
	background: #B4A590;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wedding-menu-sidebar-more:hover {
	background: #fff;
	border-color: #B4A590;
	color: #B4A590;
}
.wedding-menu-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
.wedding-menu-item {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 0;
	padding: 40px 0;
	color: var(--color-text);
	scroll-margin-top: calc( var( --site-header-height, 0px ) + 24px );
}
.wedding-menu-item:hover {
	color: var(--color-text);
}
/* カード全体が1つのリンクになっているため、スマホでタップすると標準の
   タップ光効果（灰色フラッシュ）がカード全体にかかってしまう。それを消し、
   代わりにDETAILボタン側にだけタップ時の見た目の変化を持たせる。 */
.wedding-menu-item {
	-webkit-tap-highlight-color: transparent;
}
.wedding-menu-photo {
	position: relative;
	left: 10px;
	overflow: hidden;
}
.wedding-menu-photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}
.wedding-menu-number {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 5px;
	font-family: var(--font-label);
	letter-spacing: 0.15em;
	color: var(--color-text-light);
	font-size: 13px;
	margin-bottom: 7px;
}
.wedding-menu-text {
	position: relative;
	left: 10px;
}
.wedding-menu-text h3 {
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.05em;
	margin-bottom: 11px;
}
.wedding-menu-subtitle {
	font-family: var(--font-label);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--color-text-light);
}
.wedding-menu-text p {
	font-size: 12px;
	color: var(--color-text-light);
}
.wedding-menu-price {
	margin: 0 0 11px;
}
.wedding-menu-price-main {
	display: block;
	font-family: var(--font-label);
	font-size: 17px;
	color: var(--color-accent-dark);
}
.wedding-menu-price-sub {
	display: block;
	font-family: var(--font-label);
	font-size: 12px;
	color: var(--color-text-light);
	margin-top: -6px;
}
.wedding-menu-price-amount {
	font-size: calc(1.1em + 3px);
}
.wedding-menu-price-yen {
	margin-right: 2px;
}
.wedding-menu-price-label {
	font-size: 0.85em;
}
/* 説明文〜DETAILボタンを白背景のBOXで囲む（枠線なし）。WEDDING・PHOTO両方対象。 */
#wedding-menu .wedding-menu-detail-box,
#photo-menu .wedding-menu-detail-box {
	background: #fff;
	padding: 20px;
}
@media (min-width: 881px) {
	/* 白いBOXの高さを写真に合わせる。PCのみ対象。 */
	#wedding-menu .wedding-menu-item,
	#photo-menu .wedding-menu-item {
		align-items: stretch;
	}
	#wedding-menu .wedding-menu-text,
	#photo-menu .wedding-menu-text {
		height: 100%;
	}
	#wedding-menu .wedding-menu-detail-box,
	#photo-menu .wedding-menu-detail-box {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}
	/* 写真と白BOXをひとつづきの塊とみなし、まとめて細い枠線を重ねる
	   （スマホ版の.wedding-menu-item::afterと同様の考え方）。PCのみ対象。 */
	#wedding-menu .wedding-menu-item,
	#photo-menu .wedding-menu-item {
		position: relative;
	}
	#wedding-menu .wedding-menu-item::after,
	#photo-menu .wedding-menu-item::after {
		content: "";
		position: absolute;
		top: 45px;
		right: 15px;
		bottom: 45px;
		left: 15px;
		border: 1px solid #B4B2AE;
		pointer-events: none;
	}
	/* 白いBOXを写真にくっつける（左マージンなし）。右側は枠線との間が
	   5pxになるよう20pxに調整。PCのみ対象。 */
	#wedding-menu .wedding-menu-detail-box,
	#photo-menu .wedding-menu-detail-box {
		margin: 0 20px 0 0;
	}
	/* BOX内のテキスト・DETAILボタンだけを右に40pxずらす。PCのみ対象。 */
	#wedding-menu .wedding-menu-text-group,
	#photo-menu .wedding-menu-text-group,
	#wedding-menu .wedding-menu-more,
	#photo-menu .wedding-menu-more {
		position: relative;
		left: 40px;
	}
	/* WEDDING PLANS/PHOTO PLANSの帯は、左の区切り線を消して文字を
	   写真の左端（サイドバー240px + gap 80px + 写真自身のleft:40pxのズレ分）に
	   揃え、区切り線は文字の右側だけに残す。PCのみ対象。 */
	/* 帯（.wedding-menu-divider-top-row）はコンテナの一番最初の要素で、
	   コンテナ自身に上のpadding/borderが無いと、子のmargin-topが親と
	   マージンの相殺（collapse）を起こして効かなくなることがあるため、
	   margin-topではなくコンテナ側のpadding-topで確実に下げる。PCのみ対象。 */
	#wedding-menu .container,
	#photo-menu .container {
		padding-top: 30px;
	}
	#wedding-menu .wedding-menu-divider-top-row,
	#photo-menu .wedding-menu-divider-top-row {
		gap: 16px;
		/* 帯の下（写真）との余白を基本の40pxから30px詰める。PCのみ対象。 */
		margin-bottom: 10px;
	}
	#wedding-menu .wedding-menu-divider-top-line:first-child,
	#photo-menu .wedding-menu-divider-top-line:first-child {
		display: none;
	}
	#wedding-menu .wedding-menu-divider-top-label,
	#photo-menu .wedding-menu-divider-top-label {
		margin-left: 335px;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 3px;
	}
}
.wedding-menu-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 140px;
	height: 35px;
	margin-top: 15px;
	padding: 7.5px 24.5px;
	border: 1px solid #B4B2AE;
	border-radius: 0;
	background: #B4B2AE;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #fff;
	transition: background 0.25s ease, color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}
.wedding-menu-more-arrow {
	display: inline-block;
	transition: transform 0.25s ease;
}
.wedding-menu-more:hover {
	background: #fff;
	border-color: #B4B2AE;
	color: #B4B2AE;
}
.wedding-menu-more:hover .wedding-menu-more-arrow {
	transform: translateX(4px);
}
.wedding-menu-more:active {
	background: #fff;
	border-color: #B4B2AE;
	color: #B4B2AE;
	transition: none;
}
.wedding-menu-divider {
	margin: 40px 0 0;
	border: none;
	border-top: 1px solid var(--color-border);
}
.wedding-menu-divider-top-row {
	/* ラベルを中央、左右に区切り線（コンテナ左端〜右端まで） */
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 40px;
}
.wedding-menu-divider-top-line {
	flex: 1 1 auto;
	height: 1px;
	background: var(--color-border);
}
.wedding-menu-divider-top-label {
	font-size: 12px;
	letter-spacing: calc(0.1em + 5px);
	white-space: nowrap;
	color: var(--color-text);
}
.wedding-menu-divider-top-label-mobile,
.wedding-menu-sidebar-title-mobile {
	display: none;
}
@media (max-width: 880px) {
	.wedding-menu-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.wedding-menu-divider {
		margin-top: 24px;
	}
	.wedding-menu-divider-top-row {
		margin-bottom: 24px;
	}
	.wedding-menu-sidebar-inner {
		position: static;
		gap: 12px;
	}
	.wedding-menu-sidebar-title {
		font-size: 25px;
	}
	#wedding-menu .wedding-menu-sidebar-title,
	#photo-menu .wedding-menu-sidebar-title {
		font-size: 23px;
	}
	#wedding-menu .wedding-menu-sidebar-subtitle,
	#photo-menu .wedding-menu-sidebar-subtitle {
		margin-top: 28px; /* 40px − 親のgap 12px（タブレット・スマホ） */
	}
	.wedding-menu-item {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 28px 0;
	}
	/* WEDDING・PHOTO両プランとも、全カード共通で写真とテキスト(BOX)の間の余白を0にする。 */
	#wedding-menu .wedding-menu-item,
	#photo-menu .wedding-menu-item {
		row-gap: 0;
	}
	.wedding-menu-text h3 {
		font-size: 22px;
	}
	#wedding-menu .wedding-menu-number,
	#photo-menu .wedding-menu-number {
		font-size: 13px;
	}
	.wedding-menu-subtitle {
		font-size: 13px;
	}
	.wedding-menu-price-main {
		font-size: 17px;
	}
}
@media (max-width: 600px) {
	/* 見出し上の横棒を、YOUR WHY側のスマホ幅(600px以下)の実際の見た目
	   （width:40px は共通のまま、height:1px→2px）に合わせる。 */
	.wedding-menu-sidebar-dash {
		height: 2px;
	}
	.wedding-menu-sidebar-title {
		font-size: 23px;
	}
	#wedding-menu .wedding-menu-sidebar-title,
	#photo-menu .wedding-menu-sidebar-title {
		font-size: 17px;
		/* 横棒〜タイトルの間隔を、Your Whyセクション（横棒〜YOUR WHY間21px）と
		   揃える（21px − 親のgap12px）。 */
		margin-top: 9px;
	}
	#wedding-menu .wedding-menu-sidebar-subtitle,
	#wedding-menu .wedding-menu-sidebar-desc,
	#photo-menu .wedding-menu-sidebar-subtitle,
	#photo-menu .wedding-menu-sidebar-desc {
		font-size: 10px;
	}
	.wedding-menu-item {
		padding: 20px 0;
		gap: 16px;
	}
	/* WEDDING・PHOTO両プランとも、全カード共通で写真とテキスト(BOX)の間の余白を0にする。 */
	#wedding-menu .wedding-menu-item,
	#photo-menu .wedding-menu-item {
		row-gap: 0;
	}
	.wedding-menu-photo,
	.wedding-menu-text {
		left: 20px;
	}
	.wedding-menu-text h3 {
		font-size: 22px;
		margin-bottom: 10px;
	}
/* HOTELなど番号+サブタイトル行とタイトルの間隔を、PC/タブレットの12pxから
	   スマホ版のみ10px縮めて2pxにする。 */
	#wedding-menu .wedding-menu-number,
	#photo-menu .wedding-menu-number {
		margin-bottom: 2px;
		font-size: 12px;
	}
	.wedding-menu-subtitle {
		font-size: 12px;
	}
	.wedding-menu-price {
		margin-bottom: 12px;
	}
	.wedding-menu-price-main {
		font-size: 15px;
	}
	.wedding-menu-price-sub {
		font-size: 11px;
	}
	.wedding-menu-more {
		font-size: 9px;
		width: 110px;
		height: 30px;
		padding: 5.5px 20.5px;
	}
}

/* ---------- Front page WEDDING / PHOTO plan sections, mobile only (<768px):
   swipe/scroll carousel instead of a vertical stack. Card content is
   unchanged — only how the cards are arranged. Scoped to these two
   section IDs (both use the shared .wedding-menu-* classes). ---------- */
@media (max-width: 767px) {
	#wedding-menu .wedding-menu-list,
	#photo-menu .wedding-menu-list {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 24px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* スナップ位置を左パディング（24px）の分だけ内側にずらす。
		   これが無いとカード左端が画面端まで寄ってしまい、
		   余った右側に次のカードの先頭が「チラ見え」する。 */
		scroll-padding-left: 24px;
		-webkit-overflow-scrolling: touch;
		margin: 0 -24px;
		padding: 4px 24px 8px;
		scrollbar-width: none;
	}
	#wedding-menu .wedding-menu-list::-webkit-scrollbar,
	#photo-menu .wedding-menu-list::-webkit-scrollbar {
		display: none;
	}
	#wedding-menu .wedding-menu-item,
	#photo-menu .wedding-menu-item {
		flex: none;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		scroll-snap-align: start;
		padding: 20px;
		/* カルーセルの各カードはflexアイテムなので、全カードが「いちばん背の高い
		   カード（説明文が最も長いもの）」の高さに引き伸ばされる。カード内部は
		   grid なので、この余った高さが写真の行とテキストの行に自動的に配分され、
		   さらに align-items: center で写真が行の中央に寄るため、写真の下に
		   すき間が生まれる。説明文の長さによってすき間の量が変わるのが原因で、
		   最も背の高いカード（RECEPTION）だけすき間0になっていた。
		   align-content: start で行を内容ぴったりの高さにし、余りはカード下端に
		   まとめることで、全カードで写真とテキストが密着する。
		   ※ row-gap / gap の指定では直らない（すき間の正体は gap ではないため）。 */
		align-content: start;
	}
	/* PHOTOセクションも写真の外枠・余白を削除する（WEDDING側と同様）。 */
	#photo-menu .wedding-menu-photo {
		padding: 0;
		border: none;
	}
	/* WEDDING・PHOTO両側とも、カードは枠線が無いので左右のパディングを外し、
	   写真と本文をセクションの左右余白（24px）にそろえる。 */
	#wedding-menu .wedding-menu-item,
	#photo-menu .wedding-menu-item {
		padding: 10px 0 20px;
	}
	/* WEDDING・PHOTO両側とも、カードの高さを他のカードに合わせて無理に揃えない。
	   1枚ずつスワイプして見る作りなので、カードごとに実際の中身の高さの
	   ままでよく、揃える必要がない。これにより「揃えるための余ったスペース」
	   自体が発生しなくなり、白いBOXの余白（padding）を変えれば、
	   その数値どおりに見た目へ反映されるようになる。 */
	#wedding-menu .wedding-menu-list,
	#photo-menu .wedding-menu-list {
		align-items: flex-start;
	}
	/* 4プラン共通、白いBOXの上の余白は15px（BOX内の中身を上にずらすため）。
	   下の余白はDETAILボタンの上余白（margin-top: 20px）と同じ20pxにそろえる。 */
	#wedding-menu .wedding-menu-detail-box,
	#photo-menu .wedding-menu-detail-box {
		padding-top: 20px;
		padding-bottom: 30px;
	}
	/* WEDDING・PHOTO両プランとも、スマホ版は白いBOX内（番号・タイトル・
	   金額・説明文・DETAILボタン）を中央配置にする。DETAILボタン
	   （.wedding-menu-more）は.wedding-menu-text-groupの外側の兄弟要素
	   なので、親のBOX側にtext-alignを指定して両方をまとめて中央寄せにする。 */
	#wedding-menu .wedding-menu-detail-box,
	#photo-menu .wedding-menu-detail-box {
		text-align: center;
	}
	#wedding-menu .wedding-menu-number,
	#photo-menu .wedding-menu-number {
		justify-content: center;
	}
	/* 4プラン共通、金額と説明文だけを5px上に詰める（margin-topのマイナス値で
	   実際にスペースを詰める。transformだと見た目だけずれてスペースが
	   空いたまま残り、BOXの高さが縮まらないため使わない）。
	   番号・タイトルの位置は変えない。 */
	#wedding-menu .wedding-menu-price,
	#photo-menu .wedding-menu-price,
	#wedding-menu .wedding-menu-text-group p:not(.wedding-menu-price),
	#photo-menu .wedding-menu-text-group p:not(.wedding-menu-price) {
		margin-top: -5px;
	}
	/* 4プラン共通、DETAILボタンだけをさらに20px上に詰める（基本のmargin-top:
	   20pxから20px引いて0pxに）。box内の他の要素の位置は変えない。 */
	#wedding-menu .wedding-menu-more,
	#photo-menu .wedding-menu-more {
		margin-top: 0px;
	}
	/* PC用の装飾ずらし（.wedding-menu-photo / -text の left: 20px）は
	   カードが1枚ずつ画面幅に収まるカルーセルでは中身が右にずれて
	   見えるだけなので、モバイルでは解除する。 */
	#wedding-menu .wedding-menu-photo,
	#wedding-menu .wedding-menu-text,
	#photo-menu .wedding-menu-photo,
	#photo-menu .wedding-menu-text {
		left: 0;
	}
	#wedding-menu .wedding-menu-photo {
		position: static;
		padding: 0;
		border: none;
	}
	/* WEDDING・PHOTO両プランとも、スマホ版は写真と白BOXをひとつづきの塊とみなし、
	   その実際の端（.wedding-menu-item自体の外側の余白10px/20pxは含まない）から
	   内側5pxの位置にまとめて枠線を入れる。疑似要素で四辺の位置を数値指定して
	   いるため、これまで調整してきた余白の数値には影響しない。 */
	#wedding-menu .wedding-menu-item,
	#photo-menu .wedding-menu-item {
		position: relative;
	}
	#wedding-menu .wedding-menu-item::after,
	#photo-menu .wedding-menu-item::after {
		content: "";
		position: absolute;
		top: 15px;
		right: 5px;
		bottom: 25px;
		left: 5px;
		border: 1px solid var(--color-border);
		pointer-events: none;
	}
	#wedding-menu .wedding-menu-dots,
	#photo-menu .wedding-menu-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 17px;
		margin-top: 20px;
	}
	#wedding-menu .wedding-menu-dot,
	#photo-menu .wedding-menu-dot {
		position: relative;
		border: 0;
		background: none;
		padding: 10px 0 5px;
		font-family: var(--font-label);
		font-size: 15px;
		letter-spacing: 0.05em;
		line-height: 1;
		color: var(--color-text-light);
		cursor: pointer;
		transition: color 0.2s ease;
	}
	#wedding-menu .wedding-menu-dot::after,
	#photo-menu .wedding-menu-dot::after {
		content: "";
		position: absolute;
		left: 50%;
		/* padding-top(10px)とpadding-bottom(5px)が非対称なため、
		   ボタン全体の中央(50%)ではなく、その差の半分(2.5px)だけ
		   下にずらして数字テキストの縦中央に合わせる。 */
		top: calc(50% + 2.5px);
		width: 0;
		height: 1px;
		background: var(--color-accent-dark);
		transform: translate(-50%, -50%);
		transition: width 0.3s ease;
	}
	#wedding-menu .wedding-menu-dot.is-active,
	#photo-menu .wedding-menu-dot.is-active {
		color: var(--color-accent-dark);
	}
	#wedding-menu .wedding-menu-dot.is-active::after,
	#photo-menu .wedding-menu-dot.is-active::after {
		width: calc(100% + 6px);
	}
	#wedding-menu .wedding-menu-divider-top-label-full,
	#wedding-menu .wedding-menu-sidebar-title-full,
	#photo-menu .wedding-menu-sidebar-title-full {
		display: none;
	}
	#wedding-menu .wedding-menu-divider-top-label-mobile,
	#wedding-menu .wedding-menu-sidebar-title-mobile,
	#photo-menu .wedding-menu-sidebar-title-mobile {
		display: inline;
	}
	#wedding-menu .wedding-menu-sidebar-inner {
		text-align: center;
	}
	#wedding-menu .wedding-menu-sidebar-dash {
		align-self: center;
	}
	#wedding-menu .wedding-menu-sidebar-subtitle,
	#photo-menu .wedding-menu-sidebar-subtitle {
		/* タイトル→説明文の間隔を、Your Whyセクション（見出し→説明文間30px）と
		   揃える（実測ベースで調整）。さらにここから10px縮めて20pxにする。 */
		margin-top: 8px;
		/* 「プランです。」で終わる説明文（subtitle）と、その下のdescとの間は
		   親.wedding-menu-sidebar-innerのgap: 12pxがそのまま余白になるため、
		   ここで打ち消して0pxにする。 */
		margin-bottom: -12px;
	}
	#wedding-menu .wedding-menu-sidebar-more {
		display: none;
	}
	/* 区切り線（結婚式プラン一覧ラベル）をサイドバー説明文の下、
	   プランカード一覧の直上に移動する */
	#wedding-menu .container {
		display: flex;
		flex-direction: column;
	}
	#wedding-menu .wedding-menu-layout {
		display: contents;
	}
	#wedding-menu .wedding-menu-sidebar {
		order: 1;
	}
	#wedding-menu .wedding-menu-divider-top-row {
		order: 2;
		margin-top: 40px;
		/* 区切り線と数字の間隔。数字ボタン側に padding-top: 10px があるため、
		   実際の見た目の余白はこの値 + 10px になる。 */
		margin-bottom: 0px;
		/* 数字タップ時はこの区切り線を画面上部の基準にして縦スクロールする
		   （main.js）。固定ヘッダーに隠れないよう、カードと同じ余白を確保する。 */
		scroll-margin-top: calc( var( --site-header-height, 0px ) + 24px );
	}
	/* ドットは「何枚あるか／今どれか」の案内なので、カード一覧の下ではなく
	   区切り線（結婚式プラン一覧）のすぐ下、カードの直前に置く。 */
	#wedding-menu .wedding-menu-dots {
		order: 3;
		/* 共通指定の margin-top: 20px は区切り線側の margin-bottom と
		   二重になるため打ち消す。区切り線〜数字の間隔は
		   .wedding-menu-divider-top-row の margin-bottom 側で調整する。 */
		margin: 0 0 0px;
	}
	#wedding-menu .wedding-menu-list {
		order: 4;
	}
	/* PHOTOセクションもスマホ幅では帯のラベルを「撮影プラン一覧」に切り替える。 */
	#photo-menu .wedding-menu-divider-top-label-full {
		display: none;
	}
	#photo-menu .wedding-menu-divider-top-label-mobile {
		display: inline;
	}
	/* PHOTOセクションも見出し・説明文・横棒を中央配置にする（WEDDING側と同様）。 */
	#photo-menu .wedding-menu-sidebar-inner {
		text-align: center;
	}
	#photo-menu .wedding-menu-sidebar-dash {
		align-self: center;
	}
	/* PHOTOセクションのSEE ALLリンクをスマホ幅で非表示にする（WEDDING側と同様）。 */
	#photo-menu .wedding-menu-sidebar-more {
		display: none;
	}
	/* PHOTOセクションも同様に、区切り線（PHOTO PLANSの帯）・見出し・説明文
	   （サイドバー一式）を帯より上に移動する。カード一覧・ドット・下のhr線は
	   もとの並び順のまま。 */
	#photo-menu .container {
		display: flex;
		flex-direction: column;
	}
	#photo-menu .wedding-menu-layout {
		display: contents;
	}
	#photo-menu .wedding-menu-sidebar {
		order: 1;
	}
	#photo-menu .wedding-menu-divider-top-row {
		order: 2;
		/* ラベルの上の余白をWEDDING PLANS側と同じ40pxにする。 */
		margin-top: 40px;
		/* 区切り線と数字の間隔。WEDDING側と同じく、数字ボタン側の
		   padding-top: 10px 分は別途加算される。 */
		margin-bottom: 0px;
		/* 数字タップ時はこの区切り線を画面上部の基準にして縦スクロールする
		   （main.js）。固定ヘッダーに隠れないよう、WEDDING側と同じ余白を確保する。 */
		scroll-margin-top: calc( var( --site-header-height, 0px ) + 24px );
	}
	/* 数字（ドット）はWEDDING側と同じく、帯のすぐ下・カード一覧の直前に置く。
	   帯〜数字の余白（共通ルールのmargin-top:20px）を打ち消して0pxにする。 */
	#photo-menu .wedding-menu-dots {
		order: 3;
		margin: 0 0 0px;
	}
	#photo-menu .wedding-menu-list {
		order: 4;
	}
	#photo-menu .wedding-menu-divider {
		order: 5;
	}
}
@media (min-width: 768px) {
	.wedding-menu-dots {
		display: none;
	}
}

/* ---------- Front page Instagram feed (Smash Balloon Instagram Feed plugin) ---------- */
.instagram-feed-wrap {
	max-width: 800px;
	margin: 0 auto 32px;
}
/* Hide the plugin's "carousel post" (multiple photos) and reel/video play
   button badges for a cleaner grid. */
#sb_instagram .sbi_type_carousel svg.fa-clone,
#sb_instagram .sbi_type_video svg.sbi_playbtn,
#sb_instagram .sbi_type_carousel svg.sbi_playbtn,
#sb_instagram .sbi_type_video svg.svg-inline--fa.fa-play,
#sb_instagram .sbi_type_carousel svg.svg-inline--fa.fa-play {
	display: none !important;
}
@media (max-width: 600px) {
	/* スマホ表示のみ、Smash Balloonの自動レイアウト（640px以下で2列、480px以下で1列）を
	   3列×3行=9枚のグリッド表示に上書きする */
	#sb_instagram #sbi_images {
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 2px !important;
	}
	#sb_instagram #sbi_images .sbi_item:nth-child(n + 10) {
		display: none !important;
	}
	#sb_instagram .sbi_load_btn {
		display: none !important;
	}
}

/* ---------- Front page section previews ---------- */
.preview-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.preview-card {
	text-align: center;
}
.preview-card img {
	border-radius: 4px;
	margin-bottom: 20px;
	aspect-ratio: 4/3;
	object-fit: cover;
}
.preview-card h3 { font-size: 20px; }

/* ---------- Front page contact card (photo + inquiry info, floating icon buttons) ---------- */
.contact-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 80%;
	margin: 0 auto;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.1);
}
.contact-card-label {
	display: none;
}
.contact-card-photo {
	min-width: 0;
	overflow: hidden;
}
.contact-card-photo img {
	width: 100%;
	aspect-ratio: 5000 / 3206;
	object-fit: cover;
	display: block;
}
.contact-card-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 8px;
	padding: 20px 24px;
	background: #fff;
	overflow: hidden;
}
.contact-card-info h2 {
	font-size: 13px;
}
.contact-card-desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-light);
}
.contact-card-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 4px;
}
.contact-card-address {
	margin-top: 8px;
}
.contact-card-address-name {
	font-family: var(--font-heading);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--color-text);
	margin-bottom: 4px;
}
.contact-card-address-text {
	font-size: 11px;
	line-height: 1.6;
	color: var(--color-text-light);
}
.contact-card-hours {
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: 0.03em;
	color: var(--color-text);
}
.contact-card-address-space {
	display: none;
}
@media (min-width: 881px) {
	.contact-card-address-break {
		display: none;
	}
	.contact-card-address-space {
		display: inline;
	}
	.contact-card-hours-note {
		letter-spacing: normal;
	}
}
.contact-card-links .btn {
	width: 140px;
	height: 35px;
	padding: 7.5px 24.5px;
	font-family: var(--font-label);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.15em;
}
.contact-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 0;
	border-color: #B4A590;
	background: #B4A590;
	color: #fff;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.contact-card-btn:hover {
	background: #fff;
	border-color: #B4A590;
	color: #B4A590;
}
.contact-card-btn:active {
	background: #fff;
	border-color: #B4A590;
	color: #B4A590;
	transition: none;
}
.contact-card-btn-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
@media (max-width: 880px) {
	.contact-card {
		grid-template-columns: 1fr;
		max-width: 100%;
	}
	.contact-card-info {
		padding: 48px 32px;
	}
}
@media (max-width: 600px) {
	.contact-card {
		box-shadow: none;
	}
	.contact-card-label {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20px;
		line-height: 1;
		font-size: 10px;
		letter-spacing: 0.1em;
		background: #fff;
		padding: 0 24px;
		margin: 0 -24px 12px;
		width: calc(100% + 48px);
	}
	.contact-card-photo {
		margin: 0 -24px;
		width: calc(100% + 48px);
	}
	.contact-card-info {
		padding: 20px;
		gap: 4px;
		margin: 0 -24px;
		width: calc(100% + 48px);
	}
	.contact-card-info h2 {
		font-size: 13px;
		font-weight: 400;
		margin-top: 0;
	}
	.contact-card-desc {
		font-size: 12px;
		margin-top: -5px;
	}
	.contact-card-address {
		margin-top: 13px;
	}
	.contact-card-address-name {
		font-size: 11px;
		margin: 0;
	}
	.contact-card-address-row {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	.contact-card-address-break {
		display: none;
	}
	.contact-card-address-space {
		display: inline;
	}
	.contact-card-address-text {
		font-size: 10px;
		margin: 0;
	}
	.contact-card-hours {
		font-size: 10px;
		margin: 0;
	}
	.contact-card-hours-note {
		font-size: 10px;
	}
	.contact-card-links {
		gap: 20px;
	}
	.contact-card-links .btn {
		width: 120px;
		height: 35px;
		font-size: 9px;
		font-weight: 700;
		padding: 5.5px 20.5px;
	}
}

/* ---------- Q&Aページ「準備中」表示 ----------
   クラス名は gallery- で始まるが、ギャラリーページ用ではなく、
   Q&Aページ（template-qa.php）でFAQが0件のときの空状態表示に使用中。
   紛らわしい名前だが、消さないよう注意。 ---------- */
.gallery-panel-placeholder {
	padding: 96px 24px;
	text-align: center;
	color: var(--color-text-light);
	background: var(--color-soft);
	border-radius: 4px;
}

/* ---------- Q&A hero photo (same size as the Contact page hero) ---------- */
.qa-hero-photo {
	position: relative;
	height: 360px;
	min-height: 240px;
	margin: 20px;
	background: center / cover no-repeat var(--color-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}
.qa-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
}
.qa-hero-label {
	position: relative;
	z-index: 1;
	color: #fff;
	font-family: var(--font-heading);
	font-size: 38px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	text-align: center;
}
.qa-hero-label .sub {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	letter-spacing: 0.3em;
	text-transform: none;
}
.qa-hero + .section {
	padding-top: 48px;
}
@media (max-width: 600px) {
	.qa-hero-photo { height: 160px; min-height: 0; margin: 0; }
	.qa-hero-label { font-size: 18px; }
	.qa-hero-label .sub { font-size: 10px; letter-spacing: 0.1em; }
	.qa-hero--plan { display: none; }
	body.page-template-template-gallery-php .qa-hero { display: none; }
}

/* ---------- Q&A ---------- */
.faq-content {
	max-width: 900px;
	margin: 0 auto;
}
.faq-search-heading {
	text-align: center;
	font-family: var(--font-heading);
	font-size: 17px;
	letter-spacing: 0.04em;
	margin-bottom: 16px;
}
.faq-search-heading:not(.faq-tabs-heading) {
	position: relative;
	top: -10px;
}
.faq-eyebrow {
	display: block;
	font-family: var(--font-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--color-accent-dark);
	margin-bottom: 8px;
}
.faq-search {
	max-width: 570px;
	margin: 0 auto 32px;
}
.faq-search-input {
	width: 100%;
	padding: 12.5px 18px;
	font-size: 12px;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-soft);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-search-input::placeholder {
	color: var(--color-text-light);
}
.faq-search-input:focus {
	outline: none;
	border-color: var(--color-accent-dark);
	background: #fff;
}
.faq-tabs-heading {
	margin-top: 48px;
}
.faq-tab-nav {
	position: sticky;
	top: var( --site-header-height, 0px );
	z-index: 20;
	background: #fff;
	margin: 0 -1px 40px;
	padding: 10px 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.faq-tab-nav::-webkit-scrollbar {
	display: none;
}
.faq-tab-nav-inner {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 8px;
	width: max-content;
	min-width: 100%;
	padding: 0 4px;
}
.faq-tab-btn {
	flex-shrink: 0;
	padding: 10px 24px;
	background: none;
	border: 1px solid #B4A590;
	color: #B4A590;
	font-family: var(--font-heading);
	font-size: 13px;
	letter-spacing: 0.06em;
	border-radius: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.25s ease;
}
.faq-tab-btn:hover,
.faq-tab-btn.is-active {
	background: #B4A590;
	color: #fff;
}
.faq-no-results {
	display: none;
	padding: 48px 24px;
	text-align: center;
	color: var(--color-text-light);
	background: var(--color-soft);
	border-radius: 4px;
	margin: 0 0 32px;
}
.faq-no-results.is-visible {
	display: block;
}
.faq-groups {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.faq-group {
	border: 1px solid var(--color-border);
	border-radius: 0;
	background: #fff;
	scroll-margin-top: calc( var( --site-header-height, 0px ) + 90px );
}
.faq-group.is-hidden {
	display: none;
}
.faq-group-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 16px 24px;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--font-body);
	color: var(--color-text);
}
.faq-group-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 15px;
}
.faq-group-number {
	font-family: var(--font-heading);
	font-size: 12px;
	letter-spacing: 0.05em;
	color: var(--color-accent-dark);
	margin-left: 20px;
}
.faq-group-name {
	margin-left: 20px;
}
.faq-group-count {
	font-size: 11px;
	font-weight: 400;
	color: var(--color-text-light);
}
.faq-group.is-open > .faq-group-header .faq-toggle-icon {
	transform: rotate(180deg);
}
.faq-group-body {
	display: grid;
	grid-template-rows: 0fr;
	min-height: 0;
	transition: grid-template-rows 0.35s ease;
}
.faq-group.is-open .faq-group-body {
	grid-template-rows: 1fr;
}
.faq-group-body-inner {
	overflow: hidden;
	min-height: 0;
	border-top: 1px solid var(--color-border);
}
.faq-group-placeholder {
	padding: 0 24px 24px;
	color: var(--color-text-light);
}
.faq-list {
	display: flex;
	flex-direction: column;
	padding: 0 24px;
}
.faq-item {
	border-bottom: 1px solid var(--color-border);
}
.faq-item:last-child {
	border-bottom: none;
}
.faq-item.is-hidden {
	display: none;
}
.faq-question {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 16px 24px 14px;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-text);
}
.faq-question-mark {
	flex-shrink: 0;
	width: 20px;
	font-family: var(--font-heading);
	font-size: 12px;
	color: var(--color-accent-dark);
}
.faq-question-text {
	flex: 1;
	line-height: 1.6;
}
.faq-toggle-icon {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: var(--color-accent-dark);
	transition: transform 0.25s ease;
}
.faq-item.is-open .faq-toggle-icon {
	transform: rotate(180deg);
}
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.faq-item.is-open .faq-answer {
	max-height: 1000px;
}
.faq-answer-inner {
	display: flex;
	gap: 16px;
	padding: 0 24px 24px 52px;
}
.faq-answer-text {
	flex: 1;
	font-size: 13px;
	color: var(--color-text-light);
}
.faq-answer-text p:first-child {
	margin-top: 0;
}
.faq-answer-text p:last-child {
	margin-bottom: 0;
}
@media (max-width: 880px) {
	.faq-group-title { font-size: 14px; }
}
@media (max-width: 600px) {
	.faq-content { margin-top: -20px; }
	.faq-search-heading { font-size: 15px; }
	.faq-search-input { padding: 12.5px 16px; font-size: 12px; }
	.faq-tabs-heading { margin-top: 36px; }
	.faq-tab-nav { margin-bottom: 28px; }
	.faq-tab-btn { padding: 6.5px 18px; font-size: 12px; }
	.faq-group-header { padding: 14px 18px; gap: 12px; }
	.faq-group-title { gap: 8px 10px; }
	.faq-group-name { margin-left: 10px; }
	.faq-group-count { font-size: 10px; }
	.faq-list { padding: 0 18px; }
	.faq-group-placeholder { padding: 0 18px 18px; }
	.faq-question { padding: 14px 18px 14px 8px; gap: 6px; font-size: 13px; }
	.faq-question-mark { font-size: 10px; }
	.faq-answer-inner { padding: 0 18px 18px 44px; gap: 12px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
	.preview-grid { grid-template-columns: 1fr; }
	.section { padding: 64px 0; }
	.about-teaser { padding-top: 48px; padding-bottom: 44px; }
	.hero-intro { padding: 64px 0; }
	.hero-tagline { font-size: 26px; }
}
@media (max-width: 600px) {
	.about-teaser { padding-top: 40px; padding-bottom: 40px; }
	/* タブレット共通64px/64pxから、WEDDING PLANSセクションのみ上を40pxに調整（スマホ版のみ）。
	   下（ドットナビ側）は別途、PHOTO PLANS横棒までの実測距離を詰めるため6pxにする。
	   さらにそこから30px広げる指示があったため、上下パディングに15pxずつ加算（6px→21px）。 */
	.wedding-menu { padding-top: 40px; padding-bottom: 21px; }
	/* WEDDINGカード下端（ドットナビ）〜PHOTO PLANS横棒までの実測距離を40pxにする。
	   内訳: ドットナビ分28px（既存のまま）＋ここでの上下パディング合計12px（6px+6px）。
	   さらにそこから30px広げる指示があったため、上下パディングに15pxずつ加算（6px→21px）。 */
	.photo-menu { padding-top: 21px; padding-bottom: 40px; }
}
@media (max-width: 880px) {
	.site-header .container {
		display: flex;
		align-items: center;
		padding: 0 20px;
		height: 55px;
		column-gap: 20px;
		position: relative;
	}
	.site-branding {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: 0;
		transform: translate(-50%, -50%);
	}
	.site-branding img {
		height: 35px;
	}
	.site-branding a {
		left: 0;
	}
	.site-title-group {
		display: none;
	}
	body { overflow-x: hidden; }
	.main-navigation {
		position: fixed;
		top: var( --site-header-height, 64px );
		right: 0;
		left: 0;
		width: 100%;
		height: calc(100vh - var(--site-header-height, 64px));
		height: calc(100svh - var(--site-header-height, 64px));
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		background: #fff;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 1s ease, visibility 0s linear 1s;
	}
	.main-navigation.is-open {
		transform: translateX(0);
		visibility: visible;
		transition: transform 1s ease;
	}
	.main-navigation ul { flex-direction: column; gap: 0; }
	.main-navigation li { border-bottom: 1px solid var(--color-border); }
	.main-navigation a { display: block; padding: 16px 24px; }
	.desktop-nav-menu { display: none; }
	/* PC版メガメニュー用の暗幕。PCナビが消える幅では出番がない。 */
	.mega-overlay { display: none; }
	.mobile-nav-menu {
		display: block;
		flex-shrink: 0;
	}
	.mobile-nav-group { position: relative; }
	.mobile-nav-group::after {
		content: '';
		position: absolute;
		left: 30px;
		right: 30px;
		bottom: 0;
		height: 1px;
		background: var(--color-border);
	}
	.mobile-nav-group + .mobile-nav-group { margin-top: 20px; }
	.mobile-nav-group-title,
	.mobile-nav-subgroup-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		background: none;
		border: none;
		text-align: left;
		font-family: var(--font-label);
		color: var(--color-text);
	}
	.mobile-nav-subgroup-toggle { cursor: pointer; }
	.mobile-nav-group-title {
		padding: 8px 24px 4px 51.8px;
		font-size: 15px;
		letter-spacing: 0.05em;
	}
	.mobile-nav-group:first-child > .mobile-nav-group-title {
		padding-top: 15px;
	}
	.mobile-nav-group-title span::before {
		content: '';
		display: inline-block;
		position: relative;
		left: -3px;
		width: 3px;
		height: 1em;
		margin-right: 8px;
		vertical-align: -0.1em;
		background: #848381;
	}
	.mobile-nav-chevron {
		width: 12px;
		height: 12px;
		flex-shrink: 0;
		transition: transform 0.25s ease;
	}
	.mobile-nav-subgroup.is-open > .mobile-nav-subgroup-toggle .mobile-nav-chevron {
		transform: rotate(180deg);
	}
	.mobile-nav-group-body {
		display: grid;
		grid-template-rows: 1fr;
		min-height: 0;
	}
	.mobile-nav-subgroup-body {
		display: grid;
		grid-template-rows: 0fr;
		min-height: 0;
		transition: grid-template-rows 0.3s ease;
	}
	.mobile-nav-subgroup.is-open > .mobile-nav-subgroup-body {
		grid-template-rows: 1fr;
	}
	.mobile-nav-group-body-inner,
	.mobile-nav-subgroup-body-inner {
		overflow: hidden;
		min-height: 0;
	}
	.mobile-nav-menu .mobile-nav-list { display: block; }
	.mobile-nav-menu .mobile-nav-list li { position: relative; border-bottom: none; }
	.mobile-nav-menu .mobile-nav-list li::before {
		content: '';
		position: absolute;
		left: 30px;
		right: 30px;
		top: 0;
		height: 1px;
		background: var(--color-border);
		z-index: 1;
	}
	.mobile-nav-menu,
	.mobile-nav-menu * {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	.mobile-nav-menu .mobile-nav-list a {
		display: block;
		text-align: left;
		padding: 7px 24px;
		font-size: 12px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		outline: none;
	}
	.mobile-nav-menu .mobile-nav-list a:focus,
	.mobile-nav-menu .mobile-nav-list a:active {
		outline: none;
		text-decoration: none;
	}
	.mobile-nav-subgroup-toggle {
		padding: 7px 49px 7px 61px;
		font-size: 12px;
		position: relative;
	}
	.mobile-nav-subgroup-toggle::before {
		content: '';
		position: absolute;
		left: 30px;
		right: 30px;
		top: 0;
		height: 1px;
		background: var(--color-border);
	}
	.mobile-nav-subgroup .mobile-nav-list a {
		display: inline-flex;
		align-items: center;
		width: 250px;
		padding: 4px 12px;
		margin: 6px 0 6px 56px;
		background: #F0EEEA;
		position: relative;
		z-index: 0;
	}
	.mobile-nav-list-sublabel {
		font-size: 8px;
		margin-left: 6px;
	}
	.mobile-nav-list-sublabel-word {
		font-size: 9px;
	}
	.mobile-nav-group-body-inner > .mobile-nav-list a { padding: 7px 24px 7px 61px; }

	/* タップ時のフィードバック。線はテキスト幅＋左右10pxに収める。
	   PC版(.desktop-nav-menu)と違い、リンクが全幅ブロックなので
	   ラベルを包む .mobile-nav-label を基準にする。
	   サブ項目のグレーの箱も同じくテキスト基準（箱基準にはしない）。 */
	.mobile-nav-menu .mobile-nav-list .mobile-nav-label {
		position: relative;
		display: inline-block;
		z-index: 0;
	}
	.mobile-nav-menu .mobile-nav-list .mobile-nav-label::after {
		content: "";
		position: absolute;
		left: -10px;
		right: -10px;
		top: 50%;
		height: 1px;
		background: currentColor;
		z-index: -1;
		transform: translateY(-50%) scaleX(0);
		transition: transform 0.25s ease;
	}
	.mobile-nav-menu .mobile-nav-list a:hover,
	.mobile-nav-menu .mobile-nav-list a:active {
		color: var(--color-accent-dark);
	}
	.mobile-nav-menu .mobile-nav-list a:hover .mobile-nav-label::after,
	.mobile-nav-menu .mobile-nav-list a:active .mobile-nav-label::after {
		transform: translateY(-50%) scaleX(1);
	}
	.header-actions {
		order: 2;
		margin-left: auto;
		gap: 14px;
	}
	.header-line-link span,
	.header-contact-link span { display: none; }
	.menu-toggle { order: 4; margin-left: 0px; margin-right: 5px; display: flex; }
	.mobile-nav-photo {
		display: block;
		flex: 1 1 auto;
		min-height: 220px;
		padding: 30px;
		box-sizing: border-box;
	}
	.mobile-nav-photo img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* ---------- Mobile-only (<768px) header/contact rework: map icon replaces the
   header LINE/CONTACT icons, which move to a fixed bottom tab bar instead. ---------- */
.header-map-link {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	color: var(--color-text);
}
.header-map-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.header-map-label {
	font-family: var(--font-label);
	font-size: 9px;
	letter-spacing: 0.1em;
	color: var(--color-text);
	flex-shrink: 0;
	position: relative;
	left: 1px;
}
.header-map-divider {
	display: none;
	width: 1px;
	height: 25px;
	background: var(--color-text);
}
.mobile-tab-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	background: #fff;
	border-top: 1px solid var(--color-border);
	transform: translateY(100%);
	transition: transform 1s ease;
}
.mobile-tab-bar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 10px 0 8px;
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.05em;
	color: var(--color-text);
}
.mobile-tab-bar-item svg {
	width: 22px;
	height: 22px;
}
.mobile-tab-bar-item:first-child {
	border-right: 1px solid var(--color-border);
}
@media (max-width: 767px) {
	.header-actions {
		display: none;
	}
	.header-map-link {
		display: flex;
		order: 2;
		margin-left: auto;
		position: relative;
		left: 5px;
	}
	.header-map-divider {
		display: block;
		order: 3;
		margin-left: 0px;
		position: relative;
		left: 5px;
	}
	.mobile-tab-bar {
		display: flex;
	}
	body.tab-bar-visible .mobile-tab-bar {
		transform: translateY(0);
	}
	body.nav-is-open .mobile-tab-bar {
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 1s ease, visibility 0s linear 1s;
	}
	body {
		padding-bottom: 60px;
	}
}

/* ---------- ブログ一覧（BLOG）----------
   参考: picniko.com/blog
   PC: 1行1記事。左に白い本文カード、右に3:2の写真を置き、
       カードを写真の左端に6%だけ重ねる（picnikoは position:absolute だが、
       ここでは本文が写真より背が高くなっても切れないよう flex + 負のmarginで実装）。
   スマホ(600px以下): 左に文章・右に34%のサムネイル。抜粋とREAD MOREは非表示。 */
.blog-section {
	padding-top: 40px;
	background: #F8F7F5;
}
.blog-archive {
	max-width: 1040px;
	margin: 0 auto;
}
.blog-archive-header {
	text-align: center;
}
.blog-archive-line {
	display: block;
	width: 60px;
	height: 3px;
	background: var(--color-text);
	margin: 10px auto 44px;
}
.blog-archive-heading {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: -10px 0 0;
}

/* カテゴリータブ（下線つきの文字リンク） */
.blog-cat-nav {
	text-align: center;
	margin: 20px 0 40px;
}
.blog-cat-item {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 12px;
	line-height: 3;
	color: #999;
	padding: 0 3px;
	margin: 0 5px;
	border-bottom: 1px solid var(--color-border);
	transition: color 0.2s linear, border-color 0.2s linear;
}
.blog-cat-item:hover,
.blog-cat-item.is-current {
	color: var(--color-text);
	border-bottom-color: var(--color-accent-dark);
}

/* 件数表示＋ページ送りの帯（一覧の上下） */
.blog-pagination-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: var(--color-text);
}
.blog-pagination-bar--top {
	margin-top: 50px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--color-border);
}
.blog-pagination-bar--bottom {
	padding-top: 10px;
	border-top: 1px solid var(--color-border);
}
.blog-pagination-count {
	font-family: var(--font-label);
	letter-spacing: 0.04em;
}
.blog-pagination-links {
	text-align: right;
}
.blog-pagination-links .page-numbers {
	display: inline-block;
	position: relative;
	padding: 0 10px;
	text-align: center;
	font-family: var(--font-label);
	color: var(--color-text);
	opacity: 0.6;
	transition: opacity 0.2s linear, color 0.2s linear;
}
.blog-pagination-links .page-numbers::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 6px;
	width: 1px;
	background-color: var(--color-border);
}
.blog-pagination-links .page-numbers:last-child::after {
	content: none;
}
.blog-pagination-links .page-numbers.current {
	opacity: 1;
}
.blog-pagination-links a.page-numbers:hover {
	opacity: 1;
	color: var(--color-accent-dark);
}

/* 記事1件 */
.blog-list-item {
	padding: 40px 0;
	border-bottom: 1px solid var(--color-border);
}
.blog-list-item:last-child {
	border-bottom: none;
}
.blog-list-item-inner {
	display: flex;
	align-items: flex-start;
}
.blog-list-text {
	flex: 0 0 53%;
	max-width: 53%;
	min-width: 0;
	/* 写真の左端に重ねるための負のマージン（53% + 53% - 6% = 100%） */
	margin-right: -6%;
	position: relative;
	z-index: 1;
	background: var(--color-bg);
	padding: 20px 50px 20px 20px;
}
.blog-list-image {
	display: block;
	flex: 0 0 53%;
	max-width: 53%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--color-soft);
}
.blog-list-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.6s cubic-bezier(0, 0, 0, 1);
}
.blog-list-image-overlay {
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0;
	transition: opacity 0.2s linear;
}
.blog-list-item:hover .blog-list-image img {
	transform: scale(1.03);
}
.blog-list-item:hover .blog-list-image-overlay {
	opacity: 0.18;
}
.blog-list-title {
	font-family: var(--font-heading);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.9;
	margin: 15px 0 0;
}
.blog-list-title a {
	color: var(--color-text);
	transition: color 0.2s linear;
}
.blog-list-title a:hover {
	color: var(--color-accent-dark);
}
.blog-list-meta {
	margin-top: 10px;
	line-height: 18px;
}
.blog-list-cat {
	display: inline-block;
	vertical-align: top;
	background: var(--color-soft);
	color: var(--color-accent-dark);
	font-size: 10px;
	line-height: 18px;
	letter-spacing: 0.02em;
	padding: 0 8px;
	transition: background 0.2s linear, color 0.2s linear;
}
.blog-list-cat:hover {
	background: var(--color-accent-dark);
	color: #fff;
}
.blog-list-date {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
	font-family: var(--font-label);
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0.04em;
	color: var(--color-text);
}
.blog-list-body {
	display: block;
	margin-top: 10px;
	color: var(--color-text);
}
.blog-list-excerpt {
	margin: 0;
	font-size: 13px;
	line-height: 1.9;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}
.blog-list-more {
	display: inline-block;
	position: relative;
	margin-top: 14px;
	padding: 0 20px 11px 1px;
	font-family: var(--font-label);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-text);
	transition: color 0.3s linear;
}
.blog-list-more::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid var(--color-border);
	transition: width 0.2s linear, border-color 0.2s linear;
}
.blog-list-body:hover .blog-list-more {
	color: var(--color-accent-dark);
}
.blog-list-body:hover .blog-list-more::after {
	border-bottom-color: var(--color-accent-dark);
	width: 106%;
}
.blog-list-empty {
	text-align: center;
	padding: 60px 0;
}

/* タブレット: 本文カードの余白と見出しを少し詰める */
@media (max-width: 880px) {
	.blog-list-text {
		padding: 16px 24px 16px 16px;
	}
	.blog-list-title {
		font-size: 15px;
		margin-top: 8px;
	}
}

/* スマホ: 左に文章・右にサムネイルの横並び */
@media (max-width: 600px) {
	.blog-section {
		padding-top: 28px;
	}
	.blog-archive-line {
		width: 40px;
		height: 2px;
		margin-bottom: 30px; /* 基本の44pxから14px縮小（スマホ版のみ） */
	}
	.blog-archive-heading {
		font-size: 13px;
	}
	.blog-pagination-bar--top {
		margin-top: 20px; /* 基本の50pxから30px縮小（スマホ版のみ、見出しより下を20px→30px上に） */
	}
	.blog-cat-nav {
		margin: 16px 0 24px;
	}
	.blog-cat-item {
		font-size: 11px;
		line-height: 2.6;
		margin: 0 3px;
	}
	.blog-pagination-bar {
		font-size: 11px;
	}
	.blog-pagination-links .page-numbers {
		padding: 0 8px;
	}
	.blog-list-item {
		padding: 18px 0;
	}
	.blog-list-item-inner {
		justify-content: space-between;
	}
	.blog-list-text {
		flex: 0 0 63%;
		max-width: 63%;
		margin-right: 0;
		padding: 0;
		background: none;
	}
	.blog-list-image {
		flex: 0 0 34%;
		max-width: 34%;
	}
	.blog-list-title {
		font-size: 13px;
		line-height: 1.8;
		letter-spacing: 0.04em;
		margin: 0;
	}
	.blog-list-meta {
		margin-top: 7px;
	}
	.blog-list-date {
		display: block;
		margin-left: 0;
		margin-top: 2px;
		font-size: 11px;
	}
	.blog-list-body {
		display: none;
	}
}

/* =========================================================
   記事詳細（single.php）・404ページ（404.php）  2026-08-18〜
   ブログ一覧（.blog-list-*）と同じ配色・字送りに合わせている。
   ブレークポイントは既存に合わせて880px / 600px の2段階。
   ========================================================= */

/* ---------- 記事詳細 ---------- */
.hivewed-single-section {
	padding: 72px 0 96px;
}
.hivewed-single {
	max-width: 780px;
	margin: 0 auto;
}
.hivewed-single-header {
	margin-bottom: 40px;
}
.hivewed-single-meta {
	margin-bottom: 16px;
}
.hivewed-single-cat {
	display: inline-block;
	vertical-align: top;
	background: var(--color-soft);
	color: var(--color-accent-dark);
	font-size: 11px;
	line-height: 20px;
	letter-spacing: 0.02em;
	padding: 0 10px;
	transition: background 0.2s linear, color 0.2s linear;
}
.hivewed-single-cat:hover {
	background: var(--color-accent-dark);
	color: #fff;
}
.hivewed-single-date {
	display: inline-block;
	vertical-align: top;
	margin-left: 12px;
	font-family: var(--font-label);
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.04em;
	color: var(--color-text);
}
.hivewed-single-title {
	font-size: 30px;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

/* 本文。エディタで入る要素をひと通り整える。 */
.hivewed-single-content {
	font-size: 16px;
	line-height: 2;
}
.hivewed-single-content > * {
	margin-bottom: 1.8em;
}
.hivewed-single-content > *:last-child {
	margin-bottom: 0;
}
.hivewed-single-content h2 {
	font-size: 24px;
	line-height: 1.6;
	margin-top: 2.4em;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
}
.hivewed-single-content h3 {
	font-size: 20px;
	line-height: 1.6;
	margin-top: 2em;
	padding-left: 14px;
	border-left: 3px solid var(--color-accent);
}
.hivewed-single-content h4 {
	font-size: 17px;
	line-height: 1.7;
	margin-top: 1.8em;
}
.hivewed-single-content h2:first-child,
.hivewed-single-content h3:first-child,
.hivewed-single-content h4:first-child {
	margin-top: 0;
}
.hivewed-single-content a {
	color: var(--color-accent-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hivewed-single-content a:hover {
	color: var(--color-accent);
}
.hivewed-single-content img {
	max-width: 100%;
	height: auto;
}
.hivewed-single-content figure {
	margin-left: 0;
	margin-right: 0;
}
.hivewed-single-content figcaption {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--color-text-light);
	text-align: center;
}
/*
 * サイト全体では ul { list-style: none } でリセットしている（style.css 49行目）ため、
 * 記事本文の中だけ箇条書きの「・」と番号を復活させる。
 */
.hivewed-single-content ul,
.hivewed-single-content ol {
	padding-left: 1.5em;
}
.hivewed-single-content ul {
	list-style: disc;
}
.hivewed-single-content ol {
	list-style: decimal;
}
.hivewed-single-content li {
	list-style: inherit;
}
.hivewed-single-content li {
	margin-bottom: 0.6em;
}
.hivewed-single-content blockquote {
	margin-left: 0;
	margin-right: 0;
	padding: 20px 24px;
	background: var(--color-soft);
	border-left: 3px solid var(--color-accent);
	font-size: 15px;
}
.hivewed-single-content blockquote > *:last-child {
	margin-bottom: 0;
}
/* 表は狭い画面でページごと横スクロールしないよう、表の中だけでスクロールさせる。 */
.hivewed-single-content table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}
.hivewed-single-content th,
.hivewed-single-content td {
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	font-size: 15px;
	white-space: nowrap;
}
.hivewed-single-content th {
	background: var(--color-soft);
	font-weight: 500;
}

.hivewed-single-pages {
	font-family: var(--font-label);
	font-size: 14px;
	letter-spacing: 0.04em;
}
.hivewed-single-tags {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}
.hivewed-single-tags a {
	display: inline-block;
	margin: 0 12px 8px 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--color-accent-dark);
}
.hivewed-single-tags a:hover {
	color: var(--color-accent);
}

/* ---------- 前後の記事 ---------- */
.hivewed-single-nav {
	display: flex;
	gap: 24px;
	max-width: 780px;
	margin: 64px auto 0;
	padding-top: 32px;
	border-top: 1px solid var(--color-border);
}
.hivewed-single-nav-item {
	flex: 1 1 50%;
	min-width: 0;
}
.hivewed-single-nav-next {
	text-align: right;
}
.hivewed-single-nav-label {
	display: block;
	font-family: var(--font-label);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--color-accent-dark);
	margin-bottom: 8px;
}
.hivewed-single-nav-title {
	display: block;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-text);
	transition: color 0.2s linear;
}
.hivewed-single-nav a:hover .hivewed-single-nav-title {
	color: var(--color-accent-dark);
}

.hivewed-single-back {
	margin-top: 56px;
	text-align: center;
}

/* ---------- 404 ---------- */
.error-404 {
	padding: 120px 0;
}
.error-404-inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.error-404-code {
	font-family: var(--font-title);
	font-size: 88px;
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--color-accent);
	margin-bottom: 24px;
}
.error-404-title {
	font-size: 24px;
	line-height: 1.6;
	margin-bottom: 20px;
}
.error-404-text {
	font-size: 15px;
	line-height: 2;
	color: var(--color-text-light);
	margin-bottom: 40px;
}
.error-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.error-404-links .btn {
	padding: 12px 28px;
	font-size: 14px;
}

/* ---------- タブレット ---------- */
@media (max-width: 880px) {
	.hivewed-single-section {
		padding: 56px 0 72px;
	}
	.hivewed-single-title {
		font-size: 26px;
	}
	.hivewed-single-content h2 {
		font-size: 22px;
	}
	.hivewed-single-content h3 {
		font-size: 19px;
	}
	.error-404 {
		padding: 88px 0;
	}
	.error-404-code {
		font-size: 72px;
	}
}

/* ---------- スマホ ---------- */
@media (max-width: 600px) {
	.hivewed-single-section {
		padding: 40px 0 56px;
	}
	.hivewed-single-header {
		margin-bottom: 28px;
	}
	.hivewed-single-title {
		font-size: 21px;
	}
	.hivewed-single-content {
		font-size: 15px;
		line-height: 1.9;
	}
	.hivewed-single-content h2 {
		font-size: 19px;
		margin-top: 2em;
	}
	.hivewed-single-content h3 {
		font-size: 17px;
	}
	.hivewed-single-content h4 {
		font-size: 16px;
	}
	.hivewed-single-content blockquote {
		padding: 16px 18px;
	}
	/* 前後の記事は縦積みにして、次の記事も左揃えに戻す。 */
	.hivewed-single-nav {
		display: block;
		margin-top: 48px;
		padding-top: 24px;
	}
	.hivewed-single-nav-item + .hivewed-single-nav-item {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid var(--color-border);
	}
	.hivewed-single-nav-next {
		text-align: left;
	}
	.hivewed-single-back {
		margin-top: 40px;
	}
	.error-404 {
		padding: 64px 0;
	}
	.error-404-code {
		font-size: 56px;
		margin-bottom: 16px;
	}
	.error-404-title {
		font-size: 20px;
	}
	.error-404-text {
		font-size: 14px;
		margin-bottom: 32px;
	}
	.error-404-links {
		flex-direction: column;
		align-items: stretch;
	}
	.error-404-links .btn {
		width: 100%;
	}
}