@charset "UTF-8";
/* =========================================================
   Utilities: Colors & Labels (migrated from common.legacy.css)
   - Keep this file free of layout (flex/grid) rules.
   - Load after common.css and before pc.css/sp.css.
========================================================= */

.textBgc {
  font-size: 12px;
  font-size: 1.2rem;
  padding-left: .25em;
  padding-right: .25em;
  display: inline-block;
  font-weight: normal;
  background-color: #666;
  color: #fff;
}

.textBd {
  font-size: 12px;
  font-weight: 200;
  border: #4d4d4d solid 1px;
  padding: 0 .5em;
  position: relative;
  top: -1px;
}


/* ---- Neutrals ---- */
.C-white {
  color: #fff !important;
}
.BC-white {
  border-color: #fff !important;
}
.BG-white {
  background-color: #fff !important;
}
.TRI-white a:after {
  border-bottom-color: #fff !important;
}

.C-black {
  color: #000 !important;
}
.BC-black {
  border-color: #000 !important;
}
.BG-black {
  background-color: #000 !important;
}
.TRI-black a:after {
  border-bottom-color: #000 !important;
}

.C-gray {
  color: #4d4d4d !important;
}
.BC-gray {
  border-color: #4d4d4d !important;
}
.BG-gray {
  background-color: #4d4d4d !important;
}
.TRI-gray a:after {
  border-bottom-color: #4d4d4d !important;
}

.C-brightGray {
  color: #ccc !important;
}
.BC-brightGray {
  border-color: #ccc !important;
}
.BG-brightGray {
  background-color: #ccc !important;
}
.TRI-brightGray a:after {
  border-bottom-color: #ccc !important;
}

.C-softGray {
  color: #e0e0e0 !important;
}
.BC-softGray {
  border-color: #e0e0e0 !important;
}
.BG-softGray {
  background-color: #e0e0e0 !important;
}
.TRI-softGray a:after {
  border-bottom-color: #e0e0e0 !important;
}

.C-lightGray {
  color: #e6e6e6 !important;
}
.BC-lightGray {
  border-color: #e6e6e6 !important;
}
.BG-lightGray {
  background-color: #e6e6e6 !important;
}
.TRI-lightGray a:after {
  border-bottom-color: #e6e6e6 !important;
}

.C-grayBlue {
  color: #798d97 !important;
}
.BC-grayBlue {
  border-color: #798d97 !important;
}
.BG-grayBlue {
  background-color: #798d97 !important;
}
.TRI-grayBlue a:after {
  border-bottom-color: #798d97 !important;
}


/* ---- Accent ---- */
.C-red {
  color: #e24040 !important;
}
.BC-red {
  border-color: #e24040 !important;
}
.BG-red {
  background-color: #e24040 !important;
}
.TRI-red a:after {
  border-bottom-color: #e24040 !important;
}

.C-pink {
  color: #df6d62 !important;
}
.BC-pink {
  border-color: #df6d62 !important;
}
.BG-pink {
  background-color: #df6d62 !important;
}
.TRI-pink a:after {
  border-bottom-color: #df6d62 !important;
}


/* ---- Product lines ---- */
.C-d-style {
  color: #231815 !important;
}
.BC-d-style {
  border-color: #231815 !important;
}
.BG-d-style {
  background-color: #333 !important;
}
.TRI-d-style a:after {
  border-bottom-color: #231815 !important;
}

.C-yutori {
  color: #5680a9 !important;
}
.BC-yutori {
  border-color: #5680a9 !important;
}
.BG-yutori {
  background-color: #5680a9 !important;
}
.TRI-yutori a:after {
  border-bottom-color: #5680a9 !important;
}

.C-kaigo_yutori {
  color: #f39618 !important;
}
.BC-kaigo_yutori {
  border-color: #f39618 !important;
}
.BG-kaigo_yutori {
  background-color: #f39618 !important;
}
.TRI-kaigo_yutori a:after {
  border-bottom-color: #f39618 !important;
}

.C-yutori_basic {
  color: #438c38 !important;
}
.BC-yutori_basic {
  border-color: #438c38 !important;
}
.BG-yutori_basic {
  background-color: #438c38 !important;
}
.TRI-yutori_basic a:after {
  border-bottom-color: #438c38 !important;
}

.C-yutori_plus {
  color: #ff7284 !important;
}
.BC-yutori_plus {
  border-color: #ff7284 !important;
}
.BG-yutori_plus {
  background-color: #ff7284 !important;
}
.TRI-yutori_plus a:after {
  border-bottom-color: #ff7284 !important;
}

.C-auto_toilet {
  color: #52ac94 !important;
}
.BC-auto_toilet {
  border-color: #52ac94 !important;
}
.BG-auto_toilet {
  background-color: #52ac94 !important;
}
.TRI-auto_toilet a:after {
  border-bottom-color: #52ac94 !important;
}

.C-sophia {
  color: #2e86cc !important;
}
.BC-sophia {
  border-color: #2e86cc !important;
}
.BG-sophia {
  background-color: #2e86cc !important;
}
.TRI-sophia a:after {
  border-bottom-color: #2e86cc !important;
}

.C-dokodemo_toilet {
  color: #00628f !important;
}
.BC-dokodemo_toilet {
  border-color: #00628f !important;
}
.BG-dokodemo_toilet {
  background-color: #00628f !important;
}
.TRI-dokodemo_toilet a:after {
  border-bottom-color: #00628f !important;
}

.C-disposer {
  color: #2d6766 !important;
}
.BC-disposer {
  border-color: #2d6766 !important;
}
.BG-disposer {
  background-color: #2d6766 !important;
}
.TRI-disposer a:after {
  border-bottom-color: #2d6766 !important;
}

.C-recycled_water {
  color: #1f5eab !important;
}
.BC-recycled_water {
  border-color: #1f5eab !important;
}
.BG-recycled_water {
  background-color: #1f5eab !important;
}
.TRI-recycled_water a:after {
  border-bottom-color: #1f5eab !important;
}

.C-rain_tank {
  color: #2ea0cc !important;
}
.BC-rain_tank {
  border-color: #2ea0cc !important;
}
.BG-rain_tank {
  background-color: #2ea0cc !important;
}
.TRI-rain_tank a:after {
  border-bottom-color: #2ea0cc !important;
}

.C-septic_tank {
  color: #4c8e19 !important;
}
.BC-septic_tank {
  border-color: #4c8e19 !important;
}
.BG-septic_tank {
  background-color: #4c8e19 !important;
}
.TRI-septic_tank a:after {
  border-bottom-color: #4c8e19 !important;
}

.C-frp {
  color: #2d6766 !important;
}
.BC-frp {
  border-color: #2d6766 !important;
}
.BG-frp {
  background-color: #2d6766 !important;
}
.TRI-frp a:after {
  border-bottom-color: #2d6766 !important;
}

.BC-frpSoft {
  border-color: #d5e1e0 !important;
}


/* ---- Palette ---- */
.C-softBlue {
  color: #599ec9 !important;
}
.BC-softBlue {
  border-color: #599ec9 !important;
}
.BG-softBlue {
  background-color: #599ec9 !important;
}
.TRI-softBlue a:after {
  border-bottom-color: #599ec9 !important;
}

.C-softPurple {
  color: #9c69a5 !important;
}
.BC-softPurple {
  border-color: #9c69a5 !important;
}
.BG-softPurple {
  background-color: #9c69a5 !important;
}
.TRI-softPurple a:after {
  border-bottom-color: #9c69a5 !important;
}

.C-softOrange {
  color: #ec6d56 !important;
}
.BC-softOrange {
  border-color: #ec6d56 !important;
}
.BG-softOrange {
  background-color: #ec6d56 !important;
}
.TRI-softOrange a:after {
  border-bottom-color: #ec6d56 !important;
}


/* ---- Reform blues ---- */
.BG-reformBlue01 {
  background-color: #eaf3fa;
}

.BG-reformBlue02 {
  background-color: #d5e7f4;
}

.BG-reformBlue03 {
  background-color: #abceea;
}

.BG-reformBlue04 {
  background-color: #82b5e0;
}


/* ---- Toilet tank ---- */
.C-toiletTankPVC {
  color: #5a6b70;
}
.BC-toiletTankPVC {
  border-color: #5a6b70;
}
.BG-toiletTankPVC {
  background-color: #5a6b70;
}
.TRI-toiletTankPVC a:after {
  border-bottom-color: #5a6b70;
}

.C-toiletTankFRP {
  color: #138aad;
}
.BC-toiletTankFRP {
  border-color: #138aad;
}
.BG-toiletTankFRP {
  background-color: #138aad;
}
.TRI-toiletTankFRP a:after {
  border-bottom-color: #138aad;
}