@charset "UTF-8";
/* フォント（ヘッドに追記できない想定なので @import で） */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&display=swap');

/* ===== 既存CMSパーツの非表示／打消し ===== */
#header,
#footer,
#aside_sitemap,
.area_topbar,
.event_name_,
.ad_top,
.exp_btns_,
#root_category_,
.footer_ { display: none !important; }

/* レイアウト打消し */
.container_,
.div.container_,
#container,
.main_off,
#main.fullsize { width: 100% !important; }
#event_inner .fullsize,
.container_inner_ { padding: 0 !important; }

h2,h3,h4,h5 {font-weight: 400;}

figure { margin: 0; }

/* ===== Snow (全ページ常時・上品に) ===== */
#xmas25 .x25-snow {
  position: fixed;
  inset: 0;
  z-index: 2;              /* コンテンツの上、オーバーレイやヘッダーよりは下でOKなら小さめに */
  pointer-events: none;
  opacity: .45;            /* 上品に控えめ。お好みで .35〜.55 くらい */
}

/* 動きを控えたいユーザー設定に配慮 */
@media (prefers-reduced-motion: reduce) {
  #xmas25 .x25-snow { display: none; }
}

/* ===== 以降、自作LPは #xmas25 にスコープ ===== */
#xmas25 { font-family: "Zen Old Mincho", serif; color:#2f3b40; letter-spacing:.02em; }
#xmas25 * { box-sizing: border-box; }
#xmas25 .x25-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

#xmas25 :root{
  --ink:#0f3a42;
  --gold:#b4975a;
  --body:#2f3b40;
  --max:1120px;
}

/* ===== Header ===== */
#xmas25 .x25-header{
  position:fixed; inset:0 0 auto 0; height:64px; z-index:1040;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
}
#xmas25 .x25-brand{
  color:var(--ink); font-weight:700; text-decoration:none;
  font-size:clamp(18px, 2.2vw, 28px); letter-spacing:.12em;
}
#xmas25 .x25-brand img{ display:block; width: 100%; }

#xmas25 .x25-header-icons{
  display:flex; align-items:center; gap:12px;
}
#xmas25 .x25-header-icons img{
  height:22px; width:auto; display:block; transition:opacity .2s;
}
#xmas25 .x25-header-icons a:hover img{ opacity:.7; }

/* ===== メニューボタン（縁なし・2本線） ===== */
#xmas25 .x25-menu-btn {
  inline-size: 76px;
  block-size: 44px;
  display: grid;
  place-items: center;
  background: none!important;
  border: none!important;
  cursor: pointer;
  position: relative;
}

/* 2本線構成 */
#xmas25 .x25-menu-icon,
#xmas25 .x25-menu-icon::before {
  position: absolute;
  left: 50%;
  width: 45px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 0.3s ease;
  content: "";
}

/* 上下の線 */
#xmas25 .x25-menu-icon {
  top: 50%;
  transform: translate(-50%, -6px);
}
#xmas25 .x25-menu-icon::before {
  top: 50%;
  transform: translate(-50%, 6px);
}

/* 開いた時（×に変化） */
#xmas25.is-open .x25-menu-icon {
  transform: translate(-50%, 0) rotate(45deg);
}
#xmas25.is-open .x25-menu-icon::before {
  transform: translate(-50%, 0) rotate(-45deg);
}

/* ===== Hero ===== */
#xmas25 .x25-hero{
  position:relative;
  min-height:100svh;
  display:block;
  background: url("/page/xmas/2025/img/top/pc-main-img.jpg") center/cover no-repeat;
  /* 微妙な霞を足して写真の質感を活かしつつ文字を読ませる */
  isolation:isolate;
}
#xmas25 .x25-hero::after{
  /* ごく薄い霧（SPで文字が乗る場合の保険） */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 80% at 70% 20%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}

/* センタ見出し（画像どおりの2行配置） */
#xmas25 .x25-hero__heading{
  position:absolute; inset:auto 0 auto 0; top:10vh;
  text-align:center;
  color:#2c7d88;            /* 画像の見出し色に近い青緑 */
  line-height:1.9;
  margin:0;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  letter-spacing:.08em;
}
#xmas25 .x25-hero__lead-1{
  display:block;
  font-size:clamp(14px, 1.8vw, 18px);
  letter-spacing:.25em;
  margin-bottom:.3em;
}
#xmas25 .x25-hero__lead-2{
  display:block;
  font-size:clamp(22px, 4.2vw, 36px);
}

/* 右サイドのローカルナビ（縦並び） */
#xmas25 .x25-localnav{
  position:absolute; right:min(5.6vw, 56px); top:30vh;
  display:flex; flex-direction:column; gap:14px;
}
#xmas25 .x25-localnav a{
  color:#ffffff;
  text-decoration:none;
  font-size:18px;
  letter-spacing:.28em;
  opacity:.85;
  mix-blend-mode:normal;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition:opacity .2s ease;
}
#xmas25 .x25-localnav a:hover{ opacity:1; }

/* ===== Localnav: 線＋テキストのスライドイン ===== */
#xmas25 .x25-localnav a {
  position: relative;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding-left: 20px; /* 線の分の余白 */
  opacity: 0;
  transform: translateX(-14px);
  transition: color .3s ease;
}

#xmas25 .x25-localnav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold, #b4975a);
  transform: translateY(-50%);
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}

/* ===== Localnav: 文字＋線がスッと現れる ===== */
#xmas25 .x25-localnav {
  display: flex;
  justify-content: center;
  gap: 2.4em;
  margin-top: 2em;
}

#xmas25 .x25-localnav a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  padding-bottom: 6px;
  opacity: 0; /* ← 最初は非表示 */
  transform: translateY(6px);
  transition: color 0.3s ease;
}

/* 白線 */
#xmas25 .x25-localnav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px; /* ← 太さ1px */
  width: 0;
  background: #fff;
  opacity: 0;
}

/* ===== ページ読み込み時のアニメーション ===== */

/* テキスト：フェードイン＆軽く上がる */
#xmas25 .x25-localnav.is-enter a:nth-child(1) {
  animation: x25-fadeInNav 0.8s ease-out forwards;
  animation-delay: 0s;
}
#xmas25 .x25-localnav.is-enter a:nth-child(2) {
  animation: x25-fadeInNav 0.8s ease-out forwards;
  animation-delay: 0.12s;
}
#xmas25 .x25-localnav.is-enter a:nth-child(3) {
  animation: x25-fadeInNav 0.8s ease-out forwards;
  animation-delay: 0.24s;
}

/* 線アニメも同じタイミングで同期 */
#xmas25 .x25-localnav.is-enter a:nth-child(1)::after {
  animation: x25-lineRun 0.8s ease-out forwards;
  animation-delay: 0s;
}
#xmas25 .x25-localnav.is-enter a:nth-child(2)::after {
  animation: x25-lineRun 0.8s ease-out forwards;
  animation-delay: 0.12s;
}
#xmas25 .x25-localnav.is-enter a:nth-child(3)::after {
  animation: x25-lineRun 0.8s ease-out forwards;
  animation-delay: 0.24s;
}

/* フェードイン */
@keyframes x25-fadeInNav {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 線が走って消える */
@keyframes x25-lineRun {
  0%   { width: 0; left: 0; opacity: 0; }
  10%  { opacity: 1; }
  50%  { width: 100%; left: 0; opacity: 1; }
  80%  { opacity: 1; }
  100% { width: 0; left: 100%; opacity: 0; }
}


/* モーション軽減対応 */
@media (prefers-reduced-motion: reduce) {
  #xmas25 .x25-localnav a {
    opacity: 1;
    transform: none;
  }
  #xmas25 .x25-localnav a::after {
    width: 100%;
    opacity: 1;
  }
}

/* ===== Localnav: ホバーで下線をスッと表示（ロード演出と同テイスト） ===== */
#xmas25 .x25-localnav a{
  position: relative;
  padding-bottom: 6px; /* 下線の余白 */
  color: #fff;
  text-decoration: none;
}

/* ホバー専用の線（ロード時は ::after を使用中なので分離） */
#xmas25 .x25-localnav a::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;           /* 太さは1pxで統一 */
  width: 0;              /* 初期は0 */
  background: #fff;      /* ロード時の線と同色 */
  opacity: .9;
  transition:
    width .35s cubic-bezier(.22,.61,.36,1),
    opacity .2s ease;
}

/* hover / keyboard focus で線がスッと伸びる */
#xmas25 .x25-localnav a:hover::before,
#xmas25 .x25-localnav a:focus-visible::before{
  width: 100%;
  opacity: 1;
}

/* モーション軽減に配慮 */
@media (prefers-reduced-motion: reduce){
  #xmas25 .x25-localnav a::before{
    transition: none;
    width: 100%;
    opacity: 1;
  }
}

#xmas25 .x25-localnav a{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;          /* 下線ぶんの余白を確保 */
}

/* すべての下線（hover用 ::before / ロード用 ::after）を文字下へ */
#xmas25 .x25-localnav a::before,
#xmas25 .x25-localnav a::after{
  top: auto !important;          /* 以前の top:50% を無効化 */
  bottom: -2px;                  /* 文字の少し下に配置（好みで -4px など） */
  height: 1px;                   /* 太さは1pxで統一 */
}

/* hoverの伸びる下線（そのまま） */
#xmas25 .x25-localnav a::before{
  content: "";
  left: 0;
  width: 0;
  background: #fff;
  opacity: .9;
  transition: width .35s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
#xmas25 .x25-localnav a:hover::before,
#xmas25 .x25-localnav a:focus-visible::before{
  width: 100%;
  opacity: 1;
}

/* ロード時に走って消える線（既存のアニメを流用） */
#xmas25 .x25-localnav a::after{
  content: "";
  left: 0;
  width: 0;
  background: #fff;
  opacity: 0;
}

/* 右下サムネ（額縁っぽい枠＋下にキャプション） */
#xmas25 .x25-hero__thumb {
  position:absolute;
  right:min(5.6vw,56px);
  bottom:min(5.6vw,56px);
  display:grid;
  gap:8px;
  justify-items:center;
  text-decoration:none; /* ←追加 */
}
#xmas25 .x25-hero__thumb:hover img {
  transform: scale(1.02);
  transition: transform .3s ease;
}

#xmas25 .x25-hero__thumb img{
  width:240px; height:auto; display:block; object-fit:cover;
  background:#fff;
  box-shadow:0 10px 16px rgba(20,40,50,.18);}
#xmas25 .x25-hero__thumb figcaption{
  color:#ffffff;
  font-size:12px;
  letter-spacing:.24em;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}

/* ヘッダーの配置バランス（ロゴ＋アイコン＋メニュー） */
#xmas25 .x25-header{ height:64px; }
#xmas25 .x25-header-icons{ display:flex; align-items:center; gap:12px; }

/* ハンバーガーは薄背景でも視認できる色合いに */
#xmas25 .x25-menu-btn{ border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.18); }
#xmas25 .x25-menu-icon,
#xmas25 .x25-menu-icon::before,
#xmas25 .x25-menu-icon::after{ background:#fff; }

/* ===== SP調整 ===== */
@media (max-width: 768px){
  #xmas25 .x25-hero__heading{ top:12vh; }
  #xmas25 .x25-localnav{
    top:auto; bottom:18vh; right:6vw;
    gap:10px;
  }
  #xmas25 .x25-hero__thumb{
    right:6vw; bottom:6vw;
  }
  #xmas25 .x25-hero__thumb img{ width:min(44vw, 220px); }
}

/* =====（任意）ロゴ切り替えオプション =====
   背景の明るさでロゴを白に切り替えたい場合は
   <a class="x25-brand is-white"> としてこのブロックを利用 */
#xmas25 .x25-brand.is-white img{
  content: url("https://www.lupicia.com/page/xmas/2025/img/top/logo-lupicia.svg");
}

/* ===== Overlay Menu ===== */
#xmas25 .x25-overlay{ position:fixed; inset:0; z-index:1050; display:none; }
#xmas25 .x25-overlay[aria-hidden="false"]{ display:block; }
#xmas25 .x25-overlay__dim {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 15, 0.72); /* ← 黒を少し強めに（元0.6） */
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}
/* 表示状態（フェードイン） */
#xmas25.is-open .x25-overlay__dim {
  opacity: 1;
}
#xmas25 .x25-overlay__panel{
  position:absolute; inset:0 0 0 auto; width:min(880px, 100%);  z-index: 30;
  background:#f7fbfe; color:#1b3f46; display:grid; grid-template-rows:auto 1fr auto;
  animation:x25-slideIn .32s ease both;
}
@keyframes x25-slideIn{from{transform:translateX(6%); opacity:0} to{transform:none; opacity:1}}
#xmas25 .x25-overlay__head{
  display:flex; align-items:end; justify-content:space-between;
  padding:28px min(5vw,48px) 14px;
}
#xmas25 .x25-overlay__logo img {
  display: block;
  height: clamp(28px, 3vw, 40px);
  width: 70%;
}
#xmas25 .x25-overlay__nav{
  padding:24px min(5vw,48px) 32px; display:grid; gap:26px;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
#xmas25 .x25-overlay__item a{ display:block; text-decoration:none; color:#1e4b53; }
#xmas25 .x25-overlay__label{ font-size:clamp(22px, 2.2vw, 28px); line-height:1.3; }
#xmas25 .x25-overlay__sub{ opacity:.7; font-size:12px; margin-top:4px; letter-spacing:.2em; }
#xmas25 .x25-overlay__close{ border:none; background:none; font-size:26px; cursor:pointer; color:#345b61; }

/* ===== Responsive ===== */
@media (min-width: 880px){
  #xmas25 .x25-hero__inner{grid-template-columns:1fr}
  #xmas25 .x25-hero__copy{text-align:left; translate:0 -4vh}
  #xmas25 .x25-hero__lead-2{font-size:clamp(28px, 4.6vw, 44px)}
}

/* ===== スクロール切替：バー ===== */
#xmas25 .x25-scrollbar{
  position: fixed; inset:0 0 auto 0; height:56px; z-index:1039;
  background:#f6fbfe;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);       /* 軽いシャドウ */
  display:none;                                  /* 初期は非表示 */
}
#xmas25 .x25-scrollbar__inner{
  max-width: min(1400px, 92%);
  height:100%;
  margin: 0 25vw;
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; gap:16px;
}

/* 左右テキスト */
#xmas25 .x25-scrollbar__left,
#xmas25 .x25-scrollbar__right{
  color:#428196;
  font-size:14px; letter-spacing:.16em; white-space:nowrap;
  opacity:.92;
}
#xmas25 .x25-scrollbar__left{ text-align:left; }
#xmas25 .x25-scrollbar__right{ text-align:right; }

/* 中央ロゴ */
#xmas25 .x25-scrollbar__logo{
  height:26px; width:auto; display:block;
}

/* スクロール状態の切替 */
#xmas25.is-scrolled .x25-scrollbar{ display:block; }

/* スクロール時、元のヘッダー要素は控えめに（ロゴ/アイコン非表示、ボタンだけ右に残す） */
#xmas25.is-scrolled .x25-brand{
  opacity:0; pointer-events:none;
}
#xmas25.is-scrolled .x25-header-icons{
  opacity:1; pointer-events:auto;
}

/* ヘッダー自体の高さは維持（メニューボタン位置を右上に固定） */
#xmas25 .x25-menu-btn{
  position:fixed;          /* 右上に固定 */
  top:8px;
  right:16px;
  z-index:1050;            /* 帯より上 */
  opacity:1;
  pointer-events:auto;
}

/* メニューボタンの線色：通常は白、スクロール後は #428196 */
#xmas25 .x25-menu-icon,
#xmas25 .x25-menu-icon::before{ background:#fff; }
#xmas25.is-scrolled .x25-menu-icon,
#xmas25.is-scrolled .x25-menu-icon::before{
  background:#428196;
}

/* （開いた時の×アニメは既存のままでOK）
   必要なら背景が明るいのでやや濃くしてもよい： */
#xmas25.is-open.is-scrolled .x25-menu-icon,
#xmas25.is-open.is-scrolled .x25-menu-icon::before{ background:#2e6576; }

/* レスポンシブ：狭幅時は文字を少し小さく */
@media (max-width: 860px){
  #xmas25 .x25-scrollbar{ height:52px; }
  #xmas25 .x25-scrollbar__logo{ height:22px; }
  #xmas25 .x25-scrollbar__left,
  #xmas25 .x25-scrollbar__right{ font-size:12px; letter-spacing:.14em; }
}

/* ===== Overlay menu ===== */
#xmas25 .x25-overlay__panel{
  width:min(920px, 100%);                 /* 少し広めに */
  background:#f6fbfe;                     /* やや青みの白 */
  color:#1b3f46;
  display:grid;
  grid-template-rows:auto auto 1fr auto;  /* head / divider / nav / bottom */
}

/* ヘッダー行：ロゴ＋タグライン／SNS＋閉じる */
#xmas25 .x25-overlay__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:28px min(5vw,48px) 14px;
}
#xmas25 .x25-overlay__brand{ display:flex; align-items:flex-end; gap:18px; }
#xmas25 .x25-overlay__logo{
  font-weight:700; letter-spacing:.12em; text-decoration:none;
  color:#1e4b53; font-size: clamp(26px, 2.8vw, 34px);
}
#xmas25 .x25-overlay__tagline{
  color:#4b7280; font-size:12px; letter-spacing:.18em; translate:0 -2px;
}

#xmas25 .x25-overlay__actions{ display:flex; align-items:center; gap:14px; }
#xmas25 .x25-overlay__sns{
  display:inline-grid; place-items:center;
  width:34px; height:34px;
  border: none !important;;
  text-decoration:none; transition:background .2s, border-color .2s;
}
#xmas25 .x25-overlay__sns:hover{ background:#e9f3f6; border-color:rgba(30,75,83,.55); }
#xmas25 .x25-overlay__sns img{ width:18px; height:auto; display:block; }

#xmas25 .x25-overlay__close{
  border:none; background:none; color:#305e66; font-size:22px; cursor:pointer; padding:6px 8px;
}

/* ロゴ下の細いライン */
#xmas25 .x25-overlay__divider{
  height:1px; background:linear-gradient(90deg, rgba(30,75,83,.25), rgba(30,75,83,.25));
  margin:0 min(5vw,48px);
}

/* メニュー本体：2列グリッド（スクショ寄せ） */
#xmas25 .x25-overlay__nav {
  padding: 0 min(5vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 26px 60px;
  align-content: center;    /* ← 縦方向中央 */
  justify-content: center;  /* ← 横方向中央 */
  min-height: 40vh;         /* 下部画像を除いた残り空間を確保 */
  text-align: left;
}
#xmas25 .x25-overlay__item a{
  display:block; text-decoration:none; color:#1e4b53;
}
#xmas25 .x25-overlay__label{
  display:block; font-size: clamp(22px, 2.3vw, 30px);
  line-height:1.25; letter-spacing:.02em;
}
#xmas25 .x25-overlay__sub{
  display:block; margin-top:6px; font-size:12px; letter-spacing:.22em; color:#6b8a91;
}

/* ホバー下線（上品に） */
#xmas25 .x25-overlay__item a{
  position:relative; padding-bottom:6px;
}
#xmas25 .x25-overlay__item a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:#1e4b53; opacity:.65;
  transition:width .28s ease;
}
#xmas25 .x25-overlay__item a:hover::after{ width:100%; }

/* 下部画像帯（右側下に見切れる感じ） */
#xmas25 .x25-overlay__bottom{
  overflow:hidden;
}
/* PC: 画面高の30% / SP: 25% */
#xmas25 .x25-overlay__bottom img{
  display: block;
  width: 100%;
  height: 30vh;                  /* ← 画面高の30% */
  object-fit: cover;
  object-position: center;
}

/* SP時は少し浅め（25%） */
@media (max-width: 720px){
  #xmas25 .x25-overlay__bottom img{
    height: 25vh;
  }
}

/* ===== Concept: 左右50%固定 + cover ===== */
#xmas25 .x25-concept{
  position: relative;
  padding: clamp(100px, 12vw, 160px) 0;
  color:#fff;
  overflow:hidden;
}

/* 左：写真（cover） */
#xmas25 .x25-concept::before,
#xmas25 .x25-concept::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:50%;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;              /* ← アス比維持でトリミング */
  z-index:0;
}
#xmas25 .x25-concept::before{
  left:0;
  background-image:url("/page/xmas/2025/img/top/visual-window.jpg");
}

/* 右：背景（cover）＋上にグラデを重ねる */
#xmas25 .x25-concept::after{
  right:0;
  /* 右は画像の上に薄いグラデを重ねる */
  background-image:
    linear-gradient(180deg, rgba(8,20,24,.28), rgba(8,20,24,.54)),
    url("/page/xmas/2025/img/top/bg-right.jpg");
  background-size:cover, cover;       /* ← 両方とも cover */
  background-position:center, center;
}

/* 中身は前面に */
#xmas25 .x25-concept__inner{ position:relative; z-index:1; display:grid; grid-template-columns:50% 50%; width:min(1200px,94%); margin:0 auto; }
#xmas25 .x25-concept__title{ grid-column:1 / -1; text-align:center; font-size:clamp(22px,3.1vw,36px); letter-spacing:.18em; margin:0 0 clamp(36px,4vw,52px); text-shadow:0 2px 12px rgba(0,0,0,.25); }
#xmas25 .x25-concept__grid{ display:contents; } /* ← 既に入れてくれたやつでOK */
#xmas25 .x25-concept__text{ grid-column:2; padding:0 clamp(40px,4vw,60px); line-height:2.1; color:rgba(255,255,255,.9); }


/* 見出しは全幅中央寄せ */
#xmas25 .x25-concept__title {
  grid-column: 1 / -1;
  text-align: center;
  font-size: clamp(22px, 3.1vw, 36px);
  letter-spacing: .18em;
  font-weight: 600;
  margin: 0 0 clamp(36px, 4vw, 52px);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

/* 右半分：テキスト */
#xmas25 .x25-concept__grid {
  display: contents;
}
#xmas25 .x25-concept__text {
  grid-column: 2; /* 右カラムに限定 */
  width: 45vw;
  padding: 0 clamp(40px, 4vw, 60px);
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 2.1;
  color: rgba(255,255,255,.9);
}
#xmas25 .x25-concept__text p {
  margin: 0 0 1.1em;
}

#xmas25 .x25-concept__lead {
  margin-top: 1.6em;
  font-size: clamp(24px, 2vw, 28px);
  letter-spacing: .12em;
  color: #e8f4f7;
}

/* ふわっとIN（任意） */
#xmas25 .x25-concept__text{ opacity:0; transform:translateY(12px); transition:.6s ease; }
#xmas25 .x25-concept.is-inview .x25-concept__text{ opacity:1; transform:none; }

/* ===== Items / Lineup ===== */
#xmas25 .x25-lineup{
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  background: #f7f1e7; /* ベース（必要なら変えて） */
  overflow: hidden;
}
#xmas25 .x25-lineup__inner{
  width: min(1160px, 92%);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

#xmas25 .x25-lineup__eyebrow{
  font-size: 12px;
  letter-spacing: .24em;
  color: #b6a78f;
  margin: 0 0 .6rem;
}
#xmas25 .x25-lineup__title{
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.9;
  letter-spacing: .12em;
  color: #5a5a5a;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
#xmas25 .x25-lineup__grid{
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
  grid-template-columns: repeat(12, 1fr); /* 後でカードを入れていく想定 */
}

/* ===== Lineup セクション ===== */
#xmas25 .x25-lineup{
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  background: #fbf7ef;
  overflow: hidden;
}

#xmas25 .x25-lineup__inner{
  width: min(1600px, 92%);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* 左上の小見出し */
#xmas25 .x25-eyebrow{
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  letter-spacing: .24em;
  color: #b6a78f;
  margin: 0 0 .6rem;
}

#xmas25 .x25-eyebrow .x25-eyebrow__en{
  font-size: 24px;
  letter-spacing: .24em;
  color: #b6a78f;
  margin: 0 0 .6rem;
}

/* セクションの大見出し（中央） */
#xmas25 .x25-sec-title{
  text-align: center;
  color: #817723;
  font-size: clamp(28px, 2.7vw, 34px);
  line-height: 1.9;
  letter-spacing: .12em;
  margin:clamp(45px, 4.9vw, 70px) 0 clamp(40px, 4.8vw, 60px) 0;
}

#xmas25 .x25-lineup__inner img{
  width: 100%;
}

/* カードグリッド */
#xmas25 .x25-cardgrid{
  display: grid;
  gap: clamp(22px, 2.5vw, 34px);
  grid-template-columns: repeat(3, 1fr); /* PCは3列 */
}
@media (max-width: 1100px){
  #xmas25 .x25-cardgrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  #xmas25 .x25-cardgrid{ grid-template-columns: 1fr; }
}

/* カード本体 */
#xmas25 .x25-card{
  display: block;
  text-decoration: none;
  color: inherit;
}
#xmas25 .x25-card__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 430px;
  max-height: 430px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#xmas25 .x25-card__thumb img{
  width: 80%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .45s ease
}
/* hover時 */
#xmas25 .x25-card:hover .x25-card__thumb img {
  transform: scale(1.05); /* 拡大しても切れない範囲 */
}

#xmas25 .x25-card__meta{
  margin-top: .8rem;
}
#xmas25 .x25-card__meta h3{
  font-size: clamp(18px, 1.6vw, 20px);
  color: #817723;
  letter-spacing: .08em;
  margin: 0;
  position: relative;
  display: inline-block;
}
#xmas25 .x25-card__meta h3::after{
  content:"";
  display:block;
  height: 1px;
  width: 140px;
  margin-top: .6rem;
  background: linear-gradient(90deg, #d2c7a4, #e6dcc0 70%, transparent 70%);
  opacity:.7;
}

/* ===== 共通ボタン（角丸・内側面取り・二重枠） ===== */
#xmas25 .x25-lineup__cta{
  margin: clamp(28px, 4vw, 48px) 0;
  text-align: center;
}

#xmas25 .x25-btn{
  --x25-btn-bg: #9c8e4e;         /* 背景色（ゴールド） */
  --x25-btn-fg: #fff;            /* 文字色 */
  --x25-btn-bd: #cfc398;         /* 外枠色 */
  --x25-btn-in: #d9cfab;         /* 内枠色 */
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;                  /* 文字と＊の間隔 */
  padding: 25px 75px;
  position: relative;
  color: var(--x25-btn-fg);
  text-decoration: none;
  letter-spacing: .12em;
  /* 外枠（細） */
  box-shadow: 0 0 0 1px var(--x25-btn-bd) inset;
  position: relative;
  z-index: 0;
}

/* 内側の面取りパネル */
#xmas25 .x25-btn::before{
  content:"";
  position:absolute; inset: 6px;
  background: var(--x25-btn-bg);
  z-index:-1;
}

/* テキスト＆＊ */
#xmas25 .x25-btn__label{ font-size: clamp(16px,1.8vw,20px); }
#xmas25 .x25-btn__star{ font-size: clamp(16px,1.8vw,22px); line-height: 1; }

/* Hover */
#xmas25 .x25-btn:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  transition: transform .2s ease, filter .2s ease;
}

/* ===== Gift Promo（lineup の最下部） ===== */
#xmas25 .x25-giftpromo{
  position: relative;
  z-index: 1;
  margin: clamp(40px, 6vw, 72px) 0 0;
}
#xmas25 .x25-giftpromo__frame{
  width: min(1600px, 92%);
  margin: 0 auto;
  position: relative;
  padding: clamp(16px, 1.8vw, 20px);
  box-shadow: 0 0 0 1px #cfc398 inset;
}
#xmas25 .x25-giftpromo__wrap{
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  background: #fffefa;
  padding: clamp(18px, 2vw, 26px);
  position: relative;
  z-index: 0;
}
#xmas25 .x25-giftpromo__image{
  margin: 0;
  padding: clamp(6px, .8vw, 10px);
}
#xmas25 .x25-giftpromo__image img{
  height: auto;
  display: block;
}
#xmas25 .x25-giftpromo__title{
  margin: 0 0 .6rem;
  font-size: clamp(18px, 2.1vw, 26px);
  letter-spacing: .16em;
  color: #6b604a;
}
#xmas25 .x25-giftpromo__desc{
  margin: 0 0 clamp(14px, 1.4vw, 18px);
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: .12em;
  color: #8a7f68;
}

/* lineupの共通ボタンを流用しつつ、間隔だけ調整 */
#xmas25 .x25-giftpromo__buttons{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
}
#xmas25 .x25-giftpromo__buttons .x25-btn{
  margin: 0; /* 余計な上下マージンをリセット */
}

@media (max-width: 900px){
  #xmas25 .x25-giftpromo__wrap{
    grid-template-columns: 1fr;
    text-align: center;
  }
  #xmas25 .x25-giftpromo__buttons{
    justify-content: center;
  }
}

/* ===== 右側の英字：下から上にゆっくりスクロール ===== */
#xmas25 .x25-lineup__scrolling-word{
  position: absolute;
  inset: 0 0 0 auto;
  width: clamp(320px, 90vw, 400px);
  pointer-events: none;
  z-index: 0;
  /* 上下をやさしくフェードさせるマスク */
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to top, transparent 0, #000 10%, #000 90%, transparent 100%);
}

/* スクロールレーン */
#xmas25 .x25-lineup__track{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;                   /* テキスト同士の間隔 */
  animation: x25-vertMarquee var(--x25-vert-speed, 110s) linear infinite;
}

/* テキスト本体（縦書き風に見えるように縦方向に流す） */
#xmas25 .x25-lineup__track span{
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1;
  letter-spacing: .08em;
  font-size: clamp(310px, 80vw, 360px);
  color: rgba(226, 209, 182, 0.22);
  white-space: nowrap;
}

/* 無限ループで下→上へ */
@keyframes x25-vertMarquee{
  0%   { transform: translate(-50%, 0); }
  100% { transform: translate(-50%, -100%); } /* 自身の高さ分だけ上へ */
}

/* 動きを抑制するユーザー設定に配慮 */
@media (prefers-reduced-motion: reduce){
  #xmas25 .x25-lineup__track{ animation: none; top: 50%; transform: translate(-50%, -50%); }
}

/* ===== SOCIAL（読みやすいサイズへ調整） ===== */
#xmas25 .x25-social{
  background:#fffefa;
  padding: clamp(56px,7vw,96px) 0;
  font-size: 16px;
  line-height: 1.8;
}
#xmas25 .x25-social__inner{
  width:min(1600px,92%);
  margin-inline:auto;
}

/* ヘッダー行 */
#xmas25 .x25-social__head{
  display:grid;
  grid-template-columns: 1fr minmax(340px,460px);
  align-items:center;
  gap:clamp(20px,3vw,40px);
  padding: 0 60px;
}

#xmas25 .x25-social__head .x25-eyebrow{
 font-size: 70px;
}

#xmas25 .x25-social__title{
  font-size: clamp(22px,2.2vw,30px);
  line-height:1.9;
  letter-spacing:.12em;
  color:#6b604a;
  margin:.4rem 0 1rem;
}
#xmas25 .x25-social__desc{
  color:#8a7f68;
  font-size: clamp(15px,1.2vw,17px);
  letter-spacing:.06em;
  margin:0 0 1.4rem;
}
#xmas25 .x25-social__btns{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
#xmas25 .x25-snsbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border:1px solid #cfc398;
  background:#9b9246;
  color:#fff;
  text-decoration:none;
  font-size:16px;
  letter-spacing:.08em;
  transition: all .25s ease;
}
#xmas25 .x25-snsbtn:hover{
  background:#857d39;
  transform:translateY(-1px);
}
#xmas25 .x25-snsbtn img{
  width:20px;
  height:auto;
  display:block;
}

/* カード一覧 */
#xmas25 .x25-social__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px,2vw,24px);
  margin-top: clamp(8px,1vw,12px);
}
@media (max-width:1000px){
  #xmas25 .x25-social__grid{ grid-template-columns: repeat(2, 1fr); }
}
#xmas25 .x25-post__thumb{
  position:relative;
  aspect-ratio: 1/1;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(207,195,152,.6);
}
#xmas25 .x25-post__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#xmas25 .x25-post__badge{
  position:absolute;
  left:0;
  top:0;
  font-size:21px;
  color:#fff;
  background:#9c8e4e;
  padding:.3em .7em;
  border-radius:2px;
}
#xmas25 .x25-post__soon{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  font-family:"Cormorant Garamond",serif;
  font-size: clamp(22px,3.4vw,38px);
  line-height:1.2;
  color:rgba(255,255,255,.9);
  background:linear-gradient(to bottom, rgba(154,138,96,.05), rgba(154,138,96,.25));
  text-shadow:0 1px 8px rgba(0,0,0,.18);
}
#xmas25 .x25-post__meta{
  padding:.8rem 0 .5rem;
  color:#6a6a6a;
}
#xmas25 .x25-post__date{
  font-size:15px;
  color:#8a7f68;
  margin:.3rem 0;
}
#xmas25 .x25-post__ttl{
  font-size:17px;
  margin:.3rem 0;
  letter-spacing:.08em;
}
#xmas25 .x25-post__excerpt{
  font-size:15px;
  color:#8a7f68;
  line-height:1.8;
  margin:.3rem 0 .4rem;
}
#xmas25 .x25-post__more{
  font-size:15px;
  color:#6b604a;
  text-decoration:none;
}

/* Magazine */
#xmas25 .x25-mag{
  display: flex;
    flex-direction: row;
    justify-content: space-between;
  gap: clamp(24px,3vw,48px);
  align-items:center;
  margin: clamp(40px,6vw,80px) 0;
}
@media (max-width:900px){
  #xmas25 .x25-mag{ grid-template-columns:1fr; }
}
#xmas25 .x25-mag__brand {
  margin: 0 0 .8rem;
}
#xmas25 .x25-mag__brand img {
  display: block;
  width: clamp(180px, 20vw, 240px);
  height: auto;
}

#xmas25 .x25-mag__title{
  font-size: clamp(40px,4vw,45px);
  line-height:1.8;
  letter-spacing:.12em;
  color:#6b604a;
  margin:.4rem 0 1rem;
}
#xmas25 .x25-mag__desc{
  color:#8a7f68;
  font-size:16px;
  letter-spacing:.08em;
  margin:0 0 1.2rem;
  line-height:1.9;
}
#xmas25 .x25-mag__cta{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
}
#xmas25 .x25-mag__more{
  font-size:15px;
  color:#6b604a;
  text-decoration:none;
}

/* 下段バナー */
#xmas25 .x25-slab{
  display:block;
  text-decoration:none;
  color:inherit;
  margin-top: clamp(32px,5vw,56px);
  border:1px solid #cfc398;
  background:#faf8f3;
}
#xmas25 .x25-slab__inner{
  position:relative;
  padding: clamp(28px,4vw,40px);
  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:center;
  row-gap:16px;
}
#xmas25 .x25-slab__copy {
  text-align: center;
}
#xmas25 .x25-slab__copy p{
  margin:0 0 12px;
  color:#817723;
  font-size:29px;
  text-align: center;
  letter-spacing:.14em;
  line-height:1.8;
}
#xmas25 .x25-slab__art img{
  width:100%;
  height:auto;
  display:block;
}
@media (max-width:720px){
  #xmas25 .x25-slab__inner{ grid-template-columns:1fr; }
  #xmas25 .x25-slab__art{ justify-self:end; }
}

/* ===== Footer ===== */
#xmas25 .x25-footer {
  font-family: "Zen Old Mincho", serif;
  color: #fff;
}

/* 上段：背景画像とロゴ・SNS */
#xmas25 .x25-footer__upper {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    background: url(/page/xmas/2025/img/top/pc-main-img-menu.jpg) center / cover no-repeat;
    padding: clamp(50px, 8vw, 90px) clamp(170px, 15vw, 210px);
}

/* 左画像 */
#xmas25 .x25-footer__art img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 右側ロゴ・SNS */
#xmas25 .x25-footer__brand {
  text-align: center;
}

#xmas25 .x25-footer__logo {
  width: clamp(140px, 18vw, 200px);
  height: auto;
  margin: 0 auto 24px;
  display: block;
}

#xmas25 .x25-footer__sns {
  display: flex;
  justify-content: center;
  gap: 22px;
}

#xmas25 .x25-footer__sns img {
  width: 28px;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
  opacity: 0.9;
}

#xmas25 .x25-footer__sns a:hover img {
  opacity: 1;
}

/* 下段コピーライト */
#xmas25 .x25-footer__lower {
  background: #164854;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== レスポンシブ ===== */
@media (max-width: 900px) {
  #xmas25 .x25-footer__upper {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 60px 20px;
  }

  #xmas25 .x25-footer__art {
    order: 2;
    margin-top: 40px;
  }

  #xmas25 .x25-footer__logo {
    width: 160px;
  }
}

