/* =========================================================================
   Obento-Ide main stylesheet — loaded async after critical.css.
   Composes on top of UIkit's class system, so we avoid heavy resets and
   only style obento-* / theme-specific selectors plus a few uk-* overrides.
   ========================================================================= */

/* ---------------------------------------------------------------------
   Below-the-fold base (moved out of style.css to keep it header-only)
   ------------------------------------------------------------------- */

picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* 固定ページ本文に埋め込まれた iframe (Googleマップ・Googleカレンダー等) が
   width="800"/"1200" 等の固定属性を持つので、モバイルで body を破ってしまう。
   max-width で抑え、アスペクト比はラッパが無い場合は元の height を維持。 */
iframe { max-width: 100%; }
.top-calendar, .ggmap { max-width: 100%; overflow: hidden; }
.top-calendar iframe, .ggmap iframe { width: 100%; height: auto; aspect-ratio: 4 / 3; }
@media (max-width: 640px) {
    .ggmap iframe { aspect-ratio: 4 / 3; min-height: 280px; }
    .top-calendar iframe { aspect-ratio: 3 / 4; min-height: 380px; }
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--obento-font-heading);
    color: var(--obento-primary, #fd7589);
    line-height: 1.4;
    overflow-wrap: break-word;
}

a {
    color: var(--obento-link, #fd7589);
    text-decoration-skip-ink: auto;
}
a:hover, a:focus { text-decoration: underline; }

/* WordPress alignment utilities */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.sticky { display: block; }

/* Accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
    padding: 10px 18px;
    background: var(--obento-text, #222);
    color: #fff;
    border-radius: 0 0 6px 6px;
    transition: top 0.25s;
}

/* ---------------------------------------------------------------------
   Hero slideshow (UIkit) — v1 visual parity
   ------------------------------------------------------------------- */

.obento-hero__slideshow {
    background: var(--obento-subtle, #fff8f4);
}
.obento-hero__slideshow .uk-slideshow-items img {
    object-fit: cover;
}
.obento-hero__overlay {
    background: rgba(255, 255, 255, 0.86);
    padding: 28px 38px;
    border-radius: 4px;
    color: #111;
    max-width: min(86%, 760px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.obento-hero__overlay .obento-hero__title {
    color: #111;
    border-bottom: 2px solid var(--obento-primary, #fd7589);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.obento-hero__overlay .obento-hero__sub {
    color: #444;
}
.obento-hero .uk-slidenav { color: #fff; }

@media (max-width: 640px) {
    .obento-hero__overlay { padding: 16px 20px; max-width: 92%; }
    .obento-hero__title { font-size: 1.6rem; }
    .obento-hero__sub { font-size: 0.95rem; }
}

/* ---------------------------------------------------------------------
   Section padding cap (uk-section can run too tall on narrow viewports)
   ------------------------------------------------------------------- */

.obento-hero + .obento-concept,
.obento-hero + .obento-menu-section {
    padding-top: clamp(2rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------------
   Concept
   ------------------------------------------------------------------- */

.obento-concept__img {
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08);
}
.obento-concept__body p { margin: 0 0 0.8em; }
.obento-concept__body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Menu cards
   ------------------------------------------------------------------- */

.obento-menu-section__lead {
    color: var(--obento-muted, #6b7280);
    margin-top: -1rem;
}
.obento-menu-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.obento-menu-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1);
}
.obento-menu-card .uk-card-title {
    color: var(--obento-primary, #fd7589);
}

/* ---------------------------------------------------------------------
   Order flow (numbered steps)
   ------------------------------------------------------------------- */

.obento-order {
    background: var(--obento-subtle, #fff8f4);
}
.obento-order__lead {
    color: var(--obento-muted, #6b7280);
    margin-top: -1rem;
}
.obento-order__steps {
    counter-reset: obento-step;
    list-style: none;
    padding: 0;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-width: 1100px;
    margin: 32px auto 0;
}
.obento-order__step {
    counter-increment: obento-step;
    position: relative;
}
.obento-order__step-card {
    background: var(--obento-surface, #fff);
    border: 1px solid var(--obento-border, #e6dccf);
    border-radius: 8px;
    padding: 56px 24px 24px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    position: relative;
}
.obento-order__step-card::before {
    content: counter(obento-step);
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    background: var(--obento-primary, #fd7589);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--obento-font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(253, 117, 137, 0.35);
}
.obento-order__step-title {
    text-align: center;
    color: var(--obento-primary, #fd7589);
    font-size: 1.15rem;
    margin: 0 0 12px;
}
.obento-order__step-body p { margin: 0 0 0.6em; }
.obento-order__step-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------- */

.obento-section-heading {
    font-family: var(--obento-font-heading);
    color: var(--obento-primary, #fd7589);
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-top: 0;
    margin-bottom: 2rem;
}

.obento-main {
    min-height: 50vh;
}

/* ---------------------------------------------------------------------
   Header navigation
   ------------------------------------------------------------------- */

.obento-header__nav-band {
    /* nav 帯の下線は親 .obento-header--pc の 1px 金ラインに任せる (二重線回避) */
    border-bottom: none;
}
.obento-header__nav-band .uk-navbar-nav > li > a,
.obento-nav > li > a {
    color: var(--obento-header-text, #fff);
    font-family: var(--obento-font-heading, "Shippori Mincho", "Hiragino Mincho ProN", serif);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    min-height: 44px;
    padding: 0 18px;
    text-transform: none;
    font-size: 0.95rem;
}
.obento-header__nav-band .uk-navbar-nav > li > a:hover,
.obento-header__nav-band .uk-navbar-nav > li.current > a {
    color: var(--obento-accent, #e85a72);
}

.uk-offcanvas-bar { background: var(--obento-primary, #fd7589); }
.uk-offcanvas-bar .uk-nav > li > a { color: #fff; font-size: 1.05rem; padding: 12px 0; }

/* ---------------------------------------------------------------------
   Page (inner) hero — kept similar to v1 visually
   ------------------------------------------------------------------- */

.obento-page-hero {
    margin-bottom: 32px;
}
.obento-page-hero__text {
    background: rgba(255, 255, 255, 0.78);
    padding: 18px 24px;
    border-radius: 4px;
    max-width: 80%;
    color: #111;
}
.obento-page-hero__heading {
    font-family: var(--obento-font-heading);
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin-bottom: 4px;
    border-bottom: 2px solid #000;
    padding-bottom: 6px;
}
.obento-page-hero__desc {
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    color: #333;
}

.obento-page-title {
    font-family: var(--obento-font-heading);
    color: var(--obento-primary, #fd7589);
    margin: 24px 0 32px;
}

/* ---------------------------------------------------------------------
   Cards / Loop
   ------------------------------------------------------------------- */

.obento-loop-card .uk-card-title a {
    color: var(--obento-text, #222);
    text-decoration: none;
}
.obento-loop-card:hover .uk-card-title a { color: var(--obento-primary, #fd7589); }

.obento-loop-card .uk-card-media-top img {
    transition: transform 0.5s ease;
}
.obento-loop-card:hover .uk-card-media-top img { transform: scale(1.03); }

/* ---------------------------------------------------------------------
   Latest / news list
   ------------------------------------------------------------------- */

.obento-latest__list li {
    padding: 12px 4px;
}
.obento-latest__list .uk-text-meta {
    color: var(--obento-primary, #fd7589);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.obento-latest__title {
    color: var(--obento-text, #222);
    transition: color 0.15s;
}
.obento-latest__list a:hover .obento-latest__title { color: var(--obento-primary, #fd7589); }

/* ---------------------------------------------------------------------
   Instagram section
   ------------------------------------------------------------------- */

.obento-instagram-section .obento-section-heading [uk-icon] {
    color: var(--obento-primary, #fd7589);
    margin-right: 0.4em;
    vertical-align: -2px;
}
.obento-instagram--link .uk-button { background: var(--obento-primary, #fd7589); color: #fff; border: 0; }
.obento-instagram--link .uk-button:hover { background: var(--obento-text, #222); }

/* ---------------------------------------------------------------------
   Access (map)
   ------------------------------------------------------------------- */

.obento-access__map {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--obento-border, #e6dccf);
}
.obento-access__map iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* ---------------------------------------------------------------------
   本文側 CTA ボタン (お電話 / ネット注文 等) を明朝 + 太字に
   .obento-main 以下を対象 (front-page と singular で wrapper 構造が違うので
   article ベースより main ベースの方が両方カバーできる)
   ------------------------------------------------------------------- */
.obento-main .uk-button.uk-button-default,
.obento-main .uk-button.uk-button-danger {
    font-family: var(--obento-font-heading, "Shippori Mincho", "Hiragino Mincho ProN", serif);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    height: auto;
    min-height: 52px;
    padding: 12px 24px;
    line-height: 1.4;
}
.obento-main .uk-button.uk-button-default {
    background: #fff;
    border: 2px solid var(--obento-primary, #fd7589);
    color: var(--obento-primary, #fd7589);
}
.obento-main .uk-button.uk-button-default:hover {
    background: var(--obento-primary, #fd7589);
    color: #fff;
}
.obento-main .uk-button.uk-button-danger {
    background: var(--obento-primary, #fd7589);
    border: 2px solid var(--obento-primary, #fd7589);
    color: #fff;
}
.obento-main .uk-button.uk-button-danger:hover {
    background: #e85a72;
    border-color: #e85a72;
}

/* ---------------------------------------------------------------------
   Brand "obi" (帯) — used for headings on legacy content
   ------------------------------------------------------------------- */

.obi,
.headline_small,
h1.uk-heading-divider {
    background: var(--obento-primary, #fd7589);
    color: #fff;
    padding: 14px 2rem;
    border-radius: 2px;
    font-family: var(--obento-font-heading);
    font-size: 1.4rem;
    margin-bottom: 1.6rem;
}
/* .obi が .uk-container と併用されると UIkit が左右パディングを 0 にしてしまうので明示的に上書き */
.uk-container.obi,
.uk-container-expand.obi {
    padding-left: 2rem;
    padding-right: 2rem;
}

.uk-heading-divider {
    border-bottom: 2px solid var(--obento-accent, #e85a72);
    padding-bottom: 0.6em;
}

/* ---------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------- */

.obento-footer {
    background: var(--obento-footer-bg, #fd7589);
    color: var(--obento-footer-text, #fff);
    margin-top: 80px;
}
.obento-footer a {
    color: var(--obento-footer-text, #fff);
    text-decoration: none;
    opacity: 0.9;
}
.obento-footer a:hover { opacity: 1; text-decoration: underline; }
.obento-footer .widget-title {
    color: #fff !important;
    border-bottom: 2px solid var(--obento-accent, #e85a72);
    padding-bottom: 0.4em;
    margin-bottom: 1em;
}
.obento-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.08);
    font-family: var(--obento-font-heading);
    letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------------
   Legacy / fallback for v1 layouts still in content
   ------------------------------------------------------------------- */

.home_panel_wrap .uk-overlay {
    color: #000;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px;
    font-weight: 600;
    line-height: 1.3;
}
.panel_title { font-size: 1.4rem; }

.home_map { margin-top: 60px; margin-bottom: 60px; }
.ggmap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; }
.ggmap iframe, .ggmap object, .ggmap embed {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

.display-posts-listing {
    list-style: none;
    padding-left: 0;
}
.display-posts-listing li {
    border-bottom: 1px dotted var(--obento-border, #e6dccf);
    padding: 10px 4px;
}
.display-posts-listing .date {
    color: var(--obento-primary, #fd7589);
    font-weight: 600;
    margin-right: 0.6em;
}

.home_concept {
    padding: 32px;
    border: 2px solid var(--obento-border, #e6dccf);
    border-radius: 6px;
    background: var(--obento-surface, #fff);
}

.home_bannerarea img { margin: 4px; border-radius: 4px; }

/* Nagare (注文の流れ) — keep numbered counters from v1 */
.nagare_wrap {
    background-image: linear-gradient(180deg, var(--obento-border, #e6dccf) 0 100%);
    background-position: center center;
    background-repeat: repeat-y;
    background-size: 2px 100%;
    counter-reset: number;
    list-style: none;
    padding: 0;
}
.nagare_wrap > li > div {
    padding: 24px 32px;
    border: 2px solid var(--obento-border, #e6dccf);
    border-radius: 6px;
    margin-bottom: 60px;
    background: var(--obento-surface, #fff);
}
.nagare_wrap li::before {
    counter-increment: number;
    content: counter(number);
    background: var(--obento-primary, #fd7589);
    display: inline-block;
    width: 2em; height: 2em;
    text-align: center;
    line-height: 2em;
    border-radius: 50%;
    margin-right: 0.5em;
    color: #fff;
    font-weight: 700;
}

/* Big text */
.big_text {
    font-family: var(--obento-font-heading);
    font-size: clamp(1.2rem, 3vw, 1.8rem);
}

/* Hero text block */
.hero {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
    font-size: clamp(1.6rem, 3.5vw, 3rem);
    line-height: 1.3;
}

/* Pagination */
.pagination, .page-numbers {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
}
.page-numbers a, .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid var(--obento-border, #e6dccf);
    background: var(--obento-surface, #fff);
    color: var(--obento-text, #222);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.page-numbers.current, .page-numbers a:hover {
    background: var(--obento-primary, #fd7589);
    color: #fff;
    border-color: var(--obento-primary, #fd7589);
}

/* ---------------------------------------------------------------------
   Mobile tweaks
   ------------------------------------------------------------------- */

@media (max-width: 640px) {
    .obento-page-hero__text { max-width: 92%; padding: 12px 16px; }
    .obento-section-heading { font-size: 1.4rem; margin-bottom: 1.4rem; }
    .obento-footer { margin-top: 40px; }
}