@charset "utf-8";
/* CSS Document */

/* ====================================================
   基本設定 (Variables)
   ==================================================== */
:root {
  --color-primary: #1E2A44; /* #555555 */
  --color-secondary: #C6B7A3; /* #8B6D5E */
  --color-accent: #F5F4F0; /* #DCC4B8 */
  --color-frame: #CCCCCC;	
  --color-text: #444444;
  --color-back: #E8D5CC;
  --color-light: #F5F5F5;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-sand: #B4A27B;	
  --color-pink: #D8A7A7;
  --color-mint: #A8C3A3;
  --color-blue: #A7C6D8;
  --color-green: #3E6C68; /* #88B175 */
  --color-attn: #D59B09;
  --color-sale: #A24C5A; /* #C30002 */
  --color-line: #3D863D;	
  --color-rakuten: #BF0000;
  --color-yahoo: #FF0033;
  --transition: all 0.4s ease;
  --font-serif: "游明朝", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  --font-sans: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Yu Gothic", "游ゴシック体", "Meiryo", sans-serif;
}

/* ====================================================
   ベース設定 (Base Elements)
   ==================================================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  letter-spacing: 0.03em;
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: #F5F4F0;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* グローバルにリセット
figure { margin: 0; } */

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  opacity: 0.8;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: linear-gradient(to bottom, rgba(255,253,249,.94), rgba(255,253,249,.72), rgba(255,253,249,0));
  transition: transform .35s ease, background .35s ease;
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.brand img {
  width: 118px;
  height: auto;
}

/* ============================================================
   PC表示（特定のブレークポイント以上）の調整部分
   ここでは1024px以上と仮定します。
   ============================================================ */
@media (min-width: 1024px) {
  /* ロゴを左端の赤枠位置に寄せるため、
     親要素の配置方法とパディングを調整します */
  .site-header {
    justify-content: flex-start; /* 左寄せに変更 */
    padding-left: 100px; /* パディングを減らしてロゴを端に近づける */
  }

  .brand {
    /* ロゴ要素をさらに左端に詰め、他の要素（ガイド）との間にスペースを作る */
    margin-right: auto;
  }

  /* ロゴ画像を赤枠内のサイズ感に合わせて大幅に縮小 */
  .brand img {
    width: 200px; /* 赤枠内の見た目に合わせた小さなサイズ */
  }

}

/* ====================================================
   タイポグラフィ (Typography)
   ==================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif JP', Georgia, 'Times New Roman', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HGS明朝E', 'MS P明朝', serif;
  line-height: 1.4;
}

h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
  font-weight: 500;
}

h2 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
  font-weight: 300;
}

h3 {
  font-size: clamp(1.8rem, 3.7vw, 2.7rem);
  margin-bottom: 4rem;
  margin-left: 1rem;
  padding-top: 5rem;
  font-weight: 500;
}

h4 {
  font-size: clamp(1.2rem, 3vw, 2rem);
  margin-bottom: 4rem;
  font-weight: 400;
}

h5 {
  font-size: clamp(0.8rem, 2.5vw, 1.25rem);
  margin-bottom: 0.9rem;
  font-weight: 300;
}

@media (min-width: 1280px) {
  h3 {
    padding-top: 10rem;
    margin-left: 26rem;
    margin-bottom: 12rem;
  }
  h4 {
    padding-left: 0rem;
  }
}

/* ====================================================
   コンテナ (Container)
   ==================================================== */
.container {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 1rem; /* autoは無効なため1remに修正 */
}

/* ====================================================
   ヘッダー・ヒーロー (Hero Section)
   ==================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: visible !important;
  z-index: 1;
}

/* スクロール時の暗転用オーバーレイ */
.hero::after {
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--color-primary);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2; /* スライダーより上、ロゴより下 */
  pointer-events: none;
}

.hero.is-dimmed::after {
  opacity: 0.7; /* 暗くする度合い */
}

.hero-spacer {
  height: 110vh;
}

/* スライダーの設定 */
.hero__slider-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out; /* 1.5秒かけてフェード */
  z-index: 1;
}

.hero__slide.is-active {
  opacity: 1;
  z-index: 2;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* PC表示時（1280px以上）のヒーロー画像3枚横並び設定 */
@media (min-width: 1280px) {
  .hero__slider-wrapper {
    display: flex !important;
    flex-direction: row !important;
  }

  .hero__slide {
    position: relative !important;
    width: 33.3333% !important;
    height: 100% !important;
    opacity: 1 !important;
    z-index: 1 !important;
    visibility: visible !important;
  }

  .hero__slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* フェードアニメーション */
.fade-start {
  opacity: 0;
  transition: opacity 1.6s ease;
}

.fade-in {
  opacity: 1;
}

.fade-out {
  opacity: 0;
}

.hero__copy.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* ====================================================
   PC表示時（1080px以上）のコピーテキスト配置
   ※他の指定に負けないよう、優先度を極限まで上げています
   ==================================================== */
@media (min-width: 1080px) {
  html body .hero .hero__copy {
    top: 10vh;       /* 上からの位置 */
    left: 10vw;      /* 左からの位置（画面左端から10%分右へ） */
    width: 30vw;     /* 横幅（写真1枚分の幅に綺麗に収めます） */
    padding: 0;      /* スマホ用の左右余白をリセット */
  }
  
  /* PC表示時の文字サイズや余白の微調整 */
  html body .hero .hero__copy .eyebrow {
    margin-bottom: 1rem;
  }
  html body .hero .hero__copy .kicker {
    margin-bottom: 2.5rem;
  }
  html body .hero .hero__copy .body-small p {
    line-height: 2.0;
    margin-bottom: 2.5rem;
  }
}

/* Scroll cue */
.hero__scrollcue {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  border: none;
  background: none;
  z-index: 3;
  color: white;
  font-size: clamp(1rem, 2vw, 1.5rem);
}

/* コピー（スクロールで浮き出る） */
.hero__copy {
  position: fixed;
  top: 10vh;
  left: 0%;
  width: 100%;
  padding: 0 1.2rem;
  opacity: 0;
  transform: translateY(20px);
  color: var(--color-white);
  transition: var(--transition);
  z-index: 3;
  font-family: var(--font-serif);
  pointer-events: none;
}

/* ====================================================
   POP UP告知帯 ＆ カウントダウン (Pop-up & Countdown)
   ==================================================== */
/* 1. 赤枠のテキスト透過ネイビー背景（POP UP告知帯） */
.hero__popup-info {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 380px;
  background-color: rgba(30, 42, 68, 0.5); 
  color: var(--color-white);
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
  margin-bottom: 0px; 
  z-index: 5;
}

.popup-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.07em;
  margin-bottom: -10px;
}

.popup-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.7vw, 2.0rem);
  font-weight: 300;
  letter-spacing: 0.07em;
}

/* ネイビーの四角形ベース */
.countdown-box {
  position: absolute;
  bottom: 18%; 
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 450px;
  padding: 5px 20px 25px;
  background: linear-gradient(135deg, #1b2840 0%, #3e5682 30%, #243555 60%, #0f1726 100%);
  color: var(--color-white);
  text-align: center;
  z-index: 5;
}

/* POP UP告知帯 ＆ カウントダウンの個別配置とアニメーション */
.hero__popup-info,
.countdown-box,
.hero__scrollcue {
  opacity: 0;
  animation: elegantFadeInUp 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.5s;
  transition: opacity 0.3s ease, transform 0.3s ease; /* ←ここを0.3sから1.5sに合わせる */
}

@keyframes elegantFadeInUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 10px); 
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ====================================================
   消える時の専用アニメーションを追加
   ==================================================== */
@keyframes customFadeOut {
  0% {
    opacity: 1;
    transform: translate(-50%, 0); /* 元の位置・表示状態からスタート */
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -20px); /* 100px上に移動して透明に */
  }
}

/* ====================================================
   スクロール時のフェードアウト用クラス（ここを書き換えます）
   ==================================================== */
.hero__popup-info.is-fadeout,
.countdown-box.is-fadeout,
.hero__scrollcue.is-fadeout {
  /* opacity や transition の代わりに、上で作ったアニメーションを適用します */
  animation: customFadeOut 0.3s ease forwards !important;
  pointer-events: none;
}

/* coming soon... のテキスト */
.countdown-box__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 3vw, 1.3rem);
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}

/* タイマー全体を横並びにするコンテナ */
.countdown-box__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(15px, 4vw, 40px);
}

.timer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(55px, 12vw, 80px);
}

.timer-number {
  font-family: "Didot", "Bodoni MT", "Bodoni 72", "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}

.timer-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  letter-spacing: 0.1em;
  opacity: 0.9;
}

/* ====================================================
   神戸NAVY表示時のヒーロー全体のフェードアウト
   ==================================================== */
.hero {
  /* 消える時・戻る時のふんわり感を出すための設定 */
  transition: opacity 1.0s ease, visibility 1.0s ease !important;
}

.hero.is-fadeout-all {
  opacity: 0 !important;
  visibility: hidden !important; /* 完全に非表示にして、スクロールやリンクの邪魔を防ぐ */
  pointer-events: none !important;
}

/* ====================================================
   神戸NAVY セクション (Kobe Navy)
   ==================================================== */
.kobe-navy {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* 背景色を画像に合わせて少し青みがかった明るいグレーに設定 */
  background-color: #F5F4F0; 
  padding: 6rem 1rem 8rem; /* 上、左右、下の余白 */
  text-align: center;
  overflow: hidden;
}

/* PC表示時は余白を広くする */
@media (min-width: 1080px) {
  .kobe-navy,.silhouette {
    padding: 10rem 1rem 12rem;
  }
}

.kobe-navy__inner {
  position: relative;
  z-index: 3; /* 背景イラストより前面に出す */
  width: 100%;
  margin: 0 auto;
  color: var(--color-primary); /* 文字色は深みのあるブランドネイビー */
  font-family: var(--font-serif); /* 明朝体 */
}

/* ヘッダー部分（タイトル周り） */
.kobe-navy__header {
  margin-bottom: 4rem;
}

.kobe-navy__catch {
  font-size: clamp(1.1rem, 3vw, 1.2rem);
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.kobe-navy__title {
  font-size: clamp(1.9rem, 5vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  margin: 0;
  padding: 0;
}

/* 本文部分 */
.kobe-navy__body p {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  line-height: 2.2; /* 行間を広めにとってゆったりと */
  letter-spacing: 0.03em;
  margin-bottom: 2.5rem; /* 段落ごとの余白 */
}

/* 最後の段落の余白を消す */
.kobe-navy__body p:last-child {
  margin-bottom: 0;
}

/* 強調テキスト（少し大きくする） */
.kobe-navy__emphasis {
  font-size: clamp(1.1rem, 3vw, 1.2rem) !important;
  margin-top: 4rem;
  margin-bottom: 2.5rem !important;
}

/* 神戸の街並み背景イラスト */
.kobe-navy__bg-illustration {
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 100%;
  height: 115px; /* イラストの高さに合わせて調整してください */
  background-size: cover; /* または contain */
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.15; /* イラストが濃すぎる場合はここで薄さを調整（0.1〜1.0） */
  z-index: 1;
  pointer-events: none;
}


.silhouette {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* 背景色を画像に合わせて少し青みがかった明るいグレーに設定 */
  background-color: #F5F4F0; 
  padding: 6rem 1rem 1rem; /* 上、左右、下の余白 */
  text-align: center;
  overflow: hidden;
}

.silhouette__title {
  font-size: clamp(1.9rem, 5vw, 2.3rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

.silhouette__body p {
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  line-height: 2.2; /* 行間を広めにとってゆったりと */
  letter-spacing: 0.01em;
  margin-bottom: 2.5rem; /* 段落ごとの余白 */
}

.silhouette__bg-illustration {
  position: absolute;
  bottom: 1%;
  left: 0;
  width: 100%;
  height: 500px; /* イラストの高さに合わせて調整してください */
  background-size: cover; /* または contain */
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.3; /* イラストが濃すぎる場合はここで薄さを調整（0.1〜1.0） */
  z-index: 1;
  pointer-events: none;
}


/* PC表示時のイラスト高さ調整 */
@media (min-width: 1080px) {
  .kobe-navy__bg-illustration {
/* ▼ 1. イラストを表示する枠のサイズ（赤枠の大きさに合わせる） */
    width: 900px;  /* 横幅 */
    height: 800px; /* 高さ */

    /* ▼ 2. 枠を配置する位置 */
    bottom: auto; /* スマホ用の「一番下（bottom: 0）」を解除 */
    top: 26%;     /* セクションの上から50%の位置に基準を置く */
    left: 27%;    /* 左から15%くらいの位置に配置（テキストの左側あたり） */
    transform: translateY(-50%); /* 基準位置から上に半分ズラして、綺麗に縦中央に揃える */

    /* ▼ 3. 枠の中でのイラストの見え方 */
    background-size: contain; /* イラストが途切れないように枠内に全体を収める */
    background-position: center; /* 枠内のど真ん中に表示 */
  }
    .silhouette__bg-illustration{
/* ▼ 1. イラストを表示する枠のサイズ（赤枠の大きさに合わせる） */
    width: 500px;  /* 横幅 */
    height: 800px; /* 高さ */

    /* ▼ 2. 枠を配置する位置 */
    bottom: auto; /* スマホ用の「一番下（bottom: 0）」を解除 */
    top: 30%;     /* セクションの上から50%の位置に基準を置く */
    left: 38%;    /* 左から15%くらいの位置に配置（テキストの左側あたり） */
    transform: translateY(-50%); /* 基準位置から上に半分ズラして、綺麗に縦中央に揃える */

    /* ▼ 3. 枠の中でのイラストの見え方 */
    background-size: contain; /* イラストが途切れないように枠内に全体を収める */
    background-position: center; /* 枠内のど真ん中に表示 */
  }
}

/* ====================================================
   無限ループスライダー (Infinite Slider)
   ==================================================== */
.infinite-slider {
  width: 100%;
  overflow: hidden; /* 画面外にはみ出した部分を隠す */
  background-color: #F5F4F0; /* 上下のセクションと同じ背景色 */
  padding: 2rem 0; /* スライダー上下の余白 */
}

/* スライダー全体を横並びにする枠 */
.infinite-slider__wrap {
  display: flex;
  width: max-content; /* 中身のサイズに合わせて枠を広げる */
}

/* 1セット分のリスト設定（ここでアニメーションを指定） */
.infinite-slider__list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  /* 40秒かけて一定の速度(linear)で左に流れ、無限(infinite)に繰り返す */
  animation: scrollMarquee 40s linear infinite; 
}

/* 画像1枚分のサイズと余白 */
.infinite-slider__item {
  /* スマホ表示時：画面幅の40%のサイズにする（青枠のような見え方になります） */
  width: 40vw; 
  padding: 0 0.5rem; /* 画像同士の隙間（左右に0.5remずつ） */
  box-sizing: border-box;
}

/* 画像の縦横比を綺麗に保つ */
.infinite-slider__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5; /* ワンピースが綺麗に見える縦長比率 */
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* ほんの少しだけ影をつけて上品に */
}

/* 無限スクロール用のアニメーション */
@keyframes scrollMarquee {
  0% {
    transform: translateX(0); /* 初期位置 */
  }
  100% {
    transform: translateX(-100%); /* 1セット分（自分自身の幅）だけ左へ移動 */
  }
}

/* ====================================================
   PC・タブレット表示時のサイズ調整
   ==================================================== */
@media (min-width: 768px) {
  .infinite-slider__item {
    width: 20vw; /* PCでは画面幅の25%（4枚が並ぶくらいのサイズ） */
    padding: 0 1rem; /* 隙間を少し広げる */
  }
  
  .infinite-slider {
    padding: 4rem 0;
  }
}

/* ====================================================
   ポップアップ開催概要リスト
   ==================================================== */

.popup__header {
    margin-bottom: 2.5rem;
}

.popup {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* 背景色を画像に合わせて少し青みがかった明るいグレーに設定 */
  background-color: #F5F4F0; 
  padding: 6rem 1rem 7rem; /* 上、左右、下の余白 */
  text-align: center;
  overflow: hidden; 
}

.popup-details {
  text-align: left;
  max-width: 400px;
  margin: 3rem auto 4rem;
  border-top: 1px solid rgba(30, 42, 68, 0.2); /* うっすらとした区切り線 */
  border-bottom: 1px solid rgba(30, 42, 68, 0.2);
  padding: 1.5rem 1.0rem;
  font-family: var(--font-sans);
}

.popup-details__row {
  display: flex;
  margin-bottom: 1rem;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.popup-details__row:last-child {
  margin-bottom: 0;
}

/* 「開催店舗」などの見出し部分 */
.popup-details dt {
  width: 35%;
  font-weight: 500;
}

/* 「〇〇高島屋」などの内容部分 */
.popup-details dd {
  width: 65%;
  margin: 0;
}

/* ====================================================
   ポップアップ詳細・アクセスボタン
   ==================================================== */
.popup-buttons {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* ボタン同士の隙間 */
  margin-top: 4rem;
  align-items: center;
}

.popup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  padding: 1rem 0.5rem;
  background-color: var(--color-primary); /* ネイビー塗りつぶし */
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--color-primary);
  transition: all 0.4s ease;
}

/* ボタンホバー時（色が反転します） */
.popup-btn:hover {
  background-color: transparent;
  color: var(--color-primary);
  opacity: 1;
}

/* 白抜き（枠線のみ）パターンのボタン */
.popup-btn--outline {
  background-color: transparent;
  color: var(--color-primary);
}

.popup-btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* PC・タブレット表示時はボタンを横並びにする */
@media (min-width: 768px) {
  .popup-buttons {
    flex-direction: row;
    justify-content: center;
  }
}

/* ====================================================
   Googleマップ埋め込みエリア
   ==================================================== */
.popup-map {
  width: 100%;
  max-width: 800px; /* PC表示で地図が大きくなりすぎるのを防ぐ最大幅 */
  margin: 2rem auto 3rem; /* 上部の余白と、左右中央揃え */
  aspect-ratio: 4 / 3; /* 地図の縦横比（スマホでは少し縦長に） */
  background-color: #eee; /* 読み込み中の背景色 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* ふんわりと影をつけて上品に */
}

.popup-map iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* PC・タブレット表示時の地図の縦横比調整 */
@media (min-width: 768px) {
  .popup-map {
    aspect-ratio: 16 / 9; /* PCでは横長のワイド画面比率にする */
  }
}

/* ====================================================
   共通円形ボタン (Circle Buttons)
   ==================================================== */
.circle-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.2s ease, background-color 0.3s ease;
  z-index: 9999;
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  line-height: normal !important;
  vertical-align: baseline !important;
}

.up-arrow {
  font-size: 18px;
}

.text {
  font-size: 10px; 
}

/* TOPに戻る（左下共通） */
.back-to-top {
  left: max(15px, env(safe-area-inset-left));
  background-color: rgba(245, 244, 240, 0.8);
  border: none;
}

/* ====================================================
   ユーティリティクラス (Utility Classes)
   ==================================================== */
/* PC/タブレット・マージン */
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-75 { margin-bottom: 75px; }
.mb-100 { margin-bottom: 100px; }
.mb-125 { margin-bottom: 125px; }
.mb-150 { margin-bottom: 150px; }
.mb-200 { margin-bottom: 200px; }

/* マイナス・マージン */
.mb-n10 { margin-bottom: -10px; }
.mb-n20 { margin-bottom: -20px; }
.mb-n30 { margin-bottom: -30px; }
.mb-n40 { margin-bottom: -40px; }
.mb-n50 { margin-bottom: -50px; }

/* スマホ マージン (レスポンシブ) */
@media (max-width: 767px) {
  .mb-10 { margin-bottom: 0.625rem; }
  .mb-20 { margin-bottom: 1.25rem; }
  .mb-30 { margin-bottom: 1.875rem; }
  .mb-40 { margin-bottom: 2.5rem; }
  .mb-50 { margin-bottom: 3.125rem; }
  .mb-75 { margin-bottom: 4.6875rem; }
  .mb-100 { margin-bottom: 6.25rem; }
  .mb-125 { margin-bottom: 7.8125rem; }
  .mb-150 { margin-bottom: 9.375rem; }
  .mb-200 { margin-bottom: 12.5rem; }
}

/* ====================================================
   ブランド・バナー (Brand Banner)
   ==================================================== */
.feature-banner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  z-index: 6;
  text-align: center;
  box-sizing: border-box;
}

.brand-banner-scroll-wrap {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: #F5F4F0; 
}

.brand-banner-scroll {
  display: flex;
  gap: 0.8rem; 
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; 
  -ms-overflow-style: none;
  cursor: grab;
}

.brand-banner-scroll::-webkit-scrollbar {
  display: none;
}

.brand-banner-scroll li {
  flex: 0 0 auto;
  width: 25%; 
  height: 100%;
}

.brand-banner-scroll img {
  display: block;
  width: 80%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 2 / 1;
  margin-left: 10px;
}

.brand-banner-scroll-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 125px;
  height: 100%;
  background: linear-gradient(to left, #F5F4F0, transparent);
  pointer-events: none;
  z-index: 2;
}

.brand-banner-white-top {
  width: 100%;
  height: 10px;
  background-color: #F5F4F0;  
  position: relative;
  z-index: 3;
}

.brand-banner-scroll.dragging {
  cursor: grabbing;
}

/* ブランド・バナー レスポンシブ対応 */
@media (max-width: 767px) {
  .brand-banner-scroll li {
    flex: 0 0 25%; 
    min-width: 25%;
  }
  .brand-banner-scroll {
    gap: 0.2rem; 
    padding: 0;
  }
.br-pc {
    display: none; /* PC用改行を隠す */
  }
  .br-sp {
    display: inline; /* スマホ用改行を有効にする */
  }
}

/* PCレイアウト以上で背景だけ横いっぱい */
@media (min-width: 1280px) {
  .feature-banner {
    position: relative;
    width: 100%;
    overflow: visible;
  }
  .feature-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background-color: #F5F4F0; 
    z-index: -1;
  }
    .br-sp {
  display: none;
}
}


.body-small {
  font-size: clamp(1.0rem, 2vw, 1.3rem);
  margin: 3rem 0rem;
  letter-spacing: 0.05em;
  font-weight: 300;
  line-height: 1.9;
}

/* ====================================================
   スクロール連動のフェードイン演出
   ==================================================== */
/* 初期状態（透明にして、少し下に下げておく） */
.fadein01 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

/* 画面に入った時の状態（JSでこのクラスが付与され、フワッと浮かび上がる） */
.fadein01.is-visible {
  opacity: 0.2;
  transform: translateY(0);
}

.fadein02 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.0s ease, transform 1.0s ease;
}

/* 画面に入った時の状態（JSでこのクラスが付与され、フワッと浮かび上がる） */
.fadein02.is-visible {
  opacity: 0.5;
  transform: translateY(0);
}



.access p {
  text-align: left;
  max-width: 400px;
  margin: 0.5rem auto 1rem;
  padding: 0 1.3rem 0;
  font-family: var(--font-sans);
  line-height: 1.8; /* 行間を広めにとってゆったりと */
  letter-spacing: 0em;
}

.access__title {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.7;
  margin: 3rem 0 0;
  padding: 0;
}