@charset "UTF-8";

/* ========================================================
                      * Variable *
===========================================================
  単位システム（coding-guidelines.md 1章）
  - SP特化型部分       : calc(N * var(--rem))   ※Nはデザインの値（単位なし）
  - PC左右カラム       : calc(N * var(--rem-pc))
  - line-height        : 単位なし
  - letter-spacing     : em

  この LP は SP特化型。
  SPアートボード 390 / PCアートボード 1440 / PC上のSPレイアウト表示幅 500（Figma 青枠指示）
========================================================= */
:root {
  --pw: 1440; /* PCデザイン幅 */
  --sw: 390; /* SPアートボード幅 */
  --artboard-pw: 500; /* PC上でSPレイアウトを表示する幅 */
  --artboard-sw: 390; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  /* SP をベース値として持たせ、PC のみ min-width:769px で上書きする */
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
  --header-height: 0px;
}

@media (min-width: 769px) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}

/* デザイン実寸以上ではサイズを固定する */
@media (min-width: 1440px) {
  :root {
    --variable: 1px;
  }
}

[id] {
  scroll-margin-top: var(--header-height);
}

/* ========================================================
                      * Design Token *
========================================================= */
.p-feature {
  --base-font-color: #3f3a3a;
  --color-bg: #e3e1d8;
  --color-green: #414822;
  --color-brown: #56391b;
  --color-circle: #cccbb9;
  --color-bg-side: #f0ede4;
  --color-line: #d2cfc6;
  --color-note: #888;
  --color-note-dark: #ccc;
  --color-sidenav: #212121;

  --lp-font-ja: "Jost", "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --lp-font-en: "Jost", sans-serif;
  --lp-font-serif: "Marcellus", "Times New Roman", serif;
  --lp-font-hand: "ab-sakura", sans-serif;

  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
  --letter-spacing: .03em;
}

/* ========================================================
                      * Reset (LPスコープ内) *
===========================================================
  全ブランド共通で使う .lp_contents スコープ内リセット。
========================================================= */
#Wrap {
  width: 100%;
}

#footer {
  position: relative;
  z-index: 2;
}
.lp_contents {
  position: relative;
  overflow: clip;
  background: var(--color-bg);
  font-family: var(--lp-font-ja);
  font-weight: 500;
  font-size: calc(13 * var(--rem));
  color: var(--base-font-color);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

  /* PC は左右サイドを一段明るい地色にし、中央カラムを板として浮かせる（カンプ実測 #f0ede4） */
  @media (min-width: 769px) {
    background: var(--color-bg-side);
  }

  /* & * {
    font-feature-settings: "palt";
  } */

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

  & :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, a, button, figure, figcaption, span, sup, b) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: var(--letter-spacing);
  }

  & ul,
  & li {
    list-style: none;
  }

  & :where(img) {
    display: block;
    width: 100%;
    height: auto;
  }

  & sup {
    top: 0;
    font-size: .6em;
    vertical-align: super;
  }

  & :where(a, a:before, a:after, a img, button) {
    --duration: .3s;
    --timing: ease-in-out;
    transition: opacity var(--duration) var(--timing), color var(--duration) var(--timing), background-color var(--duration) var(--timing), border-color var(--duration) var(--timing);
  }

  & :where(a) {
    color: inherit;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }

  & :where(button) {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ========================================================
                      * Utility *
===========================================================
  u-d-lg : PC(769px以上)のみ表示 / u-d-md : SP(768px以下)のみ表示
========================================================= */
.lp_contents {
  & .u-d-lg {
    @media (max-width: 768px) {
      display: none !important;
    }
  }

  & .u-d-md {
    @media (min-width: 769px) {
      display: none !important;
    }
  }

  /* 英数字を Jost で組む（和文と混植する箇所の明示指定） */
  & .u-en {
    font-family: var(--lp-font-en);
  }

  & .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ========================================================
                      * Layout（SP特化型） *
===========================================================
  PC は中央に SP レイアウト（500px）、左右にロゴ／アンカーナビを固定表示する。
========================================================= */
.lp_contents {
  & .layout-mobile-first {
    position: relative;
    margin-inline: auto;
    width: 100%;

    @media (min-width: 769px) {
      width: calc(390 * var(--rem));
    }
  }

  & .layout-mobile-first__main {
    position: relative;
    width: 100%;
    padding-bottom: calc(80 * var(--rem));
    background: var(--color-bg);
  }

  /* 左右カラムは常に追従（固定表示） */
  & .layout-mobile-first__side {
    position: fixed;
    /* top: 50%; */
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc((100vw - 390 * var(--rem)) / 2);
    height: 100%;
    /* translate: 0 -50%; */
    text-align: center;
  }

  & .layout-mobile-first__side--left {
    left: 0;
  }

  & .layout-mobile-first__side--right {
    right: 0;
  }

  & .layout-mobile-first__logo {
    margin-inline: auto;
    width: calc(300 * var(--rem-pc));

    & img {
      width: 100%;
    }
  }

  & .layout-mobile-first__lead {
    position: absolute;
    bottom: calc(77 * var(--rem-pc));
    left: 0;
    right: 0;
    /* width: 100%; */
    margin-top: calc(347 * var(--rem-pc));
    font-family: var(--lp-font-en);
    font-weight: 400;
    font-size: calc(15 * var(--rem-pc));
    line-height: 1.4666;
    /* letter-spacing: .05em; */
  }
}

/* PC 右サイドのアンカーナビ */
.lp_contents {
  & .project-sidenav {
    display: grid;
    justify-items: center;
    gap: calc(18 * var(--rem-pc));

    & a {
      position: relative;
      display: block;
      padding-right: calc(20 * var(--rem-pc));
      font-weight: 400;
      font-size: calc(18 * var(--rem-pc));
      line-height: 1.8666;
      letter-spacing: var(--letter-spacing);
      color: var(--color-sidenav);
    }

    & .component-caret {
      position: absolute;
      top: 50%;
      right: 0;
      width: calc(8 * var(--rem-pc));
      margin-top: calc(-1 * var(--rem-pc));
      &::before,
      &::after {
        width: calc(6.5 * var(--rem-pc));
      }

      &::before {
        transform-origin: left top;
      }

      &::after {
        transform-origin: right top;
      }
    }
  }

  & .project-sidenav__item--en a {
    font-family: var(--lp-font-en);
  }
}

/* ========================================================
                      * Component: 共通パーツ *
========================================================= */
.lp_contents {
  /* 下向きの山形（INDEX・PCサイドナビ）。
     塗りではなく 1px の線 2 本を 45deg に倒して描く（斜辺 = √(4² + 4²) ≒ 5.657） */
  & .component-caret {
    position: relative;
    display: inline-block;
    width: calc(8 * var(--rem));
    height: calc(4 * var(--rem));

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      width: calc(5.657 * var(--rem));
      height: 1px;
      background: currentColor;
    }

    &::before {
      left: 0;
      rotate: 45deg;
      transform-origin: left bottom;
    }

    &::after {
      right: 0;
      rotate: -45deg;
      transform-origin: right bottom;
    }
  }

  /* 右向き（「商品を詳しく知る」） */
  & .component-caret--right {
    width: calc(4 * var(--rem));
    height: calc(8 * var(--rem));

    &::before {
      left: 0;
      top: 0;
      rotate: 45deg;
      transform-origin: left top;
    }

    &::after {
      left: 0;
      right: auto;
      top: auto;
      bottom: 0;
      rotate: -45deg;
      transform-origin: left bottom;
    }
  }

  /* チェックボックス風アイコン */
  & .component-check {
    position: relative;
    flex: none;
    display: block;
    width: calc(15.11 * var(--rem));
    height: calc(12 * var(--rem));

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: calc(12 * var(--rem));
      height: calc(12 * var(--rem));
      border: 1px solid currentColor;
    }

    &::after {
      content: "";
      position: absolute;
      left: calc(4.17 * var(--rem));
      top: calc(.45 * var(--rem));
      width: calc(10.941 * var(--rem));
      height: calc(7.186 * var(--rem));
      background: currentColor;
      clip-path: polygon(0 44%, 11% 33%, 34% 77%, 93% 0, 100% 8%, 34% 100%);
    }
  }

  /* ＋アイコン（こだわり円・追従ボタン） */
  & .component-plus {
    position: relative;
    display: block;
    width: calc(10 * var(--rem));
    height: calc(10 * var(--rem));

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background: currentColor;
      translate: -50% -50%;
    }

    &::before {
      width: 100%;
      height: 1px;
    }

    &::after {
      width: 1px;
      height: 100%;
    }
  }

  /* 楕円ボタン（大）：ホバーで色反転 */
  & .component-btn {
    --btn-color: var(--base-font-color);
    --btn-invert: var(--color-bg);
    position: relative;
    isolation: isolate; /* ::before(z-index:-1) をボタン内に閉じ込める */
    display: grid;
    place-items: center;
    margin-inline: auto;
    width: calc(204.468 * var(--rem));
    height: calc(77.203 * var(--rem));
    font-size: calc(14 * var(--rem));
    line-height: 2.25;
    color: var(--btn-color);

    &::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: -1;
      width: calc(200 * var(--rem));
      height: calc(60 * var(--rem));
      border: 1px solid var(--btn-color);
      border-radius: 50%;
      translate: -50% -50%;
      rotate: -5deg;
      transition: background-color .3s ease-in-out;
    }

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        color: var(--btn-invert);

        &::before {
          background: var(--btn-color);
        }
      }
    }
  }

  & .component-btn--light {
    --btn-color: #fff;
  }

  /* BUY ボタン（小）：ホバーで色反転 */
  & .component-btn-buy {
    --btn-color: #fff;
    position: relative;
    display: grid;
    place-items: center;
    margin-inline: auto;
    width: calc(72 * var(--rem));
    height: calc(28 * var(--rem));
    border: 1px solid var(--btn-color);
    border-radius: 50%;
    font-family: var(--lp-font-serif);
    font-weight: 400;
    font-size: calc(14 * var(--rem));
    line-height: 1.5714;
    color: var(--btn-color);

    @media (any-hover: hover) {
      &:hover {
        opacity: 1;
        background: var(--btn-color);
        color: var(--btn-invert);
      }
    }
  }
}

/* ========================================================
                      * Mainvisual *
========================================================= */
.lp_contents {
  & .project-mainvisual__visual {
    width: 100%;

    & img {
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }

  & .project-mainvisual__lead {
    padding-top: calc(37.28 * var(--rem));
    text-align: center;
    line-height: 2;

    & p + p {
      margin-top: calc(18 * var(--rem));
    }
  }
}

/* ========================================================
                      * Index（目次） *
========================================================= */
.lp_contents {
  & .project-index {
    display: flex;
    margin-top: calc(74.88 * var(--rem));
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
  }

  & .project-index__label {
    flex: none;
    display: grid;
    /* align-content: start; */
    /* justify-items: center; */
    align-items: center;
    padding-top: calc(15 * var(--rem));
    padding-right: calc(4 * var(--rem));
    width: calc(50 * var(--rem));
    border-right: 1px solid var(--color-line);
    font-family: var(--lp-font-en);
    font-size: calc(15 * var(--rem));
    line-height: 1;
    writing-mode: vertical-rl;
    letter-spacing: var(--letter-spacing);
  }

  & .project-index__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 1;
  }

  & .project-index__item {
    &:nth-child(odd) {
      border-right: 1px solid var(--color-line);
    }

    /* 罫線は行の内側に含める（外付けにするとピッチが 41px になる） */
    & a {
      position: relative;
      display: flex;
      align-items: center;
      height: calc(40 * var(--rem));
      border-bottom: 1px solid var(--color-line);
      padding: calc(4 * var(--rem)) calc(22.5 * var(--rem)) 0 calc(15 * var(--rem));
      font-weight: 400;
      font-size: calc(12 * var(--rem));
      line-height: 1;
    }

    & .component-caret {
      position: absolute;
      top: 50%;
      right: calc(14.5 * var(--rem));
      margin-top: calc(-2 * var(--rem));
    }
  }

  & .project-index__item:nth-last-child(-n + 2) a {
    border-bottom: none;
  }

  & .project-index__item--en a {
    font-family: var(--lp-font-en);
  }
}

/* ========================================================
                      * Recommend（こんな毎日に） *
========================================================= */
.lp_contents {
  & .project-recommend {
    margin-top: calc(78.04 * var(--rem));
  }

  & .project-recommend__title {
    font-size: calc(20 * var(--rem));
    line-height: 1.75;
    letter-spacing: .1em;
    text-align: center;

    /* リセットの :where(span) が letter-spacing を当ててしまうため見出し側の値を継承させる */
    & .u-en {
      letter-spacing: inherit;
    }
  }

  & .project-recommend__list {
    margin-top: calc(17.83 * var(--rem));
    padding-left: calc(56 * var(--rem));

    & li {
      display: flex;
      align-items: center;
      height: calc(29 * var(--rem));
      line-height: 1;

      &:last-child {
        height: calc(32 * var(--rem));
      }
    }

    & .component-check {
      margin-top: calc(-1 * var(--rem));
      margin-right: calc(8 * var(--rem));
    }
  }
}

/* ========================================================
                      * Point（5つのこだわり） *
========================================================= */
.lp_contents {
  & .project-point {
    margin-top: calc(70.97 * var(--rem));
  }

  & .project-point__title {
    font-size: calc(20 * var(--rem));
    line-height: 1.75;
    letter-spacing: .1em;
    text-align: center;

    & .u-en {
      letter-spacing: inherit;
    }
  }

  & .project-point__list {
    position: relative;
    margin-top: calc(21.5 * var(--rem));
    height: calc(354 * var(--rem));
  }

  & .project-point__item {
    position: absolute;
    width: calc(130 * var(--rem));
    height: calc(130 * var(--rem));
  }

  & .project-point__item--01 {
    left: calc(130 * var(--rem));
    top: 0;
  }

  & .project-point__item--02 {
    left: calc(15 * var(--rem));
    top: calc(90 * var(--rem));
  }

  & .project-point__item--05 {
    left: calc(245 * var(--rem));
    top: calc(90 * var(--rem));
  }

  & .project-point__item--03 {
    left: calc(58 * var(--rem));
    top: calc(224 * var(--rem));
  }

  & .project-point__item--04 {
    left: calc(203 * var(--rem));
    top: calc(224 * var(--rem));
    .project-point__label {
      top: calc(54 * var(--rem));
    }
  }

  & .project-point__btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-circle);
    text-align: center;

    @media (any-hover: hover) {
      &:hover {
        opacity: .8;
      }
    }
  }

  & .project-point__num {
    position: absolute;
    left: 0;
    top: calc(5.39 * var(--rem));
    width: 100%;
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    line-height: 2.625;
    letter-spacing: .1em;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(24.11 * var(--rem));
      width: calc(14 * var(--rem));
      height: 1px;
      background: currentColor;
      translate: -50% 0;
    }
  }

  & .project-point__label {
    position: absolute;
    left: 0;
    top: calc(43.74 * var(--rem));
    width: 100%;
    font-size: calc(13 * var(--rem));
    line-height: 1.75;
  }

  & .project-point__btn .component-plus {
    position: absolute;
    left: calc(60 * var(--rem));
    top: calc(100.34 * var(--rem));
  }
}

/* ========================================================
                      * Flavor *
========================================================= */
.lp_contents {
  & .project-flavor {
    position: relative;
    margin-top: calc(80 * var(--rem));
  }

  /* 透かしの「FLAVOR」を左右カラムの背景より前面に出すため、
     背景色はカラムではなく inner のグラデーションで 2 分割する */
  & .project-flavor__inner {
    position: relative;
    display: flex;
    height: calc(675.019 * var(--rem));
    background: linear-gradient(to right, var(--color-green) 0 50%, var(--color-brown) 50% 100%);
  }

  & .project-flavor__title {
    position: absolute;
    left: 0;
    top: calc(42.5 * var(--rem));
    width: 100%;
    font-family: var(--lp-font-en);
    font-size: calc(80 * var(--rem));
    line-height: .3875;
    letter-spacing: .1em;
    text-indent: .1em;
    text-align: center;
    color: #fff;
    opacity: .1;
  }

  & .project-flavor__col {
    position: relative;
    width: 50%;
    height: 100%;
  }

  & .project-flavor__thumb {
    position: absolute;
    top: calc(60 * var(--rem));
    width: calc(175 * var(--rem));
  }

  & .project-flavor__col--matcha .project-flavor__thumb {
    left: calc(10 * var(--rem));
  }

  & .project-flavor__col--mocha .project-flavor__thumb {
    left: calc(11 * var(--rem));
  }

  & .project-flavor__note {
    margin-top: calc(9 * var(--rem));
    padding-right: calc(10 * var(--rem));
    font-weight: 400;
    font-size: calc(10 * var(--rem));
    /* line-height: 3.15; */
    text-align: right;
    color: var(--color-note);
  }

  /* 商品情報ブロック */
  & .section-item {
    position: absolute;
    top: calc(242 * var(--rem));
    width: calc(175 * var(--rem));
    color: #fff;
    text-align: center;
  }

  & .project-flavor__col--matcha .section-item {
    left: calc(11.5 * var(--rem));
  }

  & .project-flavor__col--mocha .section-item {
    left: calc(12 * var(--rem));
  }

  & .section-item__name {
    height: calc(33 * var(--rem));
    border-top: 1px solid rgb(255 255 255 / .4);
    border-bottom: 1px solid rgb(255 255 255 / .4);
    font-family: var(--lp-font-serif);
    font-weight: 400;
    font-size: calc(15 * var(--rem));
    line-height: 2.4;
  }

  & .section-item__catch {
    margin-top: calc(20.22 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: 1.75;
  }

  & .section-item__spec {
    margin-top: calc(13.75 * var(--rem));
    padding-left: calc(18.5 * var(--rem));
    text-align: left;

    & li {
      display: flex;
      align-items: center;
      height: calc(24 * var(--rem));
      font-size: calc(12 * var(--rem));
      line-height: 1;

      /* &:last-child {
        height: calc(32 * var(--rem));
      } */
    }

    & .component-check {
      margin-right: calc(8 * var(--rem));
    }
  }

  & .section-item__price {
    font-family: var(--lp-font-en);
    font-weight: 400;
    line-height: 2.4231;
  }

  & .section-item__num {
    font-size: calc(17 * var(--rem));
    line-height: 1.8529;
  }

  & .section-item__tax {
    font-size: calc(11 * var(--rem));
    line-height: 2.8636;
  }

  & .section-item__spec + .section-item__price {
    margin-top: calc(12.33 * var(--rem));
  }

  & .section-item__buy {
    margin-top: calc(4.2 * var(--rem));
  }

  & .section-item__trial {
    position: relative;
    margin-top: calc(12.97 * var(--rem));
    font-size: calc(12 * var(--rem));
    line-height: 2.625;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(25.05 * var(--rem));
      width: calc(74 * var(--rem));
      height: 1px;
      background: rgb(255 255 255 / .6);
      translate: -50% 0;
    }
  }

  & .section-item__trial + .section-item__price {
    margin-top: calc(1.03 * var(--rem));
  }
}

/* MATCHA / MOCHA それぞれのホバー反転色 */
.lp_contents {
  & .project-flavor__col--matcha .component-btn-buy {
    --btn-invert: var(--color-green);
  }

  & .project-flavor__col--mocha .component-btn-buy {
    --btn-invert: var(--color-brown);
  }
}

/* ========================================================
                      * Review（カードスワイプ） *
===========================================================
  Swiper v8.4.7 の EffectCards を使用（script.js の initCardSlider と対）
========================================================= */
.lp_contents {
  & .project-review {
    /* margin-top: calc(87.51 * var(--rem)); */
    padding-top: calc(87.51 * var(--rem));
    padding-bottom: calc(64.19 * var(--rem));
    overflow: clip;

    /* Cardsエフェクトの親要素の遠近感（パースペクティブ）を消す */
    .swiper.swiper-cards,
    .swiper-cards .swiper-wrapper {
      perspective: none !important;
    }

    /* スライドの3D変形スタイルを平坦化（奥に行っても小さくならないようにする） */
    .swiper-cards .swiper-slide {
      transform-style: flat !important;
    }

    /* デフォルトでアクティブ以外のスライドは一旦非表示にする */
    .swiper-cards .swiper-slide {
      opacity: 0 !important;
      pointer-events: none;
    }

    /* 3. 表示したい「前2枚 ＋ 現在の1枚 ＋ 後ろ2枚」だけを再表示 */

    /* 【現在】 */
    .swiper-cards .swiper-slide-active,

    /* 【後ろの2枚】 */
    .swiper-cards .swiper-slide-next,
    .swiper-cards .swiper-slide-next + .swiper-slide,

    /* 【前の2枚】
      .swiper-slide-prev (1枚前)
      .swiper-slide:has(+ .swiper-slide-prev) (2枚前)
    */
    .swiper-cards .swiper-slide-prev,
    .swiper-cards .swiper-slide:has(+ .swiper-slide-prev) {
      opacity: 1 !important;
      pointer-events: auto;
    }

    .swiper-cards .swiper-slide-next,
    .swiper-cards .swiper-slide-next + .swiper-slide,
    .swiper-cards .swiper-slide-prev,
    .swiper-cards .swiper-slide:has(+ .swiper-slide-prev) {
      clip-path: xywh(0 0 100% calc(620 * var(--rem)));
      transition: clip-path 1s ease;
    }

    /* Swiperが自動生成するカード用の影（暗調カバー） */
    .swiper-cards .swiper-slide-shadow {
      background: rgba(65, 50, 34, 0.2) !important; /* 影のベース色（黒の濃度） */
    }

    /* 2枚目・3枚目の暗さを個別指定したい場合の例 */
    /* 2枚目（1つ後ろ）の暗さ */
    /* .swiper-slide-next .swiper-slide-shadow {
      opacity: 0.4 !important;
    } */

    /* 3枚目（2つ後ろ）の暗さ */
    .swiper-slide-next + .swiper-slide .swiper-slide-shadow {
      background: rgba(65, 50, 34, 0.4) !important;
    }
    .swiper-slide-next + .swiper-slide + .swiper-slide .swiper-slide-shadow {
      background: rgba(65, 50, 34, 0.45) !important;
    }
    .swiper-slide-next + .swiper-slide + .swiper-slide + .swiper-slide .swiper-slide-shadow {
      background: rgba(65, 50, 34, 0.5) !important;
    }
  }

  & .project-review__slider {
    margin-inline: auto;
    width: calc(330 * var(--rem));
    overflow: visible;

    & .swiper-slide {
      border-radius: calc(2 * var(--rem));
      overflow: hidden;
      cursor: grab;
      & a {
        &:hover {
          opacity: 1;
        }
      }
    }

    & .swiper-slide-active {
      cursor: grab;
    }

    & img {
      width: 100%;
    }
  }
}

/* ========================================================
                      * Arrange（おすすめアレンジ） *
========================================================= */
.lp_contents {
  /* & .project-arrange {
    margin-top: calc(64.19 * var(--rem));
  } */

  & .project-arrange__title {
    font-size: calc(20 * var(--rem));
    line-height: 1.75;
    letter-spacing: .1em;
    text-align: center;
  }

  & .project-arrange__img {
    margin-top: calc(3.33 * var(--rem));
  }
}

/* ========================================================
                      * LINE UP（MATCHA / MOCHA） *
===========================================================
  背景は疑似パララックス。親に clip-path を掛けて
  position:fixed の包含ブロックにすることで iOS でも動作させる。
========================================================= */
.lp_contents {
  & .project-lineup {
    margin-top: calc(80 * var(--rem));
  }

  & .project-lineup__block {
    position: relative;
    height: calc(948.447 * var(--rem));
    color: #fff;
  }

  & .project-lineup__block--matcha {
    background: var(--color-green);
  }

  & .project-lineup__block--mocha {
    background: var(--color-brown);
  }

  & .project-lineup__visual {
    position: relative;
    height: calc(492 * var(--rem));
    clip-path: inset(0);
  }

  /* fixed + 親の clip-path で疑似パララックス。
     inset:0 のままだとビューポート幅で cover されて拡大率が変わるため、
     横幅を中央カラム幅に固定してデザインどおりの見え方にする */
  & .project-lineup__bg {
    /* position: fixed; */
    /* left: 50%; */
    position: absolute;
    top: 0;
    left: 0;
    width: calc(390 * var(--rem));
    height: 108%;
    /* height: 100vh; */
    /* translate: -50% 0; */
    background-repeat: no-repeat;
    background-position: center;
    /* background-size: calc(390 * var(--rem)) auto; */
    background-size: auto 100%;
  }

  & .project-lineup__block--matcha .project-lineup__bg {
    background-image: url(../img/bg_matcha.jpg);
  }

  & .project-lineup__block--mocha .project-lineup__bg {
    background-image: url(../img/bg_mocha.jpg);
  }

  /* 下方向のグラデーション */
  & .project-lineup__visual::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0), #000);
  }

  & .project-lineup__block--matcha .project-lineup__visual::after {
    height: calc(150 * var(--rem));
    opacity: .5;
  }

  & .project-lineup__block--mocha .project-lineup__visual::after {
    height: calc(262 * var(--rem));
    opacity: .3;
  }

  & .project-lineup__item {
    position: absolute;
    left: calc(50 * var(--rem));
    top: calc(40 * var(--rem));
    z-index: 1;
    width: calc(300 * var(--rem));
  }

  /* 商品名まわりは背景ビジュアルの上に重なる */
  & .project-lineup__head {
    position: absolute;
    left: 0;
    top: calc(349.65 * var(--rem));
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  & .project-lineup__block--matcha .project-lineup__item img {
    filter: drop-shadow(calc(20 * var(--rem)) calc(20 * var(--rem)) calc(10 * var(--rem)) rgb(0 0 0 / .5));
  }

  & .project-lineup__block--mocha .project-lineup__item img {
    filter: drop-shadow(calc(20 * var(--rem)) calc(20 * var(--rem)) calc(20 * var(--rem)) rgb(0 0 0 / .3));
  }

  & .project-lineup__catch {
    font-size: calc(15 * var(--rem));
    line-height: 2.1;
  }

  & .project-lineup__brand {
    margin-top: calc(2.75 * var(--rem));
    font-family: var(--lp-font-serif);
    font-weight: 400;
    font-size: calc(16 * var(--rem));
    line-height: 2.1875;
    letter-spacing: .1em;
    text-indent: .1em;
  }

  & .project-lineup__name {
    margin-top: calc(-1.15 * var(--rem));
    font-family: var(--lp-font-serif);
    font-weight: 400;
    font-size: calc(30 * var(--rem));
    line-height: 1.05;
  }
}

/* ========================================================
                      * LINE UP：スペックブロック *
========================================================= */
.lp_contents {
  & .section-spec {
    position: absolute;
    left: calc(15.5 * var(--rem));
    top: calc(532 * var(--rem));
    width: calc(360 * var(--rem));
    height: calc(358.737 * var(--rem));
    text-align: left;
  }

  & .section-spec__icons {
    width: calc(360 * var(--rem));
  }

  & .section-spec__note {
    position: absolute;
    top: calc(84.81 * var(--rem));
    right: calc(220.5 * var(--rem));
    font-weight: 400;
    font-size: calc(10 * var(--rem));
    line-height: 3.15;
    color: var(--color-note-dark);
  }

  & .section-spec__price {
    position: relative;
    margin-top: calc(51.75 * var(--rem));
    padding-top: calc(10 * var(--rem));
    height: calc(75 * var(--rem));
    border-top: 1px solid rgb(255 255 255 / .15);
    border-bottom: 1px solid rgb(255 255 255 / .15);
  }

  & .section-spec__badge {
    position: absolute;
    left: calc(23.5 * var(--rem));
    top: calc(10 * var(--rem));
    display: grid;
    place-content: center;
    width: calc(118 * var(--rem));
    height: calc(52 * var(--rem));
    background: rgb(255 255 255 / .1);
    font-size: calc(11 * var(--rem));
    line-height: 2;
    text-align: center;
  }

  & .section-spec__off {
    display: block;
    margin-top: calc(-2 * var(--rem));
    font-size: calc(18 * var(--rem));
    line-height: 1.2222;
  }

  & .section-spec__list {
    position: absolute;
    left: calc(156.5 * var(--rem));
    top: calc(6.4 * var(--rem));
  }

  /* 行の高さは常に 31.5px 相当に固定し、字送りを数字サイズに依存させない */
  & .section-spec__row {
    display: flex;
    align-items: baseline;

    & dt {
      width: calc(55 * var(--rem));
      font-size: calc(11 * var(--rem));
      line-height: 2.8636;
    }

    & dd {
      font-family: var(--lp-font-en);
      font-weight: 400;
    }
  }

  & .section-spec__row--main {
    margin-top: calc(-8 * var(--rem));
  }

  & .section-spec__num {
    font-size: calc(15 * var(--rem));
    line-height: 2.1;
  }

  & .section-spec__num--lg {
    font-size: calc(24 * var(--rem));
    line-height: 1.3125;
  }

  & .section-spec__tax {
    font-size: calc(11 * var(--rem));
    line-height: 2.8636;
  }

  & .section-spec__btn {
    margin-top: calc(30 * var(--rem));
    .component-btn {
      font-size: calc(15 * var(--rem));
    }
  }

  & .section-spec__more {
    margin-top: calc(15.11 * var(--rem));
    text-align: center;

    & a {
      position: relative;
      display: inline-block;
      padding-right: calc(14 * var(--rem));
      padding-bottom: calc(3 * var(--rem));
      border-bottom: 1px solid rgb(255 255 255 / .6);
      font-size: calc(12 * var(--rem));
      /* line-height: 2.625; */
    }

    & .component-caret--right {
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: calc(-5.5 * var(--rem));
    }
  }
}

.lp_contents {
  & .project-lineup__block--matcha .component-btn--light {
    --btn-invert: var(--color-green);
  }

  & .project-lineup__block--mocha .component-btn--light {
    --btn-invert: var(--color-brown);
  }
  .project-lineup__block--mocha {
    .project-lineup__item {
      left: calc(45 * var(--rem));
    }
  }
}

/* ========================================================
                      * About emmi *
========================================================= */
.lp_contents {
  & .project-about {
    margin-top: calc(75.5 * var(--rem));
  }

  & .project-about__title {
    font-family: var(--lp-font-en);
    font-size: calc(20 * var(--rem));
    line-height: 1.75;
    letter-spacing: .1em;
    text-indent: .1em;
    text-align: center;
  }

  & .project-about__img {
    margin: calc(22.5 * var(--rem)) auto 0;
    width: calc(350 * var(--rem));
  }

  & .project-about__text {
    margin-top: calc(23.27 * var(--rem));
    line-height: 2;
    text-align: center;
    .en {
      letter-spacing: .065em;
    }

    & p + p {
      margin-top: calc(26 * var(--rem));
    }
  }

  & .project-about__btn {
    margin-top: calc(21.72 * var(--rem));
  }
}

/* ========================================================
                      * Campaign *
========================================================= */
.lp_contents {
  & .project-campaign {
    margin-top: calc(79 * var(--rem));
  }

  & .component-campaign {
    margin-inline: auto;
    padding: calc(34.5 * var(--rem)) 0 calc(38 * var(--rem));
    width: calc(340 * var(--rem));
    border: 1px solid var(--base-font-color);
    background: var(--color-bg);
    text-align: center;
  }

  & .component-campaign__title {
    font-family: var(--lp-font-en);
    font-size: calc(20 * var(--rem));
    line-height: 1.75;
    letter-spacing: .1em;
    text-indent: .1em;
  }

  & .component-campaign__term {
    margin-top: calc(-3.2 * var(--rem));
    font-family: var(--lp-font-en);
    font-size: calc(20 * var(--rem));
    line-height: 1.75;
  }

  & .component-campaign__year,
  & .component-campaign__day {
    font-size: calc(12 * var(--rem));
  }

  & .component-campaign__date {
    font-size: calc(20 * var(--rem));
  }

  & .component-campaign__hyphen {
    font-weight: 400;
    font-size: calc(20 * var(--rem));
  }

  & .component-campaign__point {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: calc(8 * var(--rem));
    margin-top: calc(24.7 * var(--rem));
    font-family: var(--lp-font-en);
    letter-spacing: .1em;
  }

  & .component-campaign__percent {
    margin-right: calc(-3 * var(--rem));
    font-size: calc(30 * var(--rem));
    line-height: 1.1666;
    letter-spacing: .1em;
  }

  & .component-campaign__up {
    font-size: calc(24 * var(--rem));
    line-height: 1.4583;
    letter-spacing: .1em;
  }

  & .component-campaign__line {
    position: absolute;
    left: calc(72 * var(--rem));
    top: calc(36.84 * var(--rem));
    width: calc(196.5 * var(--rem));
    height: 1px;
    background: currentColor;
    transform-origin: left center;
  }

  /* スクロールで線が引かれる（script.js の initLineAnimation と対）。
     JS フックは .js-line、スタイルはこの修飾子側に持たせる */
  & .component-campaign__line--anim {
    scale: 0 1;
    transition: scale .8s var(--transition-timing);

    &.is-active {
      scale: 1 1;
    }
  }

  & .component-campaign__icon {
    margin: calc(25.63 * var(--rem)) auto 0;
    width: calc(80 * var(--rem));
  }

  & .component-campaign__text {
    margin-top: calc(22.28 * var(--rem));
    line-height: 2;
  }

  & .component-campaign__btn {
    margin-top: calc(21.72 * var(--rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .component-campaign__line--anim {
    scale: 1 1;
    transition: none;
  }
}

/* ========================================================
                      * 追従キャンペーンボタン（右下固定） *
========================================================= */
.lp_contents {
  & .component-fab {
    position: fixed;
    right: calc(10 * var(--rem));
    bottom: calc(20 * var(--rem));

    /* PC は中央カラムの右下に固定する */
    @media (min-width: 769px) {
      right: calc(50vw - 390 * var(--rem) / 2 + 12 * var(--rem));
    }
    z-index: 2;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: calc(4 * var(--rem));
    width: calc(72 * var(--rem));
    height: calc(72 * var(--rem));
    padding-top: calc(19 * var(--rem));
    border-radius: 50%;
    background: var(--base-font-color);
    color: #fff;

    @media (any-hover: hover) {
      &:hover {
        opacity: .8;
      }
    }
  }

  & .component-fab__text {
    font-family: var(--lp-font-en);
    font-size: calc(12 * var(--rem));
    line-height: 1;
  }

  & .component-plus--light {
    width: calc(11 * var(--rem));
    height: calc(11 * var(--rem));
    margin-top: calc(6 * var(--rem));
  }
}

/* ========================================================
                      * Modal（こだわり／キャンペーン） *
========================================================= */
.lp_contents {
  & .component-modal {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: calc(20 * var(--rem)) 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;

    &[hidden] {
      display: none;
    }

    &.is-open {
      opacity: 1;
      visibility: visible;
    }

    .swiper-slide {
      width: calc(340 * var(--rem));
      max-height: calc(700 * var(--rem));
      margin-inline: calc(5 * var(--rem));
    }
  }

  & .component-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / .5);
  }

  & .component-modal__inner {
    position: relative;
    width: calc(390 * var(--rem));
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .component-modal__inner--campaign {
    width: calc(340 * var(--rem));
    .component-modal__close {
      right: calc(10 * var(--rem));
    }
  }

  & .component-modal__panel {
    width: calc(340 * var(--rem));
    position: relative;
    padding: calc(27.79 * var(--rem)) calc(20 * var(--rem)) calc(30 * var(--rem));
    min-height: calc(700 * var(--rem));
    border: 1px solid var(--base-font-color);
    background: var(--color-bg);
    text-align: center;
  }

  & .component-modal__num {
    position: relative;
    font-family: var(--lp-font-en);
    font-size: calc(18 * var(--rem));
    line-height: 1.75;
    letter-spacing: .1em;
    text-indent: .1em;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: calc(29.21 * var(--rem));
      width: calc(20 * var(--rem));
      height: 1px;
      background: currentColor;
      translate: -50% 0;
    }
  }

  & .component-modal__title {
    margin-top: calc(18.13 * var(--rem));
    font-size: calc(16 * var(--rem));
    line-height: 1.4219;
  }

  & .component-modal__img {
    margin: calc(30.67 * var(--rem)) auto 0;
    width: calc(240 * var(--rem));

    & img {
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }

  & .component-modal__lead {
    margin-top: calc(27.27 * var(--rem));
    font-size: calc(15 * var(--rem));
    line-height: 1.75;
    letter-spacing: .1em;
  }

  & .component-modal__text {
    margin-top: calc(15.28 * var(--rem));
    font-weight: 400;
    line-height: 2;
    text-align: left;
  }

  & .component-modal__note {
    font-size: calc(10 * var(--rem));
    color: var(--color-note);
  }

  /* 閉じる（＋を45度回転）。
     パネルが画面より高いときにスクロールで押せなくならないよう sticky で上端に留める。
     負の margin-bottom で後続のパネルを引き上げ、デザインどおりパネル右上に重ねる */
  & .component-modal__close {
    /* position: sticky; */
    position: absolute;
    top: calc(10 * var(--rem));
    right: calc(36 * var(--rem));
    z-index: 3;
    display: block;
    /* margin: 0 calc(9.7 * var(--rem)) calc(-38.284 * var(--rem)) auto; */
    width: calc(28.284 * var(--rem));
    height: calc(28.284 * var(--rem));

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: calc(20 * var(--rem));
      height: 1px;
      background: var(--base-font-color);
      translate: -50% -50%;
    }

    &::before {
      rotate: 45deg;
    }

    &::after {
      rotate: -45deg;
    }
  }

  /* 左右の矢印（下向き山形と同じく 1px の線 2 本で描く。斜辺 = √(10² + 10²) ≒ 14.142） */
  & .component-modal__nav {
    position: absolute;
    top: calc(237.21 * var(--rem));
    z-index: 2;
    width: calc(10 * var(--rem));
    height: calc(20 * var(--rem));

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: calc(14.142 * var(--rem));
      height: 1px;
      background: var(--base-font-color);
    }

    &.swiper-button-disabled {
      opacity: .3;
      pointer-events: none;
    }
  }

  & .component-modal__nav--prev {
    left: calc(46 * var(--rem));

    &::before {
      right: 0;
      top: 0;
      rotate: -45deg;
      transform-origin: right top;
    }

    &::after {
      right: 0;
      bottom: 0;
      rotate: 45deg;
      transform-origin: right bottom;
    }
  }

  & .component-modal__nav--next {
    right: calc(46 * var(--rem));

    &::before {
      left: 0;
      top: 0;
      rotate: 45deg;
      transform-origin: left top;
    }

    &::after {
      left: 0;
      bottom: 0;
      rotate: -45deg;
      transform-origin: left bottom;
    }
  }

  /* キャンペーンモーダル */
  & .component-modal__inner--campaign .component-campaign {
    width: 100%;
  }
}

/* body スクロールロック（モーダル表示中） */
body.is-modal-open {
  overflow: hidden;
}