/* 川越ダブルカラーLP — 写真をめくる色見本帳。ページ内だけに適用。 */
.dc-lp {
  --dc-paper: #FAF8F5;
  --dc-mist: #EEF0F1;
  --dc-navy: #1C2B3A;
  --dc-gold: #B08D57;
  --dc-charcoal: #2A2E33;
  --dc-slate: #626970;
  --dc-line: #DDD5D8;
  --dc-pink: #F3E6E9;
  --dc-lavender: #EEE8F3;
  --dc-milk: #EEE6DC;
  --dc-sans: "Inter", "Noto Sans JP", sans-serif;
  --dc-serif: "Noto Serif JP", serif;
  color: var(--dc-charcoal);
  background: var(--dc-paper);
  font: 400 16px/1.9 var(--dc-sans);
  letter-spacing: .015em;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}
.dc-lp *, .dc-lp *::before, .dc-lp *::after { box-sizing: border-box; }
.dc-lp :is(h1, h2, h3, p, figure, blockquote, dl, dd) { margin: 0; }
.dc-lp :is(h1, h2, h3) { color: var(--dc-navy); font-family: var(--dc-serif); font-weight: 500; }
.dc-lp :is(h1, h2) { font-feature-settings: "palt" 1; letter-spacing: .04em; text-wrap: balance; }
.dc-lp h1 { font-size: clamp(30px, 3.3vw, 43px); line-height: 1.65; }
.dc-lp h2 { font-size: clamp(25px, 2.5vw, 32px); line-height: 1.7; }
.dc-lp h3 { font-size: 21px; line-height: 1.7; }
.dc-lp img { display: block; width: 100%; max-width: 100%; height: auto; }
.dc-lp a { color: inherit; }
.dc-lp :is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--dc-navy); outline-offset: 5px; }
.dc-lp .dc-phrase { display: inline-block; }
.dc-lp .dc-wrap { width: min(1080px, calc(100% - 64px)); margin-inline: auto; }
.dc-lp .dc-section { padding-block: 88px; }
.dc-lp .dc-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: 40px; }
.dc-lp .dc-section-head > :is(p, div) { padding-top: 7px; }
.dc-lp .dc-section-head p + p { margin-top: 20px; }
.dc-lp .dc-note { font-size: 16px; line-height: 1.85; color: var(--dc-slate); }
.dc-lp .dc-button {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border: 1px solid var(--dc-navy);
  border-radius: 8px;
  font: 500 16px/1.65 var(--dc-sans);
  letter-spacing: .015em;
  text-align: center;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.dc-lp .dc-button-primary { background: var(--dc-navy); color: var(--dc-paper); }
.dc-lp .dc-button-secondary { background: transparent; color: var(--dc-navy); }
.dc-lp .dc-button-primary:hover { background: #344657; color: var(--dc-paper); }
.dc-lp .dc-button-secondary:hover { background: var(--dc-mist); color: var(--dc-navy); }
.dc-lp .dc-actions { display: grid; gap: 12px; }
.dc-lp .dc-hero { padding-block: 36px 48px; background: var(--dc-pink); overflow: clip; }
.dc-lp .dc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  grid-template-areas: "heading photo" "lead photo" "answers photo" "price photo" "actions photo";
  column-gap: 52px;
  align-content: center;
}
.dc-lp .dc-hero-heading { grid-area: heading; padding-top: 20px; }
.dc-lp .dc-eyebrow { margin-bottom: 24px; font-size: 16px; font-weight: 500; letter-spacing: .06em; }
.dc-lp .dc-hero h1 { margin-bottom: 22px; }
.dc-lp .dc-hero-lead { grid-area: lead; max-width: 31em; }
.dc-lp .dc-hero-answers { grid-area: answers; display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.dc-lp .dc-hero-answers li { position: relative; padding-left: 18px; }
.dc-lp .dc-hero-answers li::before { position: absolute; top: .85em; left: 0; width: 6px; height: 6px; background: var(--dc-navy); content: ""; }
.dc-lp .dc-hero-photo { grid-area: photo; align-self: center; border-radius: 36px 36px 8px 8px; }
.dc-lp .dc-hero-price { grid-area: price; border-top: 1px solid var(--dc-line); padding-top: 20px; margin-top: 26px; margin-bottom: 20px; }
.dc-lp .dc-hero-price-line { font-size: 16px; line-height: 1.9; }
.dc-lp .dc-hero-price-note { margin-top: 10px; color: var(--dc-charcoal); font-size: 16px; line-height: 1.85; }
.dc-lp .dc-hero-price strong { font: 500 28px/1.5 var(--dc-sans); white-space: nowrap; color: var(--dc-navy); }
.dc-lp .dc-hero-actions { grid-area: actions; padding-bottom: 20px; }
.dc-lp .dc-hero-actions .dc-note { margin-top: 1px; }
.dc-lp .dc-intro { background: var(--dc-paper); }
.dc-lp .dc-intro .dc-section-head { margin-bottom: 0; }
.dc-lp .dc-worries { background: var(--dc-paper); }
.dc-lp .dc-worry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--dc-line); }
.dc-lp .dc-worry { padding: 28px 32px 28px 0; border-bottom: 1px solid var(--dc-line); }
.dc-lp .dc-worry:nth-child(even) { border-left: 1px solid var(--dc-line); padding-inline: 32px 0; }
.dc-lp .dc-worry:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dc-lp .dc-worry h3 { margin-bottom: 10px; }
.dc-lp .dc-worry-close { margin-top: 32px; background: var(--dc-pink); border-radius: 8px; padding: 20px 24px; font-weight: 500; }
.dc-lp .dc-menus { background: var(--dc-paper); }
.dc-lp .dc-menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.dc-lp .dc-menu { min-width: 0; background: var(--dc-paper); display: flex; flex-direction: column; }
.dc-lp .dc-menu-media { min-width: 0; }
.dc-lp .dc-photo-note { margin-top: 12px; color: var(--dc-slate); font-size: 16px; line-height: 1.85; }
.dc-lp .dc-menu-media .dc-photo-note { padding-inline: 22px; }
.dc-lp .dc-menu-photos { aspect-ratio: 3 / 4; background: var(--dc-line); display: flex; align-items: center; overflow: hidden; }
.dc-lp .dc-menu-photos img { width: 100%; height: auto; }
.dc-lp .dc-menu-photos.dc-pair { gap: 2px; background: var(--dc-mist); border: 1px solid var(--dc-line); }
.dc-lp .dc-menu-photos.dc-pair img { width: calc(50% - 1px); }
.dc-lp .dc-menu-body { padding: 26px 22px; display: flex; flex: 1; flex-direction: column; align-items: stretch; }
.dc-lp .dc-menu h3 { min-height: 110px; font-size: 21px; }
.dc-lp .dc-menu h3 span { display: block; font-family: var(--dc-sans); font-size: 17px; color: var(--dc-charcoal); margin-top: 8px; }
.dc-lp .dc-menu-description { padding-top: 16px; min-height: 144px; }
.dc-lp .dc-price-table { border-top: 2px solid var(--dc-navy); border-bottom: 1px solid var(--dc-line); margin-top: 20px; }
.dc-lp .dc-price-line { padding: 20px 0; font-size: 16px; line-height: 1.85; }
.dc-lp .dc-price-line + .dc-price-line { border-top: 1px solid var(--dc-line); }
.dc-lp .dc-price-label { display: block; }
.dc-lp .dc-price-value { display: block; margin-top: 5px; font: 500 26px/1.5 var(--dc-sans); color: var(--dc-navy); white-space: nowrap; }
.dc-lp .dc-price-audience { display: block; margin-top: 3px; font-size: 16px; }
.dc-lp .dc-price-line .dc-button { margin-top: 16px; padding-inline: 8px; }
.dc-lp .dc-menu-note { padding-top: 22px; margin-top: 0; font-size: 16px; line-height: 1.85; color: var(--dc-slate); }
.dc-lp .dc-price-footer { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.dc-lp .dc-common-note { color: var(--dc-slate); font-size: 16px; }
.dc-lp .dc-flow { background: var(--dc-paper); }
.dc-lp .dc-flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; }
.dc-lp .dc-steps { list-style: none; margin: 0; padding: 0; counter-reset: dc-step; border-top: 1px solid var(--dc-line); }
.dc-lp .dc-steps li { counter-increment: dc-step; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--dc-line); }
.dc-lp .dc-steps li::before { content: counter(dc-step); font: 500 20px/42px var(--dc-sans); text-align: center; background: var(--dc-navy); color: var(--dc-paper); width: 42px; height: 42px; border-radius: 50%; }
.dc-lp .dc-steps h3 { margin-bottom: 10px; }
.dc-lp .dc-preparation { margin-top: 24px; color: var(--dc-slate); font-size: 16px; }
.dc-lp .dc-voices { background: var(--dc-paper); }
.dc-lp .dc-voices-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.dc-lp .dc-voices .dc-section-head { display: block; max-width: 840px; }
.dc-lp .dc-voices-photo img { border-radius: 36px 36px 8px 8px; }
.dc-lp .dc-voices-copy { min-width: 0; }
.dc-lp .dc-voice-list { margin: 0; padding: 0; list-style: none; }
.dc-lp .dc-voice { position: relative; padding: 22px 0 22px 20px; border-bottom: 1px solid var(--dc-line); font: 400 16px/1.9 var(--dc-sans); color: var(--dc-charcoal); }
.dc-lp .dc-voice::before { position: absolute; top: calc(22px + .85em); left: 0; width: 6px; height: 6px; background: var(--dc-navy); content: ""; }
.dc-lp .dc-voices-note { margin-top: 24px; color: var(--dc-slate); font-size: 16px; line-height: 1.85; }
.dc-lp .dc-faq { background: var(--dc-paper); }
.dc-lp .dc-faq-list { max-width: 840px; margin-inline: auto; border-top: 1px solid var(--dc-navy); }
.dc-lp .dc-faq-item { border-bottom: 1px solid var(--dc-line); }
.dc-lp .dc-faq-item summary { position: relative; padding: 24px 42px 24px 0; color: var(--dc-navy); font: 500 19px/1.8 var(--dc-serif); cursor: pointer; list-style: none; }
.dc-lp .dc-faq-item summary::-webkit-details-marker { display: none; }
.dc-lp .dc-faq-item summary::marker { content: ""; }
.dc-lp .dc-faq-item summary::before, .dc-lp .dc-faq-item summary::after { position: absolute; right: 10px; top: calc(50% - 1px); width: 16px; height: 1px; background: var(--dc-navy); content: ""; }
.dc-lp .dc-faq-item summary::after { transform: rotate(90deg); }
.dc-lp .dc-faq-item[open] summary::after { transform: rotate(0); }
.dc-lp .dc-faq-item > :not(summary) { padding: 0 42px 26px 0; }
.dc-lp .dc-faq .dc-actions, .dc-lp .dc-faq-actions { max-width: 480px; margin: 32px auto 0; }
.dc-lp .dc-booking { background: var(--dc-paper); padding-block: 72px; }
.dc-lp .dc-booking-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 64px; border-top: 1px solid var(--dc-line); padding-top: 40px; }
.dc-lp .dc-booking-copy > p { margin-top: 22px; }
.dc-lp .dc-store { font-style: normal; margin-top: 34px; border-top: 1px solid var(--dc-line); padding-top: 24px; line-height: 2; }
.dc-lp .dc-booking-actions { align-self: center; }
.dc-lp .dc-tel { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; text-decoration: underline; text-underline-offset: 5px; }
.dc-lp .dc-sticky { display: none; }
.dc-lp .dc-sticky[hidden] { display: none !important; }

@media (min-width: 761px) and (max-width: 1050px) {
  .dc-lp .dc-hero-grid { column-gap: 30px; }
  /* この幅の3列は予約文言が窮屈になるため、写真と本文を横に並べる。 */
  .dc-lp .dc-menu-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .dc-lp .dc-menu { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
  .dc-lp .dc-menu-body { padding: 26px 28px; }
  .dc-lp .dc-menu h3 { min-height: 0; }
  .dc-lp .dc-menu-description { min-height: 0; }
  .dc-lp .dc-section-head { gap: 30px; }
  .dc-lp .dc-price-footer { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .dc-lp .dc-price-footer .dc-button { max-width: 480px; width: 100%; justify-self: center; }
  .dc-lp .dc-voices-layout { gap: 30px; }
}

@media (max-width: 760px) {
  /* 固定バーの下でも共通フッター末尾を読める余白。JSなしでも確保する。 */
  .dc-page { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .dc-lp .dc-wrap { width: calc(100% - 40px); }
  .dc-lp .dc-section { padding-block: 56px; }
  .dc-lp .dc-section-head { display: block; margin-bottom: 28px; }
  .dc-lp .dc-section-head > :is(p, div) { padding-top: 18px; }
  .dc-lp .dc-hero { padding-block: 28px 32px; }
  .dc-lp .dc-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "photo" "lead" "answers" "price" "actions"; gap: 0; }
  .dc-lp .dc-hero-heading { padding-top: 0; }
  .dc-lp .dc-eyebrow { margin-bottom: 18px; }
  .dc-lp .dc-hero h1 { font-size: 30px; line-height: 1.7; margin-bottom: 26px; }
  .dc-lp .dc-hero-lead { max-width: none; margin-top: 24px; font-size: 16px; line-height: 1.95; text-wrap: pretty; }
  .dc-lp .dc-hero-photo { width: min(76%, 260px); justify-self: center; border-bottom-width: 3px; }
  .dc-lp .dc-hero-answers { margin-top: 26px; gap: 12px; }
  .dc-lp .dc-hero-price { margin-top: 26px; margin-bottom: 18px; line-height: 1.8; }
  .dc-lp .dc-hero-price strong { font-size: 27px; }
  .dc-lp .dc-hero-actions { padding-bottom: 0; }
  .dc-lp .dc-button { padding: 15px 10px; min-height: 58px; }
  .dc-lp .dc-worry-grid { display: block; }
  .dc-lp .dc-worry, .dc-lp .dc-worry:nth-child(even) { padding: 24px 0; border-left: 0; }
  .dc-lp .dc-worry-close { margin-top: 26px; padding-left: 18px; }
  .dc-lp .dc-menu-grid { display: block; }
  .dc-lp .dc-menu + .dc-menu { margin-top: 32px; }
  .dc-lp .dc-menu-photos { aspect-ratio: auto; padding: 20px 20px 0; background: var(--dc-paper); }
  .dc-lp .dc-menu-photos:not(.dc-pair) img { width: 76%; margin-inline: auto; }
  .dc-lp .dc-menu-photos.dc-pair { padding: 20px 20px 0; border: 0; background: var(--dc-paper); gap: 8px; }
  .dc-lp .dc-menu-photos.dc-pair img { width: calc(50% - 4px); }
  .dc-lp .dc-menu-media .dc-photo-note { padding-inline: 24px; }
  .dc-lp .dc-menu-body { display: block; padding: 26px 24px 28px; }
  .dc-lp .dc-menu h3 { min-height: 0; font-size: 23px; line-height: 1.65; }
  .dc-lp .dc-menu-description { min-height: 0; padding-top: 18px; }
  .dc-lp .dc-price-table { margin-top: 24px; }
  .dc-lp .dc-price-value { font-size: 27px; }
  .dc-lp .dc-price-footer { display: block; margin-top: 24px; }
  .dc-lp .dc-price-footer .dc-button { margin-top: 24px; }
  .dc-lp .dc-flow-layout { display: block; }
  .dc-lp .dc-flow h2 { margin-bottom: 26px; }
  .dc-lp .dc-steps li { gap: 16px; grid-template-columns: 36px minmax(0, 1fr); padding-block: 24px; }
  .dc-lp .dc-steps li::before { width: 36px; height: 36px; line-height: 36px; font-size: 18px; }
  .dc-lp .dc-steps h3 { font-size: 20px; }
  .dc-lp .dc-voices-layout { display: flex; flex-direction: column; gap: 28px; }
  .dc-lp .dc-voices-photo { width: min(70%, 280px); align-self: center; }

  .dc-lp .dc-faq-item summary { padding-block: 22px; font-size: 18px; }
  .dc-lp .dc-faq-item > :not(summary) { padding-right: 0; }
  .dc-lp .dc-booking { padding-block: 50px 116px; }
  .dc-lp .dc-booking-box { display: block; padding-top: 26px; }
  .dc-lp .dc-booking-copy > p { margin-top: 18px; }
  .dc-lp .dc-booking-actions { margin-top: 28px; }
  .dc-lp .dc-store { margin-top: 26px; padding-top: 20px; }
  .dc-lp .dc-sticky { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); background: var(--dc-paper); border-top: 1px solid var(--dc-line); z-index: 40; }
  .dc-lp .dc-sticky .dc-button { min-height: 52px; padding: 10px 8px; }
  .dc-lp .dc-sticky .dc-tel { min-height: 52px; border: 1px solid var(--dc-navy); }
  .dc-lp .dc-sticky .dc-tel svg { display: block; width: 23px; height: 23px; }
}

/* 本文は常に表示し、JSが有効な場合だけ控えめに出現させる。 */
@media (prefers-reduced-motion: no-preference) {
  .dc-lp.dc-js .dc-reveal { opacity: 0; transition: opacity .45s ease; }
  .dc-lp.dc-js .dc-reveal.dc-visible { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-lp *, .dc-lp *::before, .dc-lp *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .dc-lp .dc-reveal { opacity: 1 !important; transform: none !important; }
}

/* 社長指示 2026-10-04: 主役1枚と、次の色を手動でめくるFV。 */
.dc-lp .dc-hero { background: var(--dc-paper); }
.dc-lp .dc-hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); grid-template-areas: "heading photo" "lead photo" "price photo" "actions photo" "note note"; column-gap: 48px; }
.dc-lp .dc-hero-visual { grid-area: photo; min-width: 0; align-self: center; padding: 0; }
.dc-lp .dc-hero-gallery { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #9A818E transparent; padding-bottom: 6px; }
.dc-lp .dc-hero-gallery figure { min-width: 0; flex: 0 0 86%; scroll-snap-align: start; }
.dc-lp .dc-hero-gallery img { height: 470px; object-fit: cover; object-position: center top; border-radius: 4px; }
.dc-lp .dc-hero-gallery .dc-hero-secondary { overflow: hidden; }
.dc-lp .dc-hero-gallery .dc-hero-secondary img { width: 120%; max-width: none; margin-left: -15%; object-position: center 66%; }
.dc-lp .dc-hero-gallery figcaption { padding-top: 5px; font-size: 14px; line-height: 1.6; color: var(--dc-navy); }
.dc-lp .dc-swipe-hint { margin-top: 8px; color: var(--dc-slate); font-size: 14px; line-height: 1.6; }
.dc-lp .dc-swipe-hint::after { content: " →"; }
.dc-lp .dc-hero-photo-note { grid-area: note; margin-top: 18px; color: var(--dc-slate); font-size: 14px; line-height: 1.7; }
.dc-lp .dc-consultation-points { max-width: 820px; margin: 32px auto 0; border-top: 1px solid var(--dc-line); padding-top: 2px; }
.dc-lp .dc-consultation-points .dc-hero-answers { grid-area: auto; }

/* 毛束のイメージと、その直下の説明は一つの図として読む。 */
.dc-lp .dc-strand-figure { position: relative; max-width: 480px; margin: 28px auto 0; }
.dc-lp .dc-strand-figure > img { aspect-ratio: 3 / 1.45; object-fit: cover; border-radius: 48px 48px 8px 8px; }
.dc-lp .dc-strand-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 14px 0 0; padding: 0; }
.dc-lp .dc-strand-steps li { position: relative; padding: 14px 6px; text-align: center; border-bottom: 3px solid var(--dc-line); font-size: 16px; font-weight: 500; line-height: 1.75; transition: background-color .4s ease, border-color .4s ease; }
.dc-lp .dc-strand-steps li.dc-active { background: var(--dc-pink); border-color: #866076; border-radius: 8px 8px 0 0; }

/* 色見本帳：色名を写真の外に置き、写真自体の色を見比べやすくする。 */
.dc-lp .dc-gallery { background: var(--dc-paper); border-top: 1px solid var(--dc-line); }
.dc-lp .dc-gallery .dc-section-head { margin-bottom: 28px; }
.dc-lp .dc-swatches { position: relative; margin: 0 auto 32px; max-width: 380px; }
.dc-lp .dc-swatches > img { aspect-ratio: 3 / 1; object-fit: cover; object-position: 50% 64%; border-radius: 8px; }
.dc-lp .dc-filters { display: none; }
.dc-lp.dc-js .dc-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.dc-lp .dc-filter { min-height: 48px; border: 1px solid #AD99A3; border-radius: 24px; padding: 10px 17px; background: var(--dc-paper); color: var(--dc-navy); font: 400 16px/1.5 var(--dc-sans); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.dc-lp .dc-filter::before { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--dc-chip, #6C6670); content: ""; }
.dc-lp .dc-filter[data-family="pink"] { --dc-chip: #B47C90; }
.dc-lp .dc-filter[data-family="purple"] { --dc-chip: #9B81AA; }
.dc-lp .dc-filter[data-family="beige"] { --dc-chip: #AE967B; }
.dc-lp .dc-filter[data-family="silver"] { --dc-chip: #94999E; }
.dc-lp .dc-filter[data-family="blue"] { --dc-chip: #535E87; }
.dc-lp .dc-filter[data-family="red"] { --dc-chip: #A14C66; }
.dc-lp .dc-filter[data-family="inner"] { --dc-chip: #81866F; }
.dc-lp .dc-filter:hover { background: var(--dc-lavender); border-color: var(--dc-navy); }
.dc-lp .dc-filter[aria-pressed="true"] { background: var(--dc-navy); color: var(--dc-paper); border-color: var(--dc-navy); }
.dc-lp .dc-filter[aria-pressed="true"]::before { outline: 1px solid var(--dc-paper); outline-offset: 2px; }
.dc-lp .dc-gallery-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 250px; grid-template-columns: none; gap: 22px; list-style: none; padding: 4px 0 18px; margin: 12px 0 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #9A818E transparent; }
.dc-lp .dc-gallery-item { min-width: 0; scroll-snap-align: start; }
.dc-lp.dc-js .dc-gallery-item[hidden] { display: none !important; }
.dc-lp:not(.dc-js) .dc-gallery-item[hidden] { display: list-item !important; }
.dc-lp .dc-gallery-open { display: block; overflow: hidden; border-radius: 8px; background: var(--dc-milk); }
.dc-lp .dc-gallery-open img { aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s ease; }
.dc-lp .dc-gallery-open:hover img { transform: scale(1.035); }
.dc-lp .dc-gallery-item figcaption { padding-top: 10px; font-size: 16px; line-height: 1.7; color: var(--dc-navy); }
.dc-lp .dc-gallery-note { margin-top: 32px; font-size: 16px; color: var(--dc-slate); }
.dc-lp .dc-gallery-booking { margin: 36px auto 0; max-width: 560px; text-align: center; }
.dc-lp .dc-gallery-booking p { margin-bottom: 18px; }
.dc-lp .dc-gallery-booking .dc-gallery-price-note,
.dc-lp .dc-gallery-price-note { margin: 12px auto 0; max-width: 560px; font-size: 14px; line-height: 1.8; color: var(--dc-slate); text-align: left; }

/* dialog は本文外へ移しても成立するよう、単独の名前空間を持つ。 */
.dc-lightbox { width: min(760px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; background: #FAF8F5; color: #1C2B3A; }
.dc-lightbox:not([open]) { display: none; }
.dc-lightbox::backdrop { background: rgb(28 43 58 / 82%); }
.dc-lightbox .dc-lightbox-inner { position: relative; padding: 58px 64px 24px; }
.dc-lightbox figure { margin: 0; }
.dc-lightbox .dc-lightbox-image { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 300px); object-fit: contain; margin-inline: auto; }
.dc-lightbox figcaption { padding-top: 14px; text-align: center; font: 400 16px/1.7 "Inter", "Noto Sans JP", sans-serif; }
.dc-lightbox .dc-lightbox-note { margin: 10px 0 0; color: #626970; font: 400 14px/1.65 "Inter", "Noto Sans JP", sans-serif; text-align: left; }
.dc-lightbox button { display: grid; place-items: center; position: absolute; width: 48px; height: 48px; padding: 12px; border: 1px solid #DDD5D8; border-radius: 50%; background: #FAF8F5; color: #1C2B3A; cursor: pointer; }
.dc-lightbox button:hover { background: #EEE8F3; }
.dc-lightbox button:focus-visible { outline: 3px solid #1C2B3A; outline-offset: 3px; }
.dc-lightbox button svg { display: block; width: 22px; height: 22px; }
.dc-lightbox .dc-lightbox-close { top: 7px; right: 8px; }
.dc-lightbox .dc-lightbox-prev { top: calc(50% - 24px); left: 8px; }
.dc-lightbox .dc-lightbox-next { top: calc(50% - 24px); right: 8px; }

/* やり方ごとの写真は一枚ずつ大きく。複数写真では次の一枚を少し見せる。 */
.dc-lp .dc-menu { border-radius: 16px 16px 8px 8px; overflow: hidden; }
.dc-lp .dc-menu-photos,
.dc-lp .dc-menu-photos.dc-pair { display: flex; aspect-ratio: 3 / 4; gap: 10px; align-items: stretch; padding: 0 0 10px; border: 0; background: transparent; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #9A818E transparent; }
.dc-lp .dc-menu-photos img,
.dc-lp .dc-menu-photos:not(.dc-pair) img { width: 100%; max-width: none; flex: 0 0 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: contain; object-position: center top; margin: 0; scroll-snap-align: start; }
.dc-lp .dc-menu-photos.dc-pair img { width: 88%; flex-basis: 88%; }
.dc-lp .dc-price-table { border-top: 1px solid #AD99A3; }
.dc-lp .dc-hero-answers li::before, .dc-lp .dc-voice::before { border-radius: 50%; background: #866076; }
.dc-lp .dc-booking { background: var(--dc-pink); }

@media (min-width: 761px) and (max-width: 1050px) {
  .dc-lp .dc-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .dc-lp .dc-gallery-grid { gap: 24px 16px; }
}
@media (max-width: 760px) {
  .dc-lp .dc-hero { padding-top: 24px; }
  .dc-lp .dc-hero h1 { font-size: clamp(28px, 7.8vw, 34px); line-height: 1.65; margin-bottom: 12px; }
  .dc-lp .dc-eyebrow { margin-bottom: 16px; }
  .dc-lp .dc-hero-visual { width: calc(100% + 40px); margin: 0 -20px; padding: 0; }
  .dc-lp .dc-hero-lead { margin-top: 14px; }
  .dc-lp .dc-hero-price { border-color: #CDBCC5; }
  .dc-lp .dc-strand-figure { margin-top: 28px; }
  .dc-lp .dc-strand-figure > img { aspect-ratio: 3 / 2; border-radius: 24px 24px 6px 6px; }
  .dc-lp .dc-strand-steps { gap: 6px; margin-top: 8px; }
  .dc-lp .dc-strand-steps li { padding: 12px 2px; letter-spacing: 0; }
  .dc-lp .dc-swatches { margin-bottom: 24px; }
  .dc-lp .dc-swatches > img { aspect-ratio: 2 / 1; }
  .dc-lp.dc-js .dc-filters { gap: 8px; margin-bottom: 24px; }
  .dc-lp .dc-filter { padding: 10px 12px; }
  .dc-lp .dc-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 22px; }
  .dc-lp .dc-gallery-item figcaption { padding-top: 8px; }
  .dc-lp .dc-gallery-note { margin-top: 26px; }
  .dc-lp .dc-gallery-booking { margin-top: 28px; text-align: left; }
  .dc-lp .dc-menu-photos, .dc-lp .dc-menu-photos.dc-pair { padding: 0 0 8px; }
  .dc-lp .dc-menu-media .dc-photo-note { padding-inline: 22px; }
  .dc-lp .dc-worry-close { padding: 18px; }
  .dc-lp .dc-sticky .dc-tel { border-radius: 8px; }
  .dc-lightbox .dc-lightbox-inner { padding: 58px 12px 76px; }
  .dc-lightbox .dc-lightbox-image { max-height: max(100px, calc(100dvh - 340px)); }
  .dc-lightbox .dc-lightbox-prev { top: auto; bottom: 12px; left: calc(50% - 56px); }
  .dc-lightbox .dc-lightbox-next { top: auto; bottom: 12px; right: calc(50% - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-lp *, .dc-lp *::before, .dc-lp *::after, .dc-lightbox * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .dc-lp .dc-gallery-open:hover img { transform: none; }
}

/* FVの料金・追加料金・予約がSPの最初の画面でつながる密度。 */
@media (max-width: 760px) {
  body.dc-page { --shell-h: 60px; --shell-h-min: 60px; }
  .dc-page .site-header__inner { gap: 8px; padding-inline: 16px; }
  .dc-page .site-header__brand img { width: 116px; }
  .dc-page .shell-btn { min-height: 48px; padding-inline: 10px; letter-spacing: .06em; }
  .dc-page .shell-btn--reserve { white-space: nowrap; }
  .dc-lp .dc-hero { padding-block: 12px 24px; }
  .dc-lp .dc-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "lead" "photo" "price" "actions" "note"; gap: 0; }
  .dc-lp .dc-eyebrow { margin-bottom: 6px; font-size: 14px; line-height: 1.6; }
  .dc-lp .dc-hero h1 { font-size: 25px; line-height: 1.4; letter-spacing: .015em; margin-bottom: 8px; }
  .dc-lp .dc-hero-lead { margin: 0 0 10px; font-size: 16px; line-height: 1.65; }
  .dc-lp .dc-hero-visual { width: calc(100% + 20px); margin: 0 -20px 0 0; padding: 0; }
  .dc-lp .dc-hero-gallery { gap: 10px; padding-bottom: 0; scrollbar-width: none; }
  .dc-lp .dc-hero-gallery::-webkit-scrollbar { display: none; }
  .dc-lp .dc-hero-gallery figure { flex-basis: 84%; }
  .dc-lp .dc-hero-gallery img { height: 320px; object-position: center top; }
  .dc-lp .dc-hero-gallery figcaption { font-size: 13px; padding-top: 3px; line-height: 1.5; }
  .dc-lp .dc-hero-visual .dc-swipe-hint { margin-top: 3px; font-size: 12px; }
  .dc-lp .dc-hero-price { margin: 10px 0 10px; padding-top: 8px; }
  .dc-lp .dc-hero-price-line { font-size: 16px; line-height: 1.6; }
  .dc-lp .dc-hero-price strong { font-size: 25px; line-height: 1.3; }
  .dc-lp .dc-hero-price-note { margin-top: 5px; font-size: 16px; line-height: 1.6; }
  .dc-lp .dc-hero-actions { gap: 6px; padding-bottom: 0; }
  .dc-lp .dc-hero-actions .dc-button { min-height: 50px; padding-block: 10px; }
  .dc-lp .dc-hero-actions .dc-note { margin-top: 0; font-size: 14px; line-height: 1.65; }
  .dc-lp .dc-hero-photo-note { margin-top: 12px; font-size: 13px; line-height: 1.65; }
  .dc-lp .dc-gallery { padding-block: 36px 40px; }
  .dc-lp .dc-gallery .dc-section-head { margin-bottom: 20px; }
  .dc-lp .dc-gallery-grid { grid-template-columns: none; grid-auto-columns: 74%; gap: 14px; margin-right: -20px; padding-right: 20px; }
  .dc-lp.dc-js .dc-filters { flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: 0 -20px 12px 0; padding-right: 20px; scrollbar-width: thin; }
  .dc-lp .dc-filter { flex: 0 0 auto; }
  .dc-lp .dc-strand-figure { max-width: 300px; margin-top: 24px; }
  .dc-lp .dc-strand-figure > img { aspect-ratio: 3 / 1.45; border-radius: 8px; }
  .dc-lp .dc-strand-steps li { font-size: 13px; padding: 8px 2px; }
  .dc-lp .dc-swatches { max-width: 260px; }
  .dc-lp .dc-swatches > img { aspect-ratio: 3 / 1; }
}
@media (max-width: 760px) and (max-height: 850px) {
  .dc-lp .dc-hero-gallery img { height: 260px; }
}