:root {
	/* デフォルトの背景色 */
	--primary-bg-color: #fff;
	/* サブ背景色 */
	--secondary-bg-color: #000;
	/* アクセント背景色 */
	--accent-bg-color: #ffcc00;
	/* 明るい背景色 */
	--light-bg-color: #ff;
	/* 暗い背景色 */
	--dark-bg-color: #fff;

	/* デフォルトのテキスト色 */
	--primary-text-color: #333;
	/* サブテキスト色 */
	--secondary-text-color: #fff;
	/* アクセントテキスト色 */
	--accent-text-color: #ff0000;
	/* 明るいテキスト色 */
	--light-text-color: #f4f4f4;
	/* 暗いテキスト色 */
	--dark-text-color: #333;

	/* 基本のフォントサイズ */
	--font-size-base: 16px;
	/* 小さいフォントサイズ */
	--font-size-small: 14px;
	/* 中くらいのフォントサイズ */
	--font-size-medium: 18px;
	/* 大きいフォントサイズ */
	--font-size-large: 24px;
	/* 特大のフォントサイズ */
	--font-size-xlarge: 32px;
	/* 超特大のフォントサイズ */
	--font-size-ularge: 50px;

	/* スマホ用フォントサイズ */
	--font-size-base-sm: 14px;
	/* スマホ用小さいフォントサイズ */
	--font-size-small-sm: 12px;
	/* スマホ用中くらいのフォントサイズ */
	--font-size-medium-sm: 16px;
	/* スマホ用大きいフォントサイズ */
	--font-size-large-sm: 20px;
	/* スマホ用特大のフォントサイズ */
	--font-size-xlarge-sm: 24px;
	/* スマホ用超特大のフォントサイズ */
	--font-size-ularge-sm: 36px;
}

/* ダークモード禁止 */
@media (prefers-color-scheme: dark) {
	body {
		background-color: #ffffff !important;
		color: #000000 !important;
	}
}

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

html {
	background: var(--primary-bg-color) !important;
	color: var(--primary-text-color);
}

/* hタグサイズ */
h1 {font-size: var(--font-size-large-sm);}
h2 {font-size: var(--font-size-medium-sm);}

/* フォントサイズ調整 */
.font-small { font-size: var(--font-size-small-sm); }
.font-base { font-size: var(--font-size-base-sm); }
.font-medium { font-size: var(--font-size-medium-sm); }
.font-large { font-size: var(--font-size-large-sm); }
.font-xlarge { font-size: var(--font-size-xlarge-sm); }
.font-ularge { font-size: var(--font-size-ularge-sm); }
.font-bold { font-weight: bold; }

/* 文字色 */
.text-primary { color: var(--primary-text-color); }
.text-secondary { color: var(--secondary-text-color); }
.text-accent { color: var(--accent-text-color); }
.text-light { color: var(--light-text-color); }
.text-dark { color: var(--dark-text-color); }

/* テキスト位置 */
.ac{text-align:center;}
.al{text-align:left;}
.ar{text-align:right;}

/* パディングユーティリティクラス */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* マージンユーティリティクラス */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mt-6 { margin-top: 3.5rem !important; }
.mt-7 { margin-top: 4rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }

/* モバイル・PCのみ */
.sp-only { display: block!important; }
.pc-only { display: none!important; }

/* モバイルではデフォルトのインラインブロックで改行を許可 */
.break-control { display: inline-block; }

/* モバイルで長いリンクを改行する */
.url-break { word-break: break-all; }

/* 画像のサイズ調整 */
img { max-width: 100%; height: auto; }

/* TOPに戻る */
.pagetop {
	height: 40px;
	width: 40px;
	position: fixed;
	right: 20px;
	bottom: 20px;
	background: #fff;
	border: solid 2px #000;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

.pagetop__arrow {
	height: 10px;
	width: 10px;
	border-top: 3px solid #000;
	border-right: 3px solid #000;
	transform: translateY(20%) rotate(-45deg);
}

@media (min-width: 601px) {
	h1 {font-size: var(--font-size-xlarge);}
	h2 {font-size: var(--font-size-large);}
	h3 {font-size: var(--font-size-medium);}
	.sp-only { display: none!important; }
	.pc-only { display: block!important; }
	.copyright{ display: inline; }
	.break-control { white-space: nowrap; /* 改行を防ぎ、スペースを維持 */ }
}