@charset "UTF-8";
/*------------------------------------------
  Base Layout
------------------------------------------*/
.lp-main {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 3.4666666667vw;
  color: #3E2411;
  background-color: #F7E1EC;
  line-height: 1.8461;
  letter-spacing: 0.08em;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
}
.lp-main.is--active {
  opacity: 1;
  transition: 0.8s;
}
.lp-main__left {
  display: none;
}
.lp-main__contents {
  background: #75BDB9;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.lp-main section {
  position: relative;
}
.lp-main img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.lp-main a {
  color: #3E2411;
}
.lp-main a:hover {
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  .lp-main {
    font-size: 17px;
    background-image: url(../images/patt01.webp);
    background-repeat: repeat;
    background-position: center;
    background-size: 140px;
  }
  .lp-main__in {
    display: flex;
  }
  .lp-main__contents {
    width: 490px;
    margin-left: auto;
  }
  .lp-main a {
    transition: opacity 0.4s;
  }
  .lp-main a:hover {
    opacity: 0.7;
  }
}
footer .block-page-top {
  display: none !important;
}

#footer_top {
  margin-top: 0;
}

@media only screen and (min-width: 751px) {
  .pane-footer {
    z-index: 1000;
  }
}
/*------------------------------------------
  layout
------------------------------------------*/
.l-inner {
  padding: 0 4vw;
  position: relative;
  z-index: 2;
}

@media only screen and (min-width: 768px) {
  .l-inner {
    padding: 0 20px;
  }
}
.lp-nav {
  display: none;
  position: fixed;
  bottom: 60px;
  left: 0;
  z-index: 9;
}
.lp-nav ul {
  transition: opacity 1s;
  width: 6vw;
  background: #FDF682;
  text-align: center;
  border-radius: 2.6666666667vw 2.6666666667vw 0 0/2.6666666667vw 2.6666666667vw 0 0;
  padding: 3.7333333333vw 0 4.6666666667vw;
}
.lp-nav li {
  margin-bottom: 14.1333333333vw;
}
.lp-nav li:last-child {
  margin-bottom: 0;
}
.lp-nav a {
  display: block;
  position: relative;
}
.lp-nav a:before {
  content: "";
  width: 8.2666666667vw;
  height: 11.4666666667vw;
  background: url(../images/nav-illust.webp) no-repeat center;
  background-size: 100%;
  position: absolute;
  left: 100%;
  top: -11.3333333333vw;
  transition: opacity 0.3s;
  opacity: 0;
}
.lp-nav a.is--current {
  text-decoration: underline;
}
.lp-nav a.is--current:before {
  opacity: 1;
}
.lp-nav a.is--current .nav-icon {
  width: 8vw;
}
.lp-nav .nav-txt {
  display: block;
  text-align: center;
}
.lp-nav .nav-txt img {
  width: 2.4vw;
}
.lp-nav .nav-icon {
  position: absolute;
  bottom: 100%;
  margin-bottom: 1.2vw;
  left: 50%;
  transform: translateX(-50%);
  width: 6.6666666667vw;
  transition: width 0.3s;
}
.lp-nav .nav-item01 a:before {
  top: -8.6666666667vw;
}
.lp-nav .nav-item01 .nav-icon {
  margin-bottom: 0.5333333333vw;
  left: 0.2666666667vw;
  transform: translateX(0);
  width: 8.9333333333vw !important;
}

@media only screen and (min-width: 768px) {
  .lp-nav {
    bottom: 0;
    left: 545px;
  }
  .lp-nav ul {
    width: 30px;
    border-radius: 13px 13px 0 0/13px 13px 0 0;
    padding: 18px 0 22px;
  }
  .lp-nav li {
    margin-bottom: 69px;
  }
  .lp-nav a:before {
    width: 40px;
    height: 56px;
    top: -55px;
  }
  .lp-nav a.is--current .nav-icon {
    width: 40px;
  }
  .lp-nav .nav-txt img {
    width: 12px;
  }
  .lp-nav .nav-icon {
    margin-bottom: 6px;
    width: 32px;
  }
  .lp-nav .nav-item01 a:before {
    top: -42px;
  }
  .lp-nav .nav-item01 .nav-icon {
    margin-bottom: 3px;
    left: 2px;
    transform: translateX(0);
    width: 44px !important;
  }
}
@media only screen and (min-width: 1264px) {
  .lp-nav {
    left: calc(82% - 490px);
  }
}
.lp-checkbtn {
  position: fixed;
  bottom: 60px;
  right: 4vw;
  transition: opacity 1s;
  z-index: 9;
}
.lp-checkbtn a {
  display: block;
  position: relative;
  width: 18.4vw;
}

@media only screen and (min-width: 768px) {
  .lp-checkbtn {
    bottom: 20px;
    right: auto;
    left: 575px;
    margin-left: 368px;
  }
  .lp-checkbtn a {
    width: 90px;
  }
}
@media only screen and (min-width: 1264px) {
  .lp-checkbtn {
    left: calc(82% - 460px);
  }
}
.pc-left {
  display: none;
}

@media only screen and (min-width: 768px) {
  .pc-left {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: calc(82% - 490px);
    min-width: 545px;
    height: 100vh;
  }
  .pc-left__inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pc-left .pc-img {
    width: 498px;
    height: 310px;
    position: relative;
    z-index: 1;
  }
  .pc-left .pc-img_ttl {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
  }
  .pc-left .pc-img__bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    width: 100%;
    animation: image-switch-animation 12s infinite;
  }
  .pc-left .pc-img__bg:nth-of-type(1) {
    animation-delay: 0s;
  }
  .pc-left .pc-img__bg:nth-of-type(2) {
    animation-delay: 3s;
  }
  .pc-left .pc-img__bg:nth-of-type(3) {
    animation-delay: 6s;
  }
  .pc-left .pc-img__bg:nth-of-type(4) {
    animation-delay: 9s;
  }
}
@keyframes image-switch-animation {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.pc-right {
  display: none;
}

@media only screen and (min-width: 768px) {
  .pc-right {
    display: block;
    position: relative;
    height: 100vh;
    width: 18%;
  }
}
/*------------------------------------------
  contents
------------------------------------------*/
/* ========== MV ========== */
.mv-img {
  background: #FFFCF4;
  margin: 0;
  padding-bottom: 5.3333333333vw;
}
.mv-img img {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .mv-img {
    padding-bottom: 26px;
  }
}
/* ========== section共通 ========== */
.sec {
  position: relative;
}
.sec-head {
  position: relative;
}
.sec-foot {
  position: relative;
}
.sec-inner {
  position: relative;
}
.sec-contents {
  position: relative;
}

/* ========== lead ========== */
.sec--lead {
  padding: 12vw 0;
}
.sec--lead:before {
  background-image: url(../images/wave01.webp);
  border-top: 1px solid #fffcf4;
}
.sec--lead:after {
  background-image: url(../images/wave02.webp);
}
.sec--lead .sec-inner {
  background: url(../images/lead-bg.webp) repeat-y center top;
  background-size: 100%;
}
.sec--lead .sec-contents {
  background: #FFFEF9;
  border: 2px solid #3E2411;
  border-radius: 5.3333333333vw;
  padding: 6.6666666667vw 5.3333333333vw 6.1333333333vw;
}
.sec--lead .lead-message {
  text-align: center;
  margin-bottom: 5.3333333333vw;
}
.sec--lead .lead-term {
  margin-bottom: 6.1333333333vw;
}
.sec--lead .lead-term__block {
  position: relative;
  text-align: center;
  margin-bottom: 6.1333333333vw;
}
.sec--lead .lead-term__block:last-child {
  margin-bottom: 0;
}
.sec--lead .lead-term__block .block-ttl {
  background: #F4D3DB;
  font-size: 4.8vw;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-bottom: 2.9333333333vw;
}
.sec--lead .lead-term .illust01 {
  width: 16.5333333333vw;
  top: 2.6666666667vw;
  left: -2.6666666667vw;
}
.sec--lead .lead-term .illust02 {
  width: 15.2vw;
  bottom: -4vw;
  right: 0;
}

@media only screen and (min-width: 768px) {
  .sec--lead {
    padding: 58px 0;
  }
  .sec--lead .sec-contents {
    border-radius: 26px;
    padding: 32px 26px 30px;
  }
  .sec--lead .lead-message {
    margin-bottom: 26px;
  }
  .sec--lead .lead-term {
    margin-bottom: 30px;
  }
  .sec--lead .lead-term__block {
    margin-bottom: 30px;
  }
  .sec--lead .lead-term__block .block-ttl {
    font-size: 23px;
    margin-bottom: 14px;
  }
  .sec--lead .lead-term .illust01 {
    width: 80px;
    top: 13px;
    left: -13px;
  }
  .sec--lead .lead-term .illust02 {
    width: 74px;
    bottom: 20px;
  }
}
/* ========== art ========== */
.sec--art {
  background: #FFFCF4;
  padding: 13.3333333333vw 0;
}
.sec--art:after {
  background-image: url(../images/wave03.webp);
}
.sec--art .art-message {
  padding: 0 9.8666666667vw;
  margin-bottom: 5.3333333333vw;
  text-align: center;
}
.sec--art .art-message__txt {
  margin-bottom: 5.3333333333vw;
}
.sec--art .art-message__txt p:first-child {
  font-size: 115%;
  margin-bottom: 1em;
}
.sec--art .art-visual {
  margin-bottom: 8vw;
}
.sec--art .art-visual__list {
  display: flex;
}
.sec--art .art-visual__list ul {
  display: flex;
}
.sec--art .art-visual__list img {
  width: auto;
  height: 41.3333333333vw;
  max-width: none;
}
.sec--art .art-visual__list--lr {
  transform: translateX(-100%);
  animation: infinity-scroll-right 20s infinite linear 0.5s both;
}
.sec--art .art-visual__list--rl {
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
.sec--art .art-nav__list {
  display: -moz-flex;
  display: flex;
  -ms-flex-pack: justify;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.6666666667vw 0;
}
.sec--art .art-nav__list li {
  width: 49.27%;
}
.sec--art .art-nav__list a {
  display: block;
  position: relative;
  text-align: center;
}
.sec--art .art-nav__list a:before {
  content: "";
  width: 3.2vw;
  height: 3.2vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 9.3333333333vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  animation: fuwafuwa 2s infinite;
}
.sec--art .art-nav__list .nav-item01 a:before {
  background-image: url(../images/arrow-d01.png);
}
.sec--art .art-nav__list .nav-item02 a:before {
  background-image: url(../images/arrow-d02.png);
}
.sec--art .art-nav__list .nav-item03 a:before {
  background-image: url(../images/arrow-d03.png);
}
.sec--art .art-nav__list .nav-item04 a:before {
  background-image: url(../images/arrow-d04.png);
}

@media only screen and (min-width: 768px) {
  .sec--art {
    padding: 65px 0;
  }
  .sec--art .art-message {
    padding: 0 48px;
    margin-bottom: 26px;
  }
  .sec--art .art-message__txt {
    margin-bottom: 26px;
  }
  .sec--art .art-visual {
    margin-bottom: 78px;
  }
  .sec--art .art-visual__list img {
    height: 202px;
  }
  .sec--art .art-nav__list {
    gap: 13px 0;
  }
  .sec--art .art-nav__list a:before {
    width: 16px;
    height: 16px;
    top: 45px;
  }
}
/* ========== products ========== */
.sec--products .sec-head {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
}
.sec--products .sec-head .head-ttl {
  opacity: 0;
  transform: translateX(-50%);
}
.sec--products .sec-head .head-lead {
  opacity: 0;
  font-weight: 700;
  transform: rotate(-4deg) translateX(-50%);
  margin-left: -5.3333333333vw;
  position: relative;
  z-index: 1;
}
.sec--products .sec-head .head-lead p {
  margin-bottom: 0.8vw;
  line-height: 1.923;
}
.sec--products .sec-head .head-lead p:last-child {
  margin-bottom: 0;
}
.sec--products .sec-head .head-lead span {
  display: inline-block;
  background: #3E2411;
  padding: 0 2.6666666667vw 0 14.6666666667vw;
}
.sec--products .sec-head .head-illust {
  position: absolute;
  opacity: 0;
  transform: translateY(2em);
}
.sec--products .sec-head.js-scr-active .head-ttl {
  opacity: 1;
  transform: translateX(0);
  transition: 0.8s;
}
.sec--products .sec-head.js-scr-active .head-lead {
  opacity: 1;
  transform: rotate(-4deg) translateX(0);
  transition: 0.8s 0.5s;
}
.sec--products .sec-head.js-scr-active .head-illust {
  opacity: 1;
  transform: translateY(0);
  transition: 0.8s 1s;
}
.sec--products .sec-foot {
  position: relative;
  margin-top: 8vw;
}
.sec--products .sec-foot .foot-btn {
  padding: 0 9.8666666667vw;
}
.sec--products .sec-foot .foot-btn a {
  display: inline-block;
  position: relative;
}
.sec--products .products-visual {
  margin-bottom: 5.3333333333vw;
}
.sec--products .products-list {
  display: -moz-flex;
  display: flex;
  -ms-flex-pack: justify;
  flex-wrap: wrap;
  gap: 2.6666666667vw 0;
  justify-content: space-between;
}
.sec--products .products-list__item {
  width: 49.27%;
  border-radius: 5.3333333333vw;
  background: #fff;
  border: 1px solid #3E2411;
  padding: 2.6666666667vw 2.6666666667vw 16.5333333333vw;
  position: relative;
}
.sec--products .products-list .item-img {
  margin-bottom: 2.6666666667vw;
}
.sec--products .products-list .item-name {
  font-weight: 700;
  font-size: 3.2vw;
  line-height: 1.5;
}
.sec--products .products-list .item-price {
  font-weight: 700;
  font-size: 2.6666666667vw;
  text-align: right;
}
.sec--products .products-list .item-price .num {
  font-size: 3.7333333333vw;
}
.sec--products .products-list .item-price .tax {
  font-size: 2.1333333333vw;
  font-weight: 500;
}
.sec--products .products-list .item-price + .item-name {
  margin-top: 0.5em;
}
.sec--products .products-list .item-btn {
  position: absolute;
  bottom: 5.3333333333vw;
  left: 0;
  width: 100%;
  text-align: center;
}
.sec--products .products-list .item-btn a {
  display: inline-block;
  width: 32vw;
}
.sec--products .products-collabo {
  position: relative;
}
.sec--products .products-collabo__head {
  position: relative;
}
.sec--products .products-collabo__item {
  background: #fff;
  padding: 3.7333333333vw 5.8666666667vw 8vw;
  position: relative;
  border: 1px solid #3E2411;
  border-radius: 5.3333333333vw;
  margin-bottom: 13.0666666667vw;
}
.sec--products .products-collabo__item:last-child {
  margin-bottom: 0;
}
.sec--products .products-collabo__item .item-label {
  width: 27.0666666667vw;
  height: 27.0666666667vw;
  position: absolute;
  top: -9.3333333333vw;
  left: -4vw;
}
.sec--products .products-collabo__item .item-label:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/collabo-label-bg.webp) no-repeat center;
  background-size: 100%;
  animation: rotation 8s linear infinite;
}
.sec--products .products-collabo__item .item-label span {
  position: relative;
}
.sec--products .products-collabo__item .item-block {
  margin-bottom: 6.4vw;
}
.sec--products .products-collabo__item .item-block:last-child {
  margin-bottom: 0;
}
.sec--products .products-collabo__item .item-img {
  text-align: center;
  margin-bottom: 2.6666666667vw;
}
.sec--products .products-collabo__item .item-img.mb00 {
  margin-bottom: 0 !important;
}
.sec--products .products-collabo__item .item-img img {
  width: 61.3333333333vw;
}
.sec--products .products-collabo__item .item-name {
  text-align: center;
  font-weight: 700;
  font-size: 4.2666666667vw;
  line-height: 1.75;
  margin-bottom: 1.3333333333vw;
}
.sec--products .products-collabo__item .item-price {
  font-weight: 700;
  font-size: 3.2vw;
  text-align: center;
}
.sec--products .products-collabo__item .item-price .num {
  font-size: 4.8vw;
}
.sec--products .products-collabo__item .item-price .tax {
  font-size: 2.6666666667vw;
  font-weight: 500;
}
.sec--products .products-collabo__item .item-price + .item-name {
  margin-top: 1em;
}
.sec--products .products-collabo__item .item-txt {
  line-height: 1.846;
}
.sec--products .products-collabo__item .item-btn {
  width: 100%;
  text-align: center;
  margin-top: 4vw;
}
.sec--products .products-collabo__item .item-btn a {
  display: inline-block;
  width: 45.3333333333vw;
}

@media only screen and (min-width: 768px) {
  .sec--products .sec-head .head-lead {
    margin-left: -26px;
  }
  .sec--products .sec-head .head-lead p {
    margin-bottom: 4px;
  }
  .sec--products .sec-head .head-lead span {
    padding: 0 13px 0 72px;
  }
  .sec--products .sec-foot {
    margin-top: 40px;
  }
  .sec--products .sec-foot .foot-btn {
    padding: 0 48px;
  }
  .sec--products .products-visual {
    margin-bottom: 26px;
  }
  .sec--products .products-list {
    gap: 13px 0;
  }
  .sec--products .products-list__item {
    border-radius: 26px;
    padding: 13px 13px 80px;
  }
  .sec--products .products-list .item-img {
    margin-bottom: 13px;
  }
  .sec--products .products-list .item-name {
    font-size: 16px;
  }
  .sec--products .products-list .item-price {
    font-size: 13px;
  }
  .sec--products .products-list .item-price .num {
    font-size: 18px;
  }
  .sec--products .products-list .item-price .tax {
    font-size: 10px;
  }
  .sec--products .products-list .item-btn {
    bottom: 26px;
  }
  .sec--products .products-list .item-btn a {
    width: 156px;
  }
  .sec--products .products-collabo__item {
    padding: 18px 28px 40px;
    border-radius: 26px;
    margin-bottom: 64px;
  }
  .sec--products .products-collabo__item .item-label {
    width: 132px;
    height: 132px;
    top: -45px;
    left: -20px;
  }
  .sec--products .products-collabo__item .item-block {
    margin-bottom: 31px;
  }
  .sec--products .products-collabo__item .item-img {
    margin-bottom: 13px;
  }
  .sec--products .products-collabo__item .item-img img {
    width: 300px;
  }
  .sec--products .products-collabo__item .item-name {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .sec--products .products-collabo__item .item-price {
    font-size: 16px;
  }
  .sec--products .products-collabo__item .item-price .num {
    font-size: 23px;
  }
  .sec--products .products-collabo__item .item-price .tax {
    font-size: 13px;
  }
  .sec--products .products-collabo__item .item-btn {
    margin-top: 20px;
  }
  .sec--products .products-collabo__item .item-btn a {
    width: 221px;
  }
}
/* ========== CHERRYONTOP ========== */
.sec--products--cherryontop {
  padding: 1.6vw 0 12vw;
  background: #D9537C;
}
.sec--products--cherryontop:after {
  background-image: url(../images/wave04.webp);
}
.sec--products--cherryontop .sec-head {
  padding: 7.4666666667vw 0;
  background-image: url(../images/cherryontop-head-bg.webp);
}
.sec--products--cherryontop .sec-head .head-ttl {
  margin-bottom: 1.3333333333vw;
}
.sec--products--cherryontop .sec-head .head-lead span {
  color: #FDF682;
}
.sec--products--cherryontop .sec-head .head-illust {
  position: absolute;
  width: 34.9333333333vw;
  top: 30.1333333333vw;
  right: 0;
}
.sec--products--cherryontop .sec-foot {
  padding-bottom: 36vw;
}
.sec--products--cherryontop .sec-foot .illust {
  width: 45.6vw;
  bottom: 0;
  left: 50%;
  margin-left: -22.8vw;
}

@media only screen and (min-width: 768px) {
  .sec--products--cherryontop {
    padding: 8px 0 58px;
  }
  .sec--products--cherryontop .sec-head {
    padding: 36px 0;
  }
  .sec--products--cherryontop .sec-head .head-ttl {
    margin-bottom: 6px;
  }
  .sec--products--cherryontop .sec-head .head-illust {
    width: 170px;
    top: 147px;
  }
  .sec--products--cherryontop .sec-foot {
    padding-bottom: 175px;
  }
  .sec--products--cherryontop .sec-foot .illust {
    width: 222px;
    margin-left: -111px;
  }
}
/* ========== MORNING ========== */
.sec--products--morning {
  background: #A0C8EA;
  padding-bottom: 18vw;
}
.sec--products--morning:after {
  background-image: url(../images/wave05.webp);
}
.sec--products--morning .sec-head {
  padding: 9.0666666667vw 0;
  background-image: url(../images/morning-head-bg.webp);
  z-index: 3;
}
.sec--products--morning .sec-head .head-ttl {
  margin-bottom: 5.3333333333vw;
}
.sec--products--morning .sec-head .head-lead span {
  color: #F4D3DB;
}
.sec--products--morning .sec-head .head-illust {
  position: absolute;
  width: 24vw;
  top: 24.8vw;
  right: 9.8666666667vw;
}
.sec--products--morning .products-collabo__head {
  height: 31.3333333333vw;
}
.sec--products--morning .products-collabo__head .illust {
  width: 73.2vw;
  top: 0.9333333333vw;
  right: 6vw;
}
.sec--products--morning .sec-foot .illust {
  width: 18.5333333333vw;
  right: 4vw;
  top: 1.0666666667vw;
}

@media only screen and (min-width: 768px) {
  .sec--products--morning {
    padding-bottom: 88px;
  }
  .sec--products--morning .sec-head {
    padding: 44px 0;
  }
  .sec--products--morning .sec-head .head-ttl {
    margin-bottom: 26px;
  }
  .sec--products--morning .sec-head .head-illust {
    width: 117px;
    top: 120px;
    right: 48px;
  }
  .sec--products--morning .products-collabo__head {
    height: 152px;
  }
  .sec--products--morning .products-collabo__head .illust {
    width: 356px;
    top: 5px;
    right: 29px;
  }
  .sec--products--morning .sec-foot .illust {
    width: 90px;
    right: 20px;
    top: 5px;
  }
}
/* ========== DAYTIME ========== */
.sec--products--daytime {
  padding-bottom: 15.3333333333vw;
  background: #55AE7C;
}
.sec--products--daytime:after {
  background-image: url(../images/wave06.webp);
}
.sec--products--daytime .sec-head {
  padding: 9.8666666667vw 0;
  background-image: url(../images/daytime-head-bg.webp);
}
.sec--products--daytime .sec-head .head-ttl {
  margin-bottom: 5.3333333333vw;
}
.sec--products--daytime .sec-head .head-lead span {
  color: #E3847C;
}
.sec--products--daytime .sec-head .head-illust {
  position: absolute;
  width: 47.4666666667vw;
  top: 16.8vw;
  right: -3.7333333333vw;
}
.sec--products--daytime .sec-foot {
  padding-bottom: 40.2666666667vw;
}
.sec--products--daytime .sec-foot .illust {
  width: 57.0666666667vw;
  bottom: 0;
  left: 50%;
  margin-left: -28.5333333333vw;
  transform: translateX(-150%);
}
.sec--products--daytime .sec-foot .illust.js-scr-active {
  transition: 1.5s;
  transform: translateX(0);
}

@media only screen and (min-width: 768px) {
  .sec--products--daytime {
    padding-bottom: 75px;
  }
  .sec--products--daytime .sec-head {
    padding: 48px 0;
  }
  .sec--products--daytime .sec-head .head-ttl {
    margin-bottom: 26px;
  }
  .sec--products--daytime .sec-head .head-illust {
    width: 231px;
    top: 82px;
    right: -18px;
  }
  .sec--products--daytime .sec-foot {
    padding-bottom: 196px;
  }
  .sec--products--daytime .sec-foot .illust {
    width: 278px;
    margin-left: -139px;
  }
}
/* ========== EVENING ========== */
.sec--products--evening {
  background: #C6A2C8;
  padding-bottom: 16.2666666667vw;
}
.sec--products--evening:after {
  background-image: url(../images/wave07.webp);
}
.sec--products--evening .sec-head {
  padding: 6.9333333333vw 0 8vw;
  background-image: url(../images/evening-head-bg.webp);
  z-index: 3;
}
.sec--products--evening .sec-head .head-ttl {
  margin-bottom: 4vw;
}
.sec--products--evening .sec-head .head-lead span {
  color: #FDF682;
}
.sec--products--evening .sec-head .head-illust {
  position: absolute;
  width: 32vw;
  top: 31.3333333333vw;
  right: 2.1333333333vw;
}
.sec--products--evening .products-collabo__head {
  height: 28vw;
}
.sec--products--evening .products-collabo__head .illust {
  width: 57.6vw;
  top: 2.6666666667vw;
  right: 6vw;
}
.sec--products--evening .sec-foot {
  padding-bottom: 18.4vw;
}
.sec--products--evening .sec-foot .illust01 {
  width: 25.8666666667vw;
  left: 1.4666666667vw;
  bottom: 0;
  transform: translateX(-100%);
}
.sec--products--evening .sec-foot .illust01.js-scr-active {
  transition: 1s;
  transform: translateX(0);
}
.sec--products--evening .sec-foot .illust02 {
  width: 34.5333333333vw;
  right: 4vw;
  bottom: 0;
}

@media only screen and (min-width: 768px) {
  .sec--products--evening {
    padding-bottom: 79px;
  }
  .sec--products--evening .sec-head {
    padding: 34px 0 39px;
  }
  .sec--products--evening .sec-head .head-ttl {
    margin-bottom: 20px;
  }
  .sec--products--evening .sec-head .head-illust {
    width: 156px;
    top: 152px;
    right: 10px;
  }
  .sec--products--evening .products-collabo__head {
    height: 136px;
  }
  .sec--products--evening .products-collabo__head .illust {
    width: 280px;
    top: 13px;
    right: 29px;
  }
  .sec--products--evening .sec-foot {
    padding-bottom: 88px;
  }
  .sec--products--evening .sec-foot .illust01 {
    width: 126px;
    left: 7px;
  }
  .sec--products--evening .sec-foot .illust02 {
    width: 168px;
    right: 20px;
  }
}
/* ========== ONLINE EXCLUSIVE ========== */
.sec--products--online {
  padding: 0 0 8vw;
  background: #F4D3DB;
}
.sec--products--online:after {
  background-image: url(../images/wave03.webp);
}
.sec--products--online .sec-head {
  padding: 6.9333333333vw 0 9.6vw;
  background-image: url(../images/online-head-bg.webp);
}
.sec--products--online .sec-head .head-ttl {
  margin-bottom: 2.6666666667vw;
}
.sec--products--online .sec-head .head-lead span {
  color: #7DC2C3;
}
.sec--products--online .sec-head .head-illust {
  position: absolute;
  width: 21.2vw;
  top: 36vw;
  right: 13.3333333333vw;
}
.sec--products--online .sec-foot {
  padding-bottom: 13.8666666667vw;
}
.sec--products--online .sec-foot .illust {
  width: 26vw;
  top: 5.3333333333vw;
  right: 1.8666666667vw;
}

@media only screen and (min-width: 768px) {
  .sec--products--online {
    padding: 0 0 39px;
  }
  .sec--products--online .sec-head {
    padding: 34px 0 46px;
  }
  .sec--products--online .sec-head .head-ttl {
    margin-bottom: 13px;
  }
  .sec--products--online .sec-head .head-illust {
    width: 103px;
    top: 175px;
    right: 65px;
  }
  .sec--products--online .sec-foot {
    padding-bottom: 68px;
  }
  .sec--products--online .sec-foot .illust {
    width: 126px;
    top: 26px;
    right: 9px;
  }
}
/* ========== ALL ITEMS ========== */
.sec--all {
  background: #D9537C;
  padding: 12vw 0 16vw;
  text-align: center;
}
.sec--all:after {
  background-image: url(../images/wave04.webp);
}
.sec--all a {
  display: inline-block;
  width: 80vw;
}

@media only screen and (min-width: 768px) {
  .sec--all {
    padding: 58px 0 78px;
  }
  .sec--all a {
    width: 390px;
  }
}
/* ========== CAMPAIGN ========== */
.sec--campaign {
  padding: 10.6666666667vw 0 12vw;
  background-color: #A0C8EA;
  text-align: center;
}
.sec--campaign:after {
  background-image: url(../images/wave02.webp);
}
.sec--campaign .campaign-list {
  margin-bottom: 11.4666666667vw;
}
.sec--campaign .campaign-list:last-child {
  margin-bottom: 0;
}
.sec--campaign .campaign-list__item {
  margin-bottom: 8vw;
}
.sec--campaign .campaign-list__item:last-child {
  margin-bottom: 0;
}
.sec--campaign .campaign-list__item .item-img a {
  display: block;
}
.sec--campaign .campaign-list__item .item-btn {
  text-align: center;
  margin-top: 4vw;
}
.sec--campaign .campaign-list__item .item-btn a {
  display: inline-block;
  width: 80vw;
}
.sec--campaign .campaign-list__item.end a {
  pointer-events: none;
}
.sec--campaign .campaign-list__item.end .item-img {
  position: relative;
}
.sec--campaign .campaign-list__item.end .item-img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.sec--campaign .campaign-list__item.end .item-img:after {
  content: "終了しました";
  position: absolute;
  top: 50%;
  left: 50%;
  color: #FDF682;
  font-size: 180%;
  transform: translate(-50%, -50%) rotate(-15deg);
  transform-origin: center;
  background: #7DC2C3;
  padding: 0.5em 1.5em;
  white-space: nowrap;
}
.sec--campaign .campaign-list__item.end .item-btn {
  display: none;
}

@media only screen and (min-width: 768px) {
  .sec--campaign {
    padding: 52px 0 58px;
  }
  .sec--campaign .campaign-list {
    margin-bottom: 56px;
  }
  .sec--campaign .campaign-list__item {
    margin-bottom: 39px;
  }
  .sec--campaign .campaign-list__item .item-btn {
    margin-top: 20px;
  }
  .sec--campaign .campaign-list__item .item-btn a {
    width: 390px;
  }
}
/* ========== foot ========== */
.sec--foot {
  padding: 8vw 0;
  background: #FFFCF4;
}
.sec--foot .foot-illust {
  height: 42.2666666667vw;
  background: url(../images/foot-illust.webp) repeat-x;
  background-position: 0 0;
  background-size: auto 100%;
  animation: bgLoop 20s linear infinite;
  margin-bottom: 8vw;
}
.sec--foot .foot-copy {
  margin-bottom: 6.1333333333vw;
}
.sec--foot .foot-txt {
  font-size: 2.6666666667vw;
  line-height: 1.6;
}

@media only screen and (min-width: 768px) {
  .sec--foot {
    padding: 39px 0;
  }
  .sec--foot .foot-illust {
    height: 206px;
    margin-bottom: 39px;
  }
  .sec--foot .foot-copy {
    margin-bottom: 6.1333333333vw;
  }
  .sec--foot .foot-txt {
    font-size: 13px;
  }
}
/*------------------------------------------
  component
------------------------------------------*/
.illust {
  position: absolute;
}

.wave {
  position: relative;
}
.wave:before, .wave:after {
  width: 100%;
  height: 4.2666666667vw;
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100%;
}
.wave-top:before {
  content: "";
  top: -1px;
  background-position: center bottom;
}
.wave-bottom:after {
  content: "";
  bottom: -1px;
  background-position: center top;
}

@media only screen and (min-width: 768px) {
  .wave:before, .wave:after {
    height: 20px;
  }
}
.fadeIn {
  opacity: 0;
}
.fadeIn.js-scr-active {
  opacity: 1;
  transition: opacity 1s;
}

.fadeInUp {
  opacity: 0;
  transform: translateY(5em);
}
.fadeInUp.js-scr-active {
  opacity: 1;
  transform: translateY(0);
  transition: 0.6s;
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.fuwafuwa {
  animation: fuwafuwa 2s infinite;
}

@keyframes fuwafuwa {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 0.4em;
  }
  100% {
    margin-top: 0;
  }
}
.wobble {
  animation: wobble 2s infinite;
}

@keyframes wobble {
  0% {
    transform: none;
  }
  7.5% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  15% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  22.5% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  30% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  37.5% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  50% {
    transform: none;
  }
}
.yurayura {
  animation: 1.6s linear 0s infinite alternate none running yurayura;
}

@keyframes yurayura {
  0% {
    transform: rotate(0deg);
    transform-origin: center bottom;
  }
  20% {
    transform: rotate(0deg);
    transform-origin: center bottom;
  }
  35% {
    transform: rotate(-6deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(0deg);
    transform-origin: center bottom;
  }
  65% {
    transform: rotate(6deg);
    transform-origin: center bottom;
  }
  80% {
    transform: rotate(0deg);
    transform-origin: center bottom;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: center bottom;
  }
}
.tada {
  animation: tada 2s infinite;
}

@keyframes tada {
  0% {
    transform: scale3d(1, 1, 1);
  }
  5%, 10% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  15%, 25%, 35%, 45% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  20%, 30%, 40% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  50% {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bgLoop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -159.0666666667vw 0;
  }
}
@media only screen and (min-width: 768px) {
  @keyframes bgLoop {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -775px 0;
    }
  }
}