/*
Theme Name: Sumile Company
Description: すみれカンパニー公式サイト。固定ページのテンプレート選択で各ページを表示します。
Version: 1.1.0
Author: Sumile Company
Text Domain: sumile-company
*/
/* Change the design by editing this token set. Components below use only these shared values. */
:root {
  color-scheme: light;
  --color-gold: #d2a51e;
  --color-primary: #b9a5cf;
  --color-contact-box: #f3e8f5;
  --color-contact-box-hover: #ecdef0;
  --color-contact-border: #e2d1e8;
  --gradient-gold-frame: linear-gradient(135deg, #fff0ae 0%, #c49a35 24%, #f4dc84 48%, #a77d1d 72%, #f8e6a2 100%);
  --color-primary-hover: #a68cbe;
  --color-primary-soft: #f3eef7;
  --color-secondary: #eee7f3;
  --color-ink: #29252d;
  --color-body: #4d4851;
  --color-muted: #77717b;
  --color-faint: #a7a0aa;
  --color-line: #ebe7ee;
  --color-line-soft: #f1eef3;
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-strong: #f5f2f7;
  --color-accent-sky: #d5c9e2;
  --color-accent-purple: #b9a5cf;
  --color-accent-pink: #d9c8e5;
  --color-accent-orange: #d8c4de;
  --color-accent-teal: #c1b2d2;
  --color-accent-green: #d0c3dc;
  --color-on-primary: #30263a;
  --font-sans: "Noto Sans JP", Inter, "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  --font-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.45rem, 2vw, 1.8rem);
  --text-2xl: clamp(2rem, 4.5vw, 3.65rem);
  --text-hero: clamp(2.4rem, 6vw, 5.4rem);
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.18;
  --leading-body: 1.8;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --content-width: 1240px;
  --content-narrow: 800px;
  --page-gutter: clamp(20px, 5vw, 72px);
  --shadow-soft: 0 0.2px 1px rgb(0 0 0 / 2%), 0 1px 4px rgb(0 0 0 / 3%), 0 4px 18px rgb(0 0 0 / 4%);
  --shadow-card: 0 0.2px 1px rgb(0 0 0 / 2%), 0 1px 4px rgb(0 0 0 / 3%), 0 4px 18px rgb(0 0 0 / 4%);
  --header-height: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-canvas); color: var(--color-body); font: var(--weight-normal) var(--text-base)/var(--leading-body) var(--font-sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-primary); }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.skip-link { position: absolute; left: -10000px; top: 12px; z-index: 20; padding: 12px 18px; background: var(--color-ink); color: white; border-radius: var(--radius-sm); }
.skip-link:focus { left: 12px; }
.container { width: min(100% - 2 * var(--page-gutter), var(--content-width)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--page-gutter), var(--content-narrow)); margin-inline: auto; }
.eyebrow { margin: 0 0 var(--space-3); color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .14em; text-transform: uppercase; }
.section { padding-block: var(--space-16); }
.section-soft { background: transparent; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.section-head h2, .page-intro h1 { margin: 0; color: var(--color-ink); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -.035em; line-height: var(--leading-tight); }
.section-head p { max-width: 540px; margin: var(--space-3) 0 0; }
.serif { font-family: var(--font-serif); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.btn { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 12px 22px; background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-medium); line-height: 1.3; transition: background .18s ease, transform .18s ease; }
.btn:hover { color: white; background: var(--color-primary-hover); transform: translateY(-1px); }
.btn-secondary { border-color: var(--color-line); background: var(--color-canvas); color: var(--color-ink); }
.btn-secondary:hover { color: var(--color-ink); background: var(--color-surface); }
.btn-pill { border-radius: var(--radius-pill); }
.text-link { color: var(--color-ink); font-weight: var(--weight-semibold); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 5px; }
.tag { display: inline-flex; align-items: center; border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 4px 10px; color: var(--color-muted); font-size: var(--text-xs); }
.site-header { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--color-line-soft); background: rgb(255 255 255 / 96%); backdrop-filter: blur(12px); }
.header-inner { display: flex; min-height: var(--header-height); align-items: center; justify-content: space-between; gap: var(--space-6); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--color-ink); font-weight: var(--weight-bold); white-space: nowrap; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--color-primary); color: white; font-family: var(--font-serif); font-size: 1.1rem; }
.brand-logo { display: block; width: 158px; height: auto; object-fit: contain; }
.brand-name { font-size: 1.02rem; line-height: 1.2; }
.brand-name small { display: block; margin-top: 3px; color: var(--color-muted); font-size: .64rem; font-weight: var(--weight-medium); letter-spacing: .12em; }
.desktop-nav { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 25px); }
.desktop-nav a { color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--color-primary); }
.header-cta { flex-shrink: 0; }
.mobile-nav { display: none; }
.mobile-nav summary { display: flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-ink); cursor: pointer; list-style: none; font-size: 1.3rem; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav[open] .mobile-links { position: absolute; top: calc(100% + 1px); left: 0; width: 100%; display: grid; gap: 0; border-bottom: 1px solid var(--color-line); padding: 12px var(--page-gutter) 22px; background: white; box-shadow: var(--shadow-soft); }
.mobile-links { display: none; }
.mobile-links a { padding: 12px 0; border-bottom: 1px solid var(--color-line-soft); color: var(--color-ink); }
.mobile-links .btn { margin-top: 12px; border: 0; padding-inline: 20px; color: white; }
.breadcrumbs { padding-top: var(--space-6); color: var(--color-muted); font-size: var(--text-xs); }
.breadcrumbs span { padding-inline: 8px; color: #aaa; }
.page-intro { padding-block: var(--space-12) var(--space-8); }
.page-intro p { max-width: 740px; margin: var(--space-4) 0 0; font-size: var(--text-lg); }
.hero { display: grid; min-height: min(720px, calc(100svh - var(--header-height))); grid-template-columns: 1fr 1.08fr; align-items: center; gap: clamp(35px, 6vw, 90px); padding-block: var(--space-8); }
.hero h1 { max-width: 740px; margin: 0; color: var(--color-ink); font-family: var(--font-serif); font-size: var(--text-hero); font-weight: 500; letter-spacing: -.04em; line-height: 1.35; }
.hero-copy { max-width: 560px; margin: var(--space-6) 0 var(--space-8); font-size: clamp(1rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: var(--space-6); color: var(--color-muted); font-size: var(--text-sm); }
.hero-note::before { width: 30px; height: 1px; background: var(--color-primary); content: ""; }
.hero-image { position: relative; min-height: 520px; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-surface); }
.hero-image img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.hero-image::after { position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, rgb(0 0 0 / 22%)); content: ""; }
.hero-label { position: absolute; z-index: 1; right: 24px; bottom: 22px; border: 1px solid rgb(255 255 255 / 45%); border-radius: var(--radius-pill); padding: 8px 14px; background: rgb(255 255 255 / 90%); color: var(--color-ink); font-size: var(--text-xs); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { overflow: hidden; border: 1px solid var(--color-line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.card:hover { box-shadow: var(--shadow-soft); }
.card-image { aspect-ratio: 1.35; overflow: hidden; background: var(--color-surface); }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-image img { transform: scale(1.035); }
.card-body { padding: 22px; }
.card-body h3 { margin: 0 0 8px; color: var(--color-ink); font-size: var(--text-lg); line-height: 1.5; }
.card-body p { margin: 0 0 18px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.feature { padding: 25px 22px; border-top: 2px solid var(--color-primary); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: white; }
.feature-number { color: var(--color-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .12em; }
.feature h3 { margin: 12px 0 8px; color: var(--color-ink); font-size: var(--text-base); }
.feature p { margin: 0; font-size: var(--text-sm); }
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 7vw, 96px); }
.split-image { overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); }
.split-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split-copy h2 { margin: 0 0 18px; color: var(--color-ink); font-size: var(--text-2xl); line-height: var(--leading-tight); }
.split-copy p { margin: 0 0 20px; }
.stats { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 28px; }
.stat strong { display: block; color: var(--color-ink); font-size: var(--text-xl); }
.stat span { color: var(--color-muted); font-size: var(--text-xs); }
.step-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: steps; }
.step { position: relative; min-height: 155px; padding: 24px; border-radius: var(--radius-md); background: white; counter-increment: steps; }
.step::before { display: block; margin-bottom: 13px; color: var(--color-primary); content: "0" counter(steps); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .12em; }
.step h3 { margin: 0 0 8px; color: var(--color-ink); font-size: var(--text-base); }
.step p { margin: 0; font-size: var(--text-sm); }
.news-list { border-top: 1px solid var(--color-line); }
.news-item { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--color-line); }
.news-item time { color: var(--color-muted); font-size: var(--text-sm); }
.news-item a { color: var(--color-ink); font-weight: var(--weight-medium); }
.quote-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.quote { padding: 28px; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: white; }
.quote p { margin: 0 0 20px; color: var(--color-ink); font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.8; }
.quote cite { color: var(--color-muted); font-size: var(--text-sm); font-style: normal; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 0 20px; background: white; }
.faq-list summary { position: relative; padding: 18px 32px 18px 0; color: var(--color-ink); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; right: 4px; content: "+"; color: var(--color-primary); font-size: 1.25rem; }
.faq-list details[open] summary::after { content: "−"; }
.faq-answer { padding: 0 0 18px; }
.faq-answer p { margin: 0; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 58px); background: var(--color-ink); color: white; }
.cta-band h2 { margin: 0; color: white; font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 500; line-height: 1.5; }
.cta-band p { margin: 8px 0 0; color: rgb(255 255 255 / 75%); }
.cta-band .btn-secondary { border-color: white; background: transparent; color: white; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { padding: 15px 16px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.info-table th { width: 28%; color: var(--color-ink); font-weight: var(--weight-semibold); }
.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { padding: 16px 18px; border-bottom: 1px solid var(--color-line); text-align: left; }
.price-table th { background: var(--color-surface); color: var(--color-ink); font-size: var(--text-sm); }
.price-table td:last-child { color: var(--color-ink); font-weight: var(--weight-semibold); text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.profile-card { overflow: hidden; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: white; }
.profile-photo { aspect-ratio: 4/3; background: var(--color-surface); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.profile-card .card-body { padding: 20px; }
.content-prose h2 { margin: 42px 0 16px; color: var(--color-ink); font-size: var(--text-xl); }
.content-prose h3 { color: var(--color-ink); }
.content-prose p, .content-prose li { line-height: 1.95; }
.content-prose ul, .content-prose ol { padding-left: 1.3em; }
.contact-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 40px; align-items: start; }
.contact-panel { position: sticky; top: calc(var(--header-height) + 24px); padding: 28px; border-radius: var(--radius-md); background: var(--color-surface); }
.contact-panel h2 { margin: 0 0 12px; color: var(--color-ink); font-size: var(--text-lg); }
.contact-panel .phone { display: block; margin-block: 20px 8px; color: var(--color-ink); font-size: 1.5rem; font-weight: var(--weight-bold); }
.form-card { padding: clamp(22px, 4vw, 42px); border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.required { margin-left: 6px; color: var(--color-primary); font-size: var(--text-xs); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 12px 14px; background: white; color: var(--color-ink); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border: 2px solid var(--color-ink); outline: none; }
.checkbox-row { display: flex; align-items: start; gap: 10px; }
.checkbox-row input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--color-primary); }
.notice { border-left: 3px solid var(--color-primary); padding: 14px 18px; background: var(--color-primary-soft); }
.notice p { margin: 0; }
.site-footer { margin-top: var(--space-16); border-top: 1px solid var(--color-line); background: white; }
.footer-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-block: 54px 40px; }
.footer-main h2, .footer-main h3 { margin: 0 0 14px; color: var(--color-ink); font-size: var(--text-base); }
.footer-main p { margin: 8px 0; color: var(--color-muted); font-size: var(--text-sm); }
.footer-links { display: grid; gap: 9px; color: var(--color-body); font-size: var(--text-sm); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--color-line-soft); padding-block: 20px; color: var(--color-muted); font-size: var(--text-xs); }
.image-credit { color: var(--color-muted); font-size: 11px; }
.notice-strip { padding: 12px 0; background: var(--color-primary-soft); color: var(--color-ink); text-align: center; font-size: var(--text-sm); }
.notice-strip a { color: var(--color-primary-hover); font-weight: var(--weight-semibold); text-decoration: underline; }
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.badge { display: inline-flex; border-radius: var(--radius-pill); padding: 5px 11px; background: var(--color-surface-strong); color: var(--color-ink); font-size: var(--text-xs); }
.gallery-feature { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
.gallery-feature img { width: 100%; height: 100%; min-height: 220px; border-radius: var(--radius-md); object-fit: cover; }
.gallery-feature .gallery-stack { display: grid; gap: 14px; }
.gallery-feature .gallery-stack img { min-height: 0; aspect-ratio: 1.6; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.pagination a, .pagination span { display: grid; min-width: 42px; height: 42px; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; }
.pagination .active { border-color: var(--color-ink); background: var(--color-ink); color: white; }
@media (max-width: 1128px) {
  .desktop-nav, .header-cta { display: none; }
  .mobile-nav { display: block; }
  .hero { min-height: 0; grid-template-columns: 1fr 1fr; }
  .hero-image, .hero-image img { min-height: 440px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 744px) {
  :root { --header-height: 70px; --space-16: 52px; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 35px; }
  .hero h1 { max-width: 600px; font-size: clamp(2.45rem, 12vw, 4rem); }
  .hero-image, .hero-image img { min-height: 390px; max-height: 60vh; }
  .section-head { display: block; }
  .section-head > .text-link { display: inline-block; margin-top: 16px; }
  .card-grid, .profile-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feature { padding: 19px 16px; }
  .split, .contact-layout { grid-template-columns: 1fr; }
  .split-image { order: 0; }
  .step-list { grid-template-columns: 1fr 1fr; }
  .news-item { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .news-item time { grid-column: 1 / -1; }
  .quote-grid { grid-template-columns: 1fr; }
  .cta-band { display: block; }
  .cta-actions { margin-top: 22px; }
  .contact-panel { position: static; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-top: 7px; }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .gallery-feature { grid-template-columns: 1fr; }
  .gallery-feature > img { aspect-ratio: 4/3; }
  .gallery-feature .gallery-stack { grid-template-columns: 1fr 1fr; }
  .info-table th { width: 36%; }
}
@media (max-width: 420px) {
  .feature-grid, .step-list, .footer-main { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .hero-image, .hero-image img { min-height: 320px; }
  .hero-actions .btn { width: 100%; }
  .price-table th, .price-table td { padding: 12px; font-size: var(--text-sm); }
  .brand-logo { width: 142px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Notion-inspired re-skin: warm document canvas, quiet borders and one blue action color. */
:root { --leading-body: 1.6; }
.site-header { background: rgb(255 255 255 / 96%); }
.brand-mark { border-radius: var(--radius-md); background: var(--color-secondary); }
.header-cta { border: 1px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); }
.header-cta:hover { background: var(--color-canvas); color: var(--color-ink); }
.btn { border-radius: var(--radius-pill); font-weight: var(--weight-medium); }
.btn-secondary { border-color: var(--color-line); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-soft); }
.btn-secondary:hover { color: var(--color-ink); background: var(--color-surface); }
.btn-pill { border-radius: var(--radius-pill); }
.hero-band { position: relative; overflow: hidden; background-color: var(--color-secondary); background-image: radial-gradient(circle at 8% 24%, rgb(98 174 240 / 34%) 0 5px, transparent 6px), radial-gradient(circle at 17% 74%, rgb(214 182 246 / 38%) 0 8px, transparent 9px), radial-gradient(circle at 45% 12%, rgb(255 100 200 / 25%) 0 5px, transparent 6px), radial-gradient(circle at 81% 18%, rgb(221 91 0 / 25%) 0 7px, transparent 8px), radial-gradient(circle at 90% 78%, rgb(42 157 153 / 28%) 0 6px, transparent 7px); color: white; }
.hero-band .hero { min-height: min(740px, calc(100svh - var(--header-height))); padding-block: clamp(42px, 7vw, 88px); }
.hero-band .eyebrow { color: #b9dfff; }
.hero-band h1 { color: white; font-family: var(--font-sans); font-weight: var(--weight-bold); letter-spacing: -.055em; line-height: 1.16; }
.hero-band .hero-copy { color: rgb(255 255 255 / 86%); }
.hero-band .hero-note { color: rgb(255 255 255 / 78%); }
.hero-band .hero-note::before { background: var(--color-accent-sky); }
.hero-band .btn-secondary { border-color: rgb(255 255 255 / 40%); background: rgb(255 255 255 / 9%); color: white; box-shadow: none; }
.hero-band .btn-secondary:hover { background: rgb(255 255 255 / 16%); color: white; }
.hero-band .hero-image { border: 1px solid rgb(255 255 255 / 20%); }
.hero-band .hero-label { border: 0; box-shadow: var(--shadow-soft); }
.section-head h2, .page-intro h1 { font-weight: var(--weight-bold); letter-spacing: -.045em; }
.page-intro { padding-top: clamp(44px, 6vw, 76px); }
.card, .quote, .step, .feature, .form-card, .contact-panel { border-color: var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: none; }
.card:hover { box-shadow: var(--shadow-soft); }
.cta-band { border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-body); }
.cta-band h2 { color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.cta-band p { color: var(--color-muted); }
.cta-band .btn-secondary { border-color: var(--color-line); background: white; color: var(--color-ink); }
.site-footer { background: var(--color-canvas); }
.footer-main h2, .footer-main h3 { font-weight: var(--weight-semibold); }
.tag { background: var(--color-surface); }
.field input, .field select, .field textarea { border-radius: 4px; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: var(--shadow-soft); }
.faq-list details { background: var(--color-surface); }
.notice { border-color: var(--color-primary); background: var(--color-primary-soft); }
@media (max-width: 744px) {
  .hero-band .hero { padding-block: 38px 44px; }
  .hero-band .hero h1 { font-size: clamp(2.35rem, 10vw, 3.8rem); }
}

/* Tropical editorial direction inspired by the reference venue profile. */
body { background: var(--color-canvas); }
.site-header { border-color: var(--color-line); }
.brand-mark { border-radius: 50%; background: var(--color-primary); }
.brand-name { letter-spacing: .08em; }
.desktop-nav a { font-size: var(--text-xs); letter-spacing: .015em; }
.header-cta { color: var(--color-primary); }
.hero-band { background-color: #f1f1e9; background-image: radial-gradient(ellipse at 10% 90%, rgb(125 145 107 / 10%), transparent 34%), radial-gradient(ellipse at 92% 12%, rgb(139 185 178 / 13%), transparent 32%); color: var(--color-body); }
.hero-band .hero { min-height: min(740px, calc(100svh - var(--header-height))); }
.hero-band .eyebrow { color: var(--color-primary); }
.hero-band h1 { color: var(--color-ink); font-family: var(--font-serif); font-size: clamp(2.5rem, 5.2vw, 4.9rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.42; }
.hero-band .hero-copy { color: var(--color-body); }
.hero-band .hero-note { color: var(--color-muted); }
.hero-band .hero-note::before { background: var(--color-accent-teal); }
.hero-band .btn-secondary { border-color: var(--color-line); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-soft); }
.hero-band .btn-secondary:hover { color: var(--color-ink); background: white; }
.hero-band .hero-image { border: 0; border-radius: 3px; box-shadow: var(--shadow-soft); }
.hero-band .hero-label { border-radius: 3px; background: rgb(250 249 245 / 94%); letter-spacing: .07em; }
.section-head h2, .page-intro h1 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.025em; }
.eyebrow { letter-spacing: .16em; }
.page-intro { padding-bottom: var(--space-12); }
.page-intro h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.3; }
.page-intro > p:last-child { max-width: 760px; color: var(--color-muted); }
.card { border-color: var(--color-line-soft); border-radius: 3px; }
.card:hover { box-shadow: 0 8px 26px rgb(50 63 46 / 8%); }
.card-image { aspect-ratio: 1.45; }
.card-body { padding: 24px 22px 26px; }
.card-body h3 { font-family: var(--font-serif); font-weight: 500; }
.quote { border-radius: 3px; background: #f1f1e9; }
.quote p { font-family: var(--font-serif); }
.tag { border-color: #dce2d6; background: #f1f4ee; color: var(--color-primary); }
.badge { background: #f1f4ee; color: var(--color-primary); }
.step { border: 1px solid var(--color-line-soft); border-radius: 3px; }
.step::before { color: var(--color-accent-teal); }
.cta-band { border-color: transparent; border-radius: 3px; background: var(--color-secondary); color: white; }
.cta-band h2 { color: white; font-family: var(--font-serif); font-weight: 500; }
.cta-band p { color: rgb(255 255 255 / 78%); }
.cta-band .btn { background: white; color: var(--color-secondary); }
.cta-band .btn:hover { background: #f1f1e9; }
.cta-band .btn-secondary { border-color: rgb(255 255 255 / 40%); background: transparent; color: white; box-shadow: none; }
.cta-band .btn-secondary:hover { background: rgb(255 255 255 / 10%); color: white; }
.site-footer { background: #f1f1e9; }
.footer-main h2, .footer-main h3 { font-family: var(--font-serif); font-weight: 500; }
.footer-bottom { border-color: #dfdfd4; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(81 104 79 / 12%); }
.notice { border-color: var(--color-accent-teal); background: #edf2ed; }
.profile-card { border-radius: 3px; }
.profile-card h3 { font-family: var(--font-serif); font-weight: 500; }
@media (max-width: 744px) {
  .hero-band .hero { padding-block: 38px 44px; }
  .hero-band .hero h1 { font-size: clamp(2.25rem, 9.5vw, 3.5rem); }
}

/* White and pale violet palette; full-width lead photo with the headline beneath it. */
body, .site-header, .site-footer { background: #fff; }
.section-soft { background: transparent; }
.eyebrow, .text-link, .desktop-nav a:hover, .desktop-nav a[aria-current="page"], a:hover { color: #79628f; }
.brand-mark { background: var(--color-primary); color: #30263a; }
.header-cta { color: #705986; }
.btn { background: var(--color-primary); color: var(--color-on-primary); }
.btn:hover { background: var(--color-primary-hover); color: #30263a; }
.btn-secondary { border-color: var(--color-line); background: #fff; color: var(--color-ink); }
.hero-band { background: #fff; color: var(--color-body); }
.hero-band .hero { display: flex; width: 100%; max-width: none; min-height: 0; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.hero-band .hero-image { order: 1; width: 100%; height: clamp(360px, 58vw, 760px); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.hero-band .hero-image img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 48%; }
.hero-band .hero-image::after { height: 22%; background: linear-gradient(transparent, rgb(0 0 0 / 12%)); }
.hero-band .hero > div:first-child { order: 2; width: min(calc(100% - 2 * var(--page-gutter)), var(--content-width)); margin-inline: auto; padding-block: clamp(38px, 6vw, 74px); }
.hero-band .eyebrow { color: #806a98; }
.hero-band h1 { color: var(--color-ink); font-family: var(--font-serif); font-size: clamp(2.45rem, 5vw, 4.6rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.38; }
.hero-band .hero-copy, .hero-band .hero-note { color: var(--color-body); }
.hero-band .hero-note::before { background: var(--color-primary); }
.hero-band .btn-secondary { border-color: var(--color-line); background: #fff; color: var(--color-ink); box-shadow: var(--shadow-soft); }
.hero-band .hero-label { border-radius: var(--radius-pill); background: rgb(255 255 255 / 94%); }
.tag, .badge { border-color: #e5dceb; background: #f7f3fa; color: #705986; }
.notice { border-color: #c5b2d7; background: #f7f3fa; }
.cta-band { border-color: var(--color-line); background: #fff; color: var(--color-body); }
.cta-band h2 { color: var(--color-ink); }
.cta-band p { color: var(--color-muted); }
.cta-band .btn { background: var(--color-primary); color: var(--color-on-primary); }
.cta-band .btn-secondary { border-color: var(--color-line); background: #fff; color: var(--color-ink); }
.footer-bottom { border-color: var(--color-line-soft); }
@media (max-width: 744px) {
  .hero-band .hero { padding: 0; }
  .hero-band .hero-image { height: clamp(300px, 72vw, 480px); }
  .hero-band .hero > div:first-child { padding-block: 34px 48px; }
  .hero-band .hero h1 { font-size: clamp(2.2rem, 9vw, 3.4rem); }
}
.booking-prompt { position: relative; display: grid; justify-items: center; gap: 8px; width: min(100%, 920px); margin: 28px auto 0; border: 1px solid #e7e0ed; border-radius: 14px; padding: 20px 62px; background: #f8f5fa; color: var(--color-ink); text-align: center; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.booking-prompt:hover { background: #f2edf6; box-shadow: var(--shadow-soft); color: var(--color-ink); transform: translateY(-1px); }
.booking-icon { display: grid; width: 34px; height: 34px; place-items: center; color: #806a98; }
.booking-icon svg { width: 26px; height: 26px; }
.booking-copy { display: grid; gap: 3px; }
.booking-copy strong { color: var(--color-ink); font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: var(--weight-semibold); }
.booking-copy small { color: var(--color-muted); font-size: var(--text-sm); }
.booking-arrow { position: absolute; top: 50%; right: 24px; color: #806a98; font-size: 1.4rem; transform: translateY(-50%); }
.hero-band .hero > div:first-child .hero-note { justify-content: center; flex-wrap: wrap; gap: 8px; }
.hero-band .hero-note .text-link { margin-left: 5px; color: #705986; }
.hero-band .hero-image img { object-position: center 54%; }
@media (max-width: 600px) {
  .booking-prompt { margin-top: 22px; padding: 18px 40px; }
  .booking-copy small { max-width: 275px; }
  .booking-arrow { right: 15px; }
}
.hero-band h1 { font-size: clamp(1.7rem, 3.2vw, 2.75rem); }
.hero-band ~ .section .section-head h2 { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.eyebrow, .hero-label { display: none; }
.hero-band .hero > div:first-child { text-align: center; }
.hero-image[data-carousel] { isolation: isolate; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .7s ease; }
.hero-slide.is-active { z-index: 1; opacity: 1; }
.hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-band .hero-slide:nth-child(3) img { object-fit: cover; object-position: center 24%; }
.hero-band h1 { width: fit-content; max-width: 100%; margin-inline: auto; font-size: clamp(.95rem, 4.2vw, 2.75rem); letter-spacing: -.05em; white-space: nowrap; }
.section-head h2, .page-intro h1, .hero-band h1, .split-copy h2, .contact-panel h2, .cta-band h2, .content-prose h2 { width: fit-content; max-width: 100%; border-bottom: 2px solid var(--color-primary); padding-bottom: .32em; }
.hero-band h1 { margin-inline: auto; }
.hero-band .hero-copy { max-width: none; margin-inline: auto; font-size: clamp(.55rem, 2.4vw, 1.18rem); text-align: center; white-space: nowrap; }
.header-cta { border-color: var(--color-contact-border); background: var(--color-contact-box); }
.header-cta:hover { background: var(--color-contact-box-hover); }
.booking-prompt { border-color: var(--color-contact-border); background: var(--color-contact-box); }
.booking-prompt:hover { background: var(--color-contact-box-hover); }
.cta-band .cta-actions .btn:first-child { border-color: var(--color-contact-border); background: var(--color-contact-box); color: var(--color-ink); }
.cta-band .cta-actions .btn:first-child:hover { background: var(--color-contact-box-hover); }
.header-cta, .booking-prompt, .cta-band .cta-actions .btn:first-child { border: 2px solid transparent; background: linear-gradient(var(--color-contact-box), var(--color-contact-box)) padding-box, var(--gradient-gold-frame) border-box; box-shadow: 0 0 0 1px rgb(255 255 255 / 72%) inset, 0 2px 8px rgb(155 119 28 / 16%); }
.header-cta:hover, .booking-prompt:hover, .cta-band .cta-actions .btn:first-child:hover { background: linear-gradient(var(--color-contact-box-hover), var(--color-contact-box-hover)) padding-box, var(--gradient-gold-frame) border-box; }
.carousel-control { position: absolute; z-index: 3; top: 50%; display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / 92%); color: #554464; box-shadow: var(--shadow-soft); cursor: pointer; font-size: 1.8rem; line-height: 1; transform: translateY(-50%); }
.carousel-control:hover { background: #fff; }
.carousel-prev { left: 20px; }
.carousel-next { right: 20px; }
.carousel-dots { position: absolute; z-index: 3; bottom: 20px; left: 50%; display: flex; align-items: center; gap: 8px; border: 1px solid rgb(255 255 255 / 42%); border-radius: var(--radius-pill); padding: 9px 12px; background: rgb(35 31 39 / 35%); transform: translateX(-50%); }
.carousel-dots button { width: 8px; height: 8px; border: 0; border-radius: var(--radius-pill); padding: 0; background: rgb(255 255 255 / 68%); cursor: pointer; }
.carousel-dots button[aria-pressed="true"] { width: 22px; background: #fff; }
@media (max-width: 600px) {
  .carousel-control { width: 38px; height: 38px; }
  .carousel-prev { left: 12px; }
  .carousel-next { right: 12px; }
  .carousel-dots { bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.pastor-page h1 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); }
.pastor-page h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.mc-page h1 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); }
.mc-page h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.card-image img[src="assets/mc-bilingual.jpg"] { object-position: center 18%; }
.pastor-page .card-body h3 { position: relative; display: flex; align-items: center; gap: .65em; padding-bottom: .55em; color: var(--color-ink); font-family: var(--font-serif); font-size: 1.12rem; letter-spacing: .015em; }
.pastor-page .card-body h3::before { width: .58em; height: .58em; flex: 0 0 auto; border: 1px solid var(--color-gold); background: var(--color-primary-soft); content: ""; transform: rotate(45deg); }
.pastor-page .card-body h3::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--color-gold), var(--color-primary) 45%, transparent); content: ""; }
.pastor-page .page-intro > p:last-child { max-width: none; white-space: nowrap; }
@media (max-width: 744px) {
  .pastor-page .page-intro > p:last-child { width: 100%; max-width: 100%; overflow: visible; overflow-wrap: anywhere; font-size: clamp(1rem, 4vw, 1.25rem); white-space: normal; }
}

.choir-page h1 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); }

.choir-page h2 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.choir-page .card-body h3 { font-size: 1rem; }

.fee-page h1 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); }
.fee-page h2 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.fee-page h3 { font-size: 1rem; }

.company-page h1 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); }
.company-page h2 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.company-page h3 { font-size: 1rem; }
.hero-band .hero { display: flex; width: 100%; max-width: none; min-height: 0; flex-direction: column; gap: 0; margin: 0; padding: 0; }
.hero-band .hero-image { order: 1; width: 100%; height: clamp(400px, 58vw, 760px); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.hero-band .hero-image img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 48%; }
.hero-band .hero-overlay { position: absolute; z-index: 2; top: clamp(22px, 5vw, 64px); left: 50%; width: min(900px, calc(100% - 40px)); padding: clamp(16px, 2.5vw, 32px); border: 1px solid rgb(255 255 255 / 75%); background: rgb(255 255 255 / 86%); text-align: center; transform: translateX(-50%); }
.hero-band .hero-overlay .eyebrow { margin: 0 0 10px; }
.hero-band .hero-overlay h1 { white-space: normal; }
.hero-band .hero-overlay .hero-copy { margin: 14px auto 0; white-space: normal; }
.hero-band .hero-below { order: 2; width: min(calc(100% - 2 * var(--page-gutter)), var(--content-width)); margin-inline: auto; padding-block: clamp(34px, 5vw, 60px); }
.hero-band .hero-description { margin: 0 auto clamp(22px, 3vw, 36px); text-align: center; }
.hero-band .hero-description p { margin: .45em 0; line-height: 1.9; }
.hero-band .hero-description p:first-child { color: var(--color-ink); font-family: var(--font-serif); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 600; }
.hero-band .hero-below .booking-prompt { margin-inline: auto; }
.hero-band .hero-below .hero-note { justify-content: center; }
@media (max-width: 600px) {
  .hero-band .hero-image { height: clamp(410px, 112vw, 560px); }
  .hero-band .hero-overlay { top: 18px; width: calc(100% - 28px); padding: 14px 12px; }
  .hero-band .hero-overlay h1 { font-size: clamp(1.2rem, 5.5vw, 2rem); line-height: 1.45; }
  .hero-band .hero-overlay .hero-copy { font-size: clamp(.82rem, 3.5vw, 1rem); }
  .hero-band .hero-below { padding-block: 30px 42px; }
}
.hero-band .hero-overlay { border: 0; background: transparent; }
.hero-band .hero-overlay .eyebrow,
.hero-band .hero-overlay h1,
.hero-band .hero-overlay .hero-copy { color: #fff; text-shadow: 0 2px 12px rgb(24 18 30 / 72%), 0 1px 3px rgb(24 18 30 / 85%); }

.hero-band .hero-overlay { top: 50%; transform: translate(-50%, -50%); }

.hero-band .hero-description p:first-child { color: var(--color-primary); font-family: var(--font-serif); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: .035em; }
.hero-band .hero-description p:first-child { color: #222; font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: .055em; }
.hero-band .hero-description p:first-child::before,
.hero-band .hero-description p:first-child::after { color: var(--color-gold); font-size: .72em; }
.hero-band .hero-description p:first-child::before { content: "✧　"; }
.hero-band .hero-description p:first-child::after { content: "　✧"; }
.hero-band .hero-description p:first-child::before,
.hero-band .hero-description p:first-child::after { content: none; }
.hero-band .hero-description p:first-child { -webkit-text-stroke: .35px #222; text-shadow: 1px 1px 0 rgb(190 155 82 / 55%); }
.hero-band .hero-description p:first-child { color: #171717; font-weight: 700; -webkit-text-stroke: .45px #171717; text-shadow: none; text-decoration-line: underline; text-decoration-color: var(--color-gold); text-decoration-thickness: 1px; text-underline-offset: .28em; }
.occasion-section .pill-row { gap: 12px; }
.occasion-section .pill-row .tag { min-height: 52px; border: 1px solid var(--color-primary); border-radius: 10px; padding: 12px 18px; background: #fff; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
.occasion-section .pill-row .tag::after { margin-left: 12px; color: var(--color-gold); content: "›"; font-size: 1.25em; line-height: 1; }
.occasion-section .pill-row .tag:hover { border-color: var(--color-gold); background: var(--color-primary-soft); transform: translateY(-2px); }
.occasion-section .pill-row .tag:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 3px; }
.occasion-section .pill-row .tag { border: 1px solid var(--color-gold); background: linear-gradient(135deg, #fff 0%, #f5effa 100%); box-shadow: 0 4px 14px rgb(74 50 92 / 12%); font-weight: 700; }
.occasion-section .pill-row .tag:hover { border-color: var(--color-gold); background: linear-gradient(135deg, #f5edf9 0%, #eee3f5 100%); box-shadow: 0 7px 18px rgb(74 50 92 / 18%); }
.occasion-section .pill-row { gap: 16px; }
.occasion-section .pill-row .tag { min-height: 64px; padding: 17px 25px; font-size: clamp(1rem, 1.3vw, 1.12rem); }
@media (max-width: 600px) {
  .occasion-section .pill-row .tag { min-height: 60px; padding: 15px 19px; font-size: 1rem; }
}
.occasion-section .occasion-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: rgb(217 198 230 / 42%); color: var(--color-primary); }
.occasion-section .occasion-icon svg { display: block; width: 23px; height: 23px; }
.occasion-section .pill-row .tag { gap: 11px; }
@media (max-width: 600px) {
  .occasion-section .occasion-icon { width: 32px; height: 32px; flex-basis: 32px; }
}
.occasion-section .occasion-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 10px; }
.occasion-section .occasion-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid rgb(187 160 112 / 65%); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgb(53 40 62 / 10%); color: var(--color-ink); text-decoration: none; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.occasion-section .occasion-card:hover { transform: translateY(-5px); border-color: var(--color-gold); box-shadow: 0 16px 34px rgb(53 40 62 / 17%); }
.occasion-section .occasion-card:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.occasion-section .occasion-photo { position: relative; display: block; overflow: hidden; aspect-ratio: 1.72; background: var(--color-primary-soft); }
.occasion-section .occasion-photo::after { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgb(25 20 29 / 45%)); content: ""; }
.occasion-section .occasion-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.occasion-section .occasion-card:hover .occasion-photo img { transform: scale(1.045); }
.occasion-section .occasion-number { position: absolute; z-index: 1; right: 14px; bottom: 12px; color: #fff; font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: .12em; text-shadow: 0 1px 5px rgb(0 0 0 / 35%); }
.occasion-section .occasion-card-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px 22px 22px; }
.occasion-section .occasion-card-content strong { color: var(--color-ink); font-family: var(--font-serif); font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: .025em; }
.occasion-section .occasion-description { margin-top: 8px; color: var(--color-muted); font-size: var(--text-sm); line-height: 1.8; }
.occasion-section .occasion-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 17px; color: var(--color-primary); font-size: var(--text-sm); font-weight: 700; }
.occasion-section .occasion-link > span { color: var(--color-gold); font-size: 1.3rem; transition: transform .18s ease; }
.occasion-section .occasion-card:hover .occasion-link > span { transform: translateX(4px); }
@media (max-width: 900px) {
  .occasion-section .occasion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 600px) {
  .occasion-section .occasion-grid { grid-template-columns: 1fr; gap: 16px; }
  .occasion-section .occasion-photo { aspect-ratio: 1.8; }
}
.occasion-section .occasion-subtitle { margin: 14px 0 28px; color: var(--color-muted); font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.8; text-align: center; }
.occasion-section .occasion-list { display: grid; gap: 36px; }
.occasion-section .occasion-item { display: flex; width: min(92%, 960px); min-height: 205px; align-items: center; gap: clamp(26px, 6vw, 80px); margin-left: 0; color: var(--color-ink); text-decoration: none; }
.occasion-section .occasion-item:nth-child(even) { flex-direction: row-reverse; margin-left: auto; }
.occasion-section .occasion-art { position: relative; display: grid; width: clamp(170px, 25vw, 230px); height: clamp(160px, 22vw, 205px); flex: 0 0 auto; place-items: center; color: var(--color-primary); }
.occasion-section .occasion-art::before { position: absolute; inset: 5% 9%; border-radius: 52% 48% 58% 42% / 43% 55% 45% 57%; background: linear-gradient(145deg, rgb(228 216 238 / 76%), rgb(249 243 230 / 82%)); content: ""; transition: transform .3s ease; }
.occasion-section .occasion-item:nth-child(even) .occasion-art::before { border-radius: 46% 54% 42% 58% / 54% 42% 58% 46%; }
.occasion-section .occasion-art svg { position: relative; z-index: 1; width: 80%; max-height: 90%; overflow: visible; filter: drop-shadow(0 3px 2px rgb(85 64 99 / 8%)); }
.occasion-section .occasion-index { position: absolute; z-index: 2; right: 5%; bottom: 8%; color: var(--color-gold); font-family: var(--font-serif); font-size: 1rem; letter-spacing: .12em; }
.occasion-section .occasion-copy { display: flex; max-width: 540px; flex-direction: column; align-items: flex-start; }
.occasion-section .occasion-item:nth-child(even) .occasion-copy { align-items: flex-end; text-align: right; }
.occasion-section .occasion-kicker { margin-bottom: 8px; color: var(--color-primary); font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.occasion-section .occasion-copy strong { color: var(--color-ink); font-family: var(--font-serif); font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 600; letter-spacing: .04em; }
.occasion-section .occasion-description { margin-top: 12px; color: var(--color-muted); font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.9; }
.occasion-section .occasion-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--color-primary); font-weight: 700; }
.occasion-section .occasion-link > span { color: var(--color-gold); font-size: 1.3rem; transition: transform .2s ease; }
.occasion-section .occasion-item:hover .occasion-art::before { transform: rotate(-5deg) scale(1.06); }
.occasion-section .occasion-item:hover .occasion-link > span { transform: translateX(5px); }
.occasion-section .occasion-item:focus-visible { border-radius: 12px; outline: 3px solid var(--color-primary); outline-offset: 8px; }
@media (max-width: 640px) {
  .occasion-section .occasion-list { gap: 22px; }
  .occasion-section .occasion-item, .occasion-section .occasion-item:nth-child(even) { width: 100%; min-height: 0; flex-direction: row; gap: 14px; margin-left: 0; }
  .occasion-section .occasion-art { width: 112px; height: 118px; }
  .occasion-section .occasion-art svg { width: 92%; }
  .occasion-section .occasion-index { right: 0; bottom: 4%; font-size: .8rem; }
  .occasion-section .occasion-copy, .occasion-section .occasion-item:nth-child(even) .occasion-copy { align-items: flex-start; text-align: left; }
  .occasion-section .occasion-copy strong { font-size: 1.12rem; }
  .occasion-section .occasion-description { margin-top: 5px; font-size: .84rem; line-height: 1.65; }
  .occasion-section .occasion-link { margin-top: 8px; font-size: .9rem; }
}
.occasion-section .occasion-item { width: min(96%, 1120px); min-height: 300px; gap: clamp(30px, 6vw, 84px); }
.occasion-section .occasion-art { width: clamp(280px, 38vw, 420px); height: clamp(220px, 29vw, 310px); overflow: hidden; border: 4px solid #fff; border-radius: 18px; background: #f4eff7; box-shadow: 0 12px 32px rgb(53 40 62 / 18%), 0 0 0 1px rgb(187 160 112 / 70%); }
.occasion-section .occasion-art::before { content: none; }
.occasion-section .occasion-art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.occasion-section .occasion-item:hover .occasion-art img { transform: scale(1.045); }
.occasion-section .occasion-index { display: none; }
@media (max-width: 640px) {
  .occasion-section .occasion-item, .occasion-section .occasion-item:nth-child(even) { width: 100%; min-height: 0; gap: 14px; }
  .occasion-section .occasion-art { width: clamp(120px, 36vw, 170px); height: clamp(120px, 36vw, 170px); flex: 0 0 auto; border-width: 3px; border-radius: 12px; }
}
.occasion-section .occasion-art { border: 0; border-radius: 52% 48% 58% 42% / 43% 55% 45% 57%; background: transparent; box-shadow: none; filter: drop-shadow(0 12px 16px rgb(53 40 62 / 18%)); }
.occasion-section .occasion-item:nth-child(even) .occasion-art { border-radius: 46% 54% 42% 58% / 54% 42% 58% 46%; }
.occasion-section .occasion-art img { border-radius: inherit; }
@media (max-width: 640px) {
  .occasion-section .occasion-art { border-radius: 52% 48% 58% 42% / 43% 55% 45% 57%; }
  .occasion-section .occasion-item:nth-child(even) .occasion-art { border-radius: 46% 54% 42% 58% / 54% 42% 58% 46%; }
}
.occasion-section .occasion-link { gap: 4px; }
.occasion-section .occasion-link > span { font-size: 1.75rem; line-height: .9; }
.occasion-section .occasion-link > span { font-size: 2.2rem; font-weight: 700; }
.occasion-section .occasion-link { gap: 0; font-size: 1.12rem; }
.occasion-section .occasion-link > span { margin-left: 2px; }
@media (max-width: 640px) {
  .occasion-section .occasion-link { font-size: 1.08rem; }
}
.occasion-section .occasion-copy strong { display: inline-block; padding-bottom: 9px; color: #3e3150; font-size: clamp(1.55rem, 2.5vw, 2.2rem); font-weight: 700; letter-spacing: .055em; line-height: 1.35; }
.occasion-section .occasion-copy strong::after { display: block; width: 54px; height: 3px; margin-top: 9px; border-radius: 3px; background: linear-gradient(90deg, var(--color-gold), #ead8a7); content: ""; }
@media (max-width: 640px) {
  .occasion-section .occasion-copy strong { padding-bottom: 4px; font-size: 1.18rem; }
  .occasion-section .occasion-copy strong::after { width: 38px; height: 2px; margin-top: 5px; }
}
.occasion-section .occasion-copy strong::after { width: 100%; }

/*司会者プロフィールを司会メニューのサブメニューとして表示*/
.desktop-nav .nav-dropdown { position: relative; display: flex; align-items: center; }
.desktop-nav .nav-submenu { position: absolute; z-index: 20; top: 100%; left: 50%; min-width: 190px; padding-top: 14px; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.desktop-nav .nav-submenu a { display: block; padding: 13px 16px; border: 1px solid var(--color-line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-soft); color: var(--color-ink); }
.desktop-nav .nav-submenu a:hover, .desktop-nav .nav-submenu a[aria-current="page"] { color: var(--color-primary); }
.desktop-nav .nav-dropdown:hover .nav-submenu, .desktop-nav .nav-dropdown:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mobile-links .mobile-submenu-link { padding-left: 18px; color: var(--color-primary); font-size: var(--text-sm); }




/* ５名分の司会者プロフィール */
.mc-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.mc-template .profile-photo { position: relative; aspect-ratio: 4 / 3; background: var(--color-surface, #f6f2f8); }
.profile-placeholder { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; color: var(--color-primary); }
.profile-placeholder > span { font-size: 4rem; line-height: 1; }
.profile-placeholder p { margin: 14px 0 0; font-size: .9rem; }
.profile-number { position: absolute; bottom: 14px; left: 16px; padding: 5px 12px; background: white; border-radius: 20px; font-size: .8rem; }
.mc-template .card-body { padding: 28px; }
.mc-template h3 { margin: 0; font-size: 1.4rem; }
.profile-reading { margin: 6px 0 22px; color: var(--color-muted); font-size: .85rem; }
.profile-details { margin: 0; }
.profile-details > div { display: grid; grid-template-columns: 85px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--color-line-soft); }
.profile-details dt { font-weight: 600; font-size: .85rem; }
.profile-details dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
.profile-message { margin-top: 20px; padding: 18px; background: var(--color-surface, #f6f2f8); border-radius: var(--radius-md); }
.profile-message h4 { margin: 0 0 8px; font-size: .9rem; }
.profile-message p { margin: 0; font-size: .9rem; }
@media (max-width: 640px) { .mc-profile-grid { grid-template-columns: 1fr; gap: 24px; } .mc-template .card-body { padding: 22px; } }
.mc-template:has(img[src="assets/mc-hana-5530.jpg"]) .profile-photo { aspect-ratio: 4 / 5; }
.mc-template img[src="assets/mc-hana-5530.jpg"] { object-position: center 28%; }
.profile-reading:empty { display: none; }
.mc-profile-grid { align-items: start; }
.profile-details dd, .profile-message p { line-height: 1.9; }
.mc-template:has(img[src="assets/mc-takagi.jpg"]) .profile-photo { aspect-ratio: 4 / 5; }
.mc-template img[src="assets/mc-takagi.jpg"] { object-position: center 25%; }
.mc-template:has(img[src="assets/mc-nishimura.jpg"]) .profile-photo { aspect-ratio: 4 / 5; }
.mc-template img[src="assets/mc-nishimura.jpg"] { object-position: center 25%; }
.mc-template:has(img[src="assets/mc-imazawa.jpg"]) .profile-photo { aspect-ratio: 4 / 5; }
.mc-template img[src="assets/mc-imazawa.jpg"] { object-position: center 25%; }
.mc-template:has(img[src="assets/mc-tsubaki.jpg"]) .profile-photo { aspect-ratio: 4 / 5; }
.mc-template img[src="assets/mc-tsubaki.jpg"] { object-position: center 25%; }
/* プロフィールをコンパクトに表示 */
.mc-profile-grid { gap: 24px; }
.mc-profile-grid .mc-template .profile-photo { aspect-ratio: 4 / 3; max-height: 300px; }
.mc-profile-grid .mc-template .profile-photo img { object-position: center 22%; }
.mc-profile-grid .mc-template .card-body { padding: 20px; }
.mc-profile-grid .mc-template h3 { font-size: 1.2rem; }
.mc-profile-grid .profile-details > div { grid-template-columns: 72px 1fr; gap: 10px; padding: 10px 0; }
.mc-profile-grid .profile-details dt { font-size: .78rem; }
.mc-profile-grid .profile-details dd, .mc-profile-grid .profile-message p { font-size: .82rem; line-height: 1.8; }
.mc-profile-grid .profile-message { margin-top: 14px; padding: 14px; }
.mc-profile-grid .profile-message h4 { font-size: .82rem; }
@media (max-width: 640px) {
  .mc-profile-grid { gap: 20px; }
  .mc-profile-grid .mc-template .profile-photo { max-height: 260px; }
  .mc-profile-grid .mc-template .card-body { padding: 18px; }
}
body.mc-page:has(.mc-profile-grid) .page-intro h1 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
/* プロフィールを１人ずつ横長に配置 */
.mc-profile-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.mc-profile-grid .mc-template { display: grid; grid-template-columns: minmax(200px, 28%) minmax(0, 1fr); align-items: start; }
.mc-profile-grid .mc-template .profile-photo { width: 100%; aspect-ratio: 3 / 4; max-height: none; }
.mc-profile-grid .mc-template .profile-photo img { object-position: center 25%; }
.mc-profile-grid .mc-template .card-body { padding: 24px 28px; min-width: 0; }
@media (max-width: 640px) {
  .mc-profile-grid .mc-template { grid-template-columns: minmax(0, 1fr); }
  .mc-profile-grid .mc-template .profile-photo { width: min(100%, 280px); aspect-ratio: 3 / 4; max-height: none; margin-inline: auto; }
  .mc-profile-grid .mc-template .card-body { padding: 20px; }
}
.choir-main-photo { max-width: 860px; }
.choir-main-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.choir-audio-sample { max-width: 700px; padding: clamp(20px, 4vw, 32px); background: var(--color-surface, #f6f2f8); border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); }
.choir-audio-sample h3 { margin-top: 0; font-family: var(--font-serif); }
.choir-audio-sample audio { display: block; width: 100%; margin-top: 18px; }
/* 聖歌隊ページの写真サイズ */
.choir-main-photo { max-width: 580px; margin-inline: auto; }
/* 聖歌隊ページの淡いロゴ背景 */
.choir-page main { position: relative; isolation: isolate; }
.choir-page main::before { position: absolute; z-index: -1; inset: 0; background-image: url("assets/sumile-background-mark.png"), url("assets/sumile-background-mark.png"); background-repeat: no-repeat; background-size: clamp(260px, 36vw, 500px), clamp(240px, 32vw, 440px); background-position: right -100px top 100px, left -110px bottom 200px; opacity: .055; mix-blend-mode: multiply; pointer-events: none; content: ""; }
@media (max-width: 640px) { .choir-page main::before { background-position: right -100px top 150px, left -100px bottom 200px; opacity: .04; } }
/* 全ページに控えめなロゴの透かし模様 */
main { position: relative; isolation: isolate; }
main::before, .choir-page main::before { position: absolute; z-index: -1; inset: 0; background-image: url("assets/sumile-background-mark.png"), url("assets/sumile-background-mark.png"); background-repeat: repeat-y, repeat-y; background-size: 300px 700px, 240px 850px; background-position: right -65px top 80px, left -70px top 420px; opacity: .045; mix-blend-mode: multiply; pointer-events: none; content: ""; }
@media (max-width: 640px) {
  main::before, .choir-page main::before { background-size: 190px 650px, 160px 800px; background-position: right -70px top 60px, left -70px top 380px; opacity: .035; }
}
main::before, .choir-page main::before { background-size: 300px auto, 240px auto; }
@media (max-width: 640px) { main::before, .choir-page main::before { background-size: 190px auto, 160px auto; } }
/* 各ページに３つの透かしを分散配置 */
main::before, .choir-page main::before {
  background-image: url("assets/sumile-background-mark.png"), url("assets/sumile-background-mark.png"), url("assets/sumile-background-mark.png");
  background-repeat: no-repeat;
  background-size: clamp(180px, 25vw, 340px) auto, clamp(170px, 23vw, 310px) auto, clamp(190px, 27vw, 360px) auto;
  background-position: 12% 8%, 82% 48%, 32% 88%;
  opacity: .045;
}
@media (max-width: 640px) {
  main::before, .choir-page main::before {
    background-size: 170px auto, 150px auto, 180px auto;
    background-position: 8% 8%, 90% 48%, 25% 88%;
    opacity: .035;
  }
}
/* 青色を生かした大きな背景マーク */
main::before, .choir-page main::before {
  background-size: clamp(280px, 38vw, 520px) auto, clamp(260px, 35vw, 480px) auto, clamp(300px, 40vw, 550px) auto;
  opacity: .12;
}
@media (max-width: 640px) {
  main::before, .choir-page main::before { background-size: 260px auto, 240px auto, 280px auto; opacity: .10; }
}
/* お客様の声ページの見出し */
.voices-page main h1 { font-size: clamp(1.5rem, 2.7vw, 2.15rem); }
.voices-page main h2 { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
.voices-page main h3 { font-size: 1rem; }
.voices-page main h4 { font-size: .95rem; }
/* 写真を添えられるトップページのお客様の声 */
.home-voice-grid { gap: 28px; }
.home-voice-card { overflow: hidden; background: #fff; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.voice-photo-placeholder, .home-voice-photo { display: flex; width: 100%; aspect-ratio: 16 / 10; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: linear-gradient(135deg, #f5f0f7, #faf8f4); color: #9a8ba5; object-fit: cover; }
.voice-photo-placeholder > span:first-child { font-size: 2.5rem; line-height: 1; }
.voice-photo-placeholder > span:last-child { font-size: .85rem; letter-spacing: .15em; }
.home-voice-card .quote { margin: 0; border: 0; border-radius: 0; padding: 26px; background: transparent; box-shadow: none; }
.home-voice-card .quote cite { display: block; padding-top: 14px; border-top: 1px solid var(--color-line-soft); }
@media (max-width: 640px) { .home-voice-card .quote { padding: 20px; } }
/* トップページのお客様の声６件 */
.home-voice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-voice-card .voice-photo-placeholder, .home-voice-card .home-voice-photo { aspect-ratio: 16 / 9; }
.home-voice-card .quote { padding: 18px; }
.home-voice-card .quote p { font-size: .88rem; line-height: 1.8; }
.home-voice-card .quote cite { font-size: .76rem; padding-top: 10px; }
@media (max-width: 900px) { .home-voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .home-voice-grid { grid-template-columns: 1fr; } }
.home-voice-photo { object-position: center 48%; }
.voice-read-more { display: inline-block; margin-top: 14px; font-size: .88rem; }
.voice-detail { overflow: hidden; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: #fff; }
.voice-detail-photo { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #faf9f7; }
.voice-detail .quote { margin: 0; border: 0; }
/* お客様の声：小さな写真と読みやすい横長の本文 */
.voices-page .quote-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
.voices-page .voice-detail { display: flex; align-items: flex-start; gap: 26px; padding: 24px; }
.voices-page .voice-detail-photo { flex: 0 0 200px; width: 200px; height: auto; max-height: none; border-radius: 6px; object-fit: contain; }
.voices-page .voice-detail .quote { flex: 1; min-width: 0; padding: 0; background: transparent; box-shadow: none; }
.voices-page .voice-detail .quote p { writing-mode: horizontal-tb; font-size: 1rem; line-height: 2; overflow-wrap: anywhere; }
.voices-page .voice-detail .quote cite { display: block; margin-top: 18px; font-size: .9rem; }
@media (max-width: 640px) {
  .voices-page .voice-detail { flex-direction: column; gap: 18px; padding: 20px; }
  .voices-page .voice-detail-photo { flex-basis: auto; width: min(160px, 100%); align-self: center; }
}
/* お客様の声の写真をさらに小さく */
.voices-page .voice-detail-photo { flex-basis: 130px; width: 130px; }
@media (max-width: 640px) { .voices-page .voice-detail-photo { flex-basis: auto; width: 110px; } }
/* 会社概要の会場・企業・出演実績 */
.company-credit-list { display: grid; gap: 24px; }
.company-credit-group { display: grid; grid-template-columns: minmax(180px, 25%) minmax(0, 1fr); gap: 28px; padding: 28px; background: #fff; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); }
.company-credit-label h3 { margin: 0 0 10px; color: var(--color-ink); font-family: var(--font-serif); }
.company-credit-label p { margin: 0; font-size: .8rem; color: var(--color-muted); }
.company-credit-names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.company-credit-names li { padding: 0 0 9px; border-bottom: 1px solid var(--color-line-soft); font-size: .88rem; line-height: 1.75; overflow-wrap: anywhere; }
@media (max-width: 760px) { .company-credit-group { grid-template-columns: 1fr; gap: 20px; padding: 22px; } }
@media (max-width: 480px) { .company-credit-names { grid-template-columns: 1fr; } }
/* 牧師ページの形式別案内と安心のご案内 */
.ceremony-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ceremony-photo-link { display: block; }
.ceremony-details { display: grid; gap: 24px; }
.ceremony-detail { padding: 28px; background: #fff; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); scroll-margin-top: 110px; }
.ceremony-detail p { line-height: 1.95; }
.ceremony-detail-actions { margin-top: 20px; }
.assurance-panel { padding-block: 30px; }
.assurance-heading { display: flex; align-items: center; gap: 20px; }
.assurance-emblem { display: block; flex: 0 0 58px; width: 58px; color: var(--color-primary); }
.assurance-emblem svg { display: block; width: 100%; }
.assurance-fee-link { margin-top: 24px; }
@media (max-width: 1000px) { .ceremony-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .ceremony-card-grid { grid-template-columns: 1fr; } .ceremony-detail { padding: 20px; } }