/* ============================================================
   あまた音楽堂 静的ページ共通 (amata_static.css)
   対象: 特商法 / プライバシー / 利用規約 / 著作権 / FAQ / 会社紹介
   読み込み: 各ページの {% block stylesheet %} からのみ
   ------------------------------------------------------------
   ■ キャッシュバスターは手動採番(?v=N)を廃止し、mtime自動付与に移行済み
     (A-1 / 概要ファイル 3-19)。Twig側は |amata_v フィルタが付与する。
     このファイルに版数を書かないこと。FTPで上げ直せばURLが変わる。
   ============================================================ */

.amata-static {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 20px;
  line-height: 2;
}

/* 条項見出し */
.amata-static h2 {
  margin: 48px 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--amata-teal);
  font-size: 1.15rem;
  font-weight: 700;
}
.amata-static h2:first-of-type { margin-top: 0; }

.amata-static p,
.amata-static ul,
.amata-static ol {
  margin: 0 0 1em;
}
.amata-static ul,
.amata-static ol { padding-left: 1.6em; }
.amata-static li { margin-bottom: 0.4em; }

.amata-static a { color: var(--amata-teal); }

/* 特商法などの表 */
.amata-static-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.amata-static-table th,
.amata-static-table td {
  padding: 14px 16px;
  border: 1px solid var(--amata-line);
  text-align: left;
  vertical-align: top;
}
.amata-static-table th {
  width: 30%;
  background: var(--amata-bg-tint-1);
  font-weight: 700;
}

/* 制定日・改定日 */
.amata-static__date {
  margin-top: 40px;
  text-align: right;
  color: var(--amata-ink-soft);
  font-size: 0.85rem;
}

/* FAQ(details/summary。JS不要・キーボード完結) */
.amata-faq__item {
  border-bottom: 1px solid var(--amata-line);
}
.amata-faq__item summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 4px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color var(--amata-dur-fast) ease;
}
.amata-faq__item summary::-webkit-details-marker { display: none; }
.amata-faq__item summary::before {
  content: 'Q.';
  flex-shrink: 0;
  color: var(--amata-teal);
  font-weight: 700;
}
.amata-faq__item summary:hover,
.amata-faq__item summary:focus-visible { color: var(--amata-teal); }
.amata-faq__answer {
  display: flex;
  gap: 12px;
  padding: 0 4px 18px;
}
.amata-faq__answer::before {
  content: 'A.';
  flex-shrink: 0;
  color: var(--amata-red);
  font-weight: 700;
}

@media (max-width: 991px) {
  .amata-static-table,
  .amata-static-table tbody,
  .amata-static-table tr,
  .amata-static-table th,
  .amata-static-table td { display: block; width: 100%; }
  .amata-static-table tr { border-bottom: none; }
  .amata-static-table th { border-bottom: none; }
}

/* ============================================================
   サイトマップ (Step 3-4a)
   ------------------------------------------------------------
   ■ .amata-static(max-width: 800px)は使わない。
     サイトマップはリンクの多カラム列であり、800pxに押し込めると
     1〜2列しか置けず縦に間延びする。
     意思決定 3-43(全幅要素と混在するページでは長文の読み幅を適用しない)
     と同じ判断であり、黙って作った例外ではない。
   ■ 文字サイズは3段(見出し 1.05rem / 本文 1rem / 補助 0.92rem)。
     中間値を足さないこと(3-43)。
   ============================================================ */

.amata-sitemap {
  max-width: 1150px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* 案E: Grid ではなく CSS マルチカラム。
   Grid は行単位で高さが揃うため、最も背の高いブロック(編成からさがす)に
   同じ行の他ブロックが引きずられ、下に大きな空白が出る(実機で確認)。
   マルチカラムなら各ブロックが自然に流れ込み、途中の穴が消える。
   break-inside: avoid でブロックが列をまたいで割れないようにする */
.amata-sitemap__grid {
  columns: 3;
  column-gap: 32px;
}
.amata-sitemap__block {
  /* -webkit- 付きは Safari 用。片方だけだと Safari でブロックが割れる */
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 44px;
}

.amata-sitemap__ttl {
  margin: 0 0 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--amata-teal);
  font-size: 1.05rem;
  font-weight: 700;
}

.amata-sitemap__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.amata-sitemap__list > li {
  border-bottom: 1px solid var(--amata-line);
}
.amata-sitemap__list > li:last-child {
  border-bottom: none;
}

/* 行の見た目を要素の種類に依存させない(禁止事項 1-11)。
   ここは全行が <a> だが、将来リンクでない行が混ざっても
   同じセレクタで扱えるよう、余白は li ではなく行そのものに置く */
.amata-sitemap__list a {
  position: relative;
  display: block;
  padding: 13px 4px 13px 20px;
  color: inherit;
  font-size: 1rem;
  text-decoration: none;
  transition: color var(--amata-dur-fast) ease;
}
.amata-sitemap__list a::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-top: 2px solid var(--amata-teal);
  border-right: 2px solid var(--amata-teal);
  transform: rotate(45deg);
}
.amata-sitemap__list a:hover,
.amata-sitemap__list a:focus-visible {
  color: var(--amata-teal);
}

/* 子カテゴリ */
.amata-sitemap__sublist {
  margin: 0 0 10px;
  padding: 0 0 0 20px;
  list-style: none;
}
.amata-sitemap__sublist li {
  border-top: 1px dotted var(--amata-line);
}
.amata-sitemap__sublist a {
  padding: 10px 4px 10px 20px;
  color: var(--amata-ink-soft);
  font-size: 0.92rem;
}

@media (max-width: 991px) {
  .amata-sitemap__grid { columns: 2; column-gap: 24px; }
  .amata-sitemap__block { margin-bottom: 36px; }
}

@media (max-width: 575px) {
  .amata-sitemap__grid { columns: 1; }
  .amata-sitemap__block { margin-bottom: 32px; }
}