:root {
  --gold: #926b21;
  --gold-50: rgba(146, 107, 33, .5);
  --gold-40: rgba(146, 107, 33, .4);
  --ink: #222;
  --blush: #fdf4f0;
  --container: min(1024px, calc(100% - 48px));
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Noto Sans JP', sans-serif;
  /* Figma: Hiragino Mincho Pro W3 / W6。Mac以外は游明朝などにフォールバック。 */
  --mincho: 'Hiragino Mincho Pro', 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, 'Noto Serif JP', serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Figma・Safariと同じく約物（「」、など）を全角幅で組む。Chromeの既定の詰めを無効化 */
body { margin: 0; color: var(--ink); font-family: var(--sans); font-weight: 400; background: #fff; text-spacing-trim: space-all; }
h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #2563a6; outline-offset: 5px; }
.button:hover, .more:hover, .movie-trigger:hover { filter: brightness(.9); }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; transform: translateY(-180%); background: #fff; padding: 12px; }
.skip-link:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp-only { display: none; }
/* Figmaの読点だけ字間を詰める指定（tracking -6.4px） */
.kern { letter-spacing: -6.4px; }

/* ---------- Section heading ---------- */
.section-heading { text-align: center; color: var(--gold); }
.section-heading h1, .section-heading h2 { font: 300 72px/1 var(--serif); letter-spacing: 7.2px; -webkit-font-smoothing: antialiased; }
.section-heading p { margin-top: 12px; font-size: 13px; line-height: 16px; letter-spacing: 3.12px; }

/* ---------- Hero (KV) ---------- */
.hero { position: relative; z-index: 2; aspect-ratio: 1440 / 810; }
.hero-image { position: absolute; inset: 0; overflow: hidden; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-transition {
  position: absolute; left: 0; right: 0; bottom: -130px; height: 260px; pointer-events: none;
  background: linear-gradient(180deg, rgba(247,240,234,0) 0%, rgba(247,240,234,.05) 12%, rgba(247,240,234,.3) 25%, rgba(247,240,234,.74) 37%, rgba(247,240,234,.98) 46%, #f7f0ea 50%, rgba(247,240,234,.98) 54%, rgba(247,240,234,.74) 63%, rgba(247,240,234,.3) 75%, rgba(247,240,234,.05) 88%, rgba(247,240,234,0) 100%);
}
.brand { position: absolute; z-index: 3; left: max(24px, calc((100% - 1024px) / 2)); top: 40px; width: 189.772px; height: 66px; }
.brand img { max-width: none; }
.brand-sp { display: none; }
.scroll-cue { position: absolute; z-index: 4; top: calc(100% - 64px); left: 50%; transform: translateX(-50%); width: 80px; text-align: center; font: 400 13px/14px var(--serif); letter-spacing: 3.9px; color: var(--gold); }
.scroll-cue span { display: block; width: 1px; height: 64px; margin: 12px auto 0; overflow: hidden; }
.scroll-cue span::before { content: ''; display: block; width: 100%; height: 100%; background: rgba(146,107,33,.8); animation: scroll-line 3.6s cubic-bezier(.65, 0, .35, 1) infinite; }
/* 上から伸び、下へ抜けたあとに間を置いて繰り返す。 */
@keyframes scroll-line {
  0% { transform: translateY(-100%); }
  45% { transform: translateY(0); }
  85%, 100% { transform: translateY(100%); }
}

/* ---------- Altavita (concept) ---------- */
.concept { position: relative; min-height: 664px; padding: 120px 24px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; color: #000; }
.concept > :not(.concept-bg) { position: relative; z-index: 3; }
.concept-bg { position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 664px; overflow: hidden; background: #fff; }
.concept-silk { position: absolute; top: 0; left: 0; width: 100%; height: 856px; opacity: .58; }
.concept-silk img { width: 100%; height: 100%; object-fit: cover; }
.concept-bg::before, .concept-bg::after { content: ''; position: absolute; z-index: 1; inset: 0; }
.concept-bg::before { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 22%, rgba(255,255,255,.68) 40%, rgba(255,255,255,.68) 60%, rgba(255,255,255,.12) 78%, rgba(255,255,255,0) 100%); }
.concept-bg::after { background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.28) 78%, #fff 100%); }
.concept .section-heading { color: var(--ink); }
.concept-title { margin-top: 40px; font: 600 20px/1.8 var(--mincho); letter-spacing: 2.4px; }
.concept-copy { margin-top: 24px; font: 300 20px/1.8 var(--mincho); letter-spacing: 2.4px; }

.concept-copy-continuation { margin-top: 16px; }

/* ---------- Accordion（名前に込めた願い） ---------- */
.accordion { width: min(640px, 100%); margin-top: 56px; border-top: 1px solid var(--gold-40); border-bottom: 1px solid var(--gold-40); }
.accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 62px; padding: 0 28px; background: none; color: #000; font: 600 16px/1.8 var(--mincho); letter-spacing: 1.92px; }
@media (hover: hover) { .accordion-trigger:hover { background: rgba(146,107,33,.04); } }
.accordion-balance, .accordion-icon { position: relative; flex: 0 0 24px; width: 24px; height: 24px; }
.accordion-icon img { position: absolute; inset: 0; transition: opacity .25s ease; }
.icon-minus, .is-open .icon-plus { opacity: 0; }
.is-open .icon-minus { opacity: 1; }
.accordion-inner { min-height: 0; overflow: hidden; }
.accordion-inner p { padding: 24px 0; font: 300 16px/1.8 var(--mincho); letter-spacing: 1.92px; color: #000; }
.js .accordion-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s ease, visibility 0s linear .4s; }
.js .accordion.is-open .accordion-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .4s ease; }

/* ---------- Features ---------- */
.features { padding: 120px 0; }
.feature-list { width: var(--container); margin: 80px auto 0; display: flex; flex-direction: column; gap: 78px; }
.feature { display: grid; align-items: center; }
.feature > * { grid-area: 1 / 1; }
.feature-image { position: relative; width: 61.71875%; aspect-ratio: 632 / 423; overflow: hidden; background: #f0f0f0; }
.feature-image img { position: absolute; max-width: none; }
.feature-1 .feature-image { background: #e3dff2; }
.feature-1 .feature-image img { width: 129.43%; height: 193.38%; left: -7.28%; top: -6.15%; }
/* Figmaで左右反転されている画像（MRL_19P斜め） */
.feature-2 .feature-image { justify-self: end; transform: scaleX(-1); }
.feature-2 .feature-image img { width: 136.39%; height: 203.78%; left: -36.39%; top: -52.25%; }
.feature-3 .feature-image { aspect-ratio: 632 / 421.333; }
.feature-3 .feature-image img { width: 106.071%; height: 106.071%; left: 0; top: 0; }
.feature-card { position: relative; justify-self: end; width: 54.6875%; min-height: 300px; padding: 16px 56px 40px; display: flex; flex-direction: column; justify-content: center; background: rgba(255,255,255,.7); box-shadow: 0 24px 64px rgba(0,0,0,.07); }
.feature-2 .feature-card { justify-self: start; }
.number { font: italic 300 72px/1 var(--serif); color: var(--gold-50); }
.eyebrow { margin-top: 16px; color: var(--gold); font-size: 13px; line-height: 16px; letter-spacing: 2.6px; }
.feature-card h3 { margin-top: 4px; font: 600 24px/1.5 var(--mincho); letter-spacing: .48px; color: var(--gold); }
.description { margin-top: 16px; font-size: 14px; line-height: 2; letter-spacing: .56px; }

/* ---------- CV ---------- */
.conversion { padding: 80px 24px; background: var(--blush); text-align: center; display: flex; flex-direction: column; align-items: center; }
.conversion .buttons { margin-top: 40px; }
.conversion h2 { font: 600 20px/1.8 var(--mincho); letter-spacing: 2.4px; color: var(--gold); }
.conversion > p { margin-top: 24px; font-size: 18px; line-height: 1.8; letter-spacing: 1.8px; }
.buttons { display: flex; gap: 24px; justify-content: center; }
.button { display: flex; align-items: center; justify-content: center; width: 320px; min-height: 64px; padding: 12px 8px; background: var(--gold); color: #fff; font-size: 16px; font-weight: 500; letter-spacing: 1.28px; }
.conversion .button[data-action="reservation"],
.conversion .button[data-action="stores"],
.reservation .button[data-action="reservation"],
.reservation .button[data-action="stores"] { -webkit-font-smoothing: antialiased; }
.concept-title,
.feature-card h3,
.craft-copy h3,
#conversion-title,
.reservation-text h3 { -webkit-font-smoothing: antialiased; }
.outline { background: transparent; border: 1px solid #fff; }

/* ---------- Craftsmanship ---------- */
.craft { padding: 120px 24px 82.4px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), url('assets/3ace5.png') top center / cover; }
.movie { position: relative; display: grid; place-items: center; width: var(--container); max-width: 1024px; aspect-ratio: 1024 / 580; margin-top: 64px; padding: 0; background: none; }
.movie-trigger, .movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.movie-trigger { display: grid; place-items: center; padding: 0; background: none; }
.movie-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-position: bottom; }
.movie-play { position: relative; }
.craft-copy { width: min(760px, 100%); margin-top: 60px; text-align: center; }
.craft-copy h3 { font: 600 24px/1 var(--mincho); letter-spacing: 2.4px; color: var(--gold); }
.craft-copy h3 .kern { letter-spacing: -9.6px; }
.craft-story { margin-top: 24px; }
.craft-copy p { font-size: 14px; line-height: 2.6; letter-spacing: .56px; color: #000; }

/* ---------- Lineup ---------- */
.lineup { padding: 110px 24px 140px; }
.engagement { margin-top: 96px; }
.marriage { margin-top: 134px; }
.group-title { display: flex; gap: 24px; align-items: center; justify-content: center; font: 400 22px/27px var(--serif); letter-spacing: 5.28px; color: var(--gold); white-space: nowrap; }
.group-title::before, .group-title::after { content: ''; flex: 0 1 80px; height: 1px; background: var(--gold); }
.group-sub { position: relative; z-index: 1; margin-top: 8px; text-align: center; font-size: 13px; line-height: 16px; letter-spacing: 3.12px; color: var(--gold); }
.products, .marriage-layout { display: grid; justify-content: center; grid-template-columns: repeat(3, minmax(0, 360px)); }
.engagement .products { margin-top: 33px; }
.marriage-layout { margin-top: -24px; }
.marriage .carousel { grid-column: span 2; }
.marriage .products { grid-template-columns: repeat(2, minmax(0, 360px)); }
.product { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; }
.product-image { width: 320px; max-width: 100%; aspect-ratio: 1; }
.marriage .product-image { width: 250px; }
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.product h4 { position: relative; min-height: 58px; margin-top: 25px; font-size: 18px; line-height: 1.6; letter-spacing: 1.08px; }
.marriage .product h4 { margin-top: -22px; }
.more { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding: 0; background: none; font-size: 14px; line-height: 17px; letter-spacing: .84px; color: var(--ink); }
.next, .pagination { display: none; }

/* ---------- Reservation ---------- */
.reservation { padding: 200px 24px; display: flex; flex-direction: column; align-items: center; gap: 48px; color: #fff; text-align: center; background: linear-gradient(rgba(27,25,23,.66), rgba(27,25,23,.66)), url('assets/40da1.png') center / cover; }
.reservation .section-heading { color: #fff; }
.reservation-text { width: min(760px, 100%); }
.reservation-text h3 { font: 600 24px/1.5 var(--mincho); letter-spacing: 2.4px; }
.reservation-text p { margin-top: 24px; font-size: 14px; line-height: 2.2; letter-spacing: .84px; }

/* ---------- Dialog ---------- */
dialog { max-width: calc(100% - 48px); width: 460px; border: 1px solid var(--gold); padding: 32px; color: var(--ink); }
dialog::backdrop { background: #0008; }
dialog h2 { font-size: 20px; color: var(--gold); }
dialog p { font-size: 14px; line-height: 1.9; margin: 20px 0 28px; }
dialog .button { width: 100%; }

/* ---------- PC 狭幅（769〜1199px） ---------- */
@media (min-width: 769px) and (max-width: 1199px) {
  .section-heading h1, .section-heading h2 { font-size: 60px; }
  .feature-card { padding: 24px 32px 32px; }
  .number { font-size: 60px; }
  .feature-card h3 { font-size: 20px; }
  .description { font-size: 13px; }
}

/* ---------- SP（〜768px） ---------- */
@media (max-width: 768px) {
  .pc-only { display: none; }
  .sp-only { display: inline; }
  .kern { letter-spacing: -6.4px; }

  .section-heading h1, .section-heading h2 { font-size: clamp(30px, 10.476vw, 44px); letter-spacing: 4.4px; }
  .section-heading p { margin-top: 8px; font-size: 11px; line-height: 13px; letter-spacing: 2.64px; }
  .features .section-heading h2, .lineup .section-heading h2 { font-size: clamp(30px, 9.524vw, 40px); letter-spacing: 4px; }
  .craft .section-heading h2 { font-size: clamp(28px, 9.524vw, 40px); letter-spacing: 2.4px; }

  .hero { aspect-ratio: 420 / 467; }
  .hero-transition { bottom: -70px; height: 140px; }
  .brand { left: 24px; top: 24px; width: 120.764px; height: 42px; }
  .brand-pc { display: none; }
  .brand-sp { display: block; }
  .scroll-cue { top: calc(100% - 43px); font-size: 10px; letter-spacing: 4px; }
  .scroll-cue span { height: 48px; margin-top: 6px; }

  .concept { min-height: 537px; padding: 105px 24px 68.4px; }
  .concept-bg { height: 537px; }
  .concept-silk { height: 680px; opacity: .52; }
  .concept-silk img { object-fit: fill; }
  .concept-title { margin-top: 32px; font-size: 16px; letter-spacing: 1.92px; }
  .concept-copy { margin-top: 16px; font-size: clamp(12px, calc((100vw - 48px) / 25.76), 14px); letter-spacing: .12em; }
  .concept-copy-continuation { margin-top: 7.6px; }
  .accordion { margin-top: 32px; }
  .accordion-trigger { height: 54px; padding: 0 16px; }
  .accordion-inner p { padding: 20px 0; font-size: clamp(11px, calc((100vw - 48px) / 26.88), 13.76px); letter-spacing: .12em; }

  .features { padding: 66px 0 114px; }
  .feature-list { width: calc(100% - 48px); max-width: 520px; margin-top: 60px; gap: 61px; }
  .feature { display: block; }
  .feature-image, .feature-3 .feature-image { width: 100%; aspect-ratio: 372 / 249; }
  .feature-3 .feature-image { aspect-ratio: 372 / 248; }
  .feature-2 .feature-image img { width: 145.8%; height: 217.83%; left: -29.13%; top: -66.3%; }
  .feature-card { width: calc(100% - 36px); min-height: 0; margin: -45px auto 0; padding: 24px 28px 28px; justify-content: flex-start; background: rgba(255,255,255,.92); box-shadow: 0 16px 40px rgba(0,0,0,.07); }
  .number { font-size: 56px; }
  .eyebrow { margin-top: 16px; font-size: 11px; line-height: 13px; letter-spacing: 2.2px; }
  .feature-card h3 { margin-top: 10px; font-size: 18px; letter-spacing: 0; }
  .description { margin-top: 16px; font-size: 13px; line-height: 1.9; letter-spacing: .52px; }

  .conversion { padding: 72px 24px; }
  .conversion .buttons { margin-top: 28px; }
  .conversion h2 { font-size: 18px; line-height: 1.5; letter-spacing: 1.44px; }
  .conversion > p { margin-top: 16px; font-size: 15px; letter-spacing: 1.2px; }
  .buttons { width: 100%; max-width: 520px; flex-direction: column; gap: 12px; }
  .button { width: 100%; min-height: 56px; }

  .craft { padding: 96px 24px 84.6px; }
  .movie { width: 100%; max-width: 520px; margin-top: 36px; }
  .craft-copy { max-width: 520px; margin-top: 36px; }
  .craft-copy h3 { line-height: 1.5; font-size: 20px; letter-spacing: 1.6px; }
  .craft-copy h3 .kern { letter-spacing: -6.4px; }
  .craft-story { margin-top: 16px; }
  .craft-copy p { line-height: 1.8; }
  .craft-copy p + p { margin-top: 15.8px; }

  .lineup { padding: 94px 0 120px; }
  .engagement { margin-top: 60px; }
  .marriage { margin-top: 72px; }
  .group-title { gap: 14px; padding: 0 24px; font-size: clamp(14px, 4.048vw, 17px); line-height: 21px; letter-spacing: .2em; }
  .group-title::before, .group-title::after { flex-basis: 40px; min-width: 12px; }
  .group-sub { font-size: 11px; line-height: 13px; letter-spacing: 2.64px; }
  .marriage-layout { display: block; margin-top: 0; }
  .carousel { position: relative; margin-top: 27px; }
  .engagement .products { margin-top: 0; }
  .products, .marriage .products { display: flex; justify-content: flex-start; padding-bottom: 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .products::-webkit-scrollbar { display: none; }
  .product { flex: 0 0 100%; gap: 20px; padding: 0 24px; scroll-snap-align: start; }
  .product-image, .marriage .product-image { width: 250px; }
  .product h4, .marriage .product h4 { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 48px; margin: 0; font-size: 15px; letter-spacing: .9px; }
  .more { margin: 0; font-size: 13px; line-height: 16px; letter-spacing: .78px; }
  .standalone { margin-top: 48px; }
  .next { position: absolute; top: 103px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; }
  .pagination { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; height: 8px; }
  .pagination button { position: relative; width: 6px; height: 6px; padding: 0; border-radius: 50%; background: rgba(146,107,33,.3); }
  .pagination button::before { content: ''; position: absolute; inset: -12px -5px; }
  .pagination button[aria-current="true"] { width: 8px; height: 8px; background: var(--gold); }

  .reservation { padding: 96px 24px; gap: 32px; }
  .reservation-text h3 { font: 500 18px/1.5 var(--sans); letter-spacing: 1.44px; }
  .reservation-text p { margin-top: 32px; line-height: 2; letter-spacing: .56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue span::before { animation: none; transform: none; }
  .js .accordion-panel, .js .accordion.is-open .accordion-panel, .accordion-icon img { transition: none; }
}