/*------------------------------------------
  First View
------------------------------------------*/
.top-first-view {
  width: 100%;
  height: 740px;
  background: url(../images/index/fv@2x.jpg) no-repeat center / cover;
  position: relative;
}

.wall .top-first-view {
  background: url(../images/index/fv-wall.png) no-repeat center / cover;
}

.wallpaper .top-first-view {
  background: url(../images/index/fv-wallpaper.png) no-repeat center / cover;
}

.bathroom .top-first-view {
  background: url(../images/index/fv-bathroom.png) no-repeat center / cover;
}

.barrier-free .top-first-view {
  background: url(../images/index/fv-barrier-free.png) no-repeat center / cover;
}

.top-first-view .sp {
  display: none;
}

.top-first-view .bnr {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 35.313%;
}

@media only screen and (max-width: 1280px) {
  .top-first-view .bnr {
    width: 50%;
  }

  .top-first-view {
    height: 57.8vw;
    background: url(../images/index/fv.png) no-repeat -20.8vw center / cover;
    margin-top: 0;
  }

  .wallpaper .top-first-view {
    height: 57.8vw;
    background: url(../images/index/fv-wallpaper.png) no-repeat -27.5vw center / cover;
  }

  .wall .top-first-view {
    height: 57.8vw;
    background: url(../images/index/fv-wall.png) no-repeat -27.5vw center / cover;
  }

  .bathroom .top-first-view {
    height: 50.3vw;
    background: url(../images/index/fv-bathroom.png) no-repeat -23.5vw center / cover;
  }

  .barrier-free .top-first-view {
    height: 57.8vw;
    background: url(../images/index/fv-barrier-free.png) no-repeat -27.5vw center / cover;
  }
}

@media only screen and (max-width: 767px) {
  .top-first-view {
    height: auto !important;
    background: none;
  }

  .top-first-view .sp {
    display: block;
    width: 100%;
  }

  .top-first-view .pc {
    display: none;
  }

  .top-first-view .bnr {
    position: static;
    width: 98%;
    text-align: center;
    margin: -3rem auto 0;
  }
}

/*------------------------------------------
  Main Content
------------------------------------------*/
/* Step */
.top-step {
  background: url(../images/index/top_step_bg.png) no-repeat center / cover;
}

@media only screen and (max-width: 767px) {
  .top-step {
    background: url(../images/index/top_step_bg-sp.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}

/* Voice */
.top-voice {
  background: var(--c-other05);
  text-align: center;
  padding: 10rem 0;
  position: relative;
}

.top-voice .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem 0;
}

.top-voice .title {
  font-size: 38px;
  font-weight: var(--fw-bold);
  display: inline-block;
  position: relative;
}

.top-voice .title .en {
  color: var(--c-other01);
  font-size: 22px;
  font-weight: var(--fw-bold);
  position: absolute;
  left: -35px;
  top: -20px;
  transform: rotate(-28deg);
}

.top-voice .sub-title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  position: relative;
  display: inline-block;
  position: relative;
}

.top-voice .sub-title:before {
  content: "";
  width: 589px;
  height: 74px;
  display: block;
  background: url(../images/index/top_voice_subtitle_bg.png) no-repeat center / cover;
  position: absolute;
  left: -10px;
  bottom: -10px;
}

.top-voice .sub-title:after {
  content: "";
  width: 190px;
  height: 187px;
  display: block;
  background: url(../images/index/top_voice_point.png) no-repeat center / cover;
  position: absolute;
  bottom: -30px;
  right: -195px;
}

.top-voice .cm-voice-list {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
}

.top-voice .cm-button-round {
  width: 100%;
}

.top-voice .cm-button-round a {
  margin: auto;
}

@media only screen and (max-width: 1280px) {
  .top-voice .sub-title:after {
    bottom: 30px;
    right: -90px;
  }
}

@media only screen and (max-width: 767px) {
  .top-voice {
    padding: 5rem 0 0;
  }

  .top-voice .inner {
    padding-bottom: 3rem;
  }

  .top-voice .title {
    font-size: 24px;
  }

  .top-voice .title .en {
    font-size: 18px;
  }

  .top-voice .sub-title {
    width: 100%;
    text-align: left;
    font-size: 18px;
    padding-left: 1rem;
    margin-top: 1rem;
  }

  .top-voice .sub-title:before {
    content: "";
    width: 100%;
    height: 107px;
    display: block;
    background: url(../images/index/top_voice_subtitle_bg_sp.png) no-repeat center left / contain;
    position: absolute;
    left: 0;
    bottom: -15px;
  }

  .top-voice .sub-title:after {
    width: 120px;
    height: 120px;
    bottom: -65px;
    right: -5px;
  }

  .top-voice .bottom-img {
    position: static;
    width: 100%;
    margin-top: 2rem;
  }
}