/* 基本設定*/
/* 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 - 必要なら追加 */

  --color-background-body: #fff;
  --color-text: #333;
  --color-text-red: #e62985;
  --color-background-inverse: #333;
  --color-text-inverse: #fff;
  --color-background-subtle: #f4f4f4;
  --color-text-subtle: #666;
  --color-accent: #9bd7f1;
  --color-border: #ccc;
}

body {
  font-size: var(--font-size-md);
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background-body);
}

h2 { font-size: var(--font-size-lg); }
h3 { font-size: var(--font-size-md); }

.font-small { font-size: var(--font-size-sm); }
.font-normal { font-size: var(--font-size-md); }
.font-large { font-size: var(--font-size-lg); }
.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: #125fad;
  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;
  -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(8, 8, 9, 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);
}


/* タブレット向けスタイル */
@media (min-width: 768px) {
}

/* PC向けスタイル */
@media (min-width: 960px) {
  a.btn {
  width: 300px;
  }
}