@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: 1600; /* PC幅（前回同シリーズLPの本番実装値を確認の上で流用） */
  --sw: 390; /* SP幅（Figma "LP_SP_full" アートボード幅） */
  --artboard-pw: 500; /* PCアートボード幅（前回同シリーズLPの本番実装値を確認の上で流用） */
  --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));
  }
}

/* 1600px（--pw）以上は実寸で頭打ちにする（coding-guidelines.md 1-3）。
   無いと超ワイドモニタで中央カラムが際限なく拡大されてしまう。 */
@media (min-width: 1600px) {
  :root {
    --variable: 1px;
  }
}


/* ========================================================
                      * ANIMATION *
===========================================================
/* ------------------------上から下表示させる------------------------ */
.lp_contents .js-fade {
  opacity: 0;
  -webkit-animation: opa 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.4s 1 forwards;
          animation: opa 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.4s 1 forwards;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
          mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
          mask-size: 100% max(300%, 100vh);
  -webkit-mask-repeat: none;
          mask-repeat: none;
  -webkit-mask-position: center 100%;
          mask-position: center 100%;
  transform: translateZ(0);
  transition: -webkit-mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear, -webkit-mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear, -webkit-mask-position 1.4s linear;
}

.lp_contents .js-fade.active {
  animation: opa1 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  -webkit-mask-position: center -100px;
          mask-position: center -100px;
  opacity: 1;
}

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

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

  /* 案件カラー（ブランド/アイテムごと。coding-guidelines 2-2 の役割命名に準拠） */
  --color-lotion: #325a54;
  --color-handcream: #af7e66;
  --color-hairoil: #6888a8;

  --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;
    font-size: .75rem;
    color: #999;
  }

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

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

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

/* ========================================================
                      * Accordion *
===========================================================
  script.js の accordion() と対。デフォルトは閉じた状態で、本文の冒頭
  （既定プレビュー高さ分）を見せつつ下端をグラデーションでフェードアウト
  させ、「view more +」で全文を展開する（Fragrance / Point / Concept で使用）。
  プレビュー高さはセクションごとに --accordion-preview で上書きする。
========================================================= */
.lp_contents {
  & .accordion__body {
    --accordion-preview: 560;
    max-height: calc(var(--accordion-preview) * var(--rem));
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    transition: max-height .4s var(--transition-timing), mask-image .4s var(--transition-timing), -webkit-mask-image .4s var(--transition-timing);
  }

  & .js-accordion--container {
    text-align: center;
  }

  & .js-accordion--trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--rem));
    margin-top: calc(20 * var(--rem));
    padding-bottom: calc(3 * var(--rem));
    border-bottom: 1px solid #A9AAAA;
    font-family: var(--lp-font-en);
    font-size: calc(10 * var(--rem));
    letter-spacing: .1em;
    line-height: 1.5;
    color: #a9aaaa;

    .label-close {
      display: none;
    }

    .arrow {
      position: relative;
      width: calc(6 * var(--rem));
      height: calc(6 * var(--rem));

      &::before,
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        width: 100%;
        height: 1px;
        background: currentColor;
      }

      &::before {
        transform: rotate(90deg);
        transition: opacity .3s var(--transition-timing);
      }
    }
  }

  & .js-accordion--container.is-open .js-accordion--trigger {
    .label-close {
      display: block;
    }

    .label-open {
      display: none;
    }

    .arrow::before {
      opacity: 0;
    }
  }
}

/* ========================================================
                      * Modal *
===========================================================
  script.js の modal() と対。
  .js-modal--container には .modal を併記して使う
  （.js-* にスタイルを当てない規約のため）。不要ならこのブロックを削除。

  z-index はサイト共通ヘッダー #header(999) より上に出すため
  --z-modal-overlay / --z-modal を使う（coding-guidelines.md 2-5）。
  ※祖先要素に transform / filter / opacity(<1) / will-change / contain が
    付くと新しいスタッキングコンテキストが作られ、いくら z-index を上げても
    #header より下に潜る。モーダルは .lp_contents 直下に置き、祖先に
    これらのプロパティを付けないこと（position: fixed も同様に壊れる）。

  サイズ・色・余白は案件のデザインに合わせて書き換える
  （var(--rem) は SP特化型用。それ以外の案件は単位を合わせる）。
========================================================= */
.lp_contents {
  & .modal {
    position: fixed;
    z-index: var(--z-modal-overlay);
    inset: 0;
    display: none;
    place-items: center;
    overflow-y: auto;
    padding: calc(40 * var(--rem, 1px));
    background: rgb(0 0 0 / .7);

    &.is-open {
      display: grid;
    }
  }

  & .modal__body {
    position: relative;
    z-index: var(--z-modal);
    width: 100%;
    max-width: calc(670 * var(--rem, 1px));
    background: #fff;
  }
}

/* ========================================================
                      * Layout（SP特化型：PC 3カラムグリッド） *
===========================================================
  PC(769px以上)のみ、中央にSPレイアウトを再現した .l-grid__main を配置し、
  左右に .l-grid__side（ロゴ／追従アンカーナビ）を並べる。
  値は前回同シリーズLP（f-organics.jp Page/LP/FO_collaboration260415）の
  本番実装を確認の上で流用（--pw / --artboard-pw）。
========================================================= */
.l-grid__main {
  background: #fff;
}

@media (min-width: 769px) {
  .l-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
  }

  .l-grid__main {
    grid-column: 2;
    width: calc(var(--artboard-sw) * var(--rem));
  }

  .l-grid__side {
    display: grid;
    place-items: center;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: var(--z-sticky);
    /* 前回同シリーズLP本番実装と同様、左右カラムにブランドのストライプ柄を敷く
       （色はユーザー提供の参考画像から採取） */
  }

  .l-grid__side--left {
    grid-column: 1;
  }

  .l-grid__side--right {
    grid-column: 3;
  }
}

.l-grid__brand {
  text-align: center;
}

.l-grid__brand-logo {
  width: calc(280 * var(--rem-pc));
  height: auto;
  margin: 0 auto;
  background: transparent;
}

.l-grid__brand-sub {
  margin-top: calc(30 * var(--rem-pc));
  font-family: var(--lp-font-en);
  color: #153339;
  font-size: calc(18 * var(--rem-pc));
  letter-spacing: .05em;
}

.l-grid__nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--rem-pc));
}

.l-grid__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--rem-pc));
  font-family: var(--lp-font-en);
  font-size: calc(24 * var(--rem-pc));
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #212121;
  white-space: nowrap;
}

.l-grid__nav .nav-arrow {
  display: block;
  width: calc(8 * var(--rem-pc));
  height: calc(4 * var(--rem-pc));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4' viewBox='0 0 8 4' fill='none'%3E%3Cpath d='M0 0L4 4L8 0' stroke='%233F3A3A'/%3E%3C/svg%3E") no-repeat center / contain;
}

.l-grid__nav a.is-current {
  color: var(--color-accent);
  font-weight: 600;
}

/* ========================================================
                      * 追従ナビ（SP画面下部固定） *
===========================================================
  SPのみ。LINE UP / CAMPAIGN の2項目を画面最下部に固定表示する。
========================================================= */
.l-fixed-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  background: #f8f8f8;
  box-shadow: 0 calc(-2 * var(--rem)) calc(8 * var(--rem)) rgb(0 0 0 / .08);

  ul {
    display: flex;
  }

  li {
    flex: 1;
    text-align: center;

    &:not(:last-child) {
      border-right: 1px solid #ddd;
    }
  }

  a {
    display: block;
    padding: calc(10 * var(--rem)) 0;
    font-family: var(--lp-font-en);
    font-size: calc(13 * var(--rem));
    letter-spacing: .08em;
  }
}

/* ========================================================
                      * Loading *
===========================================================
  前回同シリーズLP（f-organics.jp Page/LP/FO_collaboration260415）の
  本番実装と同じ仕組み：#loading を全画面表示→読み込み完了で上へ
  スライドして消し、裏の.lp_contentsをふわっと表示する。
  ビジュアルはFigma "firstview_SP"フレーム（ストライプ背景+ロゴ文字を
  1枚に書き出し）をそのまま使用。
========================================================= */
.lp_contents {
  opacity: 0;
  visibility: hidden;
  background-image: url(../img/bg.jpg);
  background-size: calc(390 * var(--rem));
}

.lp_contents.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease;
}

#loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1010; /* --z-modalと同値。#loadingは.p-feature(変数定義スコープ)の外にあるため直書き */
  background-image: url(../img/loading_bg.jpg);
  background-size: calc(420 * var(--rem));
  transition: transform 1.2s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}

#loading .l-grid__brand-logo{
  width: calc(220 * var(--rem));
}

@media (min-width: 769px) {
  #loading .l-grid__brand-logo{
    width: calc(300 * var(--rem));
  }
}

#loading.is-loaded {
  transform: translateY(-100%);
}

body.is-loading {
  overflow: hidden;
}

/* ========================================================
                      * Mainvisual *
========================================================= */
.project-mv {
  overflow: clip;
}

.project-mv__visual img {
  display: block;
}

.project-mv__gift img {
  display: block;
}

.project-mv__message {
  padding-block: calc(30 * var(--rem)) calc(40 * var(--rem));
  padding-inline: calc(15 * var(--rem)) calc(40 * var(--rem));
}

.project-mv__message img {
  max-width: calc(345 * var(--rem));
  margin: 0 auto;
}

.project-mv__texture img {
  display: block;
}

/* ========================================================
                      * Fragrance *
========================================================= */
.project-fragrance {
  position: relative;
  padding: calc(75 * var(--rem)) 0 0;
}

.project-fragrance__heading {
  font-size: calc(19 * var(--rem));
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .05em;
  text-align: center;
  margin-bottom: calc(8 * var(--rem));
}

.project-fragrance__catch {
  position: relative;
  z-index: 2;
  text-align: left;
  font-size: calc(14 * var(--rem));
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.1em;
  margin-bottom: calc(5 * var(--rem));
  white-space: nowrap;
}

.project-fragrance__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: calc(200 * var(--rem));
  margin-bottom: calc(60 * var(--rem));
  padding-top: calc(28 * var(--rem));
  padding-left: calc(20 * var(--rem));
}

.project-fragrance__desc {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: calc(13 * var(--rem));
  line-height: 2;
}

.project-fragrance__photo {
  position: absolute;
  right: 0;
  top: calc(158 * var(--rem));
  flex-shrink: 0;
  width: calc(170 * var(--rem));
  aspect-ratio: 170 / 300;
  overflow: hidden;
}

.project-fragrance__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-fragrance__pyramid-wrap {
  text-align: center;
}

.project-fragrance__label {
  font-family: var(--lp-font-en);
  font-size: calc(25 * var(--rem));
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: calc(20 * var(--rem));
}

.project-fragrance__pyramid {
  width: calc(275 * var(--rem));
  margin: 0 auto calc(27 * var(--rem));
}

.project-fragrance__notes {
  position: relative;
  background: #eff2ef;
  border-radius: calc(8 * var(--rem));
  width: calc(330 * var(--rem));
  margin: auto;
  padding: calc(17 * var(--rem)) calc(20 * var(--rem));
  text-align: center;
}

.project-fragrance__notes:before{
  content: '';
  position: absolute;
  top: calc(-10 * var(--rem));
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  background: #EFF2EF;
  height: calc(tan(60deg) * calc(13 * var(--rem)) / 2);
  width: calc(16 * var(--rem));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.project-fragrance__note {
  &:not(:last-child) {
    margin-bottom: calc(16 * var(--rem));
  }

  dt {
    font-family: var(--lp-font-en);
    color: #2f1804;
    font-size: calc(16 * var(--rem));
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: calc(8 * var(--rem));
  }

  dd {
    font-size: calc(12 * var(--rem));
    line-height: 1.75;
    letter-spacing: 0.1em;
  }
}

/* ========================================================
                      * LineUp *
========================================================= */
.project-lineup {
  overflow: hidden;
  padding-top: calc(70 * var(--rem));
}

.project-lineup__heading {
  position: relative;
  text-align: center;
  font-family: var(--lp-font-en);
  font-size: calc(25 * var(--rem));
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: calc(36 * var(--rem));
}

.project-lineup__heading:after{
  content: '';
  position: absolute;
  top: calc(40 * var(--rem));
  left: 0;
  right: 0;
  display: block;
  width: 1px;
  height: calc(35 * var(--rem));
  margin: auto;
  background-image : linear-gradient(to bottom, #000 2px, transparent 2px);
  background-size: 5px 5px;
  background-repeat: repeat-y;
  background-position: right bottom;
  z-index: 2;
}

.project-lineup__slider {
  padding: 0 calc(40 * var(--rem));
}

.project-lineup__slide {
  width: calc(110 * var(--rem));
  border-radius: calc(8 * var(--rem));
  border: 1px solid #ddd;
  overflow: hidden;
}

.project-lineup__slide a {
  display: block;
}

.project-lineup__slide img {
  width: 100%;
  height: auto;
}

.project-lineup__slider .swiper-button-prev,
.project-lineup__slider .swiper-button-next {
  width: calc(15 * var(--rem));
  height: calc(30 * var(--rem));
  margin-top: calc(-15 * var(--rem));
  color: var(--color-accent);
}

.project-lineup__slider .swiper-button-prev::after,
.project-lineup__slider .swiper-button-next::after {
  font-size: calc(18 * var(--rem));
}

/* ========================================================
                      * PickUpItem *
========================================================= */
.project-pickup {
  padding: calc(75 * var(--rem)) 0 calc(45 * var(--rem));
}

.project-pickup__heading {
  position: relative;
  text-align: center;
  font-family: var(--lp-font-en);
  font-size: calc(25 * var(--rem));
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: calc(55 * var(--rem));
}

.project-pickup__heading:after{
  content: '';
  position: absolute;
  top: calc(40 * var(--rem));
  left: 0;
  right: 0;
  display: block;
  width: 1px;
  height: calc(35 * var(--rem));
  margin: auto;
  background-image : linear-gradient(to bottom, #000 2px, transparent 2px);
  background-size: 5px 5px;
  background-repeat: repeat-y;
  background-position: right bottom;
  z-index: 2;
}

.project-pickup__item {
  padding: 0 calc(15 * var(--rem)) calc(15 * var(--rem));
  text-align: center;
}

.project-pickup__item:not(:last-child){
  margin-bottom: calc(90 * var(--rem));
}

.project-pickup__name-heading {
  font-weight: 400;
  font-size: calc(27 * var(--rem));
  letter-spacing: .2em;
  line-height: 1.2;
  margin-bottom: calc(20 * var(--rem));

  .en {
    display: block;
    font-family: var(--lp-font-en);
    color: var(--item-color);
    font-size: calc(13 * var(--rem));
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: calc(10 * var(--rem));
  }
}

.project-pickup__copy {
  font-size: calc(16 * var(--rem));
  line-height: 1.75;
  letter-spacing: 0.1em;
  margin-bottom: calc(20 * var(--rem));

  sup {
    font-size: .6em;
  }
}

.project-pickup__gallery {
  width: calc(360 * var(--rem));
  aspect-ratio: 1 / 1;
  margin: 0 auto calc(15 * var(--rem));
  border: calc(4 * var(--rem)) solid var(--item-color);
  border-radius: calc(20 * var(--rem));
  overflow: hidden;
}

.project-pickup__gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-pickup__gallery .swiper-slide.is-contain {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--item-color-soft);

  img {
    width: auto;
    height: 80%;
    object-fit: contain;
  }
}

.project-pickup__gallery .swiper-pagination-bullet-active {
  background: var(--item-color);
}

.project-pickup__thumbs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--rem));
  margin: 0 auto calc(30 * var(--rem));
}

.project-pickup__thumbs-row .swiper-button-prev,
.project-pickup__thumbs-row .swiper-button-next {
  position: static;
  width: calc(15 * var(--rem));
  height: calc(30 * var(--rem));
  margin: 0;
  color: var(--item-color);
}

.project-pickup__thumbs-row .swiper-button-prev::after,
.project-pickup__thumbs-row .swiper-button-next::after {
  font-size: calc(18 * var(--rem));
}

.project-pickup__thumbs {
  width: calc(300 * var(--rem));
}

.project-pickup__thumbs .swiper-slide {
  width: calc(72 * var(--rem));
  height: calc(72 * var(--rem));
  border-radius: calc(10 * var(--rem));
  overflow: hidden;
  opacity: .6;
  cursor: pointer;
}

.project-pickup__thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-pickup__thumbs .swiper-slide.is-contain {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--item-color-soft);

  img {
    width: auto;
    height: 80%;
    object-fit: contain;
  }
}

.project-pickup__thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid var(--item-color);
}

.project-pickup__info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--rem));
  margin-bottom: calc(15 * var(--rem));
}

.project-pickup__info-text {
  flex: 1;
  min-width: 0;
}

.project-pickup__badge {
  flex-shrink: 0;
  width: calc(80 * var(--rem));
  height: calc(80 * var(--rem));
  background: transparent;
}

.project-pickup__tag {
  display: block;
  width: fit-content;
  margin: 0 0 calc(12 * var(--rem));
  border: 1px solid var(--item-color);
  background: #fff;
  padding: calc(1 * var(--rem)) calc(10 * var(--rem)) 0;
  font-size: calc(12 * var(--rem));
  letter-spacing: 0.1em;
  color: var(--item-color);
}

.project-pickup__product-name {
  font-size: calc(14 * var(--rem));
  font-weight: 700;
  line-height: 1.75;
  text-align: left;
  margin-bottom: calc(4 * var(--rem));
}

.project-pickup__price {
  font-family: var(--lp-font-roboto);
  font-size: calc(16 * var(--rem));
  text-align: left;
}

.project-pickup__cta {
  position: relative;
  display: block;
  width: calc(320 * var(--rem));
  margin: 0 auto calc(20 * var(--rem));
  padding: calc(10 * var(--rem)) 0;
  background: var(--item-color);
  color: #fff;
  border-radius: 999px;
  font-size: calc(14 * var(--rem));
  font-weight: 600;
  box-shadow: 0 calc(3 * var(--rem)) calc(3 * var(--rem)) rgb(0 0 0 / .16);
}

.project-pickup__cta:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(15 * (var(--rem)));
  width: calc(6 * (var(--rem)));
  height: calc(6 * (var(--rem)));
  margin: auto;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  rotate: -45deg;
  aspect-ratio: 1/1;
}

.project-pickup__note {
  font-size: calc(10 * var(--rem));
  color: #888;
  line-height: 1.5;
}

/* ========================================================
                      * Point *
===========================================================
  見出し(POINT)と各項目の番号・小見出しは常時表示・実テキスト。
  Venn図・認証バッジのみ書き出し画像を使用。1・2はそれぞれ独立した
  アコーディオンで、閉状態は本文を完全に隠す（プレビュー無し）。
========================================================= */
.project-point {
  position: relative;
  padding: calc(55 * var(--rem)) calc(20 * var(--rem)) calc(60 * var(--rem));
  text-align: center;
  background-color: #f8f8f8;
  background-image: url(../img/img_point_bg.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: calc(390 * var(--rem)) calc(1210 * var(--rem));
}

.project-point__heading {
  font-family: var(--lp-font-en);
  font-size: calc(25 * var(--rem));
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: calc(20 * var(--rem));
}

.project-point__item {
  &:not(:last-child) {
    margin-bottom: calc(35 * var(--rem));
  }
}

.project-point__number {
  display: grid;
  place-items: center;
  width: calc(45 * var(--rem));
  height: calc(45 * var(--rem));
  margin: 0 auto calc(20 * var(--rem));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(10 * var(--rem)) rgb(0 0 0 / .06);
  font-family: var(--lp-font-en);
  font-size: calc(21 * var(--rem));
}

.project-point__subheading {
  font-size: calc(19 * var(--rem));
  letter-spacing: .05em;
  line-height: 1.2;
}

.project-point .accordion__body {
  --accordion-preview: 0;
  mask-image: none;
  -webkit-mask-image: none;
}

.project-point img {
  display: block;
  height: auto;
  margin: calc(24 * var(--rem)) auto;
  mix-blend-mode: multiply;
}

.project-point__venn {
  width: calc(270 * var(--rem));
  background: transparent;
}

.project-point__cert {
  width: calc(161 * var(--rem));
  background: transparent;
}

.project-point__desc {
  font-size: calc(13 * var(--rem));
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: left;

  sup {
    font-size: .7em;
  }
}

.project-point__note {
  margin-top: calc(8 * var(--rem));
  font-size: calc(10 * var(--rem));
  color: #888;
  line-height: 1.5;
  text-align: left;
}


/* ========================================================
                      * Concept *
===========================================================
  見出し(CONCEPT)のみ常時表示・実テキスト。写真・本文コピーは
  アコーディオン内で書き出し画像を使用。キャンペーン情報（実データ）
  は常時表示の実テキストで実装する。
========================================================= */
.project-concept {
  padding-top: calc(80 * var(--rem));
}

.project-concept__heading {
  width: fit-content;
  text-align: center;
  font-family: var(--lp-font-en);
  font-size: calc(19 * var(--rem));
  font-weight: bold;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 auto calc(36 * var(--rem));
  padding-bottom: calc(6 * var(--rem));
  border-bottom: 2px solid;
}

.project-concept img {
  display: block;
}

.project-concept__body-text {
  padding: calc(40 * var(--rem)) calc(20 * var(--rem)) 0;
  text-align: center;

  p:not(.project-concept__heading) {
    font-size: calc(14 * var(--rem));
    line-height: 2;

    &:not(:last-child) {
      margin-bottom: calc(20 * var(--rem));
    }
  }
}

.project-concept .accordion__body {
  --accordion-preview: 670;
  mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

.project-concept__campaign {
  width: calc(340 * var(--rem));
  margin: calc(75 * var(--rem)) auto calc(80 * var(--rem));
  background: #557257;
  color: #fff;
  padding: calc(38 * var(--rem)) calc(20 * var(--rem));
  text-align: center;
}

.project-concept__campaign-heading-sub {
  font-family: var(--lp-font-en);
  letter-spacing: .15em;
  line-height: 1.2;
  font-size: calc(14 * var(--rem));
  margin-bottom: calc(15 * var(--rem));
}

.project-concept__campaign-heading {
  font-family: var(--lp-font-en);
  letter-spacing: .1em;
  font-size: calc(28 * var(--rem));
  margin-bottom: calc(20 * var(--rem));
}

.project-concept__campaign-period {
  font-family: var(--lp-font-en);
  font-size: calc(15 * var(--rem));
  margin-bottom: calc(25 * var(--rem));
  padding-bottom: calc(15 * var(--rem));
  border-bottom: 1px dotted rgb(255 255 255 / .5);
}

.project-concept__campaign-item {
  font-size: calc(14 * var(--rem));
  line-height: 1.8;

  &:not(:last-child) {
    margin-bottom: calc(25 * var(--rem));
    padding-bottom: calc(30 * var(--rem));
    border-bottom: 1px dotted rgb(255 255 255 / .5);
  }
}

.project-concept__campaign-label {
  font-family: var(--lp-font-en);
  font-size: calc(12 * var(--rem));
  letter-spacing: .1em;
  margin-bottom: calc(8 * var(--rem));
}

.project-concept__campaign-strong {
  font-size: calc(18 * var(--rem));
  font-weight: 700;
  line-height: 1.75;
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--rem));
}

.project-concept__campaign-strong.eng{
  font-family: var(--lp-font-roboto);
  font-size: calc(22 * var(--rem));
  margin-bottom: calc(6 * var(--rem));
}

.project-concept__campaign-sub {
  font-size: calc(14 * var(--rem));
  line-height: 1.75;
}

.project-concept__campaign-bold {
  font-size: calc(15 * var(--rem));
  font-weight: 700;
  line-height: 1.2;
  margin-top: calc(6 * var(--rem));
}

.project-concept__campaign-gift {
  width: calc(72 * var(--rem));
  height: auto;
  margin: calc(10 * var(--rem)) auto 0;
  background: transparent;
}

/* ========================================================
                      * AllProducts *
========================================================= */
.project-allproducts {
  padding: calc(60 * var(--rem)) calc(15 * var(--rem)) calc(55 * var(--rem));
  background: #f8f8f8;
  text-align: center;
}

.project-allproducts__heading {
  font-family: var(--lp-font-en);
  font-size: calc(25 * var(--rem));
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: calc(10 * var(--rem));
}

.project-allproducts__tag {
  display: inline-block;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: calc(2 * var(--rem)) calc(10 * var(--rem)) calc(1 * var(--rem));
  font-size: calc(12 * var(--rem));
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: calc(12 * var(--rem));
}

.project-allproducts__tag + .line{
  display: block;
  width: 1px;
  height: calc(35 * var(--rem));
  margin: 0 auto calc(20 * var(--rem));
  background-image: linear-gradient(to bottom, #000 2px, transparent 2px);
  background-size: 5px 5px;
  background-repeat: repeat-y;
  background-position: right bottom;
}

.project-allproducts__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(20 * var(--rem)) calc(15 * var(--rem));
}

.project-allproducts__link {
  display: block;
}

.project-allproducts__photo {
  aspect-ratio: 1 / 1;
  border-radius: calc(20 * var(--rem));
  overflow: hidden;
  margin-bottom: calc(10 * var(--rem));
}

.project-allproducts__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-allproducts__cat {
  display: inline-block;
  border: 1px solid #a9aaaa;
  padding: calc(2 * var(--rem)) calc(10 * var(--rem)) calc(1 * var(--rem));
  font-size: calc(11 * var(--rem));
  line-height: 1.2;
  margin-bottom: calc(8 * var(--rem));
}

.project-allproducts__name {
  font-size: calc(12 * var(--rem));
  line-height: 1.5;
}

/* ========================================================
                      * Profile *
========================================================= */
.project-profile {
  padding: calc(80 * var(--rem)) calc(40 * var(--rem)) ;
  text-align: center;
}

.project-interview {
  padding: 0 calc(35 * var(--rem)) calc(100 * var(--rem));
  text-align: center;
}

.project-interview .video_inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  overflow: hidden;
}

.project-interview .video_inner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.project-profile__vimeo {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0 auto calc(90 * var(--rem));
}

.project-profile__vimeo iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  pointer-events: none;
  border: none;
}

.project-profile__video-heading {
  position: relative;
  display: inline-block;
  margin-bottom: calc(30 * var(--rem));
  font-size: calc(15 * var(--rem));
  letter-spacing: .15em;
  white-space: nowrap;

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

  &::before {
    left: calc(-20 * var(--rem));
    rotate: 60deg;
  }

  &::after {
    right: calc(-20 * var(--rem));
  }
}

.project-profile__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 320 / 180;
  margin: 0 auto calc(60 * var(--rem));
  border-radius: calc(8 * var(--rem));
  overflow: hidden;
}

.project-profile__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-profile__about {
  position: relative;
  padding: calc(25 * var(--rem)) calc(20 * var(--rem)) calc(30 * var(--rem));
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(to right, var(--color-accent) 0 calc(8 * var(--rem)), transparent calc(8 * var(--rem)) calc(14 * var(--rem))),
    repeating-linear-gradient(to right, var(--color-accent) 0 calc(8 * var(--rem)), transparent calc(8 * var(--rem)) calc(14 * var(--rem))),
    repeating-linear-gradient(to bottom, var(--color-accent) 0 calc(8 * var(--rem)), transparent calc(8 * var(--rem)) calc(14 * var(--rem))),
    repeating-linear-gradient(to bottom, var(--color-accent) 0 calc(8 * var(--rem)), transparent calc(8 * var(--rem)) calc(14 * var(--rem)));
  background-position: top left, bottom left, top left, top right;
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100%;
}

.project-profile__about::before {
  content: 'ABOUT';
  position: absolute;
  top: calc(-11 * var(--rem));
  left: 50%;
  translate: -50% 0;
  background: #fff;
  padding: 0 calc(12 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(19 * var(--rem));
  letter-spacing: .05em;
}

.project-profile__about-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--rem));
  margin-bottom: calc(12 * var(--rem));
}

.project-profile__about-id {
  text-align: center;
}

.project-profile__photo {
  flex-shrink: 0;
  width: calc(80 * var(--rem));
  height: calc(80 * var(--rem));
  border-radius: 50%;
  object-fit: cover;
}

.project-profile__name {
  font-family: var(--lp-font-en);
  font-size: calc(24 * var(--rem));
  letter-spacing: .05em;
  line-height: 1.2;
  margin-bottom: calc(8 * var(--rem));
}

.project-profile__sns a {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--rem));
  font-family: var(--lp-font-en);
  font-size: calc(11 * var(--rem));
}

.project-profile__sns-icon {
  width: calc(12 * var(--rem));
  height: calc(12 * var(--rem));
}

.project-profile__bio {
  padding-inline: calc(10 * var(--rem));
  font-size: calc(12 * var(--rem));
  letter-spacing: 0.15em;
  line-height: 1.75;
  text-align: left;
}

/* ========================================================
                      * Modal contents *
========================================================= */
.project-modal {
  padding: calc(40 * var(--rem)) calc(24 * var(--rem));
  text-align: center;
  border-radius: calc(8 * var(--rem));
  max-height: 90vh;
  overflow-y: auto;
}

.project-modal__heading {
  font-family: var(--lp-font-en);
  font-size: calc(16 * var(--rem));
  letter-spacing: .1em;
  margin-bottom: calc(8 * var(--rem));
}

.project-modal__period {
  font-family: var(--lp-font-en);
  font-size: calc(12 * var(--rem));
  margin-bottom: calc(24 * var(--rem));
  padding-bottom: calc(24 * var(--rem));
  border-bottom: 1px solid #ddd;
}

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

  &:not(:last-child) {
    margin-bottom: calc(24 * var(--rem));
    padding-bottom: calc(24 * var(--rem));
    border-bottom: 1px solid #ddd;
  }
}

.project-modal__label {
  font-family: var(--lp-font-en);
  font-size: calc(12 * var(--rem));
  color: #888;
  margin-bottom: calc(6 * var(--rem));
}

.project-modal__strong {
  font-size: calc(16 * var(--rem));
  font-weight: 700;
  color: var(--color-accent);
  margin: calc(6 * var(--rem)) 0;
}

.project-modal--video .project-modal__video {
  aspect-ratio: 16 / 9;
  background: #000;
  display: grid;
  place-items: center;
  color: #fff;
  margin-bottom: calc(20 * var(--rem));
}

.project-modal__close {
  display: inline-block;
  margin-top: calc(10 * var(--rem));
  padding: calc(10 * var(--rem)) calc(24 * var(--rem));
  border: 1px solid #ccc;
  border-radius: 999px;
  font-size: calc(12 * var(--rem));
}

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