@charset "utf-8";

/* ==========================================================
   article.css — 施設ブランドまとめ記事専用スタイル
   style.css → detail.css の後に読み込む
   ========================================================== */

/* ----------------------------------------------------------------
   テーブルラッパー
   横スクロール + rounded border でカード感を出す
---------------------------------------------------------------- */
.article-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.75rem 0 1.75rem;
  border-radius: 0.5rem;
  border: 1px solid #c8ddd0;
}

/* ----------------------------------------------------------------
   テーブル本体
   border-collapse で二重線を排除し、ラッパーボーダーを活かす
---------------------------------------------------------------- */
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.article-table th,
.article-table td {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid #e4ede8;
  vertical-align: middle;
  text-align: left;
}

/* 最終行の下ボーダーはラッパー側が受け持つため除去 */
.article-table tr:last-child th,
.article-table tr:last-child td {
  border-bottom: none;
}

/* th[scope="row"] : 行ラベルセル */
.article-table th[scope="row"] {
  background: #f0f6f2;
  font-weight: 700;
  color: #1a2f24;
  width: 28%;
  white-space: nowrap;
  border-right: 1px solid #c8ddd0;
}

/* thead > th : 列ヘッダ */
.article-table thead th {
  background: #3e5b4a;
  color: #fff;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  border-bottom: none;
  letter-spacing: 0.02em;
  padding: 0.75rem 1rem;
}

/* tbody 偶数行に薄い縞模様 */
.article-table tbody tr:nth-child(even) td {
  background: #fafcfb;
}

/* ----------------------------------------------------------------
   特徴見出し — <p> の第一子 <strong> をブロック見出しに昇格
   例: <p><strong>特徴①：...</strong><br>本文…</p>
---------------------------------------------------------------- */
.l-detail .property-detail p > strong:first-child {
  display: block;
  background: #f0f6f2;
  border-left: 4px solid #3e5b4a;
  padding: 0.5rem 1rem;
  margin: 0.25rem 0 0.625rem;
  border-radius: 0 4px 4px 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #1a2f24;
  line-height: 1.5;
}

/* ----------------------------------------------------------------
   リスト — .property-detail 内 ul のカスタムブレット
   ブラウザデフォルトの disc を green dot に置き換え
---------------------------------------------------------------- */
.l-detail .property-detail ul {
  margin: 0.375rem 0 1.25rem;
  padding-left: 0;
  list-style: none;
}

.l-detail .property-detail ul li {
  position: relative;
  padding: 0.375rem 0 0.375rem 1.375rem;
  font-size: 0.9375rem;
  color: #444;
  line-height: 1.8;
  border-bottom: 1px solid #edf3ef;
  margin-bottom: 0;
}

.l-detail .property-detail ul li:last-child {
  border-bottom: none;
}

.l-detail .property-detail ul li::before {
  content: '';
  position: absolute;
  left: 0.375rem;
  top: 0.875em;
  width: 0.4375rem;
  height: 0.4375rem;
  background: #3e5b4a;
  border-radius: 50%;
}

/* ----------------------------------------------------------------
   SP対応
---------------------------------------------------------------- */
@media (max-width: 47.9375rem) {

  .article-table th,
  .article-table td {
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
  }

  /* 行ラベルが長い場合は折り返しを許可 */
  .article-table th[scope="row"] {
    width: 35%;
    white-space: normal;
  }

}