@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
 * 花岡のクリスマスケーキ 2026（/2026/Xmas/index.html 専用）
 *
 *  1. 基本（変数・文字サイズ・共通）
 *  2. 背景・表紙
 *  3. ケーキ一覧（カード・バッジ・予約受付終了）
 *  4. ポップアップ
 *  5. サイズ比較
 *  6. ご予約承りについて
 *  7. マグカップ・来店のお願い・店舗一覧
 *  8. フッター・TOPへ戻る
 *  9. 降る雪の結晶
 * 10. 動きを減らす設定の端末
 *
 * サイト共通の style.css は読み込まず、このページに必要な分だけをここに持つ
 * （style.css にある Web フォント5種の @import と、.soldOut クラスの衝突を避けるため）。
 * ///////////////////////////////////////////////////////////////// */

/* ==================================================================
 * 1. 基本
 * ================================================================== */
:root {
  --headerH: 80px;   /* index.html のスクリプトで実際のヘッダー高さに置き換え */
  --x26Navy: #0f3e74;
  --x26Gold: #a8820f;
  --x26Line: #c9a24a;    /* 金の罫線・枠 */
  --x26Cream: #f4f0e3;
  --x26Brown: #693905;
  --x26Red: #b8232f;
  --x26SnowBg: url("/images/2026/Xmas/bg_snow.jpg");   /* 雪の結晶の背景（WebP 対応端末は下で差し替え） */
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  :root {
    --x26SnowBg: image-set(url("/images/2026/Xmas/bg_snow.webp") type("image/webp"), url("/images/2026/Xmas/bg_snow.jpg") type("image/jpeg"));
  }
}
/* 文字サイズ（rem の基準）：画面幅に合わせてなめらかに変える
   スマホ：390px 幅で約 14px（360px→12.9px、430px→15px）
   576px 以上：768px→12.7px、1024px→13.6px、1440px→15px、1920px→16.7px */
html {
  font-size: clamp(12px, 3.5714vw, 15px);
}
@media (min-width: 576px) {
  html {
    font-size: calc(10px + .35vw);
  }
}
body {
  font-family: "Noto Serif JP", serif;
  color: #555;
  background-color: var(--x26Navy);
}
a {
  text-decoration: none;
}
p {
  color: #000;
}
main p {
  color: #fff;
}
.modal-header {
  border: 0;
  border-radius: 0;
}

/* ==================================================================
 * 2. 背景・表紙
 * ================================================================== */
/* 固定背景（パンフレット ウラ面の青と雪の結晶）
   background-attachment: fixed は iPad / iPhone で効かないため position: fixed の擬似要素で固定 */
body.xmas2026::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--x26Navy) var(--x26SnowBg) center / cover no-repeat;
}

/* 表紙：最初は「Merry Christmas」と五線譜。ピアノの猫→五線譜の飾りの順にフェードインし、
   五線譜の途中から横と下部の演奏者が加わる */
.xmasCover {
  display: flex;
  justify-content: center;
  padding-top: var(--headerH);
}
.coverFrame {
  position: relative;
  width: 100%;              /* スマホ：画面幅いっぱい */
  aspect-ratio: 1000 / 2828;
}
.coverFrame img {
  display: block;
  width: 100%;
  height: auto;
}
.coverFrame .layer {
  position: absolute;
  opacity: 0;
  animation: x26LayerIn 1.2s ease-out forwards;
}
.coverFrame .deco {
  animation-name: x26DecoIn;
  animation-duration: .9s;
}
/* 位置は表紙に対する％（images/animal_positions.json）。
   順番：ピアノの猫 → 五線譜の飾り（ト音記号から時計回り）。
   横の演奏者（バイオリン・ホルン）は五線譜の前半から、下部の演奏者（トランペット→チューバ）は後半の手前から重ねて出す */
.coverFrame .deco.clef     { left: 14.83%; top: 35.77%; width: 15.47%; animation-delay: 1.30s; }
.coverFrame .deco.snow2    { left: 28.69%; top: 31.60%; width: 10.72%; animation-delay: 1.55s; }
.coverFrame .deco.note1    { left: 46.25%; top: 29.67%; width: 13.86%; animation-delay: 1.80s; }
.coverFrame .deco.snow1    { left: 80.50%; top: 26.65%; width: 10.72%; animation-delay: 2.05s; }
.coverFrame .deco.hat      { left: 90.98%; top: 31.15%; width:  9.02%; animation-delay: 2.30s; }
.coverFrame .deco.cane     { left: 91.06%; top: 70.90%; width:  8.94%; animation-delay: 2.55s; }
.coverFrame .deco.note3    { left: 75.42%; top: 74.10%; width:  5.00%; animation-delay: 2.80s; }
.coverFrame .deco.snow5    { left: 58.90%; top: 73.78%; width: 10.72%; animation-delay: 3.05s; }
.coverFrame .deco.note4    { left: 43.43%; top: 70.13%; width: 13.38%; animation-delay: 3.30s; }
.coverFrame .deco.snow4    { left: 25.87%; top: 70.36%; width: 10.72%; animation-delay: 3.55s; }
.coverFrame .deco.stocking { left:  9.83%; top: 60.93%; width: 13.30%; animation-delay: 3.80s; }
.coverFrame .deco.snow3    { left:  2.66%; top: 54.35%; width: 10.72%; animation-delay: 4.05s; }
.coverFrame .deco.note2    { left: 10.15%; top: 47.02%; width: 11.44%; animation-delay: 4.30s; }
.coverFrame .animal.piano    { left: 40.61%; top:  3.48%; width: 59.39%; animation-delay: 0.60s; }
.coverFrame .animal.violin   { left: 14.83%; top:  3.82%; width: 37.47%; animation-delay: 1.85s; }
.coverFrame .animal.horn     { left:  3.38%; top: 14.42%; width: 30.46%; animation-delay: 2.25s; }
.coverFrame .animal.tuba     { left:  6.61%; top: 78.00%; width: 34.25%; animation-delay: 3.20s; }
.coverFrame .animal.trumpet  { left: 40.61%; top: 80.36%; width: 57.21%; animation-delay: 2.60s; }

/* スクロールで見えるまで待つもの（xmas_script.js の 3） */
.coverFrame .layer.x26Wait {
  animation: none;
}

@keyframes x26LayerIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes x26DecoIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}
/* sm以上（小型タブレット〜PC）：表紙を中央に置き、画面の高さに収める（1000/2828 = .3536） */
@media (min-width: 576px) {
  .xmasCover {
    padding: var(--headerH) 16px 24px;
  }
  .coverFrame {
    width: clamp(300px, calc((100vh - var(--headerH) - 24px) * .3536), 560px);
    width: clamp(300px, calc((100svh - var(--headerH) - 24px) * .3536), 560px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
  }
}

/* ==================================================================
 * 3. ケーキ一覧
 * ================================================================== */
.cakeCard {
  color: #fff;
  text-align: center;
  background-color: rgba(6, 30, 70, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: .8rem;
  overflow: hidden;
}
.cakePhoto {
  padding: 1rem 1rem 1.25rem;   /* 写真と商品名（バッジ）の間に余白 */
}
/* 枠の幅いっぱい・高さは最大 320px。読み込み前から width/height 属性の比率で場所を確保するので、
   写真が届いたときに下の内容がずれない（写真の比率は object-fit で保つ） */
.cakePhoto img {
  width: 100%;
  max-width: 360px;             /* PC は 360px（img の sizes と同じ） */
  height: auto;
  max-height: 320px;
  object-fit: contain;
}
/* 横長カード（わいわいタルト）：lg 以上は写真と文字をひとまとまりにしてカード中央に置く
   （<section> の class に cakeWide を付けたカードだけに効く） */
@media (min-width: 992px) {
  .cakeWide .cakeCard > .row { justify-content: center; }
  .cakeWide .cakePhoto { flex: 0 0 auto; width: auto; }
  .cakeWide .cakePhoto img { width: 360px; }
  .cakeWide .cakePhoto + div { flex: 0 0 auto; width: 30rem; margin-left: 2.5rem; padding-top: 1.8rem; }   /* バッジの上に余白 */
}
#XmasCakes .cakeName {
  margin: .8rem 0 1.3rem;   /* 上：バッジとの間／下：説明文との間 */
  font-weight: bold;
}
.cakeNameImg {
  max-width: 88%;
  height: auto;
}
.cakeSubImg {
  display: block;
  width: 34%;
  height: auto;
  margin: .3rem auto 0;
}
.cakeBadges {
  min-height: 2.2rem;
  margin-bottom: 1rem;   /* バッジと商品名の間 */
}
/* 限定数・初登場などのバッジ：読みやすいよう少し大きめにし、影で背景から浮かせる */
.cakeBadge {
  display: inline-block;
  margin: 0 .2rem .3rem;
  padding: .2rem .95rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: .95rem;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #fff;
  background-color: var(--x26Gold);
  border-radius: 2rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.cakeBadge.newItem {
  background-color: #e8789a;
}
@media (min-width: 992px) {
  .cakeBadge { font-size: 1rem; }
}
/* 予約受付終了：商品の <section> の class に soldOut を追加すると、
   カードとポップアップの「ご予約受付終了」バッジと案内が表示される */
.cakeBadge.endBadge,
.endBox {
  display: none;
}
.soldOut .cakeBadge.endBadge {
  display: inline-block;
  background-color: var(--x26Red);
}
.soldOut .cakeBadge.limitBadge {
  color: #e6e6e6;
  background-color: #7a7a7a;
  text-decoration: line-through;
  opacity: .85;
}
.soldOut .endBox {
  display: inline-block;
  margin: .2rem auto .6rem;
  padding: .35rem 1.2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
  letter-spacing: .05em;
  color: var(--x26Red);
  background-color: #fff;
  border: 2px solid var(--x26Red);
  border-radius: .3rem;
}
.cakeLead {
  margin-bottom: 1.4rem;   /* 説明文とボタンの間 */
  font-size: .95rem;
  text-align: left;
  color: #fff;
}
/* 詳細ボタン（クリーム） */
#XmasCakes .cakeBtn {
  margin: 1.1rem 0 1.2rem;
  font-weight: bold;
  color: var(--x26Brown);
  background-color: var(--x26Cream);
  border: 0;
}
#XmasCakes .cakeBtn:hover,
#XmasCakes .cakeBtn:focus-visible {
  color: var(--x26Brown);
  background-color: #fffaf0;
}
/* 注意書き：上下を金の飾り罫で挟む */
.cakeNotes {
  position: relative;
  padding: .8rem 0;
  text-align: center;
}
.cakeNotes::before,
.cakeNotes::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--x26Line), transparent);
}
.cakeNotes::before { top: 0; }
.cakeNotes::after { bottom: 0; }
.cakeNotes p {
  margin: .15rem 0;
  font-size: .9rem;
  color: #fff;
}
.cakeNotes .noteDot {
  margin-right: .3rem;
  color: #e9cf7f;
}

/* ==================================================================
 * 4. ポップアップ
 * ================================================================== */
.popWaku {
  border: 1px solid #fff;                            /* 縁がわかるよう白線＋ふんわり光 */
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, .35);
  overflow: hidden;
}
.popHeader {
  background-color: var(--x26Navy);
}
.popNameImg {
  width: auto;
  height: 2.6rem;
}
/* 下線のない文字だけの商品名（パーティー・デコ、シュトーレン）は、手書きの商品名と文字の大きさをそろえる。
   上下の margin でヘッダーの高さは他の商品と同じにする */
.popNameImg.popNameText {
  height: 1.25rem;
  margin: .675rem 0;
}
/* 横長の商品名（あわてんぼうのサンタさん＋和菓子デコ）は画面幅に合わせて縮める */
.popNameImg.popNameWide {
  width: min(78vw, 26.5rem);
  height: auto;
}
.popPhoto {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background: var(--x26Navy) var(--x26SnowBg) center / cover no-repeat;
}
.popPhoto img {
  width: 100%;
  max-width: 460px;             /* PC は 460px（img の sizes と同じ） */
  height: auto;
  max-height: 420px;
  object-fit: contain;
}
.popDetail {
  background-color: #fff;
}
/* ポップアップ内のスクロールバー：細い金色（Windows の太い灰色のバーを目立たせない） */
.modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--x26Line) var(--x26Navy);
}
.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-track {
  background-color: var(--x26Navy);
}
.modal-body::-webkit-scrollbar-thumb {
  background-color: var(--x26Line);
  border-radius: 3px;
}
/* イラスト・解説・アレルギー表記を一体にした画像。文字が読める大きさで表示する */
.popIllust {
  width: 100%;
  max-width: 600px;
  height: auto;
}
/* わいわいタルト：丸い図と説明、その下に6種のタルトを個別の画像で並べる */
.popIllust.popIllustCircle {
  max-width: 340px;
}
.popTarts {
  max-width: 620px;   /* 2個並びの間が空きすぎないように */
  margin: 0 auto;
}
.popTartImg {
  width: 100%;
  max-width: 280px;   /* 他の商品のイラストと文字の大きさをそろえる */
  height: auto;
}
/* sm 未満は1列。他の商品のイラスト（幅735px の画像を枠いっぱい）と文字の大きさをそろえる */
@media (max-width: 575.98px) {
  .popTartImg { width: 72%; max-width: none; }
}
.popLead {
  color: var(--x26Brown);
}
/* 価格 */
.price {
  margin-right: 1rem;
  margin-bottom: .1rem;
  font-size: 1.6rem;
  font-style: italic;
  color: #909090;
}
.priceP {
  color: var(--x26Brown);
}
.priceS {
  font-size: 1rem;
  color: #909090;
}
.pnc {
  margin-right: .1rem;
  font-size: 1rem;
  color: #bfa473;
}
.pnc1 {
  margin-right: .5rem;
}
/* ポップアップの価格：上下に余白（サイズ違いの価格が並ぶ時も仕切り線から離す） */
.popDetail .price {
  margin-top: .6rem;
  margin-bottom: .8rem;
}
/* バッジ付きの価格は、バッジの上に余白を取る */
.popDetail .cakeBadges {
  margin-top: 1rem;
}
/* lg 以上（写真と価格が横並び）は価格を小さめに */
@media (min-width: 992px) {
  .popDetail .price { font-size: 1.3rem; margin-right: 0; }
  .popDetail .priceS,
  .popDetail .pnc { font-size: .85rem; }
}
/* サイズごとの仕切り線：左右がフェードアウトする金の線＋中央に雪の結晶 */
.priceLine {
  position: relative;
}
.priceLine::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--x26Line) 50%, transparent);
}
.priceLine::before {
  content: "❄";
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  padding: 0 .4rem;
  font-size: .75rem;
  line-height: 1;
  color: #b8a06a;
  background-color: #fff;
  transform: translate(-50%, 50%);
}
/* 注意書き */
.popNotes {
  background-color: #fff;
}
.popNotes .pnIn {
  margin: 0 1rem;
  padding: .7rem .8rem;
  text-align: center;
  border-top: 1px dashed var(--x26Line);
}
.popNotes p {
  margin: .12rem 0;
  padding-left: 1.3em;
  text-indent: -1.3em;
  font-size: .8rem;
  color: var(--x26Brown);
}
.popNotes .noteDot {
  display: inline-block;
  width: 1.3em;
  text-indent: 0;
  color: var(--x26Line);
}
/* 下の「閉じる」（文字の大きさは Bootstrap の .h4 と同じ） */
.popClose {
  display: block;
  width: 100%;
  padding: 1rem 0;
  font-size: calc(1.275rem + .3vw);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background-color: var(--x26Navy);
  border: 0;
}
@media (min-width: 1200px) {
  .popClose { font-size: 1.5rem; }
}

/* ==================================================================
 * 5. サイズ比較
 * ================================================================== */
#xmasCakeSize .CakeBG {
  margin: 0 6px;                     /* 外側の金線を商品カードの縦ラインにそろえる */
  background-color: var(--x26Cream);
  border: 2px solid var(--x26Line);
  border-radius: .8rem;
  box-shadow: 0 0 0 5px var(--x26Cream), 0 0 0 6px var(--x26Line), 0 6px 16px rgba(0, 0, 0, .35);  /* 金の二重枠 */
}
#xmasCakeSize .CakeBG h2 {
  position: relative;
  font-weight: bold;
  color: var(--x26Brown);
}
/* タイトル下の金の線：価格の仕切り線と同じく、左右の端に向かってフェードアウト */
#xmasCakeSize .CakeBG h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;   /* クリーム地では 1px だと薄いので 2px */
  background: linear-gradient(90deg, transparent, var(--x26Line) 50%, transparent);
}
.sizeTxt {
  margin: .3rem 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--x26Brown);
}
.sizeTxt small {
  font-size: .78rem;
}

/* ==================================================================
 * 6. ご予約承りについて
 * ================================================================== */
#XmasCakeInfo {
  background-color: var(--x26Cream);
}
/* タイトル「ご予約承りについて」：紺の太字＋両脇に金の◆ */
#XmasCakeInfo h2 {
  font-weight: bold;
  color: var(--x26Navy);
  text-shadow: 2px 2px 3px #fff;
}
#XmasCakeInfo h2::before,
#XmasCakeInfo h2::after {
  content: "◆";
  margin: 0 .8em;
  font-size: .5em;
  vertical-align: middle;
  color: var(--x26Line);
}
.InfoBorder {
  border-bottom: 1px solid #bfa473;
}
/* 見出しの上下の飾り線（左右の飾りの高さ約108px に対し、線の画像 80px を 74% に合わせる） */
.infoline01,
.infoline02 {
  padding: 0;
  background-position: center;
  background-repeat: repeat-x;
  background-size: auto 74%;
}
.infoline01 { background-image: url("/images/2025/Xmas/XmasCakeInfo_line1.png"); }
.infoline02 { background-image: url("/images/2025/Xmas/XmasCakeInfo_line2.png"); }

.ciWrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem 1rem;
}
.ciWrap p,
.ciWrap li {
  color: #3b2a1a;
}
/* 予約期間・お渡し期間（紺の枠） */
.ciPeriod {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2.2rem;
}
.ciP {
  flex: 1 1 18rem;
  padding: 1.1rem .5rem;
  text-align: center;
  background-color: var(--x26Navy);
  border-radius: .6rem;
  box-shadow: inset 0 0 0 1px var(--x26Line), inset 0 0 0 5px var(--x26Navy), inset 0 0 0 6px rgba(201, 162, 74, .6);
}
.ciLbl {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: bold;
  letter-spacing: .1em;
  color: #e9cf7f;
}
.ciDate {
  font-size: 1.4rem;
  line-height: 1.3;
  color: #fff;
}
.ciDate b {
  margin: 0 .1rem;
  font-size: 3rem;
  font-weight: normal;
  color: #fff500;
}
.ciDate small {
  font-size: 1rem;
}
/* 白いカード＋紺の見出し帯 */
.ciBlk {
  margin-bottom: 1.8rem;
  padding: 0 1.5rem 1.4rem;
  background-color: #fff;
  border: 1px solid var(--x26Line);
  border-radius: .6rem;
  overflow: hidden;
}
.ciH {
  margin: 0 -1.5rem 1.2rem;
  padding: .6rem;
  font-size: 1.5rem;
  text-align: center;
  color: #fff;
  background-color: var(--x26Navy);
  border-bottom: 2px solid var(--x26Line);
}
.ciSub {
  margin-bottom: .2rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--x26Brown);
}
.ciMk {
  margin-right: .4rem;
  font-size: .85em;
  color: var(--x26Line);
}
.ciTx {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.8;
}
.ciApply {
  padding: .7rem 1rem;
  background-color: var(--x26Cream);
  border-radius: .4rem;
}
.ciApplyT {
  display: block;
  margin-bottom: .2rem;
  font-size: 1rem;
  font-weight: bold;
  color: var(--x26Brown);
}
.ciList {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.ciList li {
  position: relative;
  padding: .25rem 0 .25rem 1.4em;
  font-size: 1rem;
  line-height: 1.8;
}
.ciList li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: .3rem;
  font-size: .8em;
  color: var(--x26Line);
}
.ciList strong {
  color: var(--x26Red);
}
@media (max-width: 575px) {
  .ciDate { font-size: 1.15rem; }
  .ciDate b { font-size: 2.3rem; }
  .ciBlk { padding: 0 1rem 1.1rem; }
  .ciH { margin: 0 -1rem 1rem; font-size: 1.3rem; }
  .ciTx,
  .ciList li { font-size: .95rem; }
}

/* ==================================================================
 * 7. マグカップ・来店のお願い・店舗一覧
 * ================================================================== */
.loWrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem;
}
/* マグカップは「ご予約について」カードの下部に配置 */
.loMug {
  margin: .6rem 0 0;   /* 画像上部の透明な余白があるので小さめ */
}
.loMugIn {
  text-align: center;   /* 画像の影より外側は透明。ページのクリーム色がそのまま見える */
}
.loMugNote {
  margin: .3rem 0 0;
  font-size: .85rem;
  color: #3b2a1a;
}
.loRai {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 2.2rem;
  padding: 1rem 1.2rem;
  background-color: #fff;
  border: 2px solid var(--x26Red);
  border-radius: .6rem;
}
.loRai p {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.7;
  color: var(--x26Red);
}
.loRaiIc {
  display: flex;
  flex: 0 0 2rem;
  align-items: center;
  justify-content: center;
  height: 2rem;
  font-weight: bold;
  color: #fff;
  background-color: var(--x26Red);
  border-radius: 50%;
}
.loRes {
  max-width: 46rem;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.loLogo {
  position: relative;
  width: min(60%, 18rem);
  margin: 0 auto 1.4rem;
  padding-bottom: .8rem;
}
.loLogo::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--x26Line) 50%, transparent);
}
.loGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
.loSt {
  padding: 1rem .5rem;
  text-align: center;
  background-color: var(--x26Navy);
  border-radius: .6rem;
  box-shadow: inset 0 0 0 1px var(--x26Line), inset 0 0 0 5px var(--x26Navy), inset 0 0 0 6px rgba(201, 162, 74, .6);
}
.loStN {
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.4;
  color: #e9cf7f;
}
.loStN small {
  display: block;
  font-size: .78rem;
  font-weight: normal;
  color: #cbbf9a;
}
.loSt p {
  margin: 0;
  font-size: .92rem;
  color: #fff;
}
.loTel {
  font-weight: bold;
  color: #fff500;
}
.loTel:hover,
.loTel:focus-visible {
  color: #fff500;
  text-decoration: underline;
}
.loBtn {
  display: inline-block;
  margin-top: .6rem;
  padding: .3rem 1.1rem;
  font-size: .9rem;
  font-weight: bold;
  color: var(--x26Navy);
  background-color: #e9cf7f;
  border-radius: 2rem;
  transition: background-color .3s;
}
.loBtn:hover,
.loBtn:focus-visible {
  color: var(--x26Navy);
  background-color: #f6e3a8;
}
@media (max-width: 767px) {
  .loGrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .loRai p { font-size: .92rem; }
  .loSt p { font-size: .85rem; }
  .loStN { font-size: 1.05rem; }
  .loBtn { padding: .3rem .8rem; font-size: .85rem; }
}

/* ==================================================================
 * 8. フッター・TOPへ戻る
 * ================================================================== */
footer {
  text-align: center;
}
#otherLinks {
  margin: 0;
  padding: 1.5rem 0;
  background-color: #bfa473;
}
#footerbody {
  background-color: #fff;
}
.copyright p {
  padding: .5rem 0;
  color: #fff;
  background-color: #bfa473;
}
/* 600px 以上スクロールすると表示（xmas_script.js が is-show を付け外し） */
.page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s, visibility .4s;
}
.page-top.is-show {
  opacity: 1;
  visibility: visible;
}

/* ==================================================================
 * 9. 降る雪の結晶
 *    背景（body::before）の上、ページ内容の下に固定レイヤーを置き、xmas_script.js で結晶を生成する。
 *    動かすのは transform だけ（GPU 合成で処理され、スクロールやレイアウトに影響しない）
 * ================================================================== */
.x26Snow {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.x26Flake {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  animation: x26Fall linear infinite;
}
.x26Flake i {
  display: block;
  width: 100%;
  height: 100%;
  background: url("/images/2026/Xmas/snow_flake_a.svg") center / contain no-repeat;
  animation: x26Sway ease-in-out infinite alternate;
}
.x26Flake.b i { background-image: url("/images/2026/Xmas/snow_flake_b.svg"); }
.x26Flake.c i { background-image: url("/images/2026/Xmas/snow_flake_c.svg"); }
@keyframes x26Fall {
  from { transform: translate3d(0, -12vh, 0); }
  to   { transform: translate3d(0, 108vh, 0); }
}
@keyframes x26Sway {
  from { transform: translate3d(calc(var(--sway, 24px) * -1), 0, 0) rotate(-40deg); }
  to   { transform: translate3d(var(--sway, 24px), 0, 0) rotate(40deg); }
}

/* ==================================================================
 * 10. 動きを減らす設定の端末
 *     表紙のフェードインと雪の結晶はページの演出として常に動かす
 *     （Windows の「アニメーション効果」オフ等でも止めない）。TOPへ戻るのフェードだけ省く
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .page-top {
    transition: none;
  }
}