/* ============================================================
   特徴 / 基本情報 ブロック用スタイル（icepro 専用）
   - 標準商品ページ D2CItemDetail.css の「部品ルール」だけを抜き出したもの。
   - グローバルリセット(body/img/a/ul 等)は含めない＝共通ヘッダー/フッターを汚染しない。
   - これらのクラス名は共通(header/footer/menu)側で未使用のため、そのまま使用してよい。
   ============================================================ */

/* 見出し補正:
   icepro の content.css 内 `:where(.d-page-content) h1〜h6 { margin: revert }` により
   このブロックの見出し(h1.titletable_pattern 等)へ UA 既定の上余白が乗ってしまうのを打ち消す。
   .spec 配下に限定しているので他には影響しない。 */
.d-page-content .spec h1,
.d-page-content .spec h2,
.d-page-content .spec h3 { margin-top: 0; }

/* --- レイアウト幅: 本文(.d-w950)と同じ 740 / 950px に揃える --- */
.spec__feature,
.spec__pattern-spec { min-width: 320px; }
@media (max-width: 992px) and (min-width: 768.02px) {
  .spec__feature,
  .spec__pattern-spec { width: 740px; max-width: 740px; }
}
@media (min-width: 992.02px) {
  .spec__feature,
  .spec__pattern-spec { width: 950px; max-width: 950px; }
}

/* --- 見出し（headline） --- */
.headline {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
  width: 100%;
}
.headline__icon { height: 1.25rem; }
.headline__text {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin: 0;
}
.headline__button {
  font-size: 0.75rem;
  background-color: #000;
  border-radius: 5px;
  padding: 0 20px;
  height: 30px;
  outline: none;
  border: none;
  color: #fff;
  text-align: center;
}

/* --- spec コンテナ --- */
.spec {
  background-color: #f5f5f5;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
}
.spec__feature { margin-bottom: 30px; }

/* --- 基本情報カード（card-table） --- */
.card-table {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1rem;
  background-color: #fff;
  padding: 1rem;
  border-radius: 5px;
}
.card-table__row {
  width: 100%;
  padding-bottom: 1rem;
  display: none;
  border-bottom: 1px solid #999;
}
@media (min-width: 768.02px) {
  .card-table__row { width: calc((100% - 1rem) / 2); }
}
.card-table__row--active { display: block; }
.card-table__row--fuel-efficient { border-bottom: none; padding-bottom: 0; }
.card-table__title { font-size: 1rem; padding: 0; margin-bottom: 1rem; font-weight: bold; }
.card-table__text {
  border-bottom: 1px solid #999;
  padding-bottom: 10px;
  font-size: 16px;
  display: none;
}
.card-table__text--ecolabel-detail { font-size: 14px; }
.card-table__text--ecolabel-link { font-size: 16px; }
.card-table__text--active { display: block; }
.card-table__row_description { width: 100%; border-bottom: 1px solid #999; }

/* --- カード内の商品名等（titletable） --- */
.titletable_pattern_kana { font-size: 0.625rem; font-weight: bold; width: 100%; margin-bottom: 0; }
.titletable_pattern { font-size: 1.375rem; font-weight: bold; width: 100%; margin-bottom: 0.5rem; }
.titletable_category { flex: 1 0 auto; font-size: 0.875rem; font-weight: bold; margin: 0.5rem 0; }
.titletable_description { font-size: 0.95rem; font-weight: bold; margin-bottom: 1rem; }
@media (min-width: 487px) { .titletable_description { font-size: 1rem; } }
@media (min-width: 768.02px) { .titletable_description { font-size: 1.2rem; } }

/* --- 対応インチ --- */
.supported-inches {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 992px) and (min-width: 768.02px) { .supported-inches { gap: 8px; } }
@media (min-width: 992.02px) { .supported-inches { gap: 3px; } }
.supported-inches__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #dbdbdb;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 0.875rem;
  font-weight: bold;
  background-color: #f8f8f8;
  color: #a6a6a6;
}
@media (min-width: 768.02px) { .supported-inches__item { font-size: 0.875rem; width: 36px; height: 36px; } }
@media (min-width: 992.02px) { .supported-inches__item { font-size: 0.75rem; width: 31px; height: 31px; } }
.supported-inches__item--active { background-color: #fff000; color: #000; }
.supported-inches__item-suffix { position: relative; font-size: 0.625rem; line-height: 0.625rem; top: -4px; }

/* --- 特徴タグ（tags） --- */
.tags {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
  background-color: #fff;
  border-radius: 5px;
  gap: 10px;
}
.tags__item { padding: 10px 20px; background-color: #fff000; border-radius: 5px; font-weight: bold; }

/* --- 対応車種（pattern-body-types） --- */
.pattern-body-types {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.pattern-body-types__item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 34px;
}
@media (max-width: 992px) and (min-width: 768.02px) { .pattern-body-types__item { width: 60px; height: 40px; } }
@media (min-width: 992.02px) { .pattern-body-types__item { width: 45px; height: 36px; } }
.pattern-body-types__image { opacity: 0.3; width: 60px; }
.pattern-body-types__image--active { opacity: 1; }

/* --- 低燃費タイヤ性能（fuel-efficient） --- */
.fuel-efficient {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  width: 100%;
}
.fuel-efficient__image { width: 100%; }
@media (min-width: 400px) { .fuel-efficient__image { width: calc((100% - 1rem) / 2); } }

/* ============================================================
   タイヤサイズ一覧表（size-list モーダル）用スタイル
   標準ページ D2CItemDetail.css から部品ルールのみ抜き出し（グローバルリセットは含めない）。
   クラス名は共通(header/footer/menu)で未使用のため衝突なし。
   ============================================================ */
#sizeModal.size-list-modal.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1055 !important;
  display: none;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  outline: 0;
}
#sizeModal.size-list-modal.modal.show {
  display: block;
}
.size-list-modal { border-radius: 5px; }
.size-list-modal .modal-dialog {
  margin: 0 auto;
  padding: 10px;
  width: auto;
  max-height: 100vh;
}
.size-list-modal .modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: 100%;
  @media (min-width: 576px) {
    margin: 1.75rem auto;
  }
}
@media (min-width: 576.02px) { .size-list-modal .modal-dialog { width: 100%; } }
@media (min-width: 768.02px) { .size-list-modal .modal-dialog { max-width: 740px; } }
.size-list-modal .modal-content {
  max-height: calc(100vh - 20px);
  overflow: hidden;
  padding: 10px;
}

.size-list {
  max-height: calc(100vh - 130px);
  overflow: auto;
  background-color: #fff;
  border-radius: 5px;
  cursor: all-scroll;
  width: 100%;
  position: relative;
}
.size-list__table { position: relative; font-size: 0.75rem; }
.size-list__table-head {
  position: sticky;
  top: 0;
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
  height: 30px;
  text-align: center;
  border-left: 1px solid #fff;
}
.size-list__table-head:first-child { left: 0; z-index: 3; border-left: none; border-radius: 5px 0 0 0; }
.size-list__table-head:last-child { border-radius: 0 5px 0 0; }
.size-list__table-head--small { font-size: 0.625rem; }
.size-list__table-row:nth-child(2n - 1) .size-list__table-data { background-color: #f5f5f5; }
.size-list__table-data { padding: 5px 10px; background-color: #fff; text-align: left; }
.size-list__table-data:first-child { position: sticky; left: 0; z-index: 2; }
.size-list__table-data--center { text-align: center; }
.size-list__table-data--right { text-align: right; }
.size-list__comment {
  position: sticky;
  left: 10px;
  margin: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 10px;
  font-size: 0.75rem;
}

/* icepro ページでは検索モーダル外側を固定し、選択肢リスト内だけスクロールさせる。 */
#item-search.modal {
  overflow: hidden;
}
#item-search .modal-dialog {
  box-sizing: border-box;
  max-height: 100vh;
}
#item-search .modal-content.size-select {
  height: calc(100vh - 106px);
  max-height: calc(100vh - 106px);
  overflow: hidden;
}
@media (min-width: 768.02px) {
  #item-search .modal-content.size-select {
    height: calc(100vh - 176px);
    max-height: calc(100vh - 176px);
  }
}
#item-search .modal-content__list {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}
#item-search .modal-content__list-scroller {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}