@charset "UTF-8";
/* ==========================================================
   田屋品質セクション（完全隔離・header無干渉 最終安定版）
   対応HTML: <section class="taya-quality tq-section">
   ========================================================== */

/* ===============================
   セクション本体
   =============================== */
.taya-quality.tq-section {
  background: #fff;
  color: #2b2b2b;
  font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  padding: 40px 0;
  position: relative;
  overflow: visible;
  box-sizing: border-box;
}

/* ===============================
   タイトル
   =============================== */
.taya-quality.tq-section .tq-title {
  text-align: center;
  margin-bottom: 100px;
}

.taya-quality.tq-section .tq-h2 {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  line-height: 1.5;
  color: #2b2b2b;
  font-weight: 400;
}

.taya-quality.tq-section .tq-span {
  display: block;
  font-size: 1rem;
  color: #a7945f;
}

/* ===============================
   メイン2カラム構成
   =============================== */
.taya-quality.tq-section .tq-content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 50px;
  max-width: 1100px;
  margin: 150px auto 0;
  padding: 0 40px;
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
}

.taya-quality.tq-section .tq-image {
  flex: 1 1 45%;
}

.taya-quality.tq-section .tq-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.taya-quality.tq-section .tq-text {
  flex: 1 1 50%;
}

/* ===============================
   Point表記＋罫線
   =============================== */
.taya-quality.tq-section .tq-point-label {
  font-family: "Times New Roman", serif;
  font-style: italic;
  font-size: 1rem;
  color: #a7945f;
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}

.taya-quality.tq-section .tq-point-label::before {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: #ccc;
  margin-right: 10px;
}

.taya-quality.tq-section .tq-point-num {
  font-size: 1.8rem;
  color: #000;
  margin-left: 6px;
  font-weight: 600;
}

/* ===============================
   小見出し・本文
   =============================== */
.taya-quality.tq-section .tq-h3 {
  font-size: 1.2rem;
  color: #2b2b2b;
  margin-bottom: 1em;
  line-height: 1.8;
  font-weight: 600;
}

.taya-quality.tq-section .tq-p {
  color: #2b2b2b;
  font-size: 0.9rem;
  line-height: 1.8;
}

/* ===============================
   スマホ対応
   =============================== */
@media screen and (max-width: 768px) {
  .taya-quality.tq-section {
    padding: 0;
  }

  .taya-quality.tq-section .tq-title {
    margin-bottom: 50px;
  }

  .taya-quality.tq-section .tq-content {
    flex-direction: column;
    gap: 30px;
    padding: 0 40px;
    margin-top: 80px;
  }

  .taya-quality.tq-section .tq-h2 {
    font-size: 1.6rem;
  }

  .taya-quality.tq-section .tq-h3 {
    font-size: 1.1rem;
  }

  .taya-quality.tq-section .tq-p {
    font-size: 0.8rem;
    line-height: 1.7;
  }

  /* 明朝体を維持（taya-quality内限定） */
  .taya-quality.tq-section,
  .taya-quality.tq-section * {
    font-family: "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif !important;
    font-weight: 500;
  }
}

/* ===============================
   グレー背景リセット（限定）
   =============================== */
.taya-quality.tq-section .tq-h2 {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===============================
   ブロック余白調整（完全スコープ限定）
   =============================== */
.taya-quality.tq-section .block-tight {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.taya-quality.tq-section .block-tight-bottom {
  margin-bottom: 0 !important;
}

.taya-quality.tq-section .block-half {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}

.taya-quality.tq-section .block-wide {
  margin-top: 100px !important;
  margin-bottom: 100px !important;
}

.taya-quality.tq-section .block-extra {
  margin-top: 160px !important;
  margin-bottom: 160px !important;
}

/* Point04の2段目だけ詰める */
.taya-quality.tq-section .tq-content.tq-content-tight{
  margin-top: 40px !important; /* 好みで 16〜60px */
}

@media screen and (max-width: 768px) {
  .taya-quality.tq-section .tq-content.tq-content-tight{
    margin-top: 24px !important;
  }
}


/* ===============================
   サイズ表：罫線の復活とサイズ調整
   =============================== */

/* 全体レイアウト */
.taya-quality.tq-section .tq-size-section {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1100px;
  margin: 100px auto 0 !important;
  padding: 0 40px;
}

/* 絵型画像 */
.taya-quality.tq-section .tq-ekata {
  flex: 0 0 47%;
}

/* 右側：テーブルコンテナ */
.taya-quality.tq-section .tq-size-table-container {
  flex: 1;
}

/* 罫線が出るように枠とテーブルを再定義 */
.taya-quality.tq-section .tq-table-outline {
  border: 1px solid #dcdcdc; /* 外枠を細いグレーに */
  background: #fff;
}

.taya-quality.tq-section .tq-table {
  width: 100%;
  border-collapse: collapse; /* 隙間をなくして罫線を結合 */
  table-layout: fixed;
}

/* すべてのセルに罫線を強制的に表示 */
.taya-quality.tq-section .tq-table th,
.taya-quality.tq-section .tq-table td {
  border: 1px solid #dcdcdc !important; /* 強制的に全周に線を引く */
  padding: 6px 5px;
  font-size: 0.8rem; /* 本文より一回り小さくシャープに */
  line-height: 1.4;
  text-align: center;
  color: #2b2b2b;
  font-weight: 400;
}

/* ヘッダー行の装飾 */
.taya-quality.tq-section .tq-table thead th {
  background-color: #f8f8f8;
  color: #a7945f; /* 田屋ゴールド */
  font-weight: 600;
}

/* 左端の見出し列 */
.taya-quality.tq-section .tq-table tbody th {
  background-color: #fafafa;
  text-align: left;
  padding-left: 12px;
  color: #555;
  width: 140px; /* 項目名が長いため少し広めに */
}

/* 注釈（単位表示） */
.taya-quality.tq-section .tq-caption {
  font-size: 0.75rem;
  color: #888;
  text-align: right;
  margin-top: 10px;
}

/* ===============================
   スマホ対応：ブロックのずれ防止
   =============================== */
@media screen and (max-width: 768px) {
  .taya-quality.tq-section .tq-size-section {
    flex-direction: column; /* 縦に並べる */
    gap: 20px;
    margin-top: 60px !important;
    padding: 0 20px;
  }

  .taya-quality.tq-section .tq-ekata,
  .taya-quality.tq-section .tq-size-table-container {
    width: 80%;
    flex: none;
  }

  .taya-quality.tq-section .tq-table-outline {
    overflow-x: auto; /* はみ出し防止 */
  }

  .taya-quality.tq-section .tq-table {
    min-width: 300px; /* スマホで潰れすぎない幅 */
  }

  .taya-quality.tq-section .tq-table th,
  .taya-quality.tq-section .tq-table td {
    padding: 6px 4px;
    font-size: 0.75rem;
  }
}