body {
  font-family:  YakuHanMP, "Noto Serif JP", '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif!important;
  padding: 0!important;
  margin: 0;
  letter-spacing: 2px;
  font-weight: 700;
}

.josefin-sans {
  font-family: "Josefin Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 650;
}
.josefin-sans-italic {
  font-family: "Josefin Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 650;
  font-style: italic;
}

.gothic {
  font-family: sans-serif;
}

p {
  line-height: 1.8;
}


.lh-03 {line-height: 0.3;}
.lh-04 {line-height: 0.4;}
.lh-05 {line-height: 0.5;}
.lh-06 {line-height: 0.6;}
.lh-07 {line-height: 0.7;}
.lh-08 {line-height: 0.8;}
.lh-09 {line-height: 0.9;}
.lh-10 {line-height: 1;}
.lh-11 {line-height: 1.1;}
.lh-12 {line-height: 1.2;}
.lh-13 {line-height: 1.3;}
.lh-14 {line-height: 1.4;}
.lh-15 {line-height: 1.5;}
.lh-16 {line-height: 1.6;}
.lh-17 {line-height: 1.7;}
.lh-18 {line-height: 1.8;}
.lh-19 {line-height: 1.9;}
.lh-20 {line-height: 2.0;}
.lh-21 {line-height: 2.1;}
.lh-22 {line-height: 2.2;}
.lh-23 {line-height: 2.3;}
.lh-24 {line-height: 2.4;}
.lh-25 {line-height: 2.5;}
.lh-26 {line-height: 2.6;}
.lh-27 {line-height: 2.7;}
.lh-28 {line-height: 2.8;}
.lh-29 {line-height: 2.9;}
.lh-30 {line-height: 3.0;}

.ls-1 {letter-spacing: 1px;}
.ls-2 {letter-spacing: 2px;}
.ls-3 {letter-spacing: 3px;}
.ls-4 {letter-spacing: 4px;}
.ls-5 {letter-spacing: 5px;}
.ls-6 {letter-spacing: 6px;}
.ls-7 {letter-spacing: 7px;}
.ls-8 {letter-spacing: 8px;}
.ls-9 {letter-spacing: 9px;}
.ls-10 {letter-spacing: 10px;}

/* =============  角丸 ============ */
.rounded05 {border-radius:5px}
.rounded10 {border-radius:10px}
.rounded15 {border-radius:15px}
.rounded20 {border-radius:20px}
.rounded25 {border-radius:25px}
.rounded30 {border-radius:30px}
.rounded35 {border-radius:35px}
.rounded40 {border-radius:40px}
.rounded45 {border-radius:45px}
.rounded50 {border-radius:50px}

/* =============  上だけ角丸 ============ */
.rounded05-up {border-radius:5px 5px 0 0}
.rounded10-up {border-radius:10px 10px 0 0}
.rounded15-up {border-radius:15px 15px 0 0}
.rounded20-up {border-radius:20px 20px 0 0}
.rounded25-up {border-radius:25px 25px 0 0}
.rounded30-up {border-radius:30px 30px 0 0}
.rounded35-up {border-radius:35px 35px 0 0}
.rounded40-up {border-radius:40px 40px 0 0}
.rounded45-up {border-radius:45px 45px 0 0}
.rounded50-up {border-radius:50px 50px 0 0}

/* =============  下だけ角丸 ============ */
.rounded05-down {border-radius: 0 0 5px 5px}
.rounded10-down {border-radius: 0 0 10px 10px}
.rounded15-down {border-radius: 0 0 15px 15px}
.rounded20-down {border-radius: 0 0 20px 20px}
.rounded25-down {border-radius: 0 0 25px 25px}
.rounded30-down {border-radius: 0 0 30px 30px}
.rounded35-down {border-radius: 0 0 35px 35px}
.rounded40-down {border-radius: 0 0 40px 40px}
.rounded45-down {border-radius: 0 0 45px 45px}
.rounded50-down {border-radius: 0 0 50px 50px}

/* =============  左だけ角丸 ============ */
.rounded05-left {border-radius:5px 0 0 5px}
.rounded10-left {border-radius:10px 0 0 10px}
.rounded15-left {border-radius:15px 0 0 15px}
.rounded20-left {border-radius:20px 0 0 20px}
.rounded25-left {border-radius:25px 0 0 25px}
.rounded30-left {border-radius:30px 0 0 30px}
.rounded35-left {border-radius:35px 0 0 35px}
.rounded40-left {border-radius:40px 0 0 40px}
.rounded45-left {border-radius:45px 0 0 45px}
.rounded50-left {border-radius:50px 0 0 50px}

/* =============  右だけ角丸 ============ */
.rounded05-right {border-radius:0 0 5px 5px}
.rounded10-right {border-radius:0 0 10px 10px}
.rounded15-right {border-radius:0 0 15px 15px}
.rounded20-right {border-radius:0 0 20px 20px}
.rounded25-right {border-radius:0 0 25px 25px}
.rounded30-right {border-radius:0 0 30px 30px}
.rounded35-right {border-radius:0 0 35px 35px}
.rounded40-right {border-radius:0 0 40px 40px}
.rounded45-right {border-radius:0 0 45px 45px}
.rounded50-right {border-radius:0 0 50px 50px}

/* 幅 */
  /*60px-150px*/
  .py-haba01 {
    padding-top: clamp(3.75rem, 2.679rem + 5.36vw, 9.375rem);
    padding-bottom: clamp(3.75rem, 2.679rem + 5.36vw, 9.375rem);
  }
  .pt-haba01 {
    padding-top: clamp(3.75rem, 2.679rem + 5.36vw, 9.375rem);
  }
  .pb-haba01 {
    padding-bottom: clamp(3.75rem, 2.679rem + 5.36vw, 9.375rem);
  }

  /*30px-75px*/
  .py-haba02 {
    padding-top: clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
    padding-bottom: clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
  }
  .pt-haba02 {
    padding-top: clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
  }
  .pb-haba02 {
    padding-bottom: clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
  }

  .my-haba02 {
    margin-top: clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
    margin-bottom: clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
  }
  .mt-haba02 {
    margin-top: clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
  }
  .mb-haba02 {
    margin-bottom: clamp(1.875rem, 1.313rem + 2.81vw, 4.688rem);
  }

  /*90px-180px*/
  .py-haba03 {
    padding-top: clamp(5.625rem, 4.5rem + 5.63vw, 11.25rem);
    padding-bottom: clamp(5.625rem, 4.5rem + 5.63vw, 11.25rem);
  }
  .pt-haba03 {
    padding-top: clamp(5.625rem, 4.5rem + 5.63vw, 11.25rem);
  }
  .pb-haba03 {
    padding-bottom: clamp(5.625rem, 4.5rem + 5.63vw, 11.25rem);
  }


  .mt-haba01 {
    margin-top: clamp(3.75rem, 2.679rem + 5.36vw, 9.375rem);
  }

  .mt-30-90 {
    margin-top: clamp(1.875rem, 1.125rem + 3.75vw, 5.625rem);
  }

  .py-haba02 {
      padding-top: clamp(1.87rem, 1.3395rem + 2.68vw, 4.8675rem);
      padding-bottom: clamp(1.87rem, 1.3395rem + 2.68vw, 4.8675rem);
  }

  .py-haba03 {
    padding-top: clamp(6.25rem, 4.375rem + 9.38vw, 15.625rem);
    padding-bottom: clamp(6.25rem, 4.375rem + 9.38vw, 15.625rem);
  }
  .pt-haba03 {
    padding-top: clamp(6.25rem, 4.375rem + 9.38vw, 15.625rem);
  }
  .pb-haba03 {
    padding-bottom: clamp(6.25rem, 4.375rem + 9.38vw, 15.625rem);
  }

.main-color {
  color: #014099;
}
.bg-main-color {
  background-color: #014099;
}
.bg-main {
  background-image: url(../img/mainimgs.jpg);
  background-size: cover;
  background-position: center top;
  height: 88vh;
}
@media (min-width: 768px) {
  .bg-main {
    background-image: url(../img/mainimg.jpg);
  }
}
@media (min-width: 992px) {
  .bg-main {
    height: 100vh;
  }
}

.logo {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 200px;
  webkit-transform: translate(0%,0%);
    -moz-transform: translate(0%,0%);
    -ms-transform: translate(0%,0%);
    -o-transform: translate(0%,0%);
    transform: translate(0%,0%);
}
@media (min-width: 992px) {
  .logo {
    width: 250px;
  }
}

.setumei {
  font-size: clamp(1.25rem, 0.911rem + 1.69vw, 2.5rem);
  text-align: justify;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin-left: auto;
  margin-right: auto;
}
.text-combine {
text-combine-upright: all;
-ms-text-combine-horizontal: all;
/* IE対応 */
}
@media (min-width: 992px) {
  .setumei {
    line-height: 2.5;
  }
}

.item01 {
  width: 200px;
}
@media (min-width: 576px) {
  .item01 {
    width: 250px;
  }
}

.item02 {
  width: 100px;
}

h2.nayami {
  background-color: #6c9eab;
  border-radius: 40px;
  padding: 25px;
  color: #fff;
  font-weight: bold;
  line-height: 1.5;
}

.arrow-bottom {
  width: 50px;
}

.arrow-bottom2 {
  width: 150px;
}

.hanadumari {
  width: 200px;
}

.nayamikoumoku {
  font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem);
}

.checkbox {
  width: 34px;
  margin-right: 10px;
}

h2.kaiketsu {
  color: #014099;
  text-align: center;
  line-height: 1.8;
  padding: 50px 20px;
  border-top: solid 3px #014099;
  border-bottom: solid 3px #014099;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

span.marker {
    background: linear-gradient(transparent 30%, #f7ff64 30%);
}

.merit-box {
  border-radius: 10px 10px 0 0;
  background-color: #014099;
}
.merit-content {
  border-radius: 0 0 10px 10px;
  background-color: #fff;
  color: #014099;
}
@media (min-width: 768px) {
  .merit-box {
    border-radius: 10px 0 0 10px;;
  }
  .merit-content {
    border-radius: 0 10px 10px 0;
  }
}

.cormorant-infant-medium {
  font-family: "Cormorant Infant", serif;
  font-weight: 500;
  font-style: normal;
}

.lh-10 {
  line-height: 1.0;
}
.lh-15 {
  line-height: 1.5;
}

.fz-10 {
  font-size: 10px;
}
.fz-12 {
  font-size: 12px;
}
.fz-14 {
  font-size: 14px;
}
.fz-15 {
  font-size: 15px;
}
.fz-20 {
  font-size: 20px;
}
.fz-24 {
  font-size: 24px;
}
.fz-30 {
  font-size: 30px;
}


.fz-16-22 {
    font-size: clamp(1rem, 0.898rem + 0.51vw, 1.375rem);
}

.fz-24-32 {
    font-size: clamp(1.5rem, 1.364rem + 0.68vw, 2rem);
}
.fz-60-90 {
  font-size: clamp(3.75rem, 3.242rem + 2.54vw, 5.625rem);
}

.matome {
  font-size: clamp(1.125rem, 0.898rem + 1.14vw, 1.75rem);
}

.link-btn1 span {
  color: #014099;!important;
}

.link-btn1:before {
background: #fff;
}

.link-btn1 {
 background: #f7ff64;
 text-align: center;
 display: block;
 padding-top: 25px;
 padding-bottom: 25px;
 padding-left: 10px;
 padding-right: 10px;
 width: 100%;
 display: inline-block;
 position: relative;
 overflow: hidden;
 text-align: center;
 transition: ease .2s;
 text-decoration: none;
}

.link-btn1 span {
position: relative;
z-index: 3;
}

.link-btn1:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
background: #00afdd;
}

.link-btn1:hover:before{
transform-origin:left top;
transform:scale(1, 1);
}

.link-btn1:hover span {
  color: #fff;!important;
}

#area-footer.f-01 {
position: relative;
}
.f-01 .footer-logo {
max-width: 250px;
}
@media (min-width: 768px) {
.f-01 .footer-logo {
  max-width: 350px;
}
}

.f-01 .bb-1-fff-br {
border-bottom: 1px solid #000;
}
@media(min-width: 992px) {
.f-01 .bb-1-fff-br {
  border-bottom: 0px;
  border-right: 1px solid #000;
}
}

.text-dark {
  color: #000!important;
}

.title-copy.first {
    font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.625rem);
    line-height: 1.5;
    margin-bottom: 0;
    position: absolute;
    bottom: 52%;
    letter-spacing: 1.5px;
    left: 9%;
    webkit-transform: translate(0%,0%);
    -moz-transform: translate(0%,0%);
    -ms-transform: translate(0%,0%);
    -o-transform: translate(0%,0%);
    transform: translate(0%,0%);
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
@media (min-width: 768px) {
  .title-copy.first {
    left: 15%;
    bottom: 55%;
  }
}
@media (min-width: 992px) {
  .title-copy.first {
    writing-mode: horizontal-tb;
    left: 5%;
  }
}
.title-copy.second {
    font-size: clamp(1.875rem, 1.282rem + 2.97vw, 4.063rem);
    line-height: 1.5;
    position: absolute;
    bottom: 23%;
    left: 5%;
    webkit-transform: translate(0%,0%);
    -moz-transform: translate(0%,0%);
    -ms-transform: translate(0%,0%);
    -o-transform: translate(0%,0%);
    transform: translate(0%,0%);
    margin-bottom: 0px;
    animation: fadeInSlide 1.5s ease-out 0.2s forwards;
}
}
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.title-copy.second.text-reveal {
    animation: textReveal 2s ease-out 0.3s forwards;
    background: linear-gradient(to right, #32afdd 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes textReveal {
    to {
        background-position: 0 0;
        -webkit-text-fill-color: #014099;
    }
}
.title-copy.third {
    position: absolute;
    bottom: 5%;
    left: 5%;
    webkit-transform: translate(0%,0%);
    -moz-transform: translate(0%,0%);
    -ms-transform: translate(0%,0%);
    -o-transform: translate(0%,0%);
    transform: translate(0%,0%);
}

@media (min-width: 768px) {
    .title-copy {
    font-size: 50px;
  }
}
@media (min-width: 992px) {
    .title-copy.first {
        bottom: 68%;
    }
    .title-copy.second {
        bottom: 35%;
    }
    .title-copy.third {
        bottom: 29%;
    }
}
@media (min-width: 1200px) {
    .title-copy {
      font-size: 60px;
  }
  .title-copy.first {
        bottom: 69%;
    }
}
@media (min-width: 1400px) {
    .title-copy {
      font-size: 70px;
    }
    .title-copy.first {
        bottom: 74%;
    }
    .title-copy.second {
        bottom: 38%;
    }
    .title-copy.third {
        bottom: 30%;
    }
}
@media (min-width: 1600px) {
    .title-copy {
      font-size: 75px;
  }
}
@media (min-width: 1700px) {
  .title-copy.first {
        bottom: 70%;
    }
}

.bg-white70 {
  padding: 2%;
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid #c8ab59;
  position: absolute;
  bottom: 1%;
  left: 50%;
  transform: translate(-50%,0%);
  width: 90%;
}
@media (min-width: 992px) {
  .bg-white70 {
    padding: 2%;
    background-color: rgba(255, 255, 255, .8);
    position: absolute;
    bottom: 1%;
    left: 5%;
    transform: translate(0%,0%);
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .bg-white70 {
    width: 45%;
  }
}
@media (min-width: 1400px) {
  .bg-white70 {
    width: 615px;
  }
}

.kyoudo-kaihatsu {
  font-size: clamp(1.125rem, 0.898rem + 1.14vw, 1.75rem);
  color: #c8ab59;
}

.kyoudo-kaihatsusetumei {
  font-size: clamp(0.75rem, 0.568rem + 0.91vw, 1.25rem);
  line-height: 1.5;
}

.nasapureitem {
  position: absolute;
  bottom: 0;
  right: 0%;
  width: 20%;
}
@media (min-width: 992px) {
  .nasapureitem {
      bottom: 20px;
      right: 0%;
      width: 30%;
  }
}

.amazon-arrow {
  width: 30px;
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translate(0,-50%);
  animation: blinking .8s ease-in-out infinite alternate;
}
@keyframes blinking {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.amazonbox {
  background-color: #232f3e;
  position: fixed;
  left: 50%;
  bottom: 0%;
  z-index: 100;
  height: 15vh;
  width: 100%;
  opacity: 0;
  transform: translate(-50%, 0%) translateX(-100px);
  animation: fadeInFromLeftMobile 0.8s ease-out forwards;
}
@media (min-width: 576px) {
  .amazonbox {
    height: 100px;
  }
}
@media (min-width: 992px) {
  .amazonbox {
    left: auto;
    right: 0%;
    width: 300px;
    height: 100px;
    transform: translateX(-100px);
    animation: fadeInFromLeftPC 0.8s ease-out forwards;
  }
}
@keyframes fadeInFromLeftMobile {
  to {
    opacity: 1;
    transform: translate(-50%, 0%) translateX(0);
  }
}
@keyframes fadeInFromLeftPC {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.amazonbox a {
  text-decoration: none;
}
.text-amazon01 {
  color: #fcd815;
  font-size: 14px;
  line-height: 1.0;
}
.text-amazon02 {
  color: #fcd815;
  font-size: 22px;
  line-height: 1.0;
  letter-spacing: 1.0px;
  margin-top: 10px;
}

.amazontext-haichi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
}
@media (min-width: 992px) {
  .amazontext-haichi {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translate(0%,-50%);
    width: 100%;
  }
}

.blur{
    animation-name:blurAnime;
    animation-duration:.5s;
    animation-fill-mode:forwards;
}

@keyframes blurAnime{
    from {
    filter: blur(120px);
    transform: scale(1);
    opacity: 0;
    }

    to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
    }
}


.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
    from {
        opacity: 0;
    transform: translateX(-200px);
    }

    to {
        opacity: 1;
    transform: translateX(0);
    }
}


.bg-main {
  animation: bg-main 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes bg-main {
  0% {
    clip-path: circle(0 at 25% 25%);
    -webkit-clip-path: circle(0 at 25% 25%);
  }

  100% {
    clip-path: circle(100% at 25% 25%);
    -webkit-clip-path: circle(100% at 25% 25%);
  }
}

h2.h2 {
    font-size: clamp(1.5rem, 1.093rem + 2.03vw, 3rem);
}

.fz-60-170 {
    font-size: clamp(3.75rem, 1.886rem + 9.32vw, 10.625rem);
}

.fz-20-30 {
    font-size: clamp(1.25rem, 1.081rem + 0.85vw, 1.875rem);
}

.fz-20-40 {
    font-size: clamp(1.25rem, 0.911rem + 1.69vw, 2.5rem);
}

.fz-30-40 {
    font-size: clamp(1.875rem, 1.706rem + 0.85vw, 2.5rem);
}
.fz-30-50 {
    font-size: clamp(1.875rem, 1.536rem + 1.69vw, 3.125rem);
}

.kyoudou {
    color: #014099;
    font-weight: bold;
    background: linear-gradient(90deg, rgba(1,64,153,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 90%, rgba(1,64,153,1) 100%);
    padding: 16px;
}

.kin-line {
    background: linear-gradient(90deg, rgba(1,64,153,1) 0%, rgba(200,171,89,1) 10%, rgba(200,171,89,1) 50%, rgba(200,171,89,1) 90%, rgba(1,64,153,1) 100%);
    padding: 3px 0;
}

.white-line {
    background: linear-gradient(90deg, rgba(1,64,153,1) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 90%, rgba(1,64,153,1) 100%);
    padding: 6px 0;
}

span.marker {
    background: linear-gradient(transparent 80%, #fff06b 80%);
}

.item03 {
    width: 180px;
}

#particles-js{ position:absolute; z-index: -1; width: 100%; height: 1300px; /*background-color: #ffffff;*/ background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
#particles-js {
    mix-blend-mode: plus-lighter;
    opacity: 0.3;
    width: 150%;
    height: 150%;
}



.bg-bajyu {
    background-color: #d9dad4;
}
.bg-kafuns {
    width: 80%;
}

@media (min-width: 768px) {
   .bg-kafun {
        background-image: url(../img/bg-kafun.jpg);]
        background-size: cover;
        background-position: center center;
        min-height: 1000px;
    }
    .bg-hanazumari  {
        background-image: url(../img/bg-hanadumari.jpg);]
        background-size: cover;
        background-position: center center;
        min-height: 1000px;
    } 
    .bg-kaze  {
        background-image: url(../img/bg-kaze.jpg);]
        background-size: cover;
        background-position: center center;
        min-height: 1000px;
    }
    .bg-point04  {
        background-image: url(../img/bg-point04.jpg);]
        background-size: cover;
        background-position: center center;
        min-height: 1000px;
    }
}

.box-p {
    padding: 4%;
}
@media (min-width: 992px) {
    .box-p {
        padding: 3%;
    }
}
@media (min-width: 1400px) {
    .box-p {
        padding: 2%;
    }
}

.box-p2 {
    padding: 0 4% 4% 4%;
}
@media (min-width: 992px) {
    .box-p2 {
        padding: 0 3% 3% 3%;
    }
}
@media (min-width: 1400px) {
    .box-p2 {
        padding: 0 2% 2% 2%;
    }
}

.fz-32-60 {
    font-size: clamp(2rem, 1.525rem + 2.37vw, 3.75rem);
}

.fz-20-40 {
    font-size: clamp(1.25rem, 0.911rem + 1.69vw, 2.5rem);
}
.fz-20-50 {
    font-size: clamp(1.25rem, 0.742rem + 2.54vw, 3.125rem);
}

.point01-box {
    position: absolute;
    top: 45%;
    left: 10%;
    webkit-transform: translate(-0%,-50%);
    -moz-transform: translate(-0%,-50%);
    -ms-transform: translate(-0%,-50%);
    -o-transform: translate(-0%,-50%);
    transform: translate(-0%,-50%);
}


.enmaru {
  opacity: 0; /* 初期状態で非表示 */
  transition: opacity 0.2s ease-in-out;
}

.enmaru.animate {
  opacity: 1;
  animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes img-wrap {
   0% {
    clip-path: circle(0 at 25% 25%);
    -webkit-clip-path: circle(0 at 25% 25%);
  }

  100% {
    clip-path: circle(100% at 25% 25%);
    -webkit-clip-path: circle(100% at 25% 25%);
  }
}

.text-yellow {
  color: #ffda20;
}

.p-5per-10 {
  padding: 5%;
}

.bg-grade {
  background: linear-gradient(90deg, rgba(1,64,153,1) 0%, rgba(65,215,255,1) 15%, rgba(0,175,221,1) 35%, rgba(65,215,255,1) 55%, rgba(36,190,231,1) 70%, rgba(65,215,255,1) 87%, rgba(1,64,153,1) 100%);
}

.fz-18 {
  font-size: 18px;
}

.fz-18-22 {
  font-size: 18px;
}
@media (min-width: 992px) {
  .fz-18-22 {
    font-size: 22px;
  }
}

.indent-1 {
    padding-left:1em;
    text-indent:-1em;
}

.hero-bottom {
  width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 12;
}

.fadeDown, .fadeLeft {
    opacity: 0;
    transition: opacity .8s ease-out, transform .8s ease-out;
}

.fadeDown {
    transform: translateY(-100px);
}

.fadeDown.active {
    opacity: 1;
    transform: translateY(0);
}

.fadeLeft {
    transform: translateX(-150px) translateY(-50%);
}

.fadeLeft.active {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}

.spacer {
    height: 100vh;
}

.kyoudo-img {
  background-image: url(../img/hosoyadoctor.jpg);
  background-size: cover;
  background-position: center top;
  min-height: 400px;
}

.bg-whitetoumei {
  background: linear-gradient(125deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.6) 100%);
  border: 1px solid #c8ab59;
}

.bg-whitetoumei2 {
  background: linear-gradient(125deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 100%);
}

h2.midashi {
  font-size: clamp(1.5rem, 1.229rem + 1.36vw, 2.5rem);
  padding-bottom: 15px;
  position: relative;
}
h2.midashi:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%,0);
  width: 0;
  height: 4px;
  background: #ffda20;
  border-radius: 20px;
}
h2.midashi.is-visible::after {
    animation: lineExpand 1s ease-out 0.3s forwards;
}
@keyframes lineExpand {
  to {
      width: 30%;
  }
}

h2.midashi.main-color:after  {
  background: #014099;
}

.fz-16-22 {
  font-size: clamp(1rem, 0.898rem + 0.51vw, 1.375rem);
}
.fz-20-36 {
  font-size: clamp(1.25rem, 1.081rem + 0.85vw, 1.875rem);
}

.yajiirushi-kabuse {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -2px;
  transform: translate(0,0);
}


.fz-dai {
  font-size: clamp(1.375rem, 1.148rem + 1.14vw, 2rem);
  line-height: 1.6;
}

.fz-tyu {
  font-size: clamp(1.25rem, 1.114rem + 0.68vw, 1.625rem);
  line-height: 1.6;
}

.fz-syo {
  font-size: clamp(1.125rem, 1.034rem + 0.45vw, 1.375rem);
  line-height: 1.6;
}

.bg-genba {
  background-image: url(../img/genba.jpg);
  background-size: cover;
  background-position: center center;
  min-height: 300px;
}

.text-justify {
  text-align: justify;
}

.bg-lightblue {
  background-color: #cff2ff;
}

.icon-coment {
  height: 60px;
}

.arrow-harftone {
  width: 60px;
}

.bg-whitetoumei2 {
    background: linear-gradient(125deg, rgba(143, 223, 255, 1) 0%, rgb(200 249 255) 50%, rgba(143, 223, 255, 1) 100%);
}
.bg-whitetoumei {
    background: linear-gradient(125deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.6) 100%);
    border: 2px solid #c8ab59;
}

.bg-gray {
  background-color: #666;
}

.dark-color {
  color: #666;
}

@media (min-width: 992px) {
  .beforeafteryajirusi {
    transform: rotate(-90deg);
  }
}

.bg-lightdark {
  background-color: #efefef;
}

.wave-sen {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #014099;
   text-underline-offset: 0.5em; 
}

.checkmark {
  width: 30px;
}

.tokucho {
  width: 25%;
}
.tokuchokoumoku {
  width: 75%;
}

.riyousyayajirushi {
  width: 40px;
  display: block;
  margin: 0 auto;
}

.number {
  height: 80px;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 0;
}
.use {
  position: relative;
  z-index: 1;
  height: 200px;
  display: block;
  margin: 0 0 0 auto;
}


.faq-container {
    max-width: 1000px;
    margin: 0 auto;
}

.faq-item {
    background-color: white;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #014099;
    transition: background-color 0.3s ease, opacity 0.2s ease;
}

.faq-question:hover {
    opacity: 0.9;
}

.faq-question.active {
    background-color: #fff;
    border: 2px solid #cff2ff;
}

.question-text {
    font-weight: 600;
    color: #fff;
    padding-right: 20px;
    transition: color 0.3s ease;
}

.faq-question.active .question-text {
    color: #014099;
}

.toggle-icon {
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    min-width: 24px;
    text-align: center;
    transition: transform 0.25s ease, color 0.3s ease;
}

.faq-question.active .toggle-icon {
    color: #014099;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    opacity: 0;
}

.faq-answer.active {
    max-height: 500px;
    padding: 20px;
    opacity: 1;
    background-color: #cff2ff;
}

.answer-text {
    line-height: 1.7;
    color: #555;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.qestionmark {
  background-color: #fff;
  color: #014099;
  padding: 10px;
  line-height: 1.0;
  border-radius: 30px;
}
.faq-question.active .qestionmark {
  background-color: #014099;
  color: #fff;
  padding: 10px;
  line-height: 1.0;
}

.answermark {
  background-color: #fff;
  color: #014099;
  padding: 10px;
  line-height: 1.0;
  border-radius: 30px;
}
.faq-question.active .answermark {
  background-color: #014099;
  color: #fff;
  padding: 10px;
  line-height: 1.0;
}

.purchasebox {
  background-color: #232f3e;
}

.attractive-btn {
  position: relative;
  display: inline-block;
  padding: 18px 50px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-align: center;
  background: linear-gradient(135deg, #3478ff 0%, #32afdd 100%);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  animation: pulse 2s infinite;
}

.attractive-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.attractive-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}

.attractive-btn:hover::before {
  left: 100%;
}

.attractive-btn:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.7);
  }
}

.footer-logo {
  width: 320px;
}

#area-footer a.tel-link {
  text-decoration: none;
}
#area-footer a.plibacy-policy p {
  border-bottom: 0;
}


.img-topbottom {
  overflow: hidden;
  position: relative;
}

.img-topbottom::before {
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  transform: translateY(0);
}

.img-topbottom.animate::before {
  animation: img-topbottom 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes img-topbottom {
  100% {
    transform: translateY(100%);
  }
}

.senkin  {
      border: 3px solid #c8ab59;
}

.p-table {
  padding-top:8px;
  padding-bottom:8px;
  padding-left:8px;
  padding-right:8px;
}

@media (min-width:992px){
  .p-table {
    padding-left:16px;
    padding-right:16px;
  }
}