@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: #3579f0;
    /* --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;
    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: -2em auto 2em;
  }

  .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_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;
}

@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;
}

.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;
  }
}

/* TOTOウォシュレットSS機種の案内 */
#sec01 .washlet_article {
	padding: 1em 1.5em 2em;
	border-bottom: 1px dotted var(--blue);
}

#sec01 .washlet_article:first-of-type {
  padding-top: 0;
}

#sec01 .washlet_ttl_s {
  display: flex;
  align-items: flex-start;
  gap: .25em;
  margin: 0 0 .5em;
  padding: .5em 0;
  align-items: center;
  color: var(--blue);
  font-size: 1.5em;
  /* border-bottom: 1px dotted var(--blue); */
}

#sec01 .washlet_ttl_s span.hd {
    font-size: .7em;
    color: #000;
}

#sec01 .washlet_ttl_s:before {
  display: none;
}

#sec01 .washlet_01_img{
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print, screen and (min-width: 768px) {
  #sec01 .washlet_flex {
    justify-content: space-around;
  }

  #sec01 .washlet_01_img {
    flex: 0 1 46%;
  }

  #sec01 .washlet_01_info {
    flex: 0 1 47%;
  }
}

@media print, screen and (max-width: 767px) {
   #sec01 .washlet_article {
    padding-inline: .75em;
   }
}

#sec01 .washlet_01_price {
  display: grid;
  gap: .6em .8em;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}

#sec01 .washlet_01_price p {
  grid-column: span 2;
  font-size: .85em;
}

#sec01 .washlet_01_price .price_s {
  font-size: 1.1em;
  margin-inline: .25em;
  font-weight: bold;
}

#sec01 .washlet_01_price .price {
  color: #dd0000;
}

#sec01 .washlet_01_price .price_hd {
  display: grid;
  place-items: center;
  background: var(--bg--blue--dark);
  padding: .25em .75em .25em;
  line-height: 1.2;
  width: fit-content;
  font-size: .85em;
}

#sec01 .washlet_01_price .price .num {
  font-size: 1.6em;
  font-weight: bold;
  display: inline-block;
  margin-right: .17em;
  line-height: 1;
}

#sec01 .washlet_01_no {
  margin: 1em auto;
  font-size: 1.1em;
  font-weight: bold;;
}

#sec01 .washlet_01_info .features {
  margin: 1.2em auto 0;
}

#sec01 .washlet_01_ttl_s {
  position: relative;
  height: auto;
  margin: 0 0 .8em;
  padding-bottom: 0;
  padding-left: 1.35em;
  font-size: 1em;
  font-weight: 500;
  border: 0;
}

#sec01 .washlet_01_ttl_s:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--blue);
  transform: translateY(-50%);
  opacity: .7;
}

#sec01 .washlet_01_ttl_s:after {
content: "";
  display: block;
  position: absolute;
  left: .2em;
  top: calc(50% - .35em);
  width: .26em;
  height: .26em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(135deg) translateY(-50%);
}

#sec01 .list_features {
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
}

#sec01 .list_features li {
  padding: .3em .7em;
  border-radius: 99999px;
  font-size: .8em;
  font-weight: 500;
  border: 1px solid var(--border, #999);
  color: var(--color, #666);
  background: var(--bg, #f6f6f6);
}

#sec01 .list_features li.cat01 {
  --border: #ffa050;
  --color: #df6c0e;
  --bg: #faf4ca;
}

#sec01 .list_features li.cat02 {
  --border: #77b5fe;
  --color: #0960cb;
  --bg: #f1f5ff;
}


#sec01 .list_features li.cat03 {
  --border: #a0d377;
  --color: #419000;
  --bg: #f6ffec;
}

#sec01 .list_features li.cat04 {
  --border: rgb(194, 126, 210);
  --color: #9c50af;
  --bg: #f8f3f9;
}

#sec01 .list_features li.cat05 {
  --border: #ffaac9;
  --color: #f14081;
  --bg: #FFF0FA;
}

#sec01 .btn_detail {
  position: relative;
  display: block;
  margin: 1.35em auto 0;
  padding: .7em 1em;
  text-align: center;
  text-decoration: none;
  background: var(--green);
  /* background: rgb(253, 76, 0); */
  max-width: 240px;
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
  border-radius: .4em;
  transition: opacity .3s ease-out;
}

#sec01 .btn_detail:before {
  content: "";
  display: block;
  position: absolute;
  right: 1em;
  top: 50%;
  width: .4em;
  height: .4em;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translateY(-50%);
}

#sec01 .btn_detail:hover {
  opacity: .7;
}

/* ウォシュレットSSの機能説明 */
#sec05 .box1-out .box1-in {
  margin: 0 0 1.5em;
  padding: 1em;
  border: 5px solid var(--bg--blue--dark);
}

#sec05 .box1-out .bt1 {
  margin: .25em 0 1em;
  padding: 0 0 .25em;
  font-size: 1.3em;
  line-height: 1.4;
  font-weight: bold;
  color: #3388ed;
  border-bottom: 3px dotted #b0d6ff;
  width: fit-content;
}

.box1-in .img {
    flex: 0 0 30%;
}

#sec05 .box1-out img {
  display: block;
  margin-inline: auto;
}

@media print, screen and (max-width: 767px) {
   #sec05 .box1-out .box1-in {
    flex-direction: column-reverse;
   }

   #sec05 .box1-out .bt1 {
    width: auto;
    margin-top: 0;
   }
}

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

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

.washlet_06_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_06_box .washlet_06_ttl {
  text-align: center;
  padding: .5em;
  font-weight: bold;
  background: var(--bg--blue);
}

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

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

.washlet_06_box .txt {
  padding: 0 1em 1em;
  font-size: .925em;
}

@media print, screen and (max-width: 767px) {
  .washlet_06_wrap {
    gap: 2em;
  }

   .washlet_06_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_06_box .washlet_06_ttl {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: .5em;
  }

  .washlet_06_box .washlet_06_ttl .num {
    position: relative;
    top: -.1em;
    left: 0;
  }
}