@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

/*------------------------------------------
  Base Setting
------------------------------------------*/
.lp-hd,
.lp-ft {
  position: relative;
  z-index: 100;
  background: #25375f;
}

.breadcrumb {
  background: #fff;
  position: relative;
  z-index: 100;
}
.breadcrumb li {
  font-size: 0.8rem;
}

.pagetop {
  z-index: 101;
}

.lp-main {
  min-height: 100vh;
  color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.lp-main * {
  box-sizing: border-box;
}
.lp-main a {
  color: #1A1A1A;
}
.lp-main a:hover {
  text-decoration: none;
}
.lp-main img {
  max-width: 100%;
}
.lp-main section {
  position: relative;
  z-index: 100;
}
.lp-main__in {
  width: 100%;
  background: #fff;
  position: relative;
}

@media only screen and (min-width: 769px) {
  .breadcrumb li {
    font-size: 1rem;
  }
  .lp-main {
    background-image: url(../images/pc_bg.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    background-attachment: fixed;
  }
  .lp-main__in {
    max-width: 750px;
    margin: auto;
  }
}
@media only screen and (min-width: 769px) and (min-width: 769px) {
  .lp-main__in {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }
}
@media only screen and (min-width: 769px) {
  .hvop {
    transition: 0.3s;
  }
  .hvop:hover {
    opacity: 0.7;
  }
  .snow-container {
    background-color: #14a83b;
    position: fixed;
    top: 0;
    height: 100vh; /* コンテナの高さ */
    width: 100%; /* コンテナの横幅 */
    overflow: hidden; /* コンテナからはみ出した要素を隠す */
    z-index: -1;
  }
  .snowflake {
    position: absolute;
    background: url(../images/snowflake.png);
    background-size: contain;
    animation: animate-snowflake 8s linear;
  }
  .snowflake::after {
    content: "";
    position: absolute;
    top: -14%;
    left: -10%;
    display: block;
    width: 100%;
    height: 100%;
  }
  @keyframes animate-snowflake {
    0% {
      top: 0;
      opacity: 1;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      top: 100vh;
    }
  }
}
.c-mv {
  background: #14a83b;
  padding-top: 15px;
}
@media (min-width: 769px) {
  .c-mv {
    padding-top: 30px;
  }
}
.c-mv .c-mv-img {
  text-align: center;
  margin: 0 15px 10px;
  position: relative;
}
@media (min-width: 769px) {
  .c-mv .c-mv-img {
    margin: 0 30px 20px;
  }
}
.c-mv .c-mv-img img.mv02 {
  position: absolute;
  top: 0;
  left: 0;
  animation: mv-anm 2s infinite steps(2, end);
}
.c-mv .mv-catch {
  padding: 10px 10px 13px;
  text-align: center;
}
@media (min-width: 769px) {
  .c-mv .mv-catch {
    padding: 20px 20px 26px;
  }
}
@media (min-width: 769px) {
  .c-mv .mv-catch img {
    width: 98px;
  }
}
.c-mv .slider-wrapper {
  background: url(../images/mv/mv_base.jpg) no-repeat;
  background-size: cover;
  overflow: hidden;
  opacity: 0;
  transition: 0.3s;
}
.c-mv .slider-wrapper .slick-slider .slick-track,
.c-mv .slider-wrapper .slick-slider .slick-list {
  transform: inherit !important;
}
.c-mv .slider-wrapper .slider-box {
  opacity: 0;
  transition: 0.3s;
}
.c-mv .slider-wrapper .slider-box.slick-initialized {
  opacity: 1;
}
.c-mv .slider-wrapper .slider-box .slick-track {
  display: flex;
  align-items: flex-end;
}
.c-mv .slider-wrapper .slider-box .slide-box-l {
  max-width: 750px;
  display: flex;
  align-items: flex-end;
}
.c-mv .slider-wrapper .slider-box .slide {
  position: relative;
}
.c-mv .slider-wrapper .slider-box .slide .mainimg {
  position: relative;
  z-index: 1;
}
.c-mv .slider-wrapper .slider-box .slide .shadow {
  mix-blend-mode: multiply;
  position: absolute;
  top: 0;
  left: 0;
}
.c-mv .slider-wrapper .slider01 {
  height: 18.1333333333vw;
  padding-top: 2.3vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 {
    max-height: 137px;
    padding-top: 18px;
  }
}
.c-mv .slider-wrapper .slider01 .img01 {
  width: 13.3333333333vw;
  margin-right: -2.2vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img01 {
    max-width: 100px;
    margin-right: -7px;
    margin-left: -9px;
  }
}
.c-mv .slider-wrapper .slider01 .img02 {
  width: 10.9333333333vw;
  margin-right: -3.2vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img02 {
    max-width: 82px;
    margin-right: -27px;
  }
}
.c-mv .slider-wrapper .slider01 .img03 {
  width: 12.8vw;
  margin-right: -3.9vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img03 {
    max-width: 96px;
    margin-right: -30px;
  }
}
.c-mv .slider-wrapper .slider01 .img04 {
  width: 12.2666666667vw;
  margin-right: -3vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img04 {
    max-width: 94px;
    margin-right: -19px;
  }
}
.c-mv .slider-wrapper .slider01 .img05 {
  width: 10.9333333333vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img05 {
    max-width: 82px;
    margin-bottom: 4px;
  }
}
.c-mv .slider-wrapper .slider01 .img06 {
  width: 10.6666666667vw;
  margin-left: -4.5vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img06 {
    max-width: 86px;
    margin-left: -35px;
  }
}
.c-mv .slider-wrapper .slider01 .img07 {
  width: 14.4vw;
  margin-left: -2.6vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img07 {
    max-width: 105px;
    margin-left: -24px;
  }
}
.c-mv .slider-wrapper .slider01 .img08 {
  width: 16.8vw;
  margin-left: -3.2vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img08 {
    max-width: 132px;
    margin-left: -30px;
  }
}
.c-mv .slider-wrapper .slider01 .img09 {
  width: 9.6vw;
  margin-left: -2.2vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img09 {
    max-width: 72px;
    margin-left: -14px;
  }
}
.c-mv .slider-wrapper .slider01 .img10 {
  width: 12.8vw;
  margin-left: -1.5vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider01 .img10 {
    max-width: 96px;
    margin-left: -17px;
  }
}
.c-mv .slider-wrapper .slider02 {
  height: 17.8666666667vw;
  padding-bottom: 1px;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 {
    max-height: 129px;
    padding-bottom: 0;
  }
}
.c-mv .slider-wrapper .slider02 .slick-list, .c-mv .slider-wrapper .slider02 .slick-track {
  height: 100%;
}
.c-mv .slider-wrapper .slider02 .img01 {
  width: 13.3333333333vw;
  margin-right: -2.2vw;
  margin-left: -1.3vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img01 {
    max-width: 100px;
    margin-right: -19px;
    margin-left: -22px;
  }
}
.c-mv .slider-wrapper .slider02 .img02 {
  width: 16.2666666667vw;
  margin-right: -1.8vw;
  margin-bottom: -0.1vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img02 {
    max-width: 122px;
    margin-bottom: 0;
    margin-right: -15px;
  }
}
.c-mv .slider-wrapper .slider02 .img03 {
  width: 12.8vw;
  margin-right: -2vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img03 {
    max-width: 98px;
    margin-right: -15px;
    width: 100%;
    top: -3px;
  }
}
.c-mv .slider-wrapper .slider02 .img04 {
  width: 17.3333333333vw;
  margin-right: -2.5vw;
  margin-bottom: -0.7vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img04 {
    max-width: 130px;
    margin-bottom: -5px;
    margin-right: -19px;
  }
}
.c-mv .slider-wrapper .slider02 .img05 {
  width: 7.7333333333vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img05 {
    max-width: 58px;
  }
}
.c-mv .slider-wrapper .slider02 .img06 {
  width: 10.9333333333vw;
  margin-left: -0.8vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img06 {
    max-width: 82px;
    margin-left: -10px;
  }
}
.c-mv .slider-wrapper .slider02 .img07 {
  width: 13.3333333333vw;
  margin-left: -3.5vw;
  margin-bottom: -0.7vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img07 {
    max-width: 100px;
    margin-bottom: -4px;
    margin-left: -22px;
  }
}
.c-mv .slider-wrapper .slider02 .img08 {
  width: 11.2vw;
  margin-left: -4.1vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img08 {
    max-width: 84px;
    margin-left: -28px;
  }
}
.c-mv .slider-wrapper .slider02 .img09 {
  width: 14.1333333333vw;
  margin-left: -3.4vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider02 .img09 {
    max-width: 102px;
    margin-left: -24px;
  }
}
.c-mv .slider-wrapper .slider03 {
  height: 17.8666666667vw;
  padding-bottom: 1.1vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 {
    max-height: 138px;
    padding-top: 0;
    padding-bottom: 5px;
  }
}
.c-mv .slider-wrapper .slider03 .slick-list, .c-mv .slider-wrapper .slider03 .slick-track {
  height: 100%;
}
.c-mv .slider-wrapper .slider03 .img01 {
  width: 13.0666666667vw;
  margin-right: -1.5vw;
  margin-bottom: 0;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img01 {
    max-width: 104px;
    width: 100%;
    margin-right: -17px;
    margin-bottom: 3px;
  }
}
.c-mv .slider-wrapper .slider03 .img02 {
  width: 14.1333333333vw;
  margin-right: -3.8vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img02 {
    max-width: 106px;
    margin-right: -28px;
    margin-bottom: 2px;
  }
}
.c-mv .slider-wrapper .slider03 .img03 {
  width: 12.8vw;
  margin-right: -0.5vw;
  margin-bottom: -0.8vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img03 {
    max-width: 99px;
    width: auto;
    margin-right: -10px;
    margin-bottom: 0;
  }
}
.c-mv .slider-wrapper .slider03 .img04 {
  width: 15.7333333333vw;
  margin-right: -1.9vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img04 {
    max-width: 124px;
    width: auto;
    margin-right: -8px;
  }
}
.c-mv .slider-wrapper .slider03 .img05 {
  width: 12.5333333333vw;
  margin-left: -2vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img05 {
    max-width: 94px;
    margin-left: -20px;
  }
}
.c-mv .slider-wrapper .slider03 .img06 {
  width: 12vw;
  margin-left: -2vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img06 {
    max-width: 90px;
    margin-left: -18px;
  }
}
.c-mv .slider-wrapper .slider03 .img07 {
  width: 14.6666666667vw;
  margin-left: -2vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img07 {
    max-width: 110px;
    margin-left: -10px;
  }
}
.c-mv .slider-wrapper .slider03 .img08 {
  width: 10.4vw;
  margin-left: -2vw;
  margin-bottom: -0.8vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img08 {
    max-width: 80px;
    width: auto;
    margin-left: -8px;
    margin-bottom: 0;
  }
}
.c-mv .slider-wrapper .slider03 .img09 {
  width: 13.3333333333vw;
  margin-left: -1.8vw;
  margin-bottom: -0.5333333333vw;
}
@media (min-width: 769px) {
  .c-mv .slider-wrapper .slider03 .img09 {
    max-width: 100px;
    margin-left: -11px;
    margin-bottom: 0;
  }
}

.contents-box {
  font-weight: 500;
}
.contents-box * {
  min-height: 0;
  min-width: 0;
}
.contents-box .item-slider {
  height: 76vw;
  background: #fff;
  position: relative;
}
@media (min-width: 769px) {
  .contents-box .item-slider {
    height: 570px;
  }
}
.contents-box .item-slider .slider-box {
  opacity: 0;
  transition: 0.3s;
}
.contents-box .item-slider .slider-box.slick-initialized {
  opacity: 1;
}

/*============================
#intro
============================*/
#intro {
  overflow: hidden;
  padding-top: 6.9333333333vw;
  padding-bottom: 9.3333333333vw;
}
@media (min-width: 769px) {
  #intro {
    padding-top: 52px;
    padding-bottom: 70px;
  }
}
#intro .mds-l {
  text-align: center;
  margin-bottom: 5.8666666667vw;
}
@media (min-width: 769px) {
  #intro .mds-l {
    margin-bottom: 44px;
  }
}
#intro .mds-l img {
  width: 82.9333333333vw;
}
@media (min-width: 769px) {
  #intro .mds-l img {
    width: 622px;
  }
}
#intro .top-txt {
  padding: 10.6666666667vw 3.7333333333vw 10.6666666667vw;
  text-align: center;
  font-weight: 500;
  line-height: 2.71;
  font-size: 14px;
  letter-spacing: 0;
}
@media (min-width: 769px) {
  #intro .top-txt {
    padding: 60px 28px 100px;
    font-size: 28px;
  }
}
#intro .intro-img {
  position: relative;
}
#intro .intro-img .intro-bg {
  position: relative;
}
#intro .top-nav {
  text-align: center;
}
#intro .top-nav li {
  margin-bottom: 4vw;
}
@media (min-width: 769px) {
  #intro .top-nav li {
    margin-bottom: 30px;
  }
}
#intro .top-nav li a img {
  width: 68.8vw;
}
@media (min-width: 769px) {
  #intro .top-nav li a img {
    width: 516px;
  }
}
.contents-box .item-slider {
  height: 85.3333333333vw;
  background: #fff;
  position: relative;
}
@media (min-width: 769px) {
  .contents-box .item-slider {
    height: 640px;
  }
}
.contents-box .slider-wrapper {
  height: 100%;
  display: flex;
  align-items: flex-end;
  position: relative;
  opacity: 0;
  transition: 0.3s;
}
.contents-box .slider-box .slick-track {
  display: flex;
}
.contents-box .slider-box .slick-slide {
  height: auto !important;
}
.contents-box .slider-box .item-box.slide {
  margin: 0 5px;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: 0.3s;
}
@media (min-width: 769px) {
  .contents-box .slider-box .item-box.slide {
    margin: 0 10px;
    width: 288px;
  }
}
.contents-box .slider-box .item-box.slide .img-box {
  transition: 0.3s;
  width: 100%;
}
.contents-box .slider-box .item-box.slide .img-box img {
  width: 100%;
  transition: 0.3s;
  margin: 0 auto;
}
.contents-box .slider-box .item-box.slide .txt-box {
  border: solid 2px #000000;
  padding: 4px;
  width: 100%;
}
@media (min-width: 769px) {
  .contents-box .slider-box .item-box.slide .txt-box {
    padding: 8px;
  }
}
.contents-box .slider-box .item-box.slide .txt-box .inner {
  background: #fff;
  font-size: 10px;
  letter-spacing: 0;
  padding: 5px 10px;
  font-weight: 500;
  border: 2px solid #000;
}
@media (min-width: 769px) {
  .contents-box .slider-box .item-box.slide .txt-box .inner {
    font-size: 20px;
    padding: 10px 20px;
  }
}
.contents-box .slider-box .item-box.slide .txt-box .item-name {
  font-weight: 600;
}
.contents-box .slider-box .item-box.slide .txt-box .price .tax {
  font-size: 10px;
}
@media (min-width: 769px) {
  .contents-box .slider-box .item-box.slide .txt-box .price .tax {
    font-size: 20px;
  }
}
.contents-box .slider-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 64px);
  margin-left: -32px;
}
@media (min-width: 769px) {
  .contents-box .slider-frame {
    width: calc(100% + 128px);
    margin-left: -64px;
  }
}

/*============================
#desegners
============================*/
#designes {
  background: #14a83b;
  padding-top: 13.3333333333vw;
  padding-bottom: 16vw;
  position: relative;
}
@media (min-width: 769px) {
  #designes {
    padding-top: 100px;
    padding-bottom: 120px;
  }
}
#designes .bg-top {
  line-height: 0;
  position: relative;
  z-index: 1;
  margin-bottom: -1px;
}
#designes .bg-top img {
  max-width: initial;
  width: 100%;
}
#designes .bg-top2 {
  width: 93.1466666667vw;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
}
@media (min-width: 769px) {
  #designes .bg-top2 {
    width: 696px;
  }
}
#designes .bg-top2 img {
  width: 100%;
}
#designes .bg-left,
#designes .bg-right {
  position: absolute;
  top: 0;
  width: 3.4666666667vw;
  z-index: 2;
}
@media (min-width: 769px) {
  #designes .bg-left,
  #designes .bg-right {
    width: 26px;
  }
}
#designes .bg-left img,
#designes .bg-right img {
  max-width: initial;
  width: 100%;
}
#designes .bg-left {
  left: 0;
}
#designes .bg-right {
  right: 0;
}
#designes .top-txt {
  position: absolute;
  left: 0;
  right: 0;
  top: 21.3333333333vw;
  margin: auto;
  font-size: 12px;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0;
}
@media (min-width: 769px) {
  #designes .top-txt {
    top: 160px;
    font-size: 24px;
  }
}
#designes .bg-btm img {
  max-width: initial;
  width: 100%;
}
#designes .item-slider .slider-box .item-box.slide .txt-box {
  background-color: #4e7ec9;
}
#designes .btn-more {
  text-align: center;
  margin-top: 4vw;
}
@media (min-width: 769px) {
  #designes .btn-more {
    margin-top: 30px;
  }
}
#designes .btn-more a img {
  width: 67.4666666667vw;
}
@media (min-width: 769px) {
  #designes .btn-more a img {
    width: 506px;
  }
}

/*============================
#collaboration
============================*/
#collaboration {
  background: #14a83b;
  padding: 0;
  padding-bottom: 6.6666666667vw;
}
@media (min-width: 769px) {
  #collaboration {
    padding-bottom: 50px;
  }
}
#collaboration .bg-top {
  line-height: 0;
}
#collaboration .collaboration-box {
  background: #fff;
  margin-top: -1px;
}
#collaboration .collaboration-box .box-s {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-left: 5.3333333333vw;
  padding-right: 5.3333333333vw;
  justify-content: center;
}
@media (min-width: 769px) {
  #collaboration .collaboration-box .box-s {
    padding-left: 28px;
    padding-right: 28px;
  }
}
#collaboration .collaboration-box .box-s .inner {
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  #collaboration .collaboration-box .box-s .item-box.slide {
    width: 40%;
  }
}
#collaboration .collaboration-box .box-s .txt-box {
  font-size: 10px;
}
@media (min-width: 769px) {
  #collaboration .collaboration-box .box-s .txt-box {
    font-size: 20px;
  }
}
#collaboration .collaboration-box .box-s .bg-img {
  position: absolute;
  top: 0;
  left: 0;
}
#collaboration .collaboration-box .box-s .deco-img {
  position: absolute;
  top: 2.9333333333vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 92.5333333333vw;
  z-index: 1;
}
@media (min-width: 769px) {
  #collaboration .collaboration-box .box-s .deco-img {
    top: 21px;
    width: 694px;
  }
}
#collaboration .collaboration-box .box-s:nth-child(1) {
  height: 59.2vw;
}
@media (min-width: 769px) {
  #collaboration .collaboration-box .box-s:nth-child(1) {
    height: 443px;
  }
}
#collaboration .collaboration-box .box-s:nth-child(2) {
  height: 68vw;
}
@media (min-width: 769px) {
  #collaboration .collaboration-box .box-s:nth-child(2) {
    height: 506px;
  }
}
#collaboration .collaboration-box .box-s:nth-child(3) {
  height: 68vw;
}
@media (min-width: 769px) {
  #collaboration .collaboration-box .box-s:nth-child(3) {
    height: 505px;
  }
}
#collaboration .collaboration-box .box-s:nth-child(4) {
  height: 66.9333333333vw;
}
@media (min-width: 769px) {
  #collaboration .collaboration-box .box-s:nth-child(4) {
    height: 499px;
  }
}
#collaboration .slider-box .item-box.slide .txt-box {
  background-color: #e14092;
}
#collaboration .top-txt {
  position: absolute;
  left: 0;
  right: 0;
  top: 44vw;
  margin: auto;
  font-size: 12px;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  letter-spacing: 0;
  z-index: 1;
}
@media (min-width: 769px) {
  #collaboration .top-txt {
    font-size: 24px;
    top: 330px;
  }
}
/*============================
#pickup
============================*/
#pickup {
  background: #14a83b;
  padding: 0;
}
#pickup .bg-top {
  line-height: 0;
}
#pickup .pickup-box {
  background: #fff;
  margin-top: -1px;
}
#pickup .pickup-box .box-s {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-left: 5.3333333333vw;
  padding-right: 5.3333333333vw;
  justify-content: center;
}
@media (min-width: 769px) {
  #pickup .pickup-box .box-s {
    padding-left: 28px;
    padding-right: 28px;
  }
}
#pickup .pickup-box .box-s .inner {
  position: relative;
  z-index: 1;
}
#pickup .pickup-box .box-s .txt-box {
  font-size: 10px;
}
@media (min-width: 769px) {
  #pickup .pickup-box .box-s .txt-box {
    font-size: 20px;
  }
}
#pickup .pickup-box .box-s .bg-img {
  position: absolute;
  top: 0;
  left: 0;
}
#pickup .pickup-box .box-s .deco-img {
  position: absolute;
  top: 3.2vw;
  left: 0;
  right: 0;
  margin: auto;
  width: 92.8vw;
  z-index: 1;
}
@media (min-width: 769px) {
  #pickup .pickup-box .box-s .deco-img {
    top: 25px;
    width: 694px;
  }
}
#pickup .pickup-box .box-s .deco-img.deco2 {
  width: 100%;
  top: -24.1333333333vw;
}
@media (min-width: 769px) {
  #pickup .pickup-box .box-s .deco-img.deco2 {
    width: 100%;
    top: -181px;
  }
}
#pickup .pickup-box .box-s:nth-child(1) {
  height: 45.0666666667vw;
}
@media (min-width: 769px) {
  #pickup .pickup-box .box-s:nth-child(1) {
    height: 337px;
  }
}
#pickup .pickup-box .box-s:nth-child(2) {
  height: 67.7333333333vw;
}
@media (min-width: 769px) {
  #pickup .pickup-box .box-s:nth-child(2) {
    height: 508px;
  }
}
#pickup .pickup-box .box-s:nth-child(3) {
  height: 68vw;
}
@media (min-width: 769px) {
  #pickup .pickup-box .box-s:nth-child(3) {
    height: 508px;
  }
}
#pickup .pickup-box .box-s:nth-child(4) {
  height: 67.7333333333vw;
}
@media (min-width: 769px) {
  #pickup .pickup-box .box-s:nth-child(4) {
    height: 508px;
  }
}
#pickup .slider-box .item-box.slide .txt-box {
  background-color: #00a045;
}
#pickup .top-txt {
  position: absolute;
  left: 0;
  right: 0;
  top: 42.6666666667vw;
  margin: auto;
  font-size: 12px;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  letter-spacing: 0;
  z-index: 1;
}
@media (min-width: 769px) {
  #pickup .top-txt {
    font-size: 24px;
    top: 320px;
  }
}
/*============================
#allitems
============================*/
#allitems {
  text-align: center;
  background: #14a83b;
  padding: 17.8666666667vw 2.6666666667vw 12vw;
}
@media (min-width: 769px) {
  #allitems {
    padding: 134px 20px 90px;
  }
}
#allitems .items_ttl {
  margin-bottom: 2.1333333333vw;
}
@media (min-width: 769px) {
  #allitems .items_ttl {
    margin-bottom: 16px;
  }
}
#allitems .items_ttl img {
  width: 92.2666666667vw;
}
@media (min-width: 769px) {
  #allitems .items_ttl img {
    width: 692px;
  }
}
#allitems .items_btn {
  position: relative;
}
#allitems .items_btn a img {
  width: 74.6666666667vw;
}
@media (min-width: 769px) {
  #allitems .items_btn a img {
    width: 560px;
  }
}
#allitems .items_btn a img.btn02 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: mv-anm 2s infinite steps(2, end);
}

/*============================
#campaign1
============================*/
#campaign1 {
  background: #e04091;
  padding: 13.3333333333vw 4.5333333333vw 13.3333333333vw;
  text-align: center;
}
@media (min-width: 769px) {
  #campaign1 {
    padding: 100px 34px 100px;
  }
}
#campaign1 .ttl {
  margin-bottom: 20px;
}
@media (min-width: 769px) {
  #campaign1 .ttl {
    margin-bottom: 40px;
  }
}
#campaign1 .ttl img {
  width: 55.4666666667vw;
}
@media (min-width: 769px) {
  #campaign1 .ttl img {
    width: 416px;
  }
}
#campaign1 .visual {
  position: relative;
}
#campaign1 .visual img {
  width: 100%;
}
#campaign1 .note-txt {
  font-size: 10px;
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0 50px;
  text-align: left;
}
@media (min-width: 769px) {
  #campaign1 .note-txt {
    font-size: 14px;
    bottom: 100px;
    padding: 0 100px;
  }
}
#campaign1 .end::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 92%;
  height: 95%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}
#campaign1 .end::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  width: 139px;
  height: 40px;
  background: url(../images/label_end.png) no-repeat;
  background-size: contain;
}
@media (min-width: 769px) {
  #campaign1 .end::after {
    width: 278px;
    height: 80px;
  }
}

/*============================
#wrapping
============================*/
#wrapping {
  background: #14a83b;
  padding: 13.3333333333vw 4.5333333333vw 10.6666666667vw;
}
@media (min-width: 769px) {
  #wrapping {
    padding: 100px 34px 80px;
  }
}
#wrapping .ttl {
  margin-bottom: 20px;
  text-align: center;
  margin-top: 25px;
}
@media (min-width: 769px) {
  #wrapping .ttl {
    margin-top: 40px;
  }
}
#wrapping .ttl img {
  width: 88.8vw;
}
@media (min-width: 769px) {
  #wrapping .ttl img {
    width: 666px;
  }
}
#wrapping .ttl.bag {
  margin-top: 0;
}
@media (min-width: 769px) {
  #wrapping .ttl.bag img {
    width: 614px;
  }
}
#wrapping .sttl {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 15px;
}
@media (min-width: 769px) {
  #wrapping .sttl {
    font-size: 28px;
    margin-bottom: 30px;
  }
}
#wrapping .visual {
  margin-bottom: 15px;
}
@media (min-width: 769px) {
  #wrapping .visual {
    margin-bottom: 30px;
  }
}
#wrapping .note-txt {
  font-size: 10px;
  color: #fff;
}
@media (min-width: 769px) {
  #wrapping .note-txt {
    font-size: 20px;
  }
}

/*============================
#essentials
============================*/
#essentials {
  background: #14a83b;
  padding: 0 0 5.3333333333vw;
}
@media (min-width: 769px) {
  #essentials {
    padding: 0 0 40px;
  }
}
#essentials .bg-top {
  line-height: 0;
}
#essentials .essentials-box {
  background: #fff;
  margin-top: -1px;
}
#essentials .essentials-box .box-s {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-left: 9.0666666667vw;
  padding-right: 10.4vw;
}
@media (min-width: 769px) {
  #essentials .essentials-box .box-s {
    padding-left: 68px;
    padding-right: 78px;
  }
}
#essentials .essentials-box .box-s .inner {
  position: relative;
  z-index: 1;
}
#essentials .essentials-box .box-s .inner a {
  display: flex;
  align-items: center;
  gap: 14px;
}
@media (min-width: 769px) {
  #essentials .essentials-box .box-s .inner a {
    gap: 28px;
  }
}
@media (max-width: 768px) {
  #essentials .essentials-box .box-s .inner a:hover {
    opacity: 1;
  }
  #essentials .essentials-box .box-s .inner a:hover img {
    opacity: 1;
  }
}
#essentials .essentials-box .box-s .img-box {
  width: 131px;
}
@media (min-width: 769px) {
  #essentials .essentials-box .box-s .img-box {
    width: 262px;
  }
}
#essentials .essentials-box .box-s .txt-box {
  flex: 1;
  font-size: 12px;
}
@media (min-width: 769px) {
  #essentials .essentials-box .box-s .txt-box {
    font-size: 24px;
  }
}
#essentials .essentials-box .box-s .bg-img {
  position: absolute;
  top: 0;
  left: 0;
}
#essentials .essentials-box .box-s:nth-child(1) {
  height: 38.1333333333vw;
}
@media (min-width: 769px) {
  #essentials .essentials-box .box-s:nth-child(1) {
    height: 286px;
  }
}
#essentials .essentials-box .box-s:nth-child(2) {
  height: 48.5333333333vw;
}
@media (min-width: 769px) {
  #essentials .essentials-box .box-s:nth-child(2) {
    height: 363px;
  }
}
#essentials .essentials-box .box-s:nth-child(3) {
  height: 48.5333333333vw;
}
@media (min-width: 769px) {
  #essentials .essentials-box .box-s:nth-child(3) {
    height: 364px;
  }
}
#essentials .top-txt {
  position: absolute;
  left: 0;
  right: 0;
  top: 49.3333333333vw;
  margin: auto;
  font-size: 12px;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
  letter-spacing: 0;
}
@media (min-width: 769px) {
  #essentials .top-txt {
    font-size: 24px;
    top: 360px;
  }
}
/*============================
#campaign2
============================*/
#campaign2 {
  background: #5d7abd;
  padding: 16vw 0 16vw;
  text-align: center;
}
@media (min-width: 769px) {
  #campaign2 {
    padding: 120px 0 120px;
  }
}
#campaign2 .ttl {
  margin-bottom: 20px;
}
@media (min-width: 769px) {
  #campaign2 .ttl {
    margin-bottom: 40px;
  }
}
#campaign2 .ttl img {
  width: 55.4666666667vw;
}
@media (min-width: 769px) {
  #campaign2 .ttl img {
    width: 416px;
  }
}
#campaign2 .visual {
  margin-bottom: 10px;
}
@media (min-width: 769px) {
  #campaign2 .visual {
    margin-bottom: 20px;
  }
}
#campaign2 .btn {
  margin-bottom: 10px;
}
@media (min-width: 769px) {
  #campaign2 .btn {
    margin-bottom: 20px;
  }
}
#campaign2 .btn a {
  display: block;
}
#campaign2 .btn a img {
  width: 64vw;
}
@media (min-width: 769px) {
  #campaign2 .btn a img {
    width: 480px;
  }
}
#campaign2 .btn a:hover img {
  opacity: 1;
}
@media (min-width: 769px) {
  #campaign2 .btn a:hover img {
    animation: poyopoyo 2s ease-out;
  }
}
#campaign2 .note-txt {
  font-size: 12px;
  padding: 0 5.3333333333vw;
  text-align: left;
}
@media (min-width: 769px) {
  #campaign2 .note-txt {
    font-size: 24px;
    padding: 0 40px;
  }
}

/*============================
#event
============================*/
#event {
  background: #fdd108;
  padding: 18.6666666667vw 0 16vw;
  text-align: center;
}
@media (min-width: 769px) {
  #event {
    padding: 140px 0 120px;
  }
}
#event .ttl {
  margin-bottom: 14px;
}
@media (min-width: 769px) {
  #event .ttl {
    margin-bottom: 28px;
  }
}
@media (min-width: 769px) {
  #event .ttl img {
    width: 304px;
  }
}
#event .ttl2 {
  margin-bottom: 10px;
  padding: 0 10px;
  position: relative;
}
@media (min-width: 769px) {
  #event .ttl2 {
    margin-bottom: 20px;
    padding: 0 20px;
  }
}
#event .ttl2 img {
  width: 94.6666666667vw;
}
@media (min-width: 769px) {
  #event .ttl2 img {
    width: 709px;
  }
}
#event .ttl2 img.img02 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: mv-anm 2s infinite steps(2, end);
}
#event .visual {
  margin-bottom: 20px;
}
@media (min-width: 769px) {
  #event .visual {
    margin-bottom: 40px;
  }
}
#event .date {
  margin-bottom: 20px;
}
@media (min-width: 769px) {
  #event .date {
    margin-bottom: 40px;
  }
}
#event .date img {
  width: 81.0666666667vw;
}
@media (min-width: 769px) {
  #event .date img {
    width: 608px;
  }
}
#event .detail {
  font-size: 12px;
  width: 72.5333333333vw;
  max-width: 544px;
  margin: 0 auto 10px;
}
@media (min-width: 769px) {
  #event .detail {
    font-size: 24px;
    margin: 0 auto 20px;
  }
}
#event .btn a img {
  width: 80%;
}
@media (min-width: 769px) {
  #event .btn a img {
    width: 506px;
  }
}
#event .btn a:hover img {
  opacity: 1;
}
@media (min-width: 769px) {
  #event .btn a:hover img {
    animation: poyopoyo 2s ease-out;
  }
}

/*============================
#allitems_btm
============================*/
#allitems_btm {
  text-align: center;
  background: #14a83b;
  width: 100%;
  padding: 6.9333333333vw 0 2.6666666667vw;
}
@media (min-width: 769px) {
  #allitems_btm {
    padding: 52px 0 20px;
  }
}
#allitems_btm .items_ttl {
  text-align: center;
  margin-bottom: 2.6666666667vw;
}
@media (min-width: 769px) {
  #allitems_btm .items_ttl {
    margin-bottom: 20px;
  }
}
#allitems_btm .items_ttl img {
  width: 73.3333333333vw;
}
@media (min-width: 769px) {
  #allitems_btm .items_ttl img {
    width: 540px;
  }
}
#allitems_btm .items_btn {
  position: relative;
}
#allitems_btm .items_btn a img {
  width: 73.8666666667vw;
}
@media (min-width: 769px) {
  #allitems_btm .items_btn a img {
    width: 554px;
  }
}
#allitems_btm .items_btn a img.btn02 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: mv-anm 2s infinite steps(2, end);
}
#allitems_btm .items_btn a:hover img {
  opacity: 1;
}
/*============================
#bottom
============================*/
#bottom {
  background: #00a73c;
  color: #fff;
  text-align: center;
  padding: 0 7.4666666667vw 1.8666666667vw;
}
@media (min-width: 769px) {
  #bottom {
    padding: 0 56px 14px;
  }
}
#bottom a {
  color: #fff;
}
#bottom .note-txt {
  font-size: 10px;
  margin-bottom: 20px;
  text-align: left;
}
@media (min-width: 769px) {
  #bottom .note-txt {
    font-size: 20px;
    margin-bottom: 40px;
  }
}
#bottom .copy-sesame {
  text-align: center;
  margin-bottom: 5.3333333333vw;
}
@media (min-width: 769px) {
  #bottom .copy-sesame {
    margin-bottom: 40px;
  }
}
#bottom .copy-sesame img {
  width: 88.8vw;
}
@media (min-width: 769px) {
  #bottom .copy-sesame img {
    width: 666px;
  }
}
#bottom .copyright {
  font-size: 10px;
  line-height: 2;
}
@media (min-width: 769px) {
  #bottom .copyright {
    font-size: 20px;
  }
}

@keyframes poyopoyo {
  0%, 10%, 30%, 50% {
    transform: scale(1);
  }
  20%, 40% {
    transform: scale(0.95);
  }
}
@keyframes mv-anm {
  0% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
@keyframes bounce {
  0%, 100%, 10%, 26.5%, 40% {
    transform: translate3d(0, 0, 0);
  }
  20%, 23% {
    transform: translate3d(0, -8px, 0);
  }
  35% {
    transform: translate3d(0, -4px, 0);
  }
  45% {
    transform: translate3d(0, -1px, 0);
  }
}
@keyframes yokoyure {
  0%, 100%, 10%, 26.5%, 40% {
    transform: translateX(0);
  }
  20%, 23% {
    transform: translateX(-5px);
  }
  35% {
    transform: translateX(3px);
  }
  45% {
    transform: translateX(-2px);
  }
}
@keyframes walk {
  from {
    animation-timing-function: linear;
    transform: translate(-100%, 0);
  }
  to {
    animation-timing-function: linear;
    transform: translate(840%, 0);
  }
}
@keyframes walk2 {
  from {
    animation-timing-function: linear;
    transform: translate(-40%, 0);
  }
  to {
    animation-timing-function: linear;
    transform: translate(-990%, 0);
  }
}
@keyframes walk3 {
  from {
    animation-timing-function: linear;
    transform: translate(-100%, 0);
  }
  to {
    animation-timing-function: linear;
    transform: translate(1040%, 0);
  }
}/*# sourceMappingURL=map/page.css.map */