@charset "UTF-8";

/* =========================================================
   米ぬか発酵サプリ LP
   style.css / 初期実装用ひな形

   想定:
   - スマホ基準
   - PCでは中央寄せ
   - 最大幅 750px
   - 画像主体LP
   - スクロールアニメーションあり
   ========================================================= */


/* =========================================================
   01. Reset / Base
   ========================================================= */

:root {
  --lp-max-width: 680px;
  --text-color: #4b2f20;
  --brown: #8a4f2a;
  --light-brown: #f5eee7;
  --accent: #e67a2e;
  --green: #2d9b58;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --duration: .8s;

  --fixed-cta-height: 78px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  color: var(--text-color);
  background: #f3f3f3;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    "Yu Gothic",
    "YuGothic",
    "Meiryo",
    sans-serif;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.lp-wrap {
  width: min(100%, var(--lp-max-width));
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
  position: relative;
  padding-bottom: 0;
}

.lp-section {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.lp-section > img,
.lp-section > a > img {
  width: 100%;
}


/* =========================================================
   02. 共通レイヤーセクション
   ========================================================= */

/*
  背景画像を基準に、その上へ absolute で素材を重ねます。
  実画像をブラウザで見ながら left/top/width を微調整してください。
*/

.hero__inner,
.sales-results__inner,
.trial-cta__inner,
.ricebran-power__inner,
.problem__inner,
.ricebran-strength__inner,
.fermented-gutcare__inner,
.maker-story__inner,
.customer-reviews__inner,
.faq__inner,
.closing-offer__inner {
  position: relative;
  width: 100%;
}

.hero__background,
.sales-results__background,
.trial-cta__background,
.ricebran-power__background,
.problem__background,
.ricebran-strength__background,
.fermented-gutcare__background,
.maker-story__background,
.customer-reviews__background,
.faq__background {
  width: 100%;
  position: relative;
  z-index: 1;
}


/* =========================================================
   03. 01 FV / HERO
   ========================================================= */

.hero {
  background: #f8e7b8;
}

.hero__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero__background {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.hero__top-tv,
.hero__title,
.hero__ribbon,
.hero__product,
.hero__support,
.hero__daily,
.hero__days,
.hero__lactic,
.hero__bottom {
  position: absolute;
  height: auto;
}

.hero__top-tv {
  z-index: 20;
  top: 2.8%;
  left: 17.8%;
  width: 69.1%;
}

.hero__title {
  z-index: 20;
  top: 8%;
  left: 1.1%;
  width: 96.8%;
}

.hero__ribbon {
  z-index: 20;
  top: 21.6%;
  left: 8.8%;
  width: 81.9%;
}

.hero__product {
  z-index: 9;
  top: 34.8%;
  left: 22.6%;
  width: 54.8%;
  filter:
  drop-shadow(4px 0 4px rgba(60, 35, 15, 0.22))
  drop-shadow(0 8px 6px rgba(60, 35, 15, 0.66))
}

.hero__support {
  z-index: 8;
  top: 35%;
  left: 1%;
  width: 32%;
}

.hero__lactic {
  z-index: 7;
  top: 28.5%;
  left: 62.5%;
  width: 48%;
}

.hero__daily {
  z-index: 10;
  top: 74.5%;
  left: 11.2%;
  width: 25.5%;
}

.hero__days {
  z-index: 6;
  top: 76%;
  left: 69.9%;
  width: 26.5%;
}

.hero__bottom {
  z-index: 20;
  top: 93%;
  left: 0%;
  width: 100%;
}

/* スマホではFVを1画面いっぱいにする */
@media screen and (max-width: 767px) {

  #sec01.hero {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  #sec01 .hero__inner {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  #sec01 .hero__background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .hero__top-tv {
    top: 4%;
    left: 17%;
    width: 70%;
  }

  .hero__title {
    top: 9%;
    left: 1.1%;
    width: 96.8%;
  }

  .hero__ribbon {
    top: 21%;
    left: 3.8%;
    width: 92%;
  }

  .hero__product {
    top: 33%;
    left: 15%;
    width: 70%;
  }

  .hero__support {
    top: 35.5%;
    left: 0%;
    width: 26.5%;
  }

  .hero__lactic {
    top: 29%;
    left: 68.8%;
    width: 42.2%;
  }

  .hero__daily {
    top: 74%;
    left: 1%;
    width: 32%;
  }

  .hero__days {
    top: 79.8%;
    left: 71%;
    width: 27.5%;
  }

  .hero__bottom {
    top: 94.65%;
    left: 0%;
    width: 100%;
  }

}

/* =========================================================
   04. 02 / 16 定期バナー
   ========================================================= */

.subscription-banner {
  background: #fff;
}

.subscription-banner a {
  display: block;
  width: 100%;
}

.subscription-banner img {
  width: 100%;
}


/* バナー：少し奥からピントが合うように表示 */
.subscription-banner .anim-item[data-anim-type="banner-reveal"] {
  opacity: .8;
  transform: scale(1.02);
  filter: blur(3px) brightness(1.04);
  transform-origin: center center;

  transition:
    opacity var(--anim-duration, 1200ms) ease-out var(--anim-delay, 0ms),
    transform var(--anim-duration, 1200ms) cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0ms),
    filter var(--anim-duration, 1200ms) ease-out var(--anim-delay, 0ms);
}

.subscription-banner .anim-item[data-anim-type="banner-reveal"].is-show {
  opacity: 1;
  transform: scale(1);
  filter: blur(0) brightness(1);
}


/* =========================================================
   05. 03 販売実績
   ========================================================= */

.sales-results {
  background: #fbf1df;
}

.sales-results__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-align: center;
}

.sales-results__number {
  position: absolute;
  z-index: 3;
  top: 20.5%;
  left: 0;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .04em;
  color: #9f5a2e;
  line-height: .88;
  white-space: nowrap;
}

.sales-results__count {
  display: inline-block;
  font-family:
    "Bodoni MT",
    Didot,
    "Bodoni 72",
    "Times New Roman",
    serif;
  font-size: clamp(86px, 22.5vw, 169px);
  font-weight: 400;
  letter-spacing: -.055em;
  font-variant-numeric: lining-nums tabular-nums;

  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.97);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out);
}

.sales-results__count.is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.sales-results__count-unit {
  display: inline-block;
  margin-bottom: .08em;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: clamp(20px, 5vw, 37px);
  font-weight: 600;
}

/* ランキングメダル */
.sales-results__medal {
  position: absolute;
  top: 44%;
  left: 27%;
  width: 46%;
}


/* =========================================================
   06. 04 定期コース
   ========================================================= */

#sec04.subscription-offer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #8a4f2a;
}

#sec04 .subscription-offer__inner {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

#sec04 .subscription-offer__background {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 1;
}

#sec04 .subscription-offer__mini-product {
  position: absolute;
  z-index: 3;
  left: 2.66%;
  top: 2.61%;
  width: 19.41%;
  max-width: none;
  height: auto;
  right: auto;
  bottom: auto;
}

#sec04 .subscription-offer__capsules {
  position: absolute;
  z-index: 3;
  right: 3.19%;
  top: 5.59%;
  width: 18.35%;
  max-width: none;
  height: auto;
  left: auto;
  bottom: auto;
}

#sec04 .subscription-offer__chance {
  position: absolute;
  z-index: 4;
  left: 2.39%;
  top: 48.23%;
  width: 22.61%;
  max-width: none;
  height: auto;
  right: auto;
  bottom: auto;
  transform-origin: 50% 96%;
}

#sec04 .subscription-offer__chance.anim-item.is-balancing {
  animation:
    subscription-chance-balance
    var(--balance-period, 4200ms)
    ease-in-out
    infinite;
}


/* =========================================================
   07. 05 / 18 CTA
   ========================================================= */

.trial-cta {
  background: #f1cb16;
}

.trial-cta__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.trial-cta__background {
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

#sec05 .trial-cta__badge,
#sec18 .trial-cta__badge {
  position: absolute;
  display: block;
  z-index: 3;
  top: 11.5%;
  right: 6.9%;
  left: auto;
  width: 69.2%;
  max-width: none;
  transform-origin: center center;
}

.trial-cta__badge img {
  display: block;
  width: 100%;
}


/* =========================================================
   08. 06 米ぬかパワー導入
   ========================================================= */

.ricebran-power__vertical,
.ricebran-power__title {
  position: absolute;
  z-index: 2;
}

.ricebran-power__vertical {
  top: 19%;
  left: 5%;
  width: 20%;
}

.ricebran-power__title {
  top: 15%;
  right: 10%;
  width: 50%;
}


/* =========================================================
   09. 07 お悩み
   ========================================================= */

.problem__heading,
.problem__list {
  position: absolute;
  z-index: 2;
}

.problem__heading {
  top: 6%;
  left: 2%;
  width: 96%;
}

.problem__list {
  top: 27%;
  left: 7%;
  width: 86%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2.2vw, 17px);
  align-items: center;
}

.problem__item {
  width: 100%;
  object-fit: contain;
}

.problem__item:nth-child(1) {
  width: 92%;
}

.problem__item:nth-child(2) {
  width: 100%;
}

.problem__item:nth-child(3) {
  width: 100%;
}

.problem__item:nth-child(4) {
  width: 90%;
}


/* =========================================================
   10. 08 1日1粒 ライフスタイル
   ========================================================= */

.daily-capsule img {
  width: 100%;
}

#sec08 .anim-item[data-anim-type="soft-reveal"] {
  opacity: .32;
  transform: none;
  filter: blur(.6px);
  transition:
    opacity var(--anim-duration, 1350ms) ease-out var(--anim-delay, 0ms),
    filter var(--anim-duration, 1350ms) ease-out var(--anim-delay, 0ms);
}

#sec08 .anim-item[data-anim-type="soft-reveal"].is-show {
  opacity: 1;
  transform: none;
  filter: blur(0);
}


/* =========================================================
   11. 09 米ぬかと発酵の力
   ========================================================= */

.ricebran-strength__title {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 27%;
}

#sec09 .ricebran-strength__title.anim-item[data-anim-type="center-float"] {
  opacity: 0;
  filter: blur(2px);
  transform:
    translate(-50%, calc(-50% + var(--anim-distance, 52px)))
    scale(var(--anim-scale, .90));
  transition:
    opacity var(--anim-duration, 1500ms) cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0ms),
    transform var(--anim-duration, 1500ms) cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0ms),
    filter var(--anim-duration, 1500ms) ease var(--anim-delay, 0ms);
}

#sec09 .ricebran-strength__title.anim-item[data-anim-type="center-float"].is-show {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
}


/* =========================================================
   12. 10 米ぬか注目
   ========================================================= */

.ricebran-focus img {
  width: 100%;
}


/* =========================================================
   13. 11 つなぎコピー
   ========================================================= */

.transition-copy img {
  width: 100%;
}


/* =========================================================
   14. 12 発酵食による自然な腸活
   ========================================================= */

.fermented-gutcare__inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.fermented-gutcare__background {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.fermented-gutcare__saba,
.fermented-gutcare__title,
.fermented-gutcare__powder,
.fermented-gutcare__capsules {
  position: absolute;
}

.fermented-gutcare__saba {
  z-index: 1;
  top: 1.4%;
  left: 24.5%;
  width: 51%;
}

.fermented-gutcare__title {
  z-index: 10;
  top: 15.5%;
  left: 50%;
  width: 36.5%;
  transform: translateX(-50%);
}

.fermented-gutcare__powder {
  z-index: 1;
  top: 19%;
  right: -25%;
  width: 80%;
}

.fermented-gutcare__capsules {
  z-index: 1;
  top: 61%;
  left: 3.5%;
  width: 26%;
}

#sec12 .fermented-gutcare__title.anim-item[data-anim-type="center-float"] {
  opacity: 0;
  filter: blur(2px);
  transform:
    translate(-50%, calc(-4% + var(--anim-distance, 52px)))
    scale(var(--anim-scale, .90));
  transition:
    opacity var(--anim-duration, 1500ms) cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0ms),
    transform var(--anim-duration, 1500ms) cubic-bezier(.22, 1, .36, 1) var(--anim-delay, 0ms),
    filter var(--anim-duration, 1500ms) ease var(--anim-delay, 0ms);
}

#sec12 .fermented-gutcare__title.anim-item[data-anim-type="center-float"].is-show {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, 0) scale(1);
}


#sec12 .fermented-gutcare__saba.anim-item[data-anim-type="depth-pop-up"],
#sec12 .fermented-gutcare__powder.anim-item[data-anim-type="depth-pop-up"],
#sec12 .fermented-gutcare__capsules.anim-item[data-anim-type="depth-pop-up"] {
  opacity: 0;
  filter: blur(3px);
  transform:
    translate3d(0, var(--anim-distance, 38px), 0)
    scale(var(--anim-scale, .78));
  transform-origin: center center;
  transition:
    opacity var(--anim-duration, 520ms) ease-out var(--anim-delay, 0ms),
    transform var(--anim-duration, 520ms) cubic-bezier(.18, 1.32, .34, 1) var(--anim-delay, 0ms),
    filter var(--anim-duration, 520ms) ease-out var(--anim-delay, 0ms);
}

#sec12 .fermented-gutcare__saba.anim-item[data-anim-type="depth-pop-up"].is-show,
#sec12 .fermented-gutcare__powder.anim-item[data-anim-type="depth-pop-up"].is-show,
#sec12 .fermented-gutcare__capsules.anim-item[data-anim-type="depth-pop-up"].is-show {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

#sec12 .fermented-gutcare__saba.anim-item[data-anim-type="fade-up"],
#sec12 .fermented-gutcare__powder.anim-item[data-anim-type="fade-up"],
#sec12 .fermented-gutcare__capsules.anim-item[data-anim-type="fade-up"] {
  opacity: 0;
  transform: translate3d(0, var(--anim-distance, 28px), 0);
}

#sec12 .fermented-gutcare__saba.anim-item[data-anim-type="fade-up"].is-show,
#sec12 .fermented-gutcare__powder.anim-item[data-anim-type="fade-up"].is-show,
#sec12 .fermented-gutcare__capsules.anim-item[data-anim-type="fade-up"].is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   15. 13 発酵説明
   ========================================================= */

.fermentation-explanation img {
  width: 100%;
}


/* =========================================================
   16. 14 作り手紹介
   ========================================================= */

.maker-story__heading,
.maker-story__photo {
  position: absolute;
  z-index: 2;
}

.maker-story__heading {
  top: 63.6%;
  left: 39%;
  width: 52.8%;
}

.maker-story__photo {
  bottom: 0;
  right: 4.6%;
  width: 51.8%;
}

#sec14 .maker-story__heading.anim-item[data-anim-type="energetic-pop"] {
  opacity: 0;
  transform:
    translate3d(0, var(--anim-distance, 64px), 0)
    scale(var(--anim-scale, .82))
    rotate(-1.2deg);
  transform-origin: center center;
  transition:
    opacity var(--anim-duration, 1050ms) ease-out var(--anim-delay, 0ms),
    transform var(--anim-duration, 1050ms) cubic-bezier(.18, 1.42, .34, 1) var(--anim-delay, 0ms);
}

#sec14 .maker-story__heading.anim-item[data-anim-type="energetic-pop"].is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

#sec14 .maker-story__photo.anim-item[data-anim-type="fade-up"] {
  opacity: 0;
  transform: translate3d(0, var(--anim-distance, 54px), 0);
}

#sec14 .maker-story__photo.anim-item[data-anim-type="fade-up"].is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* =========================================================
   17. 15 お客様レビュー
   ========================================================= */

.customer-reviews__rating {
  position: absolute;
  z-index: 2;
  top: 7%;
  left: 7%;
  width: 66%;
}


/* =========================================================
   18. 17 FAQ
   ========================================================= */

.faq {
  background: #fffdf7;
  overflow: visible;
}

.faq__inner {
  position: relative;
  width: 100%;
  background: #fffdf7;
}

/*
  背景画像は装飾として上部に固定。
  FAQを開いた時はセクション自体が下へ伸びるため、
  回答文が途中で切れない。
*/
.faq__background {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* 3枚の人物写真 */
.faq__photos {
  position: absolute;
  z-index: 2;
  top: -1.5%;
  left: 2.5%;
  width: 94%;
}

/*
  背景画像に「よくある質問」の文字があるので、
  HTML側の見出しは置かず、質問一覧だけ下に配置。
*/
.faq__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding:
    58%
    7.5%
    clamp(28px, 7vw, 52px);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 1.7vw, 13px);
}

.faq__item {
  overflow: hidden;
  border-radius: 13px;
  background: #9a532c;
  box-shadow: 0 2px 0 rgba(86, 47, 25, .15);
  transition:
    border-radius .3s ease,
    background-color .3s ease;
}

.faq__question {
  width: 100%;
  min-height: clamp(48px, 10.5vw, 79px);
  padding:
    clamp(9px, 2vw, 15px)
    clamp(13px, 3.4vw, 25px);
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: clamp(12px, 3.05vw, 22px);
  font-weight: 700;
  line-height: 1.35;
}

.faq__question > span:first-child {
  flex: 0 0 auto;
  color: #ffd667;
  font-size: 1.16em;
}

.faq__question-text {
  flex: 1 1 auto;
  min-width: 0;
}

.faq__question::after {
  content: "＋";
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 1.25em;
  line-height: 1;
  transition: transform .3s ease;
}

.faq__item.is-open .faq__question::after {
  transform: rotate(45deg);
}

.faq__answer {
  color: #4b2f20;
  background: #fffaf3;
  padding:
    clamp(10px, 2.5vw, 18px)
    clamp(18px, 4.5vw, 34px)
    clamp(14px, 3.4vw, 25px);
}

.faq__answer p {
  margin: 0;
  font-size: clamp(12px, 3vw, 21px);
  line-height: 1.75;
}

.faq__answer p + p {
  margin-top: .9em;
}

.faq__answer small {
  font-size: .88em;
}


/* =========================================================
   19. 19 クロージングオファー
   ========================================================= */

.closing-offer {
  background: #8a4f2a;
  padding-bottom: clamp(12px, 3vw, 22px);
}

.closing-offer__inner {
  width: 100%;
}

.closing-offer__visual {
  position: relative;
  width: 100%;
}

.closing-offer__main {
  display: block;
  width: 100%;
}

#sec19 .closing-offer__badge {
  position: absolute;
  z-index: 2;
  top: 2.5%;
  left: 12%;
  width: 22%;
  right: auto;
  bottom: auto;
  transform-origin: 50% 96%;
}

#sec19 .closing-offer__badge.anim-item.is-balancing {
  animation:
    subscription-chance-balance
    var(--balance-period, 4200ms)
    ease-in-out
    infinite;
}

.closing-offer__button {
  position: relative;
  z-index: 3;
  width: 86%;
  min-height: clamp(54px, 13vw, 96px);
  margin:
    clamp(15px, 4vw, 30px)
    auto
    0;
  padding: 0 1em;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #39ad63 0%,
      #19834a 100%
    );
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(16px, 4.3vw, 32px);
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow:
    0 6px 0 #126c3b,
    0 11px 22px rgba(0, 0, 0, .18);
  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.closing-offer__button:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #126c3b,
    0 6px 12px rgba(0, 0, 0, .14);
}


/* =========================================================
   20. 追従 CTA
   ========================================================= */

.fixed-cta {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 0;
  width: min(100%, var(--lp-max-width));
  transform: translateX(-50%);
  padding:
    7px
    max(10px, env(safe-area-inset-right))
    max(7px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .16);

  transition:
    opacity .3s ease,
    transform .3s var(--ease-out);

  opacity: 0;
  pointer-events: none;
}

.fixed-cta.is-show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.fixed-cta a {
  width: 100%;
  min-height: 62px;
  padding: 6px 18px 6px 8px;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #42b967 0%,
      #188947 100%
    );
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  box-shadow: 0 4px 0 #0f6e38;
}

.fixed-cta__product {
  width: 48px;
  max-height: 54px;
  object-fit: contain;
}

.fixed-cta__text {
  font-size: clamp(15px, 4vw, 29px);
  font-weight: 700;
  letter-spacing: .04em;
}


/* =========================================================
   21. アニメーション共通
   ========================================================= */

.anim-item {
  will-change: opacity, transform;
}

.anim-item[data-anim-type="fade-up"] {
  opacity: 0;
  transform: translate3d(0, var(--anim-distance, 40px), 0);
  transition:
    opacity var(--anim-duration, 800ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms),
    transform var(--anim-duration, 800ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms);
}

.anim-item[data-anim-type="fade-up"].is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.anim-item[data-anim-type="fade-in"] {
  opacity: 0;
  transition:
    opacity var(--anim-duration, 900ms) var(--anim-easing, ease) var(--anim-delay, 0ms);
}

.anim-item[data-anim-type="fade-in"].is-show {
  opacity: 1;
}

.anim-item[data-anim-type="slide-left"] {
  opacity: 0;
  transform: translate3d(calc(var(--anim-distance, 55px) * -1), 0, 0);
  transition:
    opacity var(--anim-duration, 800ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms),
    transform var(--anim-duration, 800ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms);
}

.anim-item[data-anim-type="slide-left"].is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.anim-item[data-anim-type="slide-right"] {
  opacity: 0;
  transform: translate3d(var(--anim-distance, 55px), 0, 0);
  transition:
    opacity var(--anim-duration, 800ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms),
    transform var(--anim-duration, 800ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms);
}

.anim-item[data-anim-type="slide-right"].is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.anim-item[data-anim-type="pop"] {
  opacity: 0;
  transform: scale(var(--anim-scale, .76));
  transform-origin: center center;
  transition:
    opacity var(--anim-duration, 700ms) var(--anim-easing, ease-out) var(--anim-delay, 0ms),
    transform var(--anim-duration, 700ms) var(--anim-easing, cubic-bezier(.22,1.35,.36,1)) var(--anim-delay, 0ms);
}

.anim-item[data-anim-type="pop"].is-show {
  opacity: 1;
  transform: scale(1);
}

.anim-item[data-anim-type="center-float"] {
  opacity: 0;
  transform:
    translate(-50%, calc(-44% + var(--anim-distance, 36px)))
    scale(var(--anim-scale, .94));
  transition:
    opacity var(--anim-duration, 1050ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms),
    transform var(--anim-duration, 1050ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms);
}

.anim-item[data-anim-type="center-float"].is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.anim-item[data-anim-type="center-fade-up"] {
  opacity: 0;
  transform: translateX(-50%) translateY(var(--anim-distance, 44px));
  transition:
    opacity var(--anim-duration, 1050ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms),
    transform var(--anim-duration, 1050ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms);
}

.anim-item[data-anim-type="center-fade-up"].is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.anim-item[data-anim-type="count"] {
  opacity: 0;
  transform: translate3d(0, var(--anim-distance, 35px), 0) scale(.97);
  transition:
    opacity var(--anim-duration, 1000ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms),
    transform var(--anim-duration, 1000ms) var(--anim-easing, cubic-bezier(.22,1,.36,1)) var(--anim-delay, 0ms);
}

.anim-item[data-anim-type="count"].is-show {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.anim-item.is-no-animation {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

@keyframes subscription-chance-balance {
  0%,
  12% {
    transform: rotate(0deg) scale(1);
  }

  22% {
    transform: rotate(-5.5deg) scale(1);
  }

  34% {
    transform: rotate(5deg) scale(1);
  }

  46% {
    transform: rotate(-3.8deg) scale(1);
  }

  58% {
    transform: rotate(3deg) scale(1);
  }

  70% {
    transform: rotate(-1.6deg) scale(1);
  }

  82%,
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #sec04 .subscription-offer__chance.anim-item.is-balancing,
  #sec19 .closing-offer__badge.anim-item.is-balancing {
    animation: none !important;
  }
}


/* =========================================================
   22. Hover
   ========================================================= */

@media (hover: hover) {

  .subscription-banner a,
  .trial-cta__badge,
  .fixed-cta a {
    transition:
      filter .25s ease,
      transform .25s ease;
  }

  .subscription-banner a:hover,
  .trial-cta__badge:hover {
    filter: brightness(1.04);
  }

  .fixed-cta a:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
  }

}


/* =========================================================
   23. PC表示
   ========================================================= */

@media screen and (min-width: 751px) {

  body {
    background: #eee9e3;
  }

  .lp-wrap {
    box-shadow:
      0 0 30px rgba(0, 0, 0, .08);
  }

}


/* =========================================================
   24. 小さいスマホ
   ========================================================= */

@media screen and (max-width: 375px) {

  :root {
    --fixed-cta-height: 72px;
  }

  .fixed-cta a {
    min-height: 56px;
  }

  .fixed-cta__product {
    width: 42px;
  }

}