/* ==========================================================================
   Shurijo Castle — Header, mobile menu, footer
   ========================================================================== */

:root {
	--sc-accent: #b3202c;
	--sc-dark: #141414;
	--sc-dark-soft: rgba(20, 20, 20, 0.85);
	--sc-line: rgba(255,255,255, 0.7);
	--sc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header,
.mobile-menu {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* .sp / .pc responsive-visibility helpers now live in style.css (common). */

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
}

body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	#wpadminbar {
		display: none !important;
	}

	html:root {
		margin-top: 0 !important;
	}

	body.admin-bar .site-header {
		top: 0;
	}
}

/* ── Nav bar (desktop): menu + language dropdown ── */

.site-nav-bar {
	position: relative;
	background: linear-gradient(to bottom,
	 rgba(0, 0, 0, 0.73) 0%,
	 rgba(0, 0, 0, 0.63) 45%,
	 rgba(0, 0, 0, 0.5) 60%,
	 rgba(0, 0, 0, 0.33) 75%,
	 rgba(0, 0, 0, 0.13) 90%,
	 rgba(0, 0, 0, 0) 100%
	);
}

.site-nav-bar__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.main-navigation__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 50px;
	flex-wrap: wrap;
}

.main-navigation__list a {
	position: relative;
	display: inline-block;
	color: rgba(255, 255, 255, 0.9);
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 20px 2px 50px;
	text-decoration: none;
	transition: color 0.25s var(--sc-ease);
}

.main-navigation__list a::first-letter{
	text-transform: uppercase;
}

.main-navigation__list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 45px;
	width: 0%;
	height: 1px;
	background: #ffffff;
	transition: width 0.3s var(--sc-ease);
}

.main-navigation__list .current-menu-item > a,
.main-navigation__list .current_page_item > a,
.main-navigation__list a:hover,
.main-navigation__list a:focus-visible {
	color: #ffffff;
	opacity: 1;
}

.main-navigation__list .current-menu-item > a::after,
.main-navigation__list .current_page_item > a::after,
.main-navigation__list a:hover::after,
.main-navigation__list a:focus-visible::after {
	width: 100%;
}

/* ── Language switcher (desktop dropdown) ── */

.lang-switcher {
	position: absolute;
	right: 60px;
	top: 12px;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.lang-switcher__divider {
	color: #fff;
	font-size: 14px;
}

.lang-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.9);
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 0.06em;
	cursor: pointer;
	padding: 10px 2px;
	transition: color 0.25s var(--sc-ease);
}

.lang-switcher__toggle font::first-letter {
	text-transform: uppercase;
}

.lang-switcher__toggle:hover,
.lang-switcher__toggle:focus-visible {
	color: #ffffff;
}

/* CSS-drawn solid triangle (border trick) instead of a Unicode glyph, so
   its size/weight is consistent across fonts instead of tiny/inconsistent. */
.lang-switcher__caret {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform 0.3s var(--sc-ease);
}

.lang-switcher__toggle[aria-expanded="true"] .lang-switcher__caret {
	transform: rotate(180deg);
}

.lang-switcher__dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 140px;
	background: rgba(15, 15, 15, 0.8);
	padding: 14px 0;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	display: grid;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(-8px) scale(0.98);
	transform-origin: top center;
	transition: opacity 0.22s var(--sc-ease), transform 0.22s var(--sc-ease), visibility 0.22s;
	z-index: 10;
}

.lang-switcher__dropdown.is-open,
.lang-switcher:hover .lang-switcher__dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0) scale(1);
}

.lang-switcher:hover .lang-switcher__caret {
	transform: rotate(180deg);
}

.lang-switcher__link {
	position: relative;
	display: block;
	padding: 5px 20px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: color 0.25s var(--sc-ease);
	text-align: center;
}

.lang-switcher__link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0%;
	height: 1px;
	background: #ffffff;
	transform: translateX(-50%);
	transition: width 0.3s var(--sc-ease);
}

.lang-switcher__link:hover,
.lang-switcher__link:focus-visible {
	color: #ffffff;
	opacity: 1;
}

.lang-switcher__link:hover::after,
.lang-switcher__link:focus-visible::after {
	width: 60%;
}

/* ── Hamburger: circle with two bars ── */

.menu-toggle {
	display: none;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.menu-toggle__circle {
	position: relative;
	width: 42px;
	height: 42px;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.3s var(--sc-ease), background 0.3s var(--sc-ease), transform 0.3s var(--sc-ease);
}

.menu-toggle:hover .menu-toggle__circle {
	border-color: #ffffff;
	background: rgba(0, 0, 0, 0.85);
	transform: scale(1.06);
}

.menu-toggle__bar {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 1px;
	background: #ffffff;
	transform: translate(-50%, calc(-50% - 4px));
	transition: transform 0.3s var(--sc-ease), opacity 0.3s var(--sc-ease);
}

.menu-toggle__bar:last-child {
	transform: translate(-50%, calc(-50% + 4px));
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ==========================================================================
   Responsive: collapse nav bar into hamburger
   ========================================================================== */

@media (max-width: 1024px) {
	.main-navigation,
	.lang-switcher {
		display: none;
	}

	.site-nav-bar__inner {
		justify-content: center;
		min-height: 60px;
	}

	.menu-toggle {
		display: block;
	}

	.site-nav-bar {
		background: transparent;
	}
}

@media (max-width: 480px) {
	.menu-toggle__circle {
		width: 38px;
		height: 38px;
	}
}

/* ==========================================================================
   Fullscreen mobile menu ("design 3")
   ========================================================================== */

.mobile-menu {
	position: fixed;
	inset: 0;
	/* Below .site-header's z-index (100) so the sticky header — including its
	   hamburger-to-× button — stays visible above the dark backdrop instead
	   of being dimmed/covered while the menu is open. */
	z-index: 50;
	visibility: hidden;
	pointer-events: none;
}

/* Keep the fullscreen mobile menu below the fixed admin bar too, same as
   the sticky header. On mobile the admin bar is hidden entirely (above),
   so no offset is needed there. */
body.admin-bar .mobile-menu {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .mobile-menu {
		top: 0;
	}
}

.mobile-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 8, 0.7);
	opacity: 0;
	transition: opacity 0.35s var(--sc-ease);
}

.mobile-menu__panel {
	position: absolute;
	inset: 0;
	background: #1a1a1a;
	padding: 80px 60px 50px;
	overflow-y: auto;
	opacity: 0;
	transform: scale(0.97);
	transition: opacity 0.35s var(--sc-ease), transform 0.35s var(--sc-ease);
}

.mobile-menu.is-open {
	visibility: visible;
	pointer-events: auto;
}

.mobile-menu.is-open::before {
	opacity: 1;
}

.mobile-menu.is-open .mobile-menu__panel {
	opacity: 1;
	transform: scale(1);
}

.mobile-menu__content {
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

.mobile-menu__content::after {
	content: "";
	display: block;
	height: 1px;
	background: var(--sc-line);
	opacity: 0;
	transition: opacity 0.4s var(--sc-ease) 0.45s;
}

.mobile-menu.is-open .mobile-menu__content::after {
	opacity: 1;
}

.mobile-menu__list {
	list-style: none;
	padding: 0;
}

.mobile-menu__list .menu-item {
	border-bottom: 1px solid var(--sc-line);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s var(--sc-ease), transform 0.4s var(--sc-ease);
}

.mobile-menu__list .menu-item:last-child{
	border-bottom: none;
}

.mobile-menu.is-open .mobile-menu__list .menu-item {
	opacity: 1;
	transform: translateY(0);
}

.mobile-menu__list .menu-item:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu__list .menu-item:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu__list .menu-item:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu__list .menu-item:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu__list .menu-item:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu__list .menu-item:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu__list .menu-item:nth-child(7) { transition-delay: 0.35s; }

.mobile-menu__list a {
	display: block;
	padding: 16px 4px;
	font-size: 19px;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	transition: color 0.25s var(--sc-ease);
}

/* .mobile-menu__list .current-menu-item > a,
.mobile-menu__list .current_page_item > a,
.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible {
	opacity: 1;
} */

.mobile-menu__lang {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s var(--sc-ease) 0.4s, transform 0.4s var(--sc-ease) 0.4s;
}

.mobile-menu.is-open .mobile-menu__lang {
	opacity: 1;
	transform: translateY(0);
}

.mobile-menu__lang-heading {
	margin: 0;
	width: 100%;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.9);
	font-family: inherit;
	font-size: 19px;
	letter-spacing: 0.06em;
	text-align: center;
	padding: 14px 4px 18px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	line-height: inherit;
}

.mobile-menu__lang-heading[aria-expanded="true"] .lang-switcher__caret {
	transform: rotate(180deg);
}

.mobile-menu__lang-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s var(--sc-ease);
	max-width: 300px;
	margin: 0 auto;
}

.mobile-menu__lang-grid.is-open {
	max-height: 260px;
	margin-bottom: 18px;
}

.mobile-menu__lang-link {
	padding: 10px 5px;
	text-align: center;
	font-size: 19px;
	text-decoration: none;
	transition: color 0.2s var(--sc-ease), background 0.2s var(--sc-ease);
}

.mobile-menu__lang-link:hover,
.mobile-menu__lang-link:focus-visible {
	color: #ffffff;
	opacity: 1;
}

body.mobile-menu-open {
	overflow: hidden;
}


/* ==========================================================================
   各種お問い合わせ + 開催記録アーカイブ
   Render from footer.php on every template (the front page included, since
   footer.php is still nested inside .bg2-wrap.front-page there), so these
   live here unscoped rather than under .front-page in front-page.css.
   ========================================================================== */

.contact-inner {
	text-align: center;
	max-width: 100%;
	padding: 50px 0;
}

.contact-box {
	background: rgba(10, 10, 10, 0.5);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	padding: 55px 48px 70px;
}

.contact-btn {
	margin-bottom: 32px;
	background-color: transparent;
}

.contact-tel {
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 900;
	letter-spacing: 0.06em;
	margin-bottom: 12px;
	line-height: 1.2;
	display: block;
}

.contact-tel img {
	width: 38px;
}

.contact-tel-icon {
	font-size: 0.75em;
	display: inline-block;
}

.contact-email {
	font-size: 22px;
	letter-spacing: 0.06em;
	margin-bottom: 14px;
	font-weight: 600;
}

.block-info {
	max-width: 360px;
	text-align: left;
	margin: 0 auto;
}

.contact-info {
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 1.8;
}

.archive-inner {
	text-align: center;
	padding-top: 60px;
	padding-bottom: 80px;
}

@media (max-width: 768px) {
	.sec-inner.contact-inner {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 480px) {
	.contact-box {
		padding: 12vw 5vw;
	}

	.contact-btn {
		font-size: 3.4vw;
		padding: 4.5vw 7.5vw 4.5vw 4vw;
		max-width: 86%;
	}

	.contact-tel {
		font-size: 8.5vw;
		letter-spacing: 0.02em;
	}

	.contact-tel-icon {
		margin-right: 0;
	}

	.contact-email {
		font-size: 4.1vw;
	}

	.contact-info {
		font-size: 3.3vw;
	}

	.contact-tel img {
		width: 6.7vw;
	}

	.block-info {
		max-width: 85%;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
	background-color: transparent;
}

.footer-castle {
	position: relative;
	overflow: hidden;
	line-height: 0;
}

.img-footer {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	object-position: top center;
}

.footer-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(10, 10, 10, 0.72);
	padding: 30px 24px;
	line-height: normal;
}

.footer-overlay-inner {
	max-width: 1140px;
	margin: 0 auto;
	text-align: center;
}

.footer-line1,
.footer-line2 {
	font-size: 15px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	line-height: 1.9;
}

.footer-line1 a {
	color: inherit;
	text-decoration: none;
}

.footer-line1 a:hover,
.footer-line1 a:focus-visible {
	color: #ffffff;
	opacity: 1;
}

@media (max-width: 767px) {
	.footer-line1,
	.footer-line2 {
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.footer-overlay {
		position: relative;
	}

	.footer-line1,
	.footer-line2 {
		font-size: 3vw;
	}
}

/* GTranslate script loader: only needed so window.doGTranslate() is defined
   for the custom language links above. GTranslate's own widget UI (its
   "Widget look" setting — float button, dropdown, popup, etc.) renders
   itself outside this container (some styles attach straight to <body>),
   so every element it can possibly generate is force-hidden below rather
   than relying on clipping this wrapper alone. */
.gtranslate-loader,
.gtranslate_wrapper,
[id^="gt-wrapper-"],
#google_translate_element,
.goog-te-gadget,
.goog-te-banner-frame,
.goog-te-menu-frame,
.skiptranslate,
.gt_float_switcher {
	display: none !important;
	visibility: hidden !important;
}

body {
	top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu,
	.mobile-menu::before,
	.mobile-menu__panel,
	.mobile-menu__list .menu-item,
	.mobile-menu__lang,
	.lang-switcher__dropdown,
	.menu-toggle__bar,
	.menu-toggle__circle {
		transition-duration: 0.01ms !important;
	}
}