/* === /materials 専用（共通トーン準拠） ========================== */
/* このCSSはヘッダー/ハンバーガーを上書きしません（共通style.cssに委譲） */

.page-materials * { box-sizing: border-box; }
.page-materials img { max-width: 100%; height: auto; display: block; }
.page-materials a {
  color: #3366cc;
  text-decoration: none;
  transition: opacity .2s ease;
}
.page-materials a:hover { opacity: .8; }

/* コンテナ（/materials スコープに限定） */
.page-materials .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ---- セクション共通（/about と同テイスト） ---- */
.page-materials .materials-section {
  padding: 80px 0;
}
.page-materials .section-title {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0 0 18px;
  text-align: center;
}
.page-materials .section-desc {
  margin: 0 auto 18px;
  line-height: 1.9;
  max-width: 820px;
  text-align: center;
}

/* ---- 指定段落（data-animate 付き）を中央寄せ ---- */
/* 例: <p class="fadeup-2" data-animate="fadeup">…</p> をピンポイントで中央寄せ */
.page-materials .materials-section .container > p[data-animate] {
  text-align: center;
  margin: 0 auto 18px;
  line-height: 1.9;
  max-width: 820px;
}

/* ---- 主な施工内容（インライン／スラッシュ区切り） ---- */
.page-materials .section-subtitle {
  font-size: clamp(18px, 2.2vw, 20px);
  margin: 12px 0 8px;
  font-weight: 700;
  text-align: center;
}
.page-materials .materials-list { margin: 0 0 10px 1.2em; padding: 0; }
.page-materials .materials-list li { margin: 0 0 6px; }

.page-materials .materials-list.-inline {
  list-style: none; padding: 0; margin: 0 auto 10px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 12px; text-align: center; max-width: 100%;
}
.page-materials .materials-list.-inline li {
  margin: 0; white-space: nowrap; list-style: none;
}
.page-materials .materials-list.-inline li.br { flex-basis: 100%; height: 0; padding: 0; margin: 0; }
.page-materials .materials-list.-inline li:not(.br) + li:not(.br)::before {
  content: " / "; opacity: .8;
}

/* ---- テーブル（共通体裁は style.css、ここではthead色のみ） ---- */
.page-materials .materials-table {
  width: 100%;
  border-collapse: collapse;
}
.page-materials .materials-table th,
.page-materials .materials-table td {
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 10px 14px;
  text-align: left;
}
.page-materials .materials-table thead th {
  background: #f5f7fb;
  font-weight: 700;
}

/* ---- ギャラリー/スライダー（横スクロール） ---- */
.page-materials .materials-slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.page-materials .materials-slider .slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 25%;          /* PC: 4枚表示 */
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.page-materials .materials-slider .slider-track::-webkit-scrollbar { display: none; }
.page-materials .materials-slider .slide { scroll-snap-align: start; }
.page-materials .materials-slider img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* スライダー操作 */
.page-materials .materials-slider .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.45); color: #fff; border: 0;
  width: 40px; height: 40px; line-height: 40px;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.page-materials .materials-slider .nav:hover { background: rgba(0,0,0,.6); }
.page-materials .materials-slider .nav.prev { left: 10px; }
.page-materials .materials-slider .nav.next { right: 10px; }
.page-materials .materials-slider .dots {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.page-materials .materials-slider .dots button {
  width: 8px; height: 8px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.5); cursor: pointer;
}
.page-materials .materials-slider .dots button[aria-current="true"] {
  background: rgba(255,255,255,.95);
}

/* ---- CTA（/about と同テイスト） ---- */
.page-materials .cta-box {
  text-align: center;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 28px 20px;
}
.page-materials .cta-tel   { font-size: 28px; font-weight: 800; letter-spacing: 1px; margin: 0 0 6px; }
.page-materials .cta-hours { margin: 0 0 16px; color: #333; }
.page-materials .btn-primary {
  display: inline-block; padding: 12px 22px; border-radius: 8px;
  background: #000; color: #fff; text-decoration: none; transition: opacity .2s ease;
}
.page-materials .btn-primary:hover { opacity: .85; }
.page-materials .cta-note { margin-top: 10px; font-size: 12px; color: #555; }

/* =========================================================
   モバイル統合（ファイル末尾に集約）
   - ≤768px：レイアウト最適化（ヘッダー関連は上書きしない）
   - ≤640px：テーブルのタップ余白をさらに最適化
   ========================================================= */
@media (max-width: 768px) {
  /* コンテナ余白を圧縮（横幅を広く） */
  .page-materials .container { padding-left: 16px; padding-right: 16px; }

  /* セクションタイトルを必ず1行に */
  .page-materials h2.section-title {
    white-space: nowrap;     /* 改行禁止 */
    font-size: 18px;         /* 1行化を確実にするためSP時は小さめに */
    letter-spacing: 0.5px;
  }

  /* 文字サイズ・行間の最適化 */
  .page-materials .section-subtitle { font-size: 18px; }
  .page-materials .section-desc { text-align: center; }

  /* スライダー：1枚+肩見せでスワイプ誘導 */
  .page-materials .materials-slider { border-radius: 10px; }
  .page-materials .materials-slider .slider-track { grid-auto-columns: 80%; }
  .page-materials .materials-slider .nav { width: 36px; height: 36px; line-height: 36px; top: calc(50% - 2px); }

  /* インラインリストの間隔を微調整 */
  .page-materials .materials-list.-inline { gap: 6px 10px; }

  /* テーブル文字サイズをやや小さく */
  .page-materials .materials-table { font-size: 14px; }
}

@media (max-width: 640px) {
  /* テーブルのタップ余白をさらに確保 */
  .page-materials .materials-table th,
  .page-materials .materials-table td {
    padding: 8px 10px;
  }
}