/* Shared, subtle rounding for content and controls. Full-width heroes and logos stay unchanged. */
:root {
    --moitie-radius: 12px;
    --moitie-control-radius: 8px;
    --section-content-gap: 2.5rem;
}

.container img.img-fluid:not(.main_logo),
.container .onclick,
.modal-content,
.map-embed {
    border-radius: var(--moitie-radius);
}

.btn,
.form-control,
.custom-select,
.dropdown-menu,
footer .contact .hours {
    border-radius: var(--moitie-control-radius);
}

/* Clip the embedded map to its rounded frame, including positioned map layers. */
.map-embed {
    overflow: hidden;
    isolation: isolate;
}

.modal-content {
    overflow: hidden;
}

#shop-info {
    scroll-margin-top: calc(142px + 1rem + env(safe-area-inset-top, 0px));
}

/* Both selected typefaces provide regular 400; avoid synthetic bold. */
body {
    font-family: "Yomogi", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 18px;
    line-height: 1.9;
    font-weight: 400;
    font-synthesis: none;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.font-weight-bold, .btn {
    font-family: "Yusei Magic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
    font-weight: 400 !important;
}

#shop-info .font-weight-bold {
    font-size: 1rem;
}

table.calendar {
    font-size: 18px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

table.calendar th {
    font-weight: 400;
}

footer .contact .text,
footer .contact .hours {
    font-size: 0.9rem;
}

.modal-body img.img-fluid {
    border-radius: var(--moitie-radius);
}

/* A small hand-drawn wave replaces the full-width heading rules. */
.section-heading {
    line-height: 1.6;
    padding-inline: 0.5rem;
    overflow-wrap: anywhere;
}

.section-heading::after {
    content: "";
    display: block;
    width: 5.5rem;
    max-width: 45%;
    height: 0.8rem;
    margin: 0.45rem auto 1rem;
    --heading-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 14'%3E%3Cpath d='M3 8 C11 2 19 14 27 8 S43 2 51 8 S67 14 75 8 S91 2 101 8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask: var(--heading-wave) center / contain no-repeat;
    mask: var(--heading-wave) center / contain no-repeat;
}

/* Fixed branding overlays the top photo without reserving a white header strip. */
.mainlogo_box {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1040;
    padding-top: env(safe-area-inset-top, 0px);
    background: transparent;
    pointer-events: none;
}

.mainlogo_box a {
    display: inline-block;
    pointer-events: auto;
}

.main_logo {
    object-fit: contain;
}



/* True round dots, 1.5px in diameter, spaced on a 12px rhythm. */
#shop-info .shop-row {
    padding-bottom: 0.6rem;
    background-image: radial-gradient(circle at 0.75px 0.75px, currentColor 0.65px, transparent 0.75px);
    background-size: 12px 1.5px;
    background-position: left bottom;
    background-repeat: repeat-x;
}

/* Preserve the former photo box, including its 9.2px inline-row baseline space. */
.slider {
    position: relative;
    width: 100%;
    aspect-ratio: 1200 / 797;
    box-sizing: content-box;
    padding-bottom: 9.2px;
    overflow: hidden;
}
.slider > div { position: absolute; inset: 0; opacity: 0; }
.slider > div:first-child { opacity: 1; }
.slider .hero-slide { opacity: 0; z-index: 0; transition: opacity 2000ms linear; --hero-from: translate3d(-.65%, -.3%, 0) scale(1.04); --hero-to: translate3d(.65%, .3%, 0) scale(1.10); }
.slider .hero-slide.is-current { opacity: 1; z-index: 2; }
.slider .hero-slide.is-leaving { opacity: 1; z-index: 1; }
.slider .hero-slide[data-hero-motion="1"] { --hero-from: translate3d(.6%, .3%, 0) scale(1.10); --hero-to: translate3d(-.6%, -.3%, 0) scale(1.04); }
.slider .hero-slide[data-hero-motion="2"] { --hero-from: translate3d(-.3%, .6%, 0) scale(1.05); --hero-to: translate3d(.3%, -.6%, 0) scale(1.11); }
.slider img { display: block; width: 100%; height: 100%; object-fit: cover; transform: var(--hero-from); }
.slider .hero-moving img { animation: hero-drift var(--hero-duration) linear both; }
.slider.hero-paused .hero-slide { transition: none; }
.slider.hero-paused .hero-moving img { animation-play-state: paused; }
@keyframes hero-drift { from { transform: var(--hero-from); } to { transform: var(--hero-to); } }
@media (prefers-reduced-motion: reduce) { .slider img { animation: none !important; transform: none; } .slider .hero-slide { transition: none; } }

/* Site styling previously bundled with the older framework. */
body { color: #59311e; background: #fff; word-break: break-all; font-feature-settings: "palt"; }
.container { padding-inline: 5px; }
.row { --bs-gutter-x: 10px; }
@media (min-width: 1400px) { .container { max-width: 1140px; } }
.main_logo { width: 150px; height: 126px; margin: .5rem 0; object-fit: contain; }
.mainlogo_box > .text-center { line-height: 0; }
.mainlogo_box a { vertical-align: top; }
.mainlogo_box .main_logo { display: block; }
footer { color: #59311e; }
footer .contact { margin: 1rem 0; }
/* Telephone links use the surrounding body text in every interaction state. */
a[href^="tel:"]:any-link,
a[href^="tel:"]:hover,
a[href^="tel:"]:active {
    color: inherit;
    font: inherit;
    text-decoration: none;
}
footer .contact .hours { display: inline-block; padding: 0 2rem; color: #fff; background: #59311e; }
table.calendar { margin: 0 auto; }
table.calendar th, table.calendar td { padding: .5rem; text-align: center; }
.map-embed { max-width: 100%; height: 400px; position: relative; }
.map-embed > div { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-embed img { max-width: none; }
#map-canvas .gm-style .gm-style-iw div { overflow: visible; }

/* A sharp photo with a softly blurred copy underneath on hover-capable screens. */
.cake-link { display: block; position: relative; isolation: isolate; border-radius: var(--moitie-radius); text-decoration: none; }
.cake-image { display: block; width: 100%; position: relative; z-index: 1; box-shadow: none !important; }
.cake-shadow-copy { position: absolute; left: 3%; top: 5%; width: 94%; height: 90%; object-fit: cover; border-radius: inherit; filter: blur(22px); transform: translateY(3%); opacity: 0; z-index: -1; pointer-events: none; transition: opacity .25s ease; }
.cake-link:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { .cake-link:hover .cake-shadow-copy { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .cake-shadow-copy { transition: none; } }

/* White, soft Lightbox3 backdrop; keep controls readable against it. */
.lightbox3-overlay { --lb-backdrop-color: rgba(255, 253, 249, .76); --lb-chrome-bg: rgba(255,255,255,.92); --lb-chrome-text: #59311e; --lb-image-border-radius: 12px; }
.lightbox3-backdrop { backdrop-filter: blur(30px) saturate(.8); -webkit-backdrop-filter: blur(30px) saturate(.8); }
.lightbox3-close, .lightbox3-arrow { color: #59311e; background: rgba(255,255,255,.9); box-shadow: 0 2px 15px rgb(89 49 30 / 10%); }
.lightbox3-close:hover, .lightbox3-arrow:hover { background: #fff; }
.lightbox3-counter, .lightbox3-caption { color: #59311e; }
.lightbox3-close:focus-visible, .lightbox3-arrow:focus-visible { outline-color: #59311e; }

/* Blur only the page behind an open Lightbox, never the opened photograph. */
body:has(.lightbox3-overlay) > :not(.lightbox3-overlay):not(script) {
    filter: blur(20px);
}

/* Fixed logo keeps its original color and fades to white over photographs. */
.mainlogo_box a { position: relative; isolation: isolate; }
.mainlogo_box a::after {
    content: "";
    position: absolute;
    inset: 8px 0;
    background: #522b17;
    -webkit-mask: url("/_img/moitie-logo.svg") center / contain no-repeat;
    mask: url("/_img/moitie-logo.svg") center / contain no-repeat;
    pointer-events: none;
    opacity: 1;
}
.mainlogo_box.is-over-photo a::after { background-color: #fff; }
.mainlogo_box.logo-ready a::after { transition: background-color .45s ease; }
@media (prefers-reduced-motion: reduce) { .mainlogo_box.logo-ready a::after { transition: none; } }
a[x-apple-data-detectors] { color: inherit !important; font: inherit !important; text-decoration: none !important; }
a[href^="tel:"]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

.about-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.cake-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
.cake-cell:last-child { grid-column: 2; }
@media (max-width: 767.98px) {
    .about-layout { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .cake-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .cake-cell:last-child { grid-column: auto; }
}

/* Only the SNS QR keeps the requested orange shadow. */
.sns-qr.shadow { box-shadow: 0 .5rem 1rem rgb(253 126 20 / 30%) !important; }

/* Keep the cake heading and its note together, then breathe before the gallery. */
.cake-intro { margin-bottom: var(--section-content-gap); }
.cake-intro .section-heading { margin-bottom: 0; }
.cake-intro .section-heading::after { margin-bottom: .25rem; }


/* Keep the introductory rule as a rule rather than the handwritten font glyph. */
.intro-rule { font-family: system-ui, sans-serif; font-feature-settings: normal; letter-spacing: 0; }

@media (max-width: 767.98px) {
    .slider { aspect-ratio: 3 / 4; }
    .slider .hero-slide[data-hero-motion="0"] img { object-position: 60% 50%; }
    .slider .hero-slide[data-hero-motion="1"] img { object-position: 52% 50%; }
    .slider .hero-slide[data-hero-motion="2"] img { object-position: 72% 50%; }
}
.sns-url { margin-top: .5rem; }
.sns-text-link { color: inherit; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; word-break: normal; text-underline-offset: .18em; }
.sns-text-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Keep legacy anchor navigation immediate despite the framework's default smooth scroll. */
:root { scroll-behavior: auto; }
@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
    .mainlogo_box a::after { display: none; }
    .mainlogo_box .main_logo { transition: filter .45s ease; }
    .mainlogo_box.is-over-photo .main_logo { filter: brightness(0) invert(1); }
}
@media (prefers-reduced-motion: reduce) { .mainlogo_box .main_logo { transition: none; } }

/* One colored SVG mask avoids the original dark image showing through white edges. */
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
    .mainlogo_box .main_logo { opacity: 0; }
}
/* Requested map inset only; the map itself remains 400px tall. */
.map-frame { padding-inline: clamp(10px, 1.25vw, 20px); }
/* Match the marked gap below ABOUT decoration and below the cake reservation note. */
.about-intro > .section-heading { margin-bottom: 0; }
.about-intro > .section-heading::after { margin-bottom: 0; }
.about-layout { margin-top: var(--section-content-gap); }
@media (max-width: 767.98px) { :root { --section-content-gap: 2rem; } }

/* Style only our own InfoWindow content, preserving Google's frame and controls. */
.map-popup-title { color: #59311e; font-family: "Yusei Magic", sans-serif; font-size: 18px; line-height: 1.5; margin: 0; }
.map-popup { color: #59311e; font-family: "Yomogi", "Yu Gothic", sans-serif; font-size: 16px; line-height: 1.8; padding: 0 4px 6px; overflow-wrap: anywhere; }
.map-popup p { margin: 0 0 10px; }
.map-popup a:any-link { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.map-popup a:hover { text-decoration-thickness: 2px; }
.map-popup a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }