@charset "UTF-8";

/* ========================================================
                      * Variable *
===========================================================
  単位システム（coding-guidelines.md 1章参照）
  - SP特化型部分       : calc(N * var(--rem))      ※Nはデザインの値（単位なし）
  - SP（768px以下）    : calc(N * (100vw / アートボード幅))
  - PC（769px以上）    : rem（1rem = 10px）
  - line-height        : 単位なし
  - letter-spacing     : em

  ▼SP特化型デザインの場合: 以下の :root 一式を案件の値に合わせて使う。
    --pw          : PCデザイン幅（例 1600）
    --sw          : SPアートボード幅（例 750）
    --artboard-pw : PC上でSPレイアウトを表示する幅（例 500）
    --artboard-sw : SPアートボード幅（例 750）
  ▼SP特化型でない場合: この :root ブロックごと削除してよい。
========================================================= */
: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 をベースに定義（768px 未満＝max-width:768px 相当）。
     整数 px の min/max ペアだと 768.x px で変数が未定義になり --rem が壊れるため、
     SP をデフォルト値として持たせ、PC のみ min-width で上書きする。 */
  --ratio: 1;
  --variable: calc(100vw / var(--sw));
}

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

/* ========================================================
                      * Design Token *
===========================================================
  LP固有のカスタムプロパティは :root ではなく .p-feature に定義する。
  色・フォントは案件のデザインに合わせて書き換える。
  Webフォントを使う場合は読み込みコードをユーザーから受領する
  （Claudeが外部から取得・kitId推測をしてはならない）。
========================================================= */
.p-feature {
  --base-font-color: #2D0800;
  --color-accent: #bf891c;
  --color-brown: #4E3426;
  --color-beige: #f7f3e7;
  --color-bg: #ece3d3;

  --lp-font-ja: "Noto Serif JP", hiragino-kaku-gothic-pron, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --lp-font-en: "acme-gothic", serif;
  --lp-font-ja-sans: "noto-sans-cjk-jp", sans-serif;

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

  /* z-index 採番（coding-guidelines.md 2-5）
     ▼サイト共通（マスターページ側。LP から変更しない）
       #header : 999   ← モーダルはこれより必ず上に出す
       #footer :   2   ← Site Common Override で指定
     ▼LP 内。生の数値ではなく必ずこの変数を使う */
  --z-base: 1; /* 通常の重なり調整（画像の前後関係など） */
  --z-sticky: 10; /* LP 内の追従要素（追従CTA・SP特化型の左右ロゴ/ナビ）※ヘッダーより下 */
  --z-modal-overlay: 1000; /* モーダルの背景。#header(999) より上 */
  --z-modal: 1010; /* モーダル本体・閉じるボタン */

  /* 追従ヘッダー #header の実測高さ。script.js の initHeaderOffset() が上書きする。
     プレビュー HTML には #header が無いため 0px のまま（＝影響なし） */
  --header-h: 0px;
}

/* ========================================================
                      * Reset (LPスコープ内) *
===========================================================
  全ブランド共通で使う .lp_contents スコープ内リセット。
  :where() で詳細度を上げずに閉じ込める。原則ここは変更しない。
========================================================= */
.lp_contents {
  position: relative;
  font-family: var(--lp-font-ja);
  color: var(--base-font-color, #000);
  font-style: normal;
  letter-spacing: var(--letter-spacing);

  & * {
    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 {
    font-family: var(--lp-font-ja-sans);
    font-size: calc(10 * var(--rem));
    font-weight: 500;
  }

  & :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;
  }

}



@media screen and (max-width: 1400px) {
  html {
    font-size: calc(10 * (100vw / 1400));
  }
}



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

.sp_only {
  display: block;
}
.pc_only {
  display: none;
}

:root {
  --rate: 45rem / 390;
}

.fixed_area {
  position: fixed;
  left: 50%;
  translate: -50% -45%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  top: 50%;
  background: #DFD5BA;
}

.lp_bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background: url(../img/260717/bg.jpg) no-repeat;
  background-size: cover;
}

.page-inner {
  width: calc(390 * var(--rem));;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.fixed_left {
  display: grid;
  place-items: center;
  width: calc((100% - 45rem) / 2);
  max-width: calc((160rem - 45rem) / 2);
  height: 110vh;
}

.fixed_left .main_ttl {
  width: 35rem;
}

.fixed_right {
  display: grid;
  place-items: center;
  width: calc((100% - 45rem) / 2);
  max-width: calc((168rem - 45rem) / 2);
  height: 110vh;
}

.fixed_right .nav {
  margin-top: -5rem;
}

.fixed_right .nav h3 {
  font-size: 3.2rem;
  font-family: var(--font-en);
  font-weight: 500;
  font-style: italic;
  color: var(--purple-color);
  margin-bottom: 1rem;
}

.fixed_right .nav ul {
  width: 21rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.fixed_right .nav ul li {
  position: relative;
  z-index: 0;
}

.fixed_right .nav ul li::before {
  position: absolute;
  content: "";
  background: url(../img/260717/nav_arrow.svg) no-repeat;
  background-size: 100%;
  width: 1.2rem;
  height: .7rem;
  top: 1rem;
  right: 1rem;
  transition: ease-in-out .2s;
  z-index: 1;
}

.fixed_right .nav ul li:hover::before {
  top: 1.5rem;
}

.fixed_right .nav ul li:nth-of-type(n+2) {
  margin-top: 1.5rem;
}

.fixed_right .number {
  font-family: var(--font-en);
  font-size: 4rem;
  font-style: italic;
}

.fixed_right .text {
  display: block;
  text-align: center;
  font-family: var(--font-text_ttl);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}

.fixed_right .sub_text {
  font-weight: 700;
  font-family: var(--font-en);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
}

.fixed_right .fixed-nav_blk {
  justify-content: flex-start;
  text-align: left;
}

.fixed_right .nav_pc {
  width: 21rem;
  margin-top: 0.5rem;
}

.follow_banner {
  bottom: 2rem;
  right: -15rem;
  width: 15rem;
  transition: all 1s ease;
}

.follow_banner.m_fixed {
  position: fixed;
  bottom: 2rem;
  right: 0;
  width: 15rem;
  transition: all 1s ease;
}

}

@media only screen and (max-width: 768px) {
  .follow_banner {
    bottom: calc(20 * var(--rem));
    right: calc(-110 * var(--rem));
    width: calc(110 * var(--rem));
    transition: all 1s ease;
  }
  
  .follow_banner.m_fixed {
    position: fixed;
    bottom: calc(20 * var(--rem));
    right: 0;
    width: calc(110 * var(--rem));
    transition: all 1s ease;
  }
}

/* ========================================================
                      * Site Common Override *
===========================================================
  本番(aspx)でマスターページが出力するサイト共通要素の上書き。
  aspx 納品時は必ず入れる（coding-guidelines.md 6-7 参照）。
  - #Wrap   : 幅が効かず横スクロールが出る事例があるため width:100% を明示
  - #footer : LP 内の fixed / z-index 要素がフッターに重なるのを防ぐ
  プレビュー HTML には #Wrap / #footer が無いため無効（aspx 化後に効く）。
  .lp_contents スコープ外への例外的な指定。この 2 つ以外は追加しない。
========================================================= */
#Wrap {
  width: 100%;
}

#footer {
  position: relative;
  z-index: 100;
}

/* ========================================================
                      * Anchor Offset *
===========================================================
  本番のサイト共通ヘッダー #header は追従（fixed）のため、ページ内
  アンカーの着地位置をヘッダーの高さ分ずらす（coding-guidelines.md 3-1）。
  --header-h には script.js の initHeaderOffset() が実測値を入れる
  （高さは SP/PC・ブランドで異なるので固定値で持たない）。
  scroll-margin-top なので JS のスムーススクロールだけでなく、
  ハッシュ付き URL での直接着地・ブラウザバック・Tab フォーカスにも効く。
  アンカー上に余白も入れたい場合は calc(var(--header-h) + 20 * var(--rem)) 等にする。
========================================================= */
.lp_contents {
  & [id] {
    scroll-margin-top: var(--header-h, 0px);
  }
}

/* ========================================================
                      * 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;
    }
  }
}

/* ========================================================
                      * Animation *
===========================================================
  .js-intersection : スクロールで表示領域に入ったら is-active が付く
  （script.js の initScrollAnimations と対）。不要なら削除。
  ※SP特化型でない案件では var(--rem, 1px) がフォールバックの 1px になり
    移動量 40px 固定になる。案件の単位系に合わせて値を調整すること。
========================================================= */
.lp_contents {
  & .js-intersection {
    opacity: 0;
    translate: 0 calc(40 * var(--rem, 1px));
    transition: opacity .8s var(--transition-timing), translate .8s var(--transition-timing);

    &.is-active {
      opacity: 1;
      translate: 0 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp_contents .js-intersection {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* ========================================================
                      * Mainvisual *
========================================================= */
.lp_contents {
  & .project-mainvisual {
    & .project-mainvisual__band {
      padding: calc(20 * var(--rem)) 0;
      background: var(--color-brown);
    }

    & .project-mainvisual__inner {
      padding: calc(60 * var(--rem)) calc(20 * var(--rem));
      background: url(../img/section-main-area.jpg) center top / cover no-repeat;
    }

    & .project-mainvisual__ttl {
      margin-bottom: calc(35 * var(--rem));
      text-align: center;
      font-size: calc(20 * var(--rem));
      font-weight: bold;
      line-height: 1.5;
      letter-spacing: .1em;
      color: var(--base-font-color);
    }

    & .project-mainvisual__text {
      display: flex;
      flex-direction: column;
      gap: calc(20 * var(--rem));
      text-align: center;
    }

    & .project-mainvisual__text p {
      font-size: calc(16 * var(--rem));
      font-weight: bold;
      line-height: 1.8;
      letter-spacing: .04em;
      color: var(--base-font-color);
    }
  }
}

/* ========================================================
                      * Nav *
========================================================= */
.lp_contents {
  & .project-nav {
    position: relative;
    padding: calc(40 * var(--rem)) calc(26 * var(--rem));
    background: url(../img/nav_bg.jpg) center / 100% 100% no-repeat;

    & .project-nav__list {
      display: flex;
      gap: calc(10 * var(--rem));
      justify-content: center;
    }

    & .project-nav__item {
      flex: 1;
    }

    & .project-nav__link {
      display: flex;
      align-items: center;
      justify-content: center;
      height: calc(60 * var(--rem));
      background: url(../img/nav_tab_shape.svg) center / 100% 100% no-repeat;
      font-family: var(--lp-font-en);
      font-weight: 300;
      font-size: calc(16 * var(--rem));
      letter-spacing: .05em;
      color: var(--color-beige);
    }

    & .project-nav__star {
      position: absolute;
      width: calc(25 * var(--rem));
      height: calc(24 * var(--rem));
    }

    & .project-nav__star--tl { top: calc(5 * var(--rem)); left: calc(5 * var(--rem)); }
    & .project-nav__star--tr { top: calc(5 * var(--rem)); right: calc(5 * var(--rem)); transform: scaleX(-1); }
    & .project-nav__star--bl { bottom: calc(5 * var(--rem)); left: calc(7 * var(--rem)); transform: scaleY(-1); }
    & .project-nav__star--br { bottom: calc(5 * var(--rem)); right: calc(7 * var(--rem)); transform: scale(-1, -1); }
  }
}

/* ========================================================
                      * Category *
========================================================= */
.lp_contents {
  & .project-category {
    padding: calc(60 * var(--rem)) calc(20 * var(--rem)) calc(70 * var(--rem));
    scroll-margin-top: var(--header-h, 0px);

    &[data-category="scent"] {background-image: linear-gradient(180deg, rgba(195, 175, 156, 1) 0%, rgba(204, 190, 177, 1) 100%); }
    &[data-category="know"] { background-image: linear-gradient(180deg, rgba(77, 51, 37, 1) 0%, rgba(96, 64, 47, 1) 100%); }
    &[data-category="feel"] { background-image: linear-gradient(180deg, rgba(195, 175, 156, 1) 0%, rgba(204, 190, 177, 1) 100%); }

    & .project-category__lead {
      margin-bottom: calc(20 * var(--rem));
      font-size: calc(22 * var(--rem));
      line-height: 1.5;
      font-weight: 600;
      text-align: center;
    }

    & .project-category__en {
      margin-bottom: calc(25 * var(--rem));
      font-family: var(--lp-font-en);
      font-weight: 300;
      font-size: calc(32 * var(--rem));
      letter-spacing: .05em;
      text-align: center;
    }

    & .project-category__tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: calc(10 * var(--rem));
      margin-bottom: calc(30 * var(--rem));
    }

    & .project-category__tag {
      position: relative;
      padding: calc(6 * var(--rem)) calc(14 * var(--rem)) calc(6 * var(--rem)) calc(30 * var(--rem));
      border: 1px solid var(--color-brown);
      border-radius: 999px;
      font-size: calc(16 * var(--rem));
      font-weight: 600;
      z-index: 0;
    }

    & .project-category__tag::before {
      position: absolute;
      content: "";
      background: url(../img/check.svg) no-repeat;
      background-size: 100%;
      width: calc(15 * var(--rem));
      height: calc(14 * var(--rem));
      top: 50%;
      left: calc(10 * var(--rem));
      transform: translateY(-50%);
      z-index: 1;
    }
  }

  & .section-card__list {
    display: flex;
    flex-direction: column;
    gap: calc(20 * var(--rem));
  }
}

.lp_contents {
  & #know {
      & .project-category__lead {
        color: #F7F3E7;
      }
      & .project-category__en {
        color: #F7F3E7;
      }
      & .project-category__tag{
        color: #F7F3E7;
      }
      & .project-category__tag{
        border: 1px solid #F7F3E7;
      }
      & .project-category__tag::before {
        background: url(../img/check_white.svg) no-repeat;
        background-size: 100%;
      }
  }
}

/* ========================================================
                      * Section Card (商品カード) *
========================================================= */
.lp_contents {
  & .section-card {
    position: relative;
    max-width: calc(350 * var(--rem));
    margin: 0 auto;
    padding: calc(40 * var(--rem)) calc(35 * var(--rem)) calc(70 * var(--rem));
    background: url(../img/bg_card_paper.png) center / cover no-repeat;
    border-radius: calc(5 * var(--rem));

    & .section-card__visual {
      position: relative;
      width: 100%;
      aspect-ratio: 281 / 311;
      margin: 0 auto calc(15 * var(--rem));
    }

    & .section-card__archbg,
    & .section-card__archborder {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    & .section-card__archborder {
      pointer-events: none;
      height: stretch;
      padding: 0 calc(15 * var(--rem));
      margin-top: calc(0 * var(--rem));
    }

    & .section-card__photo-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: calc(8 * var(--rem));
      padding: calc(20 * var(--rem));
    }

    & .section-card__photo {
      max-width: 100%;
      max-height: 78%;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    & .section-card__star {
      position: absolute;
      width: calc(25 * var(--rem));
      height: calc(24 * var(--rem));
    }

    & .section-card__star--tl { top: calc(32 * var(--rem)); left: calc(22 * var(--rem)); }
    & .section-card__star--tr { top: calc(32 * var(--rem)); right: calc(22 * var(--rem)); transform: scaleX(-1); }
    & .section-card__star--bl { bottom: calc(32 * var(--rem)); left: calc(22 * var(--rem)); transform: scaleY(-1); }
    & .section-card__star--br { bottom: calc(32 * var(--rem)); right: calc(22 * var(--rem)); transform: scale(-1, -1); }

    & .section-card__brand {
      margin-bottom: calc(8 * var(--rem));
      font-family: var(--lp-font-en);
      font-weight: 300;
      font-size: calc(25 * var(--rem));
      letter-spacing: .05em;
      text-align: center;
      line-height: 1;
    }

    & .section-card__name {
      margin-bottom: calc(12 * var(--rem));
      font-size: calc(14 * var(--rem));
      font-weight: 600;
      text-align: center;
    }

    & .section-card__buy {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: calc(15 * var(--rem));
    }

    & .section-card__price {
      font-family: var(--lp-font-en);
      font-weight: 300;
      font-size: calc(25 * var(--rem));
    }

    & .section-card__price span {
      margin-left: calc(2 * var(--rem));
      font-family: var(--lp-font-en);
      font-size: calc(14 * var(--rem));
    }

    & .section-card__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(120 * var(--rem));
      height: calc(35 * var(--rem));
      border-radius: 999px;
      background: linear-gradient(105deg, #bf891c 6%, #d3a546 96%);
      font-family: var(--lp-font-en);
      font-weight: 300;
      font-size: calc(14 * var(--rem));
      color: var(--color-beige);
      white-space: nowrap;
    }

    & .section-card__comment {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: calc(62 * var(--rem));
      padding: calc(8 * var(--rem)) calc(20 * var(--rem));
      margin-bottom: calc(12 * var(--rem));
      background: url(../img/comment_ribbon.svg) center / 100% 100% no-repeat;
      font-size: calc(14 * var(--rem));
      line-height: 1.5;
      text-align: center;
      color: var(--color-beige);
    }

    & .section-card__points {
      display: flex;
      justify-content: center;
      gap: calc(10 * var(--rem));
    }

    & .section-card__point {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(86 * var(--rem));
      height: calc(50 * var(--rem));
      padding: calc(4 * var(--rem));
      background: url(../img/point_tag_shape.svg) center / 100% 100% no-repeat;
      font-size: calc(12 * var(--rem));
      font-weight: 600;
      line-height: 1.2;
      text-align: center;
    }

    & .section-card__note {
      font-family: var(--lp-font-ja-sans);
      margin-top: calc(5 * var(--rem));
      font-size: calc(10 * var(--rem));
      text-align: center;
    }
  }
}

.lp_contents {
    & .section-card.__2 {
      padding: calc(40 * var(--rem)) calc(35 * var(--rem)) calc(40 * var(--rem));
    }
  }

.lp_contents {
  & .section-card.__3 {
    padding: calc(40 * var(--rem)) calc(35 * var(--rem)) calc(40 * var(--rem));
  }
}

/* ========================================================
                      * More Link *
========================================================= */
.lp_contents {

    & .project-morelink__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(320 * var(--rem));
      height: calc(62 * var(--rem));
      border-radius: 999px;
      background: #2D0800;
      font-family: var(--lp-font-ja);
      font-weight: 500;
      font-size: calc(14 * var(--rem));
      margin: calc(40 * var(--rem)) auto 0;
      color: var(--color-beige);
    }
}

/* ========================================================
                      * Brand Story *
========================================================= */
.lp_contents {
  & .project-brandstory {
    padding: calc(60 * var(--rem)) calc(0 * var(--rem));
    background: #F3ECD7;

    & .project-brandstory__link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(4 * var(--rem));
      margin-bottom: calc(25 * var(--rem));
    }

    & .project-brandstory__link-jp {
      font-size: calc(18 * var(--rem));
      font-weight: bold;
    }

    & .project-brandstory__link-en {
      font-family: var(--lp-font-en);
      font-weight: 300;
      font-size: calc(26 * var(--rem));
      letter-spacing: .05em;
    }

    & .project-brandstory__cat {
      padding: calc(10 * var(--rem));
      font-family: var(--lp-font-en);
      font-weight: 300;
      font-size: calc(14 * var(--rem));
      text-align: center;
      letter-spacing: .1em;
    }

    & .project-brandstory__photo {
      width: 100%;
      aspect-ratio: 350 / 260;
      object-fit: cover;
    }

    & .project-brandstory__body {
      padding: calc(20 * var(--rem));
    }

    & .project-brandstory__brand {
      margin-bottom: calc(4 * var(--rem));
      font-size: calc(14 * var(--rem));
      font-weight: bold;
      text-align: center;
    }

    & .project-brandstory__ttl {
      margin-bottom: calc(30 * var(--rem));
      font-size: calc(18 * var(--rem));
      font-weight: bold;
      text-align: center;
    }

    & .project-brandstory__ttl span {
      display: block;
    }

    & .project-brandstory__ttl span:nth-last-of-type(1) {
      margin-top: calc(15 * var(--rem));
    }

    & .project-brandstory__text {
      font-size: calc(13 * var(--rem));
      line-height: 1.8;
    }

    & .project-brandstory_ttl {
      text-align: center;
      margin-bottom: calc(30 * var(--rem));
      font-family: var(--lp-font-ja-sans);
    }

    & .project-brandstory_ttl_1 {
      margin-bottom: calc(15 * var(--rem));
      font-size: calc(12 * var(--rem));
      line-height: 1.8;
    }

    & .project-brandstory_ttl_1 .bold {
      font-weight: 600;
    }

    & .project-brandstory_ttl_1 .lrg {
      font-size: calc(14 * var(--rem));
    }

    & .project-brandstory_ttl_2 {
      font-size: calc(10 * var(--rem));
      line-height: 1.5;
    }


    & .loop_wrap:hover li {
      animation-play-state: paused;
    }

    &  .scroll-infinity__wrap {
        display: flex;
        overflow: hidden;
      }

      & .scroll-infinity__list {
        display: flex;
        list-style: none;
        padding: 0
      }

      & .scroll-infinity__list--left {
        animation: infinity-scroll-left 80s infinite linear 0.5s both;
      }

      & .scroll-infinity__item {
        width: calc(320 * var(--rem));
        margin: calc(5 * var(--rem));
      }

      & .scroll-infinity__item>img {
        width: 100%;
      }

  }
}

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
  }


/* ========================================================
                      * Giveaway (ブランドカード配布告知) *
========================================================= */
.lp_contents {
  & .project-giveaway {
    padding: calc(40 * var(--rem)) calc(20 * var(--rem));
    text-align: center;
    background: #ece3d3;

    & .project-giveaway__text {
      margin-bottom: calc(15 * var(--rem));
      font-size: calc(15 * var(--rem));
      font-weight: bold;
      line-height: 1.6;
    }

    & .project-giveaway__note {
      margin-bottom: calc(25 * var(--rem));
      font-size: calc(11 * var(--rem));
      line-height: 1.6;
      color: #6b5a4a;
    }

    & .project-giveaway__visual {
      max-width: calc(350 * var(--rem));
      margin: 0 auto;
      border-radius: calc(5 * var(--rem));
    }
  }
}

/* ========================================================
                      * Campaign *
========================================================= */
.lp_contents {
  & .project-campaign {
    padding: calc(60 * var(--rem)) calc(20 * var(--rem)) calc(60 * var(--rem));
    text-align: center;
    background: #F7F3E7;

        & .project-campaign__en {
          margin-bottom: calc(30 * var(--rem));
          font-family: var(--lp-font-en);
          font-weight: 300;
          font-size: calc(32 * var(--rem));
          letter-spacing: .1em;
          color: #cd952d;
        }

        & .project-campaign__lead {
          margin-bottom: calc(30 * var(--rem));
          font-weight: 600;
          line-height: 1.8;
          font-family: var(--lp-font-ja);
          font-size: calc(16 * var(--rem));
          letter-spacing: .1em;
        }

        & .project-campaign_area {
          margin: auto;
          width: calc(350 * var(--rem));
          height: calc(540 * var(--rem));
          background: url(../img/campaign_bg.png) no-repeat;
          background-size: contain;
          padding: calc(55 * var(--rem)) calc(30 * var(--rem));
          font-family: var(--lp-font-ja-sans);
        }

        & .project-campaign_area_ttl {
          margin-bottom: calc(12 * var(--rem));
          font-size: calc(15 * var(--rem));
          font-weight: bold;
        }

        & .project-campaign_area_text {
          margin-bottom: calc(15 * var(--rem));
          font-size: calc(13 * var(--rem));
          line-height: 1.8;
        }

        & .project-campaign_area_text .gold {
          display: inline-block;
          font-size: calc(18 * var(--rem));
          color: #cd9121;
          margin-top: calc(-6 * var(--rem));
        }

        & .project-campaign_area_ggm_wrap {
          margin-bottom: calc(5 * var(--rem));
          display: flex;
          justify-content: center;
          align-items: center;
          gap: calc(5 * var(--rem));
        }

        & .project-campaign_area_ggm_wrap.__2 {
          margin-bottom: calc(5 * var(--rem));
          margin-top: calc(40 * var(--rem));
        }

        & .project-campaign_area_ggm_img {
          width: calc(60 * var(--rem));
        }

        & .project-campaign_area_ggm_text {
          font-size: calc(11 * var(--rem));
          text-align: left;
          line-height: 1.5;
        }

        & .bold {
          font-weight: 600;
        }

        & .project-campaign_area_app_wrap {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: calc(30 * var(--rem));
        }

        & .project-campaign_area_app_wrap.__2 {
          margin-top: calc(40 * var(--rem));
        }

        & .project-campaign_area_app_link {
          position: relative;
          font-size: calc(11 * var(--rem));
          font-weight: bold;
          z-index: 0;
          letter-spacing: 0;
        }

        & .project-campaign_area_app_link::before {
          position: absolute;
          content: "";
          background: url(../img/app_arrow.svg) no-repeat;
          background-size: 100%;
          width: calc(8 * var(--rem));
          height: calc(10 * var(--rem));
          top: calc(7 * var(--rem));
          right: calc(-12 * var(--rem));
          z-index: 1;
        }

        & .border {
          display: block;
          border-top: #CCBEB1 calc(1 * var(--rem)) solid;
          margin: calc(25 * var(--rem)) auto;
          width: 100%;
        }

        & .project-campaign_area_date_img {
          width: calc(164 * var(--rem));
          margin: calc(0 * var(--rem)) auto calc(10 * var(--rem));
        }

        & .project-campaign_area_btn {
          position: relative;
          display: flex;
          justify-items: center;
          align-items: center;
          width: calc(215 * var(--rem));
          height: calc(30 * var(--rem));
          font-size: calc(12 * var(--rem));
          font-weight: bold;
          margin: calc(0 * var(--rem)) auto calc(0 * var(--rem));
          /* border: calc(1 * var(--rem)) solid var(--base-font-color); */
          /* border-radius: calc(30 * var(--rem)); */
          padding-left: calc(16 * var(--rem));
          z-index: 0;
        }

        & .project-campaign_area_btn::before {
          position: absolute;
          content: "";
          background: url(../img/app_arrow.svg) no-repeat;
          background-size: 100%;
          width: calc(8 * var(--rem));
          height: calc(10 * var(--rem));
          top: calc(11 * var(--rem));
          right: calc(5 * var(--rem));
          z-index: 1;
        }

        & .project-campaign_area_note {
          text-align: center;
          font-size: calc(10 * var(--rem));
          margin: calc(0 * var(--rem)) auto 0;
          letter-spacing: 0;
        }

        & .project-campaign_area_allbtn {
          position: relative;
          display: flex;
          justify-items: center;
          text-align: center;
          width: calc(250 * var(--rem));
          height: calc(40 * var(--rem));
          font-size: calc(15 * var(--rem));
          font-weight: bold;
          margin: calc(15 * var(--rem)) auto 0;
          border-radius: calc(50 * var(--rem));
          background: var(--base-font-color);
          color: #F7F3E7;
          padding: calc(10 * var(--rem)) 0 0 calc(65 * var(--rem));
          z-index: 0;
        }

        & .project-campaign_area_allbtn::before {
          position: absolute;
          content: "";
          background: url(../img/allbtn_arrow.png) no-repeat;
          background-size: 100%;
          width: calc(25 * var(--rem));
          height: calc(10 * var(--rem));
          top: calc(15 * var(--rem));
          right: calc(30 * var(--rem));
          z-index: 1;
        }


    
  }
}

.page-inner .simple-bar_wrap *{
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}

.page-inner .simple-bar_wrap{
  width: calc(390 * var(--rem));
  margin: auto;
  overflow-x: scroll;
  /*スクロールバー非表示（IE・Edge）*/
  -ms-overflow-style: none;
  /*スクロールバー非表示（Firefox）*/
  scrollbar-width: none;
}

.page-inner .simple-bar_wrap *::-webkit-scrollbar,
.page-inner .simple-bar_wrap::-webkit-scrollbar{
  display:none;
}

.page-inner .simple-bar_wrap ul{
  margin-bottom: calc(15 * var(--rem));
  display: flex;
  width: fit-content;
  align-items: stretch;
  padding: 0 calc(15 * var(--rem));
}

.page-inner .simple-bar_wrap ul li {
  position: relative;
  width: calc(320 * var(--rem));
  background: #fff;
  margin-right: calc(20 * var(--rem));
  z-index: 0;
}

.page-inner .simple-bar_wrap ul li:nth-last-of-type(1):before {
  display: none;
}

.page-inner .simplebar-track.simplebar-horizontal {
  height: calc(3 * var(--rem));
  width: calc(250 * var(--rem));
  background: #cecece;
  margin: auto;
}

.page-inner .simplebar-track.simplebar-horizontal .simplebar-scrollbar{
  top: 0;
  height: calc(3 * var(--rem));
  background-color: var(--base-font-color);
}

.page-inner .simplebar-scrollbar:before{
  background: var(--base-font-color);
}


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

  @supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
    .lp_contents {
          & .project-campaign {
              & .project-campaign_area_app_link::before {
                  position: absolute;
                  top: calc(3 * var(--rem));
                  right: calc(-14 * var(--rem));
              }
          }
      }

      .lp_contents {
        & .project-campaign {
            & .project-campaign_area_allbtn {
              padding: calc(15 * var(--rem)) 0 0 calc(65 * var(--rem));
            }
        }
    }

      .lp_contents {
        & .project-campaign {
            & .project-campaign_area_ggm_wrap {
              margin-bottom: calc(8 * var(--rem));  
            }
        }
    }
  }

}

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

  @supports (not (-webkit-hyphens: none)) and (not (-moz-appearance: none)) {
    .lp_contents {
          & .project-campaign {
              & .project-campaign_area_app_link::before {
                  position: absolute;
                  top: calc(6 * var(--rem));
                  right: calc(-14 * var(--rem));
              }
          }
      }

      .lp_contents {
        & .project-campaign {
            & .project-campaign_area_allbtn {
              padding: calc(10 * var(--rem)) 0 0 calc(65 * var(--rem));
            }
        }
    }

      .lp_contents {
        & .project-campaign {
            & .project-campaign_area_ggm_wrap {
              margin-bottom: calc(8 * var(--rem));  
            }
        }
    }
  }

}

/* ========================================================
                      * Section *
========================================================= */