@charset "UTF-8";

/* ベース
----------------------------------------------------*/
:root {
	--s-size: 360;
	--e-size: 1240;

	--start-size: var(--s-size);
	--end-size: var(--e-size);
}

/* margin
----------------------------------------------------*/
.mt {margin-top: clamp(calc(var(--mt-s) * 1px), calc(calc(var(--mt-s) * 1px) + (var(--mt-e) - var(--mt-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--mt-e) * 1px));}
.mb {margin-bottom: clamp(calc(var(--mb-s) * 1px), calc(calc(var(--mb-s) * 1px) + (var(--mb-e) - var(--mb-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--mb-e) * 1px));}
.mr {margin-right: clamp(calc(var(--mr-s) * 1px), calc(calc(var(--mr-s) * 1px) + (var(--mr-e) - var(--mr-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--mr-e) * 1px));}
.ml {margin-left: clamp(calc(var(--ml-s) * 1px), calc(calc(var(--ml-s) * 1px) + (var(--ml-e) - var(--ml-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--ml-e) * 1px));}

.my {margin-block: clamp(calc(var(--my-s) * 1px), calc(calc(var(--my-s) * 1px) + (var(--my-e) - var(--my-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--my-e) * 1px));}
.mx {margin-inline: clamp(calc(var(--mx-s) * 1px), calc(calc(var(--mx-s) * 1px) + (var(--mx-e) - var(--mx-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--mx-e) * 1px));}

.ma {margin: clamp(calc(var(--ma-s) * 1px), calc(calc(var(--ma-s) * 1px) + (var(--ma-e) - var(--ma-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--ma-e) * 1px));}

/**/
.ma-36-60 {--ma-s: 36;--ma-e: 60;}
.mt-16 {--mt-s: 16;--mt-e: 16;}
.mt-40 {--mt-s: 40;--mt-e: 40;}
.mb-60-60 {--mb-s: 60;--mb-e: 60;}
.mt-40-40 {--mt-s: 40;--mt-e: 40;}


/* padding
----------------------------------------------------*/
.pt {padding-top: clamp(calc(var(--pt-s) * 1px), calc(calc(var(--pt-s) * 1px) + (var(--pt-e) - var(--pt-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--pt-e) * 1px));}
.pb {padding-bottom: clamp(calc(var(--pb-s) * 1px), calc(calc(var(--pb-s) * 1px) + (var(--pb-e) - var(--pb-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--pb-e) * 1px));}
.pr {padding-right: clamp(calc(var(--pr-s) * 1px), calc(calc(var(--pr-s) * 1px) + (var(--pr-e) - var(--pr-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--pr-e) * 1px));}
.pl {padding-left: clamp(calc(var(--pl-s) * 1px), calc(calc(var(--pl-s) * 1px) + (var(--pl-e) - var(--pl-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--pl-e) * 1px));}

.py {padding-block: clamp(calc(var(--py-s) * 1px), calc(calc(var(--py-s) * 1px) + (var(--py-e) - var(--py-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--py-e) * 1px));}
.px {padding-inline: clamp(calc(var(--px-s) * 1px), calc(calc(var(--px-s) * 1px) + (var(--px-e) - var(--px-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--px-e) * 1px));}

.pa {padding: clamp(calc(var(--pa-s) * 1px), calc(calc(var(--pa-s) * 1px) + (var(--pa-e) - var(--pa-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--pa-e) * 1px));}

/**/
.px-12-24 {--px-s: 12;--px-e: 24;}
.py-20-40 {--py-s: 20;--py-e: 40;}



/* フォントサイズ
----------------------------------------------------*/
.fs {font-size: clamp(calc(var(--fs-s) * 1px), calc(calc(var(--fs-s) * 1px) + (var(--fs-e) - var(--fs-s)) / (var(--end-size) - var(--start-size)) * (100vw - calc(var(--start-size) * 1px))), calc(var(--fs-e) * 1px));}

/**/
.fs-28-40 {--fs-s: 28;--fs-e: 40;}

/* グリッドシステム
	最低幅 ×（希望カラム数+1）+ gappx ×（想定gap個数+1）⇒ 360 *（3+1）+ 16 * (2+1) ⇒ 1440 + 48 = 1488px だとNGなので -1 する（padding分も追加）
	360px × 2カラム + 1gap が入ると 2カラムになる。つまる 360px * 2 + 16 = 736px（+padding分も追加）≒ 770px が切り替わりポイント
	なので 最小カラムの横幅からブレークポイントを逆算するといいかもしれない
----------------------------------------------------*/
.grid {
	/* 寄せ */
	&.ai-c {align-items: center;}
	&.jc-c {justify-content: center;}

	/* gapを用意 */
	&.gap-16 {gap: 16px;}
	&.gap-x-16 {column-gap: 16px;}
	&.gap-y-16 {row-gap: 16px;}

	/* 2カラムの場合を用意 */
	&.g2c {
		--grid-left: 1fr;
		--grid-right: 1fr;
		grid-template-columns: 1fr;

		&.gs {
			@media (width > 480px) {
				display: grid;
				grid-template-columns: var(--grid-left) var(--grid-right);
				&.g-1-9 {grid-template-columns: 1fr 9fr;}	&.g-9-1 {grid-template-columns: 9fr 1fr;}
				&.g-2-8 {grid-template-columns: 2fr 8fr;}	&.g-8-2 {grid-template-columns: 8fr 2fr;}
				&.g-3-7 {grid-template-columns: 3fr 7fr;}	&.g-7-3 {grid-template-columns: 7fr 3fr;}
				&.g-4-6 {grid-template-columns: 4fr 6fr;}	&.g-6-4 {grid-template-columns: 6fr 4fr;}
				&.g-5-5 {grid-template-columns: 1fr 1fr;}	&.g-5-5 {grid-template-columns: 1fr 1fr;}
			}
		}
		&.gm {
			@media (width > 770px) {
				display: grid;
				grid-template-columns: var(--grid-left) var(--grid-right);
				&.g-1-9 {grid-template-columns: 1fr 9fr;}	&.g-9-1 {grid-template-columns: 9fr 1fr;}
				&.g-2-8 {grid-template-columns: 2fr 8fr;}	&.g-8-2 {grid-template-columns: 8fr 2fr;}
				&.g-3-7 {grid-template-columns: 3fr 7fr;}	&.g-7-3 {grid-template-columns: 7fr 3fr;}
				&.g-4-6 {grid-template-columns: 4fr 6fr;}	&.g-6-4 {grid-template-columns: 6fr 4fr;}
				&.g-5-5 {grid-template-columns: 1fr 1fr;}	&.g-5-5 {grid-template-columns: 1fr 1fr;}
			}
		}
		&.gl {
			@media (width > 1240px) {
				display: grid;
				grid-template-columns: var(--grid-left) var(--grid-right);
				&.g-1-9 {grid-template-columns: 1fr 9fr;}	&.g-9-1 {grid-template-columns: 9fr 1fr;}
				&.g-2-8 {grid-template-columns: 2fr 8fr;}	&.g-8-2 {grid-template-columns: 8fr 2fr;}
				&.g-3-7 {grid-template-columns: 3fr 7fr;}	&.g-7-3 {grid-template-columns: 7fr 3fr;}
				&.g-4-6 {grid-template-columns: 4fr 6fr;}	&.g-6-4 {grid-template-columns: 6fr 4fr;}
				&.g-5-5 {grid-template-columns: 1fr 1fr;}	&.g-5-5 {grid-template-columns: 1fr 1fr;}
			}
		}
		&.gxl {
			@media (width > 1600px) {
				display: grid;
				grid-template-columns: var(--grid-left) var(--grid-right);
				&.g-1-9 {grid-template-columns: 1fr 9fr;}	&.g-9-1 {grid-template-columns: 9fr 1fr;}
				&.g-2-8 {grid-template-columns: 2fr 8fr;}	&.g-8-2 {grid-template-columns: 8fr 2fr;}
				&.g-3-7 {grid-template-columns: 3fr 7fr;}	&.g-7-3 {grid-template-columns: 7fr 3fr;}
				&.g-4-6 {grid-template-columns: 4fr 6fr;}	&.g-6-4 {grid-template-columns: 6fr 4fr;}
				&.g-5-5 {grid-template-columns: 1fr 1fr;}	&.g-5-5 {grid-template-columns: 1fr 1fr;}
			}
		}
	}

	/* 3カラム（パターンが多過ぎるので360pxで同幅の場合のみ） */
	&.g3c {
		&.column360 {grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));}
	}
}