@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700&display=swap');

/*////////////////////////////////////////////////////////////////////////
SEO用（視覚的に非表示だがスクリーンリーダー・検索エンジンには認識される）
////////////////////////////////////////////////////////////////////////*/
.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*////////////////////////////////////////////////////////////////////////
reset
////////////////////////////////////////////////////////////////////////*/
* {
	box-sizing: border-box;
	vertical-align: top;
	-webkit-tap-highlight-color: transparent;
}

html{
	scroll-behavior: smooth;
}

body,h1,h2,h3,h4,h5,h6,p,img,
hr,li,ul,dl,dt,dd{
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

img{
	width: 100%;
	border: 0;
	image-rendering: auto;
}

a{
	color: inherit;
	text-decoration: none;
	outline: none;
}

html,body{
	-webkit-font-size-adjust: 100%;
}

/*////////////////////////////////////////////////////////////////////////
基本カラー
////////////////////////////////////////////////////////////////////////*/
:root{
	--white: #fff;
	--black: #000;
	--ink: #504549;
	--cream: #fbf5f2;
	--pink: #f5e9ee;
	--gold: #deb484;
	--gold-line: #dcc08f;
	--navy: #3f3d5c;
	--gray: #8a817c;

	--navH: 90px;     /* ナビの高さ（PC） */
	--logoW: clamp(48px, 5.4vw, 104px); /* ナビのロゴ幅（PC。1920pxで104px） */
	--leftW: 40%;     /* PC左カラム幅 */
	--contentsW: 800px;
}

body{
	font-weight: 600;
	font-family: 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	font-size: 18px;
	line-height: 1.8;
	color: var(--ink);
	background-color: var(--cream);
}

/* JS有効時のみ、スクロール表示前の状態を隠す */
.js .fadeUp{
	opacity: 0;
	position: relative;
	bottom: -20px;
}

/*////////////////////////////////////////////////////////////////////////
ローディング（カーテンオープン）
////////////////////////////////////////////////////////////////////////*/
#loading{
	display: none; /* JS無効時は表示しない */
}
.js #loading{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200; /* ナビ・モーダルより前面 */
	pointer-events: none;
}
.ld_cu{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	background: #fff;
	transition: transform 1.2s cubic-bezier(.7, 0, .3, 1) .5s; /* ロゴが消えてから開く */
}
.ld_l{ left: 0; }
.ld_r{ right: 0; }
.ld_logo{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: ldLogoIn .8s ease backwards; /* 終了後は通常の指定に戻し、フェードアウトを効かせる */
	transition: opacity .4s;
}
.ld_logo img{
	width: clamp(200px, 40vw, 360px);
}
@keyframes ldLogoIn{
	from{ opacity: 0; transform: scale(.96); }
	to{ opacity: 1; transform: none; }
}
#loading.open .ld_l{ transform: translateX(-101%); }
#loading.open .ld_r{ transform: translateX(101%); }
#loading.open .ld_logo{ opacity: 0; }

/*////////////////////////////////////////////////////////////////////////
背景（ステンドグラス風・固定）
////////////////////////////////////////////////////////////////////////*/
.bg_glass{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--leftW);
	z-index: -1;
	display: flex;
	justify-content: center;
	overflow: hidden;
	background: #fcf9f6;
}
/* .contentsと同じ幅の枠。その左右の外側にステンドグラス帯を縦に繰り返し、画面に固定 */
.bg_glass_in{
	position: relative;
	width: min(var(--contentsW), 90%);
	height: 100%;
}
.bg_glass_in::before,
.bg_glass_in::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 178px;
	background-repeat: repeat-y;
	background-size: 178px auto;
}
.bg_glass_in::before{
	right: 100%;
	background-image: url("../img/common/bg_left.jpg");
}
.bg_glass_in::after{
	left: 100%;
	background-image: url("../img/common/bg_right.jpg");
}

/*////////////////////////////////////////////////////////////////////////
グローバルナビ
////////////////////////////////////////////////////////////////////////*/
.gnav{
	position: fixed;
	top: 0;
	left: var(--leftW);
	right: 0;
	height: var(--navH);
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1.5em;
	background: rgba(255,255,255,0.92);
	border-bottom: 1px solid var(--gold-line);
}
.gnav_logo{
	display: block;
	flex: none;
	width: var(--logoW);
}
/* 右側にロゴと同じ幅の空きを作り、メニューを常に中央へ（ロゴとは重ならない） */
.gnav::after{
	content: "";
	flex: none;
	width: var(--logoW);
}
.gnav_list{
	flex: 1;
	height: 100%;
	display: flex;
	justify-content: center;
	font-size: clamp(10px, 1.1vw, 16px); /* 画面幅に合わせて縮小 */
	letter-spacing: 0.1em;
	white-space: nowrap;
}
.gnav_list a{
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 clamp(0.5em, 1.4vw, 2.2em);
	transition: opacity .2s, box-shadow .2s;
}
/* 項目間の仕切り線 */
.gnav_list a + a::before{
	content: "";
	position: absolute;
	top: 28%;
	left: 0;
	width: 1px;
	height: 44%;
	background: var(--ink);
	opacity: 0.55;
}
.gnav_list a.active{
	box-shadow: inset 0 -3px 0 var(--gold);
}
/* ハンバーガー（SPのみ表示） */
.gnav_btn{
	display: none;
}
.gnav_overlay,
.gnav_sub{
	display: none; /* SPのドリルダウンメニュー専用 */
}
@media (hover: hover) and (pointer: fine) {
.gnav_list a:hover,
.gnav_logo:hover{
	opacity: 0.6;
}
}

/*////////////////////////////////////////////////////////////////////////
キービジュアル・ロゴの保存対策
  右クリックの「画像を保存」・ドラッグ・スマホの長押し保存の、メニューを出さない
  ※ スクリーンショットや開発者ツールからの取得は防げません
////////////////////////////////////////////////////////////////////////*/
.key_pc img,
.key_sp img,
.ld_logo img{
	pointer-events: none;          /* 画像自体がクリック・右クリックの対象にならない */
	-webkit-user-select: none;
	user-select: none;             /* 選択（ハイライト）されない */
	-webkit-user-drag: none;       /* ドラッグできない */
	-webkit-touch-callout: none;   /* iOSの長押しメニュー（画像を保存）を出さない */
}

/*////////////////////////////////////////////////////////////////////////
キービジュアル
////////////////////////////////////////////////////////////////////////*/
.key_pc{
	position: fixed;
	top: 0;
	left: 0;
	width: var(--leftW);
	height: 100vh;
	overflow: hidden;
	background: #fff;
	border-right: 4px solid var(--gold);
}
.key_pc .logo{
	display: block;
	width: 70%;
	margin: 1.5em auto 0;
}

.key_sp{
	display: none;
}

/*////////////////////////////////////////////////////////////////////////
本文エリア
////////////////////////////////////////////////////////////////////////*/
.stage{
	margin-left: var(--leftW);
	min-height: 100vh;
	padding-top: var(--navH);
}

.contents{
	position: relative;
	width: min(var(--contentsW), 90%);
	margin: 0 auto;
	background: var(--cream);
	border-left: 4px solid var(--gold);
	border-right: 4px solid var(--gold);
}

/* イベント概要の上・左右装飾 */
.deco{
	position: absolute;
	top: 0;
	width: 8%;
	z-index: 1;
	pointer-events: none;
}
.deco_l{ left: 0; }
.deco_r{ right: 0; }

.sec{
	padding: 3.5em 7%;
	scroll-margin-top: var(--navH);
}
/* セクション背景色 */
#event,
#novelty,
#goods{
	background-color: #fffaf8;
}
#entry{
	background-color: #f5edef;
}

/* EVENT見出し（PCのメニュー「イベント概要」の移動先）：ナビの高さ分あけて止める */
#event_read{
	scroll-margin-top: var(--navH);
	padding-top: 1em; /* 見出しの上の余白 */
}

/* 見出し */
.ttl{
	text-align: center;
	margin-bottom: 1.2em;
	font-weight: 600;
}
.ttl .en{
	display: block;
	font-size: 44px;
	letter-spacing: 0.08em;
	line-height: 1.0;
	font-weight: bold;
}
.ttl .ja{
	display: block;
	font-size: 24px;
	color: #ac939c;
}

.lead{
	text-align: center;
	font-size: 20px;
	margin-bottom: 2em;
}

/* 帯見出し */
.bar{
	margin: 2.2em 0 1em;
	padding: 0.85em 0.8em;
	text-align: center;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--white);
}
.bar_navy{ background: var(--navy); }
.bar_gold{
	background: var(--gold);
	color: #44455f;
}
.bar_light{
	background: #f7eff1;
	color: var(--ink);
	text-align: left;
	margin-top: 0;
	margin-bottom: 0;
}

/* 会場ブロック */
.venue{
	margin-bottom: 2em;
}
.tag{
	position: relative;
	z-index: 1;
	display: table;
	min-width: 5em;
	margin: 0 0 -0.35em -0.35em;
	padding: 0.1em;
	background: var(--gold);
	color: var(--white);
	font-size: 44px;
	line-height: 1.5;
	text-align: center;
}
.card{
	padding: 1.4em 6%;
	background: var(--white);
	border: 1px solid var(--gold-line);
	box-shadow: 3px 3px 0 var(--gold-line);
	text-align: center;
}
.card_plain{
	text-align: left;
	box-shadow: none;
}
/* GOODS内（お支払い金額の計算方法・注意事項）のカードは影あり */
#goods .card_plain{
	box-shadow: 3px 3px 0 var(--gold-line);
}
/* ENTRY内のカードは枠線・影なし */
#entry .card{
	border: none;
	box-shadow: none;
	background: #fffaf8;
}
/* 受付期間の期間表示カードは背景なし */
#entry .card.card_period{
	background: none;
}
#entry .card .date{
	background: #fff;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
#entry .inner_band{
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}
.card .label{
	display: inline-block;
	margin: 0.4em 0 0.3em;
	padding: 0 1.6em;
	border: none;
	background: #f7eff1;
	font-size: 18px;
	line-height: 1.8;
	width: 9em;
	font-weight: bold;
}
.card .venue_name{
	margin-bottom: 0.8em;
	font-size: 24px;
	font-weight: 600;
}
.card .date{
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}
.card .time{
	margin-top: 0.4em;
	font-size: 18px;
}
.inner_band{
	margin-bottom: 0;
	padding: 0.2em 0.5em;
	background-color: #f7eff1;
	font-size: 20px;
	font-weight: 600;
}

.notes{
	margin-top: 1em;
	text-align: left;
	font-size: 16px;
	line-height: 1.7;
}
.notes li{
	margin-bottom: 0;
	padding-left: 1em;  /* 2行目以降は1文字ぶん下げる（◆・※の字下げ） */
	text-indent: -1em;
}
/* EVENT内の注記：中央に寄せた幅24emのブロック */
#event .note{
	max-width: 24em;
	margin: 1em auto 0;
	color: #504549;
}

/* 注記内のリンク：下線あり、ホバーで背景 */
.note a,
.notes a,
#entry > a{ /* ENTRY直下の文章中リンク（応募条件の下の「こちら」など） */
	text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.note a:hover,
.notes a:hover,
#entry > a:hover{
	background: var(--cream);
}
}

/* テキスト */
.note{
	margin-top: 0.8em;
	font-size: 14px;
	line-height: 1.7;
	text-align: left;
	color: var(--gray);
	padding-left: 1em;  /* 2行目以降は1文字ぶん下げる（※の字下げ） */
	text-indent: -1em;
}
.note.center{
	text-align: center;
	margin-bottom: 1.5em;
	padding-left: 0;
	text-indent: 0;
}
.body{
	margin: 0.8em 0;
	font-size: 18px;
	line-height: 1.4;
}
.body span{
	background: #f7eff1;
}
.body.small{
	font-size: 16px;
}

/*////////////////////////////////////////////////////////////////////////
商品注意事項ページ（goods/goods_info.php）
////////////////////////////////////////////////////////////////////////*/
.sec_info{
	background-color: #fffaf8;
	min-height: calc(100vh - var(--navH));
}
.info_box{
	margin-bottom: 1.5em;
	box-shadow: 3px 3px 0 var(--gold-line);
}
.info_box .bar{
	margin: 0 0 1em;
}
.info_box .notes{
	margin: 0;
}
.info_box .notes li{
	margin-bottom: 1em;
}
.info_box .notes li:last-child{
	margin-bottom: 0;
}
/* 強調（太字・赤字） */
.info_em{
	font-weight: bold;
	color: #b3323f;
}
.btn_back{
	display: block;
	width: 12em;
	margin: 2.5em auto 0;
	padding: 0.5em 0;
	background: #504549;
	color: var(--white);
	font-size: 18px;
	letter-spacing: 0.1em;
	text-align: center;
	transition: opacity .2s;
}
@media (hover: hover) and (pointer: fine) {
.btn_back:hover{
	opacity: 0.7;
}
}

/*////////////////////////////////////////////////////////////////////////
NOVELTY
////////////////////////////////////////////////////////////////////////*/
.novelty_sample{
	border: 1px solid var(--gold-line);
	box-shadow: 3px 3px 0 var(--gold-line);
}
.novelty_sample .notes,
.novelty_sample .body{
	padding-left: 5%;
	padding-right: 5%;
}
.novelty_sample .notes{
	padding-bottom: 1.5em;
}
.novelty_img{
	margin-bottom: 0;
}

/*////////////////////////////////////////////////////////////////////////
GOODS
////////////////////////////////////////////////////////////////////////*/
.goods_list{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5em 4%;
}
.goods_list li{
	position: relative; /* 番号バッジの基準 */
	padding: 0;
	background: var(--white);
	border: 1px solid var(--gold-line);
	text-align: center;
	display: flex;  /* 同じ行のカードの高さをそろえ、ボタンを下にそろえる */
}
.goods_thumb{
	margin-bottom: 0;
}
.goods_thumb .no{
	position: absolute;
	top: -0.3em;  /* liの枠から上・左にはみ出す */
	left: -0.3em;
	z-index: 2;
	min-width: 2em;
	padding: 0 0.4em;
	background: var(--gold);
	color: var(--white);
	font-size: 16px;
	line-height: 1.8;
	text-align: center;
}
.goods_name{
	font-size: 18px;
	font-weight: bold;
	line-height: 1.2;
	text-align: left;
	background: #f7eff1;
	padding: 0.5em 0.2em;
}
/* アイテム名の1行目（Collar×Malice 10th Anniversary など）は小さく */
.goods_name .brand{
	font-size: 14px;
}
/* ♡など特殊文字：専用フォントで表示 */
.sym{
	font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols2", "Noto Sans Symbols", sans-serif;
	font-weight: normal;
}
.goods_price{
	margin: 0.3em 0 0.8em;
	font-size: 20px;
	font-weight: bold;
	text-align: right;
	padding-left: 0.3em;
	padding-right: 0.3em;
}
/* ￥と（税込）は16px */
.goods_price span{
	font-size: 16px;
	font-weight: bold;
	vertical-align: baseline; /* ¥・数字・(税込)の下端をそろえる */
}
.btn_more{
	display: block;
	padding: 0.4em 0;
	background: #504549;
	color: var(--white);
	font-size: 16px;
	letter-spacing: 0.1em;
	transition: opacity .2s;
	margin: auto 0.5em 0.5em; /* 上=auto でカード下端にそろえる */
}
.goods_open{
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
@media (hover: hover) and (pointer: fine) {
.goods_open:hover .btn_more{
	opacity: 0.7;
}
.goods_open:hover .goods_thumb img{
	opacity: 0.85;
}
}

/*////////////////////////////////////////////////////////////////////////
商品詳細モーダル
////////////////////////////////////////////////////////////////////////*/
body.modal_open{
	overflow: hidden;
}
.modal{
	position: fixed;
	inset: 0;
	z-index: 100; /* ナビ・フッター・左カラムより前面 */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4%;
	visibility: hidden;
	opacity: 0;
	transition: opacity .3s, visibility 0s .3s;
}
.modal.show{
	visibility: visible;
	opacity: 1;
	transition: opacity .3s;
}
.modal_bg{
	position: absolute;
	inset: 0;
	background: rgba(40,35,60,0.78);
}
.modal_box{
	position: relative;
	width: min(100%, 640px);
	max-height: 92vh;
	overflow-y: auto;
	padding: 2.5em 2% 2em;
	background: var(--white);
	border: 2px solid var(--gold);
	outline: none;
	transform: translateY(16px);
	transition: transform .3s;
	scrollbar-width: thin;
	scrollbar-color: var(--gold) #f7eff1; /* つまみ=ゴールド / 溝 */
}
/* scrollbar-color 非対応のブラウザ（旧Safari等）向け */
@supports not (scrollbar-color: auto) {
.modal_box::-webkit-scrollbar{
	width: 8px;
}
.modal_box::-webkit-scrollbar-track{
	background: #f7eff1;
}
.modal_box::-webkit-scrollbar-thumb{
	background: var(--gold);
	border-radius: 4px;
}
}
.modal.show .modal_box{
	transform: translateY(0);
}
.modal_close{
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	background: none;
	border: 0;
	cursor: pointer;
}
.modal_close::before,
.modal_close::after{
	content: "";
	position: absolute;
	top: 17px;
	left: 7px;
	width: 22px;
	height: 2px;
	background: var(--navy);
}
.modal_close::before{ transform: rotate(45deg); }
.modal_close::after{ transform: rotate(-45deg); }

.modal_close_btn{
	display: block;
	width: 10em;
	margin: 2em auto 0;
	padding: 0.5em 0;
	background: var(--navy);
	border: 0;
	color: var(--white);
	font-family: inherit;
	font-size: 18px;
	letter-spacing: 0.1em;
	cursor: pointer;
}

.goods_detail .d_no{
	font-size: 12px;
	color: var(--gold);
	letter-spacing: 0.1em;
}
.goods_detail .d_name{
	margin: 0.2em 0 1em;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}
.goods_detail .d_name .brand{
	font-size: 22px;
}
.d_main{
	background: var(--cream);
}
.d_thumbs{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px 2%;
	margin-top: 2%;
}
.d_thumb{
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid transparent;
	background: none;
	cursor: pointer;
	opacity: 0.6;
}
.d_thumb.active{
	border-color: var(--gold);
	opacity: 1;
}
.d_price{
	margin: 1em 0 0.5em;
	font-size: 28px;
	font-weight: 600;
}
.d_price span{
	font-size: 11px;
	font-weight: 600;
	vertical-align: baseline; /* ¥・数字・(税込)の下端をそろえる */
}
/* 「価格:」は ¥ と同じ大きさ（.d_price 本体の大きさ） */
.d_price span.label{
	font-size: 1em;
}
.d_desc{
	font-size: 20px;
	line-height: 1.3;
}
.d_spec{
	display: grid;                      /* dt と dd を同じ行に並べ、行の高さをそろえる */
	grid-template-columns: 5em 1fr;
	gap: 0.3em 0.5em;
	margin-top: 1em;
	padding-top: 0.8em;
	border-top: 1px solid var(--gold-line);
	font-size: 18px;
	line-height: 1.8;
}
.d_spec dt{
	display: flex;
	align-items: center;                /* 文字を上下中央に */
	padding: 0 0.4em;
	background: var(--gold);            /* 高さは同じ行の dd に自動でそろう */
	color: var(--white);
	font-weight: 600;
}
.d_spec dd{
	margin: 0;
}
.d_note{
	margin-top: 1em;
	font-size: 16px;
	color: var(--ink);
	padding: 0.6em 0.8em;
	background: #f7eff1;
}
/* 注記内のリンク：下線あり、ホバーで背景 */
.d_note a{
	text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
.d_note a:hover{
	background: var(--cream);
}
}

/*######################################################################
メディアクエリ（スマホ・タブレット：幅800px以下）
######################################################################*/
@media screen and (max-width: 800px) {

:root{
	--navH: clamp(56px, calc(8.293vw + 23.66px), 90px);
	--leftW: 0px;
}

body{
	font-size: clamp(14px, calc(0.9756vw + 10.2px), 18px);
}

.bg_glass{
	left: 0;
}
.bg_glass_in{
	width: 100%;
}

.gnav{
	left: 0;
	padding: 0 3%;
}
.gnav_logo{ width: clamp(60px, calc(10.73vw + 18.15px), 104px); }
.gnav::after{ display: none; }
/* ハンバーガーボタン（右上・三本線） */
.gnav_btn{
	position: relative;
	display: block;
	width: var(--navH);
	height: var(--navH);
	margin-right: -3%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}
.gnav_btn span{
	position: absolute;
	left: 50%;
	width: 26px;
	height: 2px;
	margin-left: -13px;
	background: var(--ink);
	transition: transform .3s, opacity .3s, top .3s;
}
.gnav_btn span:nth-child(1){ top: calc(50% - 9px); }
.gnav_btn span:nth-child(2){ top: calc(50% - 1px); }
.gnav_btn span:nth-child(3){ top: calc(50% + 7px); }
.gnav.open .gnav_btn span:nth-child(1){ top: calc(50% - 1px); transform: rotate(45deg); }
.gnav.open .gnav_btn span:nth-child(2){ opacity: 0; }
.gnav.open .gnav_btn span:nth-child(3){ top: calc(50% - 1px); transform: rotate(-45deg); }

/* メニュー本体：右からスライドインするドリルダウン（右寄せ） */
.gnav_overlay{
	display: block;
	z-index: 1; /* パネルより奥 */
	position: fixed;
	top: var(--navH);
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(30,25,35,0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s, visibility 0s .35s;
}
.gnav.open .gnav_overlay{
	opacity: 1;
	visibility: visible;
	transition: opacity .35s;
}
.gnav_list{
	flex: none;
	justify-content: flex-start;
	flex-direction: column;
	z-index: 2; /* 暗い背景より手前 */
	position: fixed;
	top: var(--navH);
	left: auto;
	right: 0;
	bottom: 0;
	width: 78%;
	max-width: 480px;
	height: auto;
	transform: translateX(100%);
	overflow: hidden;
	font-size: clamp(14px, calc(1.951vw + 6.39px), 22px);
	background: var(--white);
	visibility: hidden;
	transition: transform .35s ease, visibility 0s .35s;
}
.gnav.open .gnav_list{
	transform: none;
	visibility: visible;
	transition: transform .35s ease;
}
.gnav_list a{
	justify-content: flex-end;
	text-align: right;
	padding: 1.1em 1.4em;
	border-bottom: 1px solid #e6e1df;
}
.gnav_list a + a::before{ display: none; }
.gnav_list a.active{
	box-shadow: none;
	color: var(--gold);
}
/* 下の階層があるメニュー項目（›） */
.gnav_list a[data-sub]::after{
	content: "ƒA";
	padding-left: 0.6em;
}
/* 下の階層：右からスライドして重なる */
.gnav_sub{
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	background: var(--white);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .35s ease, visibility 0s .35s;
}
.gnav_sub.show{
	transform: none;
	visibility: visible;
	transition: transform .35s ease;
}
.gnav_back{
	display: block;
	width: 100%;
	padding: 1.1em 1.4em;
	background: var(--cream);
	border: 0;
	border-bottom: 1px solid #e6e1df;
	color: var(--ink);
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	text-align: right;
	cursor: pointer;
}
body.menu_open{
	overflow: hidden;
}

.key_pc{
	display: none;
}
.key_sp{
	display: block;
	position: relative;
	background: #fff;
}
.key_sp .logo{
	display: block;
	width: 55%;
	margin: 0 auto;
	padding: 1em 0;
}

.stage{
	margin-left: 0;
	padding-top: var(--navH);
}

.contents{
	width: 100%;
	border-left: none;
	border-right: none;
}

.deco{ width: 6%; }

.sec{
	padding: 3em 6%;
}

.ttl .en{ font-size: clamp(30px, calc(3.415vw + 16.68px), 44px); }
.ttl .ja{ font-size: clamp(16px, calc(1.951vw + 8.39px), 24px); }
.lead{ font-size: clamp(14px, calc(1.463vw + 8.293px), 20px); }
.bar{ font-size: clamp(14px, calc(2.439vw + 4.488px), 24px); padding: 0.85em 0.8em; }
.tag{ font-size: clamp(28px, calc(3.902vw + 12.78px), 44px); }
.card .label{ font-size: clamp(13px, calc(1.22vw + 8.244px), 18px); }
.card .venue_name{ font-size: clamp(14px, calc(2.439vw + 4.488px), 24px); }
.card .date{ font-size: clamp(14px, calc(2.439vw + 4.488px), 24px); }
.card .time{ font-size: clamp(13px, calc(1.22vw + 8.244px), 18px); }
.inner_band{ font-size: clamp(14px, calc(1.463vw + 8.293px), 20px); }
.notes{ font-size: clamp(12px, calc(0.9756vw + 8.195px), 16px); }
.note{ font-size: clamp(12px, calc(0.4878vw + 10.1px), 14px); }
.body{ font-size: clamp(14px, calc(0.9756vw + 10.2px), 18px); }
.body.small{ font-size: clamp(12px, calc(0.9756vw + 8.195px), 16px); }
.goods_name .brand{ font-size: clamp(12px, calc(0.4878vw + 10.1px), 14px); }
.goods_name{ font-size: clamp(13px, calc(1.22vw + 8.244px), 18px); }
.goods_price{ font-size: clamp(14px, calc(1.463vw + 8.293px), 20px); }
.goods_price span{ font-size: clamp(12px, calc(0.9756vw + 8.195px), 16px); }
.btn_more{ font-size: clamp(12px, calc(0.9756vw + 8.195px), 16px); }
.btn_back{ font-size: clamp(13px, calc(1.22vw + 8.244px), 18px); }
.modal_box{ padding: 2.5em 7% 2em; }
.goods_detail .d_name .brand{ font-size: clamp(12px, calc(2.439vw + 2.488px), 22px); }
.goods_detail .d_name{ font-size: clamp(15px, calc(3.171vw + 2.634px), 28px); }
.d_price{ font-size: clamp(15px, calc(3.171vw + 2.634px), 28px); }
.d_desc{ font-size: clamp(14px, calc(1.463vw + 8.293px), 20px); }
.d_spec{ font-size: clamp(13px, calc(1.22vw + 8.244px), 18px); }
.d_note{ font-size: clamp(12px, calc(0.9756vw + 8.195px), 16px); }
.modal_close_btn{ font-size: clamp(13px, calc(1.22vw + 8.244px), 18px); }
.goods_detail .d_no{ font-size: clamp(13px, calc(0.7317vw + 10.15px), 16px); }
.d_price span{ font-size: clamp(12px, calc(0.9756vw + 8.195px), 16px); }
}