.koukan {
  :where(figure) {
    margin: 0;
  }
  .is_pc {
    display: block;
  }
  .is_sp {
    display: none;
  }
  sup {
    font-size: 0.8em;
    vertical-align: top;
  }

  @media (max-width: 767px) {
    .is_pc {
      display: none;
    }
    .is_sp {
      display: block;
    }
  }
}

/* =====================================================================
トイレ交換の流れ
===================================================================== */
.koukan h2 {
  padding-top: 120px;
}
.koukan .block01 h2 {
  padding-top: initial;
}
main.koukan ul.list li::before {
  bottom: initial;
}

@media (max-width: 767px) {
  .koukan h2 {
    padding-top: 80px;
  }
  .koukan .block01 h2 {
    padding-top: initial;
  }
}

/* .block02 */
.koukan .block02 .block02__read {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 928px;
  margin: 0 auto;
}
.koukan .block02 .block02__read picture {
  max-width: 272px;
  margin: 0;
}
main.koukan .block02 ul.list li + li {
  margin-top: 8px;
}
.koukan .block02__cont {
  padding-top: 40px;
}
.koukan .block02__ttl {
  background: var(--Blue-BL4, #f0f6fb);
  padding: 12px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  align-items: center;
}
.koukan .block02__ttl.is_first {
  margin-bottom: 34px;
}
.koukan .block02__ttl_inner {
  display: flex;
  gap: 12px;
}
.koukan .block02__ttl--num {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--Blue-BL1, #0068b7);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
main.koukan .block02__ttl h4 {
  margin: 0;
}
.koukan .block02__ttl--optionBox {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--Black-BK2, #808080);
  background: #fff;
  padding: 4px;
  line-height: 1;
  height: fit-content;
  white-space: nowrap;
  vertical-align: middle;
}
.koukan .block02__num04 {
  display: flex;
  gap: 8px;
  align-items: center;
}
.koukan .block02__num04--ttl {
  display: flex;
  gap: 8px;
  align-items: center;
}
.koukan .block02__ttl--time {
  font-size: 13px;
  margin-left: auto;
  color: var(--Blue-BL1, #0068b7);
  position: relative;
}
.block02__ttl--time::before {
  position: absolute;
  content: '';
  width: 18px;
  height: 18px;
  top: 50%;
  transform: translateY(-46%);
  left: -22px;
  background: url('../../img/kan/toilet-installation-flow/icon_time.png') no-repeat center / contain;
}
.koukan .block02__detail {
  display: flex;
  flex-direction: row-reverse;
  gap: 24px;
}
.koukan .block02__detail figure {
  max-width: 335px;
}
.koukan .block02__detail--txt {
  width: 761px;
}
main.koukan .block02__detail p:not(:last-child) {
  margin-bottom: 20px;
}
main.koukan .block02__detail p span {
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 767px) {
  .koukan .block02 .block02__read {
    gap: 0;
    flex-direction: column;
  }
  .koukan .block02 .block02__read picture {
    max-width: 259px;
  }
  main.koukan .block02 .block02__read ul.list li + li {
    margin-top: 12px;
  }
  .koukan .block02__read--ttl {
    font-weight: 700;
    margin-bottom: 8px;
  }
  .koukan .block02__cont {
    margin-top: 24px;
    padding-top: 0;
  }
  .koukan .block02__ttl {
    margin-bottom: 12px;
    align-items: center;
  }
  .koukan .block02__ttl.is_first {
    margin-bottom: 12px;
  }
  .koukan .block02__ttl_inner {
    align-items: center;
  }
  .koukan .block02__num04 {
    flex-direction: column;
    gap: 0;
  }
  .block02__ttl--time::before {
    left: -20px;
  }
  .koukan .block02__detail {
    flex-direction: column;
    gap: 12px;
  }
  .koukan .block02__detail--txt {
    width: 100%;
  }
}
/* //.block02 */

/* .block03 */
.koukan .block03 h4 {
  margin-bottom: 14px;
}
.koukan .block03 p.block03__readTxt {
  font-size: 13px;
}
@media (min-width: 1024px) {
  .koukan .block03 p.block03__readTxt {
    font-size: 13px;
  }
}
.koukan .block03 h5 {
  margin: 24px 0 18px;
}
.koukan .block03__box {
  display: flex;
  gap: 24px;
}
.koukan .block03__box > li {
  width: calc(100% / 3);
  display: flex;
  padding: 16px 12px 16px 24px;
  flex-direction: column;
  flex: 1 0 0;
  border-radius: 4px;
  border-left: 4px solid var(--Blue-BL1, #0068b7);
  background: var(--Black-BK4, #f5f5f5);
  position: relative;
}
.koukan .block03__box > li:not(:last-child)::after {
  position: absolute;
  content: '';
}
@media (min-width: 768px) {
  .block03__box > li:not(:last-child)::after {
    width: 8px;
    height: 16px;
    top: 50%;
    transform: translateY(-50%);
    right: -17px;
    background: url('../../img/kan/toilet-installation-flow/sched_arrow.png') no-repeat center / contain;
  }
}
main.koukan .block03 ul.list {
  margin: 8px 0 0;
}
main.koukan .block03 ul.list li + li {
  margin-top: 5px;
}
.koukan .block03__box--ttl {
  color: var(--Blue-BL1, #0068b7);
  font-feature-settings: 'pkna' on;
  font-weight: 700;
}
.koukan .block03__voice {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--Black-BK3, #d9d9d9);
  margin-bottom: 40px;
}
.koukan .block03__voice.is_last {
  border-bottom: none;
  margin-bottom: 0;
}
.koukan .block03__voice figure {
  max-width: 48px;
}
.koukan .block03__voice p {
  margin: 0;
}
.koukan .block03__btn {
  display: flex;
  gap: 20px;
  justify-content: center;
  text-align: center;
}
.koukan .block03__btn .btn a {
  width: 315px;
}

@media (max-width: 767px) {
  .koukan .block03 h2 {
    margin-bottom: 36px;
  }
  .koukan .block03 h4 {
    font-size: 20px;
    margin-bottom: 12px;
  }
  .koukan .block03 p.block03__readTxt {
    font-size: 15px;
  }
  .koukan .block03 h5 {
    margin: 20px 0 12px;
  }
  .koukan .block03__box {
    flex-direction: column;
    gap: 16px;
  }
  .koukan .block03__box--ttl {
    min-width: 76px;
  }
  .koukan .block03__box > li {
    width: 100%;
    padding: 12px 16px;
    flex-direction: row;
    align-items: center;
  }
  .block03__box > li:not(:last-child)::after {
    width: 16px;
    height: 8px;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: url('../../img/kan/toilet-installation-flow/sched_arrow_sp.png') no-repeat center / contain;
  }
  main.koukan .block03 ul.list {
    margin: 0;
  }
  .koukan .block03__voice.is_last {
    padding-bottom: 36px;
  }
  .koukan .block03__btn {
    gap: 24px;
    flex-direction: column;
  }
}
/* //.block03 */

/* block06 */
.koukan .block06 ul {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  max-width: 1056px;
  margin: 0 auto;
}
.koukan .block06 li {
  max-width: 310px;
  text-align: center;
}
.koukan .block06 li figure {
  max-width: 260px;
  margin: 0 auto 24px;
}
.koukan .block06 li h3 {
  font-size: clamp(17px, 2.2vw, 22px);
}
.koukan .block06 li p {
  height: 54px;
  font-size: clamp(10px, 1.3vw, 13px);
}
.koukan .block06__btn {
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top: 24px;
}
.koukan .block06__btn .btn a {
  width: 270px;
}
@media (max-width: 890px) {
  .koukan .block06__btn .btn a {
    width: 250px;
  }
}
@media (max-width: 860px) {
  .koukan .block06__btn .btn a {
    width: 220px;
  }
}

@media (max-width: 767px) {
  .koukan .block06 ul {
    flex-direction: column;
    gap: 36px;
  }
  .koukan .block06 li {
    max-width: 100%;
  }
  .koukan .block06 li figure {
    max-width: 220px;
    margin: 0 auto 16px;
  }
  .koukan .block06 li h3 {
    font-size: 20px;
  }
  .koukan .block06 li p {
    height: initial;
    font-size: 13px;
    text-align: left;
  }
  .koukan .block06__btn {
    margin-top: 16px;
  }
  .koukan .block06__btn .btn a {
    width: 315px;
  }
}
/* //block06 */