/* 写し（STUDIO の CSS）の上から当てる、全ページ共通の見た目の直し。
   取り込みのたびに作り直される public/studio/css/ は手で直さない（skills/04）→ 直しはここに足す。 */

/* サイドの「店舗案内」カード：店名と住所の箱が文字の長さのまま伸びて、長い住所（八王子BASE「東京都八王子市川町435-3」）が
   枠の右からはみ出していた（2026-10-05 オーナー指摘・STUDIO の時から同じ）。箱を残りの幅に収め、住所は折り返してよい */
.symbol-11__sd-7,
.symbol-11__sd-13,
.symbol-11__sd-19 {
  flex: 1 1 0%;
  min-width: 0;
}
.symbol-11__sd-9,
.symbol-11__sd-15,
.symbol-11__sd-21 {
  overflow-wrap: anywhere;
}

/* 注目商品の「売約済み」の印（CMS で売約済みにした記事の見出しの後ろ・src/lib/cms/render-item.ts） */
.cs-soldout {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.6em;
  border-radius: 4px;
  background: #c62828;
  color: #fff;
  font-size: 0.6em;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}

/* 注目商品の「商品詳細」の表（src/lib/cms/render-item.ts）。STUDIO は h4 の箱を並べて表に見せていて、枠線が途中で切れ・
   空の行は値の側の枠が欠け・高さがそろわなかった（2026-10-05 オーナー指摘）→ 本物の表に。色・字は今の見た目に合わせる */
.cs-spec {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: "Red Hat Display", "Tsukushi Gothic", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  color: #222;
}
.cs-spec th,
.cs-spec td {
  border: 2px solid #a1a1a1;
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.cs-spec tr:first-child th,
.cs-spec tr:first-child td {
  border-top: 0; /* すぐ上の見出し帯（水色）とつなげる */
}
.cs-spec th {
  width: 30%;
  font-weight: 500;
}
.cs-spec a,
.cs-spec a:visited {
  color: #007cff;
  text-decoration: underline;
}
.cs-spec-unit {
  margin-left: 2px;
  font-size: 14px;
}
@media (max-width: 540px) {
  .cs-spec { font-size: 16px; }
  .cs-spec th,
  .cs-spec td { padding: 6px; }
  .cs-spec th { width: 32%; }
}