/**********************font***************************/
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c");
.round {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro",
    "Hiragino Maru Gothic Pro", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic Pro", "M PLUS Rounded 1c", sans-serif;
}
.mplus {
  font-family: "M PLUS 1p", sans-serif;
}
.nico {
  font-family: "Nico Moji";
}
.wrapper {
  max-width: 100vw;
  padding: 0;
  margin: 0;
  margin-top: -2.4rem;
  box-sizing: border-box;
  padding-bottom: 2.4rem;
  /*	box-shadow: 0 0 50px 0 rgba(0,0,0,.8);
	-webkit-transition-property: all;
	transition-property: all;
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
	-webkit-transition-duration: .5s;
	transition-duration: .5s;*/
}
.home .wrapper {
  margin: 0;
}

@media screen and (max-width: 896px) {
  .wrapper {
    overflow: hidden;
    z-index: 1;
  }
}

@media screen and (min-width: 897px) {
  .drawer-menu {
    width: 100%;
    background-color: #FFC164;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
  }

  .menu {
    max-width: 1200px;
    margin-left: auto;
    text-align: right;
  }

  .menu-item {
    display: inline-block;
    padding: 20px 0;
    text-align: center;
    font-family: "M PLUS Rounded 1c", sans-serif;
  }

  .menu-item a {
    color: #212529;
    padding: 0 clamp(1rem,1vw,2rem);
    font-weight: bold;
    font-size: clamp(1rem,1.4vw,1.6rem );
  }

  .current_page_item a,
  .current-menu-item a {
    color: #f5e928;
  }

  .check,
  .menu-btn,
  .close-menu{
    display: none;
    position: absolute;
    top: 0;
  }
}

  @media screen and (max-width: 896px) {
    .drawer-menu {
      box-sizing: border-box;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 30%;
      min-width: 300px;
      height: 100%;
      padding: 50px 0;
      background: #FFFFF1;
      transition-property: all;
      transition-duration: 0.5s;
      transition-delay: 0s;
      transform-origin: right center;
      transform: perspective(500px) rotateY(-90deg);
      opacity: 0;
      z-index: 9998 !important;
    }
    
    .drawer-menu .menu {
      overflow-y: auto;
      height: 100%;
    }

    .menu-item {
      display: block;
    }

    .drawer-menu li {
      text-align: center;
    }

    .drawer-menu li a {
      display: block;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      color: #212529;
      transition: all 0.8s;
      font-family: 'M PLUS Rounded 1c', sans-serif;
      font-weight: bold;

    }

    .drawer-menu li a:hover {
      background: #FFC164;
      opacity: 1;
    }

    /* ------------------------------------------------ checkbox */
    .check {
      display: none;
    }

    /* ------------------------------------------------ menu button */
    .menu-btn {
      position: fixed;
      display: block;
      top: 10px;
      right: 15px;
      display: block;
      width: 40px;
      height: 40px;
      font-size: 10px;
      text-align: center;
      cursor: pointer;
      z-index: 9999;
      background: #fff;
    }

    .bar {
      position: absolute;
      top: 9px;
      left: 5px;
      display: block;
      width: 30px;
      height: 4px;
      background: #A5F3FE;
      transition: all 0.5s;
      transform-origin: left top;
    }

    .bar.middle {
      top: 19px;
      opacity: 1;
      background: #FEB6B6;
    }

    .bar.bottom {
      top: 29px;
      transform-origin: left bottom;
      background: #B8F7AC;
    }

    .menu-btn__text {
      position: absolute;
      bottom: -5px;
      left: 0;
      right: 0;
      margin: auto;
      color: #fff;
      transition: all 0.5s;
      display: block;
      visibility: visible;
      opacity: 1;
      text-shadow: 1px 1px #666;
      text-align: center;
    }

    .menu-btn:hover .bar {
      background: #999;
    }

    .menu-btn:hover .menu-btn__text {
      color: #999;
    }

    .close-menu {
      position: fixed;
      top: 0;
      right: 30%;
      width: 100%;
      height: 100vh;
      background: rgba(0, 0, 0, 0);
      transition-property: all;
      transition-duration: 0.3s;
      transition-delay: 0s;
      visibility: hidden;
      opacity: 0;
    }

    /* ------------------------------------------------ checked */
    .check:checked ~ .drawer-menu {
      transition-delay: 0.3s;
      transform: none;
      opacity: 1;
      z-index: 2;
    }

    .check:checked ~ .contents {
      transition-delay: 0s;
      transform: translateX(-300px);
    }

    .check:checked ~ .menu-btn .menu-btn__text {
      visibility: hidden;
      opacity: 0;
    }

    .check:checked ~ .menu-btn .bar.top {
      width: 30px;
      top: 10px;
      left: 10px;
      transform: rotate(45deg);
    }

    .check:checked ~ .menu-btn .bar.middle {
      opacity: 0;
    }

    .check:checked ~ .menu-btn .bar.bottom {
      width: 30px;
      top: 30px;
      left: 10px;
      transform: rotate(-45deg);
    }

    .check:checked ~ .close-menu {
      transition-duration: 1s;
      transition-delay: 0.3s;
      background: rgba(0, 0, 0, 0.5);
      visibility: visible;
      opacity: 1;
      z-index: 3;
    }
  }

/* -----------------------------------  共通パーツ  */
.forPC {
    display: block;
}
@media screen and (max-width:896px) {
    .forPC {
        display: none;
    }
}
.forSP {
    display: none;
}
@media screen and (max-width:896px) {
    .forSP {
        display: block;
    }
}
.forSM {
  display: none;
}
@media screen and (max-width:409px) {
  .forSM {
    display: block;
  }
}
.fw-b {
    font-weight: bold;
}
.mp1c {
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

/*    footer    */
html {
  position: relative;
  min-height: 100vh;
}
body {
  min-height: 100vh;
}
footer {
  background: #FF4500;
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
}
footer p {
  line-height: 40px;
  margin: 0!important;
}

.home footer {
  display: none;
}
.home .menu-btn {
  display: none;
}


/* page404 */
.error404 .sec01 h2{
    margin-top: 100px;
}
.error404 .btn__goTop {
    display: block;
    margin: 120px auto 15px auto;
    width: clamp(280px, 95%, 360px);
    height: 80px;
    line-height: 80px;
    background: #FFFFC8;
    border: solid 1px #FFC164;
    text-decoration: none;
    vertical-align: baseline;
    transition: .3s;
    text-align: center;
    margin-bottom: 100px;
}
.error404 .btn__goTop:hover {
  box-shadow: 5px 5px 0 #6DE1FE;
  transform: translate(-2.5px, -4.5px);
}

/* swiper */
      .swiper-container {
        width: 100%;
        padding-top: 50px;
        padding-bottom: 50px;
        background: #fff!important;
        margin-bottom: 0;
      }

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
      }
      .swiper-pagination {
        background: #fff!important;
      }