/* 共通クラスと既存記事のIDに対応し、元のCSSの詳細度を維持します。 */
/* =========================================================
   共通トイレ一覧カルーセル
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) {
  --mt-blue: #008cc9;
  --mt-border: #dfe5e9;

  --mt-accessible: #2f9e52;
  --mt-accessible-bg: #edf8ef;

  --mt-family: #b88a12;
  --mt-family-bg: #fff8df;

  --mt-care: #9659b5;
  --mt-care-bg: #f5ecfa;

  --mt-detail-green: #82d719;

  width: 100%;
  margin: 0;
  padding: 0;

  color: #222;

  box-sizing: border-box;
  container-type: inline-size;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) *,
:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) *::before,
:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) *::after {
  box-sizing: border-box;
}


/* =========================================================
   カルーセル
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-carousel {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0 24px;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-viewport {
  display: flex;
  align-items: stretch;

  gap: 16px;

  width: 100%;

  margin: 0;
  padding: 2px 2px 8px;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  overscroll-behavior-x: contain;

  scrollbar-width: none;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-viewport::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   カード
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card {
  flex: 0 0 calc((100% - 32px) / 3);

  display: flex;
  flex-direction: column;

  min-width: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;

  scroll-snap-align: start;

  border: 1px solid var(--mt-border);
  border-radius: 9px;

  background: #fff;

  box-shadow:
    0 2px 8px rgba(20, 50, 75, 0.04);
}


/* =========================================================
   写真
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-image-link {
  display: block;

  margin: 0;
  padding: 16px 16px 0;

  text-decoration: none;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-image {
  display: block;

  width: 100%;
  aspect-ratio: 4 / 3;

  margin: 0;

  object-fit: cover;
  object-position: center;

  border-radius: 7px;
}


/* =========================================================
   本文
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-body {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 16px;
}


/* =========================================================
   番号・タイトル
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-title-row {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  min-height: 74px;

  margin: 0;
  padding: 0 0 15px;

  border-bottom: 1px solid #e2e7eb;
}


/* 番号丸 */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-number {
  flex: 0 0 32px;

  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background: var(--mt-blue);
  color: #fff;

  font-size: 20px;
  font-weight: 700;
  line-height: 1;

  text-align: center;
}


/* 数字の見た目上の上下位置を中央に補正 */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-number > span {
  display: block;

  line-height: 1;

  transform: translateY(-1px);
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-number.is-double {
  font-size: 15px;
}


/* タイトル */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-title {
  flex: 1;

  display: -webkit-box;

  margin: 2px 0 0;
  padding: 0;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  color: var(--mt-blue);

  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-title a {
  color: var(--mt-blue) !important;

  text-decoration: none !important;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-title a:hover,
:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-title a:focus {
  text-decoration: underline !important;
}


/* =========================================================
   共通ラベル
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-label {
  margin: 0 0 8px !important;
  padding: 0 !important;

  color: #405263;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}


/* =========================================================
   設備・仕様
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-section-block {
  height: 160px;

  margin: 0;
  padding: 12px 0;

  overflow: hidden;

  border-bottom: 1px solid #e2e7eb;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-feature-groups {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  gap: 6px;

  margin: 0;
  padding: 0;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-feature-group {
  display: contents;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


/* =========================================================
   設備チップ
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-feature {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  width: auto;
  min-width: 0;
  min-height: 32px;

  margin: 0 !important;
  padding: 4px 8px !important;

  border-radius: 8px;

  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;

  white-space: nowrap;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-feature img {
  flex: 0 0 auto;

  display: block;

  width: 22px;
  height: 22px;

  object-fit: contain;

  border-radius: 4px;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-feature span {
  display: block;

  white-space: nowrap;
}


/* バリアフリー */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel)
.is-accessible-group
.mt-tdc-feature {
  background: var(--mt-accessible-bg);
  color: var(--mt-accessible);
}


/* ベビー・授乳 */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel)
.is-family-group
.mt-tdc-feature {
  background: var(--mt-family-bg);
  color: var(--mt-family);
}


/* パウダー・フィッティング */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel)
.is-care-group
.mt-tdc-feature {
  background: var(--mt-care-bg);
  color: var(--mt-care);
}


/* =========================================================
   個室・小便器数
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-block {
  margin: 0 !important;

  padding: 12px 0 14px !important;
}


/* 女性・男性を均等2分割 */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-counts {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 8px !important;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


/* =========================================================
   女性用・男性用の大枠
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 78px !important;
  min-height: 78px !important;
  max-height: 78px !important;

  margin: 0 !important;

  padding: 8px 10px !important;

  border-radius: 9px !important;

  background: #f3f7fa !important;

  list-style: none !important;
}


/* =========================================================
   男女アイコン
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-icon {
  flex: 0 0 auto;

  display: block;

  width: 21px !important;
  height: 36px !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain;
  object-position: center;
}


/* =========================================================
   女性用・男性用ラベル
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-data {
  flex: 0 1 auto;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-name {
  display: block;

  margin: 0 !important;
  padding: 0 !important;

  color: #455564 !important;

  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;

  text-align: center !important;

  white-space: nowrap !important;
}


/* =========================================================
   女性用トイレ個室数
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-value {
  display: block;

  margin: 5px 0 0 !important;
  padding: 0 !important;

  color: #082d50 !important;

  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  text-align: center !important;

  white-space: nowrap;
}


/* =========================================================
   男性用トイレ内訳
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-male-breakdown {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 0;

  width: 100%;

  margin: 5px 0 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-male-breakdown > li {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 48px;

  margin: 0 !important;
  padding: 0 7px !important;

  list-style: none !important;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel)
.mt-tdc-male-breakdown > li + li {
  border-left: 1px solid #d6dfe5;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-breakdown-name {
  display: block;

  margin: 0;
  padding: 0;

  color: #5b6874;

  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;

  white-space: nowrap;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-breakdown-value {
  display: block;

  margin: 3px 0 0;
  padding: 0;

  color: #082d50;

  font-size: 22px;
  font-weight: 700;
  line-height: 1;

  white-space: nowrap;
}


/* =========================================================
   単位
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-unit {
  display: inline-block;

  margin-left: 2px;

  color: #455564;

  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;

  vertical-align: baseline;
}


/* =========================================================
   詳細を見る
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-detail {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 52px;

  margin: auto 0 0;

  padding: 10px 46px;

  border-radius: 6px;

  background: var(--mt-detail-green);

  color: #fff !important;

  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;

  text-align: center;
  text-decoration: none !important;

  box-shadow:
    0 4px 9px rgba(76, 140, 0, 0.18);

  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-detail:hover,
:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-detail:focus {
  color: #fff !important;

  opacity: 0.86;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-detail:active {
  transform: translateY(1px);
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-detail-arrow {
  position: absolute;

  top: 50%;
  right: 18px;

  transform: translateY(-50%);

  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}


/* =========================================================
   左右矢印
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-arrow {
  position: absolute;

  top: 46%;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin: 0;
  padding: 0;

  border: 1px solid #e0e5e9;
  border-radius: 50%;

  background: #fff;
  color: #405466;

  cursor: pointer;

  box-shadow:
    0 3px 12px rgba(20, 50, 75, 0.14);

  transform: translateY(-50%);

  transition:
    opacity 0.15s ease,
    box-shadow 0.15s ease;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-arrow span {
  display: block;

  margin-top: -3px;

  font-size: 38px;
  font-weight: 300;
  line-height: 1;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-arrow:hover,
:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-arrow:focus {
  box-shadow:
    0 5px 17px rgba(20, 50, 75, 0.2);
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-arrow:disabled {
  opacity: 0.28;

  cursor: default;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-arrow-prev {
  left: 0;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-arrow-next {
  right: 0;
}


/* =========================================================
   ページャー
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-dots {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 18px;

  margin: 10px 0 0;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-dot {
  display: block;

  width: 10px;
  height: 10px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #d9dfe4;

  cursor: pointer;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-dot.is-active {
  background: var(--mt-blue);
}


/* =========================================================
   注釈
========================================================= */

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-guide {
  margin: 10px 24px 0;

  padding: 0;

  color: #5b6874;

  font-size: 13px;
  line-height: 1.6;

  text-align: left;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-guide-pc {
  display: inline;
}

:is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-guide-sp {
  display: none;
}


/* =========================================================
   狭いPC・タブレット
========================================================= */

@container (max-width: 920px) {

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card {
    flex-basis:
      calc((100% - 16px) / 2);
  }

}


/* =========================================================
   スマホ
========================================================= */

@container (max-width: 620px) {

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-carousel {
    padding: 0;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-viewport {
    gap: 12px;

    padding-right: 20px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card {
    flex-basis: 89%;
  }


  /* 画像 */

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-image-link {
    padding: 12px 12px 0;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-image {
    aspect-ratio: 4 / 3;
  }


  /* 本文 */

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-body {
    padding: 12px;
  }


  /* =======================================================
     タイトル
  ======================================================== */

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-title-row {
    min-height: 64px;

    gap: 8px;

    padding-bottom: 12px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-number {
    flex-basis: 28px;

    width: 28px;
    height: 28px;

    font-size: 17px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-number.is-double {
    font-size: 13px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-card-title {
    font-size: 17px;
  }


  /* =======================================================
     設備・仕様
  ======================================================== */

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-section-block {
    height: 112px;

    padding: 10px 0;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-label {
    margin-bottom: 7px !important;

    font-size: 12px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-feature-groups {
    gap: 5px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-feature {
    min-height: 29px;

    gap: 4px;

    padding: 4px 6px !important;

    font-size: 9.5px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-feature img {
    width: 20px;
    height: 20px;
  }


  /* =======================================================
     個室・小便器
  ======================================================== */

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-block {
    padding: 10px 0 12px !important;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-counts {
    gap: 6px !important;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count {
    gap: 6px !important;

    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;

    padding: 6px 5px !important;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-icon {
    width: 18px !important;
    height: 31px !important;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-name {
    font-size: 9px !important;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-value {
    margin-top: 4px !important;

    font-size: 24px !important;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-male-breakdown {
    margin-top: 4px !important;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel)
  .mt-tdc-male-breakdown > li {
    min-width: 38px;

    padding: 0 4px !important;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-breakdown-name {
    font-size: 8px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-breakdown-value {
    margin-top: 3px;

    font-size: 19px;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-count-unit {
    margin-left: 1px;

    font-size: 10px !important;
  }


  /* 詳細 */

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-detail {
    min-height: 48px;

    font-size: 14px;
  }


  /* スマホは矢印・ページャー非表示 */

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-arrow,
  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-dots {
    display: none;
  }


  /* 注釈 */

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-guide {
    margin: 10px 0 0;

    padding: 0 4px;

    font-size: 12px;
    line-height: 1.6;

    text-align: left;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-guide-pc {
    display: none;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-guide-sp {
    display: inline;
  }

}


/* =========================================================
   動きを減らす設定
========================================================= */

@media (prefers-reduced-motion: reduce) {

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-viewport {
    scroll-behavior: auto;
  }

  :is(#mt-tokyodome-compare, .motenashi-toilet-carousel) .mt-tdc-detail {
    transition: none;
  }

}