@charset "utf-8";

/* カタログに合わせたピンクのグラデーションと、雪の街の光。 */
body.immersive {
  --paper: #f2bfd0;
  --cream: #eab3c8;
  --pink: #dfa3bc;
  --rose: #82405c;
  --rose-dark: #6f314b;
  --ink: #482033;
  --muted: #5b2f45;
  --gold: #5d3123;
  --line: rgba(119, 63, 81, .28);
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #f6cbd5 0%, #e7afc4 48%, #dda1b9 100%);
}

.immersive::before,
.immersive::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.immersive::before {
  z-index: -2;
  background: linear-gradient(160deg, rgba(249, 205, 218, .85), rgba(224, 163, 191, .87) 52%, rgba(242, 190, 207, .85)), url("images/decor/winter-town-background.jpg") center / cover no-repeat;
}

.immersive::after {
  z-index: -1;
  opacity: .65;
  background-image: radial-gradient(circle at 24px 42px, rgba(255, 227, 175, .6) 1px, transparent 2px), radial-gradient(circle at 144px 194px, rgba(255, 246, 232, .45) .8px, transparent 1.7px), radial-gradient(circle at 283px 93px, rgba(255, 225, 183, .45) 1.4px, transparent 2.6px);
  background-size: 337px 291px, 279px 353px, 431px 389px;
}

.immersive .site-header {
  --gold: #e5bc82;
  --line: rgba(229, 188, 130, .4);
  color: #fff0df;
  background: linear-gradient(110deg, #92506c, #75405b);
  border-color: var(--line);
}

.immersive .wordmark,
.immersive .header-reserve { color: #ffe8ce; }
.immersive .skip-link { color: #35222f; }
.immersive .reservation-ribbon { background: rgba(243, 190, 208, .88); }
.immersive .button { color: #fff4e9; box-shadow: 0 4px 20px rgba(108, 47, 74, .1); }
.immersive .button-outline { color: #71354f; box-shadow: none; }
.immersive .button-outline:hover { background: rgba(255, 234, 238, .3); color: #512239; }
.immersive .introduction { background: linear-gradient(180deg, rgba(248, 201, 215, .87), rgba(235, 177, 201, .74)); }
.immersive .window-decoration {
  width: min(1040px, 84%);
  filter: drop-shadow(0 16px 36px rgba(117, 55, 84, .13));
  -webkit-mask-image: linear-gradient(#000 68%, transparent 100%);
  mask-image: linear-gradient(#000 68%, transparent 100%);
}
.immersive .introduction h2 { color: var(--ink); text-shadow: none; }
.immersive .intro-copy { font-size: 15px; line-height: 2.5; color: #583044; }
.immersive .introduction::before,
.immersive .introduction::after { color: #b47a4c; opacity: .8; }
.immersive .collection-nav { background: rgba(241, 186, 208, .95); }
.immersive .collection-nav a:hover { color: #7a2f50; }
.immersive .collection-section.signature { background: linear-gradient(180deg, rgba(239, 183, 203, .91), rgba(220, 160, 188, .87)); }
.immersive .classic { background: linear-gradient(180deg, rgba(242, 193, 208, .88), rgba(226, 167, 191, .88)); }
.immersive .non-egg {
  --rose: #dfb68f;
  --rose-dark: #f0cdae;
  --ink: #fff1df;
  --muted: #e1c5ba;
  --gold: #e5bc82;
  --line: rgba(229, 188, 130, .32);
  color: #fff2e5;
  background: linear-gradient(135deg, rgba(35, 61, 51, .96), rgba(27, 47, 43, .93));
  border-color: var(--line);
}
.immersive .non-egg .eyebrow { color: var(--gold); }
.immersive .non-egg-notice { color: #e8dbbd; border-color: var(--line); }
.immersive .traditional { background: linear-gradient(180deg, rgba(227, 169, 194, .9), rgba(239, 190, 207, .89)); }
.immersive .section-heading h2 { color: var(--ink); }
.immersive .product-photo { background: #fff6e8; box-shadow: 0 14px 38px rgba(20, 7, 24, .16); outline: 1px solid rgba(237, 198, 143, .34); }
.immersive .product-french { color: var(--gold); }
.immersive .product-card h3 { color: var(--ink); }
.immersive .badge { background: #963f57; color: #fff3e6; }
.immersive .premium { --muted: #50263a; background: linear-gradient(125deg, rgba(231, 166, 187, .95), rgba(209, 143, 170, .95)); }
.immersive .premium .eyebrow,
.immersive .premium-label { color: #502239; }
.immersive .premium-label,
.immersive .premium-note { border-color: rgba(122, 67, 82, .35); }
.immersive .premium-photo { background: rgba(255, 224, 223, .18); box-shadow: 0 20px 60px rgba(119, 53, 79, .13); border-color: rgba(255, 230, 210, .75); }
.immersive .atelier { background: linear-gradient(150deg, rgba(236, 187, 207, .93), rgba(225, 165, 190, .88)); }
.immersive .atelier-images img { box-shadow: 0 16px 40px rgba(20, 10, 25, .22); border: 1px solid rgba(233, 194, 139, .35); }
.immersive .reservation-section { background: linear-gradient(180deg, rgba(241, 191, 208, .9), rgba(220, 158, 184, .95)); }
.immersive .reservation-box { background: rgba(255, 226, 234, .24); box-shadow: 0 18px 70px rgba(119, 53, 79, .1); }
.immersive .site-footer { color: #fff0df; background: linear-gradient(115deg, #92506c, #75405b); }
.immersive .site-footer .copyright { color: #f1d4d4; }
.immersive .mobile-bar { background: rgba(245, 197, 214, .97); border-color: var(--line); }
.immersive .detail-main-photo { box-shadow: 0 16px 48px rgba(20, 8, 25, .2); outline: 1px solid rgba(237, 198, 143, .4); }
.immersive .detail-story { background: linear-gradient(150deg, rgba(239, 184, 205, .93), rgba(222, 161, 188, .92)); }
.immersive .detail-facts { background: #f4cedb; border-color: var(--line); }
.immersive .allergy-note { color: #713048; }
.immersive .detail-option dt span { color: #713048; }
.immersive .layer-chips li { background: rgba(253, 228, 200, .06); border-color: var(--line); }
.immersive .detail-cutaway { background: #fffaf0; }
.immersive .detail-cutaway figcaption { color: #72554c; }
.immersive .related-section { background: linear-gradient(180deg, rgba(236, 181, 203, .88), rgba(245, 198, 213, .92)); }

/* 「みんなで囲む」では、従来どおり深いグリーンへ切り替える。 */
.immersive .non-egg .section-heading h2 { color: #ffe6cd; }
.immersive .non-egg .product-french { color: #ebc48f; }
.immersive .non-egg .button { color: #3d2630; }
.immersive .non-egg .button-outline { color: #ffe5c9; }
.immersive .non-egg .button-outline:hover { background: rgba(249, 217, 181, .12); color: #fff5e7; }

/* カタログから取り出した共通のグルテンフリーマーク。 */
.product-badges { right: 14px; align-items: flex-start; }
.gluten-free-mark { display: inline-block; width: 64px; height: auto; aspect-ratio: 332 / 298; object-fit: contain; }
.product-badges .gluten-free-mark { margin-left: auto; flex: 0 0 64px; }
.detail-summary .gluten-free-mark { width: 80px; height: auto; vertical-align: middle; margin: 0 0 18px 12px; }
.detail-summary > .gluten-free-mark:first-child { margin-left: 0; }

/* 予約案内は読みやすい白い紙面を、共通の夜景の上に置く。 */
body.immersive.order { color: #625858; }
.immersive.order #wrapper { margin: 32px auto; padding: 1px 30px 24px; background: #fff; border: 1px solid #d8b48d; box-shadow: 0 20px 60px rgba(20, 8, 25, .2); }

@media (max-width: 800px) {
  .immersive .window-decoration { width: 94%; }
  .immersive .intro-copy { font-size: 14px; line-height: 2.3; }
}

@media (max-width: 560px) {
  .immersive .window-decoration { width: 100%; }
  .immersive .intro-copy { font-size: 13px; line-height: 2.3; }
  .product-badges { right: 10px; }
  .gluten-free-mark { width: 54px; }
  .product-badges .gluten-free-mark { flex-basis: 54px; }
  .detail-summary .gluten-free-mark { width: 72px; margin-bottom: 15px; }
  .immersive.order #wrapper { margin-block: 18px; padding-inline: 14px; }
  .related-section .product-badges { right: 6px; left: 6px; top: 6px; flex-wrap: wrap; }
  .related-section .product-badges .gluten-free-mark { width: 42px; flex-basis: 42px; }
}

@media print {
  body.immersive { background: #fff; color: #35222f; }
  .immersive::before, .immersive::after { display: none; }
}