@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

:root {
	--tk-black: #0D0B0A; /* 基調の墨黒 */
	--tk-black-soft: #16130F; /* セクション背景 */
	--tk-gold: #C9A86A; /* 金 */
	--tk-gold-light: #E3CB9B; /* 金（明） */
	--tk-gold-deep: #ac873d; /* 金（深） */
	--tk-gold-smoke: #A6906A; /* 金（燻し）：KVの大見出し用 */
	--tk-gold-bright: #E3C05C; /* 金（明るめ）：紫紺ボタンの文字用。彩度を上げた金色 */
	--tk-purple: #2A2039; /* 紫：ボタンの地色 */
	--tk-purple-light: #443263; /* 紫（明）：グラデの照り */
	--tk-purple-deep: #1D1729; /* 紫（深） */
	--tk-purple-bright: #595aba; /* 紫（明るい） */
	--tk-silver: #39373c; /* 銀：紫紺ボタンの縁。色味を持たない無彩色 */
	--tk-white: #F5F1E8; /* 生成り白 */
	--tk-gray: #A79E8E; /* 補助テキスト */
	--tk-gray-light: #ccc; /* 薄いグレー：受付前のチケット枠 */
	--tk-crimson: #8B2C2C; /* 朱 */
	--tk-deep-purple: #17171d; /* 深いくすんだ紫 */
	--tk-moss-green: #c7c48e; /* モスグリーン */
	--tk-line: rgba(201, 168, 106, 0.35);
	--tk-line-weak: rgba(201, 168, 106, 0.35);
	--font-mincho: "Shippori Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;
	--font-Garamond: "Cormorant Garamond", serif;
	--headerH: 80px; /* ヘッダー高さ（scroll-padding と KV の余白が参照） */
}

html {
	overflow: auto;
	scroll-padding-top: var(--headerH);
}

/* スムーススクロールは読み込み完了後に有効化する（gsap-script.js が付与）。
   最初から有効にしておくと、ページ途中でリロードした際にブラウザの
   スクロール位置復元が阻害され、ScrollTrigger が発火せずに
   本文や装飾が opacity:0 のまま残ってしまう */
html.is-scroll-smooth {
	scroll-behavior: smooth;
}

body {
	display: flex;
	flex-flow: column;
	position: relative;
	z-index: 0;
	min-height: 100vh;
	color: var(--tk-white);
	font-size: 1em;
	line-height: 2;
	font-family: var(--font-mincho);
	letter-spacing: 1px;
	overflow-wrap: anywhere;
	line-break: strict;
	background-color: var(--tk-black);
}

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

a:link {
	color: var(--tk-white);
	text-decoration: none;
	transition-property: all;
	transition: 0.2s linear;
	border-style: none;
}

a:visited {
	color: var(--tk-white);
}

a:hover {
	color: var(--tk-gold-light);
	text-decoration: none;
}

/* 選択範囲 */
::selection {
	color: var(--tk-black);
	background-color: var(--tk-gold);
}

/* フォーカスリング（キーボード操作時のみ） */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--tk-gold-light);
	outline-offset: 3px;
}

section {
	margin: 0;
	padding: 0;
}

.slide {
	width: 100%;
	padding: 110px 0;
}

.container {
	width: 92%;
	max-width: 1200px;
	margin: auto;
}

.container1100 {
	width: 92%;
	max-width: 1100px;
	margin: auto;
}

.container1000 {
	width: 92%;
	max-width: 1000px;
	margin: auto;
}

.container900 {
	width: 92%;
	max-width: 900px;
	margin: auto;
}


/* セクション見出し（全スライド共通） */
.section_title_wrap {
	width: 100%;
	text-align: center;
	margin: 0 0 60px;
}

.section_title_en {
	color: var(--tk-gold);
	font-size: 0.85em;
	line-height: 1.6;
	font-family: var(--font-Garamond);
	letter-spacing: 5px;
	margin: 0;
}

.section_title {
	font-size: 2em;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 8px;
	margin: 6px 0 0;
}

.section_title::after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background-color: var(--tk-gold);
	margin: 24px auto 0;
}


/* Header（初期は非表示。スクロールして初めて出す） */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	visibility: hidden;
	height: var(--headerH);
	opacity: 0;
	background-color: rgba(13, 11, 10, 0.92);
	padding: 0 100px 0 3%;
	border-bottom: 1px solid var(--tk-line-weak);
	transform: translateY(-100%);
	transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* スクロール後（header-scroll-animation.js が付与。一度出たら出しっぱなし） */
.header.is-scrolled {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.h1_mov {
	margin: 0;
	padding: 0;
}

h1 {
	color: var(--tk-gray);
	font-size: 0.68em;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: 2px;
	margin: 0;
}

h1 span {
	display: block;
	color: var(--tk-white);
	font-size: 1.5em;
	font-weight: 700;
	letter-spacing: 6px;
	margin-top: 5px;
}

h1 a:link,
h1 a:visited {
	color: inherit;
}


/* ヘッダーメニュー */
.header_menu {
	margin: 0 0 0 auto; /* SNSアイコンの隣に寄せる */
}

.main_menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-start; /* Coming soon が付く項目があっても文字の頭を揃える */
	margin: 0;
	/* 上揃えにすると Coming soon のぶん文字が上にずれるので、
	   その分だけ下げてヘッダーの上下中央（h1）と揃える */
	padding: 20px 0 0;
	list-style: none;
}

.main_menu li {
	margin: 0 0 0 32px;
}

.main_menu li a {
	display: block;
	position: relative;
	color: var(--tk-white);
	font-size: 0.95em;
	line-height: 1.4;
	font-family: var(--font-Garamond);
	letter-spacing: 2px;
	padding-bottom: 4px;
}

.main_menu li a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--tk-gold);
	transition: width 0.3s ease;
}

.main_menu li a:hover::after {
	width: 100%;
}

.main_menu .coming_soon {
	display: block;
	color: var(--tk-gold-deep);
	font-size: 0.62em;
	font-family: var(--font-mincho);
	letter-spacing: 1px;
}

/* 準備中メニュー（リンク無効） */
.main_menu .no_link a {
	pointer-events: none;
	opacity: 0.6;
}


/* SNSアイコン */
.header_sns {
	display: block;
	flex: none;
	width: 34px;
	margin: 0 0 0 28px;
	padding: 0;
	transition: opacity 0.3s ease;
}

.header_sns:hover {
	opacity: 0.7;
}

.header_sns img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}


/* Slide1 / Hero */
/* KVの高さ＝列幅×1.22（画像比率）で決まり、画面高より低くなる幅では
   100vh固定＋中央寄せだとその差がKVの上下に空白として出る。
   画像側の max-height:100svh が高さの上限を担うので、ここでは高さを固定しない */
#slide1 {
	display: flex;
	align-items: flex-start;
	position: relative;
	z-index: 0;
	overflow: hidden;
	min-height: 0;
	padding: 0;
}

.kv_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
	width: 100%;
	background: url(../images/slide1/left_bg.jpg) no-repeat #000;
	margin: 0 auto;
	padding: 0;

	/* 左上の桜（sakura-1.png）の調整用。ここの数値だけ変えれば位置・大きさ・濃さが変わる */
	--sakura_width: calc(516 / 1920 * 100vw);   /* 幅＝画面1920pxのとき516px（高さは自動。元画像は516×729） */
	--sakura_top: -130px;       /* 上からの位置。マイナスで上にはみ出す */
	--sakura_left: -20px;      /* 左からの位置。マイナスで左にはみ出す */
	--sakura_opacity: 0.7;     /* 濃さ 0（透明）〜1（そのまま） */

	/* イントロ演出用。gsap-script.js が見出しの後に 0→1 へ動かす。
	   0＝完全に隠れる／1＝全部見える。左上から右下へ斜めに現れる。
	   初期値は「演出なしの完成形」＝1 なので、JS が動かない環境でも普通に表示される */
	--sakura_mask: 1;

	/* KV背景を下端で黒くフェードさせる高さ。大きくするほど黒くなる範囲が広がる */
	--kv_fade_height: 15%;
}

/* KV背景の左上に重ねる桜。数値は .kv_wrap の --sakura_* で調整する */
.kv_wrap::before {
	content: "";
	display: block;
	position: absolute;
	top: var(--sakura_top);
	left: var(--sakura_left);
	z-index: -1;
	width: var(--sakura_width);
	aspect-ratio: 516 / 729;
	background: url(../images/slide1/sakura-1.png) no-repeat left top;
	background-size: 100% auto;
	opacity: var(--sakura_opacity);
	pointer-events: none;

	/* 135deg＝左上から右下へ向かう軸。--sakura_mask が境目を送り出す。
	   130%/-30% の差分がぼかし幅（＝境目の柔らかさ） */
	-webkit-mask-image: linear-gradient(135deg,
		#000 calc(var(--sakura_mask) * 130% - 30%),
		rgba(0, 0, 0, 0) calc(var(--sakura_mask) * 130%));
	mask-image: linear-gradient(135deg,
		#000 calc(var(--sakura_mask) * 130% - 30%),
		rgba(0, 0, 0, 0) calc(var(--sakura_mask) * 130%));
}

/* KV背景の下端を黒へグラデーションでなじませる。範囲は .kv_wrap の --kv_fade_height で調整する */
.kv_wrap::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: var(--kv_fade_height);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 60%, #000 100%);
	pointer-events: none;
}

.kv_visual {
	position: relative;
	flex-shrink: 0;
	width: 50%;
	text-align: center;
}

/* KV本体だけはオーバーレイより前面に出して暗くしない */
.kv_visual > picture {
	display: block;
	position: relative;
	z-index: 1;
}

.kv_visual img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100vh;
	max-height: 100svh;
	margin: 0 auto;
}

/* KVの裏だけに専用のモノクロ画像を敷く（周囲の黒に溶け込ませる） */
.kv_visual_bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.kv_visual .kv_visual_bg img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover; /* 縦長の背景画像をKVの範囲いっぱいに収める */
	filter: blur(6px) brightness(0.9); /* 画像側でモノクロ済みなのでブラーは控えめに */
	transform: scale(1.2); /* ブラーの端のにじみを外に逃がす */
	opacity: 1;
	/* 縦は本体KVの上下端より内側で消し切り（はみ出しを見せない）、横だけ広げてにじませる */
	-webkit-mask-image: radial-gradient(74% 41% at 50% 50%, #000 68%, transparent 100%);
	mask-image: radial-gradient(74% 41% at 50% 50%, #000 68%, transparent 100%);
}

.slide1_text {
	position: relative;
	z-index: 1; /* オーバーレイより前面 */
	width: 50%;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}

/* 10周年ロゴ（傘パーツを重ねてGSAPで出現させる） */
.slide1_logo {
	position: relative;
	width: 32%;
	aspect-ratio: 1000 / 1295; /* 元ロゴ画像と同じ比率。中身は全部absoluteなので高さの基準が必要 */
	margin: 0 auto;
}

.slide1_logo img {
	display: block;
	width: 100%;
}

/* kasa.png / kasa2.png は元ロゴの傘と同じ位置・同じ大きさ（1000×1295 の中の 990×990・上10px） */
.slide1_logo .slide1_kasa,
.slide1_logo .slide1_kasa2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 99%;
	margin-top: 1%; /* %の上マージンは幅基準なので、拡大縮小しても傘とズレない */
}

/* 10th Anniversary（埋め込みSVG）：元ロゴの白文字とぴったり同じ位置・大きさ */
.slide1_logo .slide1_10th {
	position: absolute;
	top: 0;
	left: 11.1%;
	width: 76.6%;
	margin-top: 89.85%;
}

.slide1_logo .slide1_10th svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.slide1_lead {
	color: var(--tk-white);
	font-size: 1.5em;
	letter-spacing: 4px;
	margin: 50px 0 0;
}

.slide1_title {
	color: var(--tk-gold-smoke);
	font-size: 4.4em;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: 8px;
	margin: 0;
	will-change: transform; /* scaleアニメ中に文字を再ラスタライズさせない（カクつき対策） */
}

.slide1_sub {
	color: var(--tk-gold-light);
	font-size: 1.35em;
	letter-spacing: 3px;
	margin: 20px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--tk-line);
}

.slide1_date {
	color: var(--tk-gold);
	font-size: 1.35em;
	font-family: var(--font-Garamond);
	letter-spacing: 4px;
	margin: 30px 0 0;
}

.slide1_scroll {
	position: absolute;
	bottom: 16px;
	left: 50%;
	text-align: center;
	transform: translateX(-50%);
}

.slide1_scroll span {
	display: block;
	color: var(--tk-gray);
	font-size: 0.7em;
	font-family: var(--font-Garamond);
	letter-spacing: 3px;
}

.slide1_scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 50px;
	background: linear-gradient(to bottom, var(--tk-gold), rgba(201, 168, 106, 0));
	margin: 10px auto 0;
}


/* Slide2 / Story */
#slide2 {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background-color: var(--tk-black);
}

/* 青海波の背景（元画像サイズ 483px で敷く。濃さは opacity で調整） */
#slide2::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-image: url("../images/bg/seigaiha.png");
	background-repeat: repeat;
	background-size: 660px auto;
	opacity: 0.03;
}

/* 装飾の雲（左上・右下） */
.slide2_kumo {
	display: block;
	position: absolute;
	z-index: -1;
	height: auto;

	/* イントロ演出用。gsap-script.js が本文に合わせて 0→1 へ動かす。
	   初期値 1 ＝ 演出なしの完成形なので、JS が動かない環境でも通常表示される。
	   --kumo_opacity と掛け算にすることで、雲ごとの濃さを1箇所で管理できる */
	--kumo_reveal: 1;
	opacity: calc(var(--kumo_opacity) * var(--kumo_reveal));
}

.slide2_kumo_left {
	top: 150px;
	left: -10px;
	width: calc(480 / 1920 * 100vw);
	--kumo_opacity: 0.45;
}

.slide2_kumo_right {
	right: -10px;
	bottom: 150px;
	width: calc(500 / 1920 * 100vw);
	--kumo_opacity: 0.2;
}

.slide2_txt {
	text-align: center;
	font-size: 1.1em;
	line-height: 3;
	letter-spacing: 2px;
}

.slide2_txt p {
	margin: 0 0 34px;
}

.slide2_last {
	color: var(--tk-gold-light);
	font-size: 1.2em;
	margin-top: 50px !important;
	margin-bottom: 0 !important;
}


/* Slide3 / Outline */
/* 背景：純黒（#000）から、右下へ向かってごくわずかに持ち上げる斜めグラデーション。
   105deg = 水平から 15 度傾けた向き。
   色差は最大でも 19/255 程度に抑え、バンディングが出ない範囲にとどめている */
#slide3 {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background-color: #000; /* グラデ非対応時のフォールバック */
	background-image: linear-gradient(105deg,
		#000 0%,
		#000 25%,
		var(--tk-black) 62%,
		#131110 100%);
}

/* 円の装飾。見出しから時間差で浮かび上がる（gsap-script.js が --en_reveal を 0→1）。
   初期値 1 ＝ 演出なしの完成形なので、JS が動かない環境でも通常表示される */
.slide3_namien {
	display: block;
	position: absolute;
	top: -70px;
	left: -150px;
	z-index: -1;
	width: 600px;
	height: auto;
	pointer-events: none;
	--en_opacity: 0.17;
	--en_reveal: 1;
	opacity: calc(var(--en_opacity) * var(--en_reveal));
}

.event_title {
	background-color: var(--tk-gold);
	margin: 0 0 25px;
	padding: 5px;
}

.event_title p {
	color: #000;
	font-size: 1em;
	line-height: 1.6;
	font-weight: 700;
	text-align: center;
	border: thin solid #000;
	margin: 0;
	padding: 10px 20px;
}

.event_title .title_flex {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	color: #000;
	font-size: 1.2em;
	line-height: 1.6;
	font-weight: 700;
	width: 100%;
	border: thin solid #000;
    margin: 0;
	padding: 10px;
}

.event_title .title_flex .place {
	font-size: 1.2em;
	margin-right: 40px;
}

.event_title .title_flex .wd {
	font-size: 0.8em;
	margin-left: -7px;
}

.slide3_venue_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
}

.slide3_venue {
	width: 48.5%;
	padding: 40px 34px;
	border: 1px solid var(--tk-line-weak);
	background-color: rgba(0, 0, 0, 0.5);
}

/* アクセスのすぐ下に左寄せで置く。
   btn.css の .btn001.is-small（margin: 22px auto 0）と同詳細度だと
   後読みの btn.css が勝つため、クラスを1つ足して上回らせている */
.slide3_venue .btn001.is-small {
	margin-left: 0;
	margin-right: auto;
}

.slide3_venue_label {
	display: inline-block;
	color: var(--tk-black);
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 5px;
	background-color: var(--tk-gold);
	margin: 0 0 18px;
	padding: 0 26px;
}

.slide3_venue_date {
	color: var(--tk-gold-light);
	font-size: 1.1em;
	line-height: 1.7;
	font-weight: 600;
	letter-spacing: 2px;
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--tk-line-weak);
}

.slide3_venue_date .wd {
	font-size: 0.75em;
}

.slide3_venue_data {
	font-size: 0.92em;
	line-height: 1.9;
	margin: 0;
}

.slide3_venue_data dt {
	color: var(--tk-gold);
	font-size: 0.88em;
	letter-spacing: 2px;
	margin-bottom: 2px;
}

.slide3_venue_data dd {
	color: var(--tk-white);
	margin: 0 0 18px;
}

.slide3_venue_data dd:last-child {
	margin-bottom: 0;
}

.slide3_venue a {
	color: var(--tk-gold-light);
	text-decoration: underline;
}


/* Slide4 / Exhibition */
#slide4 {
	background-color: var(--tk-black);
}

.slide4_read {
	color: var(--tk-gray);
	font-size: 1.05em;
	text-align: center;
	letter-spacing: 2px;
	margin: -20px 0 60px;
}

/* 1pxの区切り線は各章の border で作る（gap は使わない） */
.slide4_chapter_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--tk-line-weak);
	border-left: 1px solid var(--tk-line-weak);
}

.slide4_chapter {
	width: 50%;
	background-color: var(--tk-black);
	padding: 40px 34px;
	border-right: 1px solid var(--tk-line-weak);
	border-bottom: 1px solid var(--tk-line-weak);
	transition: background-color 0.3s ease;
}

.slide4_chapter:hover {
	background-color: var(--tk-black-soft);
}

/* Introduction は全幅（以降6章が2列×3行で割り切れる） */
.slide4_chapter_wide {
	width: 100%;
}

.slide4_chapter_no {
	color: var(--tk-gold);
	font-size: 0.85em;
	font-family: var(--font-Garamond);
	letter-spacing: 4px;
	margin: 0 0 12px;
}

.slide4_chapter_ttl {
	font-size: 1.25em;
	line-height: 1.6;
	font-weight: 600;
	letter-spacing: 2px;
	margin: 0 0 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--tk-line-weak);
}

.slide4_chapter_txt {
	color: var(--tk-gray);
	font-size: 0.92em;
	line-height: 2;
	margin: 0;
}

.slide4_chapter_txt .cap {
	display: block;
	color: var(--tk-crimson);
	font-size: 0.9em;
	margin-top: 10px;
}


/* Slide5 / Audio（Locatone） */
/* 背景：slide3（105deg）とちょうど 180 度逆向きの斜めグラデーション。
   slide3 は左上が純黒／右下が持ち上がるので、こちらは右下が純黒になる */
#slide5 {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background-color: #000; /* グラデ非対応時のフォールバック */
	background-image: linear-gradient(295deg,
		#000 0%,
		#000 25%,
		var(--tk-black) 62%,
		#131110 100%);
}

/* 円の装飾。slide3 は左上なので、こちらは右上に置いて対にする */
.slide5_namien {
	display: block;
	position: absolute;
	top: -150px;
	right: -150px;
	z-index: -1;
	width: 600px;
	height: auto;
	pointer-events: none;
	--en_opacity: 0.12;
	--en_reveal: 1;
	opacity: calc(var(--en_opacity) * var(--en_reveal));
}

.slide5_body {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 50px 40px;
	border: 1px solid var(--tk-line-weak);
}

.slide5_ttl {
	color: var(--tk-gold-light);
	font-size: 1.5em;
	line-height: 1.6;
	text-align: center;
	font-weight: 600;
	letter-spacing: 4px;
	margin: 0 0 26px;
}

.slide5_ttl span {
	display: block;
	color: var(--tk-gray);
	font-size: 0.62em;
	letter-spacing: 3px;
}

.slide5_txt {
	font-size: 0.98em;
	line-height: 2.2;
	margin: 0 0 28px;
}

.slide5_list {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.slide5_list li {
	position: relative;
	color: var(--tk-gray);
	font-size: 0.92em;
	margin-bottom: 10px;
	padding-left: 22px;
}

.slide5_list li::before {
	content: "";
	position: absolute;
	top: 0.9em;
	left: 0;
	width: 8px;
	height: 1px;
	background-color: var(--tk-gold);
}

.slide5_route_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* A・B の音声ガイド。和紙テクスチャ（700x385）を敷くため、
   文字色はサイト全体の白金ではなく、紙に載る濃色に切り替えている */
.slide5_route {
	display: block;
	width: 48.5%;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 28px 20px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	/* transition: opacity 0.3s ease; */
}

/*
.slide5_route:hover {
	opacity: 0.8;
}
 */

/* リンク一時停止中（.slide5_route は a 自身に付いている） */
a.slide5_route {
	pointer-events: none;
}

.slide5_route_a {
	background-image: url("../images/slide5/a_bg.jpg");
}

.slide5_route_b {
	background-image: url("../images/slide5/b_bg.jpg");
}

.slide5_route_en {
	color: #4E3C17;
	font-size: 2.5rem;
	line-height: 1;
	font-family: var(--font-Garamond);
	font-weight: 700;
	margin: 0;
}

.slide5_route_ja {
	color: #241F1A;
	font-size: 1.3rem;
	letter-spacing: 4px;
	font-weight: 600;
	margin: 12px 0 0;
}

.slide5_route_name {
	color: #554C40;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 2px;
	margin: 6px 0 0;
}

.slide5_note {
	color: var(--tk-gray);
	font-size: 0.82em;
	margin: 20px 0 0;
}


/* Slide6 / News */
#slide6 {
	background-color: var(--tk-deep-purple);
}

.slide6_news {
	width: 100%;
	border-top: 1px solid var(--tk-line-weak);
}

.slide6_news dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
	margin: 0;
	padding: 22px 4px;
	border-bottom: 1px solid var(--tk-line-weak);
}

.slide6_news dt {
	flex-shrink: 0;
	width: 120px;
	color: var(--tk-gold);
	font-family: var(--font-Garamond);
	letter-spacing: 2px;
	margin-right: 30px;
}

.slide6_news dd {
	flex: 1;
	font-size: 0.95em;
	margin: 0;
}

.slide6_note {
	color: var(--tk-gray);
	font-size: 0.85em;
	margin: 24px 0 0;
}


/* Slide7 / Ticket */
#slide7 {
	background-color: var(--tk-deep-purple);
}

.slide7_ticket {
	text-align: center;
	padding: 46px 34px;
	border: 1px solid var(--tk-line);
}

.slide7_ticket.bg {
	background-color: var(--tk-deep-purple);
}

.slide7_ticket .price_ti {
    display: block;
    color: var(--tk-white);
    font-size: 1.2rem;
    font-family: var(--font-mincho);
    letter-spacing: 2px;
	margin: 0;
}

.slide7_ticket_price {
	color: var(--tk-white);
	font-size: 3em;
	line-height: 1.2;
	font-family: var(--font-Garamond);
	letter-spacing: 2px;
	margin: 0;
}

.slide7_ticket_price .yen {
	font-size: 0.4em;
	font-family: var(--font-mincho);
	margin-left: 4px;
}

.slide7_ticket_price .tax {
	display: block;
	color: var(--tk-gray);
	font-size: 0.9rem;
	line-height: 1.9;
	font-weight: 600;
	font-family: var(--font-mincho);
	letter-spacing: 2px;
	margin-top: 15px;
}

.slide7_ticket_note {
	color: var(--tk-gray-light);
	font-size: 0.85rem;
	line-height: 2;
	text-align: left;
	margin: 80px 0 0;
}


/* Slide8 / 展示替え */
#slide8 {
	position: relative;
	z-index: 0;
	overflow: hidden;
	background-color: var(--tk-black);
}

/* 桜を表示するコンテナのスタイル */
/* position は付けない。花びらの基準を #slide8 にして、
   セクションの上下 padding まで含めた全体に降らせるため
   （overflow: hidden はレイアウト維持用。基準が外側なので花びらは切らない） */
.cherry-blossom-container {
  height: 100%; /* コンテナの高さ */
  width: 100%; /* コンテナの横幅 */
  overflow: hidden; /* コンテナからはみ出した要素を隠す */
  padding-bottom: 50px;
}

/* 桜の花びらのスタイル */
/* 落下距離・所要時間・回転量は sakura.js が
   セクションの実高さから算出してカスタムプロパティで渡す */
.petal {
  position: absolute;
  top: 0;
  background-color: #A87F7E; /* 花びらの色：燻し金 */
  border-radius: 150% 0 150% 0;
  animation: animate-petal var(--petal-duration, 10s) linear forwards;
  z-index: -1; /* テキストの背面。#slide8 が z-index:0 で文脈を作っているので背景色より前に出る */
}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--tk-gold-smoke);
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

/* 花びらが降るアニメーション */
/* top ではなく transform で動かすことで、落下中のレイアウト計算を避ける */
@keyframes animate-petal {
  0% {
    opacity: 0;
    transform: translateY(var(--petal-from, 0px)) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  97% { /* 消え始めを遅らせ、下端近くまで見せる */
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(var(--petal-to, 100vh)) rotate(var(--petal-spin, 3000deg));
  }
}

.slide8_lead {
	font-size: 0.98em;
	line-height: 2.2;
	text-align: center;
	margin: 0 0 40px;
}

/* 各期間へのページ内リンク。右端に「くの字」 */
.slide8_anchor {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 0 50px;
	padding: 0;
	list-style: none;
}

.slide8_anchor li {
	margin: 0 20px;
}

.slide8_anchor a {
	display: inline-block;
	position: relative;
	color: var(--tk-gold-light);
	font-size: 0.95em;
	font-weight: 700;
	text-decoration: none;
	padding: 0 20px 0 0;
	transition: color 0.3s;
}

.slide8_anchor a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

.slide8_anchor a:hover {
	color: var(--tk-gold);
}

.slide8_term {
	background-color: rgba(0, 0, 0, 0.8);
	margin: 0 0 24px;
	padding: 40px 34px;
	border: 1px solid var(--tk-line-weak);
}

.slide8_term_label {
	display: inline-block;
	color: var(--tk-black);
	font-size: 1.15em;
	font-weight: 700;
	letter-spacing: 5px;
	background-color: var(--tk-gold);
	margin: 0 0 18px;
	padding: 0 26px;
}

.slide8_term_date {
	color: var(--tk-gold-light);
	font-size: 1.05em;
	line-height: 1.7;
	font-weight: 600;
	letter-spacing: 2px;
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--tk-line-weak);
}

.slide8_term_date .wd {
	font-size: 0.75em;
}

/* パターン①：衣裳／刀の大区分（前期日程のみ試験適用） */
.slide8_term_cat {
	margin: 0 0 30px;
}

.slide8_term_cat:last-child {
	margin-bottom: 0;
}

/* 背景の波線は 529x98。--namisen_w で幅を決め、その比率から必要な高さを
   算出して min-height に与えている。
   これがないと「行高 + padding-bottom」が画像の高さをわずかに下回り
   （200px 指定時：箱 36.88px / 画像 37.05px）、Safari で下端が切れる。
   幅を変えるときは --namisen_w だけ書き換えれば高さも追従する */
.slide8_term_cat_ttl {
	--namisen_w: 200px;
	color: var(--tk-moss-green);
	font-size: 1.2em;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 10px;
	background: url(../images/slide8/namisen.png) no-repeat;
	background-size: var(--namisen_w) auto; /* ← 必ず background の「後ろ」に書く */
	min-height: calc(var(--namisen_w) * 98 / 529 + 2px);
	margin: 60px 0 25px;
	padding: 0 0 10px 90px;
}

/* dt を持たない一覧（「刀」区分）。dd と同じ字下げにして衣裳側と行頭を揃える */
.slide8_names {
	color: var(--tk-white);
	font-size: 0.92em;
	line-height: 2;
	margin: 0;
	padding-left: 22px;
}

.slide8_term_data {
	font-size: 1em;
	line-height: 2;
	margin: 0;
}

/* 見出し（初の姿／内番／極／祝装／刀）は slide5 のリストと同じ金の罫で揃える */
.slide8_term_data dt {
	position: relative;
	color: var(--tk-gold);
	letter-spacing: 3px;
	margin-bottom: 2px;
	padding-left: 22px;
}

.slide8_term_data dt::before {
	content: "";
	position: absolute;
	top: 1em;
	left: 0;
	width: 8px;
	height: 1px;
	background-color: var(--tk-gold);
}

.slide8_term_data dd {
	color: var(--tk-white);
	margin: 0 0 22px;
	padding-left: 22px;
}

.slide8_term_data dd:last-child {
	margin-bottom: 0;
}

.slide8_note {
	color: var(--tk-gray);
	font-size: 0.85em;
	line-height: 1.9;
	margin: 24px 0 0;
}

.recommend_p {
	color: var(    --tk-gray);
	font-size: 1rem;
}


/* Footer */
footer {
	margin-top: auto;
	background-color: var(--tk-black);
	border-top: 1px solid var(--tk-line-weak);
}

.footer_link {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 100%;
	margin: 30px 0 0;
	padding: 0;
}

.footer_link div {
	color: var(--tk-gray);
    font-size: 0.8em;
	line-height: 1;
    margin: 0 30px 0 0;
}

.footer_link div a {
	display: inline-block;
	position: relative; /* ::after のライン（下線）の基準 */
	color: var(--tk-gray);
	padding-bottom: 4px;
}

/* グローバルメニューと同じく、hover で左から下線が伸びる */
.footer_link div a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background-color: var(--tk-gray);
	transition: width 0.3s ease;
}

.footer_link div a:hover {
	color: var(--tk-gray);
	text-decoration: none;
}

.footer_link div a:hover::after {
	width: 100%;
}

.footer_01 {
	width: 100%;
	text-align: center;
	padding: 60px 0 40px;
}

.footer_ttl {
	color: var(--tk-white);
	font-size: 0.9em;
	line-height: 2;
	letter-spacing: 3px;
	margin: 0;
}

.footer_ttl span {
	color: var(--tk-gray);
	font-size: 1.5em;
	font-weight: bold;
}

.copyright {
	margin-top: 30px;
}

.copyright small {
	color: var(--tk-gray);
	font-size: 0.75em;
	font-family: var(--font-Garamond);
	letter-spacing: 2px;
}


/* Slide9 */
#slide9 {
	background-color: var(--tk-deep-purple);
}

/* 下層ページ（news／ticket／contact）は本文が短いと、footer（margin-top: auto）との間に
   body の地色（墨黒）が帯状に出る。その隙間を #slide9 と同じ色にしてつなげる。
   トップには #slide9 が無いので影響しない */
body:has(#slide9) {
	background-color: var(--tk-deep-purple);
}



/* =========================================================
   NEWS（ヘッドレスWordPress配信）
   - #slide6 .news_wrap  … トップの抜粋アコーディオン
   - .newsPage           … news.html の一覧／単体ページ
   ========================================================= */

/* --- 共通の記事行 --- */
.news_wrap,
.newsPage {
	width: 100%;
	border-top: 1px solid var(--tk-line-weak);
}

.news_wrap details.js-details,
.newsPage details.js-details {
	background: transparent;
}

.news_wrap summary,
.newsPage summary {
	display: block;
	list-style: none;
}

.news_wrap summary::-webkit-details-marker,
.newsPage summary::-webkit-details-marker {
	display: none;
}

.news_wrap .summary_inner,
.newsPage .summary_inner {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 22px 4px;
	border-bottom: 1px solid var(--tk-line-weak);
	cursor: pointer;
}

/* トップ：開いている間は見出し下のラインを消す（本文の上に線を出さない）。
   is-opened は閉じ始めで外れるので、閉じ終わりで外れる [open] を見る。
   none にすると1pxぶん高さが跳ねるので、色だけ透明にする */
.news_wrap details[open] .summary_inner {
	border-bottom-color: transparent;
}

.news_wrap .summary_inner .txt_wrap,
.newsPage .summary_inner .txt_wrap {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex: 1;
}

.news_wrap .summary_inner .date,
.newsPage .summary_inner .date {
	flex-shrink: 0;
	margin: 0 20px 0 0;
	color: var(--tk-gold);
	font-family: var(--font-Garamond);
	letter-spacing: 2px;
}

/* 日付の1行目（line-height 2＝32px）に対して縦センター：
   カテゴリの高さ 約24px（0.7rem × 1.8 ＋ 上下padding 4px）なので上に4pxずらす */
.category {
	flex-shrink: 0;
	color: #000;
	font-size: 0.7rem;
	line-height: 1.8;
	text-align: center;
	font-weight: bold;
	background-color: var(--tk-gold);
	margin: 6px 30px 0 0;
	padding: 0;
	width: 80px;
}

.news_wrap .summary_inner .news_txt,
.newsPage .summary_inner .news_txt {
	flex: 1;
	margin: 0;
	font-size: 0.95em;
	text-align: left;
}

/* --- 開閉アイコン --- */
.news_wrap .detail_icon,
.newsPage .detail_icon {
	display: block;
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 10px;
	margin-left: 15px;
	transform-origin: center 43%;
	transition: transform 0.4s;
}

.news_wrap details.is-opened .detail_icon,
.newsPage details.is-opened .detail_icon {
	transform: rotate(180deg);
}

.news_wrap .detail_icon::before,
.news_wrap .detail_icon::after,
.newsPage .detail_icon::before,
.newsPage .detail_icon::after {
	content: "";
	position: absolute;
	top: 4px;
	display: block;
	width: 10px;
	height: 1px;
	background-color: var(--tk-gold);
}

.news_wrap .detail_icon::before,
.newsPage .detail_icon::before {
	left: 0;
	transform: rotate(45deg);
}

.news_wrap .detail_icon::after,
.newsPage .detail_icon::after {
	right: 0;
	transform: rotate(-45deg);
}

/* --- 本文 --- */
.news_wrap .content,
.newsPage .content {
	overflow: hidden;
}

.news_wrap .content_inner,
.newsPage .content_inner {
	padding: 24px 4px 30px;
	border-bottom: 1px solid var(--tk-line-weak);
}

.news_wrap .content_inner p,
.newsPage .content_inner p {
	font-size: 0.9em;
	line-height: 2;
	text-align: left;
	margin: 0 0 20px;
}

.news_wrap .content_inner p:last-child,
.newsPage .content_inner p:last-child {
	margin-bottom: 0;
}

.news_wrap .content_inner a,
.newsPage .content_inner a {
	color: var(--tk-gold-light);
	text-decoration: underline;
}

.news_wrap .content_inner a:hover,
.newsPage .content_inner a:hover {
	color: var(--tk-gold);
}

/* WordPress 配信の画像は <figure class="wp-block-image"> で包まれる */
.news_wrap .content_inner figure,
.newsPage .content_inner figure {
	margin: 0;
}

.news_wrap .content_inner img,
.newsPage .content_inner img {
	display: block;
	margin: 20px 0 30px;
	max-width: min(100%, 540px);
	height: auto;
}

/* --- トップ（#slide6）の抜粋 --- */
#slide6 .news_btnwrap {
	margin-top: 40px;
	text-align: center;
}

/* --- 本文なし＋リンク先ありの行（トップ・一覧共通） --- */
.news_wrap a.news-link,
.newsPage a.news-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.news_wrap a.news-link:hover .news_txt,
.newsPage a.news-link:hover .news_txt {
	color: var(--tk-gold-light);
}

.news_wrap .detail_icon--link,
.newsPage .detail_icon--link {
	transform: rotate(-90deg);
}

.news_wrap a.news-link:hover .detail_icon--link,
.newsPage a.news-link:hover .detail_icon--link {
	transform: rotate(-90deg) translateY(3px);
}

/* --- 本文もリンクも無い行：開閉させない --- */
.news_wrap .news-plain .summary_inner,
.newsPage .news-plain .summary_inner {
	cursor: default;
}

/* --- news.html 一覧ページ --- */
.newsPage {
	margin: 0 auto 40px;
}

/* --- news.html 単体ページ --- */
.newsPage .newsSingle {
	padding: 20px 0;
}

.newsPage .newsSingle__head {
	margin: 0 0 30px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--tk-line-weak);
}

.newsPage .newsSingle__head .date {
	margin: 0 0 10px;
	color: var(--tk-gold);
	font-family: var(--font-Garamond);
	letter-spacing: 2px;
}

.newsPage .newsSingle__title {
	margin: 0;
	font-size: 1.2em;
	line-height: 1.6;
	font-weight: 500;
	color: var(--tk-white);
}

.newsPage .newsSingle .content_inner {
	padding: 0 0 30px;
	border-bottom: none;
}

.newsPage .newsSingle__backwrap {
	margin-top: 20px;
	text-align: center;
}

/* 一覧へ戻る：細枠で囲んだシンプルなリンク。左に逆向きの「くの字」 */
.newsPage .newsSingle__backwrap a {
	display: inline-block;
	position: relative;
	color: var(--tk-gold);
	font-size: 0.9em;
	font-weight: 500;
	text-decoration: none;
	padding: 5px 30px 5px 44px;
	border: 1px solid currentColor;
	transition: color 0.3s;
	margin-top: 80px;
}

.newsPage .newsSingle__backwrap a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 24px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-left: 1px solid currentColor;
	transform: translateY(-50%) rotate(-45deg);
}

.newsPage .newsSingle__backwrap a:hover {
	color: var(--tk-gold-light);
}

/* --- news.html のページ見出し（下層ページ用の上部余白） --- */
.newsPage_head {
	padding-top: var(--headerH);
}




/* =========================================================
   お問い合わせフォーム（contact.html）
   ========================================================= */

/* ヘッダーは position: fixed で本文に重なるため、その高さ分を上乗せする。
   .slide の余白は画面幅ごとに変わるので、詳細度を上げて常にこちらを効かせる */
.slide.page_head {
	padding-top: calc(var(--headerH) + clamp(48px, 8vw, 100px));
}

.contactPage {
	width: 100%;
	margin: 0 auto 40px;
}

/* --- 入力／確認／完了のステップ表示（◯ ― ◯ ― ◯） --- */
.contact_steps {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	max-width: 440px;
	margin: 0 auto 60px;
	padding: 0;
	list-style: none;
}

.contact_steps li {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	color: var(--tk-gray);
	font-size: 0.85em;
	letter-spacing: 2px;
}

/* 前の丸から自分の丸までをつなぐライン */
.contact_steps li + li::before {
	content: "";
	position: absolute;
	top: 18px;
	right: 50%;
	width: 100%;
	height: 2px;
	background-color: var(--tk-line-weak);
	transform: translateY(-50%);
}

.contact_steps li.is-done::before,
.contact_steps li.is-current::before {
	background-color: var(--tk-gold);
}

.contact_steps_num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--tk-gray);
	font-family: var(--font-Garamond);
	font-size: 1.35em;
	font-weight: 600;
	font-variant-numeric: lining-nums;
	line-height: 1;
	letter-spacing: 0;
	background-color: var(--tk-black);
	border: 2px solid var(--tk-line);
	border-radius: 50%;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.contact_steps li.is-done .contact_steps_num,
.contact_steps li.is-current .contact_steps_num {
	color: var(--tk-black);
	background-color: var(--tk-gold);
	border-color: var(--tk-gold);
}

/* 現在地だけ外側に淡い輪を付けて目立たせる */
.contact_steps li.is-current .contact_steps_num {
	box-shadow: 0 0 0 6px rgba(201, 168, 106, 0.22);
}

.contact_steps li.is-done .contact_steps_label {
	color: var(--tk-gold);
}

.contact_steps li.is-current .contact_steps_label {
	color: var(--tk-gold-light);
	font-weight: 600;
}

/* --- 説明文 --- */
.contact_lead {
	font-size: 0.92em;
	line-height: 2;
	text-align: center;
	margin: 0 0 40px;
}

.contact_req_note {
	color: var(--tk-gray);
	font-size: 0.9em;
}

.contact_note {
	color: var(--tk-gray);
	font-size: 0.85em;
	line-height: 2;
	text-align: center;
	margin: 30px 0 0;
}

/* --- 入力行 --- */
.contact_row {
	display: flex;
	align-items: flex-start;
	padding: 24px 0;
	border-bottom: 1px solid var(--tk-line-weak);
}

.contact_row:first-of-type {
	border-top: 1px solid var(--tk-line-weak);
}

.contact_label {
	flex-shrink: 0;
	width: 260px;
	padding-top: 10px;
	padding-right: 20px;
	font-size: 0.95em;
	line-height: 1.6;
}

.contact_field {
	flex: 1;
	min-width: 0;
}

.contact_label .req,
.contact_label .any,
.contact_check .req {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 8px;
	font-size: 0.7em;
	letter-spacing: 1px;
	vertical-align: middle;
	border-radius: 2px;
	margin-bottom: 5px;
}

.contact_label .req,
.contact_check .req {
	color: var(--tk-white);
	background-color: var(--tk-crimson);
}

.contact_label .any {
	color: var(--tk-gray);
	border: 1px solid var(--tk-line-weak);
}

/* --- 入力欄 --- */
.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form select,
.contact_form textarea {
	width: 100%;
	padding: 12px 14px;
	color: var(--tk-black);
	font-family: var(--font-mincho);
	font-size: 1em;
	line-height: 1.8;
	background-color: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-radius: 2px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact_form textarea {
	resize: vertical;
}

.contact_form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--tk-gold-deep) 50%), linear-gradient(135deg, var(--tk-gold-deep) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.contact_form input::placeholder,
.contact_form textarea::placeholder {
	color: #9A9285;
	opacity: 1;
}

.contact_form input:focus,
.contact_form select:focus,
.contact_form textarea:focus {
	outline: none;
	border-color: var(--tk-gold);
	box-shadow: 0 0 0 3px rgba(201, 168, 106, 0.45);
}

.contact_form .is-error {
	border-color: var(--tk-crimson);
	box-shadow: 0 0 0 1px var(--tk-crimson);
}

/* --- エラー文言 --- */
.contact_error {
	color: #e08585;
	font-size: 0.85em;
	line-height: 1.8;
	margin: 8px 0 0;
}

.contact_error:empty {
	display: none;
}

.contact_error--global {
	text-align: center;
	margin: 0 0 20px;
}

/* --- ハニーポット（人には見せない） --- */
.contact_hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- プライバシーポリシー同意 --- */
.contact_privacy {
	margin: 34px 0 0;
	text-align: center;
}

.contact_check {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 0.95em;
	cursor: pointer;
}

.contact_check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--tk-gold-deep);
	flex-shrink: 0;
}

.contact_check a {
	color: var(--tk-gold-light);
	text-decoration: underline;
}

.contact_check a:hover {
	color: var(--tk-gold);
}

/* --- ボタン --- */
.contact_btnwrap {
	margin: 44px 0 0;
	text-align: center;
}

.contact_btnwrap--confirm {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.contact_btnwrap .btn001.is-sending a {
	pointer-events: none;
	opacity: 0.5;
}

/* --- お問い合わせ・チケットページのボタンは金にする（サイト共通の .btn001 は紫紺のまま） ---
   btn.css と同じく、明度を往復させた箔押し風グラデーションを倍幅で敷き、
   hover で position を送って照りを横に流す */
.contactPage .btn001 a {
	color: var(--tk-black);
	background-color: var(--tk-gold);
	background-image: linear-gradient(135deg,
		var(--tk-gold-deep) 0%,
		var(--tk-gold) 26%,
		var(--tk-gold-light) 44%,
		var(--tk-gold) 62%,
		var(--tk-gold-deep) 100%);
	background-size: 200% 100%;
	background-position: 0 0;
	border: 1px solid var(--tk-gold-light);
}

.contactPage .btn001 a::after {
	border-top-color: var(--tk-black);
	border-right-color: var(--tk-black);
}

.contactPage .btn001 a:hover,
.contactPage .btn001 a:focus-visible {
	color: var(--tk-black);
	background-position: 100% 0;
}

.contactPage .btn001 a:focus-visible {
	outline: 2px solid var(--tk-gold-light);
	outline-offset: 3px;
}

/* --- 確認画面 --- */
.contact_confirm {
	margin: 0;
	border-top: 1px solid var(--tk-line-weak);
}

.contact_confirm dt {
	padding: 20px 0 0;
	color: var(--tk-gold);
	font-size: 0.85em;
	letter-spacing: 1px;
}

.contact_confirm dd {
	margin: 6px 0 0;
	padding: 0 0 20px;
	font-size: 0.95em;
	line-height: 1.9;
	border-bottom: 1px solid var(--tk-line-weak);
	overflow-wrap: anywhere;
}

/* --- 完了画面 --- */
.contact_done_ttl {
	color: var(--tk-gold);
	font-size: 1.3em;
	line-height: 1.8;
	text-align: center;
	margin: 0 0 24px;
}


/* --- チケットページ --- */
.ticket_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 30px;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 8px;
	box-shadow: 0 3px 0 var(--tk-gray);
}

.ticket_flex.mg_first {
	margin-top: -20px;
}

.ticket_flex.upcoming {
    background-color: var(--tk-gray-light);
}

.ticket_flex.end {
    background-color: var(--tk-gray);
    position: relative;
}

.end_label {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    color: var(--tk-white);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    background-color: var(--tk-silver);
    border-radius: 4px;
    padding: 7px 14px;
    margin: 0;
}

.ticket_flex .description {
	flex: 1; /* ボタン（幅固定）を除いた残りを全部使う */
	min-width: 0; /* 長い文字でもボタンを押し出さない */
	margin: 0;
	padding: 0;
}

.ticket_flex .title {
    color: var(--tk-purple-bright);
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: 1px;
	margin: 0 0 15px;
	padding-bottom: 5px;
	position: relative;
	border-bottom: solid 2px var(--tk-purple-bright);
}

.ticket_flex .title.no_color {
    color: #888;
	border-bottom: solid 2px #bbb;
}

.ticket_flex .sales_period {
    color: var(--tk-black);
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 500;
	margin: 0 0 8px;
}

.ticket_flex .sales_period span {
	display: inline-block;
}

.for_fan {
	color: var(--tk-black);
	font-size: 0.85rem;
    line-height: 1.8;
	margin: 20px 0 0;
}

/* 申し込むボタンは .btn001（お問い合わせと同じ金）を使う。
   横並び用に .btn001 の margin: 40px auto 0 を打ち消し、文字との間だけあける。
   幅・高さは a で決めるので、.btn001 の width: 280px は auto に戻す。縮ませない */
.ticket_flex .buy_btn {
	flex-shrink: 0;
	width: auto;
	margin: 0 0 0 30px;
}

.ticket_flex .buy_btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative; /* くの字（::after）の基準 */
	width: 180px;
	height: 48px;
	font-size: 0.95rem;
	line-height: 1;
	font-weight: 500;
	margin: 0;
	padding: 0 44px 0 24px;
	border-radius: 6px;
	background-color: var(--tk-purple-bright);
}

/* hover は控えめに。.btn001 の浮き（-3px）と濃い影を弱める（照りの流れはそのまま） */
.ticket_flex .buy_btn a:hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 右端の白い「くの字」。.btn001 を外したのでここで形から描く */
.ticket_flex .buy_btn a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 18px;
	width: 8px;
	height: 8px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: translateY(-50%) rotate(45deg);
}

.ticket_flex .buy_btn a:hover,
.ticket_flex .buy_btn a:focus-visible {
	color: #fff;
	background-position: 100% 0;
}

.ticket_flex .buy_btn a:focus-visible {
	outline: 2px solid var(--tk-gold-light);
	outline-offset: 3px;
}

/* recommend は外側の div（.buy_btn）に付いているので、その中の a を指す */
.ticket_flex .buy_btn.recommend a {
	pointer-events: none;
	background-color: #aaa;
}

.display_none {
	display: none;
}


/*フローティングバナー*/
.floating-banner {
    position: fixed;
    bottom: -5px;
    right: 5px;
    z-index: 999;
    cursor: pointer;
    opacity: 0;
	width: 120px;
}

.floating-banner img {
    width: 100%;
}


/* hidden */
.hidden_pc {
	display: none;
}

.hidden_sp {
	display: block;
}



@media screen and (max-width: 1280px) {
/* 共通-1280 */
.slide {
	padding: 100px 0;
}

/* Header-1280 */
.main_menu li {
	margin-left: 26px;
}

.slide1_title {
	font-size: 3.6rem;
	letter-spacing: 5px;
}
}


@media screen and (max-width: 1024px) {
/* 共通-1024 */
:root {
	--headerH: 72px;
}

/* Header-1024（ここからハンバーガー／fat-nav に切り替わる） */
.header {
	padding: 0 80px 0 4%; /* 右はハンバーガーのぶん空ける */
}

.h1_mov {
	max-width: calc(100% - 70px);
}

h1 {
	font-size: 0.62em;
	letter-spacing: 1px;
}

h1 span {
	font-size: 1.4em;
	letter-spacing: 4px;
}

.header_menu {
	display: none;
}

.section_title {
	font-size: 1.9em;
}

/* slide1-1024（横並びのまま。縦積みは640以下） */
/* 横並びだとKVが画面高より小さくなるので、100svh固定をやめて中身の高さ＋余白で組む
   （そのまま100svhにすると、KVの下に大きな空白ができてしまう） */
#slide1 {
	min-height: 0;
	padding: 72px 0 0; /* 上の余白はSP（.kv_wrap）と同じ72pxに揃える */
}

/* 幅を少し絞って、左右と列間に余白を作る */
#slide1 .kv_wrap {
	justify-content: space-between;
	padding: 0 0 0 4%;
}

.slide1_text {
	width: 42%;
	margin: 0; /* autoマージンはflexの余白を全部吸ってしまうので解除 */
}

.kv_visual {
	width: 50%;
}

/* 列幅が半分になるので、文字も1行に収まるサイズへ */
.slide1_lead {
	font-size: 1.2em;
	letter-spacing: 2px;
	margin-bottom: 5px;
}

.slide1_title {
	font-size: 2.8em;
	letter-spacing: 5px;
}

.slide1_sub {
	font-size: 1.15em;
	letter-spacing: 1px;
}

/* slide2-1024 */
.slide2_kumo_left {
	top: 100px;
}
}


@media screen and (max-width: 820px) {
/* 共通-820 */
.slide {
	padding: 80px 0;
}

.slide1_title {
	font-size: 2.6em;
}

.section_title_wrap {
	margin-bottom: 44px;
}

.section_title {
	font-size: 1.7em;
	letter-spacing: 6px;
}


/* slide2-820 */
#slide2 {
	padding-bottom: 180px;
}

.slide2_kumo_left {
	top: 80px;
	width: 280px;
}

.slide2_kumo_right {
	right: -10px;
	bottom: 50px;
	width: 350px;
}

/* slide3-1024 */
.slide3_venue {
	width: 100%;
	padding: 34px 26px;
}

.slide3_venue + .slide3_venue {
	margin-top: 28px;
}

/* slide4-820 */
.slide4_chapter {
	width: 100%;
	padding: 34px 26px;
}


/* slide4-820 */
.slide4_read {
	font-size: 0.98em;
}

/* チケットページ-820 */
/* 幅が狭くなるぶん左右の padding を詰める（右は矢印の逃げを残す） */
.ticket_flex .buy_btn a {
	width: 140px;
	margin: 0;
	padding: 0 34px 0 16px;
}
}


@media screen and (max-width: 768px) {
/* 共通-768 */
.slide {
	padding: 70px 0;
}

.section_title_wrap {
	margin-bottom: 38px;
}

.section_title_en {
	font-size: 0.72em;
	letter-spacing: 4px;
}

/* slide1-768 */
.slide1_lead {
	font-size: 1em;
}

.slide1_title {
	font-size: 2.3em;
	letter-spacing: 4px;
}

.slide1_sub {
	font-size: 1.05em;
	letter-spacing: 0.5px;
}

/* slide3-768 */
.slide3_venue_date {
	font-size: 1.02em;
}

/* slide4-768 */
.slide4_chapter_ttl {
	font-size: 1.02em;
	line-height: 1.7;
}

/* slide5-768 */
.slide5_ttl {
	font-size: 1.2em;
}

/* footer-768 */
.footer_ttl {
	font-size: 0.9em;
}
}


@media (min-width: 767px) {
/* PCでは電話リンクを無効化 */
a[href*="tel:"] {
	pointer-events: none;
	cursor: default;
	text-decoration: none;
}
}


@media screen and (max-width: 640px) {
/* 共通-sp */
:root {
	--headerH: 64px;
}

body {
	font-size: 0.94em;
	letter-spacing: 0.5px;
}

.slide {
	padding: 60px 0;
}

.section_title_wrap {
	margin-bottom: 32px;
}

.section_title {
	font-size: 1.45em;
	letter-spacing: 4px;
}

/* Header-sp */
.header {
	padding: 0 64px 0 4%; /* 右はハンバーガーのぶん空ける */
}

h1 {
	font-size: 0.56em;
}

h1 span {
	font-size: 1.35em;
	letter-spacing: 3px;
}

/* SNSアイコン-sp */
.header_sns {
    width: 30px;
    margin: 0 5px 0 16px;
}

/* slide1-sp（ここから縦積みに切り替え） */
#slide1 {
	display: block;
	padding: 0;
}

/* テキスト＋KVを縦積みにする。KVは幅100%固定なので、
   合計が画面高を超える場合はそのまま下に伸ばす */
#slide1 .kv_wrap {
	display: flex;
	flex-flow: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 72px 0 0;
	background-position: 0 -300px;

	/* SPの桜（PCと同じ意味。ここだけで上書きできる） */
	--sakura_width: 260px;
	--sakura_top: 0px;
	--sakura_left: 0px;
	--sakura_opacity: 0.5;
}

.slide1_text {
	flex: none;
	width: 100%;
	text-align: center;
	margin: 0 0 18px;
}

.slide1_lead {
	font-size: 1.05rem;
	letter-spacing: 3px;
	margin-top: 20px;
}

.slide1_title {
    font-size: 2.5em;
	margin-bottom: 10px;
}

.slide1_sub {
	margin-top: 14px;
	padding-top: 14px;
}

/* 幅は枠側で決める（高さは aspect-ratio まかせ／画面に収まらなくてよい）。
   枠＝画像の大きさにしておくと、裏の背景（.kv_visual_bg）もぴったり揃う */
.kv_visual {
	flex: none;
	align-self: center;
	width: 92%;
	aspect-ratio: 1200 / 1507;
	margin: 0 auto;
}

.kv_visual img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}

.kv_visual .kv_visual_bg img {
	filter: blur(4px) brightness(0.9);
	transform: scale(1.16);
}

/* slide2-sp */
#slide2 {
   padding-bottom: 130px;
}
	
.slide2_kumo_left {
	top: 30px;
	left: -20px;
	width: 160px;
}

.slide2_kumo_right {
	right: -10px;
	bottom: 40px;
	width: 200px;
}

.slide2_txt {
	font-size: 0.98em;
	line-height: 2.2;
	text-align: left;
}

.slide2_txt br {
	display: none;
}

/* slide3-sp */
.slide3_venue {
	padding: 26px 18px;
}

.slide3_venue_label {
	font-size: 1.05em;
	letter-spacing: 4px;
	padding: 5px 20px;
}

.slide3_venue_data dt {
	letter-spacing: 2px;
}

/* slide8-sp */
.slide8_lead {
	font-size: 0.95em;
	line-height: 2;
	text-align: left;
}

.slide8_anchor {
	margin: 0 0 30px;
}

.slide8_anchor li {
	width: 50%;
	text-align: center;
	margin: 0;
}

/* SPはflexを解除し、日付は通常の文章として流す。
   placeだけblockにして1行目に分ける */
.event_title .title_flex {
	display: block;
	font-size: 1rem;
	line-height: 1.6;
	padding: 5px 8px;
}

.event_title .title_flex .place {
	display: block;
	margin-right: 0;
}

.slide8_term {
	padding: 26px 18px;
}

.slide8_term_label {
	font-size: 1.05em;
	letter-spacing: 4px;
	padding: 5px 20px;
}

.slide8_term_date {
	font-size: 0.98em;
}

.slide8_term_data dt {
	letter-spacing: 2px;
}

/* 幅だけ差し替える。background-size と min-height は PC 側の
   calc がこの値を参照するので、ここでの再指定は不要 */
.slide8_term_cat_ttl {
	--namisen_w: 190px;
}


/* slide4-sp */
.slide4_chapter {
	padding: 26px 18px;
}

.slide4_chapter_ttl {
	font-size: 0.98em;
}

/* slide5-sp */
.slide5_body {
	padding: 28px 18px;
}

.slide5_route_wrap {
	display: block;
}

.slide5_route {
	width: 100%;
}

.slide5_route + .slide5_route {
	margin-top: 16px;
}

/* slide6-sp */
.slide6_news dl {
	display: block;
}

.slide6_news dt {
	width: auto;
	margin-right: 0;
}

/* news-sp */
.news_wrap .summary_inner,
.newsPage .summary_inner {
	padding: 16px 2px;
}

/* 日付＋カテゴリを1行目、タイトルを2行目に（wrap の行ごとに縦センター） */
.news_wrap .summary_inner .txt_wrap,
.newsPage .summary_inner .txt_wrap {
	flex-wrap: wrap;
	align-items: center;
}

.news_wrap .summary_inner .date,
.newsPage .summary_inner .date {
	margin: 0 10px 0 0;
}

.category {
	margin: 0;
}

.news_wrap .summary_inner .news_txt,
.newsPage .summary_inner .news_txt {
	flex: 0 0 100%;
	width: 100%;
	font-size: 0.9em;
	line-height: 1.8;
	margin: 4px 0 0;
}

.news_wrap .detail_icon,
.newsPage .detail_icon {
	margin-left: 10px;
}

.newsPage .newsSingle {
	padding: 30px 0 20px;
}

.newsPage .newsSingle__title {
	font-size: 1.15em;
}

/* slide7-sp */
.slide7_ticket {
	padding: 28px 18px;
}

.slide7_ticket_price {
	font-size: 2.5em;
}

/* footer-sp */
.footer_01 {
	padding: 40px 0 30px;
}

.footer_link {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer_link div:last-child {
	margin-right: 0;
}

.copyright {
	margin-bottom: 80px;
}

/* contact-sp */
.contact_steps {
	max-width: 320px;
	margin-bottom: 44px;
}

.contact_steps li {
	gap: 10px;
	font-size: 0.8em;
}

.contact_steps li + li::before {
	top: 15px;
}

.contact_steps_num {
	width: 30px;
	height: 30px;
	font-size: 1.15em;
}

.contact_row {
	display: block;
	padding: 18px 0;
}

.contact_label {
	width: auto;
	padding: 0 0 10px;
}

.contact_btnwrap--confirm {
	flex-direction: column-reverse;
	gap: 16px;
}

.contact_confirm dt {
	padding-top: 16px;
}


/* チケット-sp */
.ticket_flex {
    flex-direction: column;
	padding: 20px 15px;
	margin-bottom: 20px;
}

.end_label {
	top: 15px;
	right: 10px;
	transform: none;
	padding-right: 10px;
	padding-left: 10px;
}

.ticket_flex .title {
    font-size: 1.2rem;
}

.ticket_flex .buy_btn {
	margin: 0;
}

.ticket_flex .buy_btn a {
	margin-top: 20px;
}


/*フローティングバナーsp*/
.floating-banner {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    cursor: pointer;
    opacity: 0;
	width: 90px;
}


/* hidden-sp */
.hidden_pc {
	display: block;
}

.hidden_sp {
	display: none;
}
}