/* ==================================== */
/* 0. 変数とリセット */
/* ==================================== */

:root {
  /* 配色 */
  --color-dark: #1a1a1a;        /* ほぼ黒 */
  --color-light: #f5f5f5;       /* ほぼ白 */
  --color-accent: #6c757d;      /* グレー*/
  --color-link: #007bff;        /* リンクカラー */
  --color-hover: #007bff;      /* ホバー時の明るいブルー */
  --color-line: #1976d2;

  /* フォント */
  --font-body: 'Helvetica Neue', 'Arial', sans-serif;
  --font-heading: 'Georgia', 'Noto Sans JP';

  /* サイズ */
  --spacing-unit: 1.5rem;       /* 基本となる余白単位 */
  --page-padding-h: 3rem;       /* 左右の余白を大きめに設定 */
  --border-radius: 4px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-dark);
  background-color: var(--color-light);
  line-height: 1.6;
}

/* ページ全体のコンテナ（中央寄せと最大幅） */
.container {
    max-width: 700px; /* 最大幅を少し広げ、よりモダンな印象に */
    margin-left: auto;
    margin-right: auto;
    /* 左右のパディングを適用 */
    padding-left: var(--page-padding-h);
    padding-right: var(--page-padding-h); 
    padding-top: var(--spacing-unit);
    padding-bottom: var(--spacing-unit);
}

/* ==================================== */
/* 1. セクション構成と余白 */
/* ==================================== */

section {
  padding: calc(var(--spacing-unit) * 3) 0;
  border-bottom: 1px solid #e0e0e0;
}

/* 最後のセクションの線は消す */
section:last-of-type {
  border-bottom: none;
}

/* ==================================== */
/* 2. タイポグラフィ（h1, h2） */
/* ==================================== */

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--spacing-unit);
  line-height: 1.2;
}

h1 {
  font-size: 3rem;
  text-align: center;
  border-bottom: 5px solid var(--color-line);
  display: inline-block; 
  margin-bottom: calc(var(--spacing-unit) * 2);
  letter-spacing: -0.03em;
}

/* h1のフォントサイズをビューポート幅に応じて調整 */
@media (max-width: 900px) {
  h1 {
    /* 画面幅の3%を基準にする（最小値2rem, 最大値3rem） */
    font-size: clamp(2rem, 3vw, 3rem); 
  }
}

h2 {
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

p {
    margin-bottom: var(--spacing-unit);
}

/* ==================================== */
/* 3. UIリスト（ul, li） */
/* ==================================== */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li::before {
  content: none;
  letter-spacing: 2em ;
}

/* 定義リスト（dl）全体 */
dl {
  margin-bottom: var(--spacing-unit);
}

/* 箇条書きのタイトル部分（dt）*/
dt {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-dark);
  padding-bottom: 0.3rem;
  margin-bottom: 0.8rem;
  
  /* 下線スタイル */
  border-bottom: 3px solid var(--color-line);
  display: inline-block; 
  line-height: 1.2;
}

/* 説明部分（dd）*/
dd {
  margin-bottom: var(--spacing-unit); /* 次の項目との間に余白 */
  margin-left: 0; /* デフォルトのインデントを削除 */
}

/* dd要素内の入れ子dl全体 */
dd > dl {
    /* 1階層目との差別化のため、左にインデント（内側の余白） */
    padding-left: var(--spacing-unit);
    margin-top: calc(var(--spacing-unit) / 2); /* 上部に少し余白 */
    margin-bottom: var(--spacing-unit);
    
    border-left: 1px solid #ddd; 
}

/* 2階層目のタイトル部分（dd > dl > dt）*/
dd > dl > dt {
    border-bottom: 2px solid var(--color-dark);
    display: inline-block; 
    padding-bottom: 0;
    margin-bottom: 0.4rem;
    font-size: 1rem;
    font-weight: 500; /* 太さを600から500に下げる */
    color: var(--color-dark);
}

/* 2階層目の説明部分（dd > dl > dd）*/
dd > dl > dd {
    /* 1階層目の下部にあった余白を小さくする */
    margin-bottom: calc(var(--spacing-unit) / 2);
    /* テキストのフォントサイズもわずかに小さくする */
    font-size: 0.95rem; 
    line-height: 1.5;
}


/* ==================================== */
/* 4. リンクとボタン（a, button） */
/* ==================================== */

/* リンク（a） */
a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid var(--color-link);
  transition: color 0.3s, border-bottom 0.3s;
}

a:hover {
  color: var(--color-hover);
  border-bottom-color: var(--color-hover);
}

/* ボタン（button） */
a.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-dark);
  background-color: var(--color-dark);
  color: var(--color-light);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--border-radius);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

button:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.button-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.button-secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-light);
}

/* ==================================== */
/* 5. 寄付カード (Donation Card)  */
/* ==================================== */

/* 寄付カード全体のコンテナ*/
.donation-card {
    width: 80%;
    margin: var(--spacing-unit) 0;
    
    background-color: var(--color-light); 
    border: 1px solid #e0e0e0; 
    border-radius: var(--border-radius);
    padding: var(--spacing-unit);
    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* カード内部のコンテンツ (div.donation-content) */
.donation-content {
    display: flex; /* Flexboxで中身を横並びにする */
    justify-content: space-between; /* 要素を左右に配置 */
    align-items: center; /* 垂直方向の中央揃え */
    gap: 0.5rem; /* 要素間のスペース */
}

/* カード内のテキスト（pタグ） */
.donation-content p {
    margin-bottom: 0; /* pタグのデフォルトマージンをリセット */
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-dark);
}

/* 寄付ボタン */
.donation-content a[role="button"] {
    /* リンクスタイルからボタン風スタイルへ上書き */
    display: inline-block;
    padding: 0.5rem 1.2rem;
    
    background-color: var(--color-dark); 
    color: var(--color-light);
    border: 1px solid var(--color-dark);
    text-decoration: none;
    border-bottom: none; 
    
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--border-radius);
    
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    
    /* Flexアイテムとしてサイズが縮まないように */
    flex-shrink: 0; 
}

@media (max-width: 600px) {
    .donation-content {
        flex-direction: column; /* 縦並びにする */
        align-items: center;    /* 中央揃えに修正 */
        text-align: center;
    }
    .donation-content p {
        margin-bottom: 0.5rem;
    }
    /* 寄付ボタンが中央に来るようにブロック要素にする */
    .donation-content a[role="button"] {
        width: 100%; 
        max-width: 250px;
    }
}

/* ==================================== */
/* 6. テーブル（Table）- 追加 */
/* ==================================== */

.table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--spacing-unit) 0 calc(var(--spacing-unit) * 2) 0;
  font-size: 0.95rem; /* 本文より少し小さく */
  border: 1px solid #e0e0e0; /* 枠線を控えめに */
  overflow-x: auto;
}

/* テーブルセル（データとヘッダー） */
.table td, 
.table th {
  border: 1px solid #e0e0e0; 
  padding: 0.25rem 1rem; 
  text-align: left;
}

/* テーブルヘッダー（th） */
.table th {
  background-color: var(--color-line); 
  color: var(--color-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-color: var(--color-line);
}

/* ゼブラストライプ */
.table tbody tr:nth-child(odd) {
    background-color: #fcfcfc;
}

/* 折り返しを禁止 */
#nandoku td:nth-child(-n+3),
#nandoku th:nth-child(-n+3) {
  white-space: nowrap;
}

.table-responsive {
    width: 100%;
    overflow-x: auto; /* 横幅に収まらない場合にスクロール可能にする */
    margin: var(--spacing-unit) 0 calc(var(--spacing-unit) * 2) 0; /* テーブルのマージンをこちらに移動 */
}

/* テーブルは.table-responsiveの中に配置する */
.table {
    margin: 0; 
    /* テーブルがスクロールコンテナ内で常に内容を保持できるようにする */
    min-width: 400px; /* 必要に応じて、テーブルの最小幅を設定 */
}

/* ==================================== */
/* 7. 引き出しUI (Accordion / Details) - 追加 */
/* ==================================== */

/* details要素（引き出し全体） */
details {
    margin-bottom: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: var(--border-radius);
    overflow: hidden; /* 角丸を適用するために必要 */
    transition: box-shadow 0.3s;
}

details:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* summary要素（引き出しのタイトル/ボタン部分） */
summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    cursor: pointer;
    background-color: #ffffff; /* 白い背景 */
    font-weight: 600;
    color: var(--color-dark);
    list-style: none; /* デフォルトの矢印を非表示に */
}

/* detailsが開いている時のsummaryスタイル */
details[open] > summary {
    background-color: #fafafa;
    border-bottom: 1px solid #e0e0e0;
}

/* 独自の開閉アイコン (CSSのみで実現) */
summary::after {
    content: '▶'; /* 閉じている時は右向きの矢印 */
    font-size: 0.8rem;
    color: var(--color-accent);
    margin-left: 1rem;
    transition: transform 0.2s;
}

details[open] > summary::after {
    content: '▼'; /* 開いている時は下向きの矢印 */
    transform: rotate(0deg); /* 矢印を回転させない */
}

/* 引き出しの中身（コンテンツ部分） */
.accordion-content {
    padding: 1rem;
    padding-top: 0.5rem; /* タイトルと中身の間のスペース調整 */
    color: var(--color-dark);
    background-color: #fff;
}

/* 中身のコンテンツ内のp要素のマージンを調整 */
.accordion-content p:last-child {
    margin-bottom: 0;
}

/* 画面幅が狭い場合の調整（必要に応じて） */
@media (max-width: 600px) {
    .donation-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .donation-content p {
        margin-bottom: 0.5rem;
    }
}