@charset "utf-8";

.mv {
  width: 100%;
  height: 82.5rem;
  background-image: url(../images/index/mv_bg.jpg);
  background-image: image-set(
    url(../images/index/mv_bg.jpg) 1x,
    url(../images/index/mv_bg@2x.jpg) 2x
  );
  background-image: -webkit-image-set(
    url(../images/index/mv_bg.jpg) 1x,
    url(../images/index/mv_bg@2x.jpg) 2x
  );
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  display: block;
}
.mv::after {
  width: 100%;
  height: 34.2rem;
  background-image: url(../images/index/bg-wave.png);
  background-image: image-set(
    url(../images/index/bg-wave.png) 1x,
    url(../images/index/bg-wave@2x.png) 2x
  );
  background-image: -webkit-image-set(
    url(../images/index/bg-wave.png) 1x,
    url(../images/index/bg-wave@2x.png) 2x
  );
  background-size: 296.8rem 34.2rem;
  background-repeat: repeat-x;
  background-position: left;
  position: absolute;
  left: 0;
  bottom: -10rem;
  display: block;
  content: "";
}
.mv_inner {
  max-width: 160rem;
  margin-inline: auto;
  height: 100%;
  padding-inline: 5rem; /*headerと同じ*/
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.mv_txt {
}
.mv_txt .m-t01 {
  font-size: 4.2rem;
  line-height: 1.4;
  color: var(--color_orange);
  text-shadow: 0px 0px 5px #fff, 0px 0px 5px #fff, 0px 0px 5px #fff,
    0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.mv_txt .m-t02,
.mv_txt .m-t02 .ls-nega {
  padding-bottom: 1rem;
  font-size: 5.6rem;
  color: #fff;
  text-shadow: 0px 0px 10px var(--color_orange-2),
    0px 0px 10px var(--color_orange-2);
  font-weight: 700;
  display: inline-block;
  position: relative;
  background: url(../images/index/mv_txt-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
}
.mv_txt .m-t02 .ls-nega {
  letter-spacing: -0.2em;
}
.mv_point {
  gap: 2rem;
}

.mv_point li {
  width: 17rem;
  height: 17rem;
  padding: 3rem 0.5rem 4rem 0.5rem;
  border-radius: 50%;
  border: none;
  font-size: 2.1rem;
  color: var(--color_brown);
  text-align: center;
  letter-spacing: 0.05em;
  font-weight: 600;
  line-height: 1.15;
  position: relative;
}
.mv_point li::before {
  width: calc(100% - 1.8rem);
  height: calc(100% - 1.8rem);
  border: 2px dashed #fff;
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 0.9rem;
  top: 0.9rem;
  content: "";
}
.mv_point li:nth-of-type(1) {
  background: url(../images/index/m-p_bg01.png) no-repeat;
  background-size: cover;
}
.mv_point li:nth-of-type(2) {
  background: url(../images/index/m-p_bg02.png) no-repeat;
  background-size: cover;
}
.mv_point li:nth-of-type(3) {
  background: url(../images/index/m-p_bg03.png) no-repeat;
  background-size: cover;
}
.mv_point li img {
  width: 4.1rem;
  height: 4.1rem;
  margin-bottom: 0.5rem;
  margin-inline: auto;
  display: block;
}
/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width: 960px) and (min-width: 600px) {
}
/*-------------SP-----------------------*/
@media screen and (max-width: 599px) {
  .mv {
    height: 100rem;
    padding-bottom: 15rem;
    margin-bottom: 5rem;
    background-position: 88%;
  }
  .mv::after {
    height: 25rem;
    background-size: 230vw 25rem;
    position: absolute;
    left: 0;
    bottom: -10rem;
    display: block;
    content: "";
  }
  .mv_inner {
    width: 100%;
    max-width: var(--base-width);
    padding-inline: 1.5vw; /*headerと同じ*/
    justify-content: flex-end;
  }

  .mv_point li {
    width: 20rem;
    height: 20rem;
    padding: 4rem 0 9rem 0;
    font-size: 2.6rem;
  }
  .mv_point li::before {
    width: calc(100% - 1.8rem);
    height: calc(100% - 1.8rem);
    border: 1px dashed #fff;
  }
  .mv_point li img {
    width: 5rem;
    height: 5rem;
  }
}

/*---------------------------------
    sec-intro
----------------------------------*/
.sec-intro {
  padding-block: 0 0;
  position: relative;
}
.sec-intro .bg_beige {
  padding-block: 0 7.5rem;
}
.sec-intro .bg_beige .intro_inner {
  position: relative;
}
.sec-intro .bg_beige .intro_inner::after {
  width: 61.8rem;
  height: 62rem;
  background-image: url(../images/bg_kabe-img.png);
  background-image: image-set(
    url(../images/bg_kabe-img.png) 1x,
    url(../images/bg_kabe-img@2x.png) 2x
  );
  background-image: -webkit-image-set(
    url(../images/bg_kabe-img.png) 1x,
    url(../images/bg_kabe-img@2x.png) 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: -10.5rem;
  right: -9rem;
  display: block;
  content: "";
  z-index: 0;
}
.sec-intro p.intro_txt {
  margin-bottom: 5.5rem;
  z-index: 1;
  position: relative;
}
.intro_img {
  width: 100%;
  z-index: 1;
  position: relative;
}

/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width: 960px) and (min-width: 600px) {
}
/*-------------SP-----------------------*/
@media screen and (max-width: 599px) {
  .sec-intro .bg_beige .intro_inner::after {
    top: -15rem;
    right: -12rem;
  }
}

/*---------------------------------
    sec-reason
----------------------------------*/
.sec-reason {
}
.sec-reason .reason_inner {
  position: relative;
  z-index: 1;
}

.reason_block {
  position: relative;
  z-index: 200;
}
.reason_block .reason_txt {
  width: 50%;
  flex: 0 0 58em;
  margin-left: 5rem;
}
.reason_block .reason_txt .sec_ttl {
  margin-bottom: 4rem;
}
.reason_block .reason_txt p {
  margin-bottom: 5rem;
}
.reason_block .reason_img {
  width: calc(100vw / 2);
  height: 48rem;
  flex: 1;
  margin-left: calc(50% - 50vw);
  display: block;
  position: relative;
}
.reason_block .reason_img img {
  height: 100%;
}
.reason_block .reason_img::before {
  width: 51rem;
  height: 33.4rem;
  background-image: url(../images/parts/gy_img-hake.png);
  background-image: image-set(
    url(../images/parts/gy_img-hake.png) 1x,
    url(../images/parts/gy_img-hake@2x.png) 2x
  );
  background-image: -webkit-image-set(
    url(../images/parts/gy_img-hake.png) 1x,
    url(../images/parts/gy_img-hake@2x.png) 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 8rem;
  top: -21.8rem;
  display: block;
  content: "";
  z-index: -1;
}
.reason_block .reason_img::after {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color_brown);
  position: absolute;
  right: -1rem;
  top: 1rem;
  z-index: 1;
  display: block;
  content: "";
}

/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width: 960px) and (min-width: 600px) {
  .reason_block {
    flex-direction: column;
    max-width: 65rem;
    margin-inline: auto;
  }
  .reason_block .reason_img {
    width: 100%;
    margin-bottom: 5rem;
    margin-left: 0;
  }
  .reason_block .reason_img::before {
    width: 60%;
    height: 33.4rem;
    right: 8rem;
    top: -18rem;
    display: block;
    content: "";
    z-index: -1;
  }
  .reason_block .reason_txt {
    width: 100%;
    flex: 0 0 auto;
    margin-left: 0;
  }
}
/*-------------SP-----------------------*/
@media screen and (max-width: 599px) {
  .sec-reason {
  }
  .reason_block {
    flex-direction: column;
  }
  .reason_block .reason_txt {
    width: 100%;
    flex: 0 0 100%;
    margin-left: 0;
  }
  .reason_block .reason_txt .sec_ttl {
  }
  .reason_block .reason_txt p {
    margin-bottom: 5rem;
  }
  .reason_block .reason_img {
    width: 100%;
    height: 41rem;
    margin-left: 0;
    margin-bottom: 5rem;
  }
  .reason_block .reason_img::before {
    width: 40rem;
    height: 29rem;
    position: absolute;
    left: unset;
    right: 0;
    top: -13.8rem;
  }
}

/*---------------------------------
    sec-service
----------------------------------*/
.sec-service {
}
.sec-service .gy_man::before {
  width: 31rem;
  height: 23rem;
  background: url(../images/index/service_gy_man.png);
  background-image: image-set(
    url(../images/index/service_gy_man.png) 1x,
    url(../images/index/service_gy_man@2x.png) 2x
  );
  background-image: -webkit-image-set(
    url(../images/index/service_gy_man.png) 1x,
    url(../images/index/service_gy_man@2x.png) 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  right: 0;
  top: -8rem;
}
.service_container {
}
.service_container .service_block {
  gap: 3rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.service_container .service_block:not(:last-of-type) {
  margin-bottom: 4rem;
}
.service_item {
  width: auto;
  max-width: 38rem;
  min-height: 28rem;
  padding: 3rem 4rem 3rem 3rem;
  border-radius: 2rem;
  background-repeat: repeat;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.service_item h3 {
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
  font-size: 2.8rem;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  letter-spacing: 0.1em;
  display: block;
  position: relative;
}
.service_item h3::after {
  width: 5.6rem;
  height: 1.8rem;
  background-image: radial-gradient(
    circle,
    #ffffff 0.35rem,
    transparent 0.35rem
  );
  background-position: 0 0;
  background-size: 1.1rem 1.7rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  display: block;
  content: "";
}
.service_item p {
  margin-bottom: 3rem;
}
/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width: 960px) and (min-width: 600px) {
}
/*-------------SP-----------------------*/
@media screen and (max-width: 599px) {
  .sec-service {
    padding-block: 7rem 21.2rem;
  }
  .sec-service .gy_man::before {
    width: 35.3rem;
    height: 26.7rem;
    right: 0;
    top: unset;
    bottom: -21.2rem;
    z-index: 2;
  }
  .service_container {
  }
  .service_container .service_block {
    flex-wrap: wrap;
    align-items: center;
  }
  .service_container .service_block:not(:last-of-type) {
    margin-bottom: 3rem;
  }
  .service_item {
    width: 100%;
    max-width: unset;
    min-width: unset;
    padding: 4rem 4rem 6rem 4rem;
  }
  .service_item h3 {
    padding-bottom: 1.5rem;
    margin-bottom: 4rem;
    font-size: clamp(20px, 4.1rem, 41px);
  }
  .service_item p {
    margin-bottom: 5rem;
  }
}

/*---------------------------------
    sec-meyasu
----------------------------------*/
.sec-meyasu {
}

.meyasu_container {
  gap: 3rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.meyasu_item {
  width: auto;
  max-width: 38rem;
  min-height: 30rem;
  padding: 2.5rem 3rem 3.2rem 3rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid var(--color_brown);
  box-shadow: 0px 0px 15px 0px rgba(107, 64, 27, 0.1);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.meyasu_img {
  margin-bottom: 0.5rem;
}
.meyasu_item:nth-of-type(1) .meyasu_img {
  width: 25rem;
  height: 21.4rem;
}
.meyasu_item:nth-of-type(2) .meyasu_img {
  width: 28rem;
  height: 21.5rem;
  object-position: right;
  font-family: "object-position: right;";
}
.meyasu_item:nth-of-type(3) .meyasu_img {
  width: 24rem;
  height: 21.5rem;
}

.meyasu_txt h3 {
  margin-block: 1.5rem 1rem;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--color_orange);
  text-align: center;
  font-weight: 500;
}
.meyasu_txt p {
}

/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width: 960px) and (min-width: 600px) {
  .-bf_paint::before {
    left: -5rem;
    top: 0;
  }
  .-af_hake::after {
    left: 5rem;
    top: -14.8rem;
  }
  .sec-service .gy_man::before {
    right: -7rem;
    top: -17rem;
  }
}
/*-------------SP-----------------------*/
@media screen and (max-width: 599px) {
  .sec-meyasu {
    padding-top: 6rem;
  }

  .meyasu_container {
    gap: 4rem;
  }
  .meyasu_item {
    width: 100%;
    max-width: unset;
    min-width: unset;
    padding: 4rem 4rem;
  }
  .meyasu_img {
    margin-bottom: 2.5rem;
  }
  .meyasu_item:nth-of-type(1) .meyasu_img {
    width: 41.7rem;
    height: 36.3rem;
  }
  .meyasu_item:nth-of-type(2) .meyasu_img {
    width: 50rem;
    height: 38rem;
    object-position: right;
    font-family: "object-position: right;";
  }
  .meyasu_item:nth-of-type(3) .meyasu_img {
    width: 40.6rem;
    height: 35.6rem;
  }

  .meyasu_txt h3 {
    margin-bottom: 0.2em;
    font-size: clamp(20px, 4.1rem, 41px);
  }
}

/*---------------------------------
    sec-flow
----------------------------------*/
.sec-flow {
  position: relative;
}
.sec-flow.bg_kabe2::after {
  /*背景画像*/
  width: 80rem;
  height: 63.2rem;
  background-image: url(../images/bg_kabe2-img.png);
  background-image: image-set(
    url(../images/bg_kabe2-img.png) 1x,
    url(../images/bg_kabe2-img@2x.png) 2x
  );
  background-image: -webkit-image-set(
    url(../images/bg_kabe2-img.png) 1x,
    url(../images/bg_kabe2-img@2x.png) 2x
  );
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 1rem; /*colorful分*/
  right: 0;
  display: block;
  content: "";
  z-index: 0;
}
.flow_container {
  padding-top: 0.5rem;
  margin-bottom: 4rem;
  gap: 4.5rem;
  flex-wrap: wrap;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.flow_item {
  width: calc((100% - (4.5rem * 5)) / 6);
  max-width: 15rem;
  min-width: 10rem;
  position: relative;
}
.flow_item:not(:nth-of-type(1))::before {
  width: 6.6rem;
  height: 2.2rem;
  background: url(../images/index/flow_arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: -5.6rem;
  top: -1rem;
  display: block;
  content: "";
}
.flow_item .flow_img {
  width: 12.5rem;
  margin-bottom: 2rem;
  margin-inline: auto;
  display: block;
}
.flow_txt {
  text-align: center;
}
.flow_txt .s-t_p {
  font-size: 2.4rem;
  line-height: 1.4;
  font-weight: 500;
  display: block;
}
.flow_txt .s-t_p span {
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  line-height: 1;
  font-weight: 500;
  display: block;
}

/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width: 960px) and (min-width: 600px) {
}
/*-------------SP-----------------------*/
@media screen and (max-width: 599px) {
  .sec-flow.bg_kabe2::after {
    /*背景画像*/
    top: 40%;
    right: -25%;
  }
  .flow_container {
    margin-bottom: 5.5rem;
    gap: 2.5rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .flow_item {
    width: 100%;
    margin-bottom: 0.5rem;
    max-width: unset;
    min-width: unset;
  }
  .flow_item:not(:nth-of-type(1))::before {
    width: 2.7rem;
    height: 9.1rem;
    background: url(../images/index/flow_arrow-sp.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: -4rem;
    display: block;
    content: "";
  }
  .flow_item {
    padding-left: 3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .flow_item .flow_img {
    width: 17rem;
    margin-bottom: unset;
    margin-right: 2rem;
    margin-left: 0;
    display: block;
  }
  .flow_txt {
    text-align: left;
    margin-left: 2rem;
  }
  .flow_txt .s-t_p {
    font-size: 3.612rem;
    font-size: clamp(16px, 3.162rem, 31.6px);
  }
  .flow_txt .s-t_p span {
    font-size: clamp(12px, 2.4rem, 24px);
  }
}

/*---------------------------------
    sec-construction
----------------------------------*/
.sec-construction {
  margin-top: 40rem;
  padding-block: 0 0;
  position: relative;
}
.construction_topbg {
  height: 40rem;
  margin-top: -40rem;
  position: relative;
  z-index: -1;
}
/* 背景画像 */
.construction_topbg::before {
  width: 100%;
  height: 90rem;
  background: url(../images/index/construction_bg.jpg);
  background-image: image-set(
    url(../images/index/construction_bg.jpg) 1x,
    url(../images/index/construction_bg@2x.jpg) 2x
  );
  background-image: -webkit-image-set(
    url(../images/index/construction_bg.jpg) 1x,
    url(../images/index/construction_bg@2x.jpg) 2x
  );
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  z-index: -1;
}
.construction_inner {
  position: relative;
  padding-block: 0 9rem;
}
.construction_inner::before {
  width: 16.5rem;
  height: 16.5rem;
  border-radius: 50%;
  background: #fff;
  top: -5.6rem;
  z-index: 0;
}
.construction_inner::after {
  width: 5.5rem;
  height: 5.5rem;
  background: url(../images/index/icon_hake.png) no-repeat;
  background-size: contain;
  top: -2.5rem;
  z-index: 0;
}
.construction_inner::before,
.construction_inner::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  display: block;
  content: "";
}

/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width: 960px) and (min-width: 600px) {
}
/*-------------SP-----------------------*/
@media screen and (max-width: 599px) {
  .sec-construction {
    padding-block: 0 0;
  }
  .construction_topbg::before {
    height: 100vh;
  }
  .construction_inner {
    padding-bottom: 8rem;
  }
  .construction_inner::before {
    width: 16.5rem;
    height: 16.5rem;
    border-radius: 50%;
    background: #fff;
    top: -7rem;
    z-index: 0;
  }
  .construction_inner::after {
    width: 5.5rem;
    height: 5.5rem;
    background: url(../images/index/icon_hake.png) no-repeat;
    background-size: contain;
    top: -3rem;
    z-index: 0;
  }
  .construction_inner::before,
  .construction_inner::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    display: block;
    content: "";
  }
}

/*---------------------------------
    sec-news
----------------------------------*/
.sec-news {
  width: 100%;
  background: url(../images/index/news_bg.jpg);
  background-image: image-set(
    url(../images/index/news_bg.jpg) 1x,
    url(../images/index/news_bg@2x.jpg) 2x
  );
  background-image: -webkit-image-set(
    url(../images/index/news_bg.jpg) 1x,
    url(../images/index/news_bg@2x.jpg) 2x
  );
  background-size: cover;
  background-repeat: no-repeat;
}
.news_inner {
  padding: 9rem 0 9rem 0;
  border-radius: 2rem;
  background: #fff;
  box-shadow: 3rem rgba(107, 64, 27, 0.1);
}
.news_list {
  margin-bottom: 5.2rem;
}

/*-------------------------------------
        responsive
-------------------------------------*/
/*-------------tab-----------------------*/
@media screen and (max-width: 960px) and (min-width: 600px) {
}
/*-------------SP-----------------------*/
@media screen and (max-width: 599px) {
  .sec-news {
    padding-block: 8rem;
    width: 100%;
    background: url(../images/index/news_bg.jpg);
    background-image: image-set(
      url(../images/index/news_bg.jpg) 1x,
      url(../images/index/news_bg@2x.jpg) 2x
    );
    background-image: -webkit-image-set(
      url(../images/index/news_bg.jpg) 1x,
      url(../images/index/news_bg@2x.jpg) 2x
    );
    background-size: cover;
    background-repeat: no-repeat;
  }
  .news_inner {
    padding-inline: 4rem;
    padding-block: 5rem 8rem;
  }
  .news_list {
    margin-bottom: 5.2rem;
  }
}