html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  line-height: var(--line-height-base);
  font-family: "Noto Sans JP", sans-serif;
  color: var(--primary-text-color);
  font-size: 1rem;
}

address {
  font-style: normal;
}

/* ==========================================================================
ヘッダー
========================================================================== */
header {
  padding: 1em;
}

header a {
  display: inline-block;
  padding: 0;
  margin: 0;
}

.header-logo {
  display: block;
  max-width: 35%;
  height: auto;
  padding: 10px;
}

/* ==========================================================================
タイトルロゴ
========================================================================== */
.titlelogo {
  width: 100%;
  background: #ffc20f;
}

/* ==========================================================================
hタグ
========================================================================== */
h2 {
  background: var(--accent-bg-color);
}
h3 {
  margin-bottom: 0.5rem;
}

/* ==========================================================================
本文
========================================================================== */
.contents-refund {
  max-width: 960px;
  margin-inline: auto; /* 左右の中央揃え（margin: 0 auto のモダン版） */
  padding-inline: clamp(
    1rem,
    4vw,
    2rem
  ); /* スマホ(最小)で1rem(16px)、PC(最大)で2rem(32px) */
  padding-block: 2rem; /* 上下の余白 */
}
.overview {
  text-align: left;
}
.cancel-text {
  background: var(--accent-bg-color);
  font-weight: bold;
  font-size: var(--font-size-medium);
  padding: 10px;
}
.cancel-title-icon::before {
  content: "■ ";
}
.cancel-playguide-icon::before {
  content: "・ ";
}
.info-layout-list dt {
  font-weight: bold;
}
.section-padding {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--accent-text-color);
}

/* ==========================================================================
フッター
========================================================================== */
.footer {
  inline-size: 100%; /* 物理的な width: 100% ではなく、論理プロパティを使用 */
  padding-block: var(--s-4); /* 上下 1.5rem */
  padding-inline: var(--s-3); /* 左右 1rem */
  text-align: center;
  background-color: var(--secondary-bg-color);
}

.footer p {
  margin: 0;
  color: var(--secondary-text-color);
}

.footer small {
  font-size: var(--font-size-small);
  line-height: 1.5;
  display: flex; /* Flexboxを使って「画面が狭い時だけ自然に折り返す」 */
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.5ch; /* 各要素の間に半角スペース1つ分(0.5ch)の隙間を空ける */
}

.footer .rights {
  white-space: nowrap; /* "All rights reserved" の単語の途中で変な改行が起きるのを防ぐ */
}

/* ==========================================================================
タブレット
========================================================================== */
@media (min-width: 768px) {
  html {
    font-size: var(--font-size-base);
  }
  .header-logo {
    width: 150px;
  }
  .cancel-text {
    font-size: var(--font-size-large);
  }
  .section-padding {
    width: 615px;
    margin: 0 auto;
    font-size: var(--font-size-large);
  }
}

/* ==========================================================================
PC
========================================================================== */
@media (min-width: 1024px) {
  html {
    font-size: var(--font-size-base);
  }
  .header-logo {
    width: 150px;
  }
  .section-padding {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    font-size: 1.9rem;
  }
}