/*!
Theme Name: FiltShibuya
Theme URI: http://underscores.me/
Author: franx
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: filtshibuya
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

FiltShibuya is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.30px 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}

a:visited {
	color: #9377d1;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	/*border-radius: 3px;*/
	border-radius: 0;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	/*margin: 0 0 1.5em;*/
	margin: 0;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}


:root {
  --right-purple: #bb9dff;
  --purple: #9377d1;
  --dark-purple: #432c78;
}

/* =========================================
   Header / Navigation (FiltShibuya)
   Final CSS – No fade, smoothing ON
========================================= */

/* ---------- Header base ---------- */
#masthead.site-header {
	background: #000;
	padding: 10px 30px 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* ---------- Site branding (logo area) ---------- */
#masthead .site-branding {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

#masthead .custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

/* Logo image (no distortion + smoothing transitions) */
#masthead .custom-logo-link img,
#masthead .custom-logo {
	display: block;
	width: auto !important;
	height: auto !important;
	max-height: 50px;      /* default */
	object-fit: contain;

	/* スムージング：サイズ変化＋フィルタ変化を滑らかに */
	transition:
		max-height 240ms ease,
		filter 240ms ease;
	will-change: max-height, filter;

	/* フェード（opacity）は一切しない */
	opacity: 1;
	filter: none;
}

/* Hide site title & description */
#masthead .site-title,
#masthead .site-description {
	display: none;
}

/* ---------- Navigation ---------- */
#site-navigation {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 60px; /* align with logo height */
}

#site-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#site-navigation a {
	color: #fff;
	text-decoration: none;
}

/* ---------- Hamburger button ---------- */
#site-navigation .menu-toggle {
	margin-left: auto;
	background: transparent;
	border: none;
	padding: 12px;
	cursor: pointer;
	color: #fff;
	position: relative;
	z-index: 1001;
	display: none; /* shown only on SP */
}

/* Hamburger icon */
#site-navigation .menu-toggle__icon {
	position: relative;
	display: block;
	width: 24px;
	height: 18px;
}

#site-navigation .menu-toggle__icon,
#site-navigation .menu-toggle__icon::before,
#site-navigation .menu-toggle__icon::after {
	background-color: currentColor;
	height: 2px;
	border-radius: 1px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

#site-navigation .menu-toggle__icon::before,
#site-navigation .menu-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
}

#site-navigation .menu-toggle__icon::before { top: -8px; }
#site-navigation .menu-toggle__icon::after  { top: 8px; }

/* Open state → X */
#site-navigation.toggled .menu-toggle__icon {
	transform: rotate(45deg);
}

#site-navigation.toggled .menu-toggle__icon::before {
	transform: rotate(90deg) translateX(8px);
}

#site-navigation.toggled .menu-toggle__icon::after {
	opacity: 0;
}
#site-navigation ul {
 padding: 1em 2em;
}

/* ---------- Desktop (>=769px) ---------- */
@media (min-width: 769px) {
	#site-navigation ul {
		display: flex;
		gap: 20px;
		align-items: center;
	}

	#site-navigation .menu-toggle {
		display: none;
	}
}

/* ---------- Mobile / Tablet (<=768px) ---------- */
@media (max-width: 768px) {
	#site-navigation .menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Full-screen overlay menu */
	#site-navigation ul {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		padding: 3em 3em 3em;
		background: rgba(0, 0, 0, 0.8)
		display: none;
		flex-direction: column;
		gap: 0;
		z-index: 1000;
	}

	#site-navigation.toggled ul {
		display: flex;
	}

	#site-navigation ul a {
		font-size: 1.2rem;
		padding: 10px 0;
	}
}

@media (max-width: 420px){
	#site-navigation ul {
		padding: 2em 2em 2em;

	}
}

/* ---------- Logo resize for <=900px (smoothing ON) ---------- */
@media (max-width: 900px) {
 	#masthead.site-header {
		padding: 0px 20px;
 	}

	#masthead .custom-logo-link img,
	#masthead .custom-logo {
		max-height: 40px;
		filter: blur(0.35px);
	}

	#site-navigation {
		min-height: 60px;
	}
}

/* ---------- Body scroll lock ---------- */
body.menu-open {
	overflow: hidden;
}

/* ---------- Reduced motion support ---------- */
@media (prefers-reduced-motion: reduce) {
	#masthead .custom-logo-link img,
	#masthead .custom-logo {
		transition: none !important;
		filter: none !important;
	}
}

/* =========================================
   Footer
========================================= */
.site-footer {
  background: var(--purple);
  padding: 40px 30px;
}

.site-footer a {
  color: #000;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* layout */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.footer-main{
  display: grid;
  gap: 10px;
  text-align: left;
  margin-bottom: 50px;
}

/* logo */
.footer-logo {
  display: inline-flex;
  align-items: center;
}

.footer-logo img {
  height: 50px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* address */
.footer-address {
  margin: 0;
  font-style: normal;
  line-height: 1.7;
}

.footer-address p {
  margin: 0 0 6px;
}

.footer-address p,
.footer-hours p,
.footer-email p {
  padding: 0 0 0 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1;
  color: #000;
}

.footer-email a{
  text-decoration: none;
}

.footer-copyright{
  /*background: var(--dark-purple);*/
  width: 100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 9999;
  text-align: center;
  font-size: 12px;
  line-height: 1rem;
  letter-spacing: 0.05em;
  padding: 10px 0;
}

@media (max-width: 420px){
  .footer-logo img {
    height: 40px;
  }
  .footer-address p,
  .footer-hours p,
  .footer-email p {
    font-size: 12px;
  }
}

/* =========================
   HOME / FRONT PAGE (Legacy: filt-*)
   Scope: body.home / body.front-page
   - HTML + CSS + JS
========================= */

/* ---------------------------------
   Layout: Section & Container
--------------------------------- */
body.home .filt-section,
body.front-page .filt-section {
  padding-block: clamp(28px, 4vw, 64px);
}

body.home .filt-container,
body.front-page .filt-container {
  margin-inline: auto;
  padding-inline: 16px;
}

body.home .filt-container--900,
body.front-page .filt-container--900 {
  max-width: 900px;
}

body.home .filt-container--1500,
body.front-page .filt-container--1500 {
  max-width: 1500px;
}

/* ---------------------------------
   Typography
--------------------------------- */
:root{
  --font-en: "Forum";
  --font-ja: "Zen Kaku Gothic New";
  --font-mincho: "Zen Old Mincho";
}

/* 基本：英数字はForum、日本語はZen Kaku Gothic Newへフォールバック */
body{
  font-family: var(--font-en), var(--font-ja), system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* このクラスを付けた要素だけ明朝に切替 */
.is-mincho{
  font-family: var(--font-mincho), var(--font-ja), system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* もし「明朝＋英数字もForumにしたい」ならこちら */
.is-mincho--with-en{
  font-family: var(--font-en), var(--font-mincho), var(--font-ja), system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.home .filt-h2,
body.front-page .filt-h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.2;
}

body.home .filt-h3,
body.front-page .filt-h3 {
  margin: 10px 0 8px;
  font-size: 20px;
  line-height: 1.25;
}

body.home .filt-h3--sm,
body.front-page .filt-h3--sm {
  font-size: 18px;
}

body.home .filt-meta,
body.front-page .filt-meta {
  display: inline-block;
  font-size: 0.9em;
  opacity: 0.75;
  margin-bottom: 6px;
}

body.home .filt-lead,
body.front-page .filt-lead {
  margin: 0;
  opacity: 0.9;
}

/* リードのみ */
body.home .filt-excerpt,
body.front-page .filt-excerpt {
  margin: 0;
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}





/* ---------------------------------
   Links (FILT SHIBUYA 指定: #000)
--------------------------------- */
body.home .filt-card__body a,
body.front-page .filt-card__body a,
body.home .filt-btn,
body.front-page .filt-btn {
  color: #000;
}

/* ---------------------------------
   Buttons
--------------------------------- */
body.home .filt-btn,
body.front-page .filt-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: 10px;
  text-decoration: none;
}

body.home .filt-btn--white,
body.front-page .filt-btn--white {
  border-color: rgba(255,255,255,0.65);
  color: #fff;
}

/* ---------------------------------
   Banner
--------------------------------- */
body.home .filt-banner img,
body.front-page .filt-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ---------------------------------
   Cards
--------------------------------- */
body.home .filt-card,
body.front-page .filt-card {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.85);
}

body.home .filt-card__thumb img,
body.front-page .filt-card__thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

body.home .filt-card__body a,
body.front-page .filt-card__body a {
  text-decoration: none;
}

body.home .filt-card__body a:hover,
body.front-page .filt-card__body a:hover {
  text-decoration: underline;
}

/* Latest card */
body.home .filt-card--latest,
body.front-page .filt-card--latest {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  padding: 16px;
}

@media (max-width: 781px) {
  body.home .filt-card--latest,
  body.front-page .filt-card--latest {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------
   Columns
--------------------------------- */
body.home .filt-cols,
body.front-page .filt-cols {
  display: grid;
  gap: 24px;
  align-items: center;
}

body.home .filt-cols--2,
body.front-page .filt-cols--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.home .filt-cols--3,
body.front-page .filt-cols--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 781px) {
  body.home .filt-cols--2,
  body.front-page .filt-cols--2,
  body.home .filt-cols--3,
  body.front-page .filt-cols--3 {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------
   1) Hero slider (CSS scroll-snap)
--------------------------------- */
body.home .filt-hero,
body.front-page .filt-hero {
  position: relative;
}

body.home .filt-hero__track,
body.front-page .filt-hero__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.home .filt-hero__track::-webkit-scrollbar,
body.front-page .filt-hero__track::-webkit-scrollbar {
  display: none;
}

body.home .filt-hero__slide,
body.front-page .filt-hero__slide {
  scroll-snap-align: start;
  height: clamp(360px, 56vh, 720px);
  background-size: cover;
  background-position: center;
  position: relative;
}

@media (max-width: 781px) {
  body.home .filt-hero__slide,
  body.front-page .filt-hero__slide {
    height: clamp(280px, 45vh, 520px);
  }
}

body.home .filt-hero__slide::before,
body.front-page .filt-hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.22);
}

body.home .filt-hero__inner,
body.front-page .filt-hero__inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(18px, 3vw, 44px);
  color: #fff;
  max-width: 1100px;
}

body.home .filt-hero__title,
body.front-page .filt-hero__title {
  margin: 0 0 8px;
  color: #fff;
}

body.home .filt-hero__text,
body.front-page .filt-hero__text {
  margin: 0;
  color: #fff;
  opacity: 0.95;
}

body.home .filt-hero__ui,
body.front-page .filt-hero__ui {
  position: absolute;
  inset-inline: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

body.home .filt-hero__nav,
body.front-page .filt-hero__nav {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* ---------------------------------
   2) Blog layout
   - PC/Tablet: grid
   - Mobile: slider
--------------------------------- */
body.home .filt-blog__latest,
body.front-page .filt-blog__latest {
  margin-bottom: 16px;
}

body.home .filt-blog__grid,
body.front-page .filt-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

body.home .filt-blog__slider,
body.front-page .filt-blog__slider {
  display: none;
}

@media (max-width: 781px) {
  body.home .filt-blog__grid,
  body.front-page .filt-blog__grid {
    display: none;
  }

  body.home .filt-blog__slider,
  body.front-page .filt-blog__slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  body.home .filt-blog__slider::-webkit-scrollbar,
  body.front-page .filt-blog__slider::-webkit-scrollbar {
    display: none;
  }

  body.home .filt-blog__slider > *,
  body.front-page .filt-blog__slider > * {
    scroll-snap-align: start;
  }
}

/* ---------------------------------
   Fix: bottom gap below footer (TOP ONLY)
--------------------------------- */
body.home .post,
body.home .page,
body.front-page .post,
body.front-page .page {
  margin-bottom: 0 !important;
}

/* =========================
   HOME / FRONT-PAGE (New)
   for front-page.php (.front-page in <main>)
========================= */

/* HERO */
.front-page .page-hero__catch{
  max-width: 900px;
  margin: 14px auto 0;
  padding: 0 20px;
  line-height: 1.8;
  font-size: 16px;
}

.front-page .page-hero__actions{
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Pills */
.front-page .btn-pill{
  display: inline-block;
  padding: 8px 12px;
  background: #9377d1;
  color: #fff;
  border-radius: 999px;
  border: 0;
  font-weight: 600;
  text-decoration: none;
}
.front-page .btn-pill:visited{ color:#fff; }

.front-page .btn-pill.is-outline{
  background: transparent;
  color: #fff;
  box-shadow: 0 0 0 2px #9377d1 inset;
}
.front-page .btn-pill.is-outline:visited{ color:#fff; }

/* Sections */
.front-page .page-section.is-home{
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
  padding: 32px 40px 40px;
  box-sizing: border-box;
}

/* Shortcuts */
.front-page .home-nav{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 900px){
  .front-page .home-nav{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.front-page .home-nav__item{
  display:block;
  padding: 14px;
  border-radius: 16px;
  text-decoration: none;
  background: rgba(147, 119, 209, 0.14);
  box-shadow: 0 0 0 1px rgba(147, 119, 209, 0.35) inset;
}
.front-page .home-nav__en{
  display:block;
  font-weight:700;
  letter-spacing:0.12em;
  color:#fff;
}
.front-page .home-nav__jp{
  display:block;
  margin-top:6px;
  font-size:12px;
  color: rgba(255,255,255,0.78);
}

/* Event cards */
.front-page .card-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 900px){
  .front-page .card-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.front-page .card{
  border-radius: 16px;
  overflow:hidden;
  background: rgba(147, 119, 209, 0.10);
  box-shadow: 0 0 0 1px rgba(147, 119, 209, 0.25) inset;
}
.front-page .card__link{
  display:block;
  padding: 16px 16px 18px;
  text-decoration:none;
}
.front-page .card__meta{
  display:inline-block;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}
.front-page .card__title{
  margin: 10px 0 0;
  font-size: 16px;
  color: #fff;
}
.front-page .card__excerpt{
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
}

/* Gallery teaser */
.front-page .gallery-teaser{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 900px){
  .front-page .gallery-teaser{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.front-page .gallery-teaser__item{
  display:block;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset;
}

/* BBS list */
.front-page .list-simple{
  margin: 18px 0 0;
  padding: 0;
  list-style:none;
}
.front-page .list-simple__item + .list-simple__item{ margin-top:10px; }
.front-page .list-simple__link{
  display:flex;
  gap:12px;
  align-items: baseline;
  text-decoration:none;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}
.front-page .list-simple__date{
  font-size:12px;
  color: rgba(255,255,255,0.72);
  white-space:nowrap;
}
.front-page .list-simple__title{
  color:#fff;
  font-weight:600;
}

/* Section actions */
.front-page .section-actions{
  margin-top: 18px;
  text-align:center;
}
.front-page .muted{
  margin-top: 14px;
  color: rgba(255,255,255,0.72);
}

/* Bottom gap fix（旧: .post,.page を殺すより安全） */
.front-page.site-main{
  margin-bottom: 0 !important;
  padding: 0 30px;
}
.front-page .page-section:last-of-type{
  margin-bottom: 0;
}

/* =========================
   PAGE HERO (共通)
========================= */

.page-hero {
  text-align: center;
  padding: 60px 20px;
}

.page-hero__title {
  text-align: center;
  font-size: 52px;          /* 見出しSYSTEM */
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow:
    0 0 7px rgba(255,255,255,0.85),
    0 0 14px rgba(255,255,255,0.65); /* 光彩の擬似再現 */
}

.page-hero__subtitle {
  margin-top: 15px;
  font-size: 14px;
  letter-spacing: 0.25em;
}

/* =========================
   PAGE SECTION (共通)
========================= */

.page-section {
  max-width: 900px;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-section.is-system {
  margin: 0 auto 70px;
  backdrop-filter: blur(2px);
}

.page-section.is-gallery {
  margin: 0 auto 120px;
  padding: 40px 40px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
}

.page-section__title {
  text-align: center;
  margin: 0 0 40px;
  font-size: 18px;
  letter-spacing: 0.22em;
  filter: drop-shadow(3px 3px 6px black);
}

/* =========================
   SYSTEM PAGE
========================= */



.system-page {
  background: url("/wp-content/uploads/system-bg.jpg") center / cover no-repeat fixed;
  color: #fff;
  padding: 0 30px;
}


/* =========================
   料金システム
========================= */

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*column-gap: 24px;*/
}

.price-box {
  background: rgba(0,0,0,0.85);
  padding: 0;
  box-sizing: border-box;
}

.price-box.female {
  background: var(--dark-purple);
}

.price-head {
  text-align: left;
  font-weight: 600;
  padding: 30px;
  font-size: 24px;
  letter-spacing: 0.16em;
  color: var(--right-purple);
}

.price-box.male .price-label {
  color: var(--right-purple);
}

.price-box.female .price-label {
  color: var(--right-purple);
}

.price-box ul {
  list-style: none;
  padding: 0 30px 20px;
  margin: 0;
}

.price-item {
  margin-bottom: 18px;
}

.price-label {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.9;
}

.price-value {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 700;
}

.notice {
  display: block;
  font-size: 12px;
  line-height: 2;
  font-family: 'Zen Kaku Gothic New' !important;
  opacity: 0.9;
}

.price-box li {
  align-items: baseline;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.6;
}

.price-box li span {
  max-width: 100%;
}

.price-box li strong {
  font-size: 30px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.2em;
  letter-spacing: 0.05em;
}

/* =========================
   営業時間
========================= */

.time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*column-gap: 24px;*/
}

.time-box {
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  padding: 30px;
  box-sizing: border-box;
}

.time-box.day {
  background: var(--dark-purple);
}

.time-box .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-right: 18px;
  font-size: 28px;
}

.time-icon {
  width: clamp(70px,15vw,130px);
  height: clamp(70px,15vw,130px);
  margin-right: 18px;
  flex-shrink: 0;
}

.time-box p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}

.time-box p strong {
  display: inline-block;
  margin-top: 4px;
  font-size: 30px;
  line-height: 1.1em;
  letter-spacing: 0.05em;
}

/* ---- TIME COLOR FIX ---- */

/* 昼の部 */
.time-box.day p {
  color: var(--right-purple); /* 昼ラベル */
}

/* 夜の部 */
.time-box.night p {
  color: var(--right-purple); /* 夜ラベル */
}

.time-box.day p strong,
.time-box.night p strong {
  color: #fff; /* 時間は白 */
}


/* =========================
   サービス内容
========================= */

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /*column-gap: 24px;*/
  margin-bottom: 120px;
}

.service-box {
  background: rgba(0,0,0,0.85);
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.service-box.free-drink {
  /*background: var(--dark-purple);*/
}

.service-box.smoking {
  background: var(--dark-purple);
}

/* フリータイム・フリードリンク用アイコン */
.service-icon {
  width: clamp(70px,15vw,120px);
  height:clamp(70px,15vw,120px);
  margin-right: 18px;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.service-grid .service-box:first-child h3 {
  color: var(--right-purple);
}

.service-grid .service-box:last-child h3 {
  color: var(--right-purple);
}


.price-box.female .price-head {
  background: var(--dark-purple);
  color: #fff;
}

.service-box h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.service-box.free-drink h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.service-box p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.service-text {
  flex: 1;
}

.service-title {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.4;
}

.service-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.9;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {
  .page-section {
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: 45px 0 20px;
  }

  .page-hero__title {
    font-size: 38px;
    letter-spacing: 0.16em;
  }

  .page-hero__subtitle {
    font-size: 12px;
  }

  .time-box {
    padding: 18px 16px;
  }

  .service-box {
    padding: 20px 30px 30px;
  }
  .price-box li strong {
    font-size: 24px;
  }
  .time-box p strong {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .price-grid,
  .time-grid,
  .service-grid {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
}

/* =========================
   GALLERY PAGE
========================= */

.gallery-page {
  padding: 0 30px;
}

/* Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* 1:1 強制 */
.gallery-item {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* LIGHTBOX */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.gallery-lightbox img {
  max-width: 85%;
  max-height: 85%;
}

.gallery-lightbox.active {
  display: flex;
}

/* Nav */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  padding: 10px 14px;
  line-height: 1;
}

.lightbox-nav:hover {
  opacity: 0.6;
}

.gallery-lightbox:hover .lightbox-nav {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
}

/* =========================
   GALLERY : Mobile 2 Columns
========================= */

@media screen and (max-width: 767px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media screen and (max-width: 420px) {
  .gallery-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
  }
}

/* =========================
   Q&A PAGE（FULL）
   scope: .qanda-page / .page-section.is-qa
========================= */

/* ページ全体トーン（必要なら。不要なら削除OK） */
.qanda-page {
  background: #000;
  color: #fff;
  padding: 0 30px;
}

/* -------------------------
   SECTION（共通骨格 + QA識別子）
------------------------- */

.qanda-page .page-section.is-qa {
  margin: 20 auto 120px;
  padding: 40px 40px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
}

/* -------------------------
   ACCORDION（部品）
------------------------- */

.qanda-page .page-section.is-qa .qa-accordion {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.qanda-page .page-section.is-qa .qa-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* 質問ボタン */
.qanda-page .page-section.is-qa .qa-question {
  width: 100%;
  padding: 18px 0;
  background: transparent;
  border: none;
  cursor: pointer;

  display: flex;
  align-items: flex-start;
  gap: 16px;

  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
}

/* フォーカス可視化（キーボード操作用） */
.qanda-page .page-section.is-qa .qa-question:focus {
  outline: none;
}

.qanda-page .page-section.is-qa .qa-question:focus-visible {
  outline: 2px solid rgba(147, 119, 209, 0.85);
  outline-offset: 4px;
}

/* Qラベル */
.qanda-page .page-section.is-qa .qa-q {
  min-width: 2.8em;
  font-weight: 700;
  color: #9377d1;
}

/* 質問文 */
.qanda-page .page-section.is-qa .qa-qtext {
  flex: 1;
}

/* トグル（+ / -） */
.qanda-page .page-section.is-qa .qa-toggle {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
}

.qanda-page .page-section.is-qa .qa-toggle::before,
.qanda-page .page-section.is-qa .qa-toggle::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 12px;
  height: 1.5px;
  background: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

/* 縦線（閉じているときは表示） */
.qanda-page .page-section.is-qa .qa-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたら縦線を消して「-」にする */
.qanda-page .page-section.is-qa .qa-item.is-open .qa-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

/* 回答 */
.qanda-page .page-section.is-qa .qa-answer {
  padding: 0 0 20px 0;
  margin-left: calc(2.8em + 16px);
  color: #ddd;
  font-size: 14px;
  line-height: 1.9;
}

.qanda-page .page-section.is-qa .qa-answer p {
  margin: 0;
}

/* -------------------------
   RESPONSIVE
------------------------- */

@media (max-width: 768px) {
  .qanda-page .page-section.is-qa {
    padding-top: 20px;
    padding-bottom: 60px;
  }

  .qanda-page .page-section.is-qa .qa-question {
    padding: 16px 0;
  }

  .qanda-page .page-section.is-qa .qa-answer {
    margin-left: calc(2.8em + 12px);
  }
}

/* =========================
   RECRUIT PAGE
========================= */
.recruit-page{
  padding: 0 30px;
}

.page-section.is-bbs-top,
.page-section.is-qa,
.page-section.is-contact {
  margin: 0 auto 120px;
  padding: 40px 40px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
}

.recruit-page .page-hero__catch{
  margin-top: 14px;
  line-height: 1.9;
}

.recruit-page .recruit-specs__list{
  margin: 0;
}

.recruit-page .recruit-specs__row{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.recruit-page .recruit-specs__row dt{
  margin: 0;
  color: #9377d1;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.recruit-page .recruit-specs__row dd{
  margin: 0;
}

@media (max-width: 700px){
  .recruit-page .recruit-specs__row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* =========================
   RECRUIT PAGE - HERO CATCH
========================= */

.recruit-page .page-hero__catch{
  margin: 60px auto 30px;
  padding: 40px 40px;
  display: inline-block;
  text-align: center;
  width: 100%;
  max-width: 900px;
  background: rgba(98, 72, 155, 0.82);
  backdrop-filter: blur(2px);
}

.recruit-page .page-hero__catch-lead{
  margin: 0;
  font-size: 24px; /* ここで大きさ調整 */
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

.recruit-page .page-hero__catch-text{
  margin: 10px 0 0;
  font-size: 16px; /* 指定どおり */
  line-height: 1.9;
}

/* スマホで少し締める（任意） */
@media (max-width: 420px){
  .recruit-page .page-hero__catch{
    padding: 30px;
  }
  .recruit-page .page-hero__catch-lead{
    font-size: 22px;
  }
  .recruit-page .page-hero__catch-text{
    font-size: 14px;
    line-height: 1.7;
  }
}

/* =========================
   CONTACT
========================= */

.contact-page .contact-form {
  max-width: 720px;
  margin: 0 auto;
}

.contact-page .wpcf7 form {
  display: grid;
  gap: 14px;
}

.contact-page .wpcf7 input[type="text"],
.contact-page .wpcf7 input[type="email"],
.contact-page .wpcf7 input[type="tel"],
.contact-page .wpcf7 textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #9377d1;
  border-radius: 0;
  background: #000;
  color: #fff;
  box-sizing: border-box;
  font-family: 'Zen Kaku Gothic New' !important;
}

.contact-page .wpcf7 textarea {
  min-height: 180px;
  resize: vertical;
}

.contact-page .wpcf7 input[type="submit"] {
  padding: 12px 18px;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 999px;
  background: transparent;
  color: #000;
  cursor: pointer;
}

.contact-page .wpcf7 .wpcf7-not-valid-tip,
.contact-page .wpcf7 .wpcf7-response-output {
  font-size: 14px;
}

/* =========================
   CONTACT - submit button fix
========================= */

/* 1) クリップ対策：下が切れないようにする */
.contact-page{
  padding: 0 30px;
}
.contact-page .page-section,
.contact-page .page-section__inner,
.contact-page .contact-form,
.contact-page .wpcf7,
.contact-page .wpcf7 form {
  overflow: visible;
}

/* フッターや背景の都合で下が詰まりやすいので余白を確保 */
.contact-page .page-section.is-contact {
  padding-bottom: 40px;
}

/* 2) “見えない”対策：送信ボタンを確実に視認できる見た目に */
.contact-page .wpcf7 input[type="submit"] {
  display: block;
  margin: 0 auto;
  width: auto;
  justify-self: start;
  background: #9377d1;
  color: #fff;
  padding: 20px 30px;
  font-weight: bold;
}

.wpcf7-spinner {
  display: none;
}

.wpcf7 form.sent .wpcf7-response-output {
  border: unset !important;
  background: var(--dark-purple);
  text-align: center;
  padding: 15px;
  margin: 0;
  opacity: 0.9;
}

/* 既存の input/textarea に select を追加 */
.contact-page .wpcf7 input[type="text"],
.contact-page .wpcf7 input[type="email"],
.contact-page .wpcf7 input[type="tel"],
.contact-page .wpcf7 textarea,
.contact-page .wpcf7 select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #9377d1;
  border-radius: 0;
  background: #000;
  color: #fff;
  box-sizing: border-box;
}

.contact-page .wpcf7 select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;

  /* 右側の矢印スペース分を確保 */
  padding-right: 44px;

  /* 矢印（シンプルな▼） */
  background-image:
    linear-gradient(45deg, transparent 50%, #fff 50%),
    linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position:
    right 20px center,
    right 12px center;
  background-size:
    8px 8px,
    8px 8px;
  background-repeat: no-repeat;
}

/* =========================
   CONTACT - label spacing
========================= */

/* ラベル（テキスト）と入力フィールドの間を 15px */
.contact-page .wpcf7 label {
  display: block;
 /* margin: 0 0 15px;*/
}

/* CF7の構造によっては label が無いケースもあるので保険 */
.contact-page .wpcf7 .wpcf7-form-control-wrap {
  display: block;
  margin-top: 15px; /* ラベル直下の入力を必ず 15px 下げる */
}

@media (max-width: 420px) {
  .page-section.is-bbs-top,
  .page-section.is-qa,
  .page-section.is-contact {
    padding: 40px 30px;
  }
  .contact-page .wpcf7 label {
    font-size: 12px;
  }
  .contact-page .wpcf7 .wpcf7-form-control-wrap {
    margin-top: 10px;
  }
  .contact-page .wpcf7 select {
    font-size: 13px;
  }
}

/* Welcome */
.page-section.is-home.is-home-welcome {
  padding: 0 0 60px;
}
h2.page-hero__title {
  font-size: 40px;
}
.home-welcome {
  background: rgba(0, 0, 0, 0.85) !important;
}

.front-page .home-welcome p{
  margin: 0;
  color: rgba(255,255,255,1);
  line-height: 1.9;
  font-size: 15px;
  padding: 60px;
}

/* News list */
.front-page .home-news{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.front-page .home-news__item + .home-news__item{
  margin-top: 10px;
}

.front-page .home-news__link{
  display: flex;
  gap: 12px;
  align-items: baseline;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.85);
}

.front-page .home-news__date{
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

.front-page .home-news__title{
  color: #fff;
  font-weight: 600;
}

.front-page .muted{
  margin-top: 14px;
  color: rgba(255,255,255,0.75);
}

.page-section.is-home.is-home-news {
  background: rgba(0, 0, 0, 0.55);
  padding: 60px;
}


/* =========================
   NEWS page (simple list)
========================= */

.page-section.is-home.is-home-news {
  padding-bottom: 30px;
}
.news-page .news-list{
  display: grid;
  gap: 22px;
}

.news-page .news-item{
  margin: 0;
  padding: 60px;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(2px);
  color: #fff;
}

.news-page .news-item__date{
  display: inline-block;
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 6px;
}

.news-page .news-item__title{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
}

.news-page .news-item__content p{
  margin: 0 0 12px;
}

.news-page .news-item__content p:last-child{
  margin-bottom: 0;
}

@media (max-width: 781px){
  .news-page .news-item{
    padding: 18px 16px;
  }
  .news-page .news-item__title{
    font-size: 18px;
  }
}

/* =========================
   Google Map (full width / 25vh)
========================= */

.page-section.is-home.is-home-access {
  padding-bottom: 0;
}

/* コンテナ(900px)の外に“フルブリード”で出す */
.fs-fullbleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* マップ iframe */
.fs-map-iframe{
  width: 100%;
  height: 60vh;
  border: 0;
  display: block;
}

/* 任意：スマホで低すぎる場合の保険（不要なら消してOK） */
/* @media (max-width: 781px){
  .fs-map-iframe{ min-height: 220px; }
} */

/* =========================
   Google Map : grayscale + multiply tint
========================= */
.fs-map{
  position: relative;
}

/* 1) iframeをグレースケール化（＋少し整える） */
.fs-map .fs-map-iframe{
  filter: grayscale(1) contrast(1.05) brightness(1);
}

/* 2) 紫(#9377d1)を乗算で被せる */
@supports (mix-blend-mode: multiply){
  .fs-map::after{
    content:"";
    position:absolute;
    inset:0;
    background:#9377d1;
    mix-blend-mode:overlay;
    opacity:1;          /* 強さ：0.35〜0.7で調整 */
    pointer-events:none;
  }
}

/* =========================
   Anchor jump smooth scroll
========================= */
html{
  scroll-behavior: smooth;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
/* =========================
   Anchor highlight (simple)
========================= */
@keyframes fsAnchorGlow {
  0%   { box-shadow: 0 0 0 rgba(147,119,209,0); }
  30%  { box-shadow: 0 0 0 6px rgba(147,119,209,0.25); }
  100% { box-shadow: 0 0 0 rgba(147,119,209,0); }
}

.front-page #access:target{
  animation: fsAnchorGlow 900ms ease-out;
}

/* =========================
   Header nav: "Primary Menu" -> Hamburger (<=781px)
========================= */

/* まずはボタンの見た目を“3本線”に */
.main-navigation .menu-toggle{
  /* サイズ */
  width: 44px;
  height: 44px;

  /* 見た目 */
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.25);
  border-radius: 999px;

  /* 文字は見せない（SRには残る） */
  font-size: 0;
  line-height: 0;

  position: relative;
  cursor: pointer;
}

/* 3本線（閉じている状態） */
.main-navigation .menu-toggle::before{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow:
    0 -7px 0 currentColor,
    0  7px 0 currentColor;
}

/* 開いた時に×にするための2本目（普段は非表示） */
.main-navigation .menu-toggle::after{
  content:"";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* toggled（Underscoresの既存JSが付ける）で×へ */
.main-navigation.toggled .menu-toggle::before{
  box-shadow: none;
  transform: translate(-50%, -50%) rotate(45deg);
}
.main-navigation.toggled .menu-toggle::after{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* タブレット〜スマホ時だけボタンを表示し、メニューはトグル表示 */
@media (max-width: 781px){
  .main-navigation .menu-toggle{ display: inline-block; }

  /* メニュー本体は閉じている時は非表示（既存CSSがある場合は上書きになる） */
  .main-navigation ul{ display: none; }
  .main-navigation.toggled ul{ display: block; }

  /* 必要なら縦並びの見た目（任意） */
  .main-navigation ul{
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(2px);
  }
}

/* PCではハンバーガーを出さない（任意：既存挙動と違う場合だけ） */
@media (min-width: 782px){
  .main-navigation .menu-toggle{ display: none; }
  .main-navigation ul{ display: flex; gap: 18px; }
}

/* モバイルのドロワーメニュー展開中は装飾を非表示 */
@media (max-width: 781px){
  #masthead .main-navigation.toggled ~ .site-header__deco{
    display: none !important;
  }
}





/* =========================
   Sticky Header + Sticky Deco (overlay)
========================= */

/* ヘッダーをsticky（#masthead想定） */
#masthead{
  position: sticky;
  top: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.95); /* 透け不要なら #000 でもOK */
  overflow: visible;            /* 下にはみ出す装飾を見せる */
}

/* 装飾はレイアウトを押さない（オーバーレイ配置） */
#masthead .site-header__deco{
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(50px, 9vw, 80px);
  height: clamp(90px, 15vw, 180px);

  pointer-events: none;
  z-index: 10001;
  overflow: hidden;
}

/* 左 */
#masthead .site-header__deco::before{
  content:"";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(90px, 22vw, 280px);
  height: 100%;
  background: url("http://filtshibuya.com/wpcms/wp-content/uploads/2026/01/deco_jasmine-left.svg")
              left center / contain no-repeat;
}

/* 右 */
#masthead .site-header__deco::after{
  content:"";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(90px, 22vw, 280px);
  height: 100%;
  background: url("http://filtshibuya.com/wpcms/wp-content/uploads/2026/01/deco_jasmine-right.svg")
              right center / contain no-repeat;
}



/* =========================
   TOP Neon Title + Catch
========================= */

.front-page .home-neon-hero{
  --neon: #9377d1;
  text-align: center;
  padding: clamp(40px, 24vw, 120px) 20px clamp(20px, 10vw, 80px);
}

/* TITLE (Forum) */
.front-page .home-neon-hero__title{
  margin: 0 0 18px;
  font-family: "Forum","Sawarabi Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: clamp(40px, 7vw, 70px);
  letter-spacing: 0.12em;
  line-height: 1.0;
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.85), 0 0 14px rgba(255, 255, 255, 0.65);
  position: relative;
}

/* 追加の“発光にじみ”レイヤー（タイトルだけ強化） */
.front-page .home-neon-hero__title::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--neon);
  filter: blur(14px);
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
}

/* CATCH (Sawarabi Gothic) */
.front-page .home-neon-hero__catch{
  margin: 0;
  font-family: "Sawarabi Gothic","Forum",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: clamp(24px, 4vw, 48px);
  letter-spacing: 0.08em;
  line-height: 1.6;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 10px rgba(255, 255, 255, 0.65);
}

@media (max-width: 420px) {
  .front-page .home-neon-hero {
    padding: clamp(40px, 24vw, 120px) 0 clamp(20px, 10vw, 80px);
  }
}


/* =========================
  HOME
========================= */

/* BBS banner */
.front-page .home-banner.is-bbs{
  background: #ff8fff;
  /*box-shadow: 0 0 0 1px rgba(0,0,0,0.18) inset;*/
}

/* Text color -> black (指定に合わせる) */
.front-page .home-banner.is-event .home-banner__title-text,
.front-page .home-banner.is-bbs  .home-banner__title-text{
  color: #000;
}

/* Icon circle (黒系に合わせる) */
.front-page .home-banner.is-event .home-banner__icon,
.front-page .home-banner.is-bbs  .home-banner__icon{
  box-shadow: unset;
  /*margin-top: 10px;*/
}

.front-page .home-banner.is-event .home-banner__icon-fallback,
.front-page .home-banner.is-bbs  .home-banner__icon-fallback{
  color: #000;
}

/* Hover（紫の影を出さない） */
@media (hover: hover){
  .front-page .home-banner.is-event:hover,
  .front-page .home-banner.is-bbs:hover{
    transform: translateY(-1px);
    box-shadow:
      0 0 0 1px rgba(0,0,0,0.28) inset,
      0 10px 30px rgba(0,0,0,0.25);
    transition: transform .15s ease, box-shadow .15s ease;
  }
}

/* hover（必要最低限） */
@media (hover: hover){
  .front-page .home-banner:hover{
    box-shadow:
      0 0 0 1px rgba(147, 119, 209, 0.55) inset,
      0 10px 30px rgba(0,0,0,0.35);
    transform: translateY(-1px);
    transition: transform .15s ease, box-shadow .15s ease;
  }
}

/* =========================
  Banner Card
========================= */
.front-page .home-banner-grid{
  display: grid;
  gap: 14px;
}

.front-page .home-banner-grid--2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.front-page .home-banner-grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Mobile: 2col/3col ともに 1col で読みやすく */
@media (max-width: 781px){
  .front-page .home-banner-grid--2,
  .front-page .home-banner-grid--3{
    grid-template-columns: 1fr;
  }
  .front-page .page-section.is-home.is-home-banners.is-home-banners--2 .home-banner-grid--2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
  }
}

.front-page .home-banner{
  display: grid;
  /*align-items: center;*/
  /*justify-content: space-between;*/
  /*grid-template-columns: 1fr;*/
  /*align-content: normal;*/
  justify-items: center;
  text-align: center;
  /*position: relative;*/
  padding: 50px 34px 40px;
  gap: 14px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(2px);
  --frame-inner: #62489b;               /* 内枠色 */
  --outer-w: 3px;                       /* 外枠太さ */
  --inner-w: 3px;                       /* 内枠太さ */
  --inset: 18px;                        /* 外枠→内枠までの余白 */
  --cut: 20px;                          /* 角の“削り”半径 */
  border: var(--outer-w) solid var(--frame-outer);
  text-decoration: none;
  overflow: hidden;
}

/* 中身を枠より前に */
.front-page .home-banner > *{
  position: relative;
  z-index: 2;
}

/* hover / focus（キーボード操作も） */
@media (hover: hover){
  .front-page .home-banner{
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .front-page .home-banner:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.28);
  }
}
.front-page .home-banner:focus-visible{
  outline: 3px solid rgba(0,0,0,0.55);
  outline-offset: 3px;
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .front-page .home-banner{
    transition: none;
  }
}

/* 内側ライン（線＋角の丸い欠け） */
.front-page .home-banner::before{
  content:"";
  position: absolute;
  inset: var(--inset);
  pointer-events: none;
  z-index: 1;

  background:
    /* 上下左右の直線（角を cut 分だけ空ける） */
    linear-gradient(var(--frame-inner) 0 0)
      top center / calc(100% - (var(--cut) * 2)) var(--inner-w) no-repeat,
    linear-gradient(var(--frame-inner) 0 0)
      bottom center / calc(100% - (var(--cut) * 2)) var(--inner-w) no-repeat,
    linear-gradient(var(--frame-inner) 0 0)
      center left / var(--inner-w) calc(100% - (var(--cut) * 2)) no-repeat,
    linear-gradient(var(--frame-inner) 0 0)
      center right / var(--inner-w) calc(100% - (var(--cut) * 2)) no-repeat,

    /* 4隅の“丸い欠け”を縁取りする弧（1/4リング） */
    radial-gradient(circle at top left,
      transparent calc(var(--cut) - var(--inner-w)),
      var(--frame-inner) calc(var(--cut) - var(--inner-w)) var(--cut),
      transparent calc(var(--cut) + 0.5px)
    ) top left / calc(var(--cut) * 2) calc(var(--cut) * 2) no-repeat,

    radial-gradient(circle at top right,
      transparent calc(var(--cut) - var(--inner-w)),
      var(--frame-inner) calc(var(--cut) - var(--inner-w)) var(--cut),
      transparent calc(var(--cut) + 0.5px)
    ) top right / calc(var(--cut) * 2) calc(var(--cut) * 2) no-repeat,

    radial-gradient(circle at bottom left,
      transparent calc(var(--cut) - var(--inner-w)),
      var(--frame-inner) calc(var(--cut) - var(--inner-w)) var(--cut),
      transparent calc(var(--cut) + 0.5px)
    ) bottom left / calc(var(--cut) * 2) calc(var(--cut) * 2) no-repeat,

    radial-gradient(circle at bottom right,
      transparent calc(var(--cut) - var(--inner-w)),
      var(--frame-inner) calc(var(--cut) - var(--inner-w)) var(--cut),
      transparent calc(var(--cut) + 0.5px)
    ) bottom right / calc(var(--cut) * 2) calc(var(--cut) * 2) no-repeat;
}

.front-page .home-banner__main{
  min-width: 0;
  padding: 0 24px;
  word-break: auto-phrase;
}

.front-page .home-banner__title-text{
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #fff;
  font-size: 18px;
}

.front-page .home-banner__title-svg{
  display: block;
  width: min(240px, 100%);
  max-width: 220px;
  height: 32px;
  margin: 0 auto 10px;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.3));
}

.front-page .is-home-banners--3 .home-banner__title-svg{
  height: 24px;
}

.front-page .home-banner__text{
  margin: 10px 0 0;
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin: 1em 0 0;
  line-height: 1.35;
}

.front-page .is-home-banners--3 .home-banner__text {
  font-size: 14px;
}

.front-page .home-banner__icon{
  flex: 0 0 auto;
  display: flex;
  place-items: center;
  width: 180px;
  height: 100px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(147, 119, 209, 0.45) inset;
  justify-content: center;
  padding: 0 6px;
}

.home-banner-grid.home-banner-grid--3 .home-banner__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(147, 119, 209, 1) inset;
  margin-top: 10px;
}

.front-page .home-banner__icon-svg{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

.front-page .home-banner__icon-fallback{
  color: #fff;
  font-weight: 800;
}

.front-page .page-section.is-home {
    background: unset;
    backdrop-filter: unset;
    padding: 60px 0 0;
    box-sizing: border-box;
}

.page-section.is-todays-event.todays-event {
  margin-top: 90px;
  padding: 0 30px;
}

.front-page .home-banner.is-event{
  background: rgba(0, 0, 0, 0.85);
  --frame-inner: #62489b;
}

.front-page .home-banner.is-bbs{
  background: #432c78;
  --frame-inner: #9377d1;
  box-shadow: unset;
}

@media (max-width: 781px){
  .front-page .home-banner{
    aspect-ratio: auto;
    /*min-height: 240px;*/
    --inset: 12px;
    --cut: 15px;
    padding: 50px 20px 30px;
  }
}

@media (max-width: 768px) {
  .front-page .home-banner{
    align-content: center;
  }
  .front-page .home-banner-grid.home-banner-grid--3 .home-banner{
    display: inline-block;
	min-height: 140px;
    padding: 40px 0;
	margin: 0 30px;
  }
  .front-page .home-banner__icon{
    width: 150px;
    height: 80px;
  }
  .home-banner-grid.home-banner-grid--3 .home-banner__icon {
    display:none;
  }
  .front-page .home-banner__title-svg {
    height: 35px;
  }
  .front-page .home-banner__text {
    font-size: 15px;
  }
}

@media (max-width: 420px){
  h2.page-hero__title {
    font-size: 24px;
     margin: 1em 0
  }
  .front-page .home-banner{
    padding: 40px 0 20px;
	gap: 0;
    --inset: 10px;
    --cut: 15px;
    --outer-w: 2px;
    --inner-w: 2px;
  }
  
  .front-page .page-section.is-home {
    padding: 60px 0 0;
  }

  .page-section.is-home.is-home-welcome {
    padding: 60px 0;
  }

  .front-page .home-banner-grid.home-banner-grid--3 .home-banner{
	margin: 0 30px;
	padding: 30px 0
  }
  .front-page .home-banner__title-svg{
    height: 20px !important;
	margin: 0 auto;
  }
  .front-page .home-banner__text{
    font-size: 12px;
	padding: 0;
  }
  .front-page .home-banner__icon{
    width: 120px;
    height: 90px;
  }
  .front-page .home-welcome p {
    padding: 30px;
  }
  .front-page .home-news__title {
    font-weight: 400;
    font-size: 14px;
  }
}

/* =========================
   BBS TOP: terms list
========================= */
.bbs-top-page {
  padding: 0 30px;
}
.bbs-top-page .section-title {
  color: var(--purple);
  margin: 10px 0 30px;
}
.bbs-top-page .bbs-terms__lead{
  margin: 0 0 16px;
  line-height: 1.5;
}

.bbs-top-page .bbs-terms__list{
  margin: 0 0 40px 0;
  padding: 0 0 0 30px;
  line-height: 1.5;
  font-size: 14px;
}

.bbs-top-page .bbs-terms__list li{
  margin: 0 0 12px;
}

.bbs-top-page .bbs-terms__list li:last-child{
  margin-bottom: 0;
}

.bbs-top-page .bbs-terms__note{
  display: inline-block;
  margin-left: 6px;
  opacity: 0.9;
}

@media (max-width: 420px){
  .page-section.is-bbs-top {
    padding: 30px;
  }
  .bbs-top-page .section-title {
    font-size: 20px;
  }
  .bbs-top-page .bbs-terms__list{
    padding: 0 0 0 15px;
  }
}

/* =========================
   BBS TOP: Agree button (pill style)
========================= */

.bbs-top-page .bbs-terms__btn--agree{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2em;
  border-radius: 9999px;
  background: #8b76cd; /* 必要なら #9377d1 に変更 */
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
}

/* 中央寄せ（親がflexでも崩れない保険） */
.bbs-top-page .bbs-terms__actions,
.bbs-top-page .bbs-form__actions--center{
  display: flex;
  justify-content: center;
}

/* hover/active */
@media (hover:hover){
  .bbs-top-page .bbs-terms__btn--agree:hover{ filter: brightness(1.06); }
}
.bbs-top-page .bbs-terms__btn--agree:active{ transform: translateY(1px); }


/* =========================
   BBS Toolsbar buttons (match screenshot)
========================= */

/* 2列の枠（スクショの太枠） */
.page-bbs .bbs-toolsbar{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 18px 0 0;
  border: 0;
  box-sizing: border-box;
}

/* 右ボタンの仕切り線 */
.page-bbs .bbs-toolbtn + .bbs-toolbtn{
  border-left: 0;
}

/* ボタン本体 */
.page-bbs .bbs-toolbtn{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  /*border-radius: 20px 20px 0 0;*/
  background: var(--dark-purple);
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 18px 20px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

/* 開いてる側だけ “少しだけ濃く” */
.page-bbs .bbs-toolbtn.is-open{
  background: var(--purple);;
  /*border-radius: 20px 20px 0 0;*/
}

/* hover（PCのみ） */
@media (hover:hover){
  .page-bbs .bbs-toolbtn:hover{
    background: var(--purple);
  }
}

/* ▼ / ▲（スクショの細い矢印） */
.page-bbs .bbs-toolbtn__chev{
  width: 9px;
  height: 9px;

  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;

  transform: rotate(45deg); /* ▼ */
  transition: transform .18s ease;
  margin-left: 12px;
}

/* open時は ▲ */
.page-bbs .bbs-toolbtn.is-open .bbs-toolbtn__chev{
  transform: rotate(-135deg);
}

/* ドロワー（上段ボタンの直下に繋がる枠） */
.page-bbs .bbs-tooldrawer{
  border-top: 4px solid #9377d1;
  border-left: 4px solid #9377d1;
  border-right: 4px solid #9377d1;
  border-bottom: 4px solid #9377d1;
  background: 0;
  padding: 0;
  margin-bottom: 30px;
  box-sizing: border-box;
}

/* 中身は max 900 中央寄せ（仕様） */
.page-bbs .bbs-tooldrawer__inner{
  max-width: 900px;
  margin: 0 auto;
}

/* panel skin（中の黒半透明） */
.page-bbs .bbs-tooldrawer .bbs-panel{
  background: rgba(0,0,0,0.6);
  padding: 22px;
  margin: 0;
  box-sizing: border-box;
  /*border-radius: 0 0 20px 20px;*/
}

/* モバイル調整 */
@media (max-width: 480px){
  .page-bbs .bbs-toolbtn{
    padding: 12px 12px;
    min-height: 44px;
    font-size: 12px;
  }
  .page-bbs .bbs-tooldrawer{
    padding: 0;
  }
  .page-bbs .bbs-tooldrawer .bbs-panel{
    padding: 0;
  }
}

.page-bbs-single .bbs-backto{
  margin: 14px 0 22px;
  text-align: center;
}

/* =========================
　　最終調整
========================= */

/* =========================
   iOS Safari: home-banner ::before frame fix
========================= */

.front-page .home-banner{
  position: relative;     /* ← ::before の基準を固定 */
  isolation: isolate;     /* ← iOSの重なり事故を防ぐ */
  z-index: 0;             /* ← -1運用を避ける土台 */
}

/* 既存の ::before が z-index:-1 なら、ここで確実に前に出す */
.front-page .home-banner::before{
  z-index: 0;
  pointer-events: none;
}

/* 中身を枠より前面に */
.front-page .home-banner > *{
  position: relative;
  z-index: 1;
}

/* =========================
   HOME: iPhone11(414px) 対策
   - 3バナー内の main を上下中央に固定
========================= */

@media (max-width: 480px) {
  .front-page .home-banner-grid.home-banner-grid--3 .home-banner{
    display: flex;           /* 土台を固定 */
    flex-direction: column;
  }

  .front-page .home-banner-grid.home-banner-grid--3 .home-banner__main{
    flex: 1;                 /* 余白を受ける */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 上下中央 */
    min-height: 0;           /* iOSのflex崩れ保険 */
  }
}