/* mv --------------------------------------- */
.mv {
  padding: 5rem 0 3.5rem;
  background: var(--color-bage);
}
.mv .swiper {
  overflow: visible;
}
.mv .swiper-pagination-mv {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.mv .swiper-pagination-bullet {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 0.6rem;
  background: var(--color-black);
}
.mv .swiper-slide {
  position: relative;
  overflow: hidden;
  width: 116rem;
  height: 54rem;
  border-radius: 1rem;
  margin: 0 -4rem;
  transition: .5s;
}
.mv .swiper-slide:not(.swiper-slide-active) {
  transform: scale(0.815);
}
.mv .swiper-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv .swiper-controll {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128.2rem;
  justify-content: space-between;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.mv .swiper-button {
  background: var(--color-white);
  border: none;
  width: 8.7rem;
  height: 8.7rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
  pointer-events: auto;
}
.mv .swiper-button::before {
  width: 2rem;
  height: 1.4rem;
}
@media screen and (max-width: 767px) {
  .mv {
    padding: 3rem 0 2rem;
  }
  .mv .swiper-slide {
    width: 31.5rem;
    height: 41.5rem;
    margin: 0 -1rem;
  }
  .mv .swiper-pagination-mv {
    margin-top: 2rem;
  }
  .mv .swiper-pagination-bullet {
    width: 0.6rem;
    height: 0.6rem;
    margin: 0 0.2rem;
  }
}

/* leadWrap --------------------------------------- */
.leadWrap {
  padding: 7rem 0 7.8rem;
}
.leadWrap .links {
  display: flex;
  gap: 3rem;
}
.leadWrap .news {
  position: relative;
  display: flex;
  gap: 7.7rem;
  align-items: center;
  margin-top: 5rem;
  background: #F6F6F6;
  border-radius: 1rem;
  padding: 0 22rem 0 6rem;
}
.leadWrap .news .ttl_h2 {
  font-size: 2.2rem;
}
.leadWrap .news_card {
  display: block;
  padding: 4rem 0;
}
.leadWrap .news_card::after {
  content: none;
}
.leadWrap .news_card time {
  display: block;
  margin-bottom: 1.3rem;
}
.leadWrap .more {
  position: absolute;
  right: 5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
}
.leadWrap .more::after {
  content: none;
}
@media screen and (max-width: 767px) {
  .leadWrap {
    padding: 4rem 0 6rem;
  }
  .leadWrap .links {
    gap: 1rem;
    flex-wrap: wrap;
  }
  .leadWrap .news {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.9rem 3rem 3.8rem;
    margin-top: 4rem;
    gap: 2.2rem;
  }
  .leadWrap .news .ttl_h2 {
    font-size: 1.6rem;
  }
  .leadWrap .news_card {
    padding: 0;
    width: 100%
  }
  .leadWrap .news_card p {
    max-width: none;
  }
  .leadWrap .news_card::after {
    content: none;
  }
  .leadWrap .more {
    position: static;
    font-size: 1.2rem;
    transform: unset;
  }
}



/* product --------------------------------------- */
.product {
  background: url(../img/waterheater/top/product_bg.jpg) center/cover no-repeat;
}
.product .flex {
  display: flex;
  align-items: center;
  margin-bottom: 4.7rem;
  justify-content: space-between;
  padding-right: 15.2rem;
}
.product .flex .df_ttl {
  margin-bottom: 0;
}
.product .maker_list {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.product .maker_list li {
  font-size: 1.4rem;
  font-family: var(--font-en);
  font-weight: var(--medium);
  padding: 1.2rem 1.9rem;
  border: 1px solid rgb(0 0 0 / 0.1);
  border-radius: 5rem;
  line-height: 1;
  background: var(--color-white);
  letter-spacing: 0.04em;
  transition: .3s;
  cursor: pointer;
}
.product .maker_list li.current {
  background: #333333;
  color: var(--color-white);
}
.product .product_slide {
  position: absolute;
  transition: 0.3s;
  opacity: 0;
  z-index: -1;
}
.product .product_slide.is-first,
.product .product_slide.is-show {
  position: static;
  display: block;
  transform: scale(1);
  opacity: 1;
  transition: 0.5s;
}
@media screen and (min-width: 768px) {
  .product .maker_list li:hover {
    opacity: 0.68;
  }
}
@media screen and (max-width: 767px) {
  .product {
    background-position: center left;
  }
  .product .flex {
    display: block;
    padding: 0;
    margin: 0;
  }
  .product .flex .df_ttl {
    margin-bottom: 2.2rem;
  }
  .product .maker_list {
    flex-wrap: nowrap;
    overflow-x: scroll;
    gap: 0.6rem;
    margin: 0 -2rem 3rem;
    padding: 0 2rem;
  }
  .product .maker_list::-webkit-scrollbar {
    display: none;
  }
  .product .maker_list a {
    font-size: 1rem;
    padding: 1rem 1.5rem;
    min-width: max-content;
  }
  .product .maker_list li {
    min-width: max-content;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    min-width: max-content;
  }
}



/* ranking --------------------------------------- */
.ranking {
  background: var(--color-lght-green);
}



/* choice --------------------------------------- */
.choice {
  background: url(../img/waterheater/top/choice_bg.jpg) center/cover no-repeat;
}
.choice .in {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6rem 3rem;
}
.choice .block {
  width: calc(50% - 1.5rem);
  background: var(--color-white);
  border-radius: 1rem;
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.1);
  padding: 5rem 5rem 4rem;
}
.choice .block .buttons {
  margin-top: 3rem;
}
.choice .block:nth-of-type(2) .icon_h2 img {
  width: 2.7rem;
}
@media screen and (max-width: 767px) {
  .choice .in {
    gap: 2rem;
  }
  .choice .block {
    width: 100%;
    padding: 3.6rem 3rem 4rem;
  }
  .choice .block .buttons {
    margin-top: 2.6rem;
  }
  .choice .block .button2 {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    height: 6.4rem;
  }
  .choice .block:nth-of-type(2) .icon_h2 img {
    width: 2rem;
  }
}



/* campaign --------------------------------------- */
.campaign {
  background: linear-gradient(180deg, #fff 0%, #fff 36rem, #E8F8F4 36rem, #E8F8F4 100%);
}
@media screen and (max-width: 767px) {
  .campaign {
    padding: 6rem 0 4rem;
    background: linear-gradient(180deg, #fff 0%, #fff 22.4rem, #E8F8F4 22.4rem, #E8F8F4 100%);
  }
}



/* helpful --------------------------------------- */
.helpful {
  background: var(--color-bage);
}
.helpful .links {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.helpful .links .button3 {
  width: calc(33.33% - (3rem * 2 / 3));
}
@media screen and (max-width: 767px) {
  .helpful {
    padding: 7rem 0;
  }
  .helpful .links {
    gap: 1rem;
  }
  .helpful .links .button3 {
    width: 100%;
  }
}



/* start --------------------------------------- */
.start {
  padding: 1.5rem 0 0;
  background: var(--color-bage);
}
.start .links {
  display: flex;
  gap: 1px;
}
.start .links .item {
  width: 33.33%;
}
.start .links .item a {
  position: relative;
  overflow: hidden;
  display: block;
  height: 53.3rem;
}
.start .links .item a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.start .links .item dl {
  position: absolute;
  z-index: 2;
  left: 3rem;
  bottom: 3.9rem;
  width: 30rem;
  color: var(--color-white);
}
.start .links .item dt {
  font-size: 2.4rem;
  font-weight: var(--medium);
}
.start .links .item dd {
  margin-top: 2.1rem;
  font-size: 1.5rem;
  font-weight: var(--regular);
}
.start .links .item a::before {
  position: absolute;
  right: 3rem;
  bottom: 4rem;
  content: "";
  display: block;
  width: 5.3rem;
  height: 5.3rem;
  border-radius: 100%;
  border: 1px solid var(--color-white);
  background: url(../img/common/icon_arrow.svg) center/1.3rem auto no-repeat;
  z-index: 2;
}
.start .links .item a::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 26.7rem;
  background: linear-gradient(180deg,rgba(37, 184, 171, 0) 0%, rgba(37, 184, 171, 1) 100%);
}
@media screen and (max-width: 767px) {
  .start .links {
    flex-wrap: wrap;
  }
  .start .links .item {
    width: 100%;
  }
  .start .links .item a {
    height: 37.5rem;
  }
  .start .links .item a::after {
    height: 18.7rem
  }
  .start .links .item dl {
    left: 2rem;
    bottom: 2.8rem;
    width: 26rem;
  }
  .start .links .item dt {
    font-size: 1.7rem;
  }
  .start .links .item dd {
    margin-top: 1.5rem;
    font-size: 1.2rem;
  }
  .start .links .item a::before {
    right: 2rem;
    bottom: 2.4rem;
    width: 4.5rem;
    height: 4.5rem;
  }
}



/* column --------------------------------------- */
@media screen and (max-width: 767px) {
  .column {
    padding: 7rem 0 8rem;
  }
}



/* case --------------------------------------- */
.case {
  position: relative;
  padding-top: 128px;
}
.case::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 45.3rem;
  background: url(../img/waterheater/top/case_bg.jpg) center/cover no-repeat;
}
.case .in {
  position: relative;
  z-index: 2;
}
.case .button {
  margin: 5rem auto 0;
}
@media screen and (max-width: 767px) {
  .case {
    padding: 6rem 0 0;
  }
  .case::before {
    height: 25.6rem;
    background-image: url(../img/waterheater/top/case_bg_sp.jpg);
  }
}



/* voice --------------------------------------- */
.voice {
  padding: 25.6rem 0 14rem;
  margin-top: -25.5rem;
  background: var(--color-glay);
}
@media screen and (max-width: 767px) {
  .voice {
    padding: 19.7rem 0 8rem;
    margin-top: -14.5rem;
  }
  .voice .df_ttl {
    margin-bottom: 4.8rem;
  }
}





/* news --------------------------------------- */
section.news .in {
  display: flex;
  justify-content: space-between;
}
section.news .right {
  width: 104.2rem;
}
section.news .more {
  margin-top: 5.9rem;
}
@media screen and (min-width: 768px) {
  section.news .buttons {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  section.news {
    padding: 6rem 0 7rem;
  }
  section.news .in {
    display: block;
  }
  section.news .right {
    width: 100%;
  }
  section.news .more {
    display: none;
  }
}



/* reform --------------------------------------- */
.reform {
  padding-top: 0;
}
.reform .box_links {
  display: flex;
  flex-wrap: wrap;
}
.reform .box_links li {
  width: 20%;
  border-bottom: 1px solid rgb(0 0 0 / 0.1);
}
.reform .box_links li a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2.5rem;
  height: 24.3rem;
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  font-weight: var(--medium);
}
.reform .box_links li a img {
  width: 7rem;
}
@media screen and (min-width: 768px) {
  .reform .box_links li:nth-of-type(-n + 5) {
    border-top: 1px solid rgb(0 0 0 / 0.1);
  }
  .reform .box_links li:not(:first-of-type,:nth-of-type(6n)) {
    border-left: 1px solid rgb(0 0 0 / 0.1);
  }
  .reform .box_links li a:hover {
    background: var(--color-green);
    color: var(--color-white);
    opacity: 1;
  }
  .reform .box_links li a:hover img {
    filter: brightness(100);
  }
  .reform .box_links li a {
    position: relative;
  }
  .reform .box_links li a::after {
    position: absolute;
    content: "more";
    font-size: 1.2rem;
    font-weight: var(--bold);
    bottom: 2.3rem;
    padding-right: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    background: url(../img/common/more_arrow.png) center right/0.45rem auto no-repeat;
  }
  .reform .box_links li a:hover::after {
    background-image: url(../img/common/more_arrow_wh.png);
  }
}
@media screen and (max-width: 767px) {
  .reform {
    padding-bottom: 8rem;
  }
  .reform .box_links li {
    width: 50%;
  }
  .reform .box_links li a {
    font-size: 1.3rem;
    flex-direction: row;
    gap: 1.4rem;
    justify-content: flex-start;
    height: 6.2rem;
    padding: 1.5rem;
  }
  .reform .box_links li a img {
    width: 3.3rem;
  }
  .reform .box_links li:nth-of-type(-n + 2) {
    border-top: 1px solid rgb(0 0 0 / 0.1);
  }
  .reform .box_links li:nth-of-type(2n) {
    border-left: 1px solid rgb(0 0 0 / 0.1);
  }
}