html, body { margin: 0; padding: 0; background: #F2EFE8; overflow-x: hidden; }
* { box-sizing: border-box; }
/* Kiwa — global responsive overrides
* Inline styles set the desktop layout. These media queries override them
* with !important so we don't have to rewrite every component.
* Hooks are className-based markers added in JSX components.
*/
img { max-width: 100%; }
/* Header dropdown hover */
.vc-nav-item:hover .vc-nav-dropdown { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
.vc-nav-dropdown a:hover { background: rgba(26,26,26,0.04); color: #D33718 !important; }
/* Tablet / mid-range — keep desktop layout but tighten gaps so things don't wrap awkwardly */
@media (max-width: 1080px) and (min-width: 901px) {
.kw-header-nav { gap: 18px !important; font-size: 12px !important; }
.vc-nav { gap: 18px !important; font-size: 12px !important; }
.vc-header-tag { display: none !important; }
}
@media (max-width: 900px) {
/* Header */
.kw-header-inner { padding: 14px 20px !important; flex-wrap: nowrap !important; }
.kw-header-nav { display: none !important; }
.vc-nav { display: none !important; }
.kw-header-tag { display: none !important; }
.kw-header-cta { padding: 7px 12px !important; font-size: 11px !important; }
.vc-cta-pill { display: none !important; }
.vc-burger { display: inline-flex !important; align-items: center; }
/* Section paddings */
.kw-section { padding: 56px 20px !important; }
.kw-section-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
.kw-section-grid .kw-section-label { position: static !important; }
/* Breadcrumb */
.kw-breadcrumb { padding: 90px 20px 0 !important; }
/* Page hero */
.kw-hero { padding: 28px 0 56px !important; }
.kw-hero-head { grid-template-columns: 1fr !important; gap: 16px !important; padding: 0 20px !important; margin-bottom: 36px !important; }
.kw-hero-img-wrap { padding: 0 20px !important; }
.kw-hero-img { height: 320px !important; }
.kw-hero h1 { font-size: clamp(28px, 8vw, 40px) !important; }
/* Brand grid → 1 col */
.kw-brand-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
.kw-brand-grid > div > div:first-child { height: 220px !important; }
/* Features auto, already responsive — tighten */
.kw-features { gap: 28px !important; }
/* Cross nav */
.kw-crossnav-grid { grid-template-columns: repeat(2, 1fr) !important; }
.kw-crossnav-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
/* Contact band */
.kw-contactband { padding: 64px 20px !important; }
.kw-contactband-grid { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
/* Footer */
.kw-footer { padding: 48px 20px 28px !important; }
.kw-footer-big { font-size: clamp(36px, 11vw, 96px) !important; letter-spacing: -2px !important; margin-bottom: 28px !important; }
.r-ed-footer { padding: 48px 20px 28px !important; }
.kw-footer-cols { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
.kw-footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
/* Profile rows (company-overview) */
.kw-profile-row { grid-template-columns: 1fr !important; gap: 4px !important; padding: 14px 0 !important; }
/* Locations */
.kw-loc-grid { grid-template-columns: 1fr !important; }
/* Timeline */
.kw-timeline-row { grid-template-columns: 80px 1fr !important; gap: 16px !important; }
.kw-timeline-row .kw-timeline-no { display: none !important; }
/* Photo strip */
.kw-photo3 { grid-template-columns: 1fr !important; }
.kw-photo3 > div { height: 220px !important; }
/* Contact form */
.kw-channel-grid { grid-template-columns: 1fr !important; }
/* Franchise models / steps */
.kw-fc-models { grid-template-columns: 1fr !important; }
.kw-fc-costs { grid-template-columns: 1fr !important; }
.kw-fc-steps { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
.kw-fc-cta { grid-template-columns: 1fr !important; padding: 32px !important; gap: 20px !important; }
.kw-fc-cta h2, .kw-fc-cta > div > div:last-child { font-size: 22px !important; }
/* News list */
.kw-news-row { grid-template-columns: 1fr !important; gap: 8px !important; padding: 22px 0 !important; }
.kw-news-row .kw-news-thumb { height: 180px !important; order: 4; }
.kw-news-row .kw-news-cat { justify-self: start !important; }
.kw-news-detail { padding: 24px 20px 56px !important; }
.kw-news-detail-img { height: 240px !important; margin-bottom: 28px !important; }
.kw-news-more { padding: 40px 20px 64px !important; }
.kw-news-more-grid { grid-template-columns: 1fr !important; }
/* FAQ */
.kw-faq-summary { grid-template-columns: 28px 1fr 20px !important; gap: 12px !important; }
.kw-faq-body { padding-left: 40px !important; }
/* Store list (apparel/tableware/furniture) */
.kw-store-row { grid-template-columns: 28px 1fr !important; gap: 6px !important; padding: 16px 0 !important; }
.kw-store-row .kw-store-hide { grid-column: 2 !important; font-size: 12px !important; color: rgba(26,26,26,0.6) !important; }
/* Privacy / Terms */
.kw-legal-row { grid-template-columns: 40px 1fr !important; gap: 12px !important; padding: 22px 0 !important; }
/* === Variant C (top page) === */
.vc-header-inner { padding: 14px 20px !important; flex-wrap: wrap !important; gap: 8px !important; }
.vc-nav { display: none !important; }
.vc-header-tag { display: none !important; }
.vc-header-cta .vc-cta-pill { display: none !important; }
.vc-header-cta .vc-burger { display: inline-flex !important; }
.vc-hero-h1 { font-size: clamp(34px, 9vw, 60px) !important; letter-spacing: -2px !important; }
.vc-hero-bottom { grid-template-columns: 1fr !important; gap: 20px !important; }
.vc-hero-bottom > div:nth-child(2) { display: none !important; }
.vc-hero-bottom > div:last-child { justify-content: flex-start !important; }
.vc-intro-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.vc-intro-paras { grid-template-columns: 1fr !important; gap: 20px !important; margin-top: 28px !important; }
.vc-photo-grid { grid-template-columns: 1fr !important; }
.vc-photo-grid img { height: 260px !important; }
.vc-biz-head { grid-template-columns: 1fr !important; gap: 16px !important; margin-bottom: 36px !important; }
.vc-biz-row { grid-template-columns: 60px 1fr !important; gap: 12px !important; padding: 18px 0 !important; }
.vc-biz-row > div:nth-child(2),
.vc-biz-row > div:nth-child(4) { display: none !important; }
.vc-biz-row > div:last-child { grid-column: 2 !important; }
.vc-news-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
.vc-news-row { grid-template-columns: 60px 1fr !important; gap: 12px !important; padding: 18px 0 !important; }
.vc-news-row > div:last-child { display: none !important; }
.vc-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
/* =====================================================
Kiwa Restaurants — r- prefix responsive additions
===================================================== */
/* Tablet (≤1080px) */
@media (max-width: 1080px) {
.r-pagehero { grid-template-columns: 1fr !important; gap: 24px !important; }
.r-section-head { grid-template-columns: 1fr !important; gap: 12px !important; align-items: start !important; }
.r-brands-grid { grid-template-columns: repeat(3, 1fr) !important; }
.r-cross-grid { grid-template-columns: repeat(2, 1fr) !important; }
.r-other-genres { grid-template-columns: repeat(3, 1fr) !important; }
.r-news-cards { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Mobile (≤900px) */
@media (max-width: 900px) {
/* Breadcrumb */
.r-breadcrumb { padding: 86px 20px 32px !important; }
/* PageHero outer section */
.r-pagehero-section { padding: 24px 20px 48px !important; }
/* Generic section padding */
.r-section { padding: 60px 20px !important; }
/* SectionHead (2-col → 1-col) */
.r-section-head { grid-template-columns: 1fr !important; gap: 8px !important; align-items: start !important; }
/* Genre hero inner content */
.r-hero-inner { padding: 32px 20px !important; }
.r-genre-h1 { letter-spacing: -2px !important; font-size: clamp(44px, 14vw, 120px) !important; }
/* Top page hero */
.r-hero-section { padding-top: 68px !important; }
.r-hero-split { padding: 32px 20px 36px !important; }
/* BrandRow compact (hide sig + arrow cols) */
.r-brand-row { grid-template-columns: 110px 1fr !important; gap: 14px !important; }
.r-brand-row > *:nth-child(3),
.r-brand-row > *:nth-child(4) { display: none !important; }
.r-brand-row-img { width: 110px !important; height: 82px !important; }
/* Brand grids */
.r-brands-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
/* CrossLinks */
.r-cross-grid { grid-template-columns: repeat(2, 1fr) !important; }
/* Genre: other genres */
.r-other-genres { grid-template-columns: repeat(2, 1fr) !important; }
/* News cards */
.r-news-cards { grid-template-columns: 1fr !important; }
/* Filter bar (brands page) */
.r-filter-bar { padding: 20px 20px 0 !important; top: 60px !important; }
.r-yomi-filter { display: none !important; }
/* Genre page — brands 2-col → 1-col */
.r-genre-brands { grid-template-columns: 1fr !important; }
.r-genre-brands > div { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Area page */
.r-area-split { grid-template-columns: 1fr !important; }
.r-districts-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
/* Header: SEARCH テキストを非表示にしてアイコンのみ残す */
.vc-search-label { display: none !important; }
.vc-search-pill { padding: 8px !important; }
/* Header: ブランドを見るボタンはスマホでは非表示 */
.r-brand-cta { display: none !important; }
/* Editorial: ヒーロー左右パディングを縮小 */
.r-ed-hero-pad { padding-left: 20px !important; padding-right: 20px !important; }
/* Editorial: 5枚コラージュ → 1枚フル幅に切り替え */
.r-mag-collage {
grid-template-columns: 1fr !important;
grid-template-rows: 240px !important;
padding: 0 20px !important;
margin-top: 28px !important;
}
.r-mag-collage > div:not(:first-child) { display: none !important; }
/* Editorial: ヒーロー下部パディングを縮小 */
.r-ed-hero-bottom { padding: 0 20px 60px !important; }
/* Editorial: セクションパディングを縮小 */
.r-ed-section { padding: 72px 20px !important; }
/* Editorial: チャプター2カラム → 1カラム、画像を下に */
.r-chapter { grid-template-columns: 1fr !important; gap: 36px !important; }
.r-chapter-img { order: 2 !important; height: 260px !important; }
/* Editorial: DISPATCHES 2カラム → 1カラム */
.r-editorial-news { grid-template-columns: 1fr !important; gap: 48px !important; }
}
/* Small mobile (≤480px) */
@media (max-width: 480px) {
.r-brands-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.r-cross-grid { grid-template-columns: 1fr !important; }
.r-other-genres { grid-template-columns: 1fr !important; }
.r-districts-grid { grid-template-columns: 1fr !important; }
}