@charset "UTF-8";

/*-----------------------------------------------------------
	=Basic Setup
-----------------------------------------------------------*/
html {
  scroll-margin-top: 5rem;
}

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  display: inline-block;
}

/* Link Style */
a {
  display: block;
  color: #111;
  text-decoration: none;
  transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  transition: .3s;
}

a:focus,
a:active,
a:hover {
  color: #fff;
  text-decoration: none;
}

a:hover img {
  filter: brightness(110%);
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  zoom: 1;
}

video {
  max-width: 100%;
  height: auto;
}

@media screen and (min-width: 668px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}


/*-----------------------------------------------------------
    =Global Layout
-----------------------------------------------------------*/
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MSPGothic", sans-serif;
  /* font-feature-settings: "palt"; */
  line-height: 1.8;
  color: #111;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-wrap: break-word;
  margin: auto;
}

html {
  /* font-size: 62.5%; */
  font-size: max(10px, 0.52vw);
}

/* 中間サイズ（PC〜SP）の間はvwでスケーリング */
@media (max-width: 1920px) and (min-width: 751px) {
  html {
    font-size: calc(100vw / 192);
  }
}

/* SPサイズ */
@media (max-width: 750px) {
  html {
    font-size: 1.33vw;
  }
}

.pc_only {
  display: block;
}

.sp_only {
  display: none;
}

@media only screen and (max-width: 750px) {
  .pc_only {
    display: none;
  }

  .sp_only {
    display: block;
  }
}


/*-----------------------------------------------------------
/* Frame Format
-----------------------------------------------------------*/
#wrapper {
  width: 100%;
  position: relative;
}

.position {
  position: relative;
}


/*-----------------------------------------------------------
	=Header
-----------------------------------------------------------*/
#header {
  position: fixed;
  background: #fff;
  width: 100%;
  z-index: 10;
  transition: .3s;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
}

#header .logo {
  width: 11rem;
}

#header .terminix_logo {
  width: 8.5rem;
  margin-right: 2rem;
}

@media screen and (max-width:750px) {
  #header {
    height: 7.5rem;
  }

  #header .logo {
    width: 13.6rem;
  }

  #header .terminix_logo {
    width: 10.7rem;
  }
}


/*-----------------------------------------------------------
	=fv_bunner
-----------------------------------------------------------*/
#fv_bunner {
  margin-top: 5.5rem;
}

@media screen and (max-width:750px) {
  #fv_bunner {
    margin-top: 7.5rem;
  }
}



/*-----------------------------------------------------------
	=fv
-----------------------------------------------------------*/
#fv {
  position: relative;
  width: 100%;
  height: auto;
}

#fv .item_wrap {
  position: absolute;
  top: 60%;
  left: 58%;
  transform: translateX(-50%);
  color: #FFF;
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 0 6.548px #000;
  font-size: 1.6rem;
  font-weight: 500;
}

#fv .item_wrap a,
#fv .item_wrap p {
  margin-bottom: 1rem;
}

#fv .item_wrap a {
  color: #FFF;
  text-decoration-line: underline;
  width: fit-content;
  margin: 0 auto 1rem;
}

#fv .item_wrap a:hover {
  opacity: .8;
}

@media screen and (max-width:750px) {
  #fv .item_wrap {
    top: 68%;
    left: initial;
    right: 3%;
    transform: initial;
    font-size: 1.8rem;
    text-shadow: 0 0 8px #000;
  }

  #fv .item_wrap p:nth-child(1) {
    margin-left: 5rem;
  }

  #fv a {
    font-size: 1.7rem;
    text-align: right;
    top: 78%;
    right: -17%;
    left: initial;
    text-shadow: 0 0 10px #000;
  }
}


/*-----------------------------------------------------------
	=offer
-----------------------------------------------------------*/
.offer .btn {
  position: relative;
  display: block;
  margin: auto;
}


/* ================== offer01 ================== */
.offer01 {
  background-image: url("../img/offer01_bg_pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2rem 0 4rem;
}

.offer01 .cta_btn {
  width: 67rem;
  margin-bottom: 1rem;
}

.offer01 .tel_btn {
  width: 80rem;
}

.present_bnr {
  width: 82rem;
  margin: 2.2rem auto 0;
}

@media screen and (max-width:750px) {
  #offer01_2 .tel_btn {
    width: 90%;
  }

  .present_bnr {
    width: 67.1rem;
  }
}

/* ================== offer02 ================== */
.offer02 {
  background-image: url("../img/offer02_bg_pc.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 1.5rem 0 3.7rem;
}

.offer02 .cta_btn {
  width: 63rem;
  margin-top: 31rem;
  margin-left: 33.5%;
  z-index: 1;
}

.offer02 .tel_btn {
  width: 65rem;
}

.offer02 .offer_item {
  position: absolute;
  width: 23.5rem;
  top: 7.5%;
  left: 52%;
}

@media screen and (max-width:750px) {

  /* ================== offer01 ================== */
  .offer01 {
    background-image: url("../img/offer01_bg_sp.png");
    padding: 3rem 0 4.7rem;
  }

  .offer01 .cta_btn {
    width: 67.1rem;
    margin-bottom: 1.5rem;
  }

  .offer01 .tel_btn {
    width: 55.7rem;
  }

  /* ================== offer02 ================== */
  .offer02 {
    background-image: url("../img/offer02_bg_sp.png");
    padding: 1.5rem 0 4.2rem;
  }

  .offer02 .cta_btn {
    width: 93%;
    margin: 33rem auto 0;
  }

  .offer02 .tel_btn {
    width: 80%;
  }

  .offer02 .offer_item {
    width: 27.5rem;
    top: 2%;
    left: 56%;
  }
}


/*-----------------------------------------------------------
	=recommended
-----------------------------------------------------------*/
.recommended_link {
  position: relative;
}

.recommended_link a {
  position: absolute;
  color: #000;
  font-size: 1.7rem;
  width: fit-content;
  display: inline-block;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 8.5%;
  text-decoration: underline;
}

.recommended_link a:hover {
  opacity: .8;
}

@media screen and (max-width:750px) {
  .recommended_link a {
    font-size: 1.8rem;
    bottom: 4.5%;
  }
}


/*-----------------------------------------------------------
	=howto
-----------------------------------------------------------*/
#howto {
  background-image: url("../img/howto_bg_pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 15rem;
}

.howto_inner {
  width: 100rem;
  margin: auto;
}

.howto_ttl {
  position: absolute;
  width: 50%;
  left: 0;
  right: 0;
  margin: auto;
}

.howto01_ttl {
  top: -3rem;
}

.howto02_ttl {
  top: -3rem;
}

.howto02_ttl {
  position: absolute;
  width: 50%;
  left: 0;
  right: 0;
  margin: auto;
  top: -3rem;
}

.howto_btn_wrap {
  display: flex;
  justify-content: center;
  gap: 1rem;
  left: 0;
  right: 0;
  margin: 0 auto 10rem;
  bottom: 8%;
}

.howto_btn_wrap a {
  display: block;
}

.howto_btn_wrap a img {
  height: 14rem;
  width: auto;
  margin: auto;
}

/* howto_item */
.howto_item_bg {
  background-color: #fff;
}

.howto_item .voice p {
  color: #FFF;
  font-size: 1.7rem;
  margin-top: 1rem;
  margin-left: 2rem;
  line-height: 1.4;
}

@media screen and (max-width:750px) {
  .howto_item .voice p {
    margin-left: 0;
    margin-top: 2rem;
    font-size: 1.8rem;
    line-height: 1.5;
  }
}

/* ========= fee_weap ========= */
.fee_weap {
  border-radius: 1.5rem;
  border: 3.7px solid #5EBBD5;
  width: 75%;
  margin: 10rem auto 0;
}

.fee_weap_inner {
  overflow: hidden;
}

.fee_weap_ttl {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 65%;
  top: -3rem;
  z-index: 1;
}

.acc_open {
  position: relative;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 2rem;
  color: #1DB1CE;
  font-size: 1.8rem;
  border-bottom: solid 2px #1DB1CE;
  line-height: 1.4;
  font-weight: 700;
  margin-left: 8rem;
  margin-bottom: 2rem;
  padding-bottom: .8rem;
  cursor: pointer;
}

.acc_open::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: solid 2px #1DB1CE;
  border-right: solid 2px #1DB1CE;
  transform: rotate(135deg);
}

.acc_open.active::after {
  transform: rotate(-45deg);
  margin-top: .5rem;
}

@media screen and (max-width:750px) {
  #howto {
    background-image: url("../img/howto_bg_sp.png");
    padding-bottom: 10rem;
  }

  .howto_inner {
    width: 90%;
  }

  .howto_btn_wrap {
    flex-direction: column;
    gap: 2rem;
    bottom: 7%;
  }

  .howto_btn_wrap a img {
    height: auto;
    width: 100%;
  }

  #howto02 {
    padding-top: 5rem;
  }

  .howto01_ttl,
  .howto02_ttl {
    width: 80%;
  }


  /* ========= fee_weap ========= */
  .fee_weap {
    width: 87%;
    margin: 8rem auto 0;
  }

  .fee_weap_ttl {
    width: 67%;
  }

  .acc_open {
    font-size: 2.5rem;
    margin-left: 3rem;
  }

  .acc_open::after {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: -1rem;
  }
}

/* ========= howto_item splide ========= */
.howto_item .slide_wrap.on_slide {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 25%;
  width: 80rem;
}

.howto_item .splide__pagination {
  bottom: -5rem;
  gap: 1rem;
}

.howto_item .splide__pagination__page {
  background: #B4B4B4;
  width: 1.5rem;
  height: 1.4rem;
  opacity: 1;
}

.howto_item .splide__pagination__page.is-active {
  background: #003B82;
  transform: initial;
}

/* ========= voice splide ========= */
.voice .slide_wrap {
  margin: 0 auto;
  top: 23%;
  width: 100rem;
}

#howto01 .voice .slide_wrap {
  margin: 0 auto 15rem;
}

.voice .splide__pagination {
  bottom: -10rem;
}

.voice .splide__list a {
  position: absolute;
  bottom: 6%;
  right: 7%;
  color: #4257F8;
  font-size: 2.2rem;
  text-decoration-line: underline;
}

/* arrow btn */
.voice .splide__arrow svg {
  display: none;
}

.voice .splide__arrow {
  width: 8rem;
  height: 8rem;
  background: transparent;
  opacity: 1;
}

.voice .splide__arrow--prev {
  background: url("../img/howto_voice_slide_arrow.svg") no-repeat center / contain;
  left: -3.5rem;
}

.voice .splide__arrow--next {
  background: url("../img/howto_voice_slide_arrow02.svg") no-repeat center / contain;
  right: -3.5rem;
}

.voice .splide__pagination__page.is-active {
  background: #DDBD75;
}

@media screen and (max-width:750px) {

  /* ========= howto_item splide ========= */
  .howto_item .slide_wrap.on_slide {
    width: 77%;
  }

  /* ========= voice splide ========= */
  .voice .slide_wrap {
    width: 98%;
    margin-bottom: 10rem !important;
  }

  .voice .splide__list a {
    bottom: 5.5%;
  }

  /* arrow btn */
  .voice .splide__arrow svg {
    display: none;
  }

  .voice .splide__arrow {
    width: 6rem;
    height: 6rem;
  }

  .voice .splide__arrow--prev {
    left: -2.5rem;
  }

  .voice .splide__arrow--next {
    right: -2.5rem;
  }

  .voice .splide__pagination {
    bottom: -15rem;
  }
}



/*-----------------------------------------------------------
	=bunner_wrap
-----------------------------------------------------------*/
#bunner_wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem 0 6rem;
}

.bunner {
  width: 105rem;
  margin: auto;
}

.bunner:nth-child(3) {
  width: 95rem;
  margin-top: 3rem;
  cursor: pointer;
}

.bunner .bunner_btn {
  position: absolute;
  z-index: 1;
  width: 43%;
}

.bunner:nth-child(1) .bunner_btn {
  right: 1%;
  top: 35%;
}

.bunner:nth-child(2) .bunner_btn {
  right: 1%;
  top: 25%;
}

@media screen and (max-width:750px) {
  #bunner_wrap {
    gap: 3rem;
    padding: 3rem 0 4rem;
  }

  .bunner {
    width: 87%;
  }

  .bunner .bunner_btn {
    left: 0;
    right: 0;
    margin: auto;
    width: 70%;
  }

  .bunner:nth-child(3) {
    width: 87%;
    margin-top: 0;
  }

  .bunner:nth-child(1) .bunner_btn {
    top: 65%;
  }

  .bunner:nth-child(2) .bunner_btn {
    top: 59%;
  }
}


/*-----------------------------------------------------------
	=sns_wrap
-----------------------------------------------------------*/
#sns_wrap {
  padding: 8rem 0 4rem;
}

.sns_list {
  display: flex;
  justify-content: center;
  gap: 8rem;
  margin: 0 auto;
}

.sns_item {
  width: 10rem;
}

.copy {
  font-size: 2.8rem;
  text-align: center;
  margin-top: 3rem;
}

@media screen and (max-width:750px) {
  #sns_wrap {
    padding: 6.5rem 0 4rem;
  }

  .copy {
    font-size: 1.8rem;
    margin-top: 6rem;
  }
}



/*-----------------------------------------------------------
	=float_button
-----------------------------------------------------------*/
.float_button {
  width: 67rem;
  position: fixed;
  bottom: 1dvh;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 10;

  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.float_button.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.float_button a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}