@charset "UTF-8";

/* =========================================================
   aden + anais × gelato pique collection LP
   すべてのスタイルは #aden 配下にスコープしています
   ========================================================= */

/* =========================================================
   スクロール周り（バー非表示・スムーズ・横はみ出し防止）
   ========================================================= */
html {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧Edge/IE */
}

/* overflow-x:hidden は body をスクロールコンテナ化し、
   ページ本来のスクロールと競合＝カクつきの原因になるため使わない */
body {
  margin: 0;
  background: #fbf8f4;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chrome/Safari/Edge */
}

#aden {
  --tl: #61a3a3;          /* ブランドのティール（見出し・枠線） */
  --tl-btn: #61a3a3;      /* 塗りボタン用ティール */
  --tl-deep: #4f8f8f;     /* ホバー用の濃いティール */
  --pink: #e79a97;        /* 説明文などのコーラルピンク */
  --salmon: #f0a5b7;      /* 回転タイトルのサーモン */
  --mint: #cfe4e1;        /* MV背景ミント */
  --mint-card: #e5eff0;   /* ポイントカード背景ミント */
  --cream: #f6f1e8;       /* ギフトゾーンの生成り */
  --ink: #4a4a4a;         /* 本文グレー */
  --ink-pink: #ffaa9f;         /* 本文グレー */

  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--ink);
  line-height: 1.9;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  /* overflow-x:hidden は #aden をスクロールコンテナ化して
     子孫の position:sticky を無効化するため指定しない */
}

#aden * {
  box-sizing: border-box;
}

#aden img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* =========================================================
   レイアウト（SP縦積み → PCは左固定 + 右流し込み）
   ========================================================= */
#aden .gp-layout {
  width: 100%;
  max-width: 780px;   /* SP幅390基準を2枚並べても破綻しない上限 */
  margin: 0 auto;
  background: #fff;
}

/* 土台にも同色を敷いて、fade-up で要素が動いたときに
   親（.gp-layout）の白がすき間から見えないようにする */
#aden .gp-body {
  background: #f4f4f2;
}

/* もっと知る（.gp-more）以外の各セクションは背景 #f4f4f2 */
#aden .gp-body > section:not(.gp-more) {
  background: #f4f4f2;
}

/* もっと知る は従来どおり白背景 */
#aden .gp-body > .gp-more {
  background: #fff;
}

/* -------- MV + 無限ループ（PCで左に固定される部分） -------- */
/* SPでは左固定エリアは表示せず、右エリア上部の gp-sp-head を表示する */
#aden .gp-side {
  display: none;
  width: 100%;
}

#aden .gp-sp-head {
  display: block;
  width: 100%;
}

#aden .mv-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--mint);
}

#aden .mv--img {
  display: block;
  width: 100%;
  transform: scale(1.06);
  opacity: 0;
}

#aden.is-ready .mv--img {
  animation: mv-in 1.6s cubic-bezier(.16, .84, .38, 1) forwards;
}

@keyframes mv-in {
  0%   { opacity: 0; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

/* -------- 無限ループ -------- */
#aden .loop-wrapper {
  overflow: hidden;
  width: 100%;
  background: #fff;
  padding: 0;
}

#aden .loop-track {
  display: flex;
  width: max-content;
  animation: loop-scroll 24s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

#aden .loop-track img {
  display: block;
  width: 33vw;
  max-width: 200px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  flex: 0 0 auto;
}

@keyframes loop-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =========================================================
   スクロールで下からフェードイン
   ========================================================= */
/* セクション自体（背景）は常に描画したまま、中身だけをフェードさせる。
   こうすることで、表示前でも各セクションの背景色が塗られ、
   親（.gp-body）の背景色がすき間から透けて見えることがない。 */
#aden .fade-up > * {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.16, .84, .38, 1);
}

/* 表示済みは再合成の必要が無いので will-change を解放（スクロール時のジャンク防止） */
#aden .fade-up.is-visible > * {
  will-change: auto;
}

#aden .fade-up.is-visible > * {
  opacity: 1;
  transform: none;
}

/* =========================================================
   concept（文字あり画像 + 写真コラージュ）
   ========================================================= */
#aden .concept-section {
  padding: 46px 20px 40px;
  text-align: center;
}

#aden .concept--top {
  display: block;
  margin: 0 auto 26px;
}

/* gelato pique ロゴ（中央・最大97px） */
#aden .concept--logo {
  display: block;
  width: 100%;
  max-width: 97px;
  height: auto;
  margin: 0 auto;
}

/* コンセプト説明テキスト（ロゴの下40px・中央寄せ） */
#aden .concept--lead {
  margin: 40px 0 0;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  /* SPは12pxを維持しつつ、画面幅に応じてPCで拡大（最大16px） */
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
  color: #5B5B5B;
}

/* 写真＋商品キャプション（縦積みブロック） */
#aden .concept--gallery {
  display: flex;
  flex-direction: column;
  gap: 44px;
  width: 100%;
  margin-top: 20px;
  text-align: left;
}

#aden .concept-block {
  display: block;
  --cb-photo-w: 66%;   /* 写真とキャプションで共通の横幅 */
}

/* 写真エリア（左右にオフセット配置＋装飾の星） */
#aden .cb-photo {
  position: relative;
  width: var(--cb-photo-w);
}

#aden .cb-photo--right { margin-left: auto; }
#aden .cb-photo--left  { margin-right: auto; }

/* Block 02：SP時は親要素（セクション左padding 20px）を超えて画面左端まで飛び出す */
#aden .cb-photo--bleed-left {
  width: 302px;
  margin-left: -20px;
  margin-right: 0;
}

/* Block 03：SP時は親要素（セクション右padding 20px）を超えて画面右端まで飛び出す */
#aden .cb-photo--bleed-right {
  width: 80%;
  margin-left: auto;
  margin-right: -20px;
}

/* Block 03：キャプションは画像より少し広げつつ concept-block 内に収める（右端ははみ出さない） */
#aden .cb-photo--bleed-right + .cb-captions {
  width: 88%;
  margin-left: auto;
  margin-right: 0;
}

/* 長い商品名を確実に折り返して Buy を収める */
#aden .cb-photo--bleed-right + .cb-captions .cb-row { min-width: 0; }
#aden .cb-photo--bleed-right + .cb-captions .cb-label {
  flex: 1 1 0;
  min-width: 0;
}

/* キャプションは写真と同じ横幅・同じ横位置に揃える */
#aden .cb-photo--right + .cb-captions { margin-left: auto; }
#aden .cb-photo--left  + .cb-captions { margin-right: auto; }

/* Block 01 のみ：画像を全幅表示、キャプションも同じ幅に揃える */
#aden .concept-block--center .cb-photo,
#aden .concept-block--center .cb-captions {
  width: auto;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Block 01 は画像がほぼ全幅のため、星が画面外／キャプションにかぶらないよう画像内へ収める */
#aden .concept-block--center .cb-star--yellow { top: 2%; right: 3%; }
#aden .concept-block--center .cb-star--blue  { left: 3%; bottom: 4%; top: auto; }

#aden .cb-photo > img.cg-01,
#aden .cb-photo > img.cg-02,
#aden .cb-photo > img.cg-03 {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* 装飾の星 */
#aden .cb-star {
  position: absolute;
  width: 15%;
  height: auto;
  pointer-events: none;
}

#aden .cb-star--yellow { top: -6%;  right: -14%; }
#aden .cb-star--blue   { bottom: -8%; left: -12%; }
#aden .cb-star--pink   { top: 6%;   right: -14%; }

/* 散らす装飾の星（SVG）。各セクション/画像を基準に絶対配置 */
#aden .deco-star {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}

/* 星を配置する基準（相対配置） */
#aden .concept--top,
#aden .concept-block,
#aden .lineup-intro {
  position: relative;
}

/* キャプション行（concept-block いっぱいに広げる） */
#aden .cb-captions {
  width: 100%;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#aden .cb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;

  font-family: "Sofia Pro", "sofia-pro", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 17.4px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* 左端の分類タグ（ミントのピル） */
#aden .cb-tag {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 5px;
  background: #DAF2E9;
  color: #61A3A3;
  white-space: nowrap;

  font-family: "Sofia Pro", "sofia-pro", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 17.4px;
  letter-spacing: 0.02em;
}

#aden .cb-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ink);
}

/* Buy ボタン（ティールのピル） */
#aden .cb-buy {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 5px 20px;
  border-radius: 999px;
  background: var(--tl-btn);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  transition: background .25s ease;
}

#aden .cb-row:hover .cb-buy {
  background: var(--tl-deep);
}

/* =========================================================
   Line up 導入（文字あり画像）
   ========================================================= */
/* Line up 導入〜Anniversary までの背景色（共通のsection背景より優先） */
#aden .gp-body > section.lineup-intro,
#aden .gp-body > section.lineup-wrapper {
  background: #FFFFFF;
}

#aden .lineup-intro {
  padding: 66px 26px 16px;
  text-align: center;
}

/* 上部タイトル画像 */
#aden .lineup-intro--tit {
  display: block;
  width: 100%;
  max-width: 228px;
  margin: 0 auto;
}

/* タイトル下の説明テキスト（中央寄せ） */
#aden .lineup-intro--txt {
  margin: 16px 0 0;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  /* SPは13pxを維持しつつ、画面幅に応じてPCで拡大（最大18px） */
  font-size: clamp(13px, 1.4vw, 18px);
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
  color: #61A3A3;
}

/* =========================================================
   Line up 各ブロック
   ========================================================= */
#aden .lineup-wrapper {
  padding: 26px 24px 103px;
}

#aden .lineup-wrapper.is-image img {
  width: 100%;
}

/* 画像全体リンク（3個目） */
#aden .lineup-link {
  display: block;
  width: 35%;
  margin: auto;
}

#aden .lineup-link > img {
  display: block;
  width: 100%;
}

/* 上部のメイン画像 */
#aden .lineup-main {
  display: block;
  width: 100%;
}

/* =========================================================
   Strawberry ヒーロー（1枚画像を分割コーディング）
   ========================================================= */
#aden .lineup-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1400 / 1926;
  container-type: inline-size;   /* 内部テキストを幅に追従させる */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* 1枚画像で表示するヒーロー（分割コーディングをやめた版） */
#aden .lineup-hero--image {
  aspect-ratio: auto;
  container-type: normal;
}

#aden .lineup-hero--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ヒーロー画像と直後の要素（商品一覧・単品）の間は全セクション共通で 12px */
#aden .lineup-hero--image + * {
  margin-top: 12px;
}

/* 布地の写真（角丸は画像に含まれる） */
#aden .lh-fabric {
  position: absolute;
  display: block;
  height: auto;
}

#aden .lh-fabric--strawberry {
  top: 5%;
  left: 1%;
  width: 54%;
  z-index: 2;   /* いちごを上に重ねる */
}

#aden .lh-fabric--bear {
  top: 46%;
  right: 0;
  width: 54%;
  z-index: 1;
}

/* 回転バッジ（テキスト＋中心の星） */
#aden .lh-badge {
  position: absolute;
  top: -5%;
  left: 44%;
  width: 57%;
  aspect-ratio: 1 / 1;
  z-index: 3;   /* いちご・クマの布より上に重ねる */
}

#aden .lh-badge__ring {
  width: 100%;
  height: 100%;
  animation: lh-spin 12s linear infinite;
}

#aden .lh-badge__ring {
  overflow: visible;
}

#aden .lh-badge__ring text {
  font-family:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size: 24px;      /* SVG座標系(viewBox 200)基準。要素サイズに追従 */
  font-weight:600;
  letter-spacing: .5px;
  fill: var(--pink);
}

#aden .lh-badge__star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14%;
  transform: translate(-50%, -50%);
}

@keyframes lh-spin {
  to { transform: rotate(360deg); }
}

/* 説明テキスト（左下） */
#aden .lh-desc {
  position: absolute;
  left: 2%;
  bottom: 1%;
  margin: 0;
  color: var(--ink-pink);
  font-weight: 600;
  font-size: 3.6cqw;
  line-height: 1.95;
  letter-spacing: .04em;
}

/* -------- Dinosaur（左右反転レイアウト・ブルー配色） -------- */
/* 恐竜の布：右上（いちごの反転） */
#aden .lh-fabric--dino {
  top: 8%;
  right: 0;
  width: 54%;
  z-index: 2;
}

/* クマの布：左下 */
#aden .lh-fabric--dino-bear {
  top: 46%;
  left: 0;
  width: 54%;
  z-index: 1;
}

/* 回転バッジ：左上へ */
#aden .lineup-hero--dino .lh-badge {
  left: -1%;
}

/* テキストはブルー */
#aden .lineup-hero--dino .lh-badge__ring text {
  fill: #7fa4da;
}

/* 説明テキスト：右下・ブルー */
#aden .lh-desc--dino {
  left: auto;
  right: 3%;
  color: #7fa4da;
  text-align: left;
}

/* -------- Anniversary（バッジ上部中央・イエロー配色） -------- */
/* アニバーサリー柄の布：左上 */
#aden .lh-fabric--anniv {
  top: 10%;
  left: 0;
  width: 52%;
  z-index: 2;
}

/* ぬいぐるみ柄の布：右下 */
#aden .lh-fabric--anniv-toy {
  top: 40%;
  right: 0;
  width: 52%;
  z-index: 1;
}

/* 回転バッジ：上部中央に大きくアーチ */
#aden .lineup-hero--anniv .lh-badge {
  top: -7%;
  left: 67%;
  width: 67%;
  transform: translateX(-50%);
}

/* テキストはイエロー系（長いので少し小さめ） */
#aden .lineup-hero--anniv .lh-badge__ring text {
  fill: #dcbf67;
  font-size: 16px;
}

/* 説明テキスト：左下 */
#aden .lh-desc--anniv {
  left: 2%;
  bottom: 2%;
  color: #dcbf67;
}

/* 下部の商品3枚を横並び（それぞれリンク） */
#aden .lineup-items {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

#aden .lineup-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#aden .lineup-item__media {
  display: block;
  width: 100%;
  transition: opacity .2s ease;
}

#aden .lineup-item__media:hover {
  opacity: .8;
}

#aden .lineup-item img {
  display: block;
  width: 100%;
}

/* lineup 各アイテムの Buy ボタン（cb-buy と同じ見た目） */
#aden .lineup-item__buy {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  padding: 5px 20px;
  border-radius: 999px;
  background: var(--tl-btn);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .25s ease;
}

#aden .lineup-item__buy:hover {
  background: var(--tl-deep);
}

/* Strawberry + bear セクションはボタン背景を #FFAA9F に */
#aden .lineup-wrapper--strawberry .lineup-item__buy {
  background: #FFAA9F;
}

#aden .lineup-wrapper--strawberry .lineup-item__buy:hover {
  background: #f5978c;
}

/* Dinosaur + bear セクションはボタン背景を #94C0FF に */
#aden .lineup-wrapper--dino .lineup-item__buy {
  background: #94C0FF;
}

#aden .lineup-wrapper--dino .lineup-item__buy:hover {
  background: #7fb0f5;
}

/* Anniversary 単品（画像＋Buyボタン） */
#aden .lineup-single {
  width: 35%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#aden .lineup-single .lineup-link {
  width: 100%;
  margin: 0;
}

/* 白背景の下端を次の gift-intro の上部に少し重ねる
   （最前面にして白がかぶさるようにする） */
#aden .lineup-wrapper--anniv {
  position: relative;
  z-index: 1;
  margin-bottom: -87px;
  padding: 26px 24px 203px;
}

/* Anniversary セクションはボタン背景を #FFEAB6 に */
#aden .lineup-wrapper--anniv .lineup-item__buy {
  background: #FFEAB6;
}

#aden .lineup-wrapper--anniv .lineup-item__buy:hover {
  background: #f6dda0;
}

/* =========================================================
   for Gift 導入（文字あり画像）
   ========================================================= */
#aden .gift-intro {
  padding: 0 0 4px;
  position: relative;
  z-index: 2;
}

/* for Gift 以降（Point〜すべての商品をみる）は背景をすべて #FBF8F4 に統一。
   不透明色なので anniv の重なりを超えても親（gp-body）のグレーは透けない。 */
#aden .gp-body > section.gift-point,
#aden .gp-body > section.gift-service,
#aden .gp-body > .gp-allbtn {
  background: #FBF8F4;
}

/* gift-intro セクション自体の背景は透明に */
#aden .gp-body > section.gift-intro {
  background: transparent;
}

/* もっと知る（gp-more）は白背景 */
#aden .gp-body > section.gp-more {
  background: #FFFFFF;
}

#aden .gift-intro img {
  width: 100%;
}

#aden .gift-intro--txt {
  margin: 0;
  padding: 40px 0;
  background: #FBF8F4;
  font-family: "Noto Sans CJK JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  /* SPは13pxを維持しつつ、画面幅に応じてPCで拡大（最大18px） */
  font-size: clamp(13px, 1.4vw, 18px);
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
  color: #61A3A3;
}

/* =========================================================
   for Gift ポイント
   ========================================================= */
#aden .gift-point {
  padding: 18px 22px;
}

#aden .gift-point.is-image img {
  width: 100%;
}

#aden .gift-service {
  padding: 18px 22px;
}

#aden .gift-service.is-image img {
  width: 100%;
}

/* =========================================================
   すべての商品をみる / もっと知る ボタン
   ========================================================= */
#aden .gp-allbtn {
  padding: 22px 24px 34px;
  background: #f4f4f2;
  text-align: center;
}

#aden .btn {
  display: inline-block;
  width: 100%;
  max-width: 520px;
  padding: 18px 20px;
  border-radius: 999px;
  background: var(--tl-btn);
  color: #fff;
  font-size: 16px;   /* SP */
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
  line-height: 1.7;
}

#aden .btn:hover {
  background: var(--tl-deep);
  transform: translateY(-2px);
}

/* -------- 下部カード -------- */
#aden .gp-more {
  padding: 34px 24px 50px;
}

#aden .gp-more--card {
  border: 1.5px solid var(--tl);
  border-radius: 20px;
  padding: 24px 22px 30px;
  text-align: center;
}

#aden .gp-more--img {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #eef2ee;
}

#aden .gp-more--img img {
  width: 100%;
  display: block;
}

#aden .gp-more--logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110px;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 12px;
}

#aden .gp-more--txt {
  color: var(--tl);
  /* SPは18pxを維持しつつ、画面幅に応じてPCで拡大（最大24px） */
  font-size: clamp(18px, 1.9vw, 24px);
  margin: 0 0 20px;
  line-height: 2.3;
}

/* =========================================================
   PC（768px以上）: main-img + loop を左に固定、以降を右に流し込み
   ========================================================= */
@media (min-width: 768px) {
  #aden .gp-layout {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: none;   /* 画面横幅いっぱい */
  }

  /* PCではSP用ヘッダーを隠し、左固定エリアを表示 */
  #aden .gp-sp-head {
    display: none;
  }

  #aden .gp-side {
    position: sticky;
    top: 0;
    flex: 0 0 auto;          /* 幅を保って左端に固定（伸縮しない） */
    width: 46vw;
    max-width: 600px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--mint);
    overflow: hidden;
  }

  #aden .mv-wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #aden .mv--img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #aden .loop-wrapper {
    flex: 0 0 auto;
  }

  #aden .loop-track img {
    width: 160px;
    max-width: none;
  }

  #aden .gp-body {
    flex: 1 1 auto;          /* 残り幅いっぱい＝背景色を伸ばす */
    min-width: 0;
  }

  /* 子要素（各section等）は現在の幅を保ち、gp-body内で左右中央に配置 */
  #aden .gp-body > * {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Block 02：PC時はSPの飛び出しを解除し、通常どおり左寄せ配置に戻す */
  #aden .cb-photo--bleed-left {
    width: var(--cb-photo-w);
    margin-left: 0;
    margin-right: auto;
  }

  /* Block 03：PC時はSPの飛び出しを解除し、通常どおり右寄せ配置に戻す */
  #aden .cb-photo--bleed-right {
    margin-left: auto;
    margin-right: 0;
  }

  #aden .cb-photo--bleed-right + .cb-captions {
    width: var(--cb-photo-w);
    margin-left: auto;
    margin-right: 0;
  }

  /* PCでは余白と文字サイズを少し広げる */
  #aden {
    font-size: 16px;
  }

  #aden .btn {
    font-size: 24px;   /* PC */
  }
}