/* ===== 評論サークルSORA スタイルシート（見た目の定義） ===== */

/* ----- 色・文字・寸法の共通設定（ここを変えるとサイト全体が変わる） ----- */
:root { /* ページ全体で使う変数を定義する */
  --green-900: #1e3a30; /* 最も濃い緑：ナビゲーションバー・フッター・見出し */
  --green-700: #2f5e4d; /* 基調色の落ち着いた緑：表紙部分・ボタン */
  --green-500: #6a8f7e; /* 中間の緑：罫線・入力欄の枠 */
  --green-100: #e3ece6; /* 淡い緑：帯・作品紹介の背景 */
  --paper: #f6f8f5; /* ページの地色：わずかに緑を含んだ白 */
  --ink: #1c2521; /* 本文の文字色：緑みのある墨色 */
  --muted: #56645d; /* 補足説明の文字色 */
  --accent: #b5892f; /* 差し色の芥子色：キーボード操作時の枠などに少しだけ使う */
  --error: #a33a2c; /* エラーを知らせる文字色 */
  --nav-h: 56px; /* ナビゲーションバーの高さ（固定） */
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "BIZ UDPMincho", "Noto Serif JP", "Noto Serif CJK JP", serif; /* 見出し用の明朝体（端末に入っているものを使う） */
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif; /* 本文用のゴシック体 */
} /* 変数の定義ここまで */

/* ----- 全体の基本設定 ----- */
*, *::before, *::after { /* すべての要素について */
  box-sizing: border-box; /* 幅の計算に枠線と余白を含める（レイアウト崩れを防ぐ） */
} /* ここまで */
html { /* 文書全体 */
  scroll-padding-top: calc(var(--nav-h) + 8px); /* ナビで移動したとき、見出しが固定バーの下に隠れないようにする */
  -webkit-text-size-adjust: 100%; /* iPhone で横向きにしても文字が勝手に大きくならないようにする */
  text-size-adjust: 100%; /* 同上（標準の書き方） */
} /* ここまで */
@media (prefers-reduced-motion: no-preference) { /* 「視差効果を減らす」設定をしていない利用者に限り */
  html { scroll-behavior: smooth; } /* ナビで移動するときに滑らかにスクロールする */
} /* ここまで */
body { /* ページ本体 */
  margin: 0; /* ブラウザ既定の外側余白を消す */
  background: var(--paper); /* 地色 */
  color: var(--ink); /* 文字色 */
  font-family: var(--sans); /* 本文はゴシック体 */
  font-size: 16px; /* 本文の文字の大きさ */
  line-height: 1.9; /* 行の高さ（日本語が読みやすいようやや広め） */
} /* ここまで */
img { /* 画像 */
  display: block; /* 画像の下にできる隙間を消す */
  max-width: 100%; /* 枠からはみ出さない */
  height: auto; /* 縦横比を保つ */
} /* ここまで */
a { color: var(--green-700); } /* リンクの文字色 */
a:hover { color: var(--green-900); } /* リンクにマウスを乗せたときの文字色 */
:focus-visible { /* キーボード操作で選ばれている要素 */
  outline: 3px solid var(--accent); /* 芥子色の枠で位置をはっきり示す */
  outline-offset: 2px; /* 枠と要素の間を少しあける */
} /* ここまで */

/* ----- ナビゲーションバー（画面上部に固定） ----- */
.site-header { /* ヘッダー全体 */
  position: sticky; /* スクロールしても画面上部に留まる */
  top: 0; /* 画面の一番上に留める */
  z-index: 10; /* ほかの要素より手前に表示する */
  background: var(--green-900); /* 濃い緑の背景 */
} /* ここまで */
.nav { /* ナビの中身 */
  display: flex; /* 横に並べる */
  align-items: center; /* 上下中央にそろえる */
  justify-content: space-between; /* ロゴを左端、リンクを右端に置く */
  gap: 12px; /* ロゴとリンクの間隔 */
  max-width: 1080px; /* 広い画面でも横に広がりすぎないようにする */
  height: var(--nav-h); /* 高さを固定する（折り返さない） */
  margin: 0 auto; /* 中央に置く */
  padding: 0 16px; /* 左右の余白 */
} /* ここまで */
.nav__brand { /* ロゴ「SORA」 */
  color: #fff; /* 白い文字 */
  font-family: var(--serif); /* 明朝体 */
  font-size: 20px; /* 文字の大きさ */
  letter-spacing: 0.14em; /* 字間を広げる */
  text-decoration: none; /* 下線を消す */
} /* ここまで */
.nav__brand:hover { color: #fff; } /* マウスを乗せても白のまま */
.nav__list { /* リンクの一覧 */
  display: flex; /* 横に並べる */
  gap: 2px; /* リンク同士の間隔 */
  margin: 0; /* 既定の余白を消す */
  padding: 0; /* 既定の余白を消す */
  list-style: none; /* 行頭の黒丸を消す */
} /* ここまで */
.nav__list a { /* 各リンク */
  display: block; /* 押せる範囲を広げる */
  padding: 10px 10px 8px; /* 押しやすいよう内側に余白をとる */
  color: #dbe6df; /* やや淡い白 */
  font-family: var(--serif); /* 明朝体 */
  font-size: 16px; /* 文字の大きさ */
  letter-spacing: 0.04em; /* 字間を少し広げる */
  text-decoration: none; /* 下線を消す */
  border-bottom: 2px solid transparent; /* 下線用の場所を確保（通常は透明） */
} /* ここまで */
.nav__list a:hover { /* リンクにマウスを乗せたとき */
  color: #fff; /* 白くする */
  border-bottom-color: var(--accent); /* 芥子色の下線を出す */
} /* ここまで */
@media (max-width: 360px) { /* とても幅の狭いスマートフォンでは */
  .nav { padding: 0 8px; } /* 左右の余白を詰める */
  .nav__brand { font-size: 17px; } /* ロゴを少し小さくする */
  .nav__list a { padding: 10px 6px 8px; font-size: 15px; } /* リンクの余白と文字を少し小さくする */
} /* ここまで */

/* ----- top：表紙のようなトップ部分 ----- */
.hero { /* トップ部分全体 */
  background: var(--green-700); /* 基調色の緑（同人誌の表紙に見立てる） */
  color: #fff; /* 白い文字 */
} /* ここまで */
.hero__inner { /* トップ部分の中身 */
  display: grid; /* 格子状に配置する */
  gap: 28px; /* サークル名と近況報告の間隔 */
  max-width: 1080px; /* 広がりすぎないようにする */
  margin: 0 auto; /* 中央に置く */
  padding: 40px 16px 40px; /* 内側の余白 */
} /* ここまで */
.hero__title { /* サークル名 */
  margin: 0; /* 既定の余白を消す */
  font-family: var(--serif); /* 明朝体 */
  font-size: clamp(30px, 8vw, 44px); /* 画面幅に応じて 30〜44px で伸び縮みする */
  font-weight: 600; /* やや太字 */
  line-height: 1.3; /* 行の高さ */
  letter-spacing: 0.1em; /* 字間を広げる */
} /* ここまで */
.hero__latin { margin-left: 0.1em; } /* 「SORA」の前に少し間をあける */
.news { /* 近況報告の枠（表紙に挟んだ紙片のような見た目） */
  max-width: 46em; /* 1行が長くなりすぎないようにする */
  padding: 20px 20px 16px; /* 内側の余白 */
  background: var(--paper); /* 紙の色 */
  color: var(--ink); /* 墨色の文字 */
  border-top: 4px solid var(--accent); /* 上辺に芥子色の線（しおりの印象） */
} /* ここまで */
.news__heading { /* 「近況報告」の見出し */
  margin: 0 0 8px; /* 下に少し余白 */
  font-family: var(--serif); /* 明朝体 */
  font-size: 20px; /* 文字の大きさ */
  color: var(--green-900); /* 濃い緑 */
  letter-spacing: 0.08em; /* 字間を広げる */
} /* ここまで */
.news__list { /* 近況報告の一覧 */
  margin: 0; /* 既定の余白を消す */
  padding: 0; /* 既定の余白を消す */
  list-style: none; /* 行頭の黒丸を消す */
} /* ここまで */
.news__list li { /* 近況報告の各行 */
  display: grid; /* 日付と本文を横に並べる */
  grid-template-columns: 6.2em 1fr; /* 日付の幅を固定し、残りを本文にする */
  gap: 12px; /* 日付と本文の間隔 */
  padding: 7px 0; /* 上下の余白 */
  border-top: 1px solid var(--green-100); /* 行と行の間の細い罫線 */
} /* ここまで */
.news__list li:first-child { border-top: 0; } /* 1行目の上には罫線を引かない */
.news__list time { /* 日付 */
  color: var(--green-700); /* 緑の文字 */
  font-size: 14px; /* 本文より少し小さく */
  font-variant-numeric: tabular-nums; /* 数字の幅をそろえて縦の位置をそろえる */
  padding-top: 2px; /* 本文と上端をそろえる微調整 */
} /* ここまで */
@media (max-width: 480px) { /* 幅の狭いスマートフォンでは */
  .news__list li { grid-template-columns: 1fr; gap: 0; } /* 日付を本文の上に置く */
} /* ここまで */
.obi { /* 本の「帯」を模した帯状の一文 */
  margin: 0; /* 既定の余白を消す */
  padding: 14px 16px; /* 内側の余白 */
  background: var(--green-100); /* 淡い緑 */
  color: var(--green-900); /* 濃い緑の文字 */
  font-family: var(--serif); /* 明朝体 */
  font-size: clamp(15px, 2.2vw, 19px); /* 画面幅に応じて伸び縮みする */
  letter-spacing: 0.06em; /* 字間を少し広げる */
  text-align: center; /* 中央ぞろえ */
} /* ここまで */
@media (min-width: 768px) { /* タブレット以上の広い画面では */
  .hero__inner { /* トップ部分の中身を */
    grid-template-columns: 1fr auto; /* 左に近況報告、右にサークル名の2列にする */
    align-items: start; /* 上端をそろえる */
    gap: 48px; /* 列の間隔 */
    padding: 64px 24px 56px; /* 内側の余白を広げる */
  } /* ここまで */
  .hero__title { /* サークル名を */
    grid-column: 2; /* 右の列に置く */
    grid-row: 1; /* 1段目に置く */
    writing-mode: vertical-rl; /* 縦書きにする（本の背表紙のように） */
    font-size: 56px; /* 大きな文字 */
    line-height: 1; /* 行の高さを詰める */
    letter-spacing: 0.16em; /* 字間を広げる */
  } /* ここまで */
  .hero__latin { /* 縦書きの中の「SORA」を */
    margin: 0.3em 0 0; /* 上に少し間をあける */
    text-orientation: upright; /* 横倒しにせず、1文字ずつ立てて並べる */
    letter-spacing: 0.08em; /* 字間 */
  } /* ここまで */
  .news { /* 近況報告を */
    grid-column: 1; /* 左の列に置く */
    grid-row: 1; /* 1段目に置く */
  } /* ここまで */
} /* ここまで */

/* ----- about / works / contact 共通のセクション ----- */
.section { padding: 64px 0; } /* 各セクションの上下の余白 */
.section--tinted { background: var(--green-100); } /* 作品紹介だけ背景を淡い緑にして区切りを示す */
.section__inner { /* セクションの中身 */
  max-width: 1080px; /* 広がりすぎないようにする */
  margin: 0 auto; /* 中央に置く */
  padding: 0 16px; /* 左右の余白 */
} /* ここまで */
.section__title { /* セクションの見出し */
  margin: 0 0 24px; /* 下に余白 */
  padding-bottom: 8px; /* 下線との間隔 */
  font-family: var(--serif); /* 明朝体 */
  font-size: 28px; /* 文字の大きさ */
  font-weight: 600; /* やや太字 */
  color: var(--green-900); /* 濃い緑 */
  letter-spacing: 0.1em; /* 字間を広げる */
  border-bottom: 1px solid var(--green-500); /* 見出しの下の細い罫線 */
} /* ここまで */
.section p { max-width: 40em; } /* 段落の1行が長くなりすぎないようにする */

/* ----- about：サークル紹介 ----- */
.themes { /* 二つのテーマの一覧 */
  display: grid; /* 格子状に配置する */
  gap: 16px; /* テーマ同士の間隔 */
  max-width: 56em; /* 広がりすぎないようにする */
  margin: 28px 0; /* 上下の余白 */
} /* ここまで */
@media (min-width: 768px) { /* 広い画面では */
  .themes { grid-template-columns: 1fr 1fr; gap: 32px; } /* 二つのテーマを横に並べる */
} /* ここまで */
.themes__item { /* 各テーマ */
  padding: 2px 0 2px 16px; /* 左の線との間隔 */
  border-left: 4px solid var(--green-700); /* 左に緑の太線（見出しの柱） */
} /* ここまで */
.themes dt { /* テーマ名 */
  font-family: var(--serif); /* 明朝体 */
  font-size: 20px; /* 文字の大きさ */
  color: var(--green-900); /* 濃い緑 */
  letter-spacing: 0.06em; /* 字間 */
} /* ここまで */
.themes dd { margin: 4px 0 0; } /* テーマの説明（左の既定余白を消す） */
.profile { /* サークルの基本情報 */
  display: grid; /* 項目名と内容を横に並べる */
  grid-template-columns: 6em 1fr; /* 項目名の幅を固定する */
  gap: 6px 16px; /* 行と列の間隔 */
  max-width: 40em; /* 広がりすぎないようにする */
  margin: 32px 0 0; /* 上に余白 */
  padding-top: 16px; /* 罫線との間隔 */
  border-top: 1px solid var(--green-100); /* 上に細い罫線 */
} /* ここまで */
.profile dt { color: var(--muted); } /* 項目名は控えめな色 */
.profile dd { margin: 0; } /* 内容の既定余白を消す */

/* ----- works：作品紹介 ----- */
.works { /* 作品の一覧 */
  display: grid; /* 格子状に配置する */
  gap: 40px 48px; /* 行と列の間隔 */
  margin-top: 32px; /* 上に余白 */
} /* ここまで */
@media (min-width: 820px) { /* 広い画面では */
  .works { grid-template-columns: 1fr 1fr; } /* 2列に並べる */
} /* ここまで */
.work { /* 各作品 */
  display: grid; /* 表紙と文字を横に並べる */
  grid-template-columns: 112px 1fr; /* 表紙の幅（スマートフォン） */
  gap: 16px; /* 表紙と文字の間隔 */
  align-items: start; /* 上端をそろえる */
} /* ここまで */
@media (min-width: 480px) { /* 少し広い画面では */
  .work { grid-template-columns: 148px 1fr; gap: 20px; } /* 表紙を大きくする */
} /* ここまで */
.work__cover { /* 表紙画像 */
  width: 100%; /* 列の幅いっぱいに表示する */
  aspect-ratio: 182 / 257; /* B5判の縦横比に固定する */
  object-fit: cover; /* 比率が違う画像でも枠を埋める（はみ出しは切り取る） */
  background: var(--paper); /* 読み込み中の地色 */
  border: 1px solid rgba(30, 58, 48, 0.25); /* 表紙の輪郭を示す細い枠 */
} /* ここまで */
.work__title { /* 作品の題名 */
  margin: 0 0 4px; /* 下に少し余白 */
  font-family: var(--serif); /* 明朝体 */
  font-size: 19px; /* 文字の大きさ */
  line-height: 1.5; /* 行の高さ */
  color: var(--green-900); /* 濃い緑 */
} /* ここまで */
.work__meta { /* 発行情報 */
  margin: 0 0 8px; /* 下に余白 */
  font-size: 14px; /* 小さめの文字 */
  color: var(--muted); /* 控えめな色 */
} /* ここまで */
.work__desc { margin: 0; } /* 内容紹介文 */

/* ----- contact：お問い合わせフォーム ----- */
.form { /* フォーム全体 */
  display: grid; /* 項目を縦に並べる */
  gap: 22px; /* 項目同士の間隔 */
  max-width: 36em; /* 入力欄が広がりすぎないようにする */
  margin-top: 28px; /* 上に余白 */
} /* ここまで */
.field label { /* 項目名 */
  display: block; /* 入力欄の上に置く */
  margin-bottom: 6px; /* 入力欄との間隔 */
  font-weight: 600; /* 太字 */
} /* ここまで */
.req { /* 「必須」の印 */
  margin-left: 8px; /* 項目名との間隔 */
  padding: 1px 6px; /* 内側の余白 */
  font-size: 12px; /* 小さな文字 */
  font-weight: normal; /* 太字にしない */
  color: #fff; /* 白い文字 */
  background: var(--green-700); /* 緑の背景 */
  border-radius: 2px; /* 角をわずかに丸める */
  vertical-align: 2px; /* 項目名と高さをそろえる */
} /* ここまで */
.field input[type="text"], .field input[type="email"], .field textarea { /* 文字の入力欄 */
  width: 100%; /* 横幅いっぱい */
  padding: 10px 12px; /* 内側の余白 */
  font: inherit; /* 本文と同じ文字にする */
  color: inherit; /* 本文と同じ文字色にする */
  background: #fff; /* 白い背景 */
  border: 1px solid var(--green-500); /* 緑の枠線 */
  border-radius: 4px; /* 角を少し丸める */
} /* ここまで */
.field textarea { min-height: 12em; resize: vertical; } /* 内容欄は高めにし、縦方向だけ大きさを変えられるようにする */
.field input:focus, .field textarea:focus { /* 入力中の欄 */
  border-color: var(--green-700); /* 枠線を濃くする */
  outline: 3px solid var(--accent); /* 芥子色の枠で入力中の欄を示す */
  outline-offset: 1px; /* 枠と欄の間を少しあける */
} /* ここまで */
.hint { /* 補足説明 */
  margin: 6px 0 0; /* 上に少し余白 */
  font-size: 14px; /* 小さめの文字 */
  color: var(--muted); /* 控えめな色 */
} /* ここまで */
.field .check { /* 同意のチェック欄 */
  display: flex; /* チェック箱と文字を横に並べる */
  align-items: center; /* 上下中央にそろえる */
  gap: 10px; /* 間隔 */
  margin-top: 8px; /* 上に余白 */
  cursor: pointer; /* 押せることを示す */
} /* ここまで */
.check input { /* チェック箱 */
  width: 20px; /* 幅 */
  height: 20px; /* 高さ */
  margin: 0; /* 既定の余白を消す */
  accent-color: var(--green-700); /* チェック時の色を緑にする */
} /* ここまで */
.hp { /* ボット検出用の隠し欄 */
  position: absolute; /* 通常の配置から外す */
  left: -10000px; /* 画面の外へ出して見えなくする（display:none だとボットが無視するため） */
  width: 1px; /* 大きさを最小にする */
  height: 1px; /* 大きさを最小にする */
  overflow: hidden; /* はみ出しを隠す */
} /* ここまで */
.g-recaptcha { min-height: 78px; } /* reCAPTCHA の読み込み前から場所を確保し、画面のずれを防ぐ */
@media (max-width: 340px) { /* とても幅の狭い画面では */
  .g-recaptcha { transform: scale(0.9); transform-origin: 0 0; } /* reCAPTCHA（幅 304px 固定）を少し縮めてはみ出さないようにする */
} /* ここまで */
.button { /* 送信ボタン */
  justify-self: start; /* 左寄せ */
  min-height: 48px; /* 押しやすい高さ */
  padding: 10px 36px; /* 内側の余白 */
  font-family: var(--serif); /* 明朝体 */
  font-size: 17px; /* 文字の大きさ */
  letter-spacing: 0.12em; /* 字間を広げる */
  color: #fff; /* 白い文字 */
  background: var(--green-700); /* 緑の背景 */
  border: 0; /* 枠線なし */
  border-radius: 4px; /* 角を少し丸める */
  cursor: pointer; /* 押せることを示す */
} /* ここまで */
.button:hover { background: var(--green-900); } /* マウスを乗せると濃い緑にする */
.button:disabled { opacity: 0.6; cursor: wait; } /* 送信中は薄くし、押せないことを示す */
.form__status { /* 送信結果の表示欄 */
  min-height: 1.9em; /* 空でも1行分の高さを確保する */
  margin: 0; /* 既定の余白を消す */
  font-weight: 600; /* 太字 */
} /* ここまで */
.form__status.is-info { color: var(--muted); } /* 送信中の表示 */
.form__status.is-success { color: var(--green-700); } /* 成功の表示 */
.form__status.is-error { color: var(--error); } /* エラーの表示 */

/* ----- フッター ----- */
.site-footer { /* フッター全体 */
  padding: 28px 16px; /* 内側の余白 */
  background: var(--green-900); /* 濃い緑の背景 */
  color: #cddad2; /* 淡い文字色 */
  font-size: 14px; /* 小さめの文字 */
  text-align: center; /* 中央ぞろえ */
} /* ここまで */
.site-footer p { margin: 4px 0; } /* 行の間隔 */
.site-footer a { color: #fff; } /* リンクは白 */

/* ----- 404 ページ（存在しないページを開いたとき） ----- */
.notfound { /* 404 ページの本文 */
  max-width: 40em; /* 広がりすぎないようにする */
  margin: 0 auto; /* 中央に置く */
  padding: 96px 16px; /* 上下に大きな余白 */
} /* ここまで */