@charset "utf-8";

/*対象のマリントイレ*/
.mt-parts .flex{
  display: flex; justify-content: space-between; align-items: center; 
  margin: 0 0 10px; padding: 0 0 10px;
  border-bottom: dashed 1px #000000;
}
.mt-parts .flex > * { width : calc(50% - 5px);}
.mt-parts .flex tr > * {
  padding: 5px;
  border: solid 1px #000;
  font-size: 14px; font-weight: 400; text-align: center;
}

/*対象のマリントイレ画像*/
.mt-parts .flex div { text-align: center;}
.mt-parts .flex img { max-height: 220px;}

@media screen and (max-width:699px){
  .mt-parts .flex{ display: block;}
  .mt-parts .flex > * { width : 100%;}
  .mt-parts .flex > table { margin: 0 auto;}
  .mt-parts .flex div { margin: 10px auto 0;}
  .mt-parts:has(#mt-img_03) .flex > *,
  /*.mt-parts:has(#mt-img_04) .flex > * { max-width : 350px;}★★★↓差し替え*/
  .mt-parts:has(#mt-img_004) .flex > * { max-width : 350px;}
}


/*補修部品画像*/
[id^="mt-img_"] {
  position: relative;
  margin: 0 0 20px;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
}
#mt-img_01 { padding: 0 0 61.15%; background-image: url(/info/zz/c/Marine-toilet/01/base.jpg); }
#mt-img_02 { padding: 0 0 76.92%; background-image: url(/info/zz/c/Marine-toilet/02/base.jpg); }
#mt-img_03 { padding: 0 0 76.92%; background-image: url(/info/zz/c/Marine-toilet/03/base.jpg); }
/*#mt-img_04 { padding: 0 0 76.92%; background-image: url(/info/zz/c/Marine-toilet/04/base.jpg); }★★★↓消して←有効にする*/
#mt-img_004 { padding: 0 0 76.92%; background-image: url(/info/zz/c/Marine-toilet/004/base.jpg); }


/*補修部品一覧*/
.mt-list {
  height: 180px;
  overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #888 #ccc;
  border: solid 1px #ccc;
}
@media screen and (max-width:699px){
  .mt-list { scrollbar-width: auto; scrollbar-color: auto;}
  .mt-list::-webkit-scrollbar { width: 10px;}
  .mt-list::-webkit-scrollbar-thumb { border: solid 2px #ccc; border-radius: 5px; background-color: #888;}
  .mt-list::-webkit-scrollbar-track { background-color: #ccc;}
}

.mt-list table {
  width:100%;
  border-collapse: collapse;
}

.mt-list th {
  padding: 3px;
  border: solid 1px #b9b9b9;
  background-color: #ddd;
  color: #444; font-weight: 600; text-align: center;
}
.mt-list th:first-of-type { min-width: 30px; }
#mt-img_01 + div th:last-of-type { min-width: 145px; }
#mt-img_02 + div th:last-of-type { min-width: 95px; }
#mt-img_03 + div th:last-of-type,
/*#mt-img_04 + div th:last-of-type { min-width: 70px; }★★★↓消して←有効にする*/
#mt-img_004 + div th:last-of-type { min-width: 70px; }

.mt-list tbody tr:hover { background-color: #fee8ee; }

.mt-list td {
  padding: 5px;
  border: solid 1px #b9b9b9;
  font-size: 12px; line-height: 1.5em;
}
.mt-list td:has(a) { text-align: center;}
.mt-list a::before { content: url(/info/images/mark/mouse_icon.png); }
.mt-list td:last-child { white-space: nowrap;}
.mt-list td img { margin: 0 3px 3px; vertical-align: middle;}

.mt-parts p { margin: 10px 0 0; color: #dd0000; font-size: 0.8em;}

/* LastUp2025.06.06_shinkai */