@charset "UTF-8";
/* CSS Document */

/* header footer*/
#header {
  padding-bottom: 20vw;
}
#header:before {
  background: url(../img/top/pht_head_top.jpg) no-repeat center top / contain;
  width: 50vw;
  height: 44vw;
  max-width: 750px;
  max-height: 620px;
  left: auto;
  right:calc(50vw - 50%);
  display: block;
}

.fixed-body #header:before,
.fixed-body #header:after {
  content: none;
}

#header .nav {
  margin-top: 15rem;
}

#header .nav ul {
  display: block;
}
#header .nav ul li {
  margin-bottom: 2.4rem;
}

#footer {
  margin-top: 0;
}

@media screen and (max-width: 1080px) {
  #header {
    padding-bottom: 55vw;
  }
  #header:before {
    width: 100%;
    height: 100%;
    max-width: unset;
    max-height: unset;
    left: 0;
    right: auto;
    top: 12vw;
     background: url(../img/top/pht_head_top.jpg) no-repeat center top / cover;
  }
  #header .nav {
    margin-top: 0;
  }
}

@media screen and (max-width: 425px) {
  #header {
    padding-bottom: 85vw;
  }
  #header:before {
    top: 80px;
  }
}

/* ttl-top */
.ttl-top {
  font-size: 3.2rem;
  text-align: center;
  position: relative;
  margin-bottom: 5.6rem;
}
.ttl-top:before {
  content: "";
  display: block;
  margin: 4rem auto;
}
.ttl-top.about:before {
  width: 64px;
  height: 65px;
  background: url(../img/common/ico_ttl_about.png) no-repeat center center /
    contain;
}
.ttl-top.flow:before {
  width: 72px;
  height: 56px;
  background: url(../img/common/ico_ttl_flow.png) no-repeat center center /
    contain;
}

/* for TABLET */
@media screen and (max-width: 800px) {
  .ttl-top {
    font-size: 2rem;
    margin-bottom: 4rem;
  }
  .ttl-top.about:before {
    width: 54px;
    height: 55px;
    margin: 2.4rem auto;
  }
}

/* ttl-top-bg */
.ttl-top-bg {
  text-align: center;
  padding-top: 9.6rem;
  margin-bottom: 8rem;
  position: relative;
}
.ttl-top-bg span {
  color: #fff;
  background: #098126;
  font-size: 4.2rem;
  letter-spacing: 0.1em;
  padding: 0.8rem 3.2rem;
}
.ttl-top-bg.casestudy:before {
  content: "";
  display: inline-block;
  width: 93px;
  height: 66px;
  background: url(../img/common/ico_ttl_casestudy.png) no-repeat center center /
    contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 800px) {
  .ttl-top-bg {
    margin-bottom: 4rem;
  }
  .ttl-top-bg span {
    font-size: 2.4rem;
    padding: 1.6rem 3.2rem;
  }
}

/* ttl-top-s */
.ttl-top-s {
  font-size: 3.4rem;
  position: relative;
  padding-left: 3.2rem;
  margin-bottom: 3.2rem;
}
.ttl-top-s:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #098126;
  height: 2px;
  width: 24px;
}

/* for TABLET */
@media screen and (max-width: 800px) {
  .ttl-top-s {
    font-size: 2.1rem;
    margin-bottom: 2.4rem;
    padding-left: 2.4rem;
  }
  .ttl-top-s:before {
    width: 16px;
    height: 1px;
  }
}

/* sectence-block */
.sectence-block {
  margin-bottom: 3.2rem;
}
.sectence-block p {
  margin-bottom: 0.8rem;
}
.sectence-block.center {
  text-align: center;
}
@media screen and (max-width: 800px) {
  .sectence-block.center {
    text-align: left;
  }
}

/* --------------------------------------------------

about-area

-------------------------------------------------- */
.about-area {
  padding: 4.8rem 0;
  position: relative;
}
.about-area:before,
.about-area:after {
  content: "";
  display: block;
  position: absolute;
  background: url(../img/common/bg_wave.png) no-repeat center center / contain;
  width: 100%;
  height: 8vw;
}
.about-area:before {
  top: -6.5vw;
}
.about-area:after {
  bottom: -6.5vw;
  transform: rotateX(180deg);
}
.about-area .sectence-block {
  line-height: 2;
  margin-bottom: 8rem;
}

.about-detail {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 8rem;
}
.about-detail .left-block .ttl-top {
  text-align: left;
  letter-spacing: 4px;
  display: flex;
  justify-content: space-between;
  min-width: 605px;
  margin-bottom: 8.5rem;
}
.about-detail .left-block .ttl-top::before {
  content: none;
}
.about-detail .left-block .ttl-top::after {
  content: "";
  display: block;
  width: 150px;
  height: 136px;
  background: url(../img/common/ico_ttl_about-detail.png) no-repeat center
    center / contain;
}
.about-detail .left-block .sectence-block {
  max-width: 560px;
}
.about-detail .right-block {
  background: #e6f6ea;
  min-width: 436px;
  min-height: 436px;
  border-radius: 50%;
  position: relative;
}
.about-detail .right-block .txt-block {
  min-width: 340px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.about-detail .right-block .ttl-top {
  font-size: 2.6rem;
  letter-spacing: 2px;
  margin-bottom: 3rem;
}
.about-detail .right-block .sectence-block {
  max-width: 320px;
  margin: 0 auto;
}

@media screen and (max-width: 1080px) {
  .about-detail {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 4rem;
  }
  .about-detail .left-block {
    text-align: center;
  }
  .about-detail .left-block .ttl-top {
    font-size: 2.2rem;
    display: inline-block;
    min-width: auto;
    padding-top: 4rem;
    margin-bottom: 3.2rem;
    position: relative;
  }
  .about-detail .left-block .ttl-top::after {
    width: 91px;
    height: 83px;
    position: absolute;
    top: 0;
    right: 20px;
  }
  .about-detail .left-block .sectence-block {
    text-align: left;
    margin-bottom: 4rem;
  }
}

@media screen and (max-width: 800px) {
  .about-detail .left-block .ttl-top {
    padding-top: 4.8rem;
  }
  .about-detail .left-block .ttl-top::after {
    right: 10px;
  }
  .about-detail .right-block .txt-block {
    min-width: auto;
    width: 100%;
  }
  .about-area .btn a {
    padding: 1.6rem 4rem 1.6rem 1.6rem;
  }
  .btn a:after {
    right: 1.6rem;
  }
}

@media screen and (max-width: 425px) {
  .about-detail .right-block {
    min-width: auto;
    min-height: auto;
    width: 90%;
    height: 80vw;
  }
  .about-detail .right-block .ttl-top {
    font-size: 1.8rem;
  }
}

/* --------------------------------------------------

flow-area

-------------------------------------------------- */
.flow-area {
  background: #faf8f4;
  padding: 8rem 0 20rem;
}

@media screen and (max-width: 800px) {
  .flow-area {
    padding: 4rem 0 8rem;
  }
}

/* --------------------------------------------------

introduction-area

-------------------------------------------------- */
.introduction-area {
  background: #e1f9e5;
  padding: 8rem 0 10vw 0;
  position: relative;
}
.introduction-area:before {
  content: "";
  display: block;
  position: absolute;
  background: url(../img/common/bg_wave_g.png) no-repeat center center / contain;
  width: 100%;
  height: 6vw;
  left: 0;
  top: -5vw;
}
.introduction-area .btn-block {
  margin: 0;
}
@media only screen and (max-width: 800px) {
  .introduction-area .btn-block {
    display: flex;
  }
}

.search-conditions {
  background: #fff;
}
.search-conditions .search-conditions-inner > dl > dt {
  background: #faf8f4;
}
.search-conditions .btn-base {
  border: 1px solid #098126;
}

.introduction-list .list-thumb li.hidden{
  display: none;
}

.introduction-list .btn-block {
  margin-bottom: 8rem;
}
.introduction-list .btn-arrow span {
  padding: 1.6rem 7.3rem 1.6rem 6.2rem;
}
.introduction-list .btn-arrow span:after {
  right: 5rem;
  transform: translateY(-50%) rotate(90deg);
}
.introduction-list .btn-arrow span.active:after {
  transform: translateY(-50%) rotate(-90deg);
}
@media only screen and (max-width: 800px) {
  .introduction-list .btn-block {
    margin-bottom: 4rem;
  }
  .introduction-list .list-thumb > li:nth-child(3n) {
    margin-bottom: 1.6rem;
  }
  .search-conditions .btn-base {
    padding: 1.6rem;
    min-width: auto;
  }
}

.method {
  display: flex;
  align-items: center;
  gap: 8rem;
  background: #fff;
  padding: 7.2rem;
}
.method .ttl {
  font-size: 2.6rem;
  text-align: center;
  margin-bottom: 5.6rem;
}
.method .sentence-block p {
  line-height: 34px;
}

@media only screen and (max-width: 1080px) {
  .method {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4rem;
  }
  .method .ttl {
    margin-bottom: 2.4rem;
  }
}

@media only screen and (max-width: 800px) {
  .method {
    padding: 3.2rem 2.4rem;
    gap: 2.4rem;
  }
  .method .method-img {
    text-align: center;
    width: 100%;
  }
  .method .method-img img {
    width: 100%;
  }
  .method .ttl {
    font-size: 2.4rem;
    text-align: left;
    margin-bottom: 1.6rem;
  }
}

/* --------------------------------------------------

スライダー

-------------------------------------------------- */

.slider-area {
  position: relative;
  margin-bottom: 16rem;
}
@media only screen and (max-width: 800px) {
  .slider-area {
    margin-bottom: 8rem;
  }
}

/* list-thumb */
.slider-block .list-thumb {
  display: flex;
  justify-content: inherit;
  flex-wrap: nowrap;
}

/* スライダーボタン */
.slider-block .swiper-button-next,
.slider-block .swiper-button-prev {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  bottom: -5px;
  top: auto;
}
.slider-block .swiper-button-next::before,
.slider-block .swiper-button-prev::before {
  content: "";
  width: 4rem;
  height: 4rem;
  background: #fff;
  position: absolute;
  border-radius: 50%;
  transition: all 0.3s;
}
.slider-block .swiper-button-next::after,
.slider-block .swiper-button-prev::after {
  content: "";
  width: 3rem;
  height: 2rem;
  display: block;
  border: none;
  transform: rotate(0);
  background: url(../img/common/ico_arrow_square.svg) no-repeat center
    center/contain;
}
.slider-block .swiper-button-next.swiper-button-disabled,
.slider-block .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
.slider-block .swiper-button-next {
  left: 6rem;
}
.slider-block .swiper-button-prev {
  left: 0;
}
.slider-block .swiper-button-prev::after {
  transform: rotate(-180deg);
}
@media only screen and (max-width: 800px) {
  .slider-block .swiper-button-next {
    right: 1rem;
  }
  .slider-block .swiper-button-prev {
    left: 1rem;
  }
}