/*
 * デザイン値（docs/01-site-analysis.md §4、reference/wix/rendered/specs.json）
 *
 * SP（768px 以下）について:
 * Wix のモバイル版は 320px 幅で組まれ、端末の幅に合わせて拡大表示される（390px なら 1.21875 倍）。
 * 同じ見え方にするため、SP の寸法は「320px 幅のときの値 × --u」で書く。--u は 1 単位の大きさ。
 * タブレットで巨大にならないよう、--u は 1.5px（480px 幅相当）で頭打ちにしている。
 */

@font-face {
	font-family: "Cinzel JL";
	src: url("../fonts/cinzel-wix.woff2") format("woff2"), url("../fonts/cinzel-wix.woff") format("woff");
	font-display: swap;
	/* Wix と同じく weight を指定しない（太字はブラウザの合成太字になる。ロゴがこれ） */
}

@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-300-latin.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

:root {
	/* 色 */
	--jl-black: #000;
	--jl-white: #fff;
	--jl-gray-dark: #605e5e;   /* color_12。区切り線、SP メニューの現在のページ */
	--jl-gray: #a0a09f;        /* color_13。補助の文字、現在のページのメニュー、日付 */
	--jl-gray-light: #ccc;     /* color_14。本文の文字 */
	--jl-text: #dbdbdb;
	--jl-accent: rgb(255, 140, 98); /* more ボタン */
	--jl-red: #e21c21;         /* 販売終了 */
	--jl-section-bg: rgba(0, 0, 0, 0.7);      /* 本文のセクション（D-010） */
	--jl-section-light-bg: #fff;              /* MERCH のセクション */
	--jl-menu-overlay: rgba(0, 0, 0, 0.8);    /* SP メニューを開いたとき */
	--jl-burger-bg: rgba(0, 0, 0, 0.5);

	/* フォント */
	--jl-font-display: "Cinzel JL", "Cinzel", serif;                 /* ロゴ、ヘッダーのメニュー、ページ名 */
	--jl-font-heading: "Jost", "Futura", sans-serif;                 /* futura-lt-w01-book の代わり */
	--jl-font-ui: "Barlow", "DIN Next", sans-serif;                  /* din-next-w01-light の代わり */
	--jl-font-body: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	--jl-font-helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* 寸法（PC） */
	--jl-content-width: 800px;   /* 本文の幅（x=240–1040） */
	--jl-wide-width: 960px;      /* HOME の MERCH バナーなど */
	--jl-hero-height: 750px;     /* ページ上部の、写真がそのまま見える部分 */
	--jl-gap-height: 50px;       /* セクション間の帯（写真が見える窓） */
	--jl-footer-height: 160px;

	/* SP の 1 単位（上の説明を参照） */
	--u: min(calc(100vw / 320), 1.5px);
}