@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

 .washlet_section h5 {
  width: auto;
}
 .washlet_section {
    --blue--org: #387acc;
    --blue: #21a9ce;
    /* --blue: #0090fb; */
    --green: #0bb6b6;
    --green--dark: #007e8f;
    --border: #c3c3c3;
    --bg--blue: #f2faff;
    --bg--blue--dark: rgb(53,121,240,.1);
    --bg--green: #edffea;
    --bg--green--dark: rgb(92,210,19,.1);
    --bg--exdark: #d5e6ff;
    --btn: #5ec300;
    font-family: 'Noto Sans JP', sans-serif;
  }

  .washlet_section,
  .washlet_section > p {
    font-size: 14px;
    line-height: 1.6;
  }

  .washlet_section + .washlet_section {
    margin-top: min(6vw, 3.5em);
  }
  
  .washlet_section p {
    line-height: 1.6;
  }

  .washlet_section figure {
    margin: 0;
    text-align: center;
  }

  .washlet_fv {
    width: min(100%, 770px);
    display: block;
    margin: 0 auto -1em;
  }

  .washlet_ttl {
    all: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75em;
    height: auto !important;
    font-weight: bold;
    font-size: min(4.8vw, 1.4em) !important;
    letter-spacing: .05em;
    text-align: center !important;
    margin: 0 0 .9em !important;
    padding: .75em .85em .8em .5em !important;
    background: var(--blue) !important;
    color: #fff !important;
    border: 0 !important;
  }

  .washlet_ttl .idx {
    display: block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    font-size: .75em;
    border-radius: 3px;
    color: var(--blue);
    background: #d8ebff;
  }

  .washlet_ttl.type02 {
    padding: 8px 13px !important;
    text-align: left !important;
    margin: 1em 0 !important;
    border-radius: .2em;
  }

  .washlet_ttl_m {
    font-weight: bold;
    font-size: 1.2em;
    border: 0 !important;
    height: auto !important;
  }

  .washlet_section .washlet_ttl_s {
    font-weight: bold;
    font-size: 1.05em;
  }
  
  .washlet_section .washlet_heading {
    position: relative;
    margin: 1.5em 0 .7em;
    padding: .5em;
    height: auto;
    font-size: 1.12em;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    border: 0;
    background: var(--bg--blue);
    border-radius: 3px;
    color: #000;
  }

  .washlet_txt {
    font-size: 1em;
  }

  .washlet_flex.type02,
  .washlet_flex-even.type02 {
    gap: 3.5em;
  }

  .washlet_section .color {
    color: var(--color);
  }

  .washlet_section .em {
    font-weight: bold;
    background: linear-gradient(transparent 60%, var(--bg--exdark) 0);
  }

  .washlet_note {
    font-size: .85em;
    color: #2c4c76;
    margin-bottom: 1em;
    text-indent: -1em;
    padding-left: 1em;
  }

  .mark {
    display: block;
    margin-inline: auto;
    width: fit-content;
    font-size: 2em;
    font-weight: bold;
  }

  .mark.maru {
    color: #ff0000;
  }

  .mark.sankaku {
    color: #008fc3;
  }

  .mark.nijyumaru {
    color: #ff8800;
  }

  
.washlet_flex,
.washlet_flex-even {
  display: flex;
  gap : 2em;
}

.btn {
  position: relative;
  display: block;
  width: min(100%, 250px);
  background: var(--btn);
  margin: 1.5em auto 0;
  text-align: center;
  font-weight: bold;
  text-decoration: none !important;
}

.btn:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: .8em;
  border: .35em solid transparent;
  border-left: .55em solid rgba(255, 255, 255, 0.7);
  transform: translateY(-50%);
}

@media print, screen and (min-width: 768px) {
  .washlet_flex {
    display: flex;
    gap: 2em;
  }
   .washlet_flex.--wrap {
    flex-wrap: wrap;
   }

  .washlet_flex-even>* {
    flex: 1;
  }

  .washlet_flex.--col2 {
    gap: 2em;
  }

  .washlet_flex.--col2 > * {
    width: calc(calc(100% - 2em) / 2);
  }

  .washlet_flex.--col3 {
    gap: 2em;
  }

  .washlet_flex.--col3 > * {
    width: calc(calc(100% - 4em) / 3);
  }

  .washlet_flex .txtWrap {
    flex: 1;
  }

  .washlet_flex .washlet_imgWrap {
    flex: 0 1 25%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media print, screen and (max-width: 767px) {
  .washlet_article {
    grid-template-columns: 1fr;
    gap: 1em;
  }

  .washlet_flex,
  .washlet_flex-even {
    flex-direction: column;
  }

  .washlet_ttl {
    padding: .2em .85em .3em .5em !important;
    line-height: 1.4;
    min-height: 3em;
    box-sizing: border-box;
  }
}

/* menu */
.washlet_sec-list {
  margin: 3em 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 1em;
}

.washlet_sec-list li {
  counter-increment: idx;
}

.washlet_sec-list li a {
  display: block;
  padding: .65em 1em .65em 2.75em;
  border-radius: .25em;
  background: #f2faff;
  color: inherit !important;
  text-decoration: none !important;
  font-weight: bold;
  position: relative;
  font-size: .94em;
}

.washlet_sec-list li a span.in-block {
  display: inline-block;
}

.washlet_sec-list li a:before {
  content: "";
  display: block;
  position: absolute;
  right: 1.25em;
  top: calc(50% - 2px);
  transform: rotate(45deg) translateY(-50%);
  width: .4em;
  height: .4em;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
}

.washlet_sec-list li a:after {
  content: counter(idx);
  display: block;
  position: absolute;
  left: .65em;
  top: 50%;
  transform: translate(0, -50%);
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  line-height: 1;
}

@media print, screen and (max-width: 767px) {
  .washlet_section .washlet_heading {
    margin-top: 0;
  }

  .washlet_sec-list {
    margin-top: 2em;
    grid-template-columns: 1fr;
    gap: .35em;
  }
}


/* 1. LINEUP */
.washlet_lineup {
  font-size: 12px;
}

@media print, screen and (min-width: 768px) {
  .washlet_lineup {
    gap: 1.5em;
  }

  .washlet_lineup_box {
    width: calc(calc(100% - 1.5em) / 2) !important;
  }
}

@media print, screen and (max-width: 767px) {
  .washlet_lineup_box {
    width: auto !important;
    margin: 0 auto;
  }
}

/* 2. 選び方・設置条件 */

  .checkpoint {
    overflow: hidden;
    /* border-top: 3px solid rgb(213 230 255);
    border-bottom: 3px solid rgb(213 230 255); */
    padding: 1.75em 1.5em;
    margin: 1.5em auto 0;
    max-width: 92%;
    font-size: .925em;;
    background: #effbff;
    border-radius: .45em;
    border: 1px solid #abd4e4;
  }

  .checkpoint .washlet_ttl_m {
    font-size: 1.25em !important;
    font-weight: bold;
    width: fit-content;
    position: relative;
    display: grid;
    align-items: center;
    height: 100% !important;
    padding: 0 1em !important;
    border-bottom: 0;
    border-right: 1px solid var(--green);
    color: #005f99;
    text-align: center;
}

.checkpoint .washlet_ttl_m:before,
.checkpoint .washlet_ttl_m:after {
    content: "";
    position: absolute;
    border: 7px solid transparent;
    border-left: 10px solid  var(--green);
    top: 50%;
    left: 100%;
    transform: translate(0, -50%);
}

.checkpoint .washlet_ttl_m:after {
    border-left-color: #effbff;
    left: calc(100% - 1px);
}

.checkpoint .washlet_ttl_m > span:before {
    content: "";
    display: block;
    position: absolute;
    /* background: url(/images/toilet/washlet/comparison/ico_point.svg) no-repeat 0 0; */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23005f99'%3E%3Cpath d='M480-122.31q-24.08 0-42.58-12.69-18.5-12.7-25.88-33.31H400q-24.54 0-42.27-17.73Q340-203.77 340-228.31v-131.23q-60.54-36.69-95.27-98.38Q210-519.62 210-590q0-112.92 78.54-191.46T480-860q112.92 0 191.46 78.54T750-590q0 71.61-34.73 132.69T620-359.54v131.23q0 24.54-17.73 42.27-17.73 17.73-42.27 17.73h-11.54q-7.38 20.61-25.88 33.31-18.5 12.69-42.58 12.69Zm-80-106h160v-37.54H400v37.54Zm0-72.92h160V-340H400v38.77ZM392-400h64.15v-116.46l-85.69-85.69L404-635.69l76 76 76-76 33.54 33.54-85.69 85.69V-400H568q54-26 88-76.5T690-590q0-88-61-149t-149-61q-88 0-149 61t-61 149q0 63 34 113.5t88 76.5Zm88-159.69Zm0-40.31Z'/%3E%3C/svg%3E");

    left: .9em;
    top: 1.05em;
    width: 1.8em;
    height: 1.8em;
    opacity: .65;
    line-height: 1;
    background-size: 100% auto;
    transform: rotate(-20deg) translateY(-50%);
  }

.checkpoint ul {
  flex: 1;
  gap: 1em;
}

.checkpoint ul li {
    display: flex;
    flex-direction: column;
    background: #def0ff;
    border-radius: .3em;
    padding: .5em 1em;
    min-height: 4.5em;
    font-weight: bold;
    background: #fff;
    border: 1px solid #65aaec;
    text-align: center;
}

.checkpoint ul li .ico {
  display: block;
  font-size: .8em;
  flex: 0 0 auto;
  color: #005f99;
}

.checkpoint ul li .itm {
  display: grid;
  align-items: center;
  flex: 1;
}
@media print, screen and (max-width: 767px) {
  .checkpoint {
    gap: 1.5em;
  }
  .checkpoint .washlet_ttl_m {
    margin: 0 auto;
    padding-inline: 1.6em 0 !important;
    width: fit-content;
  }
  .checkpoint .washlet_ttl_m:before,
  .checkpoint .washlet_ttl_m:after {
    display: none;
  }

  .checkpoint .washlet_ttl_m br {
    display: none;
  }

  .checkpoint .washlet_ttl_m > span:before {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* メーカー別おすすめ商品 */
.washlet_osusume-wrap {
  gap: 1.5em;
  padding-inline: 1em;
}

.washlet_osusume-box {
  padding: 1.5em 1em;
  border-bottom: 1px solid #ddd;
}

.washlet_osusume-box:last-child {
  border-bottom: 0;
}

.washlet_osusume-box .washlet_ttl_m {
  border: 0;
  margin: 0 0 1.25em;
}

.washlet_osusume-box .img img {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 150px;
  object-fit: contain;
}

.washlet_osusume-box .txt {
  display: grid;
  gap: 1.5em;
  grid-template-rows: min-content auto;
  align-content: center;
}

.washlet_osusume-box .txt .hd {
  font-size: .85em;
}

.washlet_osusume-box .txt .price .num {
    color: #ff0068;
    font-size: 1.5em;
  font-weight: bold;
}

.washlet_osusume-box .txt .btn_more {
  margin: 0 auto;
  min-width: 180px;
  color: #fff;
  align-self: center;
}

.washlet_osusume-box .btn_more:after {
    content: "";
    display: block;
    position: absolute;
    right: .5em;
    top: 50%;
    width: .35em;
    height: .35em;
    border-right: 2px solid var(--green);
    border-top: 2px solid var(--green);
    transform: rotate(45deg) translateY(-50%);
    opacity: .5;
}

.washlet_osusume-box ul li a > span {
  display: inline-block;
}

@media print, screen and (min-width: 768px) {
  .washlet_osusume-box .txt {
    grid-template-columns: 1fr auto;
  }

  .washlet_osusume-box .txt > p {
    grid-column: span 2;
  }

  .washlet_osusume-box .img {
      min-width: 200px;
      box-sizing: border-box;
  }

  .washlet_osusume-box .img img {
      width: min(200px, 100%);
      height: auto;
  }
}

@media screen and (max-width: 767px) {
  .washlet_osusume-box {
    padding-inline: 0;
  }
  
  .washlet_osusume-box .washlet_ttl_m {
    text-align: center;
  }

  .washlet_osusume-box ul {
    padding-inline: 1em;
  }

  .price-wrap {
      text-align:center;
  }
}

/* ウォシュレット交換の流れ */
.washlet_04_wrap {
  margin-block: 2em 3em;
  gap: 1em;
}

.washlet_04_box {
  position: relative;
  border: 1px solid #ddd;
}

.washlet_04_box:not(:last-child):before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  border: 12px solid transparent;
  border-left: 12px solid var(--green);
  transform: translate(100%, -50%);
  z-index: 1;
}

.washlet_04_box .washlet_04_ttl {
  text-align: center;
  padding: .5em;
  font-weight: bold;
  background: var(--bg--blue);
}

.washlet_04_ttl .num {
    display: block;
    position: absolute;
    color: var(--blue);
    font-size: 1.8em;
    line-height: 1;
    top: 4px;
    opacity: .5;
    left: .5em;
}

.washlet_04_box .img img {
  display: block;
  margin: 1em auto;
}

.washlet_04_box .txt {
  padding: 0 1em 1em;
  font-size: .925em;
}
@media print, screen and (min-width: 768px) {
  .washlet_04_box {
    width: calc(calc(100% - 3em) / 4);
  }
}

@media print, screen and (max-width: 767px) {
  .washlet_04_wrap {
    gap: 2em;
  }
   .washlet_04_box:not(:last-child):before {
    left: 50%;
    top: 100%;
    transform: translate(-50%, 10px);
    border-left-color: transparent;
    border-top-color: var(--green);
    width: 0;
    height: 0;
   }

   .washlet_04_box .washlet_04_ttl {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: .5em;
  }

  .washlet_04_box .washlet_04_ttl .num {
    position: relative;
    top: -.1em;
    left: 0;
  }
}

/* 5. 便器も交換 */
.washlet_05_example {
  width: 98%;
  margin: 2em auto 0;
  border: 1px solid #bde6e9;
}

.washlet_05_example .washlet_ttl_m {
  background: #d6f4f7;
  color: #096b74;
  padding: .5em 1em;
  margin: 0;
  font-size: 1.25em;
  text-align: center;
}

.washlet_05_example .washlet_ttl_s {
  border-bottom: 3px solid #a9dde7 !important;
  padding-bottom: .15em !important;
  width: fit-content;
  height: auto;
  margin-inline: auto;
}

.washlet_05_wrap {
  gap: 0;
}

.washlet_05_box {
    padding: 1.5em;
}

.washlet_05_box:first-child {
    border-right: 1px solid #bde6e9;
}

.washlet_05_box img {
  display: block;
  margin: 1em auto;
  height: 240px;
  object-fit: contain;
}

.washlet_05_box .washlet_ttl_s {
  border: 0 !important;
  font-size: 1.15em;
  margin: 0 auto 1em;
  padding-bottom: .15em !important;
  text-align: center;
  width: fit-content;
  border-bottom: 3px solid #97d4e5 !important;
  height: auto;
}

.washlet_05_box .washlet_05_info {
    position: relative;
    text-align: center;
}

.washlet_05_box .item_name {
    margin-top: 1.5em;
    font-weight: bold;
}

.washlet_05_box .maker_price {
    font-size: .9em;
    margin-top: 1em;
}

.washlet_05_box .price {
  text-align: center;
  margin: .35em auto;
  font-size: 1.2em;
  line-height: 1;
}

.washlet_05_box .price .tax {
  font-size: .85em;
  color: #333;
}

.washlet_05_box .price .num {
  color: #ff0068;
  font-weight: bold;
  font-size: 1.6em;
}

.washlet_05_box .price_s .price_s_num {
    font-size: 1.3em;
    font-weight: bold;
    color: #ff0068;
}

.washlet_05_box .off {
    display: block;
    position: absolute;
    display: grid;
    place-items: center;
    width: 5em;
    height: 5em;
    line-height: 1.5;
    right: 0;
    top: 3em;
    background: linear-gradient(45deg, #ff7600 0%, #ffba00 100%);
    color: #fff;
    border-radius: 50%;
}

.washlet_05_box .off .num {
    font-size: 1.85em;
    font-weight: bold;
    display: block;
    line-height: 1;
    text-align: center;
}


/* 6. 施工事例 */
.new-article-list {
  margin: 2em auto 0;
}

.new-article-list > li {
  border: 1px solid #ddd;
  padding: .75em;
}

.new-article-list > li a {
  color: inherit !important;
  text-decoration: none !important;
}

.new-article-list > li .new-article-info dt img {
    display: block;
    padding: 0;
    margin: 0 auto 1em;
}

@media print, screen and (min-width: 768px) {
  .new-article-list {
    gap: 1em;
  }

  .new-article-list > li {
    width: calc(calc(100% - 3em) / 4);
  }
}