@charset "utf-8";


/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("theme.css");
@import url("inview.css");


/*animation11のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes animation1 {
	0% {right: -200px;}
	100% {right: 0px;}
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html {
	font-size: clamp(12px, 0.293vw + 10.9px, 15px);	/*画面幅約375px〜1400pxの間で、12px〜15pxに可変*/
	overflow-x: visible;
}
body {
	margin: 0;padding:0;
	font-family: var(--base-font);	/*フォント指定。theme.cssのbase-fontを読み込みます。*/
	-webkit-text-size-adjust: none;
	background: var(--bg-color);	/*背景色。*/
	color: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	line-height: 2;		/*行間*/
	overflow-x: hidden;
}
.pankuzu { 
	text-align: center; 
	font-size: 80%; 
	color:#464646; 

}
/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}


/*section
---------------------------------------------------------------------------*/
section {
	padding: 0 var(--content-space-l);	/*上下、左右へのsection内の余白。左右については、theme.cssの--content-space-lを読み込みます。*/
	margin: var(--content-space-l) 0;	/*上下、左右へのsectionの外側にとるマージン。上下については、theme.cssの--content-space-lを読み込みます。*/
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
	text-decoration: none;
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	animation: opa1 0.2s 0.2s both;  /*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダー*/
header {
    display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	height: 100px;	/*ヘッダーの高さ。お好みで。*/
	padding-inline: var(--content-space-s);	/*左右の余白。theme.cssのcontent-space-sを読み込みます*/
}

/*ロゴ画像*/
header .logo {margin: 0;flex-shrink: 0;}
header .logo img {
	display: block;
	width: 120px;	/*ロゴの幅。お好みで。*/
}

/*アイコンブロック*/
header .icons {
	display: flex;
	gap: 1rem;	/*アイコン同士の間に空けるスペース。1文字分。*/
}
header .icons a {
	text-decoration: none;
	font-size: 1.5rem;	/*アイコンサイズ。1.5倍。*/
}

	/*画面幅900px未満の追加指定*/
	@media (max-width:899px) {

	header .icons {
		margin-right: 50px;	/*ハンバーガーアイコンが出てくるので、その分のスペースを確保。*/
	}

	}/*追加指定ここまで*/


/*大きな端末で見たメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
.large-screen #menubar {
	font-size: 0.9rem;	/*文字サイズ90%*/
}
.large-screen #menubar > nav > ul {
	display: flex;
	align-items: center;
	gap: 1.5rem;	/*メニュー同士に空けるスペース。1.5文字分。*/
}

/*メニュー１個あたりの設定*/
.large-screen #menubar li a {
	display: block;text-decoration: none;
}


/*大きな端末で見た場合のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウン全体*/
.large-screen #menubar ul ul {
	text-shadow: none;
	position: absolute;z-index: 100;
	animation: opa1 0.5s 0.1s both;	/*0.1秒待機後、0.5秒かけてフェードイン表示*/
}

/*メニュー１個あたり*/
.large-screen #menubar ul ul a {
	background: rgba(0,0,0,0.3);	/*背景色。0,0,0は黒のことで0.3は色が30%出た状態。*/
	color: #fff;			/*文字色*/
	padding: 0.2rem 1rem;	/*上下に0.2文字分、左右に1文字分の余白*/
	border-radius: 3px;		/*角を少しだけ丸く。*/
	margin-top: 3px;		/*メニュー同士の間に空けるスペース*/
}

/*マウスオン時の背景色*/
.large-screen #menubar ul ul a:hover {
	background: rgba(0,0,0,0.5);	/*背景色*/
}


/*小さな端末で見たメニュー（開閉メニュー）
---------------------------------------------------------------------------*/
/*メニューブロック共通*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	width: 50%;	/*画面の半分の幅*/
	height: 100%;
	padding: 100px var(--content-space-l) 50px;	/*上下に100px、左右にtheme.cssのcontent-space-lで指定しているサイズ、下に50pxの余白*/
	background: var(--bg-inverse-color);		/*背景色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);	/*文字色。theme.cssのbg-colorを読み込みます。*/
}

.small-screen #menubar {display: none;}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.small-screen #menubar {
		width: 100%;	/*幅を100%に*/
	}

	}/*追加指定ここまで*/


/*メニュー１個あたり*/
.small-screen #menubar a {
	display: block;text-decoration: none;
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	padding: 1rem 2rem;		/*メニュー内の余白。上下に１文字分、左右に２文字分。*/
	border-radius: 5px;		/*角を少し丸くする*/
	background: #fff;		/*背景色*/
	color: #333;			/*文字色*/
}

/*ボタンのテキストの太さを標準に*/
.small-screen #menubar .btn a {
	font-weight: normal;
}

/*子メニュー（ドロップダウンメニュー）*/
.small-screen #menubar ul ul a {
	margin-left: 2rem;		/*左に２文字分のスペースを空ける*/
	padding: 0.5rem 1.5rem;	/*メニュー内の余白。上下に0.5文字分、左右に1.5文字分。*/
}

/*ドロップダウンのアイコン*/
a.ddmenu::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f078";		/*このアイコンを使う*/
	margin-right: 1em;		/*アイコンとメニューテキストとの間に空けるスペース。1文字分。*/
	font-size: 0.7em;		/*アイコンサイズ。70%*/
	vertical-align: middle;
	display: inline-block;
	line-height: 1;
}

/*ドロップダウン共通（デフォルトで非表示。チラつかないよう念の為。）
---------------------------------------------------------------------------*/
#menubar ul ul {display: none;}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
#menubar_hdr {
	display: none; /* デフォルトは非表示 */
	animation: opa1 0s 0.2s both;
	cursor: pointer;
	position: fixed;
	z-index: 101;
	right: 0px;	/*右からの配置場所*/
	top: 0px;	/*上からの配置場所*/
	width: 70px;	/*ボタンの幅*/
	height: 70px;	/*ボタンの高さ*/
	border-bottom-left-radius: 10px;	/*左下の角だけ丸くする*/
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	position: absolute;
	left: 18px;
	width: 35px;
	height: 1px;		/*線の高さ*/
	background: var(--bg-inverse-color);	/*線の色。theme.cssのbg-inverse-colorを読み込みます。*/
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
	background: var(--accent-color);	/*背景色。theme.cssのaccent-colorを読み込みます。*/
}
#menubar_hdr.ham span {
	background: var(--accent-inverse-color);	/*線の色。theme.cssのaccent-inverse-colorを読み込みます。*/
}

/*以下変更不要*/
#menubar_hdr span:nth-of-type(1) {
	top: 24px;
}
#menubar_hdr span:nth-of-type(2) {
	top: 34px;
}
#menubar_hdr span:nth-of-type(3) {
	top: 44px;
}
#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}
#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}
#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
	display: flex;
}


/*メイン画像のイントロ演出（シャッター開き）
---------------------------------------------------------------------------
.mainimg に下記クラスを足すと、ページ読み込み時に1回だけ動きます。
  .intro-vertical   … 天地中央から上下に開く
  .intro-horizontal … 左右中央から外へ開く
不要ならHTMLからクラスを外すだけ。
*/

/*天地中央から上下に開く*/
.mainimg.intro-vertical {
	animation: mainimg-intro-vertical 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
	/* 値の意味：duration（0.8s）→ easing → delay（1s）→ fill-mode
	   duration … 開ききるまでの時間。
	   delay    … スタートまでの待機時間。 */
}
@keyframes mainimg-intro-vertical {
	from { clip-path: inset(50% 0 50% 0); }	/*上下からめいっぱい閉じる＝非表示*/
	to   { clip-path: inset(0 0 0 0); }		/*完全に開いた状態*/
}

/*左右中央から外側へ開く*/
.mainimg.intro-horizontal {
	animation: mainimg-intro-horizontal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
}
@keyframes mainimg-intro-horizontal {
	from { clip-path: inset(0 50% 0 50%); }	/*左右からめいっぱい閉じる＝非表示*/
	to   { clip-path: inset(0 0 0 0); }
}

/*アクセシビリティ配慮：OSで「動きを減らす」設定の人はアニメOFF*/
@media (prefers-reduced-motion: reduce) {
	.mainimg.intro-vertical,
	.mainimg.intro-horizontal {
		animation: none;
	}
}


/*メイン画像
---------------------------------------------------------------------------*/
.mainimg * {margin: 0;padding: 0;}
.mainimg .slide picture {display: block;width: 100%;height: 100%;}
.mainimg .slide video {display: block;width: 100%;height: 100%;}

/*メイン画像全体を囲むブロック*/
.mainimg {
	width: 100%;
	position: relative;
	overflow: hidden;
}

/*３枚の画像の共通設定*/
.mainimg .slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s;	/*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。１枚が表示される時間はjsで指定できます。*/
	overflow: hidden;
}

/*１枚目画像（変更不要）*/
.mainimg .img1 {
	position: relative;width: 100%;height: auto;
}

/*画像全般（変更不要）*/
.mainimg .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;			/*画像をコンテナのサイズに合わせてクリップ*/
    object-position: center;	/*画像の中心を基準に*/
}


/*メイン画像上のテキスト
---------------------------------------------------------------------------*/
/*テキストブロックの基本設定（中央配置がデフォルト）*/
.mainimg .slide .text {
	position: absolute;z-index: 1;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 var(--content-space-l);	/*上下、左右への余白*/
	color: #333;	/*文字色*/
}

/*テキストを白にしたい場合（inverse）*/
.mainimg .slide .text.inverse {
	color: #fff;
}

/*テキストブロックを左に配置させたい場合*/
.mainimg .slide .text.left {
	align-items: flex-start;
	text-align: left;
}

/*テキストブロックを右に配置させたい場合*/
.mainimg .slide .text.right {
	align-items: flex-end;
	text-align: right;
}

/*h2（大きな文字）*/
.mainimg .text h2 {
	margin: 0 0 15px 0;padding: 0;
	line-height: 2.0;	/*行間を少し狭く*/
	font-weight: 300;	/*テキストの太さ。300〜700まで指定可能。*/
	font-size: max(12px, 2.0vw);	/*文字サイズ3.8vw。最小サイズは14pxでそれ以上小さくしない。*/
	display: flex;
	flex-direction: column-reverse;	/*spanが先にくるように*/
}

/*p（説明テキスト部分）*/
.mainimg .text p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボタンブロック*/
.mainimg .btn-container {
	display: flex;
	gap: 1rem;	/*2個以上ボタンを並べた場合の、間に空けるスペース。*/
	font-size: 1.1rem;	/*文字サイズ1.1倍*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.mainimg .btn a {
		transform: scale(0.8);	/*80%のサイズに*/
		transform-origin: left top;
	}

	}/*追加指定ここまで*/


/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.mainimg .slide {
	pointer-events: none; /* デフォルトでクリックを無効にする */
}

.mainimg .slide.active {
    pointer-events: auto; /* 表示中のスライドのみクリックを有効にする */
}


/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.mainimg .slide-indicators {
    text-align: center;
	position: absolute;
	z-index: 3;
	width: 100%;
	bottom: 2vw;	/*ボタンの配置場所*/
	left: 0px;
}
/*１個あたり*/
.mainimg .indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: rgba(212, 175, 55, 0.45);	/*未アクティブ時のボタン色*/
    border: 1px solid rgba(255, 233, 160, 0.8);
    border-radius: 50%;
    margin: 0 6px;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.22);
    transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
}
.mainimg .indicator:hover {
    background: rgba(232, 202, 98, 0.72);
    box-shadow: 0 0 14px rgba(232, 202, 98, 0.48);
    transform: scale(1.08);
}
.mainimg .indicator.active {
    background: radial-gradient(circle at 35% 35%, #fff6c8 0%, #f7d96b 35%, #d4af37 68%, #b88914 100%);	/*アクティブ時のボタン色*/
    border-color: rgba(255, 245, 196, 0.95);
    box-shadow:
        0 0 8px rgba(255, 230, 140, 0.95),
        0 0 18px rgba(212, 175, 55, 0.7),
        0 0 28px rgba(212, 175, 55, 0.45);
    transform: scale(1.16);
    animation: sliderDotGoldenGlow 2.2s ease-in-out infinite;
}

@keyframes sliderDotGoldenGlow {
    0%, 100% {
        box-shadow:
            0 0 8px rgba(255, 230, 140, 0.95),
            0 0 18px rgba(212, 175, 55, 0.7),
            0 0 28px rgba(212, 175, 55, 0.45);
    }
    50% {
        box-shadow:
            0 0 12px rgba(255, 242, 189, 1),
            0 0 24px rgba(232, 202, 98, 0.88),
            0 0 36px rgba(212, 175, 55, 0.6);
    }
}



/*メインビジュアル（動画スライド）
---------------------------------------------------------------------------*/
.mainimg.video-slider {
	position: relative;
	height: min(100vh, 860px);
	min-height: 460px;
	background: #fff;
}

.mainimg.video-slider .slide {
	background: #fff;
}

/* 動画スライダーでは、旧画像スライダー用の .img1 { position:relative; height:auto; } を打ち消す。
   これが残ると1枚目だけ高さ0になり、黒背景だけが表示される。 */
.mainimg.video-slider .slide.img1 {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.mainimg.video-slider .slide .bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mainimg.video-slider .slide .video-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
	z-index: 0;
}

.mainimg.video-slider .slide .text {
	color: #fff;
}

@media (max-width: 800px) {
	.mainimg.video-slider {
		height: 72vh;
		min-height: 420px;
	}
}

/*ボタン
---------------------------------------------------------------------------*/
.btn a {
	display: inline-flex;		/*文字とSVG矢印を横並びにする*/
	align-items: center;		/*縦位置を中央に揃える*/
	text-decoration: none;
	background: var(--primary-color);		/*背景色。theme.csのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.csのprimary-inverse-colorを読み込みます。*/
	border: 1px solid var(--primary-color);	/*枠線の幅、線種、var以降は色の指定で、theme.cssのprimary-colorを読み込みます。*/
	padding: 0.4rem 2rem;	/*上下に0.4文字分、左右に2文字分の余白*/
	font-weight: 500;		/*文字の太さ*/
}

/*背景が白いタイプのボタン*/
.btn.inverse a {
	background: var(--primary-inverse-color);	/*背景色。theme.csのprimary-inverse-colorを読み込みます。*/
	color: var(--primary-color);				/*文字色。theme.csのprimary-colorを読み込みます。*/
}


/*矢印アイコン（SVG・共通）*/
.arrow {
	display: inline-block;
	width: 2em;					/*矢印全体の長さ。文字サイズに連動*/
	height: 0.5em;				/*矢印の高さ*/
	margin-left: 0.7em;			/*テキストとの間隔*/
	margin-right: -1em;			/*矢印の右側が少し広いので、右につめる*/
	vertical-align: middle;
	fill: none;
	stroke: currentColor;		/*親の文字色を継ぐ*/
	stroke-width: 1;			/*線の太さ。明朝・細字に合わせて細め*/
	stroke-linecap: square;
	stroke-linejoin: miter;
	overflow: visible;
	transition: transform 0.35s ease;
}

/*マウスオン時に矢印が右に動く*/
.btn a:hover .arrow {
	transform: translateX(6px);
}


/*contents
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	min-height: 0;
}


/*main
---------------------------------------------------------------------------*/
main {
	container-type: inline-size;
}

/*h2*/
main h2 {
	line-height: 1.5;
	display: flex;
	flex-direction: column-reverse;
	gap: 0.8rem;
	letter-spacing: 0.1em;
	margin-top: 0;
}

/*上のライン*/
main h2::before {
	content: "";
	display: block;
	width: 2rem;	/*幅。２文字分。お好みで。*/
	height: 2px;	/*高さ。お好みで。*/
	background: currentColor;	/*色は上のh2の色を引き継ぐ*/
	opacity: 0.4;
}

/*ライン無しにしたい場合*/
main h2.no-border::before {
	display: none;
}

/*センタリング時*/
main h2.c {
	width: fit-content;
	margin-inline: auto;
	text-align: center;
}

/*センタリング時のライン*/
main h2.c::before {
	margin-inline: auto;
}

/*h2内のspan*/
main h2 span {
	display: block;
	font-size: 0.7rem;	/*文字サイズ70%*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広く*/
}

/*p*/
main p {
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*main内で使用するul,ol要素（リストタグ）*/
main ul,main ol {
	margin-left: 2rem;
	margin-right: 2rem;
}


/*list1（カラムブロック）
---------------------------------------------------------------------------*/
.list1 * {margin: 0;padding: 0;}
.list1 a {text-decoration: none;}

/*ボックス全体*/
.list1 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));	/*3列*/
	gap: 3.0rem;		/*ボックス同士の間に空けるスペース。1.5文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*bg1-light-partsの背景色を使った場合にだけ、余白をつける*/
.list1.bg1-light-parts {
	padding: 1.5rem;	/*ボックス内の余白。1.5文字分。*/
}


	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {
	
	/*700px以下で1列に*/
	.list1 {
		grid-template-columns: 1fr;
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list1 .list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}

/*テキストボックス*/
.list1 .list .text {
	flex: 1;
	margin-top: 0.5rem;
}

/*h4見出し*/
.list1 .list h4 {
	display: flex;
	align-items: center;
	justify-content: space-between;	/*タイトル左・矢印右に分ける*/
	gap: 1em;
	font-size: 1.2rem;	/*文字サイズ1.1倍。*/
}

/*カード全体hoverで矢印が動く*/
.list1 .list a:hover h4 .arrow {
	transform: translateX(6px);
}

/*説明だけ小さめにする*/
.list1 .list p {
	line-height: 1.5;	/*行間*/
}


/*flex1（テキスト＋写真の横ならび）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.flex1 {
	display: flex;	/*横並びに*/
	margin-inline: calc(-1 * var(--content-space-l));
	background: var(--light-color);	/*背景色。thtme.cssのlight-colorを読み込みます。*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.flex1 {
		flex-direction: column;	/*縦積みに*/
		padding: var(--content-space-l);
	}

	}/*追加指定ここまで*/


/*画像ブロック*/
.flex1 .image {
	width: 50%;	/*幅。お好みで。*/
	position: relative;
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.flex1 .image {
		width: 100%;
		position: static;
	}

	}/*追加指定ここまで*/


.flex1 .image img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.flex1 .image img {
		position: static;
	}

	}/*追加指定ここまで*/


.flex1 .text {
	flex: 1;
	padding: 5rem 2rem 4rem var(--content-space-l);	/*テキストの余白。上に5文字分、右に2文字分、下に4文字分、左はtheme.cssのcontent-space-lを読み込みます。*/
}

	/*画面幅700px以下の追加指定*/
	@media (max-width:700px) {

	.flex1 .text {
		padding: 0;
	}

	}/*追加指定ここまで*/


/*サムネイルの横スライドショー（おすすめ商品ブロック）
---------------------------------------------------------------------------*/
.list-auto1 * {margin: 0;padding: 0;}
.list-auto1 a {text-decoration: none;}

/*スライドショー全体を囲むブロック*/
.list-auto1 {
	overflow-x: hidden;
	padding-bottom: 50px;	/*下に空けるスペース。インジケーター分の確保です。*/
	position: relative;
	line-height: 1.5;	/*行間をデフォルトより狭く*/
}

/*１個あたりのボックスの設定と、4列配置する為の指示*/
.list-auto1 .img > div {
	flex: 0 0 23%;			/*４枚表示する為には25%指定だが、左右のマージン分（計2%）を差し引く。*/
	max-width: 23%;			/*上記と同じ内容だが念の為追加*/
	margin: 0 1%;			/*上下、左右へのマージン*/
}

	/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {
	
	/*2列配置に変更する*/
	.list-auto1 .img > div {
		flex: 0 0 48%;
		max-width: 48%;
	}

	}/*追加指定ここまで*/


/*画像たちを囲むブロック*/
.list-auto1 .img {
	display: flex;
}

/*画像*/
.list-auto1 .img img {
	width: 100%;
}

/*h4見出し*/
.list-auto1 h4 {
	margin-bottom: 0.2rem;	/*下に0.2文字分スペースを空ける*/
}

/*段落タグ(p)*/
.list-auto1 p {
	font-size: 0.85rem;	/*文字サイズを85%に*/
}


/*現在表示中（インジケーター）のボタン
---------------------------------------------------------------------------*/
/*全体*/
.list-auto1 .slide-indicators {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0px;	/*下からのボタンの配置場所*/
	left: 0px;
}

/*１個あたり*/
.list-auto1 .indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #ccc;	/*未アクティブ時のボタン色*/
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
}

/*アクティブボタン色*/
.list-auto1 .indicator.active {
	background: var(--primary-color);	/*アクティブ時のボタン色。theme.cssのprimary-colorを読み込みます。*/
}


/*list-yoko-scroll1（お客様の声ブロック）
---------------------------------------------------------------------------*/
.list-yoko-scroll1 * {margin: 0; padding: 0;}

/*横スクロールブロック全体*/
.list-yoko-scroll1 {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;	 /*Firefox用*/
	scroll-snap-type: x mandatory; /*スナップスクロールを有効にする*/
}
.list-yoko-scroll1::-webkit-scrollbar {
    display: none;	/*Chrome, Safari, Edge用*/
}

/*ブロック内の１個あたり*/
.list-yoko-scroll1 .list {
	width: 60%;		/*ブロック１個の幅。お好みで変更して下さい。*/
	flex-shrink: 0;
	scroll-snap-align: start;
	padding-left: 1rem;		/*ブロック内の左側に余白。1文字分。*/
	position: relative;
	display: flex;
	flex-direction: column;
}

	/*画面幅600px以上の追加指定*/
	@media screen and (min-width:600px) {

	/*ブロック内の１個あたり*/
	.list-yoko-scroll1 .list {
		width: 28%;		/*ブロック１個の幅。お好みで変更して下さい。*/
		padding-left: 2rem;	/*ブロック内の左側に余白。２文字分。*/
	}

	}/*追加指定ここまで*/


/*テキストブロック*/
.list-yoko-scroll1 .list .text {
	flex: 1;
	line-height: 1.5;	/*行間*/
	position: relative;
	padding-top: 2rem;	/*上に空ける余白*/
}

/*「 " 」の記号 */
.list-yoko-scroll1 .list::before {
	content: "\201C";       
	font-family: var(--base-font);
	font-size: 3rem;	/*サイズ*/
	opacity: 0.3;		/*透明度。色を30%だけ出した状態。*/
	position: absolute;
	top: 1rem;		/*上からの配置場所*/
	left: 0.5rem;	/*左からの配置場所*/
	line-height: 1;
}

/*名前*/
.list-yoko-scroll1 .list .name {
	display: block;
	margin-top: 1rem;	/*上に1文字分のスペースを空ける*/
}


/*bg-image1（フッターの上にあるショールーム案内ブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
.bg-image1 {
	display: flex;
	justify-content: flex-end;	/*テキストブロックを最後に配置*/
	position: relative;
	margin-inline: calc(-1 * var(--content-space-l));
	padding: 1.5rem;	/*ブロック内の余白。1.5文字分。*/
	background: #000;	/*背景は黒。下のopacity（透明度）を設定することでこの色が出てきます。*/
	color: #fff;		/*文字色は白。*/
}

/*テキストブロック*/
.bg-image1 .text {
	width: 50%;	/*幅*/
	position: relative;z-index: 1;
}

/*画像ブロック*/
.bg-image1 .image {
	position: absolute;
	inset: 0;
}
.bg-image1 .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;	/*透明度50%。数値が小さくなるほど黒っぽくなります。*/
}


/*free1（色々なレイアウト用）
---------------------------------------------------------------------------*/
/*ボックス内のh4*/
.free1 h4{
	margin: 0;
	font-size: 1.2rem;
}

/*画像の影をつける場合*/
.shadow {
	box-shadow: 4vw 4vw rgba(0,0,0,0.05);	/*右へ、下へ、0,0,0は黒のことで0.05は5%だけ色が出た状態。*/
}

/*画像と文字を囲むブロック*/
.free1 .list {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr)); /* 12等分 */
	gap: 5vw; /*要素間の隙間。画面幅100% = 100vwです。お好みで。*/
	margin-bottom: 5vw;	/*下に空けるスペース。お好みで。*/
	grid-auto-flow: dense;
}
.free1 .list:last-child {
  margin-bottom: 0;	/*最後のブロックの下マージンをなくす*/
}

/*imageとtextの設定*/
.free1 .image,
.free1 .text {
	align-self: center;
	position: relative;
}

/*画像をグリッド幅いっぱいに広げる*/
.free1 img {
	max-width: 100%;
	width: 100%;
	height: auto;
	display: block;
}

/*imageのみの設定*/
.free1 .image {
	grid-column: 1 / -1;
}

/*textのみの設定*/
.free1 .text {
	grid-column: 1 / -1;
}

/*image-wide（横長で使う場合）*/
.free1 .image-wide {
	grid-column: 1 / -1;
}

/*image-01*/
.free1 .image-01 {
	grid-column: 8 / -1;
}
/*.text-01*/
.free1 .text-01 {
	grid-column: 1 / 8;
}
/*image-01（左右入れ替え用）*/
.free1 .list.reverse .image-01 {
	grid-column: 1 / 6;
}
/*text-01（左右入れ替え用）*/
.free1 .list.reverse .text-01 {
	grid-column: 6 / -1;
}

/*image-02*/
.free1 .image-02 {
	grid-column: 1 / 10;
}
/*text-02*/
.free1 .text-02 {
	grid-column: 1 / 10;
}
/*image-02（左右入れ替え用）*/
.free1 .list.reverse .image-02 {
	grid-column: 4 / -1;
}
/*text-02（左右入れ替え用）*/
.free1 .list.reverse .text-02 {
	grid-column: 4 / -1;
}

	/*画面幅500px以下の追加指定*/
	@media screen and (max-width:500px) {

	/*画像と文字を囲むブロック*/
	.free1 .list {
		display: block;
		margin-bottom: 3rem;
	}
	
	}/*追加指定ここまで*/


/*news（お知らせ）
---------------------------------------------------------------------------*/
dl.news * {margin: 0;padding: 0;}

/*日付*/
dl.news dt {
	display: flex;
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){

	dl.news {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);	/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使う。*/
		gap: 0 2rem;	/*2remが、日付とテキストとの間に空けるスペース。お好みで。*/
		align-items: start;
	}

	}/*追加指定ここまで*/


/*フッター
---------------------------------------------------------------------------*/
footer ul {list-style: none;margin: 0;padding: 0;}
footer p {margin: 0;}
footer a {text-decoration: none;}

/*フッターボックス全体*/
footer {
	display: flex;
	justify-content: space-between;
	gap: 2rem;	/*左右のボックスの間に空けるスペース。２文字分。*/
	font-size: 0.8rem;	/*文字サイズ80%*/
    padding: var(--content-space-s) var(--content-space-l);	/*ボックス内の余白。上下にはtheme.cssのcontent-space-sを、左右にはcontent-space-lを読み込みます。*/
}

/*ロゴの最大幅*/
footer .logo {
	max-width: 150px;
}

/*フッター直下の各ブロック（縦積みコンテナ化）<small>に margin-top: auto を効かせて下に配置するために必要*/
footer > div {
	display: flex;
	flex-direction: column;	/*縦積み*/
}

/*メニューブロック*/
footer .menu {
    display: flex;	/*フッターメニューを横並びに*/
    gap: 5vw;		/*メニュー（ul）同士の間に空けるスペース。*/
    align-items: flex-start;
}

	/*画面幅700px以下の追加指定*/
	@media (max-width: 700px){
	
	/*フッターボックス全体*/
	footer {
		flex-direction: column;
	}

	}/*追加指定ここまで*/


/*Copyright部分*/
footer small {
	display: block;
	margin-top: auto;
}


/*SNSアイコン
---------------------------------------------------------------------------*/
.sns1-parts {
	list-style: none;
	margin: 0;padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;		/*アイコン同士のマージン的な要素。１文字分。*/
}

	/*画面幅900px以上の追加指定*/
	@media (min-width: 900px){
	
	.sns1-parts {
		justify-content: flex-end;
	}

	}/*追加指定ここまで*/

.sns1-parts i {
	font-size: 20px;	/*アイコンサイズ*/
}


/*メニューオーバーレイ（メニュー領域外クリックで閉じる用）
---------------------------------------------------------------------------*/
#menubar-overlay {
	display: none;
	position: fixed;
	z-index: 99;	/*#menubar(100)の下、ページの上*/
	top: 0;left: 0;
	width: 100%;height: 100%;
	background: rgba(0,0,0,0.3);	/*半透明の黒。お好みで濃さを調整。*/
}

/*noscroll（メニュー表示中のスクロール禁止用）*/
body.noscroll {
	overflow: hidden;
}


/*著作部分（※意図的に見えなくしたりしないで下さい。規約違反になります。）
---------------------------------------------------------------------------*/
.pr a {
	text-decoration: none;display: block;
	background: rgba(0,0,0,0.5);
	color: #ccc;
	text-align: right;
	padding: 0.5rem 1rem;
	font-size: 0.8rem;
}
.pr a::before {
	font-family: "Font Awesome 6 Free";
	content: "\e2ca";
	font-weight: 900;
	margin-right: 0.5em;
}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*bg1-border-parts
---------------------------------------------------------------------------*/
.bg1-border-parts {
	border-top: 1px solid var(--bg-border-color);		/*上の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
	border-bottom: 1px solid var(--bg-border-color);	/*下の線の幅、線種、var以降は色の事でtheme.cssのbg-border-colorを読み込みます。*/
}

/*bg1-parts
---------------------------------------------------------------------------*/
.bg1-parts {
	background: var(--bg-inverse-color);	/*文字色。theme.cssのbg-inverse-colorを読み込みます。*/
	color: var(--bg-color);		/*背景色。theme.cssのbg-colorを読み込みます。*/
}

/*bg1-primary
---------------------------------------------------------------------------*/
.bg1-primary-parts {
	background: var(--primary-color);		/*背景色。theme.cssのprimary-colorを読み込みます。*/
	color: var(--primary-inverse-color);	/*文字色。theme.cssのprimary-inverse-colorを読み込みます。*/
}


/*bg1-light
---------------------------------------------------------------------------*/
.bg1-light-parts {
	background: #fff;		/*背景色。theme.cssのlight-colorを読み込みます。*/
	color: var(--light-inverse-color);	/*背景色。theme.cssのlight-inverse-colorを読み込みます。*/
}


/*bg1-accent
---------------------------------------------------------------------------*/
.bg1-accent-parts {
	background: var(--accent-color);		/*背景色。theme.cssのaccent-colorを読み込みます。*/
	color: var(--accent-inverse-color);	/*背景色。theme.cssのaccent-inverse-colorを読み込みます。*/
}


/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセットで使います）
---------------------------------------------------------------------------*/
.bg-parts {
	padding-top: var(--content-space-l);		/*ボックス内の上に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
	padding-bottom: var(--content-space-l);	/*ボックス内の下に空ける余白。theme.cssのcontent-space-lを読み込みます。*/
}

/*背景色が続く場合に隙間を空けない*/
.bg-parts + .bg-parts {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}


/*section内で画面両サイドいっぱいまで広げる場合（marginのみでもいいが安定版に）
---------------------------------------------------------------------------*/
.bleed-x-parts {
	--bleed-x: var(--content-space-l);	/*エイリアスに*/
	width: calc(100% + (var(--bleed-x) * 2));	/*section内容の幅＋両サイドpadding（対象要素の幅）*/
	margin-left: calc(var(--bleed-x) * -1);
	margin-right: calc(var(--bleed-x) * -1);
	max-width: none;
}


/*左右によせる専用
---------------------------------------------------------------------------*/
.bleed-left-parts {
	width: calc(100% + var(--content-space-l));
	margin-left: calc(-1 * var(--content-space-l));
}
.bleed-right-parts {
	width: calc(100% + var(--content-space-l));
	margin-right: calc(-1 * var(--content-space-l));
}


/*その他
---------------------------------------------------------------------------*/
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 100%;display: block;}
.wl {width: 100%;display: block;}
.padding-x {padding: 0 var(--content-space-l);}
.mt0 {margin-top: 0px !important;}
.mt1rem {margin-top: 1rem !important;}
.mt3rem {margin-top: 3rem !important;}
.mb0 {margin-bottom: 0px !important;}
.mb1rem {margin-bottom: 1rem !important;}
.mb3rem {margin-bottom: 3rem !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: rgba(0,0,0,0.7);color: #fff; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.85em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}
.is-clip {overflow: hidden;}
.readme-font {font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

/*大きな画面の場合*/
.large-screen .ws {width: 50%;}
.large-screen .sh {display: none;}
.large-screen .pc {display: block;}


/* =========================================================
   YOHAKU common header / NEWS ticker additions (2026-08-22)
   ========================================================= */

/* 全ページ共通：スクロールしても残る半透明ヘッダー */
header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: #fff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* NEWS：常時3件だけ表示し、JSで5秒ごとに1件ずつ上へ送る */
.news-ticker {
	overflow: hidden;
	transition: height 0.55s ease;
}
.news-track {
	will-change: transform;
}
.news-item {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0 2rem;
	align-items: start;
	padding: 0.9rem 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	background: transparent;
}
.news-item time,
.news-item p {
	margin: 0;
}
.news-item.is-latest {
	position: relative;
	background: rgba(197, 170, 111, 0.12);
	box-shadow: inset 3px 0 0 rgba(150, 119, 59, 0.72);
}
.news-item.is-latest::after {
	content: "NEW";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	padding: 0.15rem 0.48rem;
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	line-height: 1.4;
	background: #222;
	color: #fff;
}
.news-item.is-latest p {
	padding-right: 3.5rem;
	font-weight: 500;
}

@media (max-width: 899px) {
	.news-item {
		grid-template-columns: 1fr;
		gap: 0.15rem;
		padding: 0.85rem 0.75rem;
	}
	.news-item.is-latest::after {
		top: 0.8rem;
		transform: none;
	}
	.news-item.is-latest p {
		padding-right: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.news-ticker,
	.news-track {
		transition: none !important;
	}
}


/* =========================================================
   YOHAKU opening loader / white video stage (2026-08-22)
   ========================================================= */

/* トップページ本体はローダー完了まで隠し、完了後にフェードイン */
.home #container {
	opacity: 1;
	transition: opacity 0.9s ease;
}
.home.site-loading {
	overflow: hidden;
	background: #fff;
}
.home.site-loading #container {
	opacity: 0;
}
.home.site-ready #container {
	opacity: 1;
}

/* 白一色のオープニング画面 */
.opening-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.9s ease, visibility 0.9s ease;
}
.opening-loader.is-visible .opening-loader-image-wrap,
.opening-loader.is-visible .opening-loader-progress,
.opening-loader.is-visible .opening-loader-percent {
	opacity: 1;
	transform: translateY(0);
}
.home.site-ready .opening-loader {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.opening-loader-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: min(300px, calc(100vw - 48px));
}
.opening-loader-image-wrap {
	width: 300px;
	height: 300px;
	max-width: calc(100vw - 48px);
	max-height: calc(100vw - 48px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	opacity: 0;
	transform: translateY(7px);
	transition: opacity 1.15s ease, transform 1.15s ease;
}
.opening-loader-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.opening-loader-progress {
	position: relative;
	width: 100%;
	height: 3px;
	margin-top: 20px;
	overflow: hidden;
	background: #e9e9e9;
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s;
}
.opening-loader-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: #222;
	transition: width 0.28s ease;
}
.opening-loader-percent {
	margin: 9px 0 0;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.14em;
	color: #777;
	opacity: 0;
	transform: translateY(5px);
	transition: opacity 0.9s ease 0.28s, transform 0.9s ease 0.28s;
}

/* トップ4本の動画スライドの下地を完全な白に */
.home .mainimg.video-slider,
.home .mainimg.video-slider .slide {
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.home #container,
	.opening-loader,
	.opening-loader-image-wrap,
	.opening-loader-progress,
	.opening-loader-percent,
	.opening-loader-progress span {
		transition-duration: 0.01ms !important;
	}
}


/* =========================================================
   YOHAKU FAN USER / common header refinements (2026-08-22)
   ========================================================= */
.header-logo-video {
	display: block;
	margin-top: 17px;
	padding-bottom: 0;
	max-width: 230px;
	height: auto;
}
.fan-user-button {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	white-space: nowrap;
}
.fan-user-button span {
	font-size: .67rem;
	letter-spacing: .12em;
}
@media (max-width: 899px) {
	.header-logo-video { width: 180px; margin-top: 12px; }
	.fan-user-button span { display: none; }
}

.user-page main { max-width: 1120px; margin-inline: auto; }
.user-hero { text-align:center; padding-top: clamp(2rem,6vw,5rem); }
.user-hero h2 { margin-bottom:.35rem; }
.user-hero p { color:#777; margin-top:0; }
.user-shell { max-width: 920px; margin: 2rem auto 5rem; }
.auth-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.user-card { border:1px solid #e7e7e7; background:#fff; padding:clamp(1.4rem,3vw,2.4rem); }
.user-card h3 { margin-top:0; font-size:1.15rem; letter-spacing:.08em; }
.user-form label { display:block; margin:.8rem 0 .25rem; font-size:.82rem; }
.user-form input, .user-form textarea {
	width:100%; border:1px solid #d8d8d8; background:#fff; padding:.8rem .9rem; font:inherit;
}
.user-form textarea { min-height:110px; resize:vertical; }
.user-action {
	margin-top:1rem; border:1px solid #222; background:#222; color:#fff; padding:.8rem 1.25rem;
	font:inherit; letter-spacing:.08em; cursor:pointer;
}
.user-action.secondary { background:#fff; color:#222; }
.user-message { min-height:1.8em; margin:.7rem 0 0; font-size:.82rem; }
.user-message.error { color:#a33; }
.user-message.success { color:#286638; }
.user-toolbar { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin:1.5rem 0 2.2rem; }
.user-toolbar a, .user-toolbar button {
	text-decoration:none; border:1px solid #222; background:#fff; color:#222; padding:.65rem 1rem; font:inherit; cursor:pointer;
}
.profile-grid { display:grid; grid-template-columns:220px 1fr; gap:2rem; align-items:start; }
.avatar-circle { width:160px; height:160px; margin:auto; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#f3f3f3; font-size:3.2rem; }
.profile-meta dt { font-size:.72rem; color:#888; letter-spacing:.1em; }
.profile-meta dd { margin:0 0 1rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-card { aspect-ratio: 4/3; position:relative; overflow:hidden; background:#f3f3f3; }
.gallery-card img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-card .gallery-label { position:absolute; inset:auto 0 0 0; padding:.65rem .8rem; background:rgba(255,255,255,.9); font-size:.76rem; }
.member-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.member-item { border:1px solid #e7e7e7; padding:1.2rem; background:#fff; }
.member-item strong { display:block; }
.member-item small { color:#888; }
.member-bio { font-size:.82rem; line-height:1.7; margin:.6rem 0 0; }
.privacy-note { font-size:.76rem; color:#888; text-align:center; margin-top:1rem; }
@media(max-width:700px){
	.auth-grid,.profile-grid { grid-template-columns:1fr; }
	.gallery-grid,.member-list { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){ .gallery-grid,.member-list { grid-template-columns:1fr; } }


/* ===============================================================
   YOHAKU finishing refinements (2026-08-22)
   =============================================================== */
/* 動画切り替え時に親要素やvideo自体の下地が見えても白になるよう統一 */
.home .mainimg.video-slider,
.home .mainimg.video-slider .slide,
.home .mainimg.video-slider .slide .bg-video {
    background: #fff !important;
}

/* ABOUT / EVENT 共通CTA */
.yohaku-cta-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: clamp(2.5rem, 6vw, 5rem) auto;
    text-align: center;
}
.yohaku-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: min(86vw, 340px);
    padding: 1rem 2rem;
    border: 1px solid #222;
    background: #fff;
    color: #222;
    text-decoration: none;
    letter-spacing: .08em;
    transition: box-shadow .18s ease, background-color .18s ease, transform .18s ease, color .18s ease;
}
.yohaku-cta:hover {
    background: #222;
    color: #fff;
}
.yohaku-cta:active,
.yohaku-cta.is-clicked {
    box-shadow: 0 0 0 5px rgba(214, 190, 139, .18), 0 0 24px rgba(214, 190, 139, .48);
    transform: translateY(1px);
}
.event-ticket-cta {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* FAN USER 冒頭案内 */
.fan-registration-guide {
    width: min(100%, 900px);
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
    padding: 1rem 1.25rem;
    border-left: 2px solid #cbb37c;
    background: rgba(203, 179, 124, .08);
    line-height: 2;
}
.fan-registration-guide p { margin: 0; }

/* 全ページ共通 BGM コントロール */
.yohaku-music-control {
    position: fixed;
    right: clamp(12px, 2vw, 26px);
    bottom: clamp(105px, 11vh, 125px);
    z-index: 10000;
    border: 1px solid rgba(20,20,20,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #222;
    padding: .48rem .72rem;
    font: inherit;
    font-size: 10px;
    line-height: 1;
    letter-spacing: .12em;
    cursor: pointer;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow: 0 3px 14px rgba(0,0,0,.08);
    transition: opacity .2s ease, background-color .2s ease, box-shadow .2s ease;
    opacity: .72;
}
.yohaku-music-control:hover,
.yohaku-music-control:focus-visible {
    opacity: 1;
    background: rgba(255,255,255,.92);
    box-shadow: 0 3px 18px rgba(0,0,0,.13);
}
.yohaku-music-control[aria-pressed="true"]::before { content: "♪ "; }
.yohaku-music-control[aria-pressed="false"]::before { content: "♩ "; }
@media (max-width: 700px) {
    .yohaku-music-control {
        right: 10px;
        bottom: 100px;
        padding: .44rem .62rem;
        font-size: 9px;
    }
}


/* =========================================================
   YOHAKU navigation / gold glow / admin refinements (2026-08-23)
   ========================================================= */
/* デスクトップでは左右のロゴ・FAN USER幅に影響されず、メニューを画面の真ん中へ */
@media (min-width: 900px) {
    header { position: sticky; }
    .large-screen header #menubar,
    header #menubar {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
    }
}

/* ヘッダーの各メニュー：角丸の金色グロー */
.large-screen #menubar > nav > ul > li > a {
    padding: .45rem .72rem;
    border: 1px solid transparent;
    border-radius: 9px;
    transition: color .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease, text-shadow .22s ease;
}
.large-screen #menubar > nav > ul > li > a:hover,
.large-screen #menubar > nav > ul > li > a:focus-visible {
    filter: none;
    color: #7b632d;
    border-color: rgba(193, 154, 70, .78);
    background: rgba(255, 250, 236, .72);
    box-shadow:
        0 0 0 2px rgba(218, 183, 103, .13),
        0 0 12px rgba(207, 164, 72, .38),
        0 0 25px rgba(207, 164, 72, .20);
    text-shadow: 0 0 10px rgba(199, 155, 62, .30);
}
/* ドロップダウン側も同じトーンに統一 */
.large-screen #menubar ul ul a:hover,
.large-screen #menubar ul ul a:focus-visible {
    filter: none;
    background: rgba(255,255,255,.96);
    color: #7b632d;
    border: 1px solid rgba(193,154,70,.68);
    box-shadow: 0 0 16px rgba(207,164,72,.28);
}

/* ABOUT / EVENT CTA：黒反転をやめ、金色にふわっと発光 */
.yohaku-cta:hover,
.yohaku-cta:focus-visible {
    filter: none;
    background: #fff;
    color: #725b2a;
    border-color: #c8a351;
    box-shadow:
        0 0 0 3px rgba(218, 183, 103, .13),
        0 0 16px rgba(207, 164, 72, .42),
        0 0 32px rgba(207, 164, 72, .20);
}
.yohaku-cta:active,
.yohaku-cta.is-clicked {
    background: #fff;
    color: #725b2a;
    border-color: #c8a351;
    box-shadow:
        0 0 0 5px rgba(218, 183, 103, .18),
        0 0 24px rgba(207, 164, 72, .62),
        0 0 44px rgba(207, 164, 72, .26);
    transform: translateY(1px);
}

/* 管理者ページ */
.admin-login-wrap { max-width: 520px; margin: 2rem auto 5rem; }
.admin-panel[hidden], .admin-login-wrap[hidden] { display:none !important; }
.admin-member-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.admin-member-card { border:1px solid #e3e0d8; background:#fff; padding:1.15rem 1.25rem; }
.admin-member-card h3 { margin:0 0 .55rem; font-size:1rem; }
.admin-member-card dl { margin:0; }
.admin-member-card dt { margin-top:.55rem; color:#8a806b; font-size:.7rem; letter-spacing:.1em; }
.admin-member-card dd { margin:0; overflow-wrap:anywhere; }
.admin-summary { text-align:center; margin:0 0 1.5rem; color:#766a55; }
@media(max-width:700px){ .admin-member-list { grid-template-columns:1fr; } }


/* Lit.Link / Linkfire：白い角丸ボタン＋ゆっくり金色に呼吸するグロー */
.social-glow-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    padding: 0.55em 1.25em !important;
    margin-top: 0.35em;
    background: rgba(255, 255, 255, 0.98) !important;
    color: #6f5a2b !important;
    border: 1px solid rgba(194, 157, 75, 0.58) !important;
    border-radius: 10px;
    text-decoration: none !important;
    letter-spacing: 0.06em;
    font-weight: 500;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05),
        0 0 7px rgba(205, 167, 78, 0.16),
        0 0 14px rgba(205, 167, 78, 0.08);
    filter: none !important;
    animation: socialGlowPulse 3.6s ease-in-out infinite;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease;
}

.social-glow-link:hover,
.social-glow-link:focus-visible {
    background: #fff !important;
    color: #82661f !important;
    border-color: rgba(200, 160, 66, 0.92) !important;
    filter: none !important;
    transform: translateY(-1px);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.06),
        0 0 12px rgba(218, 177, 76, 0.48),
        0 0 28px rgba(218, 177, 76, 0.32),
        0 0 44px rgba(218, 177, 76, 0.14);
}

@keyframes socialGlowPulse {
    0%, 100% {
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.05),
            0 0 6px rgba(205, 167, 78, 0.12),
            0 0 12px rgba(205, 167, 78, 0.06);
    }
    50% {
        box-shadow:
            0 2px 10px rgba(0, 0, 0, 0.05),
            0 0 13px rgba(218, 177, 76, 0.44),
            0 0 30px rgba(218, 177, 76, 0.28),
            0 0 46px rgba(218, 177, 76, 0.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .social-glow-link { animation: none; }
}

/* =========================================================
   YOHAKU fan mail / gallery / current navigation (2026-08-23)
   ========================================================= */
.newsletter-check {
    display:flex !important; align-items:flex-start; gap:.7rem; margin:1rem 0 .25rem !important;
    padding:.8rem .9rem; border:1px solid #e2dccd; background:#fffdf8; cursor:pointer; line-height:1.6;
}
.newsletter-check input { width:auto !important; margin:.3rem 0 0; accent-color:#9a7b35; flex:0 0 auto; }
.newsletter-check span { font-size:.82rem; color:#514a3e; }

/* 現在ページ：ホバーではなく常時ゆっくり発光 */
.large-screen #menubar > nav > ul > li > a.current-page,
.large-screen #menubar > nav > ul > li > a[aria-current="page"] {
    color:#7b632d; border-color:rgba(193,154,70,.82); background:rgba(255,250,236,.78);
    text-shadow:0 0 10px rgba(199,155,62,.32);
    animation:yohakuCurrentGlow 3.2s ease-in-out infinite;
}
.fan-user-button.current-page,
.fan-user-button[aria-current="page"] {
    color:#7b632d; border-color:rgba(193,154,70,.8) !important; border-radius:9px;
    animation:yohakuCurrentGlow 3.2s ease-in-out infinite;
}
@keyframes yohakuCurrentGlow {
    0%,100% { box-shadow:0 0 0 2px rgba(218,183,103,.10),0 0 10px rgba(207,164,72,.26),0 0 20px rgba(207,164,72,.12); }
    50% { box-shadow:0 0 0 2px rgba(218,183,103,.17),0 0 17px rgba(207,164,72,.50),0 0 34px rgba(207,164,72,.22); }
}
.small-screen #menubar > nav > ul > li > a.current-page { color:#876a28; background:rgba(218,183,103,.10); }
@media(prefers-reduced-motion:reduce){.large-screen #menubar a.current-page,.fan-user-button.current-page{animation:none;}}

/* Gallery cards / smooth lightbox */
.gallery-card.gallery-open { border:0; padding:0; font:inherit; color:inherit; text-align:left; cursor:zoom-in; }
.gallery-card.gallery-open img { transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease; }
.gallery-card.gallery-open:hover img { transform:scale(1.035); filter:brightness(.97); }
.gallery-lightbox[hidden] { display:none !important; }
.gallery-lightbox { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:clamp(18px,4vw,52px); background:rgba(10,10,10,.0); opacity:0; transition:opacity .28s ease,background-color .28s ease; }
.gallery-lightbox.is-open { opacity:1; background:rgba(10,10,10,.88); }
.gallery-lightbox-dialog { width:min(1100px,94vw); max-height:90vh; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr); background:#fff; overflow:auto; transform:scale(.94) translateY(10px); opacity:0; transition:transform .36s cubic-bezier(.2,.75,.2,1),opacity .3s ease; box-shadow:0 22px 80px rgba(0,0,0,.4); }
.gallery-lightbox.is-open .gallery-lightbox-dialog { transform:scale(1) translateY(0); opacity:1; }
.gallery-lightbox-dialog img { display:block; width:100%; height:100%; max-height:82vh; object-fit:contain; background:#111; }
.gallery-lightbox-copy { padding:clamp(1.3rem,3vw,2.4rem); align-self:center; }
.gallery-lightbox-copy h3 { margin:0 0 1rem; letter-spacing:.06em; font-size:clamp(1.05rem,2vw,1.45rem); }
.gallery-lightbox-copy p { margin:0; white-space:pre-wrap; line-height:2; color:#555; }
.gallery-lightbox-close { position:absolute; top:14px; right:18px; width:44px; height:44px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#222; font-size:27px; cursor:pointer; z-index:2; }
body.lightbox-open { overflow:hidden; }
@media(max-width:760px){.gallery-lightbox-dialog{grid-template-columns:1fr;}.gallery-lightbox-dialog img{max-height:58vh;}.gallery-lightbox-copy{padding:1.2rem 1.3rem 1.6rem;}}

/* Admin additions */
.admin-panel { max-width:1100px; }
.admin-section { margin:0 0 2.2rem; padding:clamp(1.1rem,2.5vw,2rem); border:1px solid #e5e0d5; background:#fff; }
.admin-section > h3,.admin-section-head h3 { margin:0 0 .3rem; letter-spacing:.08em; }
.admin-section-head { display:flex; justify-content:space-between; gap:1rem; align-items:end; margin-bottom:1.25rem; }
.admin-section-head .admin-summary { text-align:left; margin:.25rem 0 0; }
.admin-filter { font-size:.8rem; white-space:nowrap; }
.admin-filter select { margin-left:.4rem; padding:.55rem .7rem; border:1px solid #d9d2c3; background:#fff; }
.admin-help { margin:.25rem 0 1rem; color:#746d61; font-size:.82rem; line-height:1.8; }
.admin-member-title { display:flex; align-items:center; justify-content:space-between; gap:.7rem; }
.newsletter-badge { flex:0 0 auto; padding:.22rem .5rem; border-radius:999px; font-size:.62rem; letter-spacing:.08em; }
.newsletter-badge.yes { color:#715718; border:1px solid #c9aa64; background:#fff8e7; }
.newsletter-badge.no { color:#777; border:1px solid #ddd; background:#f7f7f7; }
.mail-result-badge { display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.68rem; letter-spacing:.04em; }
.mail-result-badge.success { color:#2f6b3b; border:1px solid #8fbd98; background:#f2fbf4; font-weight:700; }
.mail-result-badge.failed { color:#9a3f3f; border:1px solid #d9aaaa; background:#fff5f5; }
.mail-result-badge.none { color:#777; border:1px solid #ddd; background:#f7f7f7; }
.admin-gallery-list { display:grid; gap:.75rem; margin-top:1.3rem; }
.admin-gallery-item { display:grid; grid-template-columns:130px 1fr; gap:1rem; align-items:start; border-top:1px solid #eee8dc; padding-top:.75rem; }
.admin-gallery-item img { width:130px; height:95px; object-fit:cover; background:#eee; }
.admin-gallery-item strong { display:block; margin:.2rem 0 .35rem; }
.admin-gallery-item p { margin:0 0 .55rem; color:#666; font-size:.8rem; white-space:pre-wrap; line-height:1.6; }
.admin-gallery-delete { border:1px solid #b9aaa0; background:#fff; padding:.35rem .65rem; cursor:pointer; font:inherit; font-size:.75rem; }
.user-form input[type="file"] { padding:.65rem; }
.user-action:disabled { opacity:.5; cursor:wait; }
@media(max-width:700px){.admin-section-head{align-items:flex-start;flex-direction:column}.admin-gallery-item{grid-template-columns:90px 1fr}.admin-gallery-item img{width:90px;height:72px}}

/* 管理画面の「一覧をプリント」では会員一覧だけを印刷 */
@media print {
    body.user-page { background:#fff !important; }
    body.user-page header, body.user-page footer, #menubar_hdr, #menubar-overlay, .pagetop, .yohaku-music-control,
    .user-hero, #admin-login-wrap, .admin-main-toolbar, .admin-mail-section, .admin-gallery-section, .admin-filter { display:none !important; }
    #admin-panel { display:block !important; margin:0 !important; max-width:none !important; }
    #admin-panel .admin-section { border:0; padding:0; margin:0; }
    .admin-member-list { display:block !important; }
    .admin-member-card { break-inside:avoid; page-break-inside:avoid; margin:0 0 10mm; border:1px solid #bbb; }
    .admin-section-head { display:block; margin-bottom:8mm; }
    .admin-section-head .admin-summary { display:block !important; }
}


/* ===============================================================
   IN THE YOHAKU / member name line + periodic gold frame (2026-08-23)
   =============================================================== */
/* このページの3名の名前だけ、既存より一回り大きく */
.in-the-yohaku-page .free1 .text h4 {
    position: relative;
    display: inline-block;
    margin: 0 0 1.15rem;
    padding-bottom: 11px;
    font-size: clamp(1.42rem, 1.2rem + .45vw, 1.72rem);
    line-height: 1.45;
    letter-spacing: .035em;
}

/* 名前の約10px下を、左から右へ細く走るアンダーライン */
.in-the-yohaku-page .free1 .text h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #b89443 0%, #f1deb0 48%, #b89443 100%);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: .95;
}
.in-the-yohaku-page .free1 .text.inview.upstyle h4::after,
.in-the-yohaku-page .free1 .text.inview.downstyle h4::after,
.in-the-yohaku-page .free1 .text.inview.transform1style h4::after,
.in-the-yohaku-page .free1 .text.inview.transform2style h4::after,
.in-the-yohaku-page .free1 .text.inview.transform3style h4::after,
.in-the-yohaku-page .free1 .text.inview.blurstyle h4::after {
    animation: yohaku-name-line 1.15s cubic-bezier(.2,.72,.2,1) .7s forwards;
}
@keyframes yohaku-name-line {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* 写真／動画の四角い外周を、約10秒ごとに金色の光が一周 */
.in-the-yohaku-page .free1 .image {
    position: relative;
    isolation: isolate;
    overflow: visible;
}
.in-the-yohaku-page .free1 .image .gold-perimeter {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}
.in-the-yohaku-page .free1 .image .gold-edge {
    position: absolute;
    display: block;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(222,181,82,.9)) drop-shadow(0 0 7px rgba(222,181,82,.45));
}
/* 上辺：左 → 右 */
.in-the-yohaku-page .free1 .image .edge-top {
    top: 0;
    left: 0;
    width: 28%;
    height: 1px;
    background: linear-gradient(90deg, rgba(190,145,44,0), rgba(255,239,185,1) 55%, rgba(201,159,61,.92));
    animation: yohaku-edge-top 10s linear infinite;
}
/* 右辺：上 → 下 */
.in-the-yohaku-page .free1 .image .edge-right {
    top: 0;
    right: 0;
    width: 1px;
    height: 28%;
    background: linear-gradient(180deg, rgba(190,145,44,0), rgba(255,239,185,1) 55%, rgba(201,159,61,.92));
    animation: yohaku-edge-right 10s linear infinite;
}
/* 下辺：右 → 左 */
.in-the-yohaku-page .free1 .image .edge-bottom {
    right: 0;
    bottom: 0;
    width: 28%;
    height: 1px;
    background: linear-gradient(270deg, rgba(190,145,44,0), rgba(255,239,185,1) 55%, rgba(201,159,61,.92));
    animation: yohaku-edge-bottom 10s linear infinite;
}
/* 左辺：下 → 上 */
.in-the-yohaku-page .free1 .image .edge-left {
    left: 0;
    bottom: 0;
    width: 1px;
    height: 28%;
    background: linear-gradient(0deg, rgba(190,145,44,0), rgba(255,239,185,1) 55%, rgba(201,159,61,.92));
    animation: yohaku-edge-left 10s linear infinite;
}

/* 1周を約2.4秒で走り、残りは静止。10秒ごとに再スタート */
@keyframes yohaku-edge-top {
    0%, 1%   { opacity:0; transform:translateX(-105%); }
    2%       { opacity:1; }
    7%       { opacity:1; transform:translateX(360%); }
    8%,100%  { opacity:0; transform:translateX(360%); }
}
@keyframes yohaku-edge-right {
    0%, 6%   { opacity:0; transform:translateY(-105%); }
    7%       { opacity:1; }
    12%      { opacity:1; transform:translateY(360%); }
    13%,100% { opacity:0; transform:translateY(360%); }
}
@keyframes yohaku-edge-bottom {
    0%, 11%  { opacity:0; transform:translateX(105%); }
    12%      { opacity:1; }
    17%      { opacity:1; transform:translateX(-360%); }
    18%,100% { opacity:0; transform:translateX(-360%); }
}
@keyframes yohaku-edge-left {
    0%, 16%  { opacity:0; transform:translateY(105%); }
    17%      { opacity:1; }
    22%      { opacity:1; transform:translateY(-360%); }
    23%,100% { opacity:0; transform:translateY(-360%); }
}

/* 動きを減らす設定の端末では静かな1pxラインだけにする */
@media (prefers-reduced-motion: reduce) {
    .in-the-yohaku-page .free1 .text h4::after {
        transform: scaleX(1);
        animation: none !important;
    }
    .in-the-yohaku-page .free1 .image .gold-perimeter {
        border: 1px solid rgba(199,164,91,.28);
    }
    .in-the-yohaku-page .free1 .image .gold-edge {
        display: none;
        animation: none !important;
    }
}

/* IN THE YOHAKU：外周エフェクトを動画本体の矩形にぴったり合わせる */
.in-the-yohaku-page .free1 .image > video {
    display: block;
    width: 100%;
    height: auto;
}


/* ===============================================================
   TOP PAGE / 3 member videos - periodic square gold perimeter
   Same motion as IN THE YOHAKU (2026-08-23)
   =============================================================== */
.home .list1 .list .image {
    position: relative;
    isolation: isolate;
    overflow: visible;
}
.home .list1 .list .image > video {
    display: block;
    width: 100%;
    height: auto;
}
.home .list1 .list .image .gold-perimeter {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}
.home .list1 .list .image .gold-edge {
    position: absolute;
    display: block;
    opacity: 0;
    filter: drop-shadow(0 0 3px rgba(222,181,82,.9)) drop-shadow(0 0 7px rgba(222,181,82,.45));
}
.home .list1 .list .image .edge-top {
    top: 0;
    left: 0;
    width: 28%;
    height: 1px;
    background: linear-gradient(90deg, rgba(190,145,44,0), rgba(255,239,185,1) 55%, rgba(201,159,61,.92));
    animation: yohaku-edge-top 10s linear infinite;
}
.home .list1 .list .image .edge-right {
    top: 0;
    right: 0;
    width: 1px;
    height: 28%;
    background: linear-gradient(180deg, rgba(190,145,44,0), rgba(255,239,185,1) 55%, rgba(201,159,61,.92));
    animation: yohaku-edge-right 10s linear infinite;
}
.home .list1 .list .image .edge-bottom {
    right: 0;
    bottom: 0;
    width: 28%;
    height: 1px;
    background: linear-gradient(270deg, rgba(190,145,44,0), rgba(255,239,185,1) 55%, rgba(201,159,61,.92));
    animation: yohaku-edge-bottom 10s linear infinite;
}
.home .list1 .list .image .edge-left {
    left: 0;
    bottom: 0;
    width: 1px;
    height: 28%;
    background: linear-gradient(0deg, rgba(190,145,44,0), rgba(255,239,185,1) 55%, rgba(201,159,61,.92));
    animation: yohaku-edge-left 10s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .home .list1 .list .image .gold-perimeter {
        border: 1px solid rgba(199,164,91,.28);
    }
    .home .list1 .list .image .gold-edge {
        display: none;
        animation: none !important;
    }
}


/* YOHAKU v8 final fan/gallery adjustments */
.avatar-setting { text-align:center; }
.avatar-circle { overflow:hidden; border:1px solid #eee9df; }
.avatar-circle img { width:100%; height:100%; object-fit:cover; display:block; }
.avatar-form { margin-top:1rem; }
.avatar-form label { display:block; font-size:.78rem; letter-spacing:.08em; margin-bottom:.5rem; }
.avatar-form input[type="file"] { width:100%; font-size:.76rem; }
.avatar-form > p:not(.user-message) { margin:.45rem 0 .8rem; color:#888; font-size:.72rem; line-height:1.6; }
.gallery-member-page { max-width:1180px; margin:0 auto; padding:clamp(3rem,7vw,6rem) 0 6rem; }
.gallery-member-head { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:2rem; }
.gallery-member-head h2 { margin:.15rem 0 0; font-size:clamp(1.55rem,4vw,2.5rem); letter-spacing:.12em; }
.gallery-kicker { margin:0; color:#9a8b6d; font-size:.72rem; letter-spacing:.22em; font-weight:600; }
.gallery-member-actions { display:flex; gap:.55rem; flex-wrap:wrap; }
.gallery-member-actions a,.gallery-member-actions button { border:1px solid #d9d3c8; background:#fff; padding:.55rem .9rem; color:#444; font:inherit; font-size:.74rem; text-decoration:none; cursor:pointer; }
.gallery-member-page .gallery-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.7rem,1.6vw,1.25rem); }
.gallery-member-page .gallery-card { aspect-ratio:1/1; border:0; background:#f5f4f1; }
.gallery-member-page .gallery-label { padding:.6rem .7rem; font-size:.72rem; letter-spacing:.04em; }
@media(max-width:900px){.gallery-member-page .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:640px){.gallery-member-page{padding-top:2.5rem}.gallery-member-head{align-items:flex-start;flex-direction:column}.gallery-member-page .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.gallery-member-actions{width:100%;justify-content:flex-end}}


/* YOHAKU v12 members gallery responsive centering (2026-08-29) */
.gallery-member-page{max-width:1180px;margin:0 auto;padding:clamp(4.2rem,8vw,7.5rem) clamp(1.2rem,4vw,2.4rem) clamp(6rem,10vw,9rem);}
.gallery-member-intro{text-align:center;max-width:760px;margin:0 auto clamp(3.2rem,7vw,5.4rem);}
.gallery-member-intro .gallery-kicker{margin:0 0 .8rem;color:#8f846f;font-size:.72rem;letter-spacing:.28em;font-weight:600;}
.gallery-member-intro h2{margin:0;font-size:clamp(1.8rem,4.3vw,3.05rem);line-height:1.18;letter-spacing:.16em;font-weight:500;color:#3e3b38;}
.gallery-title-line{display:block;width:38px;height:1px;margin:1.45rem auto 1.8rem;background:#b8aa8c;position:relative;overflow:hidden;}
.gallery-title-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#e3c875,transparent);transform:translateX(-120%);animation:yohakuGalleryLine 4.8s ease-in-out infinite;}
@keyframes yohakuGalleryLine{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}}
.gallery-lead{margin:0;color:#77716b;font-size:clamp(.83rem,1.6vw,.96rem);line-height:2.05;letter-spacing:.06em;}
.gallery-member-actions{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:2.2rem;}
.gallery-member-actions a,.gallery-member-actions button{min-width:168px;border:1px solid #cfc8bc;background:#fff;color:#4a4641;padding:.86rem 1.15rem;font:inherit;font-size:.72rem;letter-spacing:.14em;text-decoration:none;cursor:pointer;transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;}
.gallery-member-actions a span,.gallery-member-actions button span{display:block;margin-top:.24rem;font-size:.61rem;letter-spacing:.08em;color:#999188;}
.gallery-member-actions a:hover,.gallery-member-actions button:hover{border-color:#c6ae72;box-shadow:0 8px 28px rgba(183,154,91,.13);transform:translateY(-1px);}
.gallery-grid-member{position:relative;min-height:180px;}
.gallery-grid-member>p,.gallery-loading{grid-column:1/-1;width:100%;margin:0;padding:clamp(3rem,8vw,5rem) 1.3rem;border-top:1px solid #eee9df;border-bottom:1px solid #eee9df;text-align:center;color:#9a948b;font-size:.78rem;letter-spacing:.14em;background:linear-gradient(180deg,#fff,#fcfbf8 50%,#fff);}
.gallery-member-page .gallery-card{border-radius:0;box-shadow:0 0 0 1px rgba(224,219,210,.7);transition:transform .3s ease,box-shadow .3s ease;}
.gallery-member-page .gallery-card:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(45,40,34,.10);}
.gallery-member-page .gallery-label{background:rgba(255,255,255,.93);color:#514c46;letter-spacing:.08em;}
@media(max-width:640px){.gallery-member-page{padding-top:3.2rem}.gallery-member-intro{margin-bottom:3rem}.gallery-member-actions{gap:.65rem}.gallery-member-actions a,.gallery-member-actions button{min-width:140px;padding:.75rem .85rem}.gallery-lead br{display:none}}
@media(prefers-reduced-motion:reduce){.gallery-title-line::after{animation:none}}


/* YOHAKU v12: member gallery centering / narrow-window safety */
.user-page #contents,
.user-page main {
    width: 100%;
    min-width: 0;
}

.gallery-member-page {
    width: min(100%, 1180px);
    margin-left: auto;
    margin-right: auto;
}

.gallery-member-intro {
    width: min(100%, 760px);
    margin-left: auto;
    margin-right: auto;
}

.gallery-member-intro h2::before {
    margin-left: auto;
    margin-right: auto;
}

.gallery-member-actions {
    width: 100%;
    align-items: stretch;
}

.gallery-member-actions a,
.gallery-member-actions button {
    max-width: 100%;
}

@media (max-width: 700px) {
    .gallery-member-page {
        width: 100%;
        padding-left: clamp(18px, 5vw, 32px);
        padding-right: clamp(18px, 5vw, 32px);
    }

    .gallery-member-intro h2 {
        font-size: clamp(1.55rem, 7vw, 2.35rem);
        letter-spacing: .12em;
        overflow-wrap: anywhere;
    }

    .gallery-lead {
        line-height: 1.9;
    }
}

@media (max-width: 420px) {
    .gallery-member-actions {
        flex-direction: column;
        align-items: center;
    }

    .gallery-member-actions a,
    .gallery-member-actions button {
        width: min(100%, 280px);
        min-width: 0;
    }

    .gallery-member-page .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   YOHAKU v16 user-page heading line corrections (2026-08-29)
   ========================================================= */
.user-page .user-hero h2 {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    text-align: center;
}
.user-page .user-hero h2::before {
    margin-left: auto;
    margin-right: auto;
}

/* Members Gallery uses its own dedicated gold line element. */
.user-page .gallery-member-intro h2::before {
    display: none !important;
    content: none !important;
}

@media (max-width: 640px) {
    .user-page .user-hero h2 {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}


/* ===== MAIL MAGAZINE BACK NUMBER ===== */
.newsletter-archive-section{max-width:980px;margin:0 auto 80px;padding:0 24px;}
.newsletter-archive-head{margin:0 0 24px;padding-top:16px;border-top:1px solid rgba(154,123,53,.22);}
.newsletter-archive-kicker{margin:0 0 5px;font-size:.68rem;letter-spacing:.28em;color:#9a7b35;}
.newsletter-archive-head h3{margin:0 0 8px;font-size:1.35rem;font-weight:500;letter-spacing:.08em;color:#29251f;}
.newsletter-archive-head>div>p:last-child{margin:0;color:#777066;font-size:.86rem;line-height:1.8;}
.newsletter-archive{display:grid;gap:12px;}
.newsletter-archive-loading,.newsletter-archive-empty{margin:0;padding:26px;border:1px solid #eee9df;background:rgba(255,255,255,.78);font-size:.84rem;color:#777;text-align:center;}
.newsletter-archive-locked{display:flex;gap:18px;align-items:flex-start;padding:24px 26px;border:1px solid #e9e0cb;background:linear-gradient(135deg,#fffdf8,#fff);}
.newsletter-archive-locked>i{flex:0 0 auto;font-size:1.8rem;color:#b09251;}
.newsletter-archive-locked strong{display:block;margin:0 0 5px;font-size:.9rem;letter-spacing:.08em;color:#594a2d;}
.newsletter-archive-locked p{margin:0;font-size:.8rem;line-height:1.8;color:#777066;}
.newsletter-issue{border:1px solid #e8e3d9;background:rgba(255,255,255,.92);transition:border-color .25s ease,box-shadow .25s ease;}
.newsletter-issue[open]{border-color:#d4c39b;box-shadow:0 8px 28px rgba(74,61,32,.06);}
.newsletter-issue summary{position:relative;display:grid;grid-template-columns:140px minmax(0,1fr) 22px;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;list-style:none;}
.newsletter-issue summary::-webkit-details-marker{display:none;}
.newsletter-issue-date{font-size:.72rem;letter-spacing:.06em;color:#9a8c72;}
.newsletter-issue summary strong{min-width:0;font-size:.9rem;font-weight:500;letter-spacing:.045em;color:#312d27;overflow-wrap:anywhere;}
.newsletter-toggle{position:relative;width:18px;height:18px;}
.newsletter-toggle:before,.newsletter-toggle:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;background:#a48b52;transform:translate(-50%,-50%);transition:transform .25s ease;}
.newsletter-toggle:after{transform:translate(-50%,-50%) rotate(90deg);}
.newsletter-issue[open] .newsletter-toggle:after{transform:translate(-50%,-50%) rotate(0deg);}
.newsletter-issue-body{padding:4px 20px 24px 174px;border-top:1px solid #f1ede5;font-size:.86rem;line-height:2;color:#544f47;overflow-wrap:anywhere;}
.newsletter-issue-body a{color:#8a6b2d;text-decoration:underline;text-underline-offset:3px;}
.newsletter-attachment{display:block;margin-top:20px;padding-top:12px;border-top:1px dashed #ddd3bd;font-size:.74rem;color:#8a806d;}
@media (max-width:700px){
  .newsletter-archive-section{padding:0 16px;margin-bottom:55px;}
  .newsletter-issue summary{grid-template-columns:1fr 20px;gap:6px 10px;padding:16px;}
  .newsletter-issue-date{grid-column:1/2;}
  .newsletter-issue summary strong{grid-column:1/2;}
  .newsletter-toggle{grid-column:2/3;grid-row:1/3;}
  .newsletter-issue-body{padding:18px 16px 22px;}
  .newsletter-archive-locked{padding:20px 18px;gap:13px;}
}

/* === YOHAKU ADMIN standalone / multi-admin chat 2026-08-29 === */
body.user-page .admin-standalone-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 34px;border-bottom:1px solid rgba(0,0,0,.08);background:#fff;position:relative;z-index:20}
body.user-page .admin-standalone-header .logo{margin:0}
body.user-page .admin-standalone-header .logo video{display:block;max-width:190px;height:auto}
.admin-current-user{margin-left:auto;padding:10px 15px;border:1px solid rgba(0,0,0,.12);border-radius:999px;font-size:12px;letter-spacing:.12em;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.05)}
.admin-current-user strong{font-weight:600;margin-left:7px;letter-spacing:.04em}
.admin-chat-button{position:fixed;right:24px;bottom:24px;z-index:1000;border:0;border-radius:999px;background:#111;color:#fff;padding:14px 22px;font-size:12px;letter-spacing:.18em;box-shadow:0 12px 35px rgba(0,0,0,.22);cursor:pointer;transition:.25s ease}
.admin-chat-button:hover{transform:translateY(-2px)}
.admin-chat-button.has-unread{animation:adminChatGlow 1.2s ease-in-out infinite}
.admin-chat-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:9px;opacity:.55}
.admin-chat-button.has-unread .admin-chat-dot{opacity:1;box-shadow:0 0 12px #fff}
@keyframes adminChatGlow{0%,100%{box-shadow:0 12px 35px rgba(0,0,0,.22),0 0 0 rgba(212,181,111,0)}50%{box-shadow:0 12px 35px rgba(0,0,0,.25),0 0 28px rgba(212,181,111,.95)}}
.admin-chat{position:fixed;right:24px;bottom:24px;width:min(390px,calc(100vw - 32px));height:min(570px,calc(100vh - 80px));z-index:1001;background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.12);border-radius:22px;box-shadow:0 22px 60px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden;transform:translateY(calc(100% + 45px));opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.22,.8,.25,1),opacity .25s ease;backdrop-filter:blur(12px)}
.admin-chat.open{transform:translateY(0);opacity:1;pointer-events:auto}
.admin-chat-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(0,0,0,.08)}
.admin-chat-head strong{display:block;font-size:13px;letter-spacing:.14em}.admin-chat-head span{display:block;font-size:9px;letter-spacing:.18em;opacity:.5;margin-top:2px}.admin-chat-head button{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer}
.admin-chat-messages{flex:1;overflow:auto;padding:18px;background:#fafafa}
.admin-chat-message{max-width:83%;margin:0 0 13px}.admin-chat-message.mine{margin-left:auto;text-align:right}.admin-chat-message .bubble{display:inline-block;text-align:left;padding:10px 12px;border-radius:14px;background:#fff;border:1px solid rgba(0,0,0,.08);font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word}.admin-chat-message.mine .bubble{background:#111;color:#fff;border-color:#111}.admin-chat-meta{font-size:9px;opacity:.55;margin:4px 3px 0}.admin-chat-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(0,0,0,.08);background:#fff}.admin-chat-form textarea{flex:1;resize:none;border:1px solid rgba(0,0,0,.14);border-radius:12px;padding:10px 11px;font:inherit;font-size:13px}.admin-chat-form button{border:0;border-radius:12px;background:#111;color:#fff;padding:0 16px;cursor:pointer}
@media(max-width:700px){body.user-page .admin-standalone-header{padding:14px 16px}.admin-current-user{padding:8px 11px;font-size:10px}.admin-chat-button{right:16px;bottom:16px}.admin-chat{right:16px;bottom:16px;height:calc(100vh - 70px)}}

/* === YOHAKU ADMIN mobile-first finishing pass 2026-08-29 === */
@media (max-width:700px){
  body.user-page{overflow-x:hidden;}
  body.user-page #contents{padding-left:14px;padding-right:14px;}
  body.user-page .admin-standalone-header{
    min-height:64px;
    padding:10px 14px;
    padding-top:max(10px,env(safe-area-inset-top));
    gap:10px;
  }
  body.user-page .admin-standalone-header .logo video{max-width:132px;width:36vw;min-width:108px;}
  .admin-current-user{
    max-width:48vw;
    padding:8px 10px;
    font-size:9px;
    letter-spacing:.08em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:none;
  }
  .admin-current-user strong{margin-left:4px;font-size:11px;}
  .user-hero{padding-top:26px;}
  .user-hero h2{font-size:clamp(1.55rem,8vw,2.15rem);}
  .user-hero h2 span{font-size:.55rem;letter-spacing:.18em;}
  .user-hero p{font-size:.84rem;}
  .admin-login-wrap{margin:1.2rem auto 3.5rem;}
  .admin-login-wrap .user-card{padding:20px 16px;}
  .admin-panel{margin-top:1.15rem;margin-bottom:5.5rem;}
  .admin-section{padding:18px 14px;margin-bottom:18px;border-radius:14px;}
  .admin-section-head{gap:12px;margin-bottom:16px;}
  .admin-section-head>div{width:100%;}
  .admin-filter{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:.78rem;}
  .admin-filter select{min-height:44px;max-width:72%;margin-left:8px;font-size:16px;border-radius:8px;}
  .admin-main-toolbar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin:12px 0 18px;
  }
  .admin-main-toolbar button{
    min-height:46px;
    width:100%;
    padding:10px 8px;
    border-radius:9px;
    font-size:12px;
    line-height:1.35;
  }
  .admin-main-toolbar #admin-logout{grid-column:1/-1;}
  .user-form label{margin-top:14px;font-size:.8rem;}
  .user-form input,.user-form textarea{
    min-height:46px;
    padding:12px 13px;
    border-radius:9px;
    font-size:16px;
    line-height:1.5;
  }
  .user-form textarea{min-height:150px;}
  .user-form input[type="file"]{font-size:14px;min-height:50px;}
  .user-action{
    width:100%;
    min-height:50px;
    margin-top:16px;
    border-radius:10px;
    font-size:14px;
    touch-action:manipulation;
  }
  .admin-member-list{gap:10px;}
  .admin-member-card{padding:14px;border-radius:11px;}
  .admin-member-card h3{font-size:1.02rem;}
  .admin-member-card dt{margin-top:10px;}
  .admin-member-card dd{font-size:.86rem;line-height:1.55;}
  .admin-member-title{align-items:flex-start;}
  .newsletter-badge,.mail-result-badge{flex:0 0 auto;}
  .admin-gallery-item{grid-template-columns:76px minmax(0,1fr);gap:11px;}
  .admin-gallery-item img{width:76px;height:62px;border-radius:8px;}
  .admin-gallery-delete{min-height:42px;padding:8px 14px;border-radius:8px;}
  .admin-chat-button{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
    min-height:48px;
    padding:13px 18px;
    font-size:12px;
    touch-action:manipulation;
  }
  .admin-chat{
    left:8px;
    right:8px;
    bottom:max(8px,env(safe-area-inset-bottom));
    width:auto;
    height:calc(100dvh - max(76px,env(safe-area-inset-top) + 58px) - max(8px,env(safe-area-inset-bottom)));
    max-height:680px;
    border-radius:18px;
  }
  @supports not (height:100dvh){
    .admin-chat{height:calc(100vh - 78px);}
  }
  .admin-chat-head{padding:13px 14px;min-height:54px;}
  .admin-chat-head button{min-width:44px;min-height:44px;margin:-7px -7px -7px 0;}
  .admin-chat-messages{padding:14px 12px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .admin-chat-message{max-width:88%;margin-bottom:11px;}
  .admin-chat-message .bubble{font-size:14px;padding:10px 12px;}
  .admin-chat-meta{font-size:10px;}
  .admin-chat-form{
    align-items:flex-end;
    gap:7px;
    padding:9px;
    padding-bottom:max(9px,env(safe-area-inset-bottom));
  }
  .admin-chat-form textarea{
    min-height:44px;
    max-height:112px;
    padding:10px 11px;
    font-size:16px;
    line-height:1.4;
  }
  .admin-chat-form button{min-width:62px;min-height:44px;padding:0 12px;font-size:14px;}
}
@media (max-width:390px){
  .admin-main-toolbar{grid-template-columns:1fr;}
  .admin-main-toolbar #admin-logout{grid-column:auto;}
  .admin-current-user{max-width:51vw;}
  body.user-page .admin-standalone-header .logo video{max-width:112px;}
}

/* === YOHAKU FAN MEMBER CARD / 2026-08-30 === */
.member-card-modal{
  position:fixed;
  inset:0;
  z-index:3000;
  display:grid;
  place-items:center;
  padding:22px;
  background:rgba(250,249,246,.96);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease;
  overflow:auto;
}
.member-card-modal[hidden]{display:none!important;}
.member-card-modal.is-open{opacity:1;pointer-events:auto;}
.member-card-panel{width:min(560px,100%);margin:auto;}
.member-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 4px 22px;
  color:#7b7b7b;
  font-size:.7rem;
  letter-spacing:.28em;
}
.member-card-head button{
  width:48px;height:48px;border:1px solid #d8d0c0;border-radius:50%;
  background:#fff;color:#4a4a4a;font-size:30px;line-height:1;cursor:pointer;
}
.member-card-scene{perspective:1400px;width:100%;aspect-ratio:.78;}
.member-card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.72,.2,1);
}
.member-card-inner.is-flipped{transform:rotateY(180deg);}
.member-card-face{
  position:absolute;inset:0;
  border:1px solid #d9cfb8;border-radius:34px;background:#fffdf9;
  box-shadow:0 28px 48px rgba(62,53,39,.13);
  overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.member-card-front,
.member-card-back{display:flex;flex-direction:column;min-height:0;}
.member-card-front{
  transform:rotateY(0deg) translateZ(1px);
  opacity:1;visibility:visible;
  align-items:center;padding:38px 34px 40px;
}
.member-card-back{
  transform:rotateY(180deg) translateZ(1px);
  opacity:0;visibility:hidden;
  padding:34px 34px 36px;
}
.member-card-inner.is-flipped .member-card-front{opacity:0;visibility:hidden;}
.member-card-inner.is-flipped .member-card-back{opacity:1;visibility:visible;}
.member-card-logo{width:118px;height:auto;margin:0 0 24px;display:block;}
.member-card-tagline{margin:0 0 24px;text-align:center;color:#666;font-size:.74rem;letter-spacing:.05em;}
.member-card-avatar{
  width:min(220px,48vw);
  height:min(220px,48vw);
  flex:0 0 auto;
  border-radius:50%;overflow:hidden;
  border:1px solid #d8bf82;
  box-shadow:0 0 0 7px #fff,0 0 0 8px #ead7aa;
  display:grid;place-items:center;background:#eee;
}
.member-card-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.member-card-avatar i{font-size:64px;color:#aaa;}
.member-card-fan{position:relative;z-index:2;margin:22px 0 0;color:#b28a35;font-size:.72rem;letter-spacing:.32em;line-height:1.2;}
.member-card-front h3{margin:24px 0 0;font-size:clamp(1.75rem,7vw,2.25rem);font-weight:500;letter-spacing:.06em;line-height:1.2;}
.member-card-number{margin-top:auto;padding-top:28px;display:flex;align-items:baseline;justify-content:center;gap:14px;color:#999;}
.member-card-number span{font-size:.7rem;letter-spacing:.18em;}
.member-card-number strong{color:#a77c26;font-size:2rem;line-height:1;letter-spacing:.14em;font-weight:400;}
.member-card-back-title{display:flex;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid #e8dfcd;flex:0 0 auto;}
.member-card-back-title img{width:88px;height:auto;display:block;}
.member-card-back-title span{display:block;color:#b28a35;font-size:.72rem;letter-spacing:.28em;margin-bottom:7px;}
.member-card-back-title strong{display:block;font-size:1.1rem;font-weight:500;letter-spacing:.08em;color:#4a4640;}
.member-card-back-note{margin:24px 0 20px;text-align:center;color:#69645d;font-size:.76rem;line-height:1.9;flex:0 0 auto;}
.member-stamp-scroll{
  flex:1 1 auto;
  min-height:0;
  max-height:330px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  -webkit-overflow-scrolling:touch;
}
.member-stamp-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-content:start;padding-bottom:6px;}
.member-stamp-grid span{min-height:98px;border:1px dashed #d7c8a6;border-radius:50%;display:grid;place-items:center;color:#e5dccb;font-size:1rem;letter-spacing:.18em;}
.member-card-flip,.member-card-dismiss{width:100%;min-height:62px;margin-top:22px;border-radius:18px;font:inherit;letter-spacing:.08em;cursor:pointer;}
.member-card-flip{border:1px solid #b98d35;background:#fff;color:#9b7428;}
.member-card-dismiss{margin-top:12px;border:0;background:#343434;color:#fff;}
.member-card-open{overflow:hidden;}
.member-card-open #menubar_hdr{display:none!important;}

@media (max-width:600px){
  .member-card-modal{padding:18px 15px 26px;}
  .member-card-head{margin-bottom:16px;}
  .member-card-head button{width:42px;height:42px;}
  .member-card-scene{aspect-ratio:.66;}
  .member-card-face{border-radius:28px;}
  .member-card-front{padding:26px 24px 28px;}
  .member-card-logo{width:88px;margin-bottom:16px;}
  .member-card-tagline{font-size:.66rem;margin-bottom:16px;}
  .member-card-avatar{width:min(188px,47vw);height:min(188px,47vw);}
  .member-card-fan{margin-top:16px;}
  .member-card-front h3{margin-top:14px;}
  .member-card-number{margin-top:18px;padding-top:0;}
  .member-card-back{padding:28px 24px 32px;}
  .member-card-back-title{gap:14px;align-items:flex-start;}
  .member-card-back-title img{width:72px;}
  .member-card-back-note{margin:20px 0 16px;}
  .member-stamp-scroll{max-height:270px;}
  .member-stamp-grid{gap:12px;}
  .member-stamp-grid span{min-height:84px;}
  .member-card-flip,.member-card-dismiss{min-height:58px;border-radius:16px;}
}


/* === YOHAKU MEMBER TICKET SYSTEM / 2026-08-30 === */
.admin-ticket-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.admin-ticket-form-grid label{margin:0!important}.admin-ticket-form-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.admin-ticket-list{display:grid;gap:10px;margin-top:22px}.admin-ticket-card{display:flex;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid #e6dfd0;border-radius:12px;background:#fffdf9}.admin-ticket-card h4{margin:5px 0 7px;font-size:1rem}.admin-ticket-card p{margin:3px 0;color:#666;font-size:.78rem}.admin-ticket-card a{display:inline-block;margin-top:6px;color:#9b7428;font-size:.75rem}.admin-ticket-publish{display:inline-block;padding:3px 8px;border-radius:999px;font-size:.62rem;letter-spacing:.08em}.admin-ticket-publish.on{background:#f7efd9;color:#7d5d19;border:1px solid #c9aa64}.admin-ticket-publish.off{background:#f1f1f1;color:#777;border:1px solid #ddd}.admin-ticket-card-actions{display:flex;gap:7px;align-items:flex-start;flex:0 0 auto}.admin-ticket-card-actions button,.admin-purchase-toolbar button,.admin-payment-save{border:1px solid #cdb67d;background:#fff;color:#80611f;border-radius:8px;padding:8px 12px;font:inherit;font-size:.72rem;cursor:pointer}.admin-ticket-delete{border-color:#d8b5b5!important;color:#8c4545!important}.admin-purchase-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:10px 14px;margin:0 0 16px}.admin-purchase-toolbar label{font-size:.72rem;color:#666}.admin-purchase-toolbar select{display:block;margin-top:5px;min-height:38px;border:1px solid #d9d2c3;background:#fff;padding:6px 9px}.admin-purchase-list{display:grid;gap:10px}.admin-purchase-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:15px 17px;border:1px solid #e6dfd0;border-radius:12px;background:#fff}.admin-purchase-name{display:flex;align-items:baseline;gap:12px}.admin-purchase-name strong{font-size:1rem}.admin-purchase-name span{font-size:.68rem;letter-spacing:.08em;color:#a77c26}.admin-purchase-card h4{margin:7px 0 3px;font-size:.82rem}.admin-purchase-card p{margin:3px 0;font-size:.74rem;color:#666}.payment-method,.payment-paid,.payment-unpaid{display:inline-block;padding:3px 7px;border-radius:999px;font-size:.65rem}.payment-method{border:1px solid #cfb46e;color:#82631e;background:#fff9e9}.payment-paid{border:1px solid #8fbd98;color:#2f6b3b;background:#f2fbf4}.payment-unpaid{border:1px solid #ddd;color:#777;background:#f7f7f7}.admin-payment-checks{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;font-size:.72rem}.admin-payment-checks input{accent-color:#a77c26}.admin-payment-save{margin-top:3px;width:100%}
.member-ticket-area{margin:0 0 26px;padding:clamp(20px,4vw,34px);border:1px solid #e1d5b9;border-radius:22px;background:linear-gradient(145deg,#fffdf8,#fff);box-shadow:0 16px 34px rgba(89,72,35,.08)}.member-ticket-area-head{text-align:center;margin-bottom:18px}.member-ticket-area-head>span,.ticket-kicker{display:block;color:#ad8532;font-size:.68rem;letter-spacing:.3em}.member-ticket-area-head h3{margin:5px 0;font-size:1.15rem;letter-spacing:.12em}.member-ticket-area-head p{margin:0;color:#777;font-size:.76rem}.member-ticket-list{display:grid;gap:12px}.member-ticket-item{padding:18px;border:1px solid #e6dfd0;border-radius:15px;background:#fff}.member-ticket-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#8a7c60;font-size:.72rem}.member-ticket-status{padding:3px 8px;border:1px solid #d5c391;border-radius:999px;color:#8b6920;background:#fff9e8}.member-ticket-status.paid{color:#2f6b3b;border-color:#8fbd98;background:#f2fbf4}.member-ticket-item h4{margin:9px 0 12px;font-size:1.02rem}.member-ticket-item dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:.76rem}.member-ticket-item dt{color:#aaa;letter-spacing:.12em}.member-ticket-item dd{margin:0}.member-ticket-map{display:inline-block;margin-top:12px;color:#8e6c24;font-size:.75rem}.member-ticket-buy,.member-ticket-owned{width:100%;min-height:52px;margin-top:15px;border-radius:12px;font:inherit;letter-spacing:.08em;cursor:pointer}.member-ticket-buy{border:1px solid #b98d35;background:#a77c26;color:#fff}.member-ticket-owned{border:1px solid #b98d35;background:#fff;color:#997326}
.ticket-modal[hidden]{display:none!important}.ticket-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;background:rgba(250,249,246,.94);opacity:0;pointer-events:none;transition:opacity .22s ease;overflow:auto}.ticket-modal.is-open{opacity:1;pointer-events:auto}.ticket-modal-dialog{position:relative;width:min(520px,100%);padding:30px;border:1px solid #ded1b4;border-radius:24px;background:#fff;box-shadow:0 24px 70px rgba(70,57,30,.18)}.ticket-modal-close{position:absolute;right:14px;top:14px;width:42px;height:42px;border:1px solid #ddd2bb;border-radius:50%;background:#fff;font-size:26px;line-height:1;cursor:pointer}.ticket-modal-dialog h3{margin:8px 48px 18px 0;font-size:1.25rem}.ticket-purchase-summary{display:grid;gap:5px;padding:14px;border:1px solid #eee5d3;background:#fffaf0;color:#61594c;font-size:.78rem}.ticket-purchase-summary strong{font-size:.9rem}.ticket-payment-title{margin:20px 0 10px;font-size:.78rem}.ticket-payment-choice{display:flex;gap:10px;align-items:flex-start;margin:8px 0!important;padding:13px;border:1px solid #e4ddcf;border-radius:12px;cursor:pointer}.ticket-payment-choice input{width:auto!important;margin-top:4px;accent-color:#a77c26}.ticket-payment-choice span{display:grid;gap:3px}.ticket-payment-choice strong{font-size:.85rem}.ticket-payment-choice small{font-size:.7rem;color:#777;line-height:1.6}.ticket-modal-open{overflow:hidden}
.owned-ticket-dialog{padding:22px}.owned-ticket{border:1px solid #cbb478;border-radius:22px;overflow:hidden;background:#fffdf8;box-shadow:0 16px 35px rgba(83,65,27,.12)}.owned-ticket-brand{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#302d29;color:#fff}.owned-ticket-brand span{font-size:1.2rem;letter-spacing:.22em}.owned-ticket-brand small{font-size:.6rem;letter-spacing:.2em;color:#d7c390}.owned-ticket-body{padding:26px 24px;text-align:center}.owned-ticket-body h3{margin:7px auto 8px;font-size:1.3rem}.owned-ticket-date{margin:0 0 20px;color:#776d5b}.owned-ticket-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e5dcc8;border:1px solid #e5dcc8;margin:18px 0}.owned-ticket-grid div{display:grid;gap:5px;background:#fff;padding:12px}.owned-ticket-grid span{font-size:.58rem;letter-spacing:.15em;color:#aaa}.owned-ticket-grid strong{font-size:.9rem}.owned-ticket-venue{font-size:.85rem}.owned-ticket-body a{color:#8a6720;font-size:.72rem}.owned-ticket-payment{padding:16px 20px;border-top:1px dashed #cdbd98;text-align:center;background:#fffaf0}.owned-ticket-payment>strong{display:block;color:#8f6a20;letter-spacing:.08em}.owned-ticket-payment p{margin:7px 0 0;font-size:.74rem;line-height:1.7;color:#655f55}.owned-ticket-paid{display:inline-block;margin-top:8px;padding:6px 15px;border-radius:999px;background:#eef8f0;color:#2f6b3b;border:1px solid #8fbd98;font-weight:700;letter-spacing:.08em}
@media(max-width:700px){.admin-ticket-form-grid{grid-template-columns:1fr}.admin-ticket-form-actions{grid-template-columns:1fr}.admin-ticket-card{flex-direction:column}.admin-ticket-card-actions button{flex:1}.admin-purchase-card{grid-template-columns:1fr}.admin-payment-checks{display:grid;grid-template-columns:1fr 1fr}.admin-payment-save{grid-column:1/-1}.ticket-modal{padding:14px}.ticket-modal-dialog{padding:24px 18px}.member-ticket-area{border-radius:18px}.owned-ticket-body{padding:22px 16px}}
@media print{.admin-ticket-section,.admin-purchase-section,.admin-purchaser-mail-section{display:none!important}}


/* === ADMIN TICKET PREVIEW / 2026-08-30 === */
.admin-ticket-preview-wrap{margin-top:26px;padding:24px;border:1px solid #dfd2b4;border-radius:20px;background:linear-gradient(145deg,#fffdf8,#fff);box-shadow:0 16px 38px rgba(85,67,30,.08)}
.admin-ticket-preview-wrap[hidden]{display:none!important}
.admin-ticket-preview-heading{text-align:center;margin-bottom:20px}
.admin-ticket-preview-heading>span{display:block;color:#ad8532;font-size:.65rem;letter-spacing:.34em}
.admin-ticket-preview-heading h4{margin:7px 0 8px;font-size:1.15rem;font-weight:500;letter-spacing:.1em}
.admin-ticket-preview-heading p{max-width:620px;margin:0 auto;color:#777;font-size:.75rem;line-height:1.8}
.admin-ticket-preview-frame{width:min(520px,100%);margin:0 auto}
.admin-ticket-preview .owned-ticket{width:100%}
.admin-ticket-preview-map-placeholder{color:#aaa;font-size:.72rem}
.admin-ticket-preview-payment strong{color:#8f6a20}
.admin-ticket-confirm-submit{display:block;width:min(520px,100%);margin:20px auto 0!important;background:#a77c26!important;color:#fff!important;border-color:#a77c26!important}
.admin-ticket-preview-note{margin:10px auto 0;text-align:center;color:#999;font-size:.68rem;line-height:1.6}
@media(max-width:700px){.admin-ticket-preview-wrap{padding:18px 12px;border-radius:16px}.admin-ticket-preview-heading h4{font-size:1.02rem}.admin-ticket-preview-heading p{font-size:.7rem}}


/* === YOHAKU ADMIN TICKET FORM MOBILE FIT / 2026-08-30 === */
.admin-ticket-section,
.admin-ticket-form,
.admin-ticket-form-grid,
.admin-ticket-form-grid > label {
  min-width: 0;
  max-width: 100%;
}

.admin-ticket-form-grid > label {
  width: 100%;
  overflow: hidden;
}

.admin-ticket-form input,
.admin-ticket-form textarea,
.admin-ticket-form select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.admin-ticket-form input[type="datetime-local"],
.admin-ticket-form input[type="time"],
.admin-ticket-form input[type="url"] {
  min-width: 0;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

@media (max-width:700px) {
  .admin-ticket-form-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-ticket-form-grid > label,
  .admin-ticket-form > label {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .admin-ticket-form input[type="datetime-local"],
  .admin-ticket-form input[type="time"] {
    font-size: 16px;
    padding-left: 12px;
    padding-right: 10px;
  }
}


/* =========================================================
   YOHAKU FAN USER notice enhancement / safe UI patch (2026-09-07)
   表示のみの改良。会員情報・メルマガデータには非干渉。
   ========================================================= */
.fan-user-button {
    position: relative;
    padding: .58rem .95rem;
    border: 1px solid rgba(193,154,70,.42);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 0 0 1px rgba(193,154,70,.08);
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease, background-color .25s ease;
}
.fan-user-button:hover {
    border-color: rgba(193,154,70,.7);
    box-shadow: 0 10px 24px rgba(73,57,22,.10), 0 0 0 1px rgba(193,154,70,.16);
    transform: translateY(-1px);
}
.fan-user-button::after {
    content: "会員登録・マイページはこちら";
    position: absolute;
    right: -4px;
    bottom: calc(100% + 12px);
    padding: .42rem .72rem;
    border: 1px solid rgba(193,154,70,.56);
    border-radius: 12px;
    background: rgba(255,255,255,.98);
    color: #7d6327;
    font-size: .62rem;
    line-height: 1.45;
    letter-spacing: .08em;
    white-space: nowrap;
    box-shadow: 0 12px 28px rgba(37,28,11,.08);
    animation: yohakuFanHintPulse 3.6s ease-in-out infinite;
    pointer-events: none;
}
.fan-user-button::before {
    content: "";
    position: absolute;
    right: 18px;
    bottom: calc(100% + 6px);
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,.98);
    border-right: 1px solid rgba(193,154,70,.56);
    border-bottom: 1px solid rgba(193,154,70,.56);
    transform: rotate(45deg);
    box-shadow: 5px 5px 14px rgba(37,28,11,.04);
    pointer-events: none;
    animation: yohakuFanHintPulse 3.6s ease-in-out infinite;
}
@keyframes yohakuFanHintPulse {
    0%,100% { box-shadow: 0 10px 22px rgba(37,28,11,.07), 0 0 0 0 rgba(201,165,88,.00); }
    50% { box-shadow: 0 14px 26px rgba(37,28,11,.11), 0 0 0 3px rgba(201,165,88,.10); }
}
@media (max-width: 899px) {
    .fan-user-button {
        padding: .52rem .78rem;
    }
    .fan-user-button::after {
        content: "登録 / ログイン";
        right: 50%;
        transform: translateX(50%);
        bottom: calc(100% + 10px);
        font-size: .54rem;
        letter-spacing: .06em;
        padding: .34rem .58rem;
    }
    .fan-user-button::before {
        right: 50%;
        transform: translateX(50%) rotate(45deg);
        bottom: calc(100% + 4px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .fan-user-button::before,
    .fan-user-button::after,
    .fan-entry-notice::before,
    .fan-entry-notice::after {
        animation: none !important;
    }
}

.fan-entry-notice-stack {
    width: min(100%, 900px);
    margin: 0 auto clamp(2.1rem, 5vw, 3.5rem);
    display: grid;
    gap: 1rem;
}
.fan-entry-notice {
    position: relative;
    padding: 1.18rem 1.35rem 1.22rem;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,251,244,.98));
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(68,53,23,.05);
}
.fan-entry-notice::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(185,149,73,.92), rgba(234,219,178,.92), rgba(185,149,73,.92));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: yohakuNoticeFrameGlow 3.8s ease-in-out infinite;
    pointer-events: none;
}
.fan-entry-notice::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 50% 50%, rgba(214,183,106,.12), transparent 58%);
    opacity: .55;
    animation: yohakuNoticeAura 4.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes yohakuNoticeFrameGlow {
    0%,100% { filter: drop-shadow(0 0 6px rgba(196,157,76,.20)) drop-shadow(0 0 12px rgba(196,157,76,.10)); opacity: .86; }
    50% { filter: drop-shadow(0 0 11px rgba(196,157,76,.45)) drop-shadow(0 0 22px rgba(196,157,76,.20)); opacity: 1; }
}
@keyframes yohakuNoticeAura {
    0%,100% { transform: scale(.98); opacity: .42; }
    50% { transform: scale(1.03); opacity: .7; }
}
.fan-entry-notice > * {
    position: relative;
    z-index: 1;
}
.fan-entry-notice-kicker {
    margin: 0 0 .45rem;
    color: #9c7b34;
    font-size: .68rem;
    letter-spacing: .22em;
    font-weight: 600;
}
.fan-entry-notice h3 {
    margin: 0 0 .48rem;
    font-size: 1rem;
    letter-spacing: .06em;
    color: #362d21;
}
.fan-entry-notice p {
    margin: 0;
    line-height: 1.95;
    color: #584f43;
    font-size: .92rem;
}
.fan-entry-notice strong {
    color: #8f6b1f;
    font-weight: 600;
}
.fan-entry-notice-route {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,243,.98));
}
@media (max-width: 700px) {
    .fan-entry-notice-stack {
        gap: .85rem;
    }
    .fan-entry-notice {
        padding: 1rem 1rem 1.05rem;
        border-radius: 14px;
    }
    .fan-entry-notice::before {
        border-radius: 14px;
    }
    .fan-entry-notice h3 {
        font-size: .92rem;
        line-height: 1.5;
    }
    .fan-entry-notice p {
        font-size: .84rem;
        line-height: 1.82;
    }
}


/* =========================================================
   YOHAKU FAN USER badge visibility hotfix (2026-09-07)
   右上吹き出しが潜らないように、ヘッダー下へ安全表示
   ========================================================= */
header .icons{
    position: relative;
    overflow: visible;
}
.fan-user-button{
    isolation: isolate;
    animation: yohakuFanButtonGlow 3.6s ease-in-out infinite;
}
.fan-user-button i,
.fan-user-button span{
    position: relative;
    z-index: 2;
}
.fan-user-button::after {
    content: "会員登録・マイページはこちら";
    top: calc(100% + 10px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 210px;
    text-align: center;
    padding: .48rem .8rem;
    border: 1px solid rgba(193,154,70,.68);
    border-radius: 13px;
    background: rgba(255,255,255,.99);
    color: #7d6327;
    box-shadow: 0 13px 28px rgba(37,28,11,.12), 0 0 0 1px rgba(193,154,70,.10);
    animation: yohakuFanBadgePulse 1.35s ease-in-out infinite;
    z-index: 25;
}
.fan-user-button::before {
    top: calc(100% + 4px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(255,255,255,.99);
    border-right: 1px solid rgba(193,154,70,.68);
    border-bottom: 1px solid rgba(193,154,70,.68);
    box-shadow: 5px 5px 14px rgba(37,28,11,.04);
    animation: yohakuFanBadgePulse 1.35s ease-in-out infinite;
    z-index: 24;
}
@keyframes yohakuFanButtonGlow {
    0%,100% { box-shadow: 0 0 0 1px rgba(193,154,70,.08), 0 0 0 0 rgba(202,165,89,0), 0 0 18px rgba(201,165,88,.00); }
    50% { box-shadow: 0 0 0 1px rgba(193,154,70,.20), 0 0 0 5px rgba(202,165,89,.08), 0 0 20px rgba(201,165,88,.15); }
}
@keyframes yohakuFanBadgePulse {
    0%,100% { opacity: 1; box-shadow: 0 13px 28px rgba(37,28,11,.10), 0 0 0 0 rgba(201,165,88,.00); }
    50% { opacity: 1; box-shadow: 0 15px 30px rgba(37,28,11,.14), 0 0 0 4px rgba(201,165,88,.15); }
}
@media (max-width: 899px) {
    .fan-user-button::after {
        content: "登録・ログインはこちら";
        top: calc(100% + 8px);
        min-width: 158px;
        padding: .38rem .62rem;
        font-size: .54rem;
        line-height: 1.35;
        letter-spacing: .06em;
    }
    .fan-user-button::before {
        top: calc(100% + 3px);
    }
}


/* =========================================================
   YOHAKU FAN USER badge overflow fix (2026-09-07)
   右はみ出し防止のため、吹き出しを右基準に再配置
   ========================================================= */
.fan-user-button::after {
    left: auto;
    right: -2px;
    transform: none;
    min-width: 0;
    width: max-content;
    max-width: min(78vw, 270px);
    white-space: normal;
    text-align: center;
}
.fan-user-button::before {
    left: auto;
    right: 28px;
    transform: rotate(45deg);
}
@media (max-width: 899px) {
    .fan-user-button::after {
        right: -6px;
        max-width: min(62vw, 190px);
    }
    .fan-user-button::before {
        right: 24px;
    }
}

/* Ticket sales limit / sold-out state */
.member-ticket-status.soldout{color:#666;border-color:#c9c9c9;background:#f1f1f1}.member-ticket-buy.soldout,.member-ticket-buy:disabled{border-color:#c7c7c7!important;background:#c7c7c7!important;color:#fff!important;cursor:not-allowed!important;box-shadow:none!important;opacity:1}.admin-ticket-form input[type=number]{width:100%;box-sizing:border-box}