/* ==========================================================================
   :root - グローバル変数の定義
   ========================================================================== */
:root {
  /* --- 背景色 --- */
  --primary-bg-color: #ffffff;
  --secondary-bg-color: #000000;
  --accent-bg-color: #fff;
  --light-bg-color: #fff; /* #ff から #fff に修正 */
  --dark-bg-color: #fff;

  /* --- テキスト色 --- */
  --primary-text-color: #000000;
  --secondary-text-color: #ffffff;
  --accent-text-color: #28a838;
  --light-text-color: #f4f4f4;
  --dark-text-color: #333;

  /* --- フォントサイズ（モバイルファースト） --- */
  /* デフォルトはスマートフォン用のサイズ */
  --font-size-base: 14px;
  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 20px;
  --font-size-xlarge: 24px;
  --font-size-xxlarge: 28px; /* --font-size-ularge から変更 */
}

/* PC用のスタイル（ブレークポイント: 601px以上） */
@media (min-width: 768px) {
  :root {
    /* PC表示の際にフォントサイズの変数を上書き */
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-medium: 18px;
    --font-size-large: 24px;
    --font-size-xlarge: 32px;
    --font-size-xxlarge: 40px;
  }
}

/* ==========================================================================
   タイポグラフィ ユーティリティ
   ========================================================================== */
/* --- フォントサイズ --- */
.font-small  { font-size: var(--font-size-small); }
.font-base   { font-size: var(--font-size-base); }
.font-medium { font-size: var(--font-size-medium); }
.font-large  { font-size: var(--font-size-large); }
.font-xlarge { font-size: var(--font-size-xlarge); }
.font-xxlarge{ font-size: var(--font-size-xxlarge); }

.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); }

/* --- テキスト alignment --- */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ==========================================================================
   スペーシング ユーティリティ (Padding & Margin)
   ========================================================================== */
/* --- パディング --- */
.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; }

/* ==========================================================================
   レスポンシブ ユーティリティ
   ========================================================================== */
/* デフォルト（モバイル）表示 */
.sp-only { display: block !important; }
.pc-only { display: none !important; }

/* 改行制御 */
.break-control {
  display: inline-block; /* モバイルでは改行を許可 */
}

/* 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);
}


/* PC用のスタイル（ブレークポイント: 601px以上） */
@media (min-width: 768px) {
  .sp-only { display: none !important; }
  .pc-only { display: block !important; }

  .break-control {
    white-space: nowrap; /* PCでは改行を禁止 */
  }
}