@charset "utf-8";
.pc,.pc-img,.deco-box{
    display: none;
}
.bg{
    background-color: #2AA1BF;    
}
.bg-ivory{
    background-color: #F9F3ED;
    box-sizing: border-box;
    padding: 50px 0;
}
.bg-blue{
    background-color: #2AA1BF;    
    box-sizing: border-box;
    padding: 50px 0;
}
.wrapper{
    width: 90%;
    margin: 0 auto;
}

img{
    margin: 0 auto;
    width: 100%;
    /* max-width: 400px; */
}
img.sp-img {
    max-width:500px ;
    margin: 0 auto;
}
h2,h3,span,small,a,li{
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.5;
    font-family: "Hind", sans-serif;
}
p{
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
}
.what-pez img{
    margin: 55px auto 20px;   
}

.illustration img {
    max-width: 200px;
    width: 100%;
    height: 100%;
}
.coment{
    padding: 0px 10px;
    max-width: 500px;
    margin: 20px auto 25px;
    /* text-align: center; */
}
.illustration .coment{
  margin: 20px auto 55px;
}
h3{
    border-left: #fff solid 5px;
    margin-bottom: 10px;
}
h3 span{
    margin-left: 5px;
    font-size:1.8rem;
    font-family: "Noto Sans JP", sans-serif;
}
/* .top-text{
    padding: 10px;
    margin: 100px auto;
    text-align: center; 
} */


/* staff loop  */
.anime-wrap{
    max-width: 400px;
    margin: 0px auto;
    box-sizing: border-box;
    padding: 0 10px;
}
/* pez denim loop */
/*
右から左へ
----------------------------*/
@keyframes scroll-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .wrap {
    display: flex;
    overflow: hidden;
    z-index: -1;
    background-color: #fff;
  }
  #sec4 .wrap {
    background-color: #2AA1BF; 
  }
  
  ul.list {
    display: flex;
    list-style: none;
    /* max-width: 300px; */
  }
  
  .list-left{
  animation :scroll-left 30s infinite linear 0.5s both;
  }
  
  .loop-img {
    width: calc(100vw / 2);
    max-width: 350px;
    min-width: 200px;
    /* margin-top:30px; */
  }
  #sec4 .loop-img {
    width: calc(100vw / 3);
    min-width: 160px;
  }
  .loop-img > img{
     width: 100%;
  }
/* pez denim loop */

/* 文字流れる */
.smooth {
    clip-path: inset(0 100% 0 0);
    display: inline-block;
    /* font-size: 36px; */
    transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
    transition-property: clip-path;
    line-height: 1;
    /* height: 40px; */
    /* margin-top: 15px; */
  }
  .smooth.is-animated {
    clip-path: inset(0);
  }
/* 文字流れる */

/* slick */
.slide-items {
    width: 90%;
    /* height: 100%; */
    max-width: 400px;
    margin: 0 auto;
    border: #fff solid 10px;
    /* box-sizing: border-box;
    padding: 0 10px; */
} 
.slide-items img {
    width: 100%;
    object-fit: cover;
}
.slick-dotted.slick-slider{
    margin-top: 20px;
    /* margin-bottom: 50px; */
}
.slick-dots li {
    margin: 0 5px; 
    width: 5px;
    height: 5px;
}
.slick-dots li button:before {
    content:'';
    width: 5px;
    height: 5px;
    background: #868686;
    opacity: 1;
    border-radius: 20px;
}
.slick-dots {
    position: absolute;
    bottom: 8px;
    right: 10px;
    display: block;
    width: fit-content;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}
/* slick  */

/* .img-slide-wrap{
    position: relative;
} */
/* 点滅 */
/* .blinking{
    position: relative;
    position: absolute;
    bottom: 7%;
    right: 10%;
    z-index: 1;
    transform: rotate(-17deg);
    font-size: 3rem;
    padding: 0 14px 0 8px;
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
    font-family: "Caveat", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    color:#fff;
}
.blinking::before{
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 1px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transform: rotate(-25deg);
}
.blinking::after{
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    transform: rotate(25deg);
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
} */
/* 点滅 */


.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.sp ul.glonav li a{
    font-size: 2.2rem;
    color: #fff;
}
a{
    transition: .4s;
}
a:hover{
	opacity: 0.8;
}



/* sec1 */
#sec1,#sec3{
    width: 90%;
    margin: 0 auto;
    border: #2AA1BF solid 1px;
    border-radius: 250px 250px 0 0;
}

h2{
    text-align: center;
    margin-top: 80px;
    margin-bottom: 20px;
    color: #2AA1BF;
    font-family: "Hind", sans-serif;
    font-style: oblique;
}
h2 span{
    font-weight: 500;
    font-size: 2.2rem;
}
h2 span.number{
    font-size: 2.4rem;
    display: inline-block;
    padding-bottom: 10px;
}
.flexbox{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2AA1BF;
    max-width: 400px;
    margin: 5px 0 0 10px;
}
#sec1 .coment p,#sec1 span,#sec3 .coment p,#sec3 span,#sec4 .btn span{
    color: #2AA1BF;
}
#sec1 span.check-btn,#sec3 span.check-btn{
  color: #FFF;
}
.pricebox{
    max-width: 200px;
    margin: 0 auto;
}
.price{
    margin-left: 10px;
}
#sec2 .flexbox span{
    color: #FFF;
}
.check-btn{
    margin-left:auto;
    background-color: #2AA1BF;
    width:50px ;
    text-align: center;
}
#sec2 span.check-btn{
    background-color: #FFF;
    color: #2AA1BF;
}

#sec2,#sec4{
    width: 90%;
    margin: 0 auto;
    border: #fff solid 1px;
    border-radius: 250px 250px 0 0;
}
#sec2 h2,#sec4 h2{
    color: #fff;
}
#sec4 h2{
    margin-top: 100px;
    margin-bottom: 0px;
}
#sec4 .archive h2{
    margin-top: 50px;
}
#sec4 h2 span{
    border-top:#fff solid 1px ;    
    border-bottom:#fff solid 1px ;   
    box-sizing: border-box;
    padding: 7px 15px 2px; 
    margin: 20px 0;
    display: inline-block;
}

.archive img{
    max-width: 300px;
    width: 90%;
    margin: 0px auto 55px;
    border: #FFF solid 10px;
}
p.btn-box{
    margin: 0 10px;
}
a.btn {
    display: block;
    max-width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 50px auto;
    font-size: 1.2rem;
    text-align: center;
    color: #2AA1BF;
    background-color: #F9F3ED;
}
a.btn2 {
    display: block;
    max-width: 300px;
    height: 50px;
    line-height: 50px;
    margin: 20px auto;
    font-size: 1.2rem;
    text-align: center;
    color: #fff;
    background-color: #2AA1BF;
}

footer{
    width: 100%;
    padding:20px 0px;
    margin: 0 auto;
    background-color: #2AA1BF;
}
footer li{
    text-align: center;
    margin-bottom: 10px;
}
footer li {
    color: rgb(255, 255, 255);
}
.logo-ear{
    max-width: 70px;
    margin: 0 auto;
    margin-bottom: 40px;
}
footer .flex a{
    margin: 0 20px;
}
footer .flex img{
    max-width: 40px;
}
small{
    display: block;
    margin: 50px auto 0 auto;
    text-align: center;
}
.qr a{
    display: none;
}
@media screen and (min-width:500px){
.wrapper,section{
    max-width: 500px;
}
.bg{
    position: relative;
}
}
@media screen and (min-width:780px){
    .sp-img{
        display: none;
    }
    .pc-img{
        display: block;
    }
    .pc{
        display: block;
        position: fixed;
        bottom:0;
        right: 85%;
        z-index: 3;
    }
    .pc div{
        margin: 0 auto;
        margin-bottom: 20px;
        max-width: 100px;
    }
    .pc div p{
        color: #353535;
        font-size: 1.2rem;
        text-align: center;
        /* box-sizing: border-box;
        padding: 5px;
        width: 90px; */
    }
    .pc img{
        max-width: 95px;
        margin: 0 auto;
    }
    .logo-ear{
        max-width: 55px;
    }
    footer .flex img{
        max-width: 25px;
    }

    
    .illustration {
        margin-bottom: 50px;
    }
     .illustration {
        /* max-width: 600px; */
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto 35px;
    }
    .illustration .coment {
        max-width: 250px;
        margin: 20px auto;
    }
    #sec4 .loop-img{
        width: calc(100vw / 6);
      }
}
@media screen and (min-width:1024px){
/* section{
    width: calc(100% /2);
} */
.pc{
    right: 90%;
}
}
@media screen and (min-width:1170px){
    .deco-box{
        transition: .5s;
        opacity: 0;
        display: block;
        position: relative;
        z-index: 1;
    }
    .item-menu{
        max-width: 300px;
        box-sizing: border-box;
        padding: 80px 55px 20px;
        background-color: #FFF;
        border-radius: 25px;
        position: fixed;
        top: 50%;
        left: 7%;
        transform: translateY(-50%);
    }
    .item-menu li a{
        color: #2AA1BF;
        font-size: 1.6rem;
        line-height: 44px;
        font-style: oblique;
    }
    .item-menu a.btn2{
        /* max-width: 100px; */
        margin: 30px auto;
        color: #FFF;
        line-height: 50px;
        font-size: 1.2rem;
    }
    .deco1{
        width: 100px;
        position: fixed;
        /* top: 15%;
        left: 12%; */
        top: -10%;
        left: 30%;
        animation: poyoyon3 4s infinite;
      }
      @keyframes poyoyon3 {
        0%, 40% {
          transform: skew(0deg, 0deg);
        }
        5% {
          transform: skew(5deg, 5deg);
        }
        10% {
          transform: skew(-4deg, -4deg);
        }
        15% {
          transform: skew(3deg, 3deg);
        }
        20% {
          transform: skew(-2deg, -2deg);
        }
        25% {
          transform: skew(1deg, 1deg);
        }
        30% {
          transform: skew(-0.6deg, -0.6deg);
        }
        35% {
          transform: skew(0.3deg, 0.3deg);
        }
    }
    .deco2{
        width: 125px;
        position: fixed;
        top: 25%;
        left: 72%;
        /* transform: rotate(-5deg); */
        animation: fuwafuwa 3s ease-in-out infinite alternate;
        transition: 1.5s ease-in-out;
      }
       
      @keyframes fuwafuwa {
        0% {
          transform:translate(0, 0) rotate(-5deg);
        }
        50% {
          transform:translate(0, -15px) rotate(-5deg);
        }
        100% {
          transform:translate(0, 0) rotate(-5deg);
        }
    }
    .deco3{
        width: 80px;
        position: fixed;
        top: 16%;
        left: 80%;
        /* transform: rotate(15deg); */
        animation: fuwafuwa2 5s ease-in-out infinite alternate;
        transition: 1.5s ease-in-out;
      }
       
      @keyframes fuwafuwa2 {
        0% {
          transform:rotate(15deg);
        }
        50% {
          transform:rotate(-3deg);
        }
        100% {
          transform:rotate(15deg);
        }
      }
    .deco4{
        width: 70px;
        position: fixed;
        top: 42%;
        left: 83%;
        transform: rotate(-10deg);
        animation: fuwafuwa4 3s ease-in-out infinite alternate;
        transition: 1.5s ease-in-out;
      }
       
      @keyframes fuwafuwa4 {
        0% {
          transform:translate(0, 0) rotate(-10deg);
        }
        50% {
          transform:translate(0, -7px) rotate(-10deg);
        }
        100% {
          transform:translate(0, 0) rotate(-10deg);
        }
      }
      
    .deco5{
        width: 120px;
        position: fixed;
        top:41%;
        left: 72%;
        /* transform: rotate(-15deg); */
        animation: fuwafuwa3 4s ease-in-out infinite alternate;
        transition: 1.5s ease-in-out;
      }
       
      @keyframes fuwafuwa3 {
        0% {
          transform:translate(0, 0) rotate(-15deg);
        }
        50% {
          transform:translate(0, 7px) rotate(-1deg);
        }
        100% {
          transform:translate(0, 0) rotate(-15deg);
        }
      }
    .deco6{
        width: 90px;
        position: fixed;
        top: 55%;
        left: 81%;
        /* transform: rotate(5deg); */
        animation: fuwafuwa5 4s ease-in-out infinite alternate;
        transition: 1.5s ease-in-out;
      }
       
      @keyframes fuwafuwa5 {
        0% {
          transform:translate(0, 0) rotate(-3deg);
        }
        50% {
          transform:translate(0, 5px) rotate(5deg);
        }
        100% {
          transform:translate(0, 0) rotate(-3deg);
        }
    }
    .deco7{
        width: 110px;
        position: fixed;
        top: 56%;
        left: 73%;
        animation: kurukuru 4s ease-out infinite;
      }
      @keyframes kurukuru {
        0%{
          transform: rotateY(0) translateY(0);
        }
        50%{
            transform: rotateY(0deg) translateY(0);
          }
        100%{
          transform: rotateY(360deg) translateY(0);
        }
    }
    .deco7 img{
        transform: rotate(-5deg);
    }

    /* .deco8 a{
        text-align: center;
        color: #2AA1BF;
        font-size: 1.6rem;
    }
    .deco8 a span{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: fixed;
        top: 70%;
        left: 81%;
        background-color: #FFF;
        border: #353535 solid 1px;
        box-sizing: border-box;
        padding: 33px 12px;
        animation: poyoyon4 5s infinite;
    }
    @keyframes poyoyon4 {
      0%, 40%{
        transform: skew(0deg, 0deg);
      }
      5% {
        transform: skew(5deg, 5deg);
      }
      10% {
        transform: skew(-4deg, -4deg);
      }
      15% {
        transform: skew(3deg, 3deg);
      }
      20% {
        transform: skew(-2deg, -2deg);
      }
      25% {
        transform: skew(1deg, 1deg);
      }
      30% {
        transform: skew(-0.6deg, -0.6deg);
      }
      35% {
        transform: skew(0.3deg, 0.3deg);
      }
    } */
    /* .deco8 a span:last-of-type{
        top: 73%;
        left: 82%;
    } */
    /* .poyopoyo {
        animation: poyopoyo 2s ease-out infinite;
        opacity: 1;
      }
      @keyframes poyopoyo {
        0%, 40%, 60%, 80% {
          transform: scale(1.0);
        }
        50%, 70% {
          transform: scale(0.95);
        }
      }
    } */
}
@media screen and (min-width:1200px){
    /* section{
        width: calc(100% /2);
    } */
    .pc{
        right: 90%;
    }
    #sec4 .loop-img{
        width: calc(100vw / 9);
      }
}