/* Responsive layout: keep the existing artwork, colors and component styles. */
html[data-rk-layout="legacy"] :is(#content, #logo, #breadcrumbs, #global-menu, .menu-top-ul, #main, #main-in, #main-and-sidebar1, #main-and-sidebar1-big, #footer),
html[data-rk-layout="search"] :is(#content, #logo, #breadcrumbs, #global-menu, .menu-top-ul, #main, #main-in, #main-and-sidebar1, #main-and-sidebar1-big, #footer),
html[data-rk-layout="heritage"] :is(#content, #logo, #breadcrumbs, #global-menu, .menu-top-ul, #main, #main-in, #main-and-sidebar1, #main-and-sidebar1-big, #footer),
html[data-rk-layout="hotel-list"] :is(#content, #logo, #breadcrumbs, #global-menu, .menu-top-ul, #main, #main-in, #main-and-sidebar1, #main-and-sidebar1-big, #footer) {
  max-width: 100%;
  min-width: 0;
}
html[data-rk-layout="heritage"] body,
html[data-rk-layout="heritage"] #header-logo,
html[data-rk-layout="heritage"] #header-logo > div {
  max-width: 100%;
}
html[data-rk-layout="heritage"] li.marinabay {
  max-width: calc(100% - 10px);
}
@media (min-width: 1000px) {
  html[data-rk-layout="legacy"] .rk-sidebar-inside > #main-contents {
    max-width: calc(100% - 200px);
  }
  html[data-rk-layout="legacy"] .rk-sidebar-sibling {
    width: 80% !important;
    max-width: calc(100% - 200px) !important;
  }
  html[data-rk-layout="legacy"] .rk-sidebar-sibling > #main-contents {
    width: 96.25%;
  }
  html[data-rk-layout="heritage"] #main-and-sidebar1 {
    max-width: calc(100% - 200px);
  }
  html[data-rk-layout="heritage"] #main-and-sidebar1 > #main-contents {
    max-width: calc(100% - 200px);
  }
  html[data-rk-layout="heritage"] #global-menu > ul {
    max-width: calc(100% - 2px);
  }
  html[data-rk-layout="heritage"] #global-menu > ul > li {
    max-width: 20%;
  }
  html[data-rk-layout="heritage"] #global-menu > ul > li > a {
    max-width: 100%;
    box-sizing: border-box;
  }
}
#imgscrlbox0 img,
html[data-rk-layout="heritage"] #imgscrlbox img {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#imgscrlbox0 { display: flex !important; scroll-snap-type: x mandatory; }
#imgscrlbox0 > div { flex: 0 0 94%; scroll-snap-align: start; box-sizing: content-box; }
#breadcrumbs ol { max-width: 100%; box-sizing: border-box; margin-right: 0; }
.ryokoufbbox { max-width: 100%; box-sizing: border-box; }
.ryokoulikefbbox { max-width: 100%; }
.ryokoulikefbbox iframe { max-width: 100%; }
html[data-rk-layout="legacy"] #sidebar1 .ryokoufbbox { position: relative; }
html[data-rk-layout="legacy"] #sidebar1 .ryokoufbbox > a { position: static; }
html[data-rk-layout="heritage"] #main-contents iframe,
html[data-rk-layout="legacy"] #main-contents .contents iframe {
  max-width: 100%;
  box-sizing: border-box;
}
html[data-rk-layout="legacy"] #main-contents .contents iframe {
  min-width: 0 !important;
}
html[data-rk-layout="legacy"] #main-contents .contents > img,
html[data-rk-layout="legacy"] #main-contents .contents p > img,
html[data-rk-layout="legacy"] #main-contents .contents p > picture > img {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}
html[data-rk-layout="heritage"] #breadcrumbs { width: calc(100% - 10px); }
html[data-rk-layout="legacy"] .sub-menu-ul { max-width: 100%; }
html[data-rk-layout="legacy"] .sub-menu-ul li { max-width: 33%; box-sizing: border-box; }
html[data-rk-layout="search"] #menu-box { display: none; }
html[data-rk-layout="search"] #yomikomidataid > li .yokoscroll { height: auto; }
html[data-rk-layout="search"] #yomikomidataid > li { height: auto; display: flow-root; }
@media (min-width: 1000px) {
  .ryokoulikefbbox { width: 130px !important; margin-left: auto !important; margin-right: 0; }
  html[data-rk-layout="search"] #yomikomidataid > li .yokoscroll { min-height: 235px; }
  html[data-rk-layout="search"] #yomikomidataid > li { min-height: 320px; }
}

@media (max-width: 999px) {
  #main-contents .contents .basictopbox > .rk-spot-plan-add {
    width: auto !important;
    height: auto !important;
    padding-left: 2px !important;
  }
  #main-contents .contents .basictopbox > .rk-spot-plan-add img {
    width: 12px !important;
    height: 12px !important;
    border: 0 !important;
    padding: 0 !important;
  }
  html[data-rk-layout="legacy"] #main,
  html[data-rk-layout="legacy"] #main-in,
  html[data-rk-layout="legacy"] #main-and-sidebar1,
  html[data-rk-layout="legacy"] #main-and-sidebar1-big,
  html[data-rk-layout="legacy"] #main-contents,
  html[data-rk-layout="legacy"] #main-contents-top,
  html[data-rk-layout="search"] #main,
  html[data-rk-layout="search"] #main-in,
  html[data-rk-layout="search"] #main-and-sidebar1-big,
  html[data-rk-layout="search"] #main-contents,
  html[data-rk-layout="search"] #mysqldatabox {
    width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0;
  }
  html[data-rk-layout="legacy"] #sidebar1,
  html[data-rk-layout="legacy"] #sidebar2,
  html[data-rk-layout="search"] #sidebar1,
  html[data-rk-layout="search"] #sidebar2 { display: none; }
  html[data-rk-layout="legacy"] #breadcrumbs,
  html[data-rk-layout="search"] #breadcrumbs { display: none; }
  html[data-rk-layout="legacy"] #header-logo,
  html[data-rk-layout="search"] #header-logo { position: static; width: 100%; box-sizing: border-box; }
  html[data-rk-layout="legacy"] #menu-box,
  html[data-rk-layout="search"] #menu-box { display: block; }
  html[data-rk-layout="legacy"] #main-contents iframe,
  html[data-rk-layout="legacy"] #main-contents canvas { max-width: 100%; }
  /* Leaflet positions its canvases inside zero-width map panes. */
  html[data-rk-layout="legacy"] #main-contents .leaflet-pane canvas {
    max-width: none;
  }
  .rk-chart-wrap { width: 100%; height: 170px; position: relative; }
  .rk-chart-wrap canvas { width: 100% !important; height: 170px !important; }
  #hotel-price-fill-layer { max-width: 100%; }
  html[data-rk-layout="search"] #sidebar1-2 { width: 100%; max-width: 100%; box-sizing: border-box; }
  html[data-rk-layout="search"] #menuclickforjava { width: 100%; box-sizing: border-box; }
  html[data-rk-layout="search"] #menu-box { display: flow-root; clear: both; padding: 10px; width: 100%; box-sizing: border-box; }
  html[data-rk-layout="search"] #menu-box h4 { width: 100%; max-width: 100%; box-sizing: border-box; }
  html[data-rk-layout="search"] #menu-box .menu { margin: 10px 0; }
  /* The search action must cover the fixed My Plan/menu controls (z-index 95). */
  html[data-rk-layout="search"] #menuclickforjava { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  html[data-rk-layout="search"] #menuclickforjava #footer-smartphone {
    position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0;
    width: auto; height: auto; min-height: 80px; box-sizing: border-box;
    display: flex; align-items: center; gap: 8px; margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid #c5d8ed; box-shadow: 0 -3px 14px #12304c1a;
  }
  html[data-rk-layout="search"] #footer-smartphone .webreservation {
    position: static; float: none; width: 18px; height: 18px; margin: 0; flex: 0 0 18px;
  }
  html[data-rk-layout="search"] #footer-smartphone label { white-space: nowrap; font-size: 13px; }
  html[data-rk-layout="search"] #footer-smartphone .kensaku {
    position: static; float: none; flex: 1; width: auto; min-width: 0;
    height: 48px; margin: 0 0 0 8px; padding: 8px 16px; border: 0;
    border-radius: 8px; background: #087fff; color: #fff; font-size: 16px; font-weight: 700;
  }
  html[data-rk-layout="search"] #menu-box input[type="text"] { box-sizing: border-box; max-width: 100%; }
  html[data-rk-layout="legacy"] #main-contents .contents .topright img {
    max-width: 100%;
    height: auto;
  }
  html[data-rk-layout="heritage"] #main,
  html[data-rk-layout="heritage"] #main-in,
  html[data-rk-layout="heritage"] #main-and-sidebar1,
  html[data-rk-layout="heritage"] #main-and-sidebar1-big,
  html[data-rk-layout="heritage"] #main-contents,
  html[data-rk-layout="heritage"] #main-contents-top { width: 100%; max-width: 100%; box-sizing: border-box; }
  html[data-rk-layout="heritage"] #sidebar1,
  html[data-rk-layout="heritage"] #sidebar2 { display: none; }
  html[data-rk-layout="heritage"] iframe { max-width: 100%; }
  html[data-rk-layout="heritage"] img { max-width: 100%; height: auto; }
  html[data-rk-layout="heritage"] #main-contents .contents { overflow-wrap: anywhere; }

  /* The old 104% table width grows beyond the article at tablet sizes. */
  html[data-rk-layout="legacy"] #main-contents .contents table.table-ranking:not(.tblboxkari table),
  html[data-rk-layout="legacy"] #main-contents .contents table.table-ranking2:not(.tblboxkari table),
  html[data-rk-layout="heritage"] #main-contents .contents table.table-ranking:not(.tblboxkari table),
  html[data-rk-layout="heritage"] #main-contents .contents table.table-ranking2:not(.tblboxkari table) {
    width: calc(100% + 16px) !important;
    max-width: calc(100% + 16px);
    margin-left: -8px;
    display: block;
    overflow-x: auto;
  }
  html[data-rk-layout="legacy"] .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
  }
  html[data-rk-layout="legacy"] .tblboxkari,
  html[data-rk-layout="heritage"] .tblboxkari {
    max-width: 100%;
    overflow-x: auto;
  }
  html[data-rk-layout="legacy"] .tblboxkari table,
  html[data-rk-layout="heritage"] .tblboxkari table {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    box-sizing: border-box;
  }
}

@media (max-width: 359px) {
  /* Give the fixed 90px review plot and its labels a separate row if needed. */
  html[data-rk-layout="legacy"] .restaurantmaincontents .divhyoukaboxforp {
    flex-wrap: wrap;
  }
  html[data-rk-layout="legacy"] .restaurantmaincontents .divhyoukaboxforp .divhyoukabox {
    flex: 0 0 90px;
    width: 90px !important;
    margin: 30px calc((100% - 90px) / 2) 25px !important;
    position: relative;
    overflow: visible !important;
  }
  html[data-rk-layout="legacy"] .restaurantmaincontents .divhyoukaboxforp .divhyoukabox p {
    white-space: nowrap;
  }
  html[data-rk-layout="legacy"] .restaurantmaincontents .divhyoukaboxforp .divhyoukabox svg {
    width: 90px;
    height: 90px;
  }
}

/* Keep the desktop menu backdrop clickable across the full viewport height. */
@media (min-width: 1000px) {
  #myplanmenuboxidwall { height: 100vh !important; }
}

/* Restaurant list controls share the map's sort labels. */
.rk-restaurant-sort { clear: both; margin: 12px 0 16px; }
.rk-restaurant-sort form { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.rk-restaurant-sort label { color: #183653; font-size: 14px; font-weight: 700; }
.rk-restaurant-sort select { min-height: 44px; max-width: 100%; padding: 8px 36px 8px 12px; border: 1px solid #b9d2ec; border-radius: 8px; background-color: #fff; color: #09274b; font: inherit; cursor: pointer; }
.rk-restaurant-sort select:focus-visible { outline: 3px solid #91c8ff; outline-offset: 2px; }
.rk-restaurant-sort p { margin: 8px 0 0; color: #52657a; font-size: 12px; line-height: 1.6; }

@media (max-width: 999px) {
  html[data-rk-layout="search"] #main-and-sidebar1,
  html[data-rk-layout="search"] #main-contents-smartphone { width: 100%; max-width: 100%; box-sizing: border-box; }
  html[data-rk-layout="search"] .contents-smartphone { background: #fff; }
  html[data-rk-layout="search"] #rn-social { max-width: 480px; margin: 12px auto; }
  html[data-rk-layout="search"] #rn-social ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 10px; }
  html[data-rk-layout="search"] #main-contents-smartphone #rn-social li { width: auto !important; max-width: none; height: 36px; float: none; margin: 0; padding: 0; overflow: visible; list-style: none; }
  html[data-rk-layout="search"] #rn-social a { display: flex; justify-content: center; align-items: center; min-height: 36px; }
  html[data-rk-layout="search"] #rn-social img { width: auto !important; height: 28px !important; max-width: 100%; margin: 0; object-fit: contain; }
  html[data-rk-layout="search"] #menu-box.rk-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: start; gap: 8px; }
  html[data-rk-layout="search"] #menu-box :is(.rk-search-toggle, .rk-search-map-link) {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    float: none !important; width: auto !important; min-height: 44px; height: auto !important;
    margin: 0 !important; padding: 8px 12px !important; border-radius: 8px;
    font-size: 14px !important; line-height: 1.5; text-decoration: none;
  }
  html[data-rk-layout="search"] #menu-box .rk-search-toggle { background: #087fff; color: #fff !important; }
  html[data-rk-layout="search"] #menu-box .rk-search-map-link { border: 1px solid #9bc7f2; background: #fff; color: #006bdd; }
  html[data-rk-layout="search"] #menu-box #menuclickforjava { grid-column: 1 / -1; min-width: 0; }
  html[data-rk-layout="search"] :is(.rk-search-original-map, .rk-search-original-map-wrapper) { display: none !important; }
  html[data-rk-layout="search"] .rk-restaurant-sort { margin: 12px 10px 16px; }
  html[data-rk-layout="search"] #yomikomidataid { margin: 0; padding: 0 10px; box-sizing: border-box; }
  html[data-rk-layout="search"] #mysqldatabox #yomikomidataid > .rk-restaurant-card {
    display: grid; grid-template-areas: "area" "title" "photo" "details" "plan";
    grid-template-columns: minmax(0, 1fr); gap: 12px;
    position: relative; box-sizing: border-box; width: 100%; height: auto; min-height: 0;
    margin: 0 0 16px; padding: 14px; border: 1px solid #d8e3ed; border-radius: 12px;
    background: #fff; font-size: 16px; color: #183653;
  }
  html[data-rk-layout="search"] #main-contents-smartphone #mysqldatabox .rk-restaurant-card > .h3restaurantname {
    grid-area: title; margin: 0; padding: 0; width: auto; height: auto; border: 0; background: none;
    font-size: 19px; line-height: 1.5; overflow-wrap: anywhere;
  }
  html[data-rk-layout="search"] .rk-restaurant-card > .afterh3area {
    grid-area: area; justify-self: start; position: static; margin: 0; padding: 3px 8px;
    border: 0; border-radius: 5px; background: #eaf6ff; color: #166bc0; font-size: 12px;
  }
  html[data-rk-layout="search"] #yomikomidataid .rk-restaurant-media {
    grid-area: photo; position: relative; float: none; width: 100%; max-width: 550px;
    min-width: 0; height: auto; min-height: 0; margin: 0 auto; align-self: start;
  }
  html[data-rk-layout="search"] .rk-restaurant-media .swiper-container { width: 100%; height: auto !important; aspect-ratio: 4 / 3; background: #f6f8fa; border-radius: 8px; }
  html[data-rk-layout="search"] .rk-restaurant-media .swiper-wrapper { height: 100%; }
  html[data-rk-layout="search"] .rk-restaurant-media .swiper-slide { display: flex; align-items: center; justify-content: center; height: 100%; }
  html[data-rk-layout="search"] .rk-restaurant-media .swiper-wrapper img { display: block; width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; padding: 0; border: 0; margin: auto; object-fit: contain; }
  html[data-rk-layout="search"] .rk-restaurant-media .webreservationok { top: 8px; right: 8px; left: auto; margin: 0; }
  html[data-rk-layout="search"] #yomikomidataid .webreservationok a { width: auto; height: auto; margin: 0; float: none; }
  html[data-rk-layout="search"] #yomikomidataid .rk-restaurant-details { grid-area: details; float: none; width: auto; height: auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 8px; margin-bottom: 10px; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings .hyoukarightbox { display: grid; grid-template-columns: auto auto; justify-content: center; position: static; float: none; width: 110px; height: auto; padding: 0; margin: 0; background: none; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings .hyoukarightbox p { float: none; height: auto; margin: 0; padding: 0; color: #183653; font-size: 16px; line-height: 1.6; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings .hyoukarightbox .phyoukaright { padding-left: 5px; font-weight: 700; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings .hyoukarightbox [id="phyoukasougou"] { grid-column: 1 / -1; width: 110px; height: 22px; background-position: center; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings .divhyoukabox { position: relative; inset: auto; float: none; flex: 0 0 160px; width: 160px; height: 112px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings .divhyoukabox svg { position: absolute; left: 44px; top: 20px; width: 72px; height: 72px; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings .divhyoukabox p { position: absolute; margin: 0; padding: 0; background: none; color: #52657a; font-size: 11px; line-height: 1.4; text-align: center; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings [id="phyoukafooddrink"] { top: 0; left: 0; width: 100%; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings [id="phyoukavalue"] { top: 46px; right: 0; width: 42px; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings [id="phyoukaambience"] { bottom: 0; left: 0; width: 100%; }
  html[data-rk-layout="search"] #mysqldatabox .rk-restaurant-ratings [id="phyoukaservice"] { top: 40px; left: 0; width: 40px; }
  html[data-rk-layout="search"] .rk-restaurant-details .pprice { margin: 8px 0; font-size: 14px; line-height: 1.6; }
  html[data-rk-layout="search"] .rk-restaurant-details .pcuisine { margin: 8px 0; font-size: 13px; line-height: 1.6; }
  html[data-rk-layout="search"] .rk-restaurant-details .pmaincontents { margin: 8px 0 0; padding: 8px; font-size: 13px; line-height: 1.7; }
  html[data-rk-layout="search"] .rk-restaurant-plan { grid-area: plan; }
  html[data-rk-layout="search"] .rk-restaurant-plan [id="pppbtnres"] { display: flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; width: 100%; max-width: 260px; min-height: 44px; height: auto; margin: 0 auto; padding: 8px; font-size: 14px; }
  html[data-rk-layout="search"] #contents-left { clear: both; display: flow-root; padding: 8px 10px 72px; }
}
@media (min-width: 640px) and (max-width: 999px) {
  html[data-rk-layout="search"] #mysqldatabox #yomikomidataid > .rk-restaurant-card {
    grid-template-areas: "area area" "title title" "photo details" "plan plan";
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr); column-gap: 20px; padding: 18px;
  }
}