.page-title {
  background-image: url(../images/products/line-title.svg);
  color: #fe9302;
}
.page-title span {
  background-image: url(../images/products/deco-title01.svg), url(../images/products/deco-title02.svg);
}

.lead {
  margin-bottom: 30.6667vw;
}
@media (min-width: 768px) {
  .lead {
    margin-bottom: 7.0833vw;
  }
}
@media (min-width: 1440px) {
  .lead {
    margin-bottom: 102px;
  }
}

.page-contents {
  padding-top: 60vw;
  background: url(../images/products/bg-page_sp.png) repeat-x 50% 0 / 100% auto;
}
@media (min-width: 768px) {
  .page-contents {
    padding-top: 5.3472vw;
    background: url(../images/products/bg-page_pc.png) repeat-x 50% 0 / 100% auto;
  }
}
@media (min-width: 1440px) {
  .page-contents {
    padding-top: 77px;
  }
}
@media (min-width: 768px) {
  .page-section {
    padding-bottom: 13.8889vw;
  }
}
@media (min-width: 1440px) {
  .page-section {
    padding-bottom: 200px;
  }
}

.logo-scroll {
  margin-bottom: 17.2vw;
}
@media (min-width: 768px) {
  .logo-scroll {
    margin-bottom: 8.0556vw;
  }
}
@media (min-width: 1440px) {
  .logo-scroll {
    margin-bottom: 116px;
  }
}

.page-contents .peco {
  width: 54.9333vw;
  margin: 0;
  position: absolute;
  top: -40.233vw;
  left: calc(50% - 31.2vw);
}
.page-contents .peco img:not(.content_bg) {
  width: 100%;
  position: relative;
}
@media (min-width: 768px) {
  .page-contents .peco {
    width: 19.6528vw;
    top: -18.3333vw;
    left: calc(50% - 11.8056vw);
  }
}
@media (min-width: 1440px) {
  .page-contents .peco {
    width: 283px;
    top: -264px;
    left: calc(50% - 170px);
  }
}

.page-contents .peco2 {
  width: 47.7333vw;
  margin: 0;
  position: absolute;
  top: -20.6vw;
  left: calc(50% - 22.5vw);
}
.page-contents .peco2 img:not(.content_bg) {
  width: 100%;
  position: relative;
}
@media (min-width: 768px) {
  .page-contents .peco2 {
    width: 21.5972vw;
    top: -16.9444vw;
    left: calc(50% - 9.7917vw);
  }
}
@media (min-width: 1440px) {
  .page-contents .peco2 {
    width: 311px;
    top: -244px;
    left: calc(50% - 141px);
  }
}

.page-section__title {
  color: #fe9302;
}
.page-section__title .en {
  background: url(../images/common/bg-title-orange_sp.svg) no-repeat 50% 0 / 100% auto;
}
@media (min-width: 768px) {
  .page-section::before {
    height: 8.45vw;
    background: url(../images/products/products-mask_pc.svg) no-repeat 50% 0 / 100% auto;
    clip-path: unset;
    top: -7.33vw;
  }
  .page-section__title .en {
    background: url(../images/common/bg-title-orange_pc.svg) no-repeat 50% 0 / 100% auto;
  }
}

.page-section__title--2 {
  color: #fff;
}
.page-section__title--2 .en {
  background: url(../images/common/bg-title-white_sp.svg) no-repeat 50% 0 / 100% auto;
}
@media (min-width: 768px) {
  .page-section__title--2 .en {
    background: url(../images/common/bg-title-white_pc.svg) no-repeat 50% 0 / 100% auto;
  }
}

.products-anchor-links {
  width: 90.6667vw;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, calc((165 / 340) * 100%));
  grid-template-rows: repeat(2, calc((120 / 375) * 100vw));
  column-gap: calc((10 / 340) * 100%);
  row-gap: 2.1333vw;
  position: absolute;
  top: -16vw;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.products-anchor-links__link {
  width: 100%;
  height: 100%;
  border: 2px solid #fe970a;
  border-radius: 3.2vw;
  background: #fff url(../images/common/icon-arrow-down-orange.svg) no-repeat calc(100% - 2.6667vw) calc(100% - 2.6667vw) / 5.3333vw auto;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.products-anchor-links__link:link {
  color: #fe9302;
}
.products-anchor-links__link:visited {
  color: #fe9302;
}
.products-anchor-links__link:hover {
  color: #fe9302;
}
.products-anchor-links__link:focus {
  color: #fe9302;
}
.products-anchor-links__link span.label {
  font-family: 'Rounded Mplus 1c', 'Yomogi', "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 4.8vw !important;
  color: #fe9302;
  line-height: calc(22 / 18);
  font-weight: 500;
  position: static;
  transform: unset !important;
}
.products-anchor-links img:not(.content_bg) {
  width: auto;
  position: relative;
  vertical-align: top;
  display: inline;
}
.products-anchor-links__item.milky img {
  width: 31.7333vw;
}
.products-anchor-links__item.pop img {
  width: 30.1333vw;
}
.products-anchor-links__item.secret-history img {
  width: 21.8667vw;
}
.products-anchor-links__item.secret picture {
  margin-top: 1px;
}
.products-anchor-links__item.secret img {
  width: 22.4vw;
}
.products-anchor-links__item.secret .label {
  font-size: 0 !important;
}
.products-anchor-links__item.secret .label::before {
  font-size: 4.8vw !important;
  content: attr(data-sp-label);
  letter-spacing: -0.1em;
}
@media not all and (min-width: 768px) {
  .products-anchor-links__item.secret-history .label,
  .products-anchor-links__item.secret .label {
    margin-top: 1.5vw;
  }
}
@media (min-width: 768px) {
  .products-anchor-links {
    max-width: 1200px;
    width: 83.3333vw;
    grid-template-columns: repeat(4, calc((280 / 1200) * 100%));
    grid-template-rows: calc((100 / 1440) * 100vw);
    column-gap: calc((26.6667 / 1200) * 100%);
    row-gap: unset;
    top: -3.4722vw;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .products-anchor-links__link {
    border-radius: 0.8333vw;
    background-position: calc(100% - 0.9028vw) 50%;
    background-size: 1.3889vw auto;
  }
  .products-anchor-links__item.secret .products-anchor-links__link {
    display: grid;
    grid-template-columns: calc((92 / 280) * 100%) calc((180 / 280) * 100%);
    column-gap: calc((8 / 280) * 100%);
    overflow: hidden;
    align-items: center;
  }
  .products-anchor-links__item.secret picture {
    margin: 0;
    padding: 0;
    display: block;
    align-self: end;
    line-height: 0;
  }
  .products-anchor-links__item.secret img {
    display: block;
    margin: 0;
    padding: 0;
  }
  .products-anchor-links__item.secret-history .products-anchor-links__link {
    display: grid;
    grid-template-columns: calc((112 / 280) * 100%) calc((140 / 280) * 100%);
    column-gap: calc((18 / 280) * 100%);
    overflow: hidden;
    align-items: center;
  }
  .products-anchor-links__item.secret picture {
    margin-top: 0;
  }
  .products-anchor-links__item.secret .label::before {
    content: attr(data-pc-label);
  }
  .products-anchor-links__link span.label {
    font-size: 1.5278vw !important;
  }
  .products-anchor-links__item.milky img {
    width: 8.75vw;
  }
  .products-anchor-links__item.pop img {
    width: 8.75vw;
  }
  .products-anchor-links__item.milky .products-anchor-links__link,
  .products-anchor-links__item.pop .products-anchor-links__link {
    padding-top: 0.2083vw;
  }
  .products-anchor-links__item.secret-history img {
    width: 7.9167vw;
  }
  .products-anchor-links__item.secret img {
    width: 6.5278vw;
  }
  .products-anchor-links__item.secret .label::before {
    font-size: 1.5278vw !important;
    letter-spacing: normal;
  }
}
@media (min-width: 1440px) {
  .products-anchor-links {
    width: 100%;
    grid-template-rows: 100px;
    top: -50px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .products-anchor-links__link {
    border-radius: 12px;
    background-position: calc(100% - 13px) 50%;
    background-size: 20px auto;
  }
  .products-anchor-links__link span.label {
    font-size: 22px !important;
  }
  .products-anchor-links__item.milky img {
    width: 126px;
  }
  .products-anchor-links__item.pop img {
    width: 126px;
  }
  .products-anchor-links__item.milky .products-anchor-links__link,
  .products-anchor-links__item.pop .products-anchor-links__link {
    padding-top: 3px;
  }
  .products-anchor-links__item.secret .products-anchor-links__link {
    overflow: hidden;
    align-items: center;
  }
  .products-anchor-links__item.secret picture {
    margin: 0;
    padding: 0;
    display: block;
    align-self: end;
    line-height: 0;
  }
  .products-anchor-links__item.secret img {
    display: block;
    margin: 0;
    padding: 0;
  }
  .products-anchor-links__item.secret-history .products-anchor-links__link {
    overflow: hidden;
    align-items: center;
  }
  .products-anchor-links__item.secret-history img {
    width: 114px;
  }
  .products-anchor-links__item.secret img {
    width: 94px;
  }
  .products-anchor-links__item.secret .label::before {
    font-size: 22px !important;
  }
}

.product-box {
  width: 100%;
  padding: 5.3333vw 2.6667vw;
  margin: 0 auto;
  border-radius: 2.6667vw;
  border: 1px solid #e0e0e0;
  background-color: #fff;
}
/* 商品ボックスの左から順に表示アニメーション */
.grid.fade-in .product-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.grid.fade-in.is-visible .product-box {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 768px) {
  .grid.fade-in .product-box {
    transform: translateX(-30px);
  }
  .grid.fade-in.is-visible .product-box {
    transform: translateX(0);
  }
}
.grid.fade-in.is-visible .product-box:nth-child(1) {
  transition-delay: 0.1s;
}
.grid.fade-in.is-visible .product-box:nth-child(2) {
  transition-delay: 0.2s;
}
.grid.fade-in.is-visible .product-box:nth-child(3) {
  transition-delay: 0.3s;
}
.grid.fade-in.is-visible .product-box:nth-child(4) {
  transition-delay: 0.4s;
}
.grid.fade-in.is-visible .product-box:nth-child(5) {
  transition-delay: 0.5s;
}
.grid.fade-in.is-visible .product-box:nth-child(6) {
  transition-delay: 0.6s;
}
.grid.fade-in.is-visible .product-box:nth-child(7) {
  transition-delay: 0.7s;
}
.grid.fade-in.is-visible .product-box:nth-child(8) {
  transition-delay: 0.8s;
}
.grid.fade-in.is-visible .product-box:nth-child(9) {
  transition-delay: 0.9s;
}
/* SPで非表示にする商品ボックス */
@media not all and (min-width: 768px) {
  .product-box.sp-hidden-box {
    opacity: 0;
    display: none;
  }
  .product-box.sp-hidden-box.is-show {
    animation: productFadeIn 0.6s forwards;
    display: block;
  }
}
@keyframes productFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* もっと見るボタンのスタイル */
.button-more__link {
  display: flex;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  text-align: center;
  justify-content: center;
  align-items: center;
}
/* 1つ目のボタン（ミルキー）: オレンジ背景に白テキスト */
#js-more-milky {
  background-color: #fe9302;
  color: #fff;
}
#js-more-milky .button-more__link {
  color: #fff;
}
/* 2つ目のボタン（ポップキャンディ）: 白背景オレンジ枠にオレンジテキスト */
#js-more-pop {
  background-color: #fff;
  border: 2px solid #fe9302;
  color: #fe9302;
}
#js-more-pop .button-more__link {
  color: #fe9302;
}
/* PCではもっと見るボタンを非表示 */
@media (min-width: 768px) {
  .button-more {
    display: none;
  }
}
.product-box__image {
  width: 53.3333vw;
  margin: 0 auto;
}
.product-box__image img:not(.content_bg) {
  width: 100%;
  position: static;
  transition: unset;
  vertical-align: top;
}
@media (min-width: 768px) {
  .product-box {
    padding: 0.9722vw 0.6944vw 2.0833vw;
    border-radius: 20px;
  }
  .product-box__image {
    width: 15.2778vw;
  }
}
@media (min-width: 1440px) {
  .product-box {
    padding: 14px 10px 30px;
    border-radius: 20px;
  }
  .product-box__image {
    width: 220px;
  }
}

.product-box figcaption {
  padding-top: 4.5333vw;
  font-family: 'Rounded Mplus 1c', 'Yomogi', "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 4.2667vw;
  color: #763914;
  line-height: calc(26 / 16);
  font-weight: 500;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 4.2667vw;
}
.product-box__name {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .product-box figcaption {
    padding-top: 0.9722vw;
    font-size: 1.1111vw;
    row-gap: 0.9722vw;
  }
  .product-box__name {
    height: calc(1.1111vw * 1.625 * 2);
  }
}
@media (min-width: 1440px) {
  .product-box figcaption {
    padding-top: 14px;
    font-size: 16px;
    row-gap: 24px;
  }
  .product-box__name {
    height: calc(14px * 1.625 * 2);
  }
}

.product-box .button2 {
  margin: 0 auto;
  border-color: #ffbc60;
}
.product-box .button2__link:link {
  color: #fe9302;
}
.product-box .button2__link:visited {
  color: #fe9302;
}
.product-box .button2__link:hover {
  color: #fe9302;
}
.product-box .button2__link:focus {
  color: #fe9302;
}

#milky .page-section__title + .grid,
#pop .page-section__title + .grid {
  max-width: 1030px;
  width: 100%;
  margin: 0 auto 8vw;
  display: grid;
  grid-template-columns: 80vw;
  justify-content: center;
  row-gap: 8vw;
}
@media (min-width: 768px) {
  #milky .page-section__title + .grid,
  #pop .page-section__title + .grid {
    margin-bottom: 4vw;
    grid-template-columns: repeat(3, calc((324 / 1200) * 100%));
    column-gap: calc((29 / 1200) * 100%);
    row-gap: 2.08333vw;
  }
}
@media (min-width: 1440px) {
  #milky .page-section__title + .grid,
  #pop .page-section__title + .grid {
    margin-bottom: 60px;
    row-gap: 30px;
  }
}

.secret-links {
  max-width: 1030px;
  width: 92vw;
  padding: 5.3333vw 5.7333vw;
  margin: 0 auto;
  border-radius: 5.3333vw;
  background-color: #fff1B2;
  display: grid;
  row-gap: 4.26667vw;
  position: relative;
}
.secret-links .image-button__link {
  background: #ffa121 url(../images/common/icon-arrow-down-white.svg) no-repeat 96% 50% / 5.3333vw auto;
}
@media (min-width: 768px) {
  .secret-links {
    padding: 3.4722vw 3.2389vw;
    border-radius: 1.3889vw;
    grid-template-columns: repeat(2, calc((450 / 934) * 100%));
    column-gap: calc((34 / 934) * 100%);
  }
  .secret-links .image-button__link {
    background-size: 2.0833vw auto;
  }
}
@media (min-width: 1440px) {
  .secret-links {
    padding: 50px 47px;
    border-radius: 20px;
  }
  .secret-links .image-button__link {
    background-size: 30px auto;
  }
}

@keyframes bnr_zoom {
  50% {
    transform: scale(1.05);
  }
}

.secret-links .image-button__link:hover img {
  animation: bnr_zoom .3s;
}

.products-anchor-links__link:hover img {
  animation: bnr_zoom .3s;
}



.book {
  width: 91.3667vw;
  padding: 3.0667vw;
  margin: 0 auto;
  border-radius: 2.6667vw;
  background-color: #eb6100;
  overflow-x: visible;
}
/* 本を開くアニメーション */
.book-open-animate {
  opacity: 0;
  transform: scaleX(0.3) scaleY(0.95);
  transform-origin: left center;
  transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.book-open-animate.is-visible {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}
/* SPではふわっと表示するだけ */
@media not all and (min-width: 768px) {
  .book-open-animate {
    transform: none;
    transition: opacity 0.6s ease-in-out;
  }
  .book-open-animate.is-visible {
    transform: none;
  }
}
@media (min-width: 768px) {
  .book {
    max-width: 1200px;
    width: calc(100% - 2.7778vw);
    height: 52.0833vw;
    padding: 0.9722vw 3.1944vw;
    border-radius: 0.6944vw;
  }
}
@media (min-width: 1440px) {
  .book {
    width: 100%;
    height: 750px;
    padding: 14px 46px;
    border-radius: 10px;
  }
}



.book__inner {
  width: 100%;
  height: 100%;
  border-radius: 2.1333vw;
  border: 1px solid #f0e9c8;
  background-color: #fffced;
  display: grid;
  grid-template-columns: 78.4vw;
  justify-content: center;
}
@media (min-width: 768px) {
  .book__page1 {
    width: 100%;
    height: 100%;
    padding: 0 2px;
    border-radius: 0.5556vw;
    border: 1px solid #f0e9c8;
    background-color: #fffced;
    transform: translateY(2px);
  }
  .book__page2 {
    width: 100%;
    height: 100%;
    padding: 0 2px;
    border-radius: 0.5556vw;
    border: 1px solid #f0e9c8;
    background-color: #fffced;
    transform: translateY(-1px);
  }
  .book__inner {
    border-radius: 0.5556vw;
    background: #fffced  url(../images/products/book-sep_pc.png) no-repeat 50% 0 / auto 100%;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: 100%;
    transform: translateY(-1px);
  }
}
@media (min-width: 1440px) {
  .book__page1 {
    border-radius: 8px;
  }
  .book__page2 {
    border-radius: 8px;
  }
  .book__inner {
    border-radius: 8px;
  }
}

.book__sep {
  width: 85.3vw;
  margin: 5.9467vw -3.46vw;
  background: url(../images/products/book-sep_sp.png) no-repeat 50% 0 / 100% auto;
  aspect-ratio: 318.06 / 86;
}
@media (min-width: 768px) {
  .book__sep {
    display: none;
  }
}
.book__left-page,
.book__right-page {
  /* display: contents; */
}
.book__left-page h4 {
  margin: 0 0 5.8667vw;
  font-size: 4.8vw;
  color: #763914;
  line-height: calc(22 / 18);
  font-weight: 500;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 3.4667vw;
}
.book__left-page h4::before,
.book__left-page h4::after {
  width: 5.3333vw;
  height: 1px;
  background-color: #763914;
  content: '\0020';
  display: block;
}
.book__right-page {
  padding: 4.5333vw 0 16vw;
}
@media (min-width: 768px) {
  .book__left-page {
    grid-column: 1 / 2;
    display: block;
  }
  .book__left-page h4 {
    margin-bottom: 0;
    font-size: 1.6667vw;
    column-gap: 1.3889vw;
  }
  .book__left-page h4::before,
  .book__left-page h4::after {
    width: 1.3889vw;
  }
  .book__right-page {
    padding: 4.3056vw 0 0 3.4722vw;
    grid-column: 2 / 3;
    display: block;
  }
}
@media (min-width: 1440px) {
  .book__left-page h4 {
    font-size: 24px;
    column-gap: 20px;
  }
  .book__left-page h4::before,
  .book__left-page h4::after {
    width: 20px;
  }
  .book__right-page {
    padding: 62px 0 0 50px;
  }
}

.book__title {
  width: 100vw;
  margin: -12.2667vw 0 0.8vw;
  position: relative;
  left: calc(50% - 50vw);
}
@media (min-width: 768px) {
  .book__title {
    width: 48.75vw;
    margin: -5.4167vw 0 0 -7.7778vw;
    position: relative;
    left: 0;
  }
}
@media (min-width: 1440px) {
  .book__title {
    width: 702px;
    margin: -78px 0 0 -112px;
  }
}

.book__title img:not(.content_bg) {
  width: 100%;
  position: static;
  vertical-align: top;
}

.book__item {
  font-family: 'Rounded Mplus 1c', 'Yomogi', "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 3.7333vw;
  color: #763914;
  line-height: calc(26 / 14);
  font-weight: 500;
}
.book__item p {
  margin: 0 0 1em;
}
@media (min-width: 768px) {
  .book__text {
    width: 34.25vw;
    height: 42.5vw;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .book__text::-webkit-scrollbar {
    display: none;
  }
  .book__item {
    height: 100%;
    font-size: 1.1111vw;
    line-height: calc(26 / 16);
    position: relative;
  }
}
@media (min-width: 1440px) {
  .book__text {
    width: 450px;
    height: 612px;
  }
  .book__item {
    font-size: 16px;
  }
}

.book__item {
	display: block;
	opacity: 0;
	visibility: hidden;
	height: 0;
	overflow: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, height 0s 0.5s;
}
.book__item--current {
	opacity: 1;
	visibility: visible;
	height: 100%;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, height 0s 0s;
}
.book__item--pc-contents {
  padding-right: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.book__item--pc-contents::-webkit-scrollbar {
  display: none;
}
.book__item--pc-contents.book__item--current {
  display: block;
}
.book__item--sp-contents {
  padding-right: 2.6667vw;
  overflow-x: hidden;
  overflow-y: auto;
  display: none;
}
/* 戻るボタンはSPで非表示 */
.button2--back {
  display: none;
}
@media (min-width: 768px) {
  .button2--back {
    display: block;
  }
}
.book__item .button2 {
  width: 32vw;
  margin: 8vw auto 0;
  border-color: #ffbc60;
}
.book__item .button2__link:link {
  color: #fe9302;
}
.book__item .button2__link:visited {
  color: #fe9302;
}
.book__item .button2__link:hover {
  color: #fe9302;
}
.book__item .button2__link:focus {
  color: #fe9302;
}
@media not all and (min-width: 768px) {
  .book__item--sp-contents {
    width: 78.4vw;
    height: 104vw;
    margin: 2.0833vw auto 0;
    overflow-x: hidden;
    overflow-y: auto;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: block;
  }
  .book__item--pc-contents {
    display: none;
  }
}
@media (min-width: 768px) {
  .book__item .button2 {
    width: 8.3333vw;
    margin-top: 30px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media (min-width: 1440px) {
  .book__item .button2 {
    width: 120px;
  }
}

.book__navi {
  padding-left: 0;
  margin: 0;
  list-style: none;
  display: flex;
  column-gap: 2.6667vw;
  white-space: normal;
  overflow-x: auto;
  overflow-y: hidden;
}
.book__navi-item {
  min-width: 29.3333vw;
  height: 12.26667vw;
  border-radius: calc(infinity * 1px);
  background-color: #ffbc60;
}
@media (min-width: 768px) {
  .book__navi {
    width: 28.4722vw;
    margin: 1.7361vw 0 0 4.8611vw;
    display: grid;
    grid-template-columns: repeat(2, calc((200 / 410 ) * 100%));
    column-gap: calc((10 / 410 ) * 100%);
    row-gap: 0.6944vw;
    overflow-x: hidden;
  }
  .book__navi-item {
    min-width: 0;
    width: 13.8889vw;
    height: 3.4722vw;
  }
}
@media (min-width: 1440px) {
  .book__navi {
    width: 410px;
    margin: 25px 0 0 70px;
    row-gap: 10px;
  }
  .book__navi-item {
    width: 200px;
    height: 50px;
  }
}

.book__navi-item--current {
  background-color: #fe9302;
}
.book__navi-link {
  width: 100%;
  height: 100%;
  font-size: 4.8vw;
  line-height: calc(22 / 18);
  font-weight: 800;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .book__navi-link {
    background: url(../images/common/icon-arrow-right-white.svg) no-repeat calc(100% - 0.7639vw) 50% / 1.3889vw auto;
    font-size: 1.5278vw;
  }
}
@media (min-width: 1440px) {
  .book__navi-link {
    background-size: 20px auto;
    background-position: calc(100% - 11px) 50%;
    font-size: 22px;
  }
}

.book__navi-link:link {
  color: #fff;
  text-decoration: none;
}
.book__navi-link:visited {
  color: #fff;
  text-decoration: none;
}
.book__navi-link:hover {
  color: #fff;
  text-decoration: none;
}
.book__navi-link:focus {
  color: #fff;
  text-decoration: none;
}

.book__item-title {
  margin: 0 0 6.6667vw;
  font-family: 'Rounded Mplus 1c', 'Yomogi', "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 10.6667vw;
  color: #763914;
  line-height: calc(48 / 40);
  font-weight: 800;
  text-align: center;
}
@media (min-width: 768px) {
  .book__item-title {
    margin-bottom: 1.7361vw;
    font-size: 2.7778vw;
  }
}
@media (min-width: 1440px) {
  .book__item-title {
    margin-bottom: 25px;
    font-size: 40px;
  }
}
.book__item .simplebar-scrollbar {
  width: 3px;
  border-radius: calc(infinity * 1px);
  background-color: #ffbc60;
}
.book__item .simplebar-track {
  width: 3px;
  background-color: #f1e9c8;
  border-radius: calc(infinity * 1px);
}

.book__image {
  margin: 0 auto;
}
#secret-story .book__image .image {
  max-width: 382px;
  width: 100%;
  padding: 4vw;
  margin: 0 auto 7.4667vw;
  border: 6px solid #ffbc60;
  background-color: #fff;
  aspect-ratio: 382 / 250;
  box-shadow: 0 3px 6px rgb(0 0 0 / .16);
}
@media (min-width: 768px) {
  .book__image {
    height: calc(100% - 9.9306vw);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: #ffbc60 #f1e9c8;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .book__image::-webkit-scrollbar {
    display: none;
  }
  #secret-story .book__image .image {
    padding: 1.0417vw;
    margin-bottom: 1.9444vw;
  }
}
@media (min-width: 1440px) {
  .book__image {
    height: calc(100% - 143px);
  }
  #secret-story .book__image .image {
    padding: 15px;
    margin-bottom: 28px;
  }
}

.card-slider .swiper-wrapper {
  gap: 0;
}
@media not all and (min-width: 768px) {
  .card-slider .swiper-slide {
    margin-right: 4vw !important;
    width: 60vw !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* .card-slider .swiper-slide {
    margin-right: 2vw !important;
  } */
}
.card__inner {
  display: grid;
  transform-style: preserve-3d;
}
/* カードスライダーのアニメーション */
.card-stagger-animate .swiper-slide {
  opacity: 0;
  transform: translate(-30px, -30px) scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card-stagger-animate.is-visible .swiper-slide {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.card-stagger-animate.is-visible .swiper-slide:nth-child(1) {
  transition-delay: 0.15s;
}
.card-stagger-animate.is-visible .swiper-slide:nth-child(2) {
  transition-delay: 0.3s;
}
.card-stagger-animate.is-visible .swiper-slide:nth-child(3) {
  transition-delay: 0.45s;
}
.card-stagger-animate.is-visible .swiper-slide:nth-child(4) {
  transition-delay: 0.6s;
}
.card-stagger-animate.is-visible .swiper-slide:nth-child(5) {
  transition-delay: 0.75s;
}
.card-stagger-animate.is-visible .swiper-slide:nth-child(6) {
  transition-delay: 0.9s;
}
.card__visual {
  width: 60vw;
  /* height: 380px; */
  aspect-ratio: 648 / 760;
  grid-area: 1 / 1;
  place-items: center;
  backface-visibility: hidden;
  perspective: 800px;
  transform-style: preserve-3d;
}
.card__visual--front {
  padding-top: 8vw;
  background: url(../images/products/card01.png) no-repeat 50% 50% / cover;
  z-index: 1;
}
.card__visual--back {
  padding: 20px 20px 20px;
  border-radius: 5.3333vw;
  border: 10px solid #000;
  background-color: #fff;
  /* background: url(../images/products/card01-back.png) no-repeat 50% 50% / cover; */
  rotate: y 180deg;
  z-index: 0;
}
.card__visual > * {
  grid-area: 1/1;
}
@media (min-width: 768px) {
  .card__visual {
    width: 100%;
    aspect-ratio: 324 / 380;
  }
  .card__visual--front {
    padding-top: 3.75vw;
  }
  .card__visual--back {
    padding: 1.875vw 2vw;
    border-radius: 1.3889vw;
  }
}
@media (min-width: 1440px) {
  .card__visual--front {
    padding-top: 54px;
  }
  .card__visual--back {
    padding: 27px 35px;
    border-radius: 20px;
  }
}
.card__title {
  margin: 0 0 2.6667vw;
  font-family: 'Rounded Mplus 1c', 'Yomogi', "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 4.2667vw;
  color: #fff;
  font-weight: 800;
  text-align: center;
}
.card__visual--back .card__title {
  color: #000;
}
.card__content {
  height: 38.4vw;
  font-family: 'Rounded Mplus 1c', 'Yomogi', "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 3.7333vw;;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
  overflow-y: auto;
}
.card__content p {
  margin: 0;
}
@media (min-width: 768px) {
  .card__title {
    margin-bottom: 1.3889vw;
    font-size: 1.3889vw;
  }
  .card__content {
    height: 15vw;
    font-size: 1.1111vw;
    line-height: 2;
    letter-spacing: 0.05em;
  }
}
@media (min-width: 800px) and (max-width: 1000px) {
  .card__title {
    font-size: 2vw;
  }
  .card__content {
    font-size: 1.2vw;
  }
}
@media (min-width: 1000px) and (max-width: 1250px) {
  .card__title {
    font-size: 2vw;
  }
  .card--orange .card__visual--back {
    background: #fff;
    display: flex;
    flex-direction: column;
  }
  .card--orange .card__visual--back .card__title {
    flex-shrink: 0;
  }
  .card--orange .card__visual--back .card__content {
    flex: 1;
    height: auto;
    min-height: 0;
  }
}
@media (min-width: 1440px) {
  .card__title {
    margin-bottom: 20px;
    font-size: 20px;
  }
  .card__content {
    height: 200px;
    font-size: 16px;
  }
}

.card--blue .card__visual--front {
  background: url(../images/products/card-blue.png) no-repeat 50% 50% / cover;
}
.card--blue .card__visual--back {
  border-color: #f282b7;
}
.card--blue .card__visual--back .card__title {
  color: #f282b7
}


.card--pink .card__visual--front {
  background: url(../images/products/card-pink.png) no-repeat 50% 50% / cover;
}
.card--pink .card__visual--back {
  border-color: #f282b7;
}
.card--pink .card__visual--back .card__title {
  color: #f282b7
}

.card--orange .card__visual--front {
  background: url(../images/products/card-orange.png) no-repeat 50% 50% / cover;
}
.card--orange .card__visual--back {
  border-color: #f282b7;
}
.card--orange .card__visual--back .card__title {
  color: #f282b7
}
@media (min-width: 768px) {
  .card--orange .card__visual--back {
    background: #fff;
  }
}

.card--purple .card__visual--front {
  background: url(../images/products/card-purple.png) no-repeat 50% 50% / cover;
}
.card--purple .card__visual--back {
  border-color: #f282b7;
}
.card--purple .card__visual--back .card__title {
  color: #f282b7
}

.card--green .card__visual--front {
  background: url(../images/products/card-green.png) no-repeat 50% 50% / cover;
}
.card--green .card__visual--back {
  border-color: #f282b7;
}
.card--green .card__visual--back .card__title {
  color: #f282b7
}


#secret .grid {
  width: 80vw;
  margin: 0 auto 22.9333vw;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
@media (min-width: 768px) {
  #secret .grid {
    max-width: 1030px;
    width: 100%;
    margin: 0 auto 8.3333vw;
    display: grid;
    grid-template-columns: repeat(3, calc((324 / 1030) * 100%));
    column-gap: calc((29 / 1030) * 100%);
    row-gap: 1.7361vw;
  }
}
@media (min-width: 1440px) {
  #secret .grid {
    margin-bottom: 120px;
    row-gap: 26px;
  }
}

.campaign-box {
  max-width: 1200px;
  width: 91.4667vw;
  padding: 9.8667vw 4.1333vw 8vw;
  margin: 0 auto;
  border-radius: 5.3333vw;
  background-color: #fff;
  position: relative;
}
.campaign-box .page-section__title {
  color: #fe9302;
}
.campaign-box .page-section__title .en {
  width: 100%;
}
@media (min-width: 768px) {
  .campaign-box {
    width: 100%;
    padding: 5.4167vw 5.9028vw 5.5556vw;
    border-radius: 1.8333vw;
  }
  .campaign-box .page-section__title {
    margin-bottom: 3.1944vw;
  }
  .campaign-box .page-section__title .en {
    width: 52.9167vw;
  }
}
@media (min-width: 1440px) {
  .campaign-box {
    padding: 78px 85px 80px;
    border-radius: 20px;
  }
  .campaign-box .page-section__title {
    margin-bottom: 46px;
  }
  .campaign-box .page-section__title .en {
    width: 762px;
  }
}

.campaign {
  max-width: 1030px;
  width: 80vw;
  margin: 0 auto;
  border-radius: 2.6667vw;
  overflow: hidden;
}
.campaign img:not(.content_bg) {
  width: 100%;
  position: static;
  transition: unset;
  vertical-align: top;
}
.campaign__caption {
  padding: 5.3333vw 2.6667vw;
  background-color: #fe9302;
  font-family: 'Rounded Mplus 1c', 'Yomogi', "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN", sans-serif;
  font-size: 4.26667vw;
  color: #fff;
  line-height: calc(24 / 16);
  font-weight: 800;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .campaign {
    width: 100%;
    border-radius: 1.3889vw;
  }
  .campaign__caption {
    height: 4.1667vw;
    padding: 0.3472vw;
    font-size: 1.25vw;
    letter-spacing: 0.05em;
  }
}
@media (min-width: 1440px) {
  .campaign {
    border-radius: 20px;
  }
  .campaign__caption {
    height: 60px;
    padding: 5px;
    font-size: 18px;
  }
}

#milky.page-section__inner {
  padding-top: 31.1333vw;
  padding-bottom: 13.333vw;
  /* margin-bottom: -37.867vw; */
  background-color: #fff;
}
@media (min-width: 768px) {
  #milky.page-section__inner {
    padding-top: 5vw;
    padding-bottom: 6.9444vw;
    margin-bottom: 0;
  }
}
@media (min-width: 1440px) {
  #milky.page-section__inner {
    padding-top: 72px;
    padding-bottom: 100px;
  }
}


#pop.page-section__inner {
  padding-top: 5.3333vw;
  padding-bottom: 23.333vw;
  margin-top: 10.6667vw;
  /* margin-bottom: -37.867vw; */
  /* background: url(../images/products/bg-page_sp.png) repeat-x 50% 0 / 100% auto; */
  position: relative;
}
#pop.page-section__inner::before {
  width: 100%;
  height: 10.6667vw;
  background: url(../images/common/mask_sp.svg) repeat-x 50% 0 / 100% auto;
  content: '\0020';
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  /* clip-path: ellipse(calc((520 / 375) * 100vw) calc((515 / 375) * 100vw) at 50% 1289%); */
}
@media (min-width: 768px) {
  #pop.page-section__inner {
    /* padding-top: 4.1667vw; */
    padding-top: 0;
    padding-bottom: 17.3611vw;
    margin-top: 10.4167vw;
    margin-bottom: 0;
    /* background: url(../images/products/bg-page_pc.png) repeat-x 50% 0 / 100% auto; */
  }
  #pop.page-section__inner::before {
    height: 10.4167vw;
    background: url(../images/common/mask_pc.svg) repeat-x 50% 0 / 100% auto;
    /* clip-path: ellipse(calc((2000 / 1440) * 100vw) calc((2160 / 1440) * 100vw) at 50% 1440%); */
  }
  #pop.page-section__inner .page-section__title {
    margin-bottom: 0.3452vw;
    transform: translateY(-1.0417vw);
  }
}
@media (min-width: 1440px) {
  #pop.page-section__inner {
    /* padding-top: 60px; */
    padding-bottom: 250px;
  }
  #pop.page-section__inner .page-section__title {
    margin-bottom: 5px;
    transform: translateY(-15px);
  }
}

#secret-story.page-section__inner {
  padding-top: 4.8vw;
  padding-bottom: 13.333vw;
  margin-bottom: 0;
  background-color: #fff;
  position: relative;
}
#secret-story.page-section__inner::before {
  width: 100%;
  height: 10.6667vw;
  background-color: #fff;
  content: '\0020';
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  clip-path: ellipse(calc((520 / 375) * 100vw) calc((515 / 375) * 100vw) at 50% 1289%);
}
#secret-story.page-section__inner .page-section__title {
  margin-bottom: 3.3333vw;
}
#secret-story .image {
  width: 92.2667vw;
  margin: 0 auto;
  position: relative;
  z-index: 100;
}
#secret-story .image img:not(.content_bg) {
  width: 100%;
  position: static;
  transition: unset;
  vertical-align: top;
}
@media (min-width: 768px) {
  #secret-story .image {
    max-width: 800px;
    width: 100%;
    margin-bottom: -10.625vw;
  }
  #secret-story.page-section__inner {
    padding-bottom: 9.0278vw;
    margin-bottom: 0;
  }
  #secret-story.page-section__inner::before {
    height: 10.4167vw;
    background-color: #fff;
    clip-path: ellipse(calc((2000 / 1440) * 100vw) calc((2160 / 1440) * 100vw) at 50% 1440%);
  }
  #secret-story.page-section__inner {
    padding-top: 0;
  }
  #secret-story.page-section__inner .page-section__title {
    margin-bottom: -3.1944vw;
    transform: translateY(-2.7778vw);
  }
}
@media (min-width: 1440px) {
  #secret-story .image {
    margin-bottom: -153px;
  }
  #secret-story.page-section__inner {
    padding-bottom: 130px;
  }
  #secret-story.page-section__inner .page-section__title {
    margin-bottom: -46px;
    transform: translateY(-40px);
  }
}

#secret.page-section__inner {
  padding-top: 26.4667vw;
  padding-bottom: 26.333vw;
  margin-top: 10.6667vw;
  margin-bottom: -37.867vw;
  /* background: url(../images/products/bg-page_sp.png) repeat-x 50% 0 / 100% auto; */
  position: relative;
}
#secret.page-section__inner::before {
  width: 100%;
  height: 10.6667vw;
  background: url(../images/common/mask_sp.svg) no-repeat 50% 0 / 100% auto;
  content: '\0020';
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
}
@media (min-width: 768px) {
  #secret.page-section__inner {
    padding: 3.4722vw 1.3889vw 5.5556vw;
    margin-top: 10.4167vw;
    margin-bottom: 0;
    /* margin-bottom: -18.2639vw; */
  }
  #secret.page-section__inner::before {
    height: 10.4167vw;
    background: url(../images/common/mask_pc.svg) repeat-x 50% 0 / 100% auto;
  }
}
@media (min-width: 1440px) {
  #secret.page-section__inner {
    padding: 50px 0 80px;
    /* padding-bottom: 280px; */
    /* margin-bottom: -263px; */
  }
}

#milky img.products-milky1:not(.content_bg) {
  width: 40vw;
  position: absolute;
  top: -16vw;
  left: calc(50% + 41.4667vw);
  animation: contentFloat5 3.3s ease-in-out infinite;
}
/* SPで#milky .products-milky1を非表示 */
@media not all and (min-width: 768px) {
	#milky img.products-milky1:not(.content_bg) {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
}
#milky img.products-ame1:not(.content_bg) {
  width: 40vw;
  position: absolute;
  top: -16vw;
  left: calc(50% - 55.4667vw);
  display: none;
  animation: contentFloat1 3s ease-in-out infinite;
}
@media (min-width: 768px) {
  #milky img.products-milky1:not(.content_bg) {
    width: 16vw;
    top: -10.1389vw;
    left: calc(50% - 35.9028vw);
  }
  #milky img.products-ame1:not(.content_bg) {
    width: 13.8889vw;
    top: 1.7361vw;
    left: calc(50% + 32.5vw);
    display: block;
  }
}
@media (min-width: 1440px) {
  #milky img.products-milky1:not(.content_bg) {
    width: 230px;
    top: -146px;
    left: calc(50% - 517px);
  }
  #milky img.products-ame1:not(.content_bg) {
    width: 200px;
    top: 25px;
    left: calc(50% + 468px);
  }
}


#pop img.products-ame1:not(.content_bg) {
  width: 49vw;
  position: absolute;
  top: -27vw;
  left: calc(50% - 47.67vw);
  display: block;
  animation: contentFloat4 3.8s ease-in-out infinite;
}
@media (min-width: 768px) {
  #pop img.products-ame1:not(.content_bg) {
    width: 20.41667vw;
    top: -12.9167vw;
    left: calc(50% - 45.2778vw);
    animation: contentFloat3 3.7s ease-in-out infinite;
  }
}
@media (min-width: 1440px) {
  #pop img.products-ame1:not(.content_bg) {
    width: 294px;
    top: -186px;
    left: calc(50% - 652px);
    animation: contentFloat2 3.5s ease-in-out infinite;
  }
}

#pop .secret-links img.products-milky1:not(.content_bg) {
  width: 40vw;
  position: absolute;
  top: -16vw;
  left: calc(50% + 15.4667vw);
  animation: contentFloat2 3.5s ease-in-out infinite;
}
@media (min-width: 768px) {
  #pop .secret-links img.products-milky1:not(.content_bg) {
    width: 16vw;
    top: -10.1389vw;
    right: -11.4583vw;
    left: auto;
  }
}
@media (min-width: 1440px) {
  #pop .secret-links img.products-milky1:not(.content_bg) {
    width: 326px;
    top: -182px;
    right: -165px;
  }
}

#secret-story img.products-milky1:not(.content_bg) {
  width: 42vw;
  position: absolute;
  top: -22vw;
  left: calc(50% + 4.5vw);
  animation: contentFloat3 3.2s ease-in-out infinite;
}

#secret-story .secret-story-timeline img.products-milky2:not(.content_bg) {
  width: 48vw;
  position: absolute;
  top: 282vw;
  left: calc(50% - 69.5vw);
  animation: contentFloat5 3.3s ease-in-out infinite;
}

#secret-story .secret-story-timeline img.products-milky3:not(.content_bg) {
  width: 54vw;
  position: absolute;
  top: 590vw;
  left: calc(50% + 10vw);
  animation: contentFloat3 3.7s ease-in-out infinite;
}
/* SPで#secret-story .products-milky3を非表示 */
@media not all and (min-width: 768px) {
	#secret-story .secret-story-timeline img.products-milky3:not(.content_bg) {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
}
@media (min-width: 768px) {
  #secret-story img.products-milky1:not(.content_bg) {
    width: 19.8611vw;
    top: -16.1806vw;
    left: calc(50% + 8.6111vw);
  }
  #secret-story .secret-story-timeline img.products-milky2:not(.content_bg) {
    width: 23.6111vw;
    top: 54.3056vw;
    left: calc(50% - 52.3472vw);
  }
  #secret-story .secret-story-timeline img.products-milky3:not(.content_bg) {
    width: 22.2222vw;
    top: 81.0833vw;
    left: calc(50% + 34.0556vw);
  }
}
@media (min-width: 1440px) {
  #secret-story img.products-milky1:not(.content_bg) {
    width: 286px;
    top: -233px;
    left: calc(50% + 124px);
  }
  #secret-story .secret-story-timeline img.products-milky2:not(.content_bg) {
    width: 340px;
    top: 782px;
    left: calc(50% - 653px);
  }
  #secret-story .secret-story-timeline img.products-milky3:not(.content_bg) {
    width: 320px;
    top: 1020px;
    left: calc(50% + 332px);
  }
}

#secret img.products-milky1:not(.content_bg) {
  width: 44vw;
  position: absolute;
  top: -23vw;
  left: calc(50% - 54.67vw);
  transform: rotate(-30deg);
  display: block;
  animation: contentFloat2 3.4s ease-in-out infinite;
}
/* SPで#secret .products-milky1を非表示 */
@media not all and (min-width: 768px) {
	#secret img.products-milky1:not(.content_bg) {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
}
@media (min-width: 768px) {
  #secret img.products-milky1:not(.content_bg) {
    width: 20.41667vw;
    top: -12.0833vw;
    left: calc(50% - 45.2778vw);
    transform: rotate(0deg);
  }
}
@media (min-width: 1440px) {
  #secret img.products-milky1:not(.content_bg) {
    width: 294px;
    top: -174px;
    left: calc(50% - 652px);
  }
}

#secret .campaign-box img.products-milky2:not(.content_bg) {
  width: 43vw;
  position: absolute;
  top: -18vw;
  right: 2.4vw;
  display: block;
  animation: contentFloat5 3.3s ease-in-out infinite;
}
#secret .campaign-box img.products-ame1:not(.content_bg) {
  width: 44vw;
  position: absolute;
  top: -25vw;
  left: -12.6667vw;
  display: block;
  animation: contentFloat1 3.6s ease-in-out infinite;
}
/* SPで#secret .campaign-box .products-milky2と.products-ame1を一回り小さく */
@media not all and (min-width: 768px) {
	#secret .campaign-box img.products-milky2:not(.content_bg) {
		width: 34.4vw !important; /* 43vw * 0.8 */
	}
	#secret .campaign-box img.products-ame1:not(.content_bg) {
		width: 35.2vw !important; /* 44vw * 0.8 */
	}
}
@media (min-width: 768px) {
  #secret .campaign-box img.products-milky2:not(.content_bg) {
    width: 18.3333vw;
    top: -7.2222vw;
    right: -5.9028vw;
  }
  #secret .campaign-box img.products-ame1:not(.content_bg) {
    width: 20vw;
    top: 2.5vw;
    left: -10vw;
  }
}
@media (min-width: 1440px) {
  #secret .campaign-box img.products-milky2:not(.content_bg) {
    width: 264px;
    top: -104px;
    right: -85px;
  }
  #secret .campaign-box img.products-ame1:not(.content_bg) {
    width: 288px;
    top: 36px;
    left: -144px;
  }
}

.follow-us .content-float.milky1 {
  width: 21.6667vw;
  top: 0;
  left: calc(50% + 31.875vw);
  display: none;
}
.follow-us .content-float.milky2 {
  width: 61.667vw;
  top: -20vw;
  left: calc(50% + 6.875vw);
}
.follow-us .content-float.star {
  top: -6.533vw;
  left: 3.167vw;
}
@media (min-width: 768px) {
  .follow-us .content-float.milky1 {
    width: 21.6667vw;
    top: 0;
    left: calc(50% + 31.875vw);
    display: block;
  }
  .follow-us .content-float.milky2 {
    display: none;
  }
  .follow-us .content-float.star {
    width: 9.0278vw;
    top: -2.9861vw;
    left: calc(50% - 27.8472vw);
  }
}
@media (min-width: 1440px) {
  .follow-us .content-float.milky1 {
    width: 312px;
    top: 0;
    left: calc(50% + 459px);
  }
  .follow-us .content-float.star {
    width: 130px;
    top: -43px;
    left: calc(50% - 401px);
  }
}

.secret-story-timeline {
  width: 92.2667vw;
  padding: 33.8667vw 5.8667vw 11.2vw;
  margin: 0 auto 13.333vw;
  border-radius: 0 0 5.3333vw 5.3333vw;
  border: 1px solid #f6ebbc;
  border-top: none;
  background: #fffcf0 url(../images/products/icon-timeline.png) no-repeat 50% 6.1333vw / 41.3333vw auto;
  position: relative;
}
@media (min-width: 768px) {
  .secret-story-timeline {
    max-width: 1030px;
    width: 100%;
    padding: 20.8333vw 4.5139vw 8.3333vw;
    margin-bottom: 7.7778vw;
    border-radius: 1.3889vw;
    border: 1px solid #f6ebbc;
    background-position: 50% 12.5vw;
    background-size: 12.9167vw auto;
  }
}
@media (min-width: 1070px) {
  .secret-story-timeline {
    padding: 300px 65px 120px;
    margin-bottom: 112px;
    border-radius: 20px;
    background-position: 50% 180px;
    background-size: 186px auto;
  }
}


.secret-story-timeline__title {
  margin: 0 0 4.5333vw;
  font-size: 5.3333vw;
  color: #763914;
  line-height: calc(30 / 20);
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.05em;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.secret-story-timeline__title.is-visible {
  opacity: 1;
}
@media (min-width: 768px) {
  .secret-story-timeline__title {
    font-size: 1.9444vw;
  }
}
@media (min-width: 1070px) {
  .secret-story-timeline__title {
    font-size: 28px;
  }
}
@media (min-width: 768px) {
  .timeline {
    background: linear-gradient(to right, transparent calc(50% - 0.5px), #f6ebbc calc(50% - 0.5px), #f6ebbc calc(50% + 0.5px), transparent calc(50% - 0.5px));
    display: grid;
    grid-template-columns: repeat(2, calc((405 / 900) * 100%));
    grid-template-rows: 12.7778vw 6.8056vw 10.4861vw 14.1667vw 19.7917vw 5.7639vw auto;
    column-gap: calc((80 / 900) * 100%);
    align-items: start;
  }
}
@media (min-width: 1070px) {
  .timeline {
    grid-template-rows: 184px 98px 151px 204px 285px 83px auto;
  }
}

.timeline__year {
  margin: 0 0 4vw;
  font-size: 6.9333vw;
  line-height: calc(26 / 16);
  font-weight: 800;
  text-align: center;
}
.timeline__year span {
  padding: 0 5.3333vw;
  background: linear-gradient(to top, rgb(254 209 0 / .5) 5.3333vw, transparent 5.3333vw);
  display: inline-block;
}
@media (min-width: 768px) {
  .timeline__year {
    margin-bottom: 0.4861vw;
    font-size: 2.0833vw;
    position: relative;
  }
  .timeline__year::after {
    width: 1.25vw;
    height: 1.25vw;
    background-color: #e74255;
    border-radius: calc(infinity * 1px);
    content: '\0020';
    display: block;
    position: absolute;
    top: 50%;
    right: -5.24vw;
    transform: translateY(-50%);
  }
  .timeline__year span {
    padding: 0;
    background: linear-gradient(to top, rgb(254 209 0 / .5) 1.3888vw, transparent 1.3888vw);
  }
}
@media (min-width: 1070px) {
  .timeline__year {
    margin-bottom: 7px;
    font-size: 30px;
  }
  .timeline__year::after {
    width: 19px;
    height: 19px;
    right: -54px;
  }
  .timeline__year span {
    background: linear-gradient(to top, rgb(254 209 0 / .5) 20px, transparent 20px);
  }
}
.timeline__item {
  margin-bottom: 6.9333vw;
  font-size: 3.7333vw;
  color: #763914;
  line-height: calc(24 / 14);
  font-weight: 500;
  letter-spacing: 0.05em;
}
/* タイムライン要素のスタガードアニメーション（1つずつ順番に表示） */
#secret-story .timeline .timeline__item.fade-in:not(.is-show),
#secret-story .timeline .timeline__image.fade-in:not(.is-show) {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  visibility: hidden !important;
}
#secret-story .timeline .timeline__item.fade-in.is-show,
#secret-story .timeline .timeline__image.fade-in.is-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
  visibility: visible !important;
}
.timeline__item:last-of-type {
  margin-bottom: 0;
}
.timeline__item p {
  margin: 0;
}
@media (min-width: 768px) {
  .timeline__item {
    margin-bottom: 0;
    font-size: 1.1111vw;
    line-height: calc(32 / 16);
  }
}
@media (min-width: 1070px) {
  .timeline__item {
    font-size: 16px;
  }
}

.timeline__image {
  width: 54.6667vw;
  padding: 6.4vw 0 0;
  margin: 0 auto 3.4667vw;
  position: relative;
}
.timeline__image::before {
  width: 100%;
  height: 10.4vw;
  content: '\0020';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .timeline__image {
    width: 14.2361vw;
    padding-top: 1.6667vw;
    margin-bottom: 0;
  }
  .timeline__image::before {
    height: 2.5694vw;
  }
}
@media (min-width: 1070px) {
  .timeline__image {
    width: 205px;
    padding-top: 24px;
  }
  .timeline__image::before {
    height: 37px;
  }
}
.timeline__image img:not(.content_bg) {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 5;
  transition: unset;
  vertical-align: top;
  box-shadow: 5px 5px 20px rgb(0 0 0 / 0.1);
}
.timeline__image figcaption {
  padding-top: 2.9333vw;
  font-size: 3.7333vw;
  color: #763914;
  line-height: calc(24 / 14);
  letter-spacing: 0.05em;
  text-align: center;
}
.timeline__image figcaption p {
  margin: 0;
}
@media (min-width: 768px) {
  .timeline__image figcaption {
    padding-top: 1.0417vw;
    font-size: 0.9722vw;
  }
}
@media (min-width: 1070px) {
  .timeline__image figcaption {
    padding-top: 15px;
    font-size: 14px;
  }
}
.timeline__image--1::before {
  background: url(../images/products/tape01.png) no-repeat 50% 50% / auto 100%;
}
.timeline__image--2::before {
  background: url(../images/products/tape02.png) no-repeat 50% 50% / auto 100%;
}
.timeline__image--3 {
  padding-top: 4.8vw;
}
.timeline__image--3::before {
  height: 7.4667vw;
  background: url(../images/products/tape03.png) no-repeat 50% 50% / auto 100%;
}
.timeline__image--4 {
  padding-top: 8.26667vw;
}
.timeline__image--4::before {
  width: 80.2667vw;
  height: 63.4667vw;
  background: url(../images/products/tape04.png) no-repeat 50% 50% / auto 100%;
  transform: translateX(calc(-50% + 2.9333vw));
}
@media (min-width: 768px) {
  .timeline__item--1 {
    margin-bottom: 0;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }
  .timeline__item--2 {
    grid-column: 1 / 2;
    grid-row: 3 / 5;
  }
  .timeline__item--2 .timeline__year {
    padding-left: 1.3889vw;
    text-align: right;
  }
  .timeline__item--3 {
    margin-bottom: 0;
    grid-column: 2 / 3;
    grid-row: 4 / 5;
  }
  .timeline__item--3 .timeline__year {
    padding-right: 1.3889vw;
    text-align: left;
  }
  .timeline__item--3 .timeline__year::after {
    right: auto;
    left: -4.125vw;
  }
  .timeline__item--4 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }
  .timeline__item--4 .timeline__year {
    padding-left: 1.3889vw;
    text-align: right;
  }
  .timeline__item--5 {
    grid-column: 2 / 3;
    grid-row: 7 / 8;
  }
  .timeline__image--1 {
    margin-bottom: 0;
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
  .timeline__image--2 {
    width: 25.3167vw;
    margin-bottom: 0;
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    display: grid;
    grid-template-columns: calc((205 / 366) * 100%) calc((138 / 366) * 100%);
    column-gap: calc((23 / 366) * 100%);
    align-items: center;
  }
  .timeline__image--2::before {
    width: calc((205 / 366) * 100%);
    left: 0;
    transform: unset;
  }
  .timeline__image--2 figcaption {
    padding-top: 0;
    text-align: left;
  }
  .timeline__image--3 {
    padding-top: 1.25vw;
    margin-top: 5.1389vw;
    grid-column: 2 / 3;
    grid-row: 5 / 7;
  }
  .timeline__image--3::before {
    height: 2.0139vw;
  }
  .timeline__image--4 {
    grid-column: 1 / 2;
    grid-row: 6 / 8;
  }
  .timeline__image--4 {
    padding-top: 2.1528vw;
  }
  .timeline__image--4::before {
    width: 20.9028vw;
    height: 16.5278vw;
    transform: translateX(calc(-50% + 1.0526vw));
  }
}
@media (min-width: 1070px) {
  .timeline__item--2 .timeline__year span {
    padding-left: 20px;
  }
  .timeline__item--3 .timeline__year span {
    padding-right: 20px;
  }
  .timeline__item--3 .timeline__year::after {
    left: -45px;
  }
  .timeline__item--4 .timeline__year span {
    padding-left: 20px;
  }
  .timeline__image--2 {
    width: 366px;
  }
  .timeline__image--3 {
    padding-top: 18px;
    margin-top: 74px;
  }
  .timeline__image--3::before {
    height: 29px;
  }
  .timeline__image--4 {
    padding-top: 31px;
  }
  .timeline__image--4::before {
    width: 301px;
    height: 238px;
    transform: translateX(calc(-50% + 12px));
  }
}

@media not all and (min-width: 768px) {
  .products .follow-us::before {
    top: 2.2vw;
  }
}

@keyframes fadeoutLayer {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
#js-layer {
  width: 100%;
  height: 100%;
  background: #fff url(../images/top/bg-milky_sp.png) repeat 50% 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}
@media (min-width: 768px) {
  #js-layer {
    background: #fff url(../images/top/bg-milky_pc.png) repeat 50% 0;
  }
}
#js-layer.is-fadeout {
  animation: 1s fadeoutLayer forwards;
}
#js-layer.is-hidden,
#js-layer.is-fadeout.is-hidden {
  display: none;
}