@charset "UTF-8";

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

  .inner{ max-width: 900px; width: 100%;margin: 0 auto;}


  /* --------------------------
  mv
  ----------------------------- */

  .mv{ width: 100%;height: 399px;overflow: hidden;background: url(../img/event/bg_mv.jpg)no-repeat center;background-size: cover; position: relative;}

  img.point__left{position: absolute;top: 0;left: 0;z-index: 1;}
  img.point__right{position: absolute;top: 0;right: 0;z-index: 1;}

  .mv__inner{ width: 900px;height: 286px;text-align: center;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;z-index: 2;}
  .mv__inner img{ transition: all 1s;}
  .mv .mv__ttl{display: inline-block;vertical-align: top; width: 37%;margin: 32px 2.4% 0;}
  .mv .mv__img--left{display: inline-block;vertical-align: top; width: 30%;margin-top: 32px;}
  .mv .mv__img--right{display: inline-block;vertical-align: top; width: 27%;}

  @media screen and (max-width:1160px) {
    .mv__inner { width: 95%;height: 23vw;}
    .mv__inner img{ width: 100%;}
    .mv .mv__ttl{display: inline-block;vertical-align: top; width: 38%;margin: 32px 1% 0;}
    .mv .mv__img--right{display: inline-block;vertical-align: top; width: 28%;}
  }

  .calendar{ width: 153px;position: absolute;top: 280px;left: 0;right: 0;margin: auto;z-index: 2;}

  main{background-color: #e0f3fe;background-image: repeating-linear-gradient(-45deg,#e7f6ff, #e7f6ff 7px,transparent 0, transparent 14px);}

  /* --------------------------
    cont
  ----------------------------- */

  .cont{ width: 100%;overflow: hidden;position: relative;padding: 70px 0 0;}


  /* --------------------------
    cont__btn
  ----------------------------- */

  .cont__btn{ max-width: 810px;width: 100%;margin: 0 auto 50px;text-align: center;}
  .cont__btn h4{ max-width: 545px;width: 100%;font-size: 24px;font-weight: 700;line-height: 1.5;color: #f85c82;margin: 0 auto 35px;position: relative;}
  .cont__btn h4::before{ content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../img/event/ico_main-01.png)no-repeat left center;}
  .cont__btn h4::after{ content: '';position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../img/event/ico_main-02.png)no-repeat right center;}

  .cont__btn--left,
  .cont__btn--right { display: inline-block;vertical-align: top;width: 47%;height: 96px;position: relative;}
  .cont__btn--left{ margin-right: 5%;}
  .cont__btn--left a img,
  .cont__btn--right a img{ position: absolute;top: 0;left: 0;transition: opacity .4s;}
  /* hover */
  .cont__btn--left a:hover img,
  .cont__btn--right a:hover img{ opacity: 0;}
  .cont__btn--left a:hover img.on,
  .cont__btn--right a:hover img.on{ opacity: 1;}

  @media screen and (max-width:1070px) {
    .cont__btn--left,
    .cont__btn--right { display: inline-block;vertical-align: top;width: 45%;height: 96px;position: relative;}
    .cont__btn--left a img,
    .cont__btn--right a img{ width: 100%;}
  }


  /* --------------------------
    cont__main
  ----------------------------- */

  .cont__main{ max-width: 900px;width: 100%;margin: 0 auto 70px;text-align: center;position: relative;padding-top: 65px;}
  @media screen and (max-width:1170px) { .cont__main{ width: 95%;margin: 0 auto 70px;text-align: center;position: relative;padding-top: 65px;}}

  .cont__main h3.cont__main--ribon{ position: absolute;top: 0;left: 0;right: 0;width: 509px;margin: auto;z-index: 2;}
  .cont__main img.kuma{ position: absolute;top: 0;left: 55px;z-index: 1;}
  .cont__main img.usa{ position: absolute;top: -22px;right: 50px;z-index: 1;}

   /* ---- cont__main--inner --- */
  .cont__main--inner{ width: 100%;background-color: #ffffff;border: 8px solid #b6e396;border-radius: 80px 80px 0 0;padding: 120px 23px 70px;}

  .cont__main--sec2,
  .cont__main--sec3,
  .cont__main--sec4,
  .cont__main--sec5 {margin-top: 35px;}

  .cont__main--sec1 h4,
  .cont__main--sec2 h4,
  .cont__main--sec3 h4,
  .cont__main--sec4 h4{ width: 340px;margin: 0 auto;}

  .cont__main--inner ul{ width: 100%;text-align: center;}
  .cont__main--inner ul li img{ width: 100%;}
  .cont__main--inner ul li h5{ margin: 15px 0 7px;font-size: 18px;font-weight: 800;line-height: 1.3;transform:rotateZ(0.03deg);}
  .cont__main--inner ul li p{ font-size: 14px;font-weight: 700;line-height: 1.5;text-align: left;color: #411b08;transform:rotateZ(0.03deg);}
  .cont__main--inner ul li p small{ font-size: 12px;font-weight: 700;line-height: 1.3;text-align: left;color: #411b08;transform:rotateZ(0.03deg);}

  .cont__main--sec1 .column01 li,
  .cont__main--sec3 li{ width: 32.2%;display: inline-block;vertical-align: top;margin-top: 5px;}
  .cont__main--sec1 .column02 {margin-top: 28px;}
  .cont__main--sec1 .column02 li{ width: 22.5%;display: inline-block;vertical-align: top;margin:0 0.7%;}
  .cont__main--sec2 li,
  .cont__main--sec4 li{ width: 43%;display: inline-block;vertical-align: top;margin-top: 40px;}
  .cont__main--sec2 li:first-child,
  .cont__main--sec4 li:first-child{ margin-right: 4%;}

  .cont__main--sec1 .column01 li:nth-child(2),
  .cont__main--sec3 li:nth-child(2){ margin: 40px 0.9% 0;}

  .cont__main--sec1 .column01 li h5,
  .cont__main--sec1 .column02 li h5{ color: #fb9db4;}
  .cont__main--sec2 li h5{ color: #6fd0fa;}
  .cont__main--sec3 li h5{ color: #ffa912;}
  .cont__main--sec4 li h5{ color: #cea6cc;}

  .cont__main--sec5 img{ width: 233px;margin: 0 auto;}
  .cont__main--sec5 h5{ color: #96d750;margin: 28px 0 23px; font-size: 26px;font-weight: 800;line-height: 1.3;}
  .cont__main--sec5 p{ color: #96d750;font-size: 18px;font-weight: 500;line-height: 1.3;transform:rotateZ(0.03deg);}
  .cont__main--sec5 p small{ color: #411b08;font-size: 12px;font-weight: 500;line-height: 1.3;transform:rotateZ(0.03deg);display: block;}

  .cont__main--sec5 a{ display: block;height: 60px;width: 240px;margin: 30px auto;border-radius: 100vh;background-color: #96d750;transition: all .4s;transform:rotateZ(0.03deg)}
  .cont__main--sec5 a{ -moz-box-shadow: 6px 6px 0px 0px #eae4e1;-webkit-box-shadow: 6px 6px 0px 0px #eae4e1;-ms-box-shadow: 6px 6px 0px 0px #eae4e1;box-shadow: 6px 6px 0px 0px #eae4e1;}
  .cont__main--sec5 a span{ color: #ffffff;font-size: 20px;font-weight: 500;line-height: 60px;transform:rotateZ(0.03deg);padding: 0 25px;background: url(../img/event/arrow.png)no-repeat right center;}
    /* hover */
  .cont__main--sec5 a:hover{ background-color: #daf1c2;}
  .cont__main--sec5 a:hover span{ color: #96d750;background: url(../img/event/arrow_green.png)no-repeat right center;}

  @media screen and (max-width:890px) {
    .cont__main--sec1 .column01 li,
    .cont__main--sec3 li{ width: 31.8%;display: inline-block;vertical-align: top;margin-top: 5px;}
    .cont__main--sec1 .column02 li{ width: 22.8%;display: inline-block;vertical-align: top;margin:0 0.7%;}
  }


   /* --------------------------
    cont__main cont__shop
  ----------------------------- */

  .cont__main--inner.shop{ width: 100%;background-color: #ffffff;border: 8px solid #b6e396;border-top: none;border-radius: 0 0 80px 80px;padding: 80px 0 35px;position: relative;}
  .cont__main--inner.shop{ background-color: #e5f5d3;background-image:linear-gradient(-90deg, #fff 50%, transparent 50%);background-size: 20px 20px;}

  .cont__main--inner.shop h3{position: absolute;top: -50px;left:0;right: 0;margin: auto;width: 459px;}
  .cont__main--inner.shop p{ width: 415px;margin: 0 auto 15px;}

  .cont__main--inner.shop .cont__shop{ max-width: 782px;width: 100%;margin: 0 auto;position: relative;}
  .cont__main--inner.shop .cont__shop p{ position: absolute;top:-50px;right: 2%;width: 21%;transition: all .4s;}
  .cont__main--inner.shop .cont__shop .shop-img{ width: 100%;}

  @media screen and (max-width:1050px) {
    .cont__main--inner.shop .cont__shop p{ position: absolute;top:-20px;right: 0;width: 20%;}
    .cont__main--inner.shop .cont__shop p img{width: 100%;}
  }


  /* --------------------------
    cont__main cont__bottom
  ----------------------------- */

  .cont__bottom--inner{ width: 100%;background-color: #ffffff;border: 8px solid #f6c2d4;border-radius: 80px;padding: 90px 0 40px;}
  
  .cont__bottom--inner h4{ color: #fb9db4;font-size: 26px;font-weight: 800;line-height: 1.3;margin-bottom: 35px;}
  .cont__bottom--inner img{ max-width: 810px;width: 100%;margin: 0 auto;}
  .cont__bottom--inner p{ max-width: 810px;width: 100%;margin: 0 auto;color: #411b08;font-size: 16px;font-weight: 500;line-height: 1.8;transform:rotateZ(0.03deg);text-align: left;}
  .cont__bottom--inner p small{ color: #411b08;font-size: 12px;font-weight: 500;line-height: 1.3;transform:rotateZ(0.03deg);text-align: right;display: block;margin: 10px 0;}

  .cont__bottom--inner a{ display: block;height: 60px;width: 240px;margin: 30px auto;border-radius: 100vh;background-color: #fb9db4;transition: all .4s;transform:rotateZ(0.03deg)}
  .cont__bottom--inner a{ -moz-box-shadow: 6px 6px 0px 0px #eae4e1;-webkit-box-shadow: 6px 6px 0px 0px #eae4e1;-ms-box-shadow: 6px 6px 0px 0px #eae4e1;box-shadow: 6px 6px 0px 0px #eae4e1;}
  .cont__bottom--inner a span{ color: #ffffff;font-size: 20px;font-weight: 500;line-height: 60px;transform:rotateZ(0.03deg);padding: 0 25px;background: url(../img/event/arrow.png)no-repeat right center;}
    /* hover */
  .cont__bottom--inner a:hover{ background-color: #fee1e8;}
  .cont__bottom--inner a:hover span{ color: #fb9db4;background: url(../img/event/arrow_pink.png)no-repeat right center;}

  @media screen and (max-width:1160px) {
    .cont__bottom--inner img,
    .cont__bottom--inner p{ width: 95%;margin: 0 auto;}
  }

}


@media screen and (max-width:767px) {
  main .inner{ width: 100%;margin: 0 auto;}

  /* --------------------------
  mv
  ----------------------------- */

  .mv{ width: 100%;height:54vw;overflow: hidden;background: url(../img/event/bg_mv-sp.jpg)no-repeat center bottom;background-size: cover; position: relative;}

  img.point__left{position: absolute;top: 0;left: 0;z-index: 1;width: 30%;}
  img.point__right{position: absolute;top: 0;right: 0;z-index: 1;width: 30%;}

  .mv__inner{ width: 100%;height: 43vw;text-align: center;position: absolute;bottom: 0;left: 0;right: 0;margin: auto;z-index: 2;}
  .mv__inner img{ transition: all 1s;}
  .mv .mv__ttl{display: block;width: 43.9vw;margin: 0 auto 0;}

  .mv .mv__img--left{ position: absolute;bottom: 3vw;left: 2vw;width: 27vw;}
  .mv .mv__img--right{ position: absolute;bottom: 2vw;right: 2vw;width: 24.6vw;}

  .calendar{ width: 18.6vw;position: absolute;top: 40vw;left: 0;right: 0;margin: auto;z-index: 2;}

  main{background-color: #e0f3fe;background-image: repeating-linear-gradient(-45deg,#e7f6ff, #e7f6ff 5px,transparent 0, transparent 10px);}

  /* --------------------------
    cont
  ----------------------------- */

  .cont{ width: 100%;overflow: hidden;position: relative;padding: 10vw 0 0;}

  /* --------------------------
    cont__btn
  ----------------------------- */

  .cont__btn{ width: 90%;margin: 0 auto 6vw;text-align: center;}
  .cont__btn h4{ width: 100%;font-size: 4.26vw;font-weight: 700;line-height: 1.5;color: #f85c82;margin: 0 auto 5vw;position: relative;}
  .cont__btn h4::before{ content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../img/event/ico_main-01-sp.png)no-repeat left center;background-size: 8%;}
  .cont__btn h4::after{ content: '';position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../img/event/ico_main-02-sp.png)no-repeat right center;background-size: 8%;}

  .cont__btn--left,
  .cont__btn--right { display: inline-block;vertical-align: top;width: 46%;height: 18vw;position: relative;}
  .cont__btn--left{ margin-right: 5.5%;}
  .cont__btn--left a img,
  .cont__btn--right a img{ position: absolute;top: 0;left: 0;transition: opacity .4s;}


  /* --------------------------
    cont__main
  ----------------------------- */

  .cont__main{ width: 100%;margin: 0 auto 6vw;text-align: center;position: relative;padding-top: 9vw;}
  #yokohama{ width: 100%;margin: 15vw auto 13vw;text-align: center;position: relative;padding-top: 6vw;}
  .cont__main h3.cont__main--ribon{ position: absolute;top: 0;left: 0;right: 0;width: 74.4vw;margin: auto;z-index: 2;}
  .cont__main img.kuma{ position: absolute;top: 0;left: 3vw;z-index: 1;width: 12.6vw;}
  .cont__main img.usa{ position: absolute;top: 0;right: 3vw;z-index: 1;width: 9.3vw;}


   /* ---- cont__main--inner --- */
  .cont__main--inner{ width: 100%;background-color: #ffffff;border-top: 8px solid #b6e396;border-bottom: 8px solid #b6e396;border-radius: 0;padding: 20vw 5% 14vw;}

  .cont__main--sec2,
  .cont__main--sec3,
  .cont__main--sec4,
  .cont__main--sec5 {margin-top: 7.6vw;}

  .cont__main--sec1 h4,
  .cont__main--sec2 h4,
  .cont__main--sec3 h4,
  .cont__main--sec4 h4{width: 67vw;margin: 0 auto;}

  .cont__main--inner ul{ width: 100%;text-align: center;}

  .cont__main--sec1 .column01 li,
  .cont__main--sec2 li,
  .cont__main--sec3 li,
  .cont__main--sec4 li{ width: 100%;display: inline-block;vertical-align: top;margin-top: 7vw;}

  .cont__main--inner ul li img{ width: 75%;margin: 0 auto;}
  .cont__main--inner ul li h5{ margin: 3vw 0;font-size: 3.73vw;font-weight: 800;line-height: 1.3;transform:rotateZ(0.03deg);}
  .cont__main--inner ul li p{ font-size: 3.2vw;font-weight: 500;line-height: 1.8;text-align: left;color: #411b08;transform:rotateZ(0.03deg);}
  .cont__main--inner ul li p small{ font-size: 2.8vw;font-weight: 700;line-height: 1.3;text-align: left;color: #411b08;transform:rotateZ(0.03deg);}

  .cont__main--sec1 .column02 {margin-top: 7vw;}
  .cont__main--sec1 .column02 li{ width: 47%;display: inline-block;vertical-align: top;margin-bottom: 4vw;}
  .cont__main--sec1 .column02 li:nth-child(odd){ margin-right:4%;}
  .cont__main--sec1 .column02 li img{ width: 100%;}
  .cont__main--sec1 .column02 li h5{ margin: 3vw 0;font-size: 3.2vw;font-weight: 800;line-height: 1.3;transform:rotateZ(0.03deg);}

  .cont__main--sec1 .column01 li h5,
  .cont__main--sec1 .column02 li h5{ color: #fb9db4;}
  .cont__main--sec2 li h5{ color: #6fd0fa;}
  .cont__main--sec3 li h5{ color: #ffa912;}
  .cont__main--sec4 li h5{ color: #cea6cc;}

  .cont__main--sec5 img{ width: 49.6vw;margin: 0 auto;}
  .cont__main--sec5 h5{ color: #96d750;margin: 3vw 0 1vw; font-size: 4.8vw;font-weight: 800;line-height: 1.3;}
  .cont__main--sec5 p{ color: #96d750;font-size: 3.73vw;font-weight: 500;line-height: 1.8;transform:rotateZ(0.03deg);}
  .cont__main--sec5 p small{ color: #644536;font-size: 2.66vw;font-weight: 500;line-height: 1.8;transform:rotateZ(0.03deg);display: block;text-align: left;}

  .cont__main--sec5 a{ display: block;height: 12vw;width: 53.3vw;margin: 2vw auto 3vw;border-radius: 100vh;background-color: #96d750;transform:rotateZ(0.03deg)}
  .cont__main--sec5 a{ -moz-box-shadow: 6px 6px 0px 0px #eae4e1;-webkit-box-shadow: 6px 6px 0px 0px #eae4e1;-ms-box-shadow: 6px 6px 0px 0px #eae4e1;box-shadow: 6px 6px 0px 0px #eae4e1;}
  .cont__main--sec5 a span{ color: #ffffff;font-size: 3.73vw;font-weight: 500;line-height: 12vw;transform:rotateZ(0.03deg);padding: 0 6vw;background: url(../img/event/arrow.png)no-repeat right center;}


   /* --------------------------
    cont__main cont__shop
  ----------------------------- */

  .cont__main--inner.shop{ width: 100%;background-color: #ffffff;border-top: 8px solid #b6e396;border-bottom: 8px solid #b6e396;border-top: none;border-radius: 0;padding: 12vw 3% 8vw;position: relative;}
  .cont__main--inner.shop{ background-color: #e5f5d3;background-image:linear-gradient(-90deg, #fff 50%, transparent 50%);background-size: 14px 14px;}

  .cont__main--inner.shop h3{position: absolute;top: -10vw;left:0;right: 0;margin: auto;width: 74.8vw;}
  .cont__main--inner.shop p{ width: 74.8vw;margin: 0 auto 5vw;}

  .cont__main--inner.shop .cont__shop{ width: 100%;position: relative;}
  .cont__main--inner.shop .cont__shop p{ position: absolute;top:-3vw;right: 0;width: 30vw;transition: all .4s;}
  .cont__main--inner.shop .cont__shop img{ width: 100%;}
  


  /* --------------------------
    cont__main cont__bottom
  ----------------------------- */

  .cont__bottom--inner{ width: 100%;background-color: #ffffff;border-top: 8px solid #f6c2d4;;border-bottom: 8px solid #f6c2d4;border-radius: 0;padding: 22.6vw 5% 8vw;}
  
  .cont__bottom--inner h4{ color: #fb9db4;font-size: 4.8vw;font-weight: 800;line-height: 1.5;margin-bottom: 5vw;}
  .cont__bottom--inner img{ width: 100%;}
  .cont__bottom--inner p{ color: #411b08;font-size: 3.2vw;font-weight: 500;line-height: 1.8;transform:rotateZ(0.03deg);text-align: left;}
  .cont__bottom--inner p small{ color: #411b08;font-size: 2.66vw;font-weight: 500;line-height: 1.3;transform:rotateZ(0.03deg);text-align: right;display: block;margin: 3vw 0 4vw;}

  .cont__bottom--inner a{ display: block;height: 12vw;width: 53.3vw;margin: 7.2vw auto 0;border-radius: 100vh;background-color: #fb9db4;transform:rotateZ(0.03deg)}
  .cont__bottom--inner a{ -moz-box-shadow: 6px 6px 0px 0px #eae4e1;-webkit-box-shadow: 6px 6px 0px 0px #eae4e1;-ms-box-shadow: 6px 6px 0px 0px #eae4e1;box-shadow: 6px 6px 0px 0px #eae4e1;}
  .cont__bottom--inner a span{ color: #ffffff;font-size: 3.73vw;font-weight: 500;line-height: 12vw;transform:rotateZ(0.03deg);padding: 0 6vw;background: url(../img/event/arrow.png)no-repeat right center;}
}


/* animation */

.-cookie .mv__ttl {opacity: 0;transform: translateY(20px);}
.-cookie.-is-loaded .mv__ttl{opacity: 1;transform: translateY(0);transition:all .8s ease .2s;}

.-cookie .mv__img--left,
.-cookie .mv__img--right {opacity: 0;transform: scale(.5);}
.-cookie.-is-loaded .mv__img--left,
.-cookie.-is-loaded .mv__img--right {opacity: 1;transform: scale(1);transition:all .4s ease .6s;}

.-cookie .calendar {opacity: 0;transform: translateY(20px);}
.-cookie.-is-loaded .calendar {opacity: 1;transform: translateY(0);transition:all .3s ease .4s;}

.-cookie .cont {opacity: 0;transform: translateY(20px);}
.-cookie.-is-loaded .cont {opacity: 1;transform: translateY(0);transition:all .6s ease .8s;}


.-is-first-time .mv__ttl {opacity: 0;transform: translateY(20px);}
.-is-first-time.-is-loaded .mv__ttl{opacity: 1;transform: translateY(0);transition:all .8s ease 1.5s;}

.-is-first-time .mv__img--left,
.-is-first-time .mv__img--right {opacity: 0;transform: scale(.5);}
.-is-first-time.-is-loaded .mv__img--left,
.-is-first-time.-is-loaded .mv__img--right {opacity: 1;transform: scale(1);transition:all .4s ease 1.9s;}

.-is-first-time .calendar {opacity: 0;transform: translateY(20px);}
.-is-first-time.-is-loaded .calendar {opacity: 1;transform: translateY(0);transition:all .3s ease 1.7s;}

.-is-first-time .cont {opacity: 0;transform: translateY(20px);}
.-is-first-time.-is-loaded .cont {opacity: 1;transform: translateY(0);transition:all .6s ease 2s;}