@charset "utf-8";

body {
  background-color: #D3EDFB;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
  color: #1A1311;
  font-size: 18px;
  line-height: 1.8;
}

body img {
  width: 100%;
  max-width: 100%;
}

.inner01,
.inner02,
.inner03 {
  max-width: 1140px;
  width: 90%;
  margin: 0 auto;
}

.inner02 {
  max-width: 980px;
}

.inner03 {
  max-width: 760px;
}

.second svg path {
  fill: #AEC5E2 !important;
}

h3.box_ {
  position: relative;
  font-size: clamp(24px, 3.7vw, 40px);
  color: #15257E;
  background-color: #FEE602;
  border: clamp(0px, 1.1vw, 16px) solid #ABCDD9;
  outline: clamp(0px, 0.2vw, 4px) solid #ABCDD9;
  outline-offset: clamp(-30px, -2.1vw, 0px);
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: clamp(0px, 1.4vw, 20px) clamp(0px, 2.9vw, 40px);
  width: 90%;
  max-width: 835px;
}

.sec04 h3.box_ {
  background-color: #D2EDFB;
}

.sec05 h3.box_ {
  background-color: #F8C3C4;
  border-color: #91D0CB;
  outline-color: #91D0CB;
  max-width: 450px;
}

#anchor01,
#anchor02,
#anchor03,
#anchor04,
#anchor05 {
  padding-top: 80px;
  margin-top: -80px;
}

@media screen and (max-width: 767px) {
  body {
    font-size: clamp(10px, 3.7vw, 14px);
  }

  .inner01,
  .inner02,
  .inner03 {
    max-width: 400px;
  }

  h3.box_ {
    font-size: clamp(14px, 6.4vw, 24px);
    border: 9px solid #ABCDD9;
    outline: 3px solid #ABCDD9;
    outline-offset: -18px;
    padding: 25px 10px;
    max-width: 380px;
    line-height: 1.6;
  }

  .sec04 h3.box_ {
    background-color: #D2EDFB;
  }

  .sec05 h3.box_ {
    background-color: #F8C3C4;
    border-color: #91D0CB;
    outline-color: #91D0CB;
    max-width: 450px;
  }


}

/* ==============================


part


=================================*/

.blue,
.blue * {
  color: #15257E;
}


.nami {
  --mask:
    radial-gradient(34.24px at 50% 46.5px, #000 99%, #0000 101%) calc(50% - 60px) 0/120px 100%,
    radial-gradient(34.24px at 50% -16.5px, #0000 99%, #000 101%) 50% 30px/120px 100% repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  margin-top: -50px;
}

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

  .nami {
    --mask:
      radial-gradient(18.66px at 50% 25.6px, #000 99%, #0000 101%) calc(50% - 32px) 0/64px 100%,
      radial-gradient(18.66px at 50% -9.6px, #0000 99%, #000 101%) 50% 16px/64px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
  }
}



/* ==============================


kv


=================================*/

.kv {
  margin-bottom: 80px;
}

.kv-logo {
  position: absolute;
  display: block;
  width: clamp(0px, 7.2vw, 100px);
  top: 5%;
  left: 5%;
  z-index: 1;
}


.kv-logo img {
  transform: scale(1);
  transition: 0.3s ease transform;
}

.kv-logo img:hover {
  transform: scale(1.05);
}

h1 {
  padding-top: 70px;
  overflow: hidden;
}

.kv-ttl {
  width: clamp(0px, 46vw, 635px);
  margin: 0 auto clamp(0px, 3.3vw, 45px);
}

.kv-img {
  position: relative;
  height: clamp(0px, 52.9vw, 730px);
  /* background: url(../img/kv-img.png) no-repeat 47% center/cover; */
}

/* .kv-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D3EDFB;
  z-index: 1;
} */

.kv-bg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.kv-bg::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 69px;
  background: url(../img/kv-bg.png) repeat-x center center/contain;
  z-index: 1;
}

.kv-bg img {
  position: absolute;
  top: 50%;
  left: calc(50% + 50px);
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  display: block;
  max-width: none;
  width: clamp(0px, 255.4vw, 3500px);
}




.kv-img-ctr {
  position: relative;
  width: 100vw;
  max-width: 2000px;
  margin: 0 auto;
  height: 100%;
  z-index: 2;
}


.kv-img-ctr div {
  position: absolute;
}

.kv-img-ctr .dog-01 {
  width: clamp(0px, 22.8vw, 315px);
  top: clamp(-60px, -4.3vw, 0px);
  left: clamp(0px, 3.6vw, 50px);
}

.kv-img-ctr .dog-02 {
  width: clamp(0px, 22.8vw, 315px);
  top: clamp(-100px, -7.2vw, 0px);
  right: clamp(0px, 8vw, 110px);
}

.kv-img-ctr .dog-03 {
  width: clamp(0px, 13.4vw, 185px);
  bottom: clamp(0px, 12.3vw, 170px);
  left: clamp(-40px, -2.9vw, 0px);
}

.kv-img-ctr .dog-04 {
  width: clamp(0px, 10.9vw, 151px);
  bottom: clamp(-10px, -0.7vw, 0px);
  left: clamp(0px, 29vw, 400px);
}

.kv-img-ctr .dog-05 {
  width: clamp(0px, 15.9vw, 220px);
  bottom: clamp(0px, 7.2vw, 100px);
  right: clamp(-50px, -3.6vw, 0px);
}


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

  .kv {
    margin-bottom: 60px;
  }

  .kv-logo {
    width: clamp(0px, 10.7vw, 40px);
    top: clamp(0px, 5.3vw, 20px);
    left: inherit;
    right: 5%;
  }

  h1 {
    padding-top: clamp(0px, 16vw, 60px);
  }

  .kv-ttl {
    width: clamp(0px, 85.3vw, 320px);
    margin: 0 auto clamp(0px, 6.7vw, 25px);
  }

  .kv-img {
    height: clamp(0px, 98.7vw, 370px);
    /*  background: url(../img/kv-img.png) no-repeat 48% center/cover; */
  }

  .kv-bg img {
    left: calc(50% + 25px);
    width: clamp(0px, 453.3vw, 1700px);
  }

  .kv-bg::before {
    height: 40px;
  }

  .kv-img-ctr {
    max-width: inherit;
  }

  .kv-img-ctr .dog-01 {
    width: clamp(0px, 32vw, 120px);
    top: clamp(-10px, -2.7vw, 0px);
    left: clamp(-20px, -5.3vw, 0px);
  }

  .kv-img-ctr .dog-02 {
    width: clamp(0px, 36.5vw, 137px);
    top: clamp(-40px, -10.7vw, 0px);
    right: clamp(-40px, -10.7vw, 0px);
  }

  .kv-img-ctr .dog-03 {
    width: clamp(0px, 21.3vw, 80px);
    bottom: clamp(0px, 22.7vw, 85px);
    left: clamp(-30px, -10.7vw, 0px);
  }

  .kv-img-ctr .dog-04 {
    width: clamp(0px, 16.5vw, 62px);
    bottom: clamp(0px, 1.3vw, 5px);
    left: clamp(0px, 18.7vw, 70px);
  }

  .kv-img-ctr .dog-05 {
    width: clamp(0px, 28vw, 105px);
    bottom: clamp(0px, 12vw, 50px);
    right: clamp(-30px, -8vw, 0px);
  }



}

/* ==============================


sec01


=================================*/
.sec01 {
  margin-bottom: 95px;
}

.sec01-h2 {
  display: block;
  margin: 0 auto 95px;
  position: relative;
  text-align: center;
  width: fit-content;
}

.sec01 h2 {
  font-size: 28px;
  line-height: 1.8;
}

.sec01 h2 span.beta {
  display: inline-block;
  color: #fff !important;
  background-color: #15257E;
  padding: 5px 20px;
  margin: 0 5px;
  font-size: 38px;
  line-height: 1;
  vertical-align: sub;
}

.sec01-h2-ashi {
  position: absolute;
  top: 50%;
  left: -20%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.sec01-h2-ashi.right_ {
  left: inherit;
  right: -20%;
}


.sec01__anchor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 2%;
}

.sec01__anchor a {
  max-width: 348px;
  width: 32%;
  height: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  border-radius: 50px;
  box-shadow: 5px 5px 0px 2px #15257E;
}

.sec01__anchor a p {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1;
}

.sec01__anchor a img {
  max-width: 36px;
}

.sec01__anchor a:hover {
  background-color: #15257E;
  box-shadow: 0px 0px 0px 0px #15257E;
}

.sec01__anchor a:hover p {
  color: #fff;
}

.sec01__anchor a:hover img {
  filter: brightness(0) saturate(100%) invert(100%);
}

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

  .sec01 {
    margin-bottom: 80px;
  }

  .sec01-h2 {
    margin: 0 auto 60px;
  }

  .sec01 h2 {
    font-size: clamp(11px, 4.8vw, 18px);
  }

  .sec01 h2 span.beta {
    padding: clamp(0px, 1.3vw, 5px) clamp(0px, 2.7vw, 10px);
    margin: 0 clamp(0px, 1.3vw, 5px);
    font-size: clamp(13px, 5.6vw, 21px);
  }

  .sec01-h2-ashi {
    width: clamp(0px, 16vw, 60px);
    left: clamp(-70px, -18.7vw, 0px);
  }

  .sec01-h2-ashi.right_ {
    right: clamp(-70px, -18.7vw, 0px);
  }




  .sec01__anchor {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0px, 6.7vw, 25px);
  }

  .sec01__anchor a {
    justify-content: flex-start;
    padding-left: clamp(0px, 21.3vw, 100px);
    max-width: 380px;
    width: 90%;
    height: 46px;
    box-shadow: 4px 4px 0px 1px #15257E;
  }

  .sec01__anchor a p {
    font-size: clamp(14px, 4.8vw, 18px);
  }

  .sec01__anchor a img {
    width: clamp(10px, 6.4vw, 24px);
  }

}

/* ==============================


sec02


=================================*/
.sec02 {
  position: relative;
  z-index: 1;
}

.sec02>div {
  width: 100%;
  overflow: hidden;
}


.sec02a,
.sec02b,
.sec02c {
  transform: translateY(0px) !important;
}

.sec02a {
  text-align: center;
  line-height: 2;
  font-size: clamp(24px, 2.9vw, 40px);
  background: url(../img/sec02__bg-01.png) top center / cover no-repeat;
  padding-top: clamp(119px, 12.4vw, 10000px);
  padding-bottom: clamp(32px, 3.3vw, 100000px);

}

.sec02a .inner01 {
  position: relative;
}

.sec02b {
  background: url(../img/sec02__bg-02.png) 65% center/ cover no-repeat;
  padding: 60px 0 70px;
}

.sec02c {
  background: url(../img/sec02__bg-03.png) 30% center / cover no-repeat;
  padding: 60px 0 70px;
}

.sec02__prd {
  display: flex;
  align-items: center;
  gap: clamp(0px, 10.6vw, 145px);

}

.sec02c .sec02__prd {
  flex-direction: row-reverse;
  gap: clamp(0px, 12.4vw, 170px);
}

.sec02__prd-txt {
  position: relative;
  background-color: #FFFEE2;
  padding: 80px 10px 55px;
  width: clamp(0px, 31.3vw, 430px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 5px 5px 0px 0px #4D9A94;
  font-size: clamp(17px, 2vw, 28px);
}

.sec02__prd-txt span {
  position: absolute;
  top: -280px;
  left: 20%;
  height: 320px;
  width: 3px;
  background-color: #4D9A95;
}


.sec02__prd-txt span:nth-of-type(1) {
  left: inherit;
  right: 20%;
}

.sec02__prd-txt span::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #4D9A95;
}

.sec02__prd-img {
  position: relative;
}

.sec02__prd-img::before,
.sec02__prd-img::after {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: 1;
}

.sec02__prd-img::before {
  top: -35px;
  right: clamp(-125px, -9.1vw, 0px);
  width: clamp(0px, 6.7vw, 92px);
  height: clamp(0px, 18vw, 247px);

  background: url(../img/sec02__card-ttl-01.png) no-repeat center center/contain;
}

.sec02c .sec02__prd-img::before {
  background: url(../img/sec02__card-ttl-02.png) no-repeat center center/contain;
}

.sec02__prd-img::after {
  bottom: 0;
  right: clamp(-185px, -13.5vw, 0px);
  width: clamp(0px, 10.4vw, 143px);
  height: clamp(0px, 5.3vw, 72px);

  background: url(../img/sec02__card-price.png) no-repeat center center/contain;
}

.sec02__prd-img img {
  width: clamp(0px, 37.7vw, 430px);
  filter: drop-shadow(10px 10px 8px rgba(125, 76, 81, 0.7));
}

.sec02c .sec02__prd-img img {
  filter: drop-shadow(10px 10px 8px rgba(74, 110, 106, 0.7));
}

.sec02 .ashiato-long {
  padding: 70px 0;
}

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


  .sec02a {
    line-height: 1.8;
    background: url(../img/sec02__bg-01_sp.png) top center / cover no-repeat;
    font-size: clamp(13px, 5.6vw, 21px);
    padding-top: clamp(0px, 21.3vw, 80px);
    padding-bottom: clamp(0px, 4vw, 15px);
  }

  .sec02b {
    background: url(../img/sec02__bg-02.png) 53% center/ cover no-repeat;
    padding: 35px 0;
  }

  .sec02c {
    background: url(../img/sec02__bg-03.png) 40% center / cover no-repeat;
    padding: 35px 0;
  }

  .sec02b .inner01,
  .sec02c .inner01 {
    width: 100%;
  }

  .sec02__prd {
    gap: clamp(0px, 4vw, 15px) !important;
  }

  .sec02__prd-txt {
    padding: clamp(0px, 6.7vw, 25px) clamp(0px, 1.9vw, 7px) clamp(0px, 3.5vw, 13px);
    width: clamp(0px, 45.3vw, 170px);
    font-size: clamp(10px, 3.7vw, 14px);
    margin-top: clamp(0px, 9.3vw, 35px);
    line-height: 1.7;
    box-shadow: 3px 3px 0px 0px #4D9A94;
  }

  .sec02__prd-txt span {
    top: clamp(-150px, -40vw, 0px);
    height: clamp(0px, 45.3vw, 170px);
    width: 2px;
    left: 28%;
  }

  .sec02__prd-txt span:nth-of-type(1) {
    right: 28%;
  }

  .sec02__prd-txt span::before {
    width: clamp(4px, 1.6vw, 6px);
    height: clamp(4px, 1.6vw, 6px);
  }


  .sec02__prd-img::before {
    top: clamp(-23px, -6.1vw, 0px);
    right: clamp(-52px, -13.9vw, 0px);
    width: clamp(0px, 9.9vw, 37px);
    height: clamp(0px, 27.2vw, 102px);
  }

  .sec02__prd-img::after {
    right: clamp(-94px, -25.1vw, 0px);
    width: clamp(0px, 20vw, 75px);
    height: clamp(0px, 10.1vw, 38px);
  }

  .sec02b .sec02__prd-img::before {
    right: clamp(0px, 48vw, 180px);
  }

  .sec02b .sec02__prd-img::after {
    right: clamp(0px, 51.7vw, 194px);
  }

  .sec02__prd-img img {
    width: clamp(0px, 48vw, 180px);
    filter: drop-shadow(4px 4px 4px rgba(125, 76, 81, 0.5));
  }

  .sec02c .sec02__prd-img img {
    filter: drop-shadow(4px 4px 4px rgba(74, 110, 106, 0.5));
  }

  .sec02 .ashiato-long {
    padding: 45px 0;
  }
}

/* ==============================


sec03


=================================*/
.sec03 {
  background-color: #F8C3C4;
  margin-top: -90px;
  padding: 240px 0 150px;
  position: relative;
  overflow: hidden;
}

.sec03 .inner01 {
  background-color: #fff;
  border-radius: 30px;
  padding: 150px 10%;
  position: relative;
}

.sec03-dog {
  position: absolute;
}

.dsec03-dog-1 {
  width: clamp(0px, 29.9vw, 410px);
  top: clamp(-150px, -10.9vw, 0px);
  right: clamp(-100px, -7.3vw, 0px);
}

.dsec03-dog-2 {
  width: clamp(0px, 18.68vw, 256px);
  bottom: clamp(0px, 58.39vw, 800px);
  left: clamp(-150px, -10.9vw, 0px);
}

.dsec03-dog-3 {
  width: clamp(0px, 15.3vw, 210px);
  bottom: clamp(-430px, -31.3vw, 0px);
  right: clamp(30px, 2.1vw, 30px);
}

.sec03-nami {
  position: absolute;
  width: clamp(0px, 75.3vw, 1032px);
}

.dsec03-nami-1 {
  top: clamp(0px, 10.9vw, 150px);
  left: clamp(-600px, -43.7vw, 0px);
}

.dsec03-nami-2 {
  top: 50%;
  right: clamp(-100px, -7.3vw, 0px);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.dsec03-nami-3 {
  bottom: clamp(0px, 5.8vw, 80px);
  left: clamp(-400px, -29.2vw, 0px);
}



.sec03-prd {
  margin-bottom: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  gap: clamp(0px, 7.3vw, 100px);
}

.sec03-prd>p {
  font-size: clamp(19px, 2.3vw, 32px);
  position: absolute;
  top: clamp(-40px, -2.9vw, 0px);
  left: 0;
  z-index: 1;
}

.sec03-prd.two>p {
  top: 90px;
}

.sec03-prd>p::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 40%;
  left: clamp(-50px, -3.6vw, 0px);
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: clamp(0px, 6.9vw, 94px);
  height: clamp(0px, 6.9vw, 95px);
  background: url(../img/sec03__icon.png) no-repeat center center/contain;
  z-index: -1;
}

.sec03-prd__ttl {
  position: relative;
  width: clamp(0px, 18.2vw, 250px);
  padding-bottom: clamp(0px, 2.9vw, 40px);
}



.sec03-prd__slide {
  position: relative;
  width: fit-content;
  height: auto;
}

.sec03-prd__slide img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  width: clamp(0px, 43.8vw, 600px);

}

.two .sec03-prd__slide img {
  width: clamp(0px, 20.1vw, 275px);
}

.sec03-prd__slide img.active {
  opacity: 1;
  position: relative;
}


.one .sec03-prd__slide::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: clamp(-280px, -25.5vw, 0px);
  left: clamp(-100px, -9.1vw, 0px);
  width: clamp(0px, 32.3vw, 355px);
  height: clamp(0px, 23.3vw, 256px);
  background: url(../img/sec03__fuki.png) no-repeat center center/contain;
}

@media screen and (max-width: 767px) {
  .sec03 {
    padding: clamp(0px, 58.6vw, 220px) 0 clamp(0px, 34.6vw, 130px);
  }

  .sec03 .inner01 {
    padding: clamp(0px, 40vw, 150px) 6% 80px;
  }

  .dsec03-dog-1 {
    width: clamp(0px, 40.3vw, 151px);
    top: clamp(0px, 26.6vw, 100px);
    right: clamp(-30px, -8vw, 0px);
  }

  .dsec03-dog-2 {
    width: clamp(0px, 29.6vw, 111px);
    bottom: clamp(0px, 213.33vw, 800px);
    left: clamp(-50px, -13.3vw, 0px);
  }

  .dsec03-dog-3 {
    width: clamp(0px, 19.4vw, 73px);
    bottom: clamp(-140px, -37.3vw, 0px);
    right: clamp(30px, 8vw, 30px);
  }

  .sec03-nami {
    width: clamp(0px, 140.2vw, 526px);
  }

  .dsec03-nami-1 {
    top: clamp(0px, 80vw, 300px);
    left: clamp(-300px, -80vw, 0px);
  }

  .dsec03-nami-2 {
    top: 40%;
    right: clamp(-300px, -80vw, 0px);
  }

  .dsec03-nami-3 {
    bottom: clamp(0px, 106.6vw, 400px);
    left: clamp(-300px, -80vw, 0px);
  }


  .sec03-prd {
    margin-bottom: clamp(0px, 21.3vw, 80px);
    flex-direction: column;
    align-items: center;
    position: relative;
    gap: 20px;
  }

  .two.sec03-prd {
    gap: 15px;
  }

  .one.sec03-prd::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: clamp(-240px, -64vw, 0px);
    left: 0;
    width: clamp(0px, 77.1vw, 289px);
    height: clamp(0px, 55.4vw, 208px);
    background: url(../img/sec03__fuki_sp.png) no-repeat center center/contain;
  }

  .sec03-prd>p,
  .sec03-prd.two>p {
    font-size: clamp(14px, 6.4vw, 24px);
    top: clamp(-10px, -2.7vw, 0px);
    left: clamp(0px, 6.7vw, 25px);
  }

  .sec03-prd>p::before {
    top: 40%;
    left: clamp(-30px, -8vw, 0px);
    width: clamp(0px, 14.4vw, 54px);
    height: clamp(0px, 14.7vw, 55px);
  }


  .sec03-prd__ttl {
    width: clamp(0px, 29.3vw, 110px);
    padding-bottom: 0px;
  }

  .sec03-prd__slide img {
    width: 100%;
  }

  .two .sec03-prd__slide img {
    width: clamp(0px, 34.7vw, 130px);
  }

  .one .sec03-prd__slide::before {
    display: none;
  }

}

/* --- present -------------------------------- */

.sec03-present__ttl {
  max-width: 625px;
  margin: 0 auto 90px;
  width: 70%;
}

.sec03-present__img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 6vw, 95px);
}

.sec03-present__img>div {
  position: relative;
}

.sec03-present__img>div:nth-of-type(1) {
  max-width: 365px;
}

.sec03-present__img>div:nth-of-type(2) {
  max-width: 472px;
}

.sec03-present__img>div:nth-of-type(2)::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: clamp(-110px, -10vw, 0px);
  right: clamp(10px, 0.91vw, 0px);
  width: clamp(0px, 28.18vw, 310px);
  height: clamp(0px, 12.36vw, 136px);
  background: url(../img/sec03__present-img-02-kome.png) no-repeat center center/contain;
}

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

  .sec03-present__ttl {
    max-width: 400px;
    margin: 0 auto 20px;
    width: 100%;
  }

  .sec03-present__img {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0px, 24vw, 90px);
  }



  .sec03-present__img>div:nth-of-type(1),
  .sec03-present__img>div:nth-of-type(2) {
    max-width: 370px;
    width: 90%;
  }

  .sec03-present__img>div:nth-of-type(2)::before {
    top: clamp(-70px, -18.66vw, 0px);
    right: 0px;
    width: clamp(0px, 57.6vw, 216px);
    height: clamp(0px, 22.66vw, 85px);
    background: url(../img/sec03__present-img-02-kome_sp.png) no-repeat center center/contain;
  }
}

/* ==============================


sec04


=================================*/
.sec04 {
  background-color: #F7FCFF;
  padding: 150px 0;
}

.sec04 h3 {
  margin-bottom: 100px;
}

.sec04-map-kome {
  position: relative;
  padding: 30px 5%;
  background-color: #FFF9AE;
  box-shadow: 7px 7px 0px 0px #91D0CB;
  margin-bottom: 120px;
}

.sec04-map-kome::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -15px;
  left: -30px;
  width: 61px;
  height: 67px;
  background: url(../img/sec04__map-icon.png) no-repeat center center/contain;
}

.sec04-map-kome li {
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom: 10px;
}

.sec04-map-kome li:nth-last-of-type(1) {
  margin-bottom: 0;
}

.sec04-poster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

.sec04-poster__txt {
  width: clamp(0px, 35vw, 490px);
}

.sec04-poster__txt div {
  margin-bottom: clamp(0px, 4.4vw, 60px);
}

.sec04-poster__txt p {
  position: relative;
  display: inline-block;
  font-size: clamp(19px, 2.3vw, 32px);
  margin-bottom: clamp(0px, 3.6vw, 50px);
}

.sec04-poster__txt p::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: clamp(-35px, -2.5vw, 0px);
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/sec04__poster-nami.png) no-repeat center center/contain;
}

.sec04-poster__txt ul li {
  padding-left: 1em;
  text-indent: -1em;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 500;
}


.sec04-poster__txt p,
.sec04-poster__txt ul {
  margin-left: 6%;
}

.sec04-poster__img {
  position: relative;
  width: clamp(0px, 33.2vw, 455px);
}

.sec04-poster__img::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: clamp(0px, 7.3vw, 100px);
  right: clamp(-90px, -6.6vw, 0px);
  width: clamp(0px, 19.3vw, 265px);
  height: clamp(0px, 10.3vw, 141px);
  background: url(../img/sec04__poster-dog.png) no-repeat center center/contain;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .sec04 {
    padding: clamp(0px, 40vw, 100px) 0;
  }

  .sec04 h3 {
    margin-bottom: clamp(0px, 8vw, 30px);
  }

  .sec04-map-kome {
    position: relative;
    padding: clamp(0px, 9.3vw, 35px) 5%;
    box-shadow: 4px 4px 0px 0px #91D0CB;
    margin-bottom: clamp(0px, 93.3vw, 350px);
  }

  .sec04-map-kome::before {
    top: clamp(-15px, -4vw, 0px);
    left: clamp(0px, 5.3vw, 20px);
    width: clamp(0px, 8vw, 30px);
    height: clamp(0px, 9.1vw, 34px);
  }

  .sec04-poster {
    flex-direction: column-reverse;
    gap: clamp(0px, 26.7vw, 100px);
  }

  .sec04-poster__txt,
  .sec04-poster__img {
    width: 90%;
    position: relative;
  }

  .sec04-poster__txt p {
    font-size: clamp(14px, 6.1vw, 23px);
    margin-bottom: clamp(0px, 10.7vw, 40px);
  }

  .sec04-poster__txt p::before {
    bottom: clamp(-30px, -8vw, 0px);
    left: 0;
    width: 100%;
    height: 100%;
  }

  .sec04-poster__txt ul li {
    font-size: clamp(10px, 3.7vw, 14px);
  }

  .sec04-poster__txt p,
  .sec04-poster__txt ul {
    margin-left: 0;
  }

  .sec04-poster__img::before {
    top: clamp(-280px, -74.66vw, 0px);
    right: 0;
    width: clamp(0px, 82.93vw, 311px);
    height: clamp(0px, 64.26vw, 241px);

    background: url(../img/sec04__poster-fuki_sp.png) no-repeat center center/contain;
  }

}

/* --- map close -------------------------------- */
.sec04-map-close {
  width: 100%;
  height: 885px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  justify-content: center;
  background: url(../img/sec04__map.png) no-repeat center center/contain;
  margin-bottom: 100px;
  position: relative;
  z-index: -1;
}

.sec04-map-close::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F7FCFF;
  z-index: -1;
  opacity: 0.9;
}

.sec04-map-close__anime {
  max-width: 345px;
}

.sec04-map-close__txt {
  text-align: center;
  font-size: 34px;
}

.sec04-map-close__txt p:nth-of-type(1)>span {
  font-size: 34px;
  color: #fff;
  display: inline-block;
  padding: 1px 20px 8px;
  margin-right: 10px;
  background-color: #15257E;
  line-height: 1;
  letter-spacing: 0.02em;
}

.sec04-map-close__txt p:nth-of-type(1)>span>span {
  font-size: 50px;
  color: #fff;
  line-height: 1;
}

.sec04-map-close__txt p:nth-of-type(2) {
  font-size: 14px;
  color: #464646;
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .sec04-map-close {
    width: 100%;
    height: auto;
    gap: clamp(0px, 5.3vw, 20px);
    margin-bottom: clamp(0px, 5.3vw, 20px);
    padding: clamp(0px, 21.3vw, 80px) 0;
    background: url(../img/sec04__map_sp.png) no-repeat center center/contain;
  }

  .sec04-map-close__anime {
    max-width: clamp(0px, 49.3vw, 185px);
  }

  .sec04-map-close__txt {
    font-size: clamp(12px, 5.3vw, 20px);
  }

  .sec04-map-close__txt p:nth-of-type(1)>span {
    font-size: clamp(12px, 5.3vw, 20px);
    padding: clamp(0px, 0.8vw, 3px) clamp(0px, 2.7vw, 10px) clamp(0px, 1.6vw, 6px);
    margin-right: clamp(0px, 1.3vw, 5px);
  }

  .sec04-map-close__txt p:nth-of-type(1)>span>span {
    font-size: clamp(16px, 6.9vw, 26px);
  }

  .sec04-map-close__txt p:nth-of-type(2) {
    font-size: clamp(10px, 3.2vw, 12px);
    margin-top: clamp(0px, 5.3vw, 20px);
  }

}

/* ==============================


sec05


=================================*/


.sec05 {
  background-color: #D3EDFB;
  padding: 200px 0;
  overflow: hidden;
}


.sec05 h3 {
  margin-bottom: 80px;
}

.sec05-faq {
  position: relative;
  margin-bottom: 130px;
}


.sec05-faq>div {
  position: absolute;
}

.sec05-dog-1 {
  width: clamp(0px, 8vw, 110px);
  top: clamp(-100px, -7.2vw, 0px);
  left: clamp(-140px, -10.2vw, 0px);
}

.sec05-dog-2 {
  width: clamp(0px, 18.9vw, 260px);
  top: clamp(-200px, -14.5vw, 0px);
  right: clamp(-200px, -14.5vw, 0px);
}


.sec05-faq dl {
  margin-bottom: 30px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 4px 4px 0px 2px #15257E;
  padding: 0 5%;
}

.sec05-faq dl:nth-last-of-type(1) {
  margin-bottom: 0;
}

.sec05-faq dl dt {
  position: relative;
  cursor: pointer;
  padding: 15px 0 15px calc(1% + 2.8em);
}

.sec05-faq dl dt::after,
.sec05-faq dl dd::before {
  font-family: "Noto Sans", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 1;
}

.sec05-faq dl dt::after {
  position: absolute;
  content: "Q";
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.sec05-faq dl dt::before {
  content: '';
  width: 15px;
  height: 15px;
  margin-top: 0px;
  border-top: solid 3px #15257E;
  border-right: solid 3px #15257E;
  position: absolute;
  top: 45%;
  transform: translateY(-50%) rotate(135deg);
  -webkit-transform: translateY(-50%) rotate(135deg);
  -ms-transform: translateY(-50%) rotate(135deg);
  right: 2%;
  transition: 0.35s;
}

.sec05-faq dl dt.active::before {
  transform: translateY(-10%) rotate(-45deg);
}


.sec05-faq dl dd {
  cursor: pointer;
  background-image: radial-gradient(circle, #15257e 1px, transparent 1px);
  background-position: left top;
  background-repeat: repeat-x;
  background-size: 9px 2px;
  padding: 20px 5px;
  position: relative;
  display: flex;
  gap: 1.8em;
}

.sec05-faq dl dd::before {
  content: "A";
  display: block;
  margin-top: 2px;
}


.sec05 .ashiato-long {
  margin-bottom: 200px;
}

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

  .sec05 {
    padding: 100px 0;
  }

  .sec05 h3 {
    margin-bottom: clamp(0px, 13.3vw, 50px);
  }

  .sec05-faq {
    margin-bottom: clamp(0px, 42.7vw, 160px);
  }

  .sec05-dog-1 {
    width: clamp(0px, 16.8vw, 63px);
    top: inherit;
    bottom: clamp(-100px, -26.6vw, 0px);
    left: 0px;
  }

  .sec05-dog-2 {
    width: clamp(0px, 34.9vw, 131px);
    top: inherit;
    bottom: clamp(-180px, -47.9vw, 0px);
    right: 0px;
  }

  .sec05-faq dl {
    margin-bottom: clamp(0px, 6.7vw, 25px);
    box-shadow: 4px 4px 0px 0px #15257E;
    padding: 0 7%;
  }

  .sec05-faq dl dt {
    padding: 15px 0 15px calc(1% + 2em);
  }

  .sec05-faq dl dt::after,
  .sec05-faq dl dd::before {
    font-size: clamp(11px, 4.8vw, 18px);
  }

  .sec05-faq dl dt::after {
    left: clamp(0px, 1.3vw, 5px);
  }


  .sec05-faq dl dt::before {
    width: 12px;
    height: 12px;
    border-top: solid 2px #15257E;
    border-right: solid 2px #15257E;
    right: 3%;
  }

  .sec05-faq dl dd {
    background-size: 6px 2px;
    gap: 1.1em;
  }

  .sec05-faq dl dd::before {
    margin-top: clamp(0px, 0.9vw, 3.5px);
  }


  .sec05 .ashiato-long {
    padding-top: clamp(0px, 5.33vw, 20px);
    margin-bottom: clamp(0px, 10.7vw, 40px);


  }

}

/* --- campaign -------------------------------- */

.sec05-camp__ttl {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto 80px;
  font-size: 40px;
  text-align: center;
}

.sec05-camp__ttl::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: -110px;
  left: -60px;
  width: 183px;
  height: 117px;
  background: url(../img/sec05__camp-ttl-fuki.png) no-repeat center center/contain;
}

.sec05-camp__ttl span {
  display: inline-block;
  position: relative;
}

.sec05-camp__ttl span::before {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/sec05__camp-ttl-nami.png) no-repeat center center/contain;
}

.sec05-camp__img {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

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

  .sec05-camp__ttl {
    margin: 0 auto clamp(0px, 10.7vw, 40px);
    font-size: clamp(14px, 6.4vw, 24px);
  }

  .sec05-camp__ttl::before {
    top: clamp(-70px, -18.7vw, 0px);
    left: clamp(-20px, -5.3vw, 0px);
    width: clamp(0px, 34.7vw, 130px);
    height: clamp(0px, 22.7vw, 85px);
    background: url(../img/sec05__camp-ttl-fuki_sp.png) no-repeat center center/contain;
  }

  .sec05-camp__ttl span::before {
    bottom: clamp(-20px, -5.3vw, 0px);
    left: 0;
  }

  .sec05-camp__img {
    flex-direction: column;
    justify-content: center;
    gap: clamp(0px, 4vw, 15px);
  }


}

/* ==============================


footer


=================================*/
footer {
  background-color: #F8C3C4;
  padding: 140px 10% 100px;
  text-align: center;
}

footer a {
  font-size: 28px;
  margin-bottom: 10px;
}

footer p {
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  footer {
    padding: 80px 2% 50px;
  }

  footer a {
    font-size: clamp(10px, 4.3vw, 16px);
    margin-bottom: clamp(0px, 2.7vw, 10px);
  }

  footer p {
    font-size: clamp(10px, 2.9vw, 11px);
  }

}

/* ==============================


follow btn


=================================*/

.follow-btn {
  position: fixed;
  z-index: 10;
  right: 3%;
  bottom: 4%;
  max-width: 66px;
  transform: translateY(120px) scale(1);
  transition: transform 1s ease;
  pointer-events: none;
  transition-delay: 0.3s;
}

.follow-btn.show {
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.follow-btn img {
  transform: scale(1.0);
}

.follow-btn img:hover {
  transform: scale(1.1);
}

@media screen and (max-width: 767px) {
  .follow-btn {
    right: 5%;
    bottom: 3%;
qq
    transform: translateY(100px) scale(1);
  }

}

/* ==============================


display none


=================================*/
/*::::::::::::pc用::::::::::::*/
@media screen and (min-width: 1101px) {
  .pad_non {
    display: none !important;
  }

  .sp_non {
    display: none !important;
  }

  .pad-sp_non {
    display: none !important;
  }
}

/*::::::::::::pad用::::::::::::*/
@media screen and (min-width: 768px) and (max-width: 1100px) {
  .pc_non {
    display: none !important;
  }

  .sp_non {
    display: none !important;
  }

  .pc-sp_non {
    display: none !important;
  }
}

/*::::::::::::sp用:::::::::::*/
@media screen and (max-width: 767px) {
  .pc_non {
    display: none !important;
  }

  .pad_non {
    display: none !important;
  }

  .pc-pad_non {
    display: none !important;
  }
}