/*
Theme Name: HSZB
Theme URI: https://example.com/
Author: Luis
Author URI: https://example.com/
Description: Minimal clean starter WordPress theme.
Version: 0.1.0
Requires at least: 5.2
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: hszb
*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Zen+Old+Mincho:wght@400;700&display=swap');

/* Design Tokens */
:root {
	--dark1: #202020;
	--dark2: #404040;
	--dark3: #707070;
	--light1: #eee;
	--light2: #e6e6e6;
	--gold1: #8D6E09;
	--gold2: #423302;
	--gold3: #7F4F00;
	--gold4: #755828;
}

/* Minimal base styles */
html {
	box-sizing: border-box;
}

/* Lenis Recommended CSS */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	line-height: 1.6;
	font-family: "Zen Old Mincho", serif;
	color: var(--gold2);
}

strong {
	font-family: "Zen Old Mincho", serif;
	font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
}

/* Body background for Pages and Posts */
body.page {
	background-color: hsla(323, 100%, 97%, 1);
	background-image:
		url('/img/bg_tiles_light.webp'),
		radial-gradient(at 19% 18%, hsla(231, 100%, 98%, 1) 0px, transparent 50%),
		radial-gradient(at 45% 96%, hsla(280, 100%, 98%, 1) 0px, transparent 50%),
		radial-gradient(at 0% 15%, hsla(36, 100%, 71%, 1) 0px, transparent 50%);
	background-position: top center, center;
	background-repeat: repeat-x, no-repeat;
}

body.home {
	background-color: hsla(323, 100%, 97%, 1);
	background-image:
		radial-gradient(at 19% 18%, hsla(231, 100%, 98%, 1) 0px, transparent 50%),
		radial-gradient(at 45% 96%, hsla(280, 100%, 98%, 1) 0px, transparent 50%),
		radial-gradient(at 0% 15%, hsla(36, 100%, 71%, 1) 0px, transparent 50%) !important;
}

body.page-slug-class,
body.page-parent-class,
body.page-slug-studio,
body.page-parent-studio {
	background-image:
		url('/img/bg_tiles_light.webp'),
		radial-gradient(at 97% 8%, hsla(0, 100%, 94%, 1) 0px, transparent 50%),
		radial-gradient(at 9% 81%, hsla(266, 100%, 97%, 1) 0px, transparent 50%),
		radial-gradient(at 53% 10%, hsla(316, 100%, 97%, 1) 0px, transparent 50%),
		radial-gradient(at 24% 36%, hsla(323, 100%, 98%, 1) 0px, transparent 50%);
}

body.page-slug-honma-makiko {
	background-image:
		url('/img/image-hero_honma-makiko.webp'),
		radial-gradient(at 97% 8%, hsla(0, 100%, 94%, 1) 0px, transparent 50%),
		radial-gradient(at 9% 81%, hsla(266, 100%, 97%, 1) 0px, transparent 50%),
		radial-gradient(at 53% 10%, hsla(316, 100%, 97%, 1) 0px, transparent 50%),
		radial-gradient(at 24% 36%, hsla(323, 100%, 98%, 1) 0px, transparent 50%);
	background-repeat: no-repeat;
	background-position-x: 15%;
	background-size: inherit;
}

@media screen and (min-width:900px) {
	body.page-slug-honma-makiko {
		background-size: contain;
	}
}

body.page-slug-gallery,
body.page-parent-gallery {
	background-image:
		url('/img/bg_tiles_light.webp'),
		linear-gradient(150deg, #C9D5DE 0%, #E1DFFF 10%, #E3C9DA 20%,
			#FDF1DF 30%, #F1E6EC 40%, #EBD9F8 50%, #F3E2FF 60%, #FFE8FE 70%,
			#FFDDFB 80%, #FFDFD0 100%);
}

body.single,
body.blog,
body.archive {
	background-color: hsla(323, 100%, 97%, 1);
	background-image:
		url('/img/bg_tiles_light.webp'),
		radial-gradient(at 100% 0%, hsl(0, 70%, 87%) 0px, transparent 50%),
		radial-gradient(at 100% 100%, hsl(340, 74%, 82%) 0px, transparent 50%),
		radial-gradient(at 0% 100%, hsl(22, 100%, 77%) 0px, transparent 50%),
		radial-gradient(at 0% 0%, hsl(343, 100%, 87%) 0px, transparent 50%);
	background-position: top center, center;
	background-repeat: repeat-x, no-repeat;
}

a {
	color: inherit;
}

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

p {
	line-height: 1.8;
	font-size: clamp(1rem, 2.4vw, 1rem);
}

main {
	padding: 1rem;
}

.font-pinyon {
	font-family: "Pinyon Script", serif;
	font-weight: 400;
}

.font-mincho {
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
}

.font-bold {
	font-weight: bold;
}


/* Utilities */
.container {
	width: 100%;
	/* Extra small (<576px) */
	margin: 0 auto;
	padding: 0 16px;
}

/* 画面幅いっぱいのコンテナ（Bootstrapのcontainer-fluid相当） */
.container-fluid {
	width: 100%;
	margin: 0;
	padding: 0 16px;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

.section {
	padding: 8rem 0;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.text-center {
	text-align: center;

	img {
		margin: 0 auto;
	}
}


/* Generic Utilities */
.w-100 {
	width: 100%;
}

.h-50vh {
	min-height: 50vh;
}

.relative {
	position: relative;
}

.overflow-hidden {
	overflow: hidden;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bg-cover {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.overlay-blur {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(4px);
	z-index: 1;
}

.z-10 {
	position: relative;
	z-index: 10;
}

.bg-parallax-layer {
	position: absolute;
	top: -10%;
	left: 0;
	width: 100%;
	height: 120%;
	z-index: 0;
	pointer-events: none;
}

/* Header */
.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	transition: background 0.3s ease, color 0.3s ease;
}

.header::before {
	position: absolute;
	background: linear-gradient(-270deg, rgb(232, 203, 189) 0%, rgb(227, 197, 223) 10%, rgb(210, 186, 202) 20%, rgb(253, 216, 223) 30%, rgb(241, 213, 236) 40%, rgb(202, 197, 229) 50%, rgb(227, 211, 238) 65%, rgb(227, 197, 223) 80%, rgb(232, 203, 189) 100%);
	content: "";
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
	transition: all 0.2s ease-out;
	z-index: 1;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 2;
}

.header--transparent {
	background: transparent;
	color: #fff;
	padding: 0.5rem 1rem;
}

.header--transparent .nav-list .nav-link {
	color: #fff;
}

.header--scrolled {
	color: var(--gold1);
	background: transparent;
	transform: translateY(0);
	padding: 0.5rem 1rem;
	opacity: 0.88;
}

.header--scrolled::before {
	position: absolute;
	background: linear-gradient(-270deg, rgb(232, 203, 189) 0%, rgb(227, 197, 223) 10%, rgb(210, 186, 202) 20%, rgb(253, 216, 223) 30%, rgb(241, 213, 236) 40%, rgb(202, 197, 229) 50%, rgb(227, 211, 238) 65%, rgb(227, 197, 223) 80%, rgb(232, 203, 189) 100%);
	content: "";
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 1;
	transition: all 0.2s ease-out;
	z-index: 1;
}

.brand-logo {
	height: 30px;
	width: auto;
}

@media (min-width: 900px) {
	.header--transparent {
		padding: 0 1rem;
	}

	.header--scrolled {
		padding: 0 1rem;
	}

	.brand-logo {
		height: 40px;
	}
}

.main-navigation {
	display: none;
}

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.nav-list .nav-link {
	display: inline-block;
	padding: 22px 10px;
	font-family: "Zen Old Mincho", serif;
	font-size: .95rem;
	position: relative;
	overflow: hidden;
	z-index: 1;
	text-decoration: none;
}

.nav-list .nav-link::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #bbbbbb;
	/* ホバー時の背景色 */
	z-index: -1;
	/* テキストの後ろに配置 */
	opacity: 0;
	/* 初期状態では透明 */
	transition: opacity 0.1s ease-out;
	/* アニメーション */
}

.nav-list .nav-link:hover::before {
	opacity: 1;
	/* ホバー時に表示 */
}

.nav-list li {
	position: relative;
	/* サブメニューの基準位置 */
}

.submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	/* 親リンクの下に配置 */
	left: 0;
	background-color: #f0f0f0;
	/* サブメニューの背景色 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	/* 影 */
	min-width: 180px;
	/* サブメニューの最小幅 */
	z-index: 1000;
	/* 他の要素の上に表示 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	/* 最初は少し下にずらしておく */
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
	/* アニメーション */
}

.nav-list li.has-submenu:hover .submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	/* ホバー時に元の位置に戻す */
}

.submenu li {
	display: block !important;
}

.submenu li a {
	display: block;
	padding: 10px 15px;
	color: var(--dark1);
	font-family: "Zen Old Mincho", serif;
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
	/* テキストの折り返しを防ぐ */
}

.submenu li a:hover {
	background-color: #e0e0e0;
	/* サブメニューアイテムのホバー色 */
	color: var(--gold1);
	/* ホバー時のテキスト色 */
}

.hamburger {
	background: none;
	border: none;
	color: currentColor;
	font-size: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 900px) {
	.main-navigation {
		display: block;
	}

	.hamburger {
		display: none;
	}
}

/* Mobile menu overlay */
.mobile-menu {
	position: fixed;
	inset: 0;
	background: #fff;
	color: var(--gold1);
	display: none;
	z-index: 999;
}

.mobile-menu.open {
	display: block;
	height: 100vh;
}

.mobile-menu-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	/* 上から表示 */
	gap: 16px;
	overflow-y: auto;
	/* スクロール可能に */
	padding: 60px 20px 40px;
	/* 上部に閉じるボタン用の余白 */
}

.mobile-close {
	position: absolute;
	top: 10px;
	right: 33px;
	background: none;
	border: none;
	font-size: 24px;
	color: var(--gold1);
	z-index: 1001;
	/* スクロールしても上に表示 */
}

.mobile-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
	width: 100%;
	font-weight: 700;
}

.mobile-nav-list>li {
	border-bottom: 1px solid var(--gold1);
}

.mobile-nav-link {
	display: block;
	padding: 12px 16px;
	font-family: "Zen Old Mincho", serif;
	text-decoration: none;
	color: var(--gold1);
	font-size: 1.1rem;
}

/* Mobile Submenu */
.mobile-submenu {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem;
	background-color: #f9f9f9;
	/* 背景色を少し変える */
}

.mobile-submenu li a {
	display: block;
	padding: 5px 16px;
	font-family: "Zen Old Mincho", serif;
	text-decoration: none;
	color: var(--dark2);
	font-size: 0.95rem;
	/* 少し小さく */
}

.mobile-submenu li:nth-of-type(1) a {
	padding: 0 16px;
}

/* Hero */
.hero {
	position: relative;
	height: 100vh;
	display: grid;
	place-items: center;
	text-align: center;
	overflow: hidden;
}

.hero-slides {
	position: absolute;
	inset: 0;
}

.hero-copyright {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	font-size: 0.6rem;
	color: #fff;
	opacity: 0.6;
	z-index: 10;
	pointer-events: none;
	letter-spacing: 0.05em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	font-family: "Meiryo", "YuGothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック", "メイリオ", sans-serif;

}

.hero-copyright span {
	font-size: 0.8rem;
}

.hero-slides .slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	opacity: 0;
}

.hero-content {
	position: relative;
	z-index: 2;
	padding: 0 5vw;
}

.hero-title-script {
	font-size: clamp(3rem, 10vw, 4.5rem);
	/* スマホのデフォルトサイズを設定 */
	line-height: 1;
	color: var(--gold1);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 1rem;
	background: linear-gradient(40deg, #b07514 0%, #e3be64 10%, #faebab 20%, #eacf82 30%, #F3D57D 40%, #D9B055 50%, #E5C066 60%, #FCF3BC 70%, #F8E6A0 80%, #B07514 100%);
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-fill-color: transparent;
}

@media (min-width: 768px) {

	/* タブレットサイズ */
	.hero-title-script {
		font-size: clamp(4.5rem, 10vw, 6rem);
	}
}

@media (min-width: 1024px) {

	/* デスクトップサイズ */
	.hero-title-script {
		font-size: 8.6rem;
	}
}

.hero-title-sub {
	font-family: "Zen Old Mincho", serif;
	font-size: clamp(18px, 3.5vw, 30px);
	color: #fff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.slides--desktop {
	display: block;
}

.slides--mobile {
	display: none;
}

@media (max-width: 767px) {
	.slides--desktop {
		display: none;
	}

	.slides--mobile {
		display: block;
	}
}

/* Placeholder sections */
.placeholder {
	height: 50vh;
	display: grid;
	place-items: center;
	font-family: "Zen Old Mincho", serif;
}

.intro {
	/* 背景レイヤー: タイル画像を上部センターで横リピート + グラデーション */

	background-image: url('/img/bg_tiles.webp'),
		radial-gradient(at 40% 20%, hsla(19, 100%, 98%, 1) 0px, transparent 50%),
		radial-gradient(at 80% 0%, hsla(185, 100%, 99%, 1) 0px, transparent 50%),
		radial-gradient(at 0% 50%, hsla(347, 100%, 99%, 1) 0px, transparent 50%),
		radial-gradient(at 0% 0%, hsla(337, 100%, 99%, 1) 0px, transparent 50%);
	background-position: top center, center;
	background-repeat: repeat-x, no-repeat;
	background-size: auto, cover;
}

/* Intro Section */
/* Layout */
.intro-inner {
	display: grid;
	align-items: center;
	gap: 28px;
}

@media (min-width: 900px) {
	.intro-inner {
		grid-template-columns: 1fr 1fr;
	}
}

.intro-left {
	position: relative;
	padding-top: 32px;
}

.intro-title-wrap {
	text-align: center;
}

.intro-title {
	position: relative;
	margin: 0 0 24px;
	font-family: "Zen Old Mincho", serif;
	font-style: italic;
	font-size: clamp(28px, 13vw, 65px);
	line-height: 1;
	color: var(--gold1);
	font-weight: 400;
	display: inline-block;
	text-align: left;
}

.intro-subtitle {
	position: absolute;
	top: 8px;
	right: 0;
	transform: translate(0, -40%);
	font-family: "Zen Old Mincho", serif;
	font-size: clamp(11px, 3.2vw, 16px);
	letter-spacing: 0em;
}

.intro-lead {
	font-family: "Zen Old Mincho", serif;
	font-size: clamp(16px, 2.4vw, 20px);
	margin: 0 0 28px;
	text-align: center;
	position: relative;
}

.intro-lead::after {
	content: "";
	display: block;
	width: 100px;
	height: 1px;
	background: var(--gold3);
	margin: 2rem auto 5rem;
}

.section-title::after {
	content: "";
	display: block;
	width: 100px;
	height: 1px;
	background: var(--gold3);
	margin: 2rem auto 5rem;
}

.intro-text {
	margin: 0 0 3rem;
	text-align: center;
	line-height: 1.8;
}

@media screen and (max-width:575px) {
	.intro-text {
		font-size: 0.9rem;
	}
}



.intro-right {
	position: relative;
	min-height: 300px;
	display: flex;
	justify-content: center;
}

.intro-image-wrap {
	position: relative;
	min-height: 320px;
}

.intro-image {
	width: clamp(260px, 36vw, 420px);
	height: auto;
}

.intro-caption {
	position: absolute;
	left: 0;
	bottom: 60px;
	transform: translateY(105%);
	line-height: 1;
}

.intro-caption-role {
	font-size: 16px;
	opacity: 0.8;
	margin: 0;
}

.intro-caption-name {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

/* Schedule Section */
.schedule {
	position: relative;
	overflow: hidden;
	color: var(--dark1);
}

@media (max-width: 767px) {
	.schedule {
		height: auto;
		min-height: 100vh;
		/* スマホでは最低限100vhを確保し、コンテンツに応じて伸びる */
	}
}

.schedule-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('/img/bg_moon.webp'), linear-gradient(-150deg, #C7B9C6 0%, #D2BACA 11%, #F1D5EC 29%, #CAC5E5 50%, #E3D3EE 60%, #F0DAEF 70%, #E3C5DF 80%, #E8CBBD 100%);
	background-position: center center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: 65%, cover;
	will-change: transform;
}

@media (max-width: 899px) {
	.schedule-bg {
		background-size: 90%, cover;
	}
}

@media (max-width: 575px) {
	.schedule-bg {
		background-size: 150%, cover;
	}
}

.schedule-inner {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: center;
	gap: 28px;
}

@media (min-width: 900px) {
	.schedule-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* Left: circular image */
.schedule-left {
	display: flex;
	justify-content: center;
}

.schedule-avatar-wrap {
	width: clamp(80%, 28vw, 400px);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.schedule-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Right: title and content */
.section-title {
	margin: 0;
	font-family: "Zen Old Mincho", serif;
	font-style: italic;
	font-size: clamp(40px, 7vw, 50px);
	color: var(--gold2);
	font-weight: 100;
	text-align: center;
	letter-spacing: -0.02em;
}

.schedule-desc {
	font-family: "Zen Old Mincho", serif;
	font-size: clamp(16px, 2.6vw, 18px);
	text-align: center;
	color: var(--dark2);
	margin: 0 0 16px;
}

.schedule-list-container {
	margin-top: 2rem;
	width: 100%;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.schedule-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.schedule-list li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s ease;
}

.schedule-list li:last-child {
	border-bottom: none;
}

.schedule-list li a {
	display: block;
	padding: 1rem 0.5rem;
	color: var(--dark1);
	text-decoration: none;
	font-family: "Zen Old Mincho", serif;
	font-size: 1rem;
	position: relative;
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.schedule-list li a::before {
	content: "\F285";
	/* bootstrap-icons chevron-right */
	font-family: bootstrap-icons !important;
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.8rem;
	color: var(--gold1);
	opacity: 0;
	transition: opacity 0.2s ease, right 0.2s ease;
}

.schedule-list li a:hover {
	color: var(--gold3);
	padding-left: 0.5rem;
	background-color: rgba(255, 255, 255, 0.4);
}

.schedule-list li a:hover::before {
	opacity: 1;
	right: 0;
}

.studio {
	background-image: url(/img/bg_tiles_rt.webp), url(/img/bg_tiles_lb.webp),
		radial-gradient(at 97% 8%, hsla(0, 100%, 94%, 1) 0px, transparent 50%),
		radial-gradient(at 9% 81%, hsla(266, 100%, 97%, 1) 0px, transparent 50%),
		radial-gradient(at 53% 10%, hsla(316, 100%, 97%, 1) 0px, transparent 50%),
		radial-gradient(at 24% 36%, hsla(323, 100%, 98%, 1) 0px, transparent 50%) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: right top, left bottom !important;
	background-size: 300px auto, 350px auto, cover, cover, cover, cover !important;
}

.home-information {
	background-color: hsl(0, 0%, 100%);
	background-image: radial-gradient(at 100% 0%, hsl(0, 70%, 87%) 0px, transparent 50%), radial-gradient(at 100% 100%, hsl(340, 74%, 82%) 0px, transparent 50%), radial-gradient(at 0% 100%, hsl(22, 100%, 77%) 0px, transparent 50%), radial-gradient(at 0% 0%, hsl(343, 100%, 87%) 0px, transparent 50%);
}

.information-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* スマホでは横2列 */
	gap: 2rem;
	margin-bottom: 5rem;
}

@media (min-width: 768px) {

	/* タブレット以上で横3列 */
	.information-cards {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.information-cards {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

.information-card {
	display: block;


	text-decoration: none;
	color: inherit;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
	background-color: rgba(255, 255, 255, 0.5);
}

.information-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.information-card-thumbnail {
	width: 100%;
	height: 200px;
	/* Adjust as needed */
	overflow: hidden;
}

.information-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}

.information-card:hover .information-card-image {
	transform: scale(1.05);
}

.information-card-title {
	margin: 1rem;
	font-size: 1.2rem;
	font-weight: 700;
}

@media screen and (max-width:575px) {
	.information-card-title {
		font-size: 1rem;
	}
}

.information-card-meta {
	font-size: 0.85rem;
	color: #777;
	margin: 0 1rem 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.information-card-category {
	background-color: #f0f0f0;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
}

.information-card-date {
	font-size: 0.75rem;
}

.information .text-center {
	margin-top: 2rem;
}

.gallery {
	background: url(/img/bg_tiles_reverse.webp), linear-gradient(150deg, #C9D5DE 0%, #E1DFFF 10%, #E3C9DA 20%, #FDF1DF 30%, #F1E6EC 40%, #EBD9F8 50%, #F3E2FF 60%, #FFE8FE 70%, #FFDDFB 80%, #FFDFD0 100%);
	background-repeat: repeat-x;
	background-position: center bottom;
}



.gallery-card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	/* 縦長 */
	overflow: hidden;
	border-radius: 8px;
	text-decoration: none;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.3s ease;
}

.gallery-card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	/* うっすら暗めのオーバーレイ */
	transition: background 0.3s ease;
}

.gallery-card-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	width: 100%;
	padding: 0 1rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.gallery-card:hover {
	transform: translateY(-5px);
	/* 少し上に動く */
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.gallery-card:hover .gallery-card-overlay {
	background: rgba(0, 0, 0, 0.2);
	/* オーバーレイが薄くなる */
}

.gallery-card:hover .gallery-card-bg {
	transform: scale(1.05);
	/* 背景画像が少し拡大（オプション） */
}

.gallery-item-top {
	padding-top: 0;
	padding-bottom: 2rem;
}

.gallery-item {
	padding-top: 4rem;
	padding-bottom: 2rem;
}


/* Footer */
.footer {
	margin-top: 0;
	padding: 32px 0;
	color: var(--dark1);
	background: linear-gradient(-270deg, rgb(199, 185, 198) 0%, rgb(167, 165, 189) 10%, rgb(210, 186, 202) 20%, rgb(253, 216, 223) 30%, rgb(241, 213, 236) 40%, rgb(202, 197, 229) 50%, rgb(227, 211, 238) 65%, rgb(227, 197, 223) 80%, rgb(232, 203, 189) 100%);
}

.footer-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: center;
}

.footer-left {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.footer-logo {
	width: 150px;
}

.footer-icons {
	display: flex;
	gap: 10px;
	font-size: 24px;
}

.footer-right {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-end;
}

.footer-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.footer-nav-list li a {
	text-decoration: none;
}

@media screen and (max-width:575px) {
	.footer-nav-list {
		display: none;
	}

	.footer-right {
		align-items: center;
	}
}

/* Generic CTA button (reusable) */
.btn-action {
	display: inline-block;
	color: #fff;
	font-family: "Zen Old Mincho", serif;
	background: url('/img/arrow_square.svg') right 15px top 9px / 26px no-repeat var(--gold1);
	background-position: right 15px top 9px;
	padding: 12px 60px 12px 50px;
	line-height: 1;
	box-shadow: rgba(0, 0, 0, 0.8) 2px 10px 8px -12px;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color 0.25s ease, background-position 0.25s ease, transform 0.25s ease;
	will-change: transform;
}

.btn-action:hover {
	background-color: var(--gold3);
	background-position: right 10px top 9px;
	transform: translateY(-2px);
}

.btn-action-lg {
	display: block;
	width: 100%;
	color: #fff;
	font-family: "Zen Old Mincho", serif;
	background: url('/img/arrow_square.svg') right 20px center / 30px no-repeat var(--gold1);
	padding: 20px 60px 20px 20px;
	font-size: 1.2rem;
	line-height: 1;
	text-align: center;
	box-shadow: rgba(0, 0, 0, 0.8) 2px 10px 8px -12px;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color 0.25s ease, background-position 0.25s ease, transform 0.25s ease;
	will-change: transform;
}

.btn-action-lg:hover {
	background-color: var(--gold3);
	background-position: right 15px center;
	transform: translateY(-2px);
	color: #fff;
}

.btn-action-banner {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	height: 250px;
	margin: 0;
	color: #fff;
	text-decoration: none;
	position: relative;
	background-size: cover;
	background-position: center;
	border-radius: 3px;
	box-shadow: rgba(0, 0, 0, 0.8) 2px 10px 8px -12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	overflow: hidden;
}

.btn-action-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	transition: background 0.25s ease;
	z-index: 1;
}

.btn-action-banner::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	background: url('/img/arrow_square.svg') no-repeat center center / contain;
	z-index: 2;
	transition: right 0.25s ease;
}

.btn-action-banner span {
	position: relative;
	z-index: 2;
	font-family: "Zen Old Mincho", serif;
	font-size: 1.2rem;
	line-height: 1.6;
	text-align: center;
}

.btn-action-banner:hover {
	transform: translateY(-2px);
	color: #fff;
}

.btn-action-banner:hover::before {
	background: rgba(0, 0, 0, 0.4);
}

.btn-action-banner:hover::after {
	right: 15px;
}

/* Generic Normal button (reusable) */
.btn-normal {
	display: inline-block;
	color: #fff;
	font-family: "Zen Old Mincho", serif;
	background-color: var(--gold1);
	/* btn-actionの背景色を参考に */
	padding: 12px 25px;
	line-height: 1;
	box-shadow: rgba(0, 0, 0, 0.8) 2px 10px 8px -12px;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
	will-change: transform;
	margin-top: 20px;
	/* 余白を調整 */
	cursor: pointer;
}

.btn-normal:hover {
	background-color: var(--gold3);
	transform: translateY(-2px);
	color: #fff;
}

.footer-copy {
	text-align: center;
	padding-top: 12px;
	font-size: 14px;
}

@media (min-width: 900px) {
	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* Layout tweaks */
.site-main {
	margin: 0;
	padding: 0;
}

@media (min-width: 900px) {
	.nav-list li {
		display: inline-block;
	}
}


/* Breadcrumb styles */
.breadcrumb-nav {
	padding: 1rem 0;
	background-color: transparent;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	padding: 0.3rem;
	margin-bottom: 2rem;
	list-style: none;
	border-radius: 0.3rem;
	background-color: rgba(255, 255, 255, 0.3);
}

.breadcrumb-item {
	display: inline-block;
	list-style: none;
	font-size: 0.8rem;
	font-family: "Zen Old Mincho", serif;
	color: var(--dark3);
}

.breadcrumb-item br {
	display: none;
}

.breadcrumb-item a {
	color: var(--gold2);
	text-decoration: none;
}

.breadcrumb-item a:hover {
	text-decoration: underline;
}

.breadcrumb-item i.bi {
	margin-right: 0.5em;
	font-size: 0.9em;
	/* アイコンサイズを調整 */
	vertical-align: -0.125em;
}

.breadcrumb-item+.breadcrumb-item::before {
	display: inline-block;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	/* セパレーターとの間隔を調整 */
	color: var(--dark3);
	content: "/";
	/* セパレーター */
}

.breadcrumb-item.active {
	color: var(--dark1);
	/* 現在のページの色 */
	/* activeはリンクなしのため、hoverスタイルは不要 */
}

/* Link colors */
body a {
	color: var(--gold2);
}

body a:hover {
	color: var(--dark1);
}

/* Entry Content Styles */
.entry-content {
	padding: 0 0 4rem;
}

/* Footer spacing */
.footer {
	padding: 48px 0;
}

/* Footer layout widths */
@media (min-width: 900px) {
	.footer-inner {
		grid-template-columns: 25% 75%;
	}
}

/* Footer icons alignment */
.footer-left {
	align-items: center;
}

.footer-icons {
	justify-content: center;
	gap: 14px;
}

/* Footer #colophon specific spacing */
footer#colophon {
	padding: 3rem 0;
}

/* Footer copy typography */
.footer-copy {
	font-family: "Zen Old Mincho", serif;
	color: var(--dark3);
}

/* Button hover adjustments (no upward movement, ensure white text) */
.btn-action:hover {
	color: #fff;
	transform: none;
}

/* Studio Section */
.section.studio .section-title {
	margin-bottom: 2rem;
}

.studio-description {
	text-align: center;
	font-size: 1rem;
	line-height: 1.8;
	margin-bottom: 3rem;
}


.studio-buttons-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 4rem;
	width: 100%;
}

@media (min-width: 768px) {
	.studio-buttons-split {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		/* Add some gap for breathing room, or 0 if strictly connected */
	}
}

.studio-split-card {
	display: block;
	position: relative;
	width: 100%;
	height: 350px;
	/* Adjust height as needed */
	overflow: hidden;
	border-radius: 8px;
	text-decoration: none;
	color: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.studio-split-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
	z-index: 0;
}

.studio-split-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	/* Thin black overlay */
	transition: background 0.4s ease;
	z-index: 1;
}

.studio-split-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	text-align: center;
	color: #fff;
}

.studio-split-title {
	font-size: 2rem;
	margin: 0 0 1rem;
	color: #fff;
}

.studio-split-subtitle {
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0;
	max-width: 80%;
	color: #fff;
}

/* Hover Effects */
.studio-split-card:hover .studio-split-bg {
	transform: scale(1.05);
	/* Slightly enlarge background */
}

.studio-split-card:hover .studio-split-overlay {
	background: rgba(0, 0, 0, 0.25);
	/* Lighten overlay */
}

.studio-split-text {
	text-align: center;
	margin-top: 1rem;
	font-size: 0.95rem;
	line-height: 1.8;
	color: var(--gold2);
}

.studio-voice-section {
	margin-top: 5rem;
	padding: 3rem 0;
	background-color: var(--light-gray);
}

.studio-subtitle {
	text-align: center;
	margin-bottom: 2rem;
	color: var(--gold3);
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}

.studio-subtitle span {
	display: block;
}

.studio-subtitle span:nth-of-type(1) {
	font-size: clamp(40px, 4vw, 54px);
	line-height: 1.5;
}

.studio-subtitle span:nth-of-type(2) {
	line-height: 1;
}

.studio-subtitle::before,
.studio-subtitle::after {
	content: "";
	width: 1px;
	height: 70px;
	background-color: var(--gold2);
}

.studio-subtitle::before {
	margin-right: 70px;
	transform: rotate(-45deg);
}

.studio-subtitle::after {
	margin-left: 70px;
	transform: rotate(45deg);
}


.studio-testimonials-carousel {
	max-width: 900px;
	/* 横幅を広く */
	margin: 0 auto;
	/* 中央に表示 */
	overflow: hidden;
	position: relative;
	height: 200px;
	/* カルーセルの高さ */
}

.testimonial-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 2rem 6rem;
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	opacity: 1;
	left: 0;
	transition: none;
}

.testimonial-slide.active {}

.testimonial-text {
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 1rem;
	color: var(--text-color);
}

@media screen and (max-width:575px) {
	.testimonial-slide {
		padding: 1rem 3rem;
	}

	.testimonial-text {
		font-size: 0.9rem;
	}
}

.testimonial-author {
	font-style: italic;
	color: var(--dark-gray);
}

.carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	padding: 0.4rem 0.5rem;
	cursor: pointer;
	z-index: 10;
	font-size: 1.5rem;
	/* アイコンを小さめに調整 */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-nav.prev {
	left: 10px;
}

.carousel-nav.next {
	right: 10px;
}

.carousel-nav:hover {
	background-color: rgba(0, 0, 0, 0.7);
}

.studio-readmore {
	margin-top: 40px;
}

/* Page and Post Hero Sections */
.hero--page,
.hero--post {
	height: 300px;
	padding-top: 5rem;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}



.hero--page .hero-content,
.hero--post .hero-content {
	position: relative;
	z-index: 2;
	padding: 0 20px;
}

.page-title-en {
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	letter-spacing: -0.02em;
	font-size: 1rem;
	display: block;
	line-height: 1.5;
}

.page-title {
	font-size: clamp(1.8rem, 2.5vw, 1.8rem);
	/* 固定ページのタイトル */
	margin-top: 0;
	display: block;
}

.post-category {
	font-family: "Zen Old Mincho", serif;
	font-weight: 400;
	letter-spacing: -0.02em;
	font-style: italic;
	font-size: 2ωrem;
	/* 投稿ページのカテゴリー名 */
	color: inherit;
	/* 親から色を継承 */
	margin: 0;
}

/* スペシャル版のページのタイトルカラー */
body.page-slug-honma-makiko .page-title,
body.page-slug-honma-makiko .page-title-en {
	color: #fff;
}

/* 共通のスタイル */
.h2 {
	font-size: clamp(1.5rem, 3vw, 1.6rem);
	font-weight: 600;
	margin: 0 0 2rem;
}

.h2 .subtitle {
	font-size: clamp(0.9rem, 2vw, 1.1rem);
}

.h2 span {
	display: block;
}

.section-description {
	text-align: center;
	margin-bottom: 3rem;
	font-size: clamp(1rem, 2.4vw, 1.1rem);
	line-height: 1.8;
}

.common-flex-row {
	display: flex;
	flex-direction: column;
	/* モバイルファーストで縦並び */
	gap: 2rem;
	align-items: center;
	/* 中央寄せ */
}

@media (min-width: 768px) {
	.common-flex-row {
		flex-direction: row;
		/* デスクトップで横並び */
		align-items: flex-start;
		gap: 3rem;
	}
}

.common-flex-col-50 {
	width: 100%;
}

@media (min-width: 768px) {
	.common-flex-col-50 {
		flex-basis: 50%;
		max-width: 50%;
	}
}

.common-flex-col-40 {
	width: 100%;
}

@media (min-width: 768px) {
	.common-flex-col-40 {
		flex-basis: 40%;
		max-width: 40%;
	}
}

.common-flex-col-60 {
	width: 100%;
}

@media (min-width: 768px) {
	.common-flex-col-60 {
		flex-basis: 60%;
		max-width: 60%;
	}
}

.common-flex-col-30 {
	width: 100%;
}

@media (min-width: 768px) {
	.common-flex-col-30 {
		flex-basis: 30%;
		max-width: 30%;
	}
}

.common-flex-col-70 {
	width: 100%;
}

@media (min-width: 768px) {
	.common-flex-col-70 {
		flex-basis: 70%;
		max-width: 70%;
	}
}

.common-image-responsive {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}



/* 固定ページ共通ユーティリティ */
.mb-sm {
	margin-bottom: 2rem;
}

.mb-md {
	margin-bottom: 3rem;
}

.mb-lg {
	margin-bottom: 4rem;
}

.bg-light {
	background: rgba(255, 255, 255, 0.5);
}

.p-3 {
	padding: 1rem;
}

.p-4 {
	padding: 2rem;
}

.rounded {
	border-radius: 8px;
}

/* margin-top utilities */
.mt-sm {
	margin-top: 2rem;
}

.mt-md {
	margin-top: 3rem;
}

.mt-lg {
	margin-top: 4rem;
}

.spacer-sm {
	height: 2rem;
}

.spacer-md {
	height: 4rem;
}

.spacer-lg {
	height: 6rem;
}

.bg-spacer {
	background-image: url('/img/bg-spacer.png');
	background-repeat: no-repeat;
	background-position: center center;
	height: auto;
	padding: 6rem 0 8rem;
}

@media (min-width: 768px) {
	.flex-row-reverse-md {
		flex-direction: row-reverse;
	}
}

.bg-image-responsive {
	background-size: cover;
	background-position: center;
	min-height: 400px;
	min-height: 400px;
	border-radius: 8px;
}

/* padding-top utilities */
.pt-sm {
	padding-top: 2rem;
}

.pt-md {
	padding-top: 3rem;
}

.pt-lg {
	padding-top: 4rem;
}

/* padding-bottom utilities */
.pb-sm {
	padding-bottom: 2rem;
}

.pb-md {
	padding-bottom: 3rem;
}

.pb-lg {
	padding-bottom: 4rem;
}

.flex-col-gap-sm {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 2rem;
}

.banner-link {
	position: relative;
	display: inline-block;
	margin-top: 1rem;
	color: #fff;
	width: 100%;
	font-family: "Zen Old Mincho", serif;
	padding: 25px 60px 25px 50px;
	text-align: center;
	line-height: 1;
	border-radius: 3px;
	font-size: 1.2rem;
	text-decoration: none;
	box-shadow: rgba(0, 0, 0, 0.8) 2px 10px 8px -12px;
	transition: background-color 0.25s ease, transform 0.25s ease;
	will-change: transform;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
}

/* 背景画像はインラインスタイルで指定し、その上にうっすら暗いオーバーレイを重ねる */
.banner-link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	/* うっすら暗く */
	z-index: -1;
	transition: background 0.25s ease;
}

.banner-link:hover {
	transform: translateY(-2px);
	color: #fff;
}

/* 矢印アイコン（btn-actionと同様の見た目を擬似要素で再現） */
.banner-link::after {
	content: "";
	position: absolute;
	top: 22px;
	right: 15px;
	width: 26px;
	height: 26px;
	background: url('/img/arrow_square.svg') no-repeat center center / contain;
	z-index: 2;
	transition: right 0.25s ease;
}

/* テキストをオーバーレイと矢印の上に表示 */
.banner-link>* {
	position: relative;
	z-index: 2;
}

/* hover時：矢印を少し左に動かし、オーバーレイを薄くする */
.banner-link:hover::after {
	right: 10px;
	/* background-position: right 10px top 9px; 相当 */
}

.banner-link:hover::before {
	background: rgba(0, 0, 0, 0.18);
}

/* Access Page Utilities */
.border-bottom-gold {
	border-bottom: 1px solid var(--gold1);
	padding-bottom: 0.5rem;
}

.access-list {
	margin: 2rem 0;
}

.access-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.access-item p {
	margin: 0;
}

@media (max-width: 600px) {
	.access-item {
		flex-direction: column;
		gap: 0.25rem;
	}
}

.access-label {
	flex-shrink: 0;
	min-width: 140px;
	padding: 2px 10px;
	background: var(--gold1);
	color: #fff;
	text-align: center;
	font-size: 0.85rem;
	border-radius: 4px;
}

/* パララックス用背景ユーティリティ（GSAPと組み合わせて使用） */
.bg-parallax {
	background-repeat: no-repeat;
	background-size: cover;
	/* GSAPでのパララックス用に、Y=0% からアニメーションさせる */
	background-position: 50% 0%;
}

/* Student Voice Section */
.student-voice-item {
	background-image: radial-gradient(at 40% 20%, rgba(195, 159, 136, 0.5) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(241, 198, 198, 0.5) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(255, 219, 222, 0.5) 0px, transparent 50%), radial-gradient(at 80% 50%, rgba(255, 133, 173, 0.5) 0px, transparent 50%), radial-gradient(at 0% 100%, rgba(255, 181, 138, 0.5) 0px, transparent 50%), radial-gradient(at 80% 99%, rgba(255, 199, 199, 0.5) 0px, transparent 50%), radial-gradient(at 0% 0%, rgba(255, 133, 167, 0.5) 0px, transparent 50%);
	margin-bottom: 3rem;
	padding: 2rem 1rem 1rem 2rem;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	/* レスポンシブ対応 */
	gap: 1.5rem;
}

.student-voice-left {
	flex: 1 1 100%;
	/* スマホでは100%幅 */
}

/* Profile Favorites Section */
.favorites-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.favorites-sound-img {
	max-width: 120px;
	height: auto;
	margin-top: -40px;
}

@media (max-width: 576px) {
	.favorites-header {
		flex-direction: row;
		align-items: center;
		gap: 0.75rem;
		flex-wrap: nowrap;
	}

	.favorites-sound-img {
		max-width: 75px;
		margin-top: -30px;
	}
}

.student-voice-right {
	flex: 1 1 100%;
	/* スマホでは100%幅 */
	text-align: center;
	position: relative;
}

.crossfade-images {
	display: grid;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.crossfade-img {
	grid-area: 1 / 1;
	width: 100%;
	height: auto;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.crossfade-img.active {
	opacity: 1;
}

.student-voice-right img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	/* 画像の角を丸く */
}

.student-voice-item h2 {
	/* 何も設定しない */
}

.student-voice-item h2 .student-name {
	/* 削除 */
}

.student-voice-item h2 .lesson-info {
	/* 削除 */
}

.student-comment {
	position: relative;
}

.comment-content {
	max-height: 290px;
	/* デフォルトで表示する高さ */
	overflow: hidden;
	transition: max-height 0.5s ease-out;
}

.comment-content.expanded {
	max-height: none;
	/* 全文表示 */
}

.student-comment p {}


@media (min-width: 768px) {
	.student-voice-item {
		padding: 2rem;
		display: flex;
		flex-wrap: nowrap;
		/* 768px以上で横並び */
	}

	.student-voice-left {
		flex: 0 0 70%;
		/* 左カラム70% */
		max-width: 70%;
	}

	.student-voice-right {
		flex: 0 0 30%;
		/* 右カラム30% */
		max-width: 30%;
		text-align: right;
		/* 右寄せ */
		padding-right: 1.8rem;
	}

}

/* Profile Page Section */
.profile-page {
	/* padding: 6rem 0;
    background: linear-gradient(150deg, rgb(201, 213, 222) 0%, rgb(225, 223, 255) 10%, rgb(227, 201, 218) 20%, rgb(253, 241, 223) 30%, rgb(241, 230, 236) 40%, rgb(235, 217, 248) 50%, rgb(243, 226, 255) 60%, rgb(255, 232, 254) 70%, rgb(255, 221, 251) 80%, rgb(255, 223, 208) 100%); */
}

.profile-container .section-title {
	/* margin-bottom: 3rem; */
}

.profile-content {
	display: flex;
	flex-direction: column;
	/* モバイルファーストで縦並び */
	align-items: center;
	gap: 2rem;
}

@media (min-width: 768px) {
	.profile-content {
		flex-direction: row;
		/* デスクトップで横並び */
		align-items: flex-start;
		gap: 3rem;
	}
}

.profile-image-wrap {
	flex-shrink: 0;
	width: clamp(250px, 40vw, 350px);
	/* 画像の幅を調整 */
	/* border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.profile-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.profile-text-wrap {
	flex-grow: 1;
	line-height: 1.8;
}

.profile-text-wrap h2 {}

@media (min-width: 768px) {
	.profile-text-wrap h2 {}
}

/* Rental Fees Table */
.rental-table-wrap {
	width: 100%;
	overflow-x: auto;
	margin-bottom: 2rem;
	-webkit-overflow-scrolling: touch;
}

.rental-table {
	width: 100%;
	/* モバイルで横スクロールさせるための最小幅 */
	border-collapse: collapse;
	font-size: 0.95rem;
	background-color: #fff;
}

.rental-table th,
.rental-table td {
	border: 1px solid #ddd;
	padding: 12px 10px;
	text-align: center;
	vertical-align: middle;
}

.rental-table th {
	background-color: #f9f9f9;
	font-weight: 600;
	color: var(--dark1);
	font-family: "Zen Old Mincho", serif;
}

.rental-table thead tr:first-child th {
	background-color: #f0f0f0;
	font-size: 1.1rem;
}

.rental-table .studio-specs {
	display: block;
	font-size: 0.8rem;
	font-weight: normal;
	margin-top: 5px;
	color: var(--dark3);
}

.rental-table .diagonal-header {
	/* 斜線はCSSグラデーションで簡易的に表現、または画像を使用 */
	/* ここではシンプルに空白にしておくか、必要ならSVG背景などを検討 */
	background-color: #fff;
}

/* Class Index Page Styles */
.text-gold {
	color: var(--gold1);
}

.list-check {
	list-style: none;
	padding: 0;
	margin: 0;
}

.list-check li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
}

.list-check li::before {
	content: "✔";
	position: absolute;
	left: 0;
	color: var(--gold1);
}

.ticket-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ticket-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 0;
	border-bottom: 1px dashed #ddd;
}

.ticket-list li:last-child {
	border-bottom: none;
}

.ticket-list .label {
	font-weight: bold;
}

.ticket-list .price {
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--gold1);
}

.ticket-list .per-price {
	font-size: 0.85rem;
	color: #777;
}

.class-nav-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 600px) {
	.class-nav-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.class-nav-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.class-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	min-height: 200px;
	padding: 2rem 1.5rem;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	z-index: 1;
	transition: transform 0.3s ease;
}

.class-nav-item::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: -1;
	transition: background 0.3s ease;
}

.class-nav-item:hover {
	transform: translateY(-5px);
}

.class-nav-item:hover::before {
	background: rgba(0, 0, 0, 0.3);
}

.class-nav-icon {
	display: none;
}

.class-nav-title {
	font-family: "Zen Old Mincho", serif;
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
	color: #fff;
	position: relative;
}

.class-nav-desc {
	font-size: 0.9rem;
	color: #fff;
	line-height: 1.5;
	margin: 0;
	position: relative;
}

/* Background classes */
.bg-studio {
	background-image: url('/img/class-icon-bg05.webp');
}

.bg-online {
	background-image: url('/img/class-icon-bg02.webp');
}

.bg-pg {
	background-image: url('/img/class-icon-bg03.webp');
}

.bg-external {
	background-image: url('/img/class-icon-bg04.webp');
}

.bg-new {
	background-image: url('/img/class-icon-bg01.webp');
}

.bg-voice {
	background-image: url('/img/class-icon-bg06.webp');
}

/* Studio Lesson Page Styles */
.class-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.class-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.class-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	height: 100%;
}

.class-card-title {
	font-family: "Zen Old Mincho", serif;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--gold1);
	text-align: center;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid #eee;
	padding-bottom: 1rem;
}

.class-card-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	font-size: 0.95rem;
}

.class-card-dl dt {
	font-weight: bold;
	color: var(--dark2);
	min-width: 5em;
}

.class-card-dl dd {
	margin: 0;
	line-height: 1.6;
}

.class-card-note {
	font-size: 0.85rem;
	color: #777;
	margin-top: 1rem;
	text-align: center;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* Sidebar Layout */
.content-sidebar-wrap {
	display: grid;
	gap: 2rem;
}

@media (min-width: 992px) {
	.content-sidebar-wrap {
		grid-template-columns: 1fr 300px;
		gap: 3rem;
	}
}

.main-content {
	min-width: 0;
	/* Prevent grid blowout */
}

.sidebar {
	/* Sidebar styles */
}

.widget {
	margin-bottom: 2rem;
}

.widget-title {
	font-family: "Zen Old Mincho", serif;
	font-size: 1.25rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--gold3);
	color: var(--gold2);
}

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.widget ul li {
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px dashed var(--light2);
}

.widget ul li a {
	text-decoration: none;
	transition: color 0.2s;
}

.widget ul li a:hover {
	color: var(--gold1);
}

/* Single Post Header */
.entry-header {
	margin-bottom: 2rem;
}

.entry-title {
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--gold2);
	line-height: 1.4;
}

.entry-meta {
	display: flex;
	gap: 1rem;
	font-size: 0.9rem;
	color: var(--dark3);
	margin-top: 1rem;
}

.entry-category a {
	background-color: var(--light1);
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.2s;
}

.entry-category a:hover {
	background-color: var(--light2);
	color: var(--dark1);
}

/* Custom Recent Posts Widget */
.hszb-recent-posts {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hszb-recent-post-item {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed var(--light2);
}

.hszb-recent-post-item:last-child {
	border-bottom: none;
}

.hszb-recent-post-link {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	text-decoration: none;
	transition: opacity 0.2s;
}

.hszb-recent-post-link:hover {
	opacity: 0.7;
}

.hszb-recent-post-thumbnail {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	overflow: hidden;
}

.hszb-recent-post-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hszb-recent-post-content {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.hszb-recent-post-title {
	font-size: 0.95rem;
	font-weight: bold;
	line-height: 1.4;
}

.hszb-recent-post-date {
	font-size: 0.8rem;
	color: var(--dark3);
	display: none;
}

/* Instagram Section */
.instagram-area {
	width: 100%;
	margin-top: 6rem;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 992px) {
	.instagram-area {
		width: 66.666%;
	}
}

.instagram-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.instagram-header {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.instagram-title {
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.instagram-title i {
	font-size: 1.5rem;
	color: var(--gold1);
}

.instagram-content {
	width: 100%;
}

.instagram-placeholder {
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Pagination */
.pagination-wrap {
	margin-top: 3rem;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--light2);
	border-radius: 50%;
	color: var(--dark2);
	text-decoration: none;
	font-family: "Zen Old Mincho", serif;
	transition: all 0.3s ease;
}

.pagination .page-numbers.current {
	background-color: var(--gold1);
	color: #fff;
	border-color: var(--gold1);
}

.pagination .page-numbers:hover:not(.current) {
	background-color: var(--light1);
	color: var(--gold1);
	border-color: var(--gold1);
}

.pagination .prev,
.pagination .next {
	border: none;
	font-size: 1.2rem;
}

.pagination .screen-reader-text {
	display: none;
}

/* Contact Form */
.contact-form-wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.form-row {
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

@media (min-width: 768px) {
	.form-row {
		flex-direction: row;
		align-items: flex-start;
	}
}

.form-label {
	width: 100%;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.form-label p {
	margin: 0;
}

@media (min-width: 768px) {
	.form-label {
		width: 30%;
		margin-bottom: 0;
		padding-top: 0.5rem;
		/* 入力欄との高さ合わせ */
	}
}

.form-label label {
	font-weight: bold;
}

.required-label {
	background-color: #dc3545;
	color: #fff;
	font-size: 0.7rem;
	padding: 2px 6px;
	border-radius: 3px;
	vertical-align: middle;
}

.form-input {
	width: 100%;
}

@media (min-width: 768px) {
	.form-input {
		width: 70%;
	}
}

.form-input input[type="text"],
.form-input input[type="email"],
.form-input input[type="tel"],
.form-input textarea,
.form-input select {
	width: 100%;
	padding: 0.8rem;
	border: 1px solid var(--light2);
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.3s ease;
}

.form-input input:focus,
.form-input textarea:focus,
.form-input select:focus {
	outline: none;
	border-color: var(--gold1);
}

.form-input textarea {
	min-height: 200px;
}

.wpcf7-spinner {
	display: block;
}

/* Media Link Item */
.media-link-item {
	margin: 1.5rem 0;
}

.media-link {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--dark1);
	transition: opacity 0.3s ease;
}

.media-link:hover {
	opacity: 0.8;
	color: var(--dark1);
}

.media-link-thumb {
	width: 100%;
	max-width: 200px;
	border: 1px solid #eee;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.media-link-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.media-link-caption {
	font-size: 0.9rem;
	color: var(--dark2);
	margin: 0;
}

/* Message Grid */
.message-grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 768px) {
	.message-grid {
		grid-template-columns: 4fr 6fr;
	}
}

/* Palillo Section Wrapper */
.palillo-section {
	position: relative;
	background-color: #fff;
	padding: 3rem 2rem;
	border-radius: 16px;
	margin-bottom: 4rem;
}

/* Decorative Image */
.palillo-deco-img {
	position: absolute;
	top: -55px;
	right: -20px;
	width: 120px;
	height: auto;
	z-index: 10;
	pointer-events: none;
}

@media (min-width: 768px) {
	.palillo-section {
		padding: 4rem;
	}

	.palillo-deco-img {
		width: 180px;
		top: -100px;
		right: -70px;
	}
}

/* Banner Link Tall */
.banner-link-tall {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	margin-top: 1rem;
	color: #fff;
	width: 100%;
	font-family: "Zen Old Mincho", serif;
	padding: 2rem;
	text-align: center;
	line-height: 1.4;
	border-radius: 3px;
	font-size: 1.2rem;
	text-decoration: none;
	box-shadow: rgba(0, 0, 0, 0.8) 2px 10px 8px -12px;
	transition: background-color 0.25s ease, transform 0.25s ease;
	will-change: transform;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.banner-link-tall::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 1;
	transition: background 0.25s ease;
}

.banner-link-tall:hover {
	transform: translateY(-2px);
	color: #fff;
}

.banner-link-tall::after {
	content: "";
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 26px;
	height: 26px;
	background: url('/img/arrow_square.svg') no-repeat center center / contain;
	z-index: 2;
	transition: right 0.25s ease;
}

.banner-link-tall>* {
	position: relative;
	z-index: 2;
}

.banner-link-tall:hover::after {
	right: 10px;
}

.banner-link-tall:hover::before {
	background: rgba(0, 0, 0, 0.18);
}

/* Google reCAPTCHA */
.grecaptcha-badge {
	visibility: hidden;
}