/* =========================================
   Akiba Tipping Tour | Ultra-Light CSS (Slide-in Refined)
   Mobile-First / Bootstrap非依存
   Author: Nao Koiwa / 2025
========================================= */

:root {
	--primary: #13357b;
	--accent: #b30673;
	--light: #ffffff;
	--dark: #111111;
	--gray: #f8f9fa;
	--transition: all 0.3s ease;
}

/* ===== ベース設定 ===== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Jost', 'Roboto', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--dark);
	background: var(--light);
	scroll-behavior: smooth;
}
img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}
a {
	text-decoration: none;
	color: inherit;
}

/* ===== 共通ボタン ===== */
.btn {
	display: inline-block;
	background: var(--primary);
	color: #fff;
	padding: 0.6rem 1.2rem;
	border-radius: 30px;
	font-weight: 600;
	font-size: 0.95rem;
	transition: var(--transition);
}
.btn:hover {
	background: var(--accent);
}

/* =========================================
   HEADER / NAVBAR
========================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.3s ease;
}
.site-header.shadow {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* === Topbar === */
.topbar {
	background: var(--primary);
	color: #fff;
	height: 40px;
	display: grid;
	place-items: center;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.2px;
}

/* === Navbar === */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.8rem 1rem;
}
.brand {
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--primary);
	letter-spacing: 0.3px;
}
.brand:hover {
	color: var(--accent);
}

/* =========================================
   NAV LINKS (Desktop)
========================================= */
.nav-links {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}
.nav-link {
	position: relative;
	font-weight: 600;
	color: #222;
	padding: 0.4rem 0.2rem;
}
.nav-link:hover {
	color: var(--primary);
}
.nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -0.2rem;
	width: 100%;
	height: 2px;
	background: var(--primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.nav-link:hover::after {
	transform: scaleX(1);
}

/* CTA */
.nav-cta {
	margin-left: 0.25rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	font-weight: 600;
}
.nav-cta:hover {
	background: var(--accent);
}

/* ==========================
   MOBILE MENU (Neo-Glass Style, Responsive Fix)
========================== */

/* ==== ハンバーガー ==== */
.hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 20px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1101;
}
.hamburger span {
	height: 2px;
	width: 100%;
	background: var(--dark);
	border-radius: 2px;
	transition: all 0.35s ease;
}
.hamburger.open span:nth-child(1) {
	transform: rotate(45deg) translateY(8px);
}
.hamburger.open span:nth-child(2) {
	opacity: 0;
}
.hamburger.open span:nth-child(3) {
	transform: rotate(-45deg) translateY(-8px);
}

/* ==== モバイルスライドメニュー ==== */
.mobile-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 82%;
	max-width: 320px;
	height: 100vh;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
	transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
	display: flex;
	flex-direction: column;
	padding: 2.8rem 1.6rem;
	z-index: 1000;
	transform: translateX(100%);
	border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.mobile-menu.active {
	transform: translateX(0);
	right: 0;
}

/* 暗転背景 */
body.menu-open::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	transition: opacity 0.4s ease;
	opacity: 1;
	z-index: 999;
}
body:not(.menu-open)::before {
	opacity: 0;
	pointer-events: none;
}

/* 閉じるボタン */
.close-btn {
	position: absolute;
	top: 1rem;
	right: 1.2rem;
	font-size: 1.8rem;
	background: none;
	border: none;
	color: var(--primary);
	cursor: pointer;
	transition: color 0.3s ease;
}
.close-btn:hover {
	color: var(--accent);
}

/* メニューリスト */
.menu-list {
	list-style: none;
	margin-top: 2.8rem;
	padding: 0;
}
.menu-list li {
	margin: 1.2rem 0;
	opacity: 0;
	transform: translateX(20px);
	animation: slideIn 0.4s forwards;
}
.menu-list li:nth-child(1) {
	animation-delay: 0.1s;
}
.menu-list li:nth-child(2) {
	animation-delay: 0.15s;
}
.menu-list li:nth-child(3) {
	animation-delay: 0.2s;
}
.menu-list li:nth-child(4) {
	animation-delay: 0.25s;
}
.menu-list li:nth-child(5) {
	animation-delay: 0.3s;
}

@keyframes slideIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.menu-list a,
.dropdown-toggle {
	color: #111;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.3px;
	text-decoration: none;
	transition: color 0.25s ease;
}
.menu-list a:hover,
.dropdown-toggle:hover {
	color: var(--accent);
}

/* ==== モバイルドロップダウン ==== */
.dropdown-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.dropdown-toggle::after {
	content: '▾';
	color: var(--primary);
	font-size: 0.9rem;
	margin-left: 6px;
	transition: transform 0.25s ease;
}
.dropdown.open .dropdown-toggle::after {
	transform: rotate(180deg);
}
.dropdown-menu {
	list-style: none;
	padding-left: 1rem;
	margin-top: 0.4rem;
	display: none;
	border-left: 2px solid var(--primary);
}
.dropdown.open .dropdown-menu {
	display: block;
	animation: fadeIn 0.3s ease;
}
.dropdown-menu a {
	font-size: 0.9rem;
	color: #333;
	display: block;
	padding: 0.3rem 0;
}

/* CTAボタン */
.mobile-menu .nav-cta {
	display: block;
	margin-top: 1.8rem;
	padding: 0.8rem 1.4rem;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	font-weight: 600;
	text-align: center;
	transition: background 0.3s ease, transform 0.2s ease;
}
.mobile-menu .nav-cta:hover {
	background: var(--accent);
	transform: translateY(-2px);
}

/* ==== PC / モバイル切替 ==== */
@media (min-width: 992px) {
	.hamburger,
	.mobile-menu,
	.close-btn {
		display: none !important;
	}
	.nav-links {
		display: flex !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	/* PCドロップダウン: hover表示 */
	.dropdown {
		position: relative;
	}
	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background: #fff;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		display: none;
		flex-direction: column;
		min-width: 200px;
		padding: 0.4rem 0;
		z-index: 1000;
	}
	.dropdown:hover .dropdown-menu {
		display: flex;
		animation: fadeIn 0.2s ease;
	}
	.dropdown-menu a {
		padding: 0.6rem 1rem;
	}
	.dropdown-menu a:hover {
		background: var(--gray);
	}
}

/* モバイルではPCメニュー非表示 */
@media (max-width: 991.98px) {
	.nav-links {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
}

/* ========== HERO ========== */
.carousel-header {
	position: relative;
	overflow: hidden;
}
.hero-image {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	background-color: #f0f0f0;
}
.carousel-caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	background: rgba(0, 0, 0, 0.45);
	padding: 1rem;
}
.carousel-caption h1 {
	font-size: 1.8rem;
	font-weight: 700;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.carousel-caption h4 {
	font-size: 1rem;
	letter-spacing: 0.05em;
}
.carousel-caption p {
	max-width: 480px;
	font-size: 0.95rem;
}

/* ========== セクション（共通） ========== */
section {
	padding: 2rem 1rem;
	max-width: 1200px;
	margin: auto;
	text-align: center;
}
.bg-light {
	background: var(--gray);
}

/* ========== Highlights / Features ========== */
/* =========================================
   Highlights Section
========================================= */
.highlights {
	background: var(--gray);
	padding: 3rem 1rem;
	text-align: center;
}

.highlights-grid {
	display: grid;
	gap: 1.5rem;
	max-width: 1100px;
	margin: 2rem auto 0;
}

.highlight-card {
	background: var(--light);
	border-radius: 15px;
	padding: 2rem 1.5rem;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.highlight-card .icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: var(--primary);
}

.highlight-card h3 {
	color: var(--primary);
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.highlight-card p {
	font-size: 0.95rem;
	color: #444;
	line-height: 1.6;
}

/* Responsive layout */
@media (min-width: 700px) {
	.highlights-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ========== About Section ========== */
/* ===== About (enhanced) ===== */
.about-section {
	padding: 3rem 1rem;
}
.about-wrap {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}
.about-media img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
	background: #f0f0f0;
	aspect-ratio: 4/3;
}
.about-content {
	text-align: left;
}
.about-content p {
	margin-bottom: 0.9rem;
}

.about-points {
	list-style: none;
	padding: 0;
	margin: 0.8rem 0 1.2rem;
}
.about-points li {
	position: relative;
	padding-left: 1.4rem;
	margin: 0.35rem 0;
}
.about-points li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: 0;
	color: var(--primary);
	font-weight: 700;
}

.about-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.2rem;
}
.badge {
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: var(--gray);
	color: #333;
	padding: 0.35rem 0.6rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
}

.about-cta {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.btn.btn-ghost {
	background: transparent;
	color: var(--primary);
	border: 2px solid var(--primary);
}
.btn.btn-ghost:hover {
	background: var(--primary);
	color: #fff;
}

/* Responsive */
@media (min-width: 768px) {
	.about-wrap {
		grid-template-columns: 1fr 1.2fr;
		gap: 2rem;
	}
}
@media (min-width: 992px) {
	.about-section {
		padding: 4rem 1.5rem;
	}
	.about-wrap {
		gap: 2.5rem;
	}
}

/* ========== FAQ（Bootstrap互換） ========== */
.accordion-button {
	font-weight: 600;
	color: var(--primary);
}
.accordion-button:not(.collapsed) {
	background-color: rgba(19, 53, 123, 0.1);
}

/* ========== Reviews ========== */
#reviews p {
	font-style: italic;
}
#reviews h6 {
	font-size: 0.9rem;
}

/* ========== Footer ========== */
footer {
	background: var(--dark);
	color: #fff;
	text-align: center;
	padding: 2rem 1rem;
	font-size: 0.9rem;
}

/* ========== Loader ========== */
#loader {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hide {
	opacity: 0;
	visibility: hidden;
}
.spinner {
	width: 48px;
	height: 48px;
	border: 4px solid #ddd;
	border-top: 4px solid var(--primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20px;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.progress-bar {
	width: 200px;
	height: 6px;
	background: #eee;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 10px;
}
.progress-fill {
	width: 0%;
	height: 100%;
	background: var(--primary);
	transition: width 0.3s ease;
}
#progress-text {
	font-size: 1rem;
	font-weight: 600;
	color: #333;
}

/* ========== レスポンシブ ========== */
@media (min-width: 600px) {
	.carousel-caption h1 {
		font-size: 2.2rem;
	}
	section {
		padding: 3rem 1.5rem;
	}
}
@media (min-width: 992px) {
	.carousel-caption h1 {
		font-size: 2.6rem;
	}
	.carousel-caption p {
		font-size: 1.1rem;
	}
}

/* =========================================
   About Section (Lightweight, no Bootstrap)
========================================= */
.about {
	padding: 3rem 1rem;
	background: var(--light);
}

.about-inner {
	display: grid;
	gap: 2rem;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.about img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	object-fit: cover;
	background: #f0f0f0;
	aspect-ratio: 4 / 3;
}

/* ---- Text Box ---- */
.about-text {
	background: var(--gray);
	border-radius: 10px;
	padding: 1.8rem;
	color: var(--dark);
}

.about-text h5 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--primary);
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.about-text h2 {
	font-size: 1.6rem;
	margin-bottom: 1rem;
	line-height: 1.3;
}

.about-text h2 span {
	color: var(--primary);
}

.about-text p {
	margin-bottom: 1.2rem;
	font-size: 1rem;
	line-height: 1.6;
}

/* ---- Button ---- */
.about-text .btn {
	display: inline-block;
	background: var(--primary);
	color: #fff;
	padding: 0.7rem 1.8rem;
	border-radius: 30px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.3s ease;
}
.about-text .btn:hover {
	background: var(--accent);
}

/* ---- Responsive ---- */
@media (min-width: 768px) {
	.about-inner {
		grid-template-columns: 1fr 1.2fr;
	}
}

@media (min-width: 992px) {
	.about {
		padding: 4rem 2rem;
	}
	.about-inner {
		gap: 3rem;
	}
	.about-text h2 {
		font-size: 1.9rem;
	}
}

/* ===== FAQ (lightweight accordion) ===== */
.faq {
	background: var(--gray);
	padding: 3rem 1rem;
}
.faq-list {
	max-width: 900px;
	margin: 1.5rem auto 0;
}

.faq-item {
	border-radius: 12px;
	background: #fff;
	margin: 0 0 0.8rem 0;
	border: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.faq-q {
	cursor: pointer;
	list-style: none; /* hide default arrow */
	padding: 1rem 1.1rem 1rem 3rem;
	position: relative;
	font-weight: 700;
	color: var(--primary);
}
.faq-q::-webkit-details-marker {
	display: none;
}
.faq-q::before {
	content: '＋';
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-weight: 800;
	color: var(--primary);
}
.faq-item[open] .faq-q::before {
	content: '－';
}

.faq-a {
	padding: 0 1.1rem 1rem 3rem;
	color: #444;
}
.faq-a p {
	margin: 0.6rem 0 0;
	line-height: 1.7;
}

/* subtle hover */
.faq-item:hover {
	border-color: rgba(0, 0, 0, 0.12);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* responsive spacing */
@media (min-width: 992px) {
	.faq {
		padding: 4rem 1.5rem;
	}
}
/* ===== Contact Section ===== */
.contact-section {
	background: var(--primary);
	color: #fff;
	text-align: center;
	padding: 4rem 1.5rem;
	position: relative;
}

.contact-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.12), transparent 60%);
	z-index: 0;
}

.contact-inner {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 0 auto;
}

.contact-section .section-title {
	color: #fff;
	font-size: 2rem;
	margin-bottom: 1rem;
}

.contact-text {
	font-size: 1.05rem;
	margin-bottom: 2rem;
	line-height: 1.7;
}

.contact-card {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(6px);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}
.contact-card p {
	margin: 0.5rem 0;
	font-size: 1rem;
}
.contact-card a {
	color: #fff;
	text-decoration: underline;
}
.contact-card a:hover {
	color: var(--accent);
}

/* CTA Buttons */
.contact-cta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.8rem;
}
.contact-cta .btn {
	background: #fff;
	color: var(--primary);
	font-weight: 600;
}
.contact-cta .btn:hover {
	background: var(--accent);
	color: #fff;
}
.contact-cta .btn.btn-ghost {
	background: transparent;
	color: #fff;
	border: 2px solid #fff;
}
.contact-cta .btn.btn-ghost:hover {
	background: #fff;
	color: var(--primary);
}

/* Responsive */
@media (min-width: 768px) {
	.contact-section {
		padding: 5rem 2rem;
	}
	.contact-section .section-title {
		font-size: 2.2rem;
	}
}

/* =========================================
   CONTACT INFO Responsive Layout
========================================= */
.contact-info {
	display: grid;
	grid-template-columns: 1fr; /* 📱 デフォルト：縦並び */
	gap: 1.5rem;
	text-align: center;
	padding: 1rem 0;
}

.info-box {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(8px);
	padding: 2rem 1.2rem;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	position: relative;
	overflow: hidden;
}
.info-box::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(19, 53, 123, 0.08), rgba(179, 6, 115, 0.05));
	opacity: 0;
	transition: opacity 0.3s ease;
}
.info-box:hover::before {
	opacity: 1;
}
.info-box:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

/* タイトルとアイコン */
.info-box h3 {
	color: var(--primary);
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
	font-weight: 700;
}
.info-box h3::before {
	content: attr(data-icon);
	display: block;
	font-size: 1.8rem;
	margin-bottom: 0.6rem;
	color: var(--primary);
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}
.info-box p {
	color: #333;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* 💻 768px以上：横並び3列 */
@media (min-width: 768px) {
	.contact-info {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
		justify-items: center;
	}
	.info-box {
		text-align: center;
		max-width: 320px;
		margin: 0 auto;
	}
}

/* =========================================
   Policy Section (Akiba Tipping Tour)
   -----------------------------------------
   Used for: private-tour, policies, terms, privacy pages
   Author: Nao Koiwa / 2025
========================================= */

.policy-section {
	max-width: 900px;
	margin: 120px auto 3rem;
	padding: 0 1rem;
	text-align: left;
}

.policy-section .section-title {
	text-align: center;
	color: var(--primary);
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 2rem;
	position: relative;
}

.policy-section .section-title::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background: var(--accent);
	border-radius: 2px;
}

/* === Individual Policy Card === */
.policy-card {
	background: rgba(255, 255, 255, 0.95);
	border-left: 5px solid var(--primary);
	border-radius: 8px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
	padding: 1.5rem 1.5rem 1.2rem;
	margin-bottom: 1.8rem;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.policy-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 18px rgba(0, 0, 0, 0.1);
}

.policy-card h3 {
	color: var(--primary);
	font-size: 1.2rem;
	margin-bottom: 0.8rem;
	position: relative;
	font-weight: 600;
}

.policy-card h3::before {
	content: '◆';
	color: var(--accent);
	margin-right: 6px;
	font-size: 0.9rem;
}

.policy-card p,
.policy-card li {
	font-size: 0.95rem;
	color: #333;
	margin-bottom: 0.6rem;
	line-height: 1.6;
}

/* List */
.policy-card ul {
	margin: 0.5rem 0 0.5rem 1.2rem;
	padding: 0;
}
.policy-card li {
	list-style: disc;
}

/* Links inside cards */
.policy-card a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: all 0.25s ease;
}
.policy-card a:hover {
	border-bottom: 1px solid var(--accent);
}

/* 📱 Responsive */
@media (max-width: 600px) {
	.policy-section .section-title {
		font-size: 1.5rem;
	}
	.policy-card {
		padding: 1.2rem 1rem;
	}
}

/* === Topbar with Inline SVG Social Icons === */
.topbar {
	background: var(--primary);
	color: #fff;
	font-size: 0.9rem;
	padding: 0.4rem 1rem;
}

.topbar-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}

.topbar-text {
	letter-spacing: 0.5px;
}

.topbar-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.8rem;
	color: #fff;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.topbar-social a:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}

.topbar-social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* 📱 Mobile layout */
@media (max-width: 600px) {
	.topbar-content {
		flex-direction: column;
		gap: 0.4rem;
		text-align: center;
	}
}
/* —— Topbar をスマホで崩さない —— */
.topbar {
	background: var(--primary);
	color: #fff;
	font-size: 0.9rem;
	padding: 0.4rem 1rem;
	position: relative;
	z-index: 1001; /* ほかの要素に埋もれない */
}

.topbar-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	white-space: nowrap; /* 折り返し防止 */
	overflow: hidden; /* はみ出し対策 */
}

.topbar-text {
	letter-spacing: 0.5px;
	overflow: hidden;
	text-overflow: ellipsis; /* ぎりぎりでも綺麗に切る */
}

.topbar-social {
	display: inline-flex;
	align-items: center;
}

.topbar-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 0.8rem;
	color: #fff;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.topbar-social a:hover {
	opacity: 0.85;
	transform: translateY(-2px);
}
.topbar-social svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* —— スマホ最適化（幅が狭い時はテキストを隠してアイコンだけ1行維持） —— */
@media (max-width: 680px) {
	.topbar-text {
		display: none;
	} /* ← これで折り返しの原因を排除 */
	.topbar-social a {
		margin-left: 0.6rem;
	}
	.topbar-social svg {
		width: 18px;
		height: 18px;
	}
}

/* まれにヘッダーが重なって隠れる場合の保険 */
.site-header {
	position: relative;
	z-index: 1000;
}

/* ================================
   Page Core Styles (moved inline)
   ================================ */
:root {
	--primary: #13357b;
	--accent: #b30673;
	--gray: #f8f9fa;
	--light: #fff;
	--dark: #111;
	--transition: all 0.3s ease;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Jost', system-ui, -apple-system, sans-serif;
	color: var(--dark);
	background: var(--light);
	line-height: 1.6;
	scroll-behavior: smooth;
}
a {
	text-decoration: none;
	color: inherit;
	transition: color 0.3s ease;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

/* ===== HEADER ===== */
header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.topbar {
	background: var(--primary);
	color: #fff;
	text-align: center;
	font-size: 0.9rem;
	padding: 0.4rem 0;
	letter-spacing: 0.3px;
}
nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 1rem;
}
.brand {
	font-weight: 800;
	color: var(--primary);
	font-size: 1.2rem;
}
.nav-links {
	display: flex;
	gap: 1rem;
	align-items: center;
}
.nav-link {
	font-weight: 600;
	color: #111;
	position: relative;
}
.nav-link::after {
	content: '';
	position: absolute;
	bottom: -0.15rem;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--primary);
	transform: scaleX(0);
	transition: transform 0.25s ease;
	transform-origin: left;
}
.nav-link:hover::after {
	transform: scaleX(1);
}
.btn {
	background: var(--primary);
	color: #fff;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	font-weight: 600;
	transition: background 0.3s ease;
}
.btn:hover {
	background: var(--accent);
}

/* ===== HERO ===== */
.hero {
	position: relative;
	text-align: center;
	color: #fff;
	background: url('img/img3-710.webp') center/cover no-repeat;
	height: 70vh;
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}
.hero > * {
	position: relative;
	z-index: 2;
}
.hero h1 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}
.hero p {
	max-width: 600px;
	margin: 0 auto;
	font-size: 1rem;
}

/* ===== ABOUT SECTION ===== */
section.about {
	padding: 3rem 1rem;
	max-width: 1100px;
	margin: auto;
	display: grid;
	gap: 2rem;
}
.about-text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.about-text h2 {
	color: var(--primary);
	font-size: 1.6rem;
}
.about-text strong {
	color: var(--accent);
}
.about-values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1rem;
	margin-top: 0.8rem;
	font-size: 0.95rem;
}
.about-values span::before {
	content: '✓ ';
	color: var(--primary);
	font-weight: 700;
}
.about img {
	width: 100%;
	object-fit: cover;
	border: 10px solid var(--primary);
	border-radius: 12px;
}
.cta {
	text-align: center;
	margin-top: 2rem;
}

/* ===== FOOTER ===== */
footer {
	background: var(--dark);
	color: #fff;
	text-align: center;
	font-size: 0.9rem;
	padding: 2rem 1rem;
}

@media (min-width: 768px) {
	section.about {
		grid-template-columns: 1.2fr 1fr;
		align-items: center;
	}
	.hero h1 {
		font-size: 2.4rem;
	}
}

/* ==========================
   MOBILE MENU (Neo-Glass)
   ========================== */
.hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 20px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1101;
}
.hamburger span {
	height: 2px;
	width: 100%;
	background: var(--dark);
	border-radius: 2px;
	transition: all 0.35s ease;
}
.hamburger.open span:nth-child(1) {
	transform: rotate(45deg) translateY(8px);
}
.hamburger.open span:nth-child(2) {
	opacity: 0;
}
.hamburger.open span:nth-child(3) {
	transform: rotate(-45deg) translateY(-8px);
}

.mobile-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 82%;
	max-width: 320px;
	height: 100vh;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(16px) saturate(150%);
	box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15);
	transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
	display: flex;
	flex-direction: column;
	padding: 2.8rem 1.6rem;
	z-index: 1000;
	transform: translateX(100%);
}
.mobile-menu.active {
	transform: translateX(0);
	right: 0;
}

body.menu-open::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(4px);
	transition: opacity 0.4s ease;
	opacity: 1;
	z-index: 999;
}
body:not(.menu-open)::before {
	opacity: 0;
	pointer-events: none;
}

.close-btn {
	position: absolute;
	top: 1rem;
	right: 1.2rem;
	font-size: 1.8rem;
	background: none;
	border: none;
	color: var(--primary);
	cursor: pointer;
	transition: color 0.3s ease;
}
.close-btn:hover {
	color: var(--accent);
}

.menu-list {
	list-style: none;
	margin-top: 2.8rem;
	padding: 0;
}
.menu-list li {
	margin: 1.2rem 0;
}
.menu-list a,
.dropdown-toggle {
	color: #111;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	transition: color 0.25s ease;
}
.menu-list a:hover,
.dropdown-toggle:hover {
	color: var(--accent);
}

.dropdown-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}
.dropdown-toggle::after {
	content: '▾';
	color: var(--primary);
	font-size: 0.9rem;
	margin-left: 6px;
	transition: transform 0.25s ease;
}
.dropdown.open .dropdown-toggle::after {
	transform: rotate(180deg);
}
.dropdown-menu {
	list-style: none;
	padding-left: 1rem;
	margin-top: 0.4rem;
	display: none;
	border-left: 2px solid var(--primary);
}
.dropdown.open .dropdown-menu {
	display: block;
}
.dropdown-menu a {
	font-size: 0.9rem;
	color: #333;
	display: block;
	padding: 0.3rem 0;
}

.mobile-menu .nav-cta {
	display: block;
	margin-top: 1.8rem;
	padding: 0.8rem 1.4rem;
	border-radius: 999px;
	background: var(--primary);
	color: #fff;
	font-weight: 600;
	text-align: center;
	transition: background 0.3s ease, transform 0.2s ease;
}
.mobile-menu .nav-cta:hover {
	background: var(--accent);
	transform: translateY(-2px);
}

@media (min-width: 992px) {
	.hamburger,
	.mobile-menu,
	.close-btn {
		display: none !important;
	}
	.nav-links {
		display: flex !important;
	}
	.dropdown {
		position: relative;
	}
	.dropdown-menu {
		position: absolute;
		top: 100%;
		left: 0;
		background: #fff;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		display: none;
		flex-direction: column;
		min-width: 200px;
		padding: 0.4rem 0;
		z-index: 1000;
	}
	.dropdown:hover .dropdown-menu {
		display: flex;
	}
	.dropdown-menu a {
		padding: 0.6rem 1rem;
	}
	.dropdown-menu a:hover {
		background: var(--gray);
	}
}

@media (max-width: 991.98px) {
	.nav-links {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
	}
}

/* ========== Loader (overlay) ========== */
#loader {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	z-index: 9999;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hide {
	opacity: 0;
	visibility: hidden;
}

.spinner {
	width: 48px;
	height: 48px;
	border: 4px solid #ddd;
	border-top: 4px solid var(--primary);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 18px;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.progress-bar {
	width: 200px;
	height: 6px;
	background: #eee;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}
.progress-fill {
	width: 0%;
	height: 100%;
	background: var(--primary);
	transition: width 0.3s ease;
}
#progress-text {
	font-size: 1rem;
	font-weight: 600;
	color: #333;
}
.hero-basic {
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 !important;
	padding: 0 !important;
	left: 50%;
	transform: translateX(-50%);
}
.hero-basic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	padding: 0 1rem;
}
.hero-overlay h1 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-overlay p {
	max-width: 600px;
	font-size: 1.05rem;
	line-height: 1.6;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
@media (min-width: 768px) {
	.hero-overlay h1 {
		font-size: 2.4rem;
	}
}

/* ===== ABOUT (feature-wide override) ===== */
.about--feature {
	padding: clamp(2.5rem, 5vw, 4rem) 1rem;
	background: #fff;
}

.about--feature .about-inner {
	/* 広めのキャンバスにしつつ左右に余白 */
	max-width: min(1200px, 92vw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.15fr 1fr; /* 画像を少し大きめに */
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}

@media (max-width: 991.98px) {
	.about--feature .about-inner {
		grid-template-columns: 1fr;
	}
}

/* 画像はフル幅＆縦横比を保ってドロップシャドウのみ（既存の太いボーダーを無効化） */
.about--feature .about-image img {
	width: 100%;
	height: auto;
	display: block;
	border: none; /* 既存 .about img の border を打ち消し */
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
	object-fit: cover;
}

/* タイポを少し大きく＆見出し強調 */
.about--feature .about-text h5 {
	font-weight: 700;
	letter-spacing: 0.3px;
	color: var(--accent, #b30673);
	margin-bottom: 0.25rem;
}

.about--feature .about-text h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.25rem);
	line-height: 1.25;
	color: var(--primary, #13357b);
	margin: 0.25rem 0 0.75rem;
}

.about--feature .about-text p {
	font-size: clamp(1rem, 1.15vw, 1.05rem);
	color: #222;
}

/* 箇条書きを読みやすく */
.about--feature .about-points {
	margin: 0.75rem 0 1.25rem;
	padding-left: 1.1rem;
	display: grid;
	grid-template-columns: 1fr 1fr; /* 2列で情報密度UP */
	gap: 0.4rem 1rem;
	list-style: none;
}

.about--feature .about-points li {
	position: relative;
	padding-left: 1.1rem;
	font-size: 1rem;
}

.about--feature .about-points li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--primary, #13357b);
	font-weight: 700;
}

@media (max-width: 575.98px) {
	.about--feature .about-points {
		grid-template-columns: 1fr; /* モバイルは1列で読みやすく */
	}
}

/* CTAボタンの余白とリズム */
.about--feature .btn {
	margin-top: 0.25rem;
}
/* =========================================================
   🔹 HOME 専用 ABOUT（太枠 + 2カラム）
   ========================================================= */
.page-home .about {
	padding: 3rem 1rem;
	max-width: 1100px;
	margin: auto;
	display: grid;
	gap: 2rem;
	background: var(--light);
}
.page-home .about-inner {
	display: grid;
	gap: 2rem;
	align-items: center;
}
.page-home .about img {
	width: 100%;
	object-fit: cover;
	border: 10px solid var(--primary);
	border-radius: 12px;
}
.page-home .about-text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.page-home .about-text h2 {
	color: var(--primary);
	font-size: 1.6rem;
}
.page-home .about-text strong {
	color: var(--accent);
}
.page-home .about-values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1rem;
	margin-top: 0.8rem;
	font-size: 0.95rem;
}
.page-home .about-values span::before {
	content: '✓ ';
	color: var(--primary);
	font-weight: 700;
}
.page-home .cta {
	text-align: center;
	margin-top: 2rem;
}
@media (min-width: 768px) {
	.page-home .about-inner {
		grid-template-columns: 1.2fr 1fr;
		align-items: center;
	}
}

/* =========================================================
   About Feature Section (独立版)
   Author: Nao Koiwa / 2025
   Scope: .about-feature
========================================================= */

.about-feature {
	padding: clamp(2.5rem, 5vw, 4rem) 1rem;
	background: #fff;
}

.about-feature__inner {
	max-width: min(1200px, 92vw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(1.5rem, 3vw, 2.8rem);
	align-items: center;
}

@media (max-width: 991.98px) {
	.about-feature__inner {
		grid-template-columns: 1fr;
	}
}

/* === 画像部分 === */
.about-feature__image img {
	width: 100%;
	height: auto;
	display: block;
	border: none;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
	object-fit: cover;
	background: #f0f0f0;
}

/* === テキスト === */
.about-feature__text {
	color: #222;
	background: var(--gray, #f8f9fa);
	padding: clamp(1.5rem, 3vw, 2rem);
	border-radius: 14px;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
}
.about-feature__text h5 {
	font-weight: 700;
	color: var(--accent, #b30673);
	margin-bottom: 0.4rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-size: 0.95rem;
}
.about-feature__text h2 {
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	color: var(--primary, #13357b);
	margin-bottom: 0.8rem;
	line-height: 1.25;
}
.about-feature__text h2 span {
	color: var(--accent, #b30673);
}
.about-feature__text p {
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 1rem;
}

/* === 箇条書き === */
.about-feature__points {
	list-style: none;
	margin: 1rem 0 1.5rem;
	padding-left: 1rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1rem;
}
.about-feature__points li {
	position: relative;
	padding-left: 1.1rem;
	font-size: 1rem;
}
.about-feature__points li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--primary, #13357b);
	font-weight: 700;
}
@media (max-width: 575.98px) {
	.about-feature__points {
		grid-template-columns: 1fr;
	}
}

/* === CTAボタン === */
.about-feature .btn {
	margin-top: 0.3rem;
	background: var(--primary);
	color: #fff;
	border-radius: 999px;
	padding: 0.7rem 1.8rem;
	font-weight: 600;
	transition: background 0.3s ease, transform 0.2s ease;
}
.about-feature .btn:hover {
	background: var(--accent);
	transform: translateY(-2px);
}

/* ===== Contact Section Layout ===== */
.contact {
	background: var(--gray);
	padding: 3rem 1rem;
}

.contact-container {
	display: grid;
	gap: 2rem;
	max-width: 1100px;
	margin: auto;
	align-items: start;
}

/* PC時：2カラム */
@media (min-width: 768px) {
	.contact-container {
		grid-template-columns: 1fr 1.5fr;
	}
}

/* ===== Left Column: Info ===== */
.contact-info {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.info-box {
	background: #fff;
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-box:hover {
	transform: translateY(-6px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.icon {
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
	color: var(--primary);
}
.info-box h3 {
	color: var(--primary);
	margin-bottom: 0.3rem;
	font-size: 1.05rem;
}
.info-box p {
	color: #444;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* ===== Right Column: Form ===== */
.contact-form {
	background: #fff;
	border-radius: 12px;
	padding: 2rem;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}
.contact-form h3 {
	color: var(--primary);
	margin-bottom: 1rem;
}
.form-group {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}
label {
	font-weight: 600;
	margin-bottom: 0.4rem;
}
input,
textarea {
	padding: 0.6rem 0.8rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	transition: border 0.25s ease;
	font-family: inherit;
}
input:focus,
textarea:focus {
	outline: none;
	border-color: var(--primary);
}
textarea {
	resize: vertical;
	min-height: 140px;
}
button {
	background: var(--primary);
	color: #fff;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 30px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.3s ease;
}
button:hover {
	background: var(--accent);
}

/* ===== Mobile menu hardening ===== */
.mobile-menu {
	position: fixed; /* header内の相対配置から脱出 */
	top: 0;
	right: 0;
	bottom: 0;
	width: min(88vw, 360px);
	transform: translateX(100%); /* 初期は右へ退避 */
	transition: transform 0.28s ease;
	z-index: 2000; /* ヘッダー/ヒーローより上に */
	background: #fff;
	box-shadow: -16px 0 32px rgba(0, 0, 0, 0.12);
	padding: 72px 20px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: calc(72px + env(safe-area-inset-top)); /* iOSノッチ対応 */
}
.mobile-menu.active {
	transform: translateX(0);
}

/* 背景スクロール抑止 & スクロールバー幅ぶんのズレ防止 */
body.menu-open {
	overflow: hidden;
	padding-right: var(--scrollbar-comp, 0px);
}

/* ハンバーガーは最前面に */
.hamburger {
	position: relative;
	z-index: 2100;
}

/* ヘッダー/トップバーがモバイルメニューより上に来ないよう調整 */
.site-header {
	position: relative;
	z-index: 1000;
}

/* PC用ドロップダウンは absolute、モバイル側は流し込みに切替 */
@media (max-width: 991.98px) {
	.navbar .dropdown-menu {
		position: static !important;
		transform: none !important;
		display: none; /* 閉じた状態 */
		margin: 8px 0 0;
		padding-left: 12px;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.navbar .dropdown.open > .dropdown-menu {
		display: block;
	}
}

/* クリック領域の取りこぼし対策（小画面での誤差吸収） */
.menu-list .dropdown-toggle {
	width: 100%;
	text-align: left;
}

/* 影響しがちなベース指定の保険（例：headerがsticky/overflow hidden等） */
.site-header * {
	overscroll-behavior: contain;
}

/* ================================
   Navbar: ドロップダウンと通常リンクの縦位置を統一
   ================================ */

/* 1) ベース：通常リンク/ドロップダウン両方を同じ描画モードに */
.navbar .nav-links,
.navbar .nav-links * {
	line-height: 1.2; /* 統一 */
	letter-spacing: 0.02em;
}

.navbar .nav-links a,
.navbar .dropdown > .nav-link,
.navbar .dropdown-toggle {
	display: inline-flex; /* a と button を同じ box に */
	align-items: center; /* 垂直中央 */
	gap: 0.35em; /* "Tours ▾" の矢印との隙間 */
	padding: 0.6rem 0.8rem; /* 統一パディング */
	font-size: 0.95rem; /* 統一フォントサイズ */
	font-weight: 600;
	vertical-align: middle; /* ベースラインのズレ防止 */
	text-decoration: none;
	white-space: nowrap; /* 折返しで高さがズレないように */
}

/* 2) button 初期スタイルをリセット（aと見た目を完全一致） */
.navbar .dropdown-toggle {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}

/* 3) PC用ドロップダウンメニュー内リンクの行間も統一 */
.navbar .dropdown-menu a {
	display: block;
	padding: 0.5rem 0.9rem;
	line-height: 1.2;
}

/* 4) モバイルメニューでも同じ基準に（buttonとaを統一） */
@media (max-width: 991.98px) {
	.mobile-menu .menu-list a,
	.mobile-menu .menu-list .dropdown-toggle {
		display: flex;
		align-items: center;
		padding: 14px 10px;
		line-height: 1.25;
		font-size: 1rem;
		appearance: none;
		-webkit-appearance: none;
		background: transparent;
		border: 0;
	}
	/* モバイルのサブメニューも余白を揃える */
	.mobile-menu .dropdown-menu a {
		padding: 10px 14px;
	}
}

/* 5) もし.nav-link に別の下線アニメ等がある場合も高さを固定 */
.navbar .nav-link {
	display: inline-flex;
	align-items: center;
}
@media (max-width: 767px) {
	.hero-basic {
		height: 80vh; /* モバイルは少し高めに */
	}
	.hero-basic h1 {
		font-size: 1.6rem;
	}
	.hero-basic p {
		font-size: 0.95rem;
	}
}
/* =====================================================
   🔹 HERO Section (Unified for All Pages)
===================================================== */
.hero-basic {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	height: 60vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
	background: #000;
}

/* ✅ 画像（picture / img）設定 */
.hero-basic picture,
.hero-basic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ✅ オーバーレイ（背景＋中央配置） */
.hero-basic .hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: #fff;
	padding: 0 1rem;
	z-index: 5;
}

/* ✅ テキストスタイル */
.hero-basic h1 {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 700;
	margin-bottom: 0.6rem;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
	letter-spacing: 0.02em;
}
.hero-basic p {
	max-width: 620px;
	font-size: clamp(1rem, 2.5vw, 1.15rem);
	line-height: 1.6;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	margin-bottom: 1rem;
}

/* ✅ CTAボタン（統一） */
.hero-basic .btn {
	margin-top: 1rem;
	background: #fff;
	color: #13357b;
	padding: 0.75rem 1.6rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.3s ease;
	z-index: 10;
}
.hero-basic .btn:hover {
	background: #b30673;
	color: #fff;
}