@charset "UTF-8";

/*
utility.css — たたき台（v0.2）
- 接頭辞 u- / ケバブケース / 上書き用途のため !important を付与
- ブレイクポイント：base=PC / -tb=1240px以下 / -sp=768px以下（デスクトップファースト）
- 色・余白は style.css の変数に準拠（余白は全 --space トークンを網羅）
- gap は u-flex / u-grid に既定値（--space-24）を持たせ、u-gap-* で上書き
- u-visible-pc / u-visible-sp は style.css 定義を再利用（ここでは再定義しない）
*/


/* display */
.u-block{ display: block !important; }
.u-inline-block{ display: inline-block !important; }
.u-none{ display: none !important; }


/* text-align */
.u-ta-left{ text-align: left !important; }
.u-ta-center{ text-align: center !important; }
.u-ta-right{ text-align: right !important; }


/* width */
.u-w-full{ width: 100% !important; }
.u-w-auto{ width: auto !important; }
.u-mx-auto{ margin-left: auto !important; margin-right: auto !important; }


/* margin-top */
.u-mt-0{ margin-top: var(--space-0) !important; }
.u-mt-4{ margin-top: var(--space-4) !important; }
.u-mt-8{ margin-top: var(--space-8) !important; }
.u-mt-10{ margin-top: var(--space-10) !important; }
.u-mt-12{ margin-top: var(--space-12) !important; }
.u-mt-14{ margin-top: var(--space-14) !important; }
.u-mt-16{ margin-top: var(--space-16) !important; }
.u-mt-20{ margin-top: var(--space-20) !important; }
.u-mt-24{ margin-top: var(--space-24) !important; }
.u-mt-30{ margin-top: var(--space-30) !important; }
.u-mt-32{ margin-top: var(--space-32) !important; }
.u-mt-36{ margin-top: var(--space-36) !important; }
.u-mt-40{ margin-top: var(--space-40) !important; }
.u-mt-48{ margin-top: var(--space-48) !important; }
.u-mt-56{ margin-top: var(--space-56) !important; }
.u-mt-60{ margin-top: var(--space-60) !important; }
.u-mt-80{ margin-top: var(--space-80) !important; }
.u-mt-96{ margin-top: var(--space-96) !important; }

/* margin-bottom */
.u-mb-0{ margin-bottom: var(--space-0) !important; }
.u-mb-4{ margin-bottom: var(--space-4) !important; }
.u-mb-8{ margin-bottom: var(--space-8) !important; }
.u-mb-10{ margin-bottom: var(--space-10) !important; }
.u-mb-12{ margin-bottom: var(--space-12) !important; }
.u-mb-14{ margin-bottom: var(--space-14) !important; }
.u-mb-16{ margin-bottom: var(--space-16) !important; }
.u-mb-20{ margin-bottom: var(--space-20) !important; }
.u-mb-24{ margin-bottom: var(--space-24) !important; }
.u-mb-30{ margin-bottom: var(--space-30) !important; }
.u-mb-32{ margin-bottom: var(--space-32) !important; }
.u-mb-36{ margin-bottom: var(--space-36) !important; }
.u-mb-40{ margin-bottom: var(--space-40) !important; }
.u-mb-48{ margin-bottom: var(--space-48) !important; }
.u-mb-56{ margin-bottom: var(--space-56) !important; }
.u-mb-60{ margin-bottom: var(--space-60) !important; }
.u-mb-80{ margin-bottom: var(--space-80) !important; }
.u-mb-96{ margin-bottom: var(--space-96) !important; }

/* padding-top */
.u-pt-0{ padding-top: var(--space-0) !important; }
.u-pt-4{ padding-top: var(--space-4) !important; }
.u-pt-8{ padding-top: var(--space-8) !important; }
.u-pt-10{ padding-top: var(--space-10) !important; }
.u-pt-12{ padding-top: var(--space-12) !important; }
.u-pt-14{ padding-top: var(--space-14) !important; }
.u-pt-16{ padding-top: var(--space-16) !important; }
.u-pt-20{ padding-top: var(--space-20) !important; }
.u-pt-24{ padding-top: var(--space-24) !important; }
.u-pt-30{ padding-top: var(--space-30) !important; }
.u-pt-32{ padding-top: var(--space-32) !important; }
.u-pt-36{ padding-top: var(--space-36) !important; }
.u-pt-40{ padding-top: var(--space-40) !important; }
.u-pt-48{ padding-top: var(--space-48) !important; }
.u-pt-56{ padding-top: var(--space-56) !important; }
.u-pt-60{ padding-top: var(--space-60) !important; }
.u-pt-80{ padding-top: var(--space-80) !important; }
.u-pt-96{ padding-top: var(--space-96) !important; }

/* padding-bottom */
.u-pb-0{ padding-bottom: var(--space-0) !important; }
.u-pb-4{ padding-bottom: var(--space-4) !important; }
.u-pb-8{ padding-bottom: var(--space-8) !important; }
.u-pb-10{ padding-bottom: var(--space-10) !important; }
.u-pb-12{ padding-bottom: var(--space-12) !important; }
.u-pb-14{ padding-bottom: var(--space-14) !important; }
.u-pb-16{ padding-bottom: var(--space-16) !important; }
.u-pb-20{ padding-bottom: var(--space-20) !important; }
.u-pb-24{ padding-bottom: var(--space-24) !important; }
.u-pb-30{ padding-bottom: var(--space-30) !important; }
.u-pb-32{ padding-bottom: var(--space-32) !important; }
.u-pb-36{ padding-bottom: var(--space-36) !important; }
.u-pb-40{ padding-bottom: var(--space-40) !important; }
.u-pb-48{ padding-bottom: var(--space-48) !important; }
.u-pb-56{ padding-bottom: var(--space-56) !important; }
.u-pb-60{ padding-bottom: var(--space-60) !important; }
.u-pb-80{ padding-bottom: var(--space-80) !important; }
.u-pb-96{ padding-bottom: var(--space-96) !important; }


/* flex（gap 既定 = --space-24） */
.u-flex{ display: flex !important; gap: var(--space-24); }
.u-inline-flex{ display: inline-flex !important; gap: var(--space-24); }
.u-flex-col{ flex-direction: column !important; }
.u-flex-wrap{ flex-wrap: wrap !important; }
.u-items-start{ align-items: flex-start !important; }
.u-items-center{ align-items: center !important; }
.u-items-end{ align-items: flex-end !important; }
.u-justify-start{ justify-content: flex-start !important; }
.u-justify-center{ justify-content: center !important; }
.u-justify-end{ justify-content: flex-end !important; }
.u-justify-between{ justify-content: space-between !important; }


/* grid（gap 既定 = --space-24） */
.u-grid{ display: grid !important; gap: var(--space-24); }
.u-cols-1{ grid-template-columns: repeat(1, 1fr) !important; }
.u-cols-2{ grid-template-columns: repeat(2, 1fr) !important; }
.u-cols-3{ grid-template-columns: repeat(3, 1fr) !important; }
.u-cols-4{ grid-template-columns: repeat(4, 1fr) !important; }
.u-cols-5{ grid-template-columns: repeat(5, 1fr) !important; }
.u-cols-6{ grid-template-columns: repeat(6, 1fr) !important; }


/* gap（既定を上書き。flex/grid 共通） */
.u-gap-0{ gap: var(--space-0) !important; }
.u-gap-4{ gap: var(--space-4) !important; }
.u-gap-8{ gap: var(--space-8) !important; }
.u-gap-10{ gap: var(--space-10) !important; }
.u-gap-12{ gap: var(--space-12) !important; }
.u-gap-16{ gap: var(--space-16) !important; }
.u-gap-20{ gap: var(--space-20) !important; }
.u-gap-24{ gap: var(--space-24) !important; }
.u-gap-30{ gap: var(--space-30) !important; }
.u-gap-32{ gap: var(--space-32) !important; }
.u-gap-36{ gap: var(--space-36) !important; }
.u-gap-40{ gap: var(--space-40) !important; }
.u-gap-48{ gap: var(--space-48) !important; }
.u-gap-56{ gap: var(--space-56) !important; }
.u-gap-60{ gap: var(--space-60) !important; }
.u-gap-80{ gap: var(--space-80) !important; }


/* text-color */
.u-tc-white{ color: var(--white) !important; }
.u-tc-black{ color: var(--black) !important; }
.u-tc-blue-3{ color: var(--blue-3) !important; }
.u-tc-orange{ color: var(--orange) !important; }


/* background-color */
.u-bg-white{ background-color: var(--white) !important; }
.u-bg-gray-1{ background-color: var(--gray-1) !important; }
.u-bg-blue-1{ background-color: var(--blue-1) !important; }
.u-bg-blue-3{ background-color: var(--blue-3) !important; }
.u-bg-blue-4{ background: var(--blue-4) url(../img/low-sec-achieve-bg.png) no-repeat center bottom / 100% auto !important; }
.u-bg-blue-5{ background-color: var(--blue-5) !important; }
.u-bg-orange{ background-color: var(--orange) !important; }


/* pg-region-list ラベル幅（--pg-region-label-w を上書き） */
.u-region-label-160{ --pg-region-label-w: 160px !important; }
.u-region-label-200{ --pg-region-label-w: 200px !important; }
.u-region-label-240{ --pg-region-label-w: 240px !important; }
.u-region-label-280{ --pg-region-label-w: 280px !important; }
.u-region-label-320{ --pg-region-label-w: 320px !important; }


/* background-image（装飾・値は仮） */
.u-bg-img-01{
	background-image: url(../img/deco-01.svg) !important;
	background-repeat: no-repeat !important;
	background-position: right bottom !important;
	background-size: auto !important;
}
.u-bg-img-02{
	background-image: url(../img/deco-02.svg) !important;
	background-repeat: no-repeat !important;
	background-position: left top !important;
	background-size: auto !important;
}


/* ============================================================
   1240px 以下（-tb）
   ============================================================ */
@media (max-width: 1240px){
	.u-cols-1-tb{ grid-template-columns: repeat(1, 1fr) !important; }
	.u-cols-2-tb{ grid-template-columns: repeat(2, 1fr) !important; }
	.u-cols-3-tb{ grid-template-columns: repeat(3, 1fr) !important; }

	.u-flex-col-tb{ flex-direction: column !important; }

	.u-ta-center-tb{ text-align: center !important; }
	.u-w-full-tb{ width: 100% !important; }

	.u-mt-0-tb{ margin-top: var(--space-0) !important; }
	.u-mt-16-tb{ margin-top: var(--space-16) !important; }
	.u-mt-24-tb{ margin-top: var(--space-24) !important; }
	.u-mt-32-tb{ margin-top: var(--space-32) !important; }
	.u-mt-40-tb{ margin-top: var(--space-40) !important; }
	.u-mb-0-tb{ margin-bottom: var(--space-0) !important; }
	.u-mb-16-tb{ margin-bottom: var(--space-16) !important; }
	.u-mb-24-tb{ margin-bottom: var(--space-24) !important; }
	.u-mb-32-tb{ margin-bottom: var(--space-32) !important; }
	.u-mb-40-tb{ margin-bottom: var(--space-40) !important; }
}


/* ============================================================
   768px 以下（-sp）
   ============================================================ */
@media (max-width: 768px){
	.u-none-sp{ display: none !important; }
	.u-block-sp{ display: block !important; }

	.u-cols-1-sp{ grid-template-columns: repeat(1, 1fr) !important; }
	.u-cols-2-sp{ grid-template-columns: repeat(2, 1fr) !important; }

	.u-flex-col-sp{ flex-direction: column !important; }

	.u-ta-center-sp{ text-align: center !important; }
	.u-ta-left-sp{ text-align: left !important; }
	.u-w-full-sp{ width: 100% !important; }

	.u-mt-0-sp{ margin-top: var(--space-0) !important; }
	.u-mt-8-sp{ margin-top: var(--space-8) !important; }
	.u-mt-16-sp{ margin-top: var(--space-16) !important; }
	.u-mt-24-sp{ margin-top: var(--space-24) !important; }
	.u-mt-32-sp{ margin-top: var(--space-32) !important; }
	.u-mt-40-sp{ margin-top: var(--space-40) !important; }
	.u-mb-0-sp{ margin-bottom: var(--space-0) !important; }
	.u-mb-8-sp{ margin-bottom: var(--space-8) !important; }
	.u-mb-16-sp{ margin-bottom: var(--space-16) !important; }
	.u-mb-24-sp{ margin-bottom: var(--space-24) !important; }
	.u-mb-32-sp{ margin-bottom: var(--space-32) !important; }
	.u-mb-40-sp{ margin-bottom: var(--space-40) !important; }

	.u-gap-8-sp{ gap: var(--space-8) !important; }
	.u-gap-16-sp{ gap: var(--space-16) !important; }
	.u-gap-24-sp{ gap: var(--space-24) !important; }
}