@charset 'UTF-8';

/* common
------------------------------------------------ */
.l-footer { margin-top: 0; }

@media screen and (min-width: 769px) {
  .page-sticky { align-items: flex-end; }
  .page-sticky-links { bottom: 80px; }
}

/* introduce
------------------------------------------------ */
.story-introduce { position: relative; padding: 48px 0 60px; }
.story-introduce-lead { text-align: center; font-family: 'Noto Serif JP', serif; font-size: 1.6rem; letter-spacing: 0.2em; line-height: 1.875; }
.story-introduce-lists { margin-top: 52px; }
.story-introduce-lists__num { display: flex; align-items: flex-end; position: relative; margin-bottom: 35px; }
.story-introduce-lists__num span { display: inline-block; position: relative; vertical-align: top; font-family: 'Gilda Display', serif; font-weight: 400; line-height: 1.2; }
.story-introduce-lists__num .current { font-size: 5.427rem; }
.story-introduce-lists__num .current::before,
.story-introduce-lists__num .current::after { content: ''; position: absolute; transform: rotate(54deg); height: 50px; }
.story-introduce-lists__num .current::before { bottom: 0; right: 4px; width: 1px; background-color: #3B3A39; }
.story-introduce-lists__num .current::after { bottom: -8px; right: -12px; width: 20px; background-color: #fff; }
.story-introduce-lists__num .total { margin-left: 6px; font-size: 2.23rem; }
.story-introduce-lists__title { margin-bottom: 16px; }
.story-introduce-lists__title__en,
.story-introduce-lists__title__ja { font-family: 'Noto Serif JP', serif; font-size: 1.8rem; letter-spacing: 0.2em; line-height: 1.66666666667; }
.story-introduce-lists__text { font-size: 1.2rem; line-height: 2.5; }
.story-introduce-lists__box { margin-top: 40px; }
.story-introduce-lists__box__title { margin-bottom: 18px; font-family: 'Noto Serif JP', serif; font-size: 1.6rem; letter-spacing: 0.2em; line-height: 1.875; }
.story-introduce-lists__box__text { font-size: 1.2rem; line-height: 2.5; }

@media screen and (max-width: 768px) {
  .story-introduce > .wrap,
  .story-introduce-lists { padding: 0 20px; }
  .story-introduce-lists__item:not(:first-child) { margin-top: 70px; }
  .story-introduce-lists__info { margin-top: 55px; }
}

@media screen and (min-width: 769px) {
  .story-introduce { padding: 126px 0 218px; }
  .story-introduce-lead { font-size: 1.8rem; }
  .story-introduce-lists { margin-top: 120px; }
  .story-introduce-lists__item { display: flex; align-items: center; position: relative; height: 56.2225475842vw; min-height: 768px; }
  
  .story-introduce-lists__photo { pointer-events: none; position: absolute; left: 0; width: 45.3879941435%; height: 100%; overflow: hidden; opacity: 0; }
  .story-introduce-lists__photo.lazy { transform: none; }
  .story-introduce-lists__photo.is-fixed { position: fixed; top: 0; opacity: 1; }
  .story-introduce-lists__photo.is-visible { opacity: 0; }
  .story-introduce-lists__photo.is-stay { opacity: 1; }
  .story-introduce-lists__photo img { position: absolute; top: 0; left: 0; }
  .story-introduce-lists__info { margin-left: calc(7.32064421669% + 45.3879941435%); width: 38.5065885798%; }
  .story-introduce-lists__num { margin-bottom: 46px; }
  .story-introduce-lists__num .current { font-size: 7.825rem; }
  .story-introduce-lists__num .current::before,
  .story-introduce-lists__num .current::after { height: 72px; }
  .story-introduce-lists__num .current::before { bottom: -4px; right: 12px; }
  .story-introduce-lists__num .current::after { bottom: -14px; right: -2px; }
  .story-introduce-lists__num .total { font-size: 3.216rem; }
  .story-introduce-lists__title { display: flex; flex-wrap: wrap; margin-bottom: 36px; }
  .story-introduce-lists__title__en { margin-right: 1em; }
  .story-introduce-lists__box { margin-top: 70px; }
  .story-introduce-lists__box__title { margin-bottom: 22px; font-size: 1.4rem; }
}

/* category
------------------------------------------------ */
.story-category { position: relative; }

@media screen and (max-width: 768px) {
  .story-category > .wrap { padding: 0 20px; }
}

/* gift
------------------------------------------------ */
.story-gift { position: relative; margin-top: 70px; }
.story-gift-bnr > span { display: block; position: relative; width: 100%; background-color: #3E3A39; color: #fff; }
.story-gift-bnr__info { padding: 27px 10px; }
.story-gift-bnr__title { text-align: center; font-family: 'Gilda Display', serif; font-size: 3rem; letter-spacing: 0.02em; line-height: 1.2; color: #F8EE2C; }

@media screen and (max-width: 768px) {
  .story-gift > .wrap { padding: 0 20px; }
}

@media screen and (min-width: 769px) {
  .story-gift { margin-top: 135px; }
  .story-gift-bnr { margin: 0 auto; max-width: 963px; }
  .story-gift-bnr > span { display: flex; align-items: center; }
  .story-gift-bnr__photo { width: 49.8442367601%; }
  .story-gift-bnr__info { padding: 20px 10px; width: 50.1557632399%; }
  .story-gift-bnr__title { font-size: 4rem; }
}

/* product
------------------------------------------------ */
.story-product { position: relative; margin-top: 70px; padding: 38px 0 120px; background-color: #F7F7F7; }

@media screen and (max-width: 768px) {
  .story-product > .wrap { padding: 0 20px; }
}

@media screen and (min-width: 769px) {
  .story-product { margin-top: 130px; padding: 80px 0 218px; }
}