/* 基本設定*/
/* html {
  font-size: 62.5%; /* 16px * 62.5% = 10px になるので、1rem = 10px で計算可 */
/* } */

:root {
  /* モバイル標準のフォントサイズ */
  --font-size-xs:  0.75rem;  /* 12px / 16px */
  --font-size-sm:  0.875rem; /* 14px / 16px */
  --font-size-md:  1rem;     /* 16px / 16px ベース*/
  --font-size-lg:  1.25rem;  /* 20px / 16px */
  --font-size-xl:  1.5rem;   /* 24px / 16px */
  --font-size-2xl: 2.25rem;  /* 36px / 16px */
  /* --font-size-3xl: 3rem; */ /* 48px / 16px - 必要なら追加 */

  /* PC用 (メディアクエリ内で使用する想定) */
  --font-size-h1-lg: 2rem;    /* 32px / 16px */
  --font-size-h2-lg: 1.5rem;  /* 24px / 16px (モバイルのxlと同じ) */

  /* 基本の背景・テキスト色 */
  --color-background-body: #fff; /* ボディ全体の背景 */
  --color-text-body: #333;      /* ボディ全体のテキスト */

  /* 強調・反転系の背景・テキスト色 */
  --color-background-inverse: #333; /* 反転背景  */
  --color-text-inverse: #fff;      /* 反転テキスト */
  --color-background-subtle: #f4f4f4; /* 少しだけ色がついた背景 */
  --color-text-subtle: #666;      /* 少し薄いテキスト色 */

  /* アクセント・ブランドカラー */
  --color-accent: #bc42f5; /* アクセント */

  /* ボーダーなど */
  --color-border: #ccc;           /* 境界線 */
}

body {
  font-size: var(--font-size-md); /* 基本の文字サイズ (1rem = 16px) */
  font-family: 'Noto Sans JP', sans-serif; /* フォント指定 */
  line-height: 1.6; /* 行間は単位なし */
  color: var(--color-text-body);
  background-color: var(--color-background-body);
}

h1 {
  font-size: var(--font-size-lg); /* モバイル: 1.25rem (20px) */
  line-height: 1.3;
}

h2 {
  font-size: var(--font-size-lg);
  line-height: 1.4;
}

/* フォントを小さく・大きくする */
.font-small { font-size: var(--font-size-sm); } /* 0.875rem (14px) */
.font-large { font-size: var(--font-size-lg); } /* 1.25rem (20px) */
.font-bold { font-weight: bold;}

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

/* モバイル・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; }

/* パディングユーティリティクラス */
.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; }

a.btn {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 90%;
  margin: 1rem auto;
  padding: 1rem 4rem;
  font-weight: bold;
  background: var(--color-accent);
  color: #fff;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease, filter 0.3s ease;
  -webkit-appearance: none; /* iOSなどのデフォルトスタイルリセット */
  -moz-appearance: none;
  appearance: none;
}

/* マウスオーバー時のスタイル */
a.btn:hover {
  filter: brightness(90%); /* 指定した紫色を少し暗くする */
}

/* クリック時のスタイル */
a.btn:active {
  transform: translateY(1px); /* 少し沈む効果 */
  filter: brightness(85%); /* 指定した紫色をさらに暗くする */
}

/* フォーカス時のスタイル（アクセシビリティ） */
a.btn:focus {
  outline: none; /* デフォルトのアウトラインを消す */
  box-shadow: 0 0 0 3px rgba(188, 66, 245, 0.5); /* ← 紫色に合わせたフォーカスリング */
}

/* TOPに戻る */
.pagetop {
	height: 40px;
	width: 40px;
	position: fixed;
	right: 20px;
	bottom: 60px;
	background: var(--color-background-body);
	border: solid 2px var(--color-accent);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

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

/* --- PC用の上書き (メディアクエリ) --- */
@media (min-width: 960px) {
  h1 {
    font-size: var(--font-size-h1-lg); /* PC: 2rem (32px) */
  }

  h2 {
    font-size: var(--font-size-h2-lg); /* PC: 1.5rem (24px) */
  }

  a.btn {
  width: 300px;
  }
}