/*
 * Creators Parade! 静的ページ用スタイル
 * 公開中のページ（Next.js / MUI）の見た目を、そのまま再現したもの。
 * 画面幅 900px 以上と未満で、余白とロゴの大きさを切り替える。
 */

/* ---- 基本 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  color: #1a1a1a;
  background-color: #fff;
}
h1, h2, p { margin: 0; }
img { max-width: 100%; display: inline-block; vertical-align: bottom; }
strong, b { font-weight: 700; }

/* お知らせページだけ背景がグレー */
.page--notice { background-color: #f2f2f2; }

/* ---- ヘッダー ---- */
.site-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}
.site-header__logo { width: 106px; height: 31.59px; }
.site-header__logo img { width: 100%; height: auto; }

/* ---- リンク ---- */
.link {
  color: #4361ff;
  text-decoration: underline;
  text-decoration-color: rgba(0, 167, 111, 0.4);
}
.link:hover { text-decoration-color: inherit; }

/* ---- サービス終了のお知らせ（index.html） ---- */
.notice {
  max-width: 480px;
  margin: 80px auto 0;
  padding: 0 16px;
  text-align: center;
}
.notice__title { margin-bottom: 16px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.notice__text { font-size: 13px; }

/* ---- 利用規約・プライバシーポリシー・特定商取引法 ---- */
.content { max-width: 1120px; margin: 0 auto; padding: 32px 16px; }
.doc { max-width: 100%; margin: 0 auto; }
.doc a:not(.back__link):not(.legal-nav__link) { color: #4361ff; text-decoration: none; }
.doc__head { padding-bottom: 16px; }
.doc__title { font-size: 20px; font-weight: 700; line-height: 1.5; }
.doc__title--tight { line-height: 24px; padding-bottom: 8px; } /* 利用規約だけ、元のページでこの指定になっている */

.card {
  padding: 16px;
  background-color: #fff;
  border: 1px solid #1a1a1a;
  border-radius: 16px;
  box-shadow: #1a1a1a 0 3px 0;
}

.section { padding-bottom: 24px; }
.section__title { padding-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.5; }
.sub { padding-bottom: 24px; }

.text { font-size: 14px; line-height: 1.5; font-weight: 400; }
.text--loose { line-height: 22.4px; }
.text--pad { padding-left: 5px; }
.text--end { text-align: end; }

.list { margin: 0; padding-inline-start: 20px; }
.list li { font-size: 14px; }
.list li.is-bold { font-weight: 700; }

/* 特定商取引法：項目名と内容を横に並べる行 */
.row { display: flex; align-items: center; gap: 16px; }
.row--gap { padding-bottom: 24px; }
.row__label { font-size: 16px; font-weight: 700; line-height: 1.5; }

.back { margin-top: 16px; text-align: center; }
.back__link {
  font-size: 12px;
  color: #00a76f;
  text-decoration: underline;
  text-decoration-color: rgba(0, 167, 111, 0.4);
}
.back__link:hover { text-decoration-color: inherit; }

/* ---- フッターのリンク（各ページ共通） ---- */
.legal-nav {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}
.legal-nav__link { font-size: 12px; color: #1a1a1a; text-decoration: none; }
.legal-nav__link:hover { text-decoration: underline; }

/* ---- 画面幅 900px 以上 ---- */
@media (min-width: 900px) {
  .site-header { padding: 0 80px; }
  .site-header__logo { width: 133px; height: 40px; }
  .notice { margin-top: 160px; }
  .notice__title { font-size: 18px; }
  .notice__text { font-size: 14px; }
  .doc { max-width: 736px; }
  .card { padding: 24px; }
  .indent { padding-inline-start: 48px; }
}