@charset "utf-8";

/*  ===============================
			ROOT
	色はデザイン（.ai）から拾った値
===============================*/

:root {
	--sans-serif: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--fzBody: 16px;
	--letterBody: 0.04em;
	--lh: 1.7;

	--bgColor: #05040f; /* 宇宙の黒（背景画像が出る前・余白） */
	--textColor: #e9ecff;
	--aboutColor: #6e88ff; /* ABOUT の箱 */
	--aboutColorHi: #8fa2ff;
	--lineColor: #7f7aff; /* チケットボタンの枠 */
	--grayColor: #b0bcc8; /* 日付・アーティスト名の灰色 */
	--dateBlue: #6674f8; /* 日付の下側の青 */

	--easeExpo: cubic-bezier(0.16, 1, 0.3, 1);
	--easeBack: cubic-bezier(0.34, 1.56, 0.64, 1);
	--easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
}

html {
	background-color: var(--bgColor);

	/*  ドキュメント自体はスクロールさせない。実スクロールは .Gcontainer が持つ（テンプレートの方式）。 */
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0 auto;
	background-color: var(--bgColor);
	color: var(--textColor);
	font-family: var(--sans-serif);
	font-size: var(--fzBody);
	line-height: var(--lh);
	letter-spacing: var(--letterBody);
	height: 100%;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

/*  ===============================
			global
===============================  */
.Gcontainer {
	position: fixed;
	inset: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/* 1画面だけのページ。main と hero が画面いっぱい */
.main {
	height: 100%;
}

/* 読み上げ用（画面には出さない） */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 部品の SVG は箱の幅いっぱいに伸ばす */
svg.part {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}