/* Hide GDPR cookie bar completely */
#gdpr_box,
#gdpr_box.clearfix,
div#gdpr_box {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide hamburger and mobile menu on desktop */
#mobile-menu-btn {
  display: none;
}
#mobile-menu {
  display: none;
}

/* ============================================
   Yugoya Ryokan — Responsive Design
   Aesthetic: Refined Japanese Minimalism
   Natural warmth, generous breathing room,
   honoring the tranquility of the onsen experience.
   ============================================ */

/* === Hide fixed tree/cherry-blossom page background === */
body #bg.bg.top_page::before {
  background-image: none !important;
  background-color: #fff;
}

/* Ensure slideshow section has opaque background */
#section48 {
  background-color: #000;
}

/* ---- Tablet (max 1024px) ---- */
@media screen and (max-width: 1024px) {
  body, .bg, #ad-preview, .ad-preview-pc,
  body #bg.bg.top_page {
    min-width: 0 !important;
    width: 100% !important;
  }
  body #bg.bg.top_page::before {
    min-width: 0 !important;
    background-size: cover !important;
  }
  .center-area {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  #header {
    width: 100% !important;
    min-width: 0 !important;
    background-size: cover !important;
  }
  #bg #header.normal-header {
    min-width: 0 !important;
    background-size: cover !important;
  }
  .parts.header-parts {
    width: 100% !important;
    background-size: cover !important;
  }
  #header-menu {
    width: auto !important;
  }
  .hero_header-parts .slide-container,
  .hero_header-parts .overall-area,
  #parts50-wrap {
    width: 100% !important;
  }
  .section-area .center-area {
    width: 100% !important;
  }
  .camera_caption.center-area,
  .hero_header-parts .camera_caption.center-area {
    width: 100% !important;
    margin-left: 0 !important;
    left: 0 !important;
  }
  #footer {
    width: 100% !important;
    background-size: cover !important;
  }
  .footer-parts {
    background-size: cover !important;
  }
}

/* ---- Mobile (max 768px) ---- */
@media screen and (max-width: 768px) {

  /* === Foundation === */
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden !important;
  }
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* === Animations — Show all animated elements immediately on mobile === */
  [data-animate] {
    visibility: visible !important;
    opacity: 1 !important;
  }
  #ad-preview, .ad-preview-pc {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .bg, body #bg.bg.top_page {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  body #bg.bg.top_page::before {
    min-width: 0 !important;
    background-size: cover !important;
    background-attachment: scroll !important;
  }

  /* === Header — Compact, elegant === */
  #top-area {
    position: relative;
    z-index: 9000;
  }
  .parts.header-parts {
    position: relative !important;
    visibility: visible !important;
    height: 56px !important;
    min-height: 56px !important;
    background-size: cover !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  #header {
    width: 100% !important;
    height: 56px !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding: 8px 70px 8px 16px !important;
    position: relative !important;
    background-size: cover !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
  }
  #bg #header.normal-header {
    min-width: 0 !important;
    background-size: cover !important;
    height: auto !important;
  }
  .h1_title {
    display: none !important;
  }
  .ad-text2 {
    display: none !important;
  }
  .ad-logo-title, .ad-logo-image, #header .ad-logo-image {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 160px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .ad-logo-title img, .ad-logo-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* === PC Header Menu — Hidden on mobile (CMS mobile menu takes over) === */
  #header-menu {
    display: none !important;
  }

  /* === Mobile Hamburger Menu Button === */
  #mobile-menu-btn {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 60px !important;
    height: 56px !important;
    background-color: #69821b !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    padding: 8px 6px !important;
    box-sizing: border-box !important;
    background-image: none !important;
  }
  #mobile-menu-btn span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #fff !important;
    border-radius: 1px;
  }
  #mobile-menu-btn::after {
    content: "MENU";
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.1em;
    margin-top: 2px;
  }

  /* === Mobile Slide-out Menu Panel === */
  #mobile-menu {
    display: block !important;
    z-index: 99998 !important;
    top: 0 !important;
    position: fixed !important;
    width: 100% !important;
    height: 100vh !important;
    background-color: #69821b !important;
    overflow-y: auto !important;
    padding-top: 56px !important;
    -webkit-overflow-scrolling: touch;
  }
  #mobile-menu > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  #mobile-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  }
  #mobile-menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #fff !important;
    padding: 16px 20px !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
    background-color: transparent !important;
    transition: background-color 0.15s !important;
  }
  #mobile-menu li a::after {
    content: "›" !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    opacity: 0.8 !important;
    margin-left: 10px !important;
    flex-shrink: 0 !important;
  }
  #mobile-menu li a:active {
    background-color: rgba(0,0,0,0.1) !important;
  }
  #mobile-menu li.sub-item a {
    padding-left: 36px !important;
    font-size: 14px !important;
    background-color: rgba(0,0,0,0.08) !important;
  }

  /* Prevent JS from hiding the menu button */
  #mobile-menu-btn.h-menu-open,
  #mobile-menu-btn.h-menu-hide {
    display: flex !important;
  }
  #mobile-menu-btn span {
    transition: transform 0.3s, opacity 0.3s !important;
  }

  /* Close (X) button state when menu is open */
  #mobile-menu-btn.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  #mobile-menu-btn.is-open span:nth-child(2) {
    opacity: 0 !important;
  }
  #mobile-menu-btn.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px) !important;
  }
  #mobile-menu-btn.is-open::after {
    content: "CLOSE" !important;
  }

  /* === Hero Slider === */
  .hero_header-parts,
  .hero_header-parts .slide-container,
  #parts50,
  #parts50-container {
    width: 100% !important;
    min-width: 0 !important;
  }
  #parts50-wrap {
    height: 56vw !important;
  }
  .hero-animate {
    height: 56vw !important;
  }
  .camera_caption.center-area,
  .hero_header-parts .camera_caption.center-area {
    width: 100% !important;
    margin-left: 0 !important;
    left: 0 !important;
  }
  .free-link {
    width: 22% !important;
    left: 39% !important;
  }
  .frame-wrapper {
    display: none !important;
  }

  /* === Sections — Breathe === */
  .section .center-area,
  .section-area .center-area {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  #middle-area > .center-area,
  #middle-area .main-section .center-area {
    padding-top: 32px !important;
    padding-bottom: 40px !important;
  }
  .section .center-area {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* === Columns — Graceful stacking === */
  .column-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .column-group .column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 24px !important;
    float: none !important;
  }
  .column-group .column:last-child {
    margin-bottom: 0 !important;
  }

  /* === Content blocks === */
  .text, .text-design-set-area {
    width: 100% !important;
  }
  .record {
    width: 100% !important;
    margin-right: 0 !important;
  }
  .block-lists {
    width: 100% !important;
  }
  .record-lists {
    width: 100% !important;
  }
  .record-row2 .record {
    width: 100% !important;
    float: none !important;
  }

  /* === Typography — Refined scaling === */
  .page-title {
    font-size: 170% !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
  }
  .page-title span {
    margin-bottom: 24px !important;
  }
  .block-title {
    font-size: 120% !important;
    line-height: 1.4 !important;
    background-size: 100% 50px !important;
    padding-left: 0 !important;
  }
  .block-title span {
    margin-left: 16px !important;
  }
  .record-title {
    background-size: 100% 40px !important;
    font-size: 100% !important;
  }
  .record-title > span,
  .record-title.midashi {
    margin-left: 16px !important;
  }
  [style*="font-size: 200%"],
  [style*="font-size:200%"] {
    font-size: 150% !important;
  }
  [style*="font-size:320%"],
  [style*="font-size: 320%"] {
    font-size: 160% !important;
  }
  [style*="font-size: 210%"],
  [style*="font-size:210%"] {
    font-size: 140% !important;
  }
  [style*="font-size: 240%"],
  [style*="font-size:240%"] {
    font-size: 160% !important;
  }
  [style*="font-size: 180%"],
  [style*="font-size:180%"] {
    font-size: 130% !important;
  }
  [style*="font-size: 150%"],
  [style*="font-size:150%"] {
    font-size: 120% !important;
  }
  [style*="font-size: 130%"],
  [style*="font-size:130%"] {
    font-size: 110% !important;
  }
  [style*="font-size: 120%"],
  [style*="font-size:120%"] {
    font-size: 105% !important;
  }
  /* Excessive line-height on certain pages */
  [style*="line-height:2.5"],
  [style*="line-height: 2.5"] {
    line-height: 1.6 !important;
  }
  /* Prevent text overflow on phone numbers */
  .text-design-set-area {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* === Images — Fluid, respectful === */
  .media, .block-media, .media_box {
    width: 100% !important;
    max-width: 100% !important;
  }
  .media img, .media_item {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    margin: 0 !important;
  }

  /* === Layout blocks — Vertical flow === */
  .laytou-list, .laytou-block, .left_over {
    display: flex !important;
    flex-direction: column !important;
  }
  .laytou-list .media,
  .laytou-list .text,
  .laytou-block .media,
  .laytou-block .text,
  .left_over .media,
  .left_over .text {
    float: none !important;
    width: 100% !important;
  }
  .fl-left, .fl-right, .fl- {
    float: none !important;
    width: 100% !important;
  }

  /* === type007 Tables — Proper table layout on mobile === */
  .type007Table {
    display: table !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }
  .type007Table tbody {
    display: table-row-group !important;
    width: 100% !important;
  }
  .type007Table tr {
    display: table-row !important;
    width: 100% !important;
  }
  .type007Table td,
  .type007Table th {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
  }
  /* Override inline fixed widths on type007 cells */
  .type007Td {
    width: auto !important;
    max-width: none !important;
  }
  /* Keep hidden cells hidden */
  .type007Table td[style*="display: none"],
  .type007Td[style*="display: none"] {
    display: none !important;
  }
  .type007Table td[style*="font-weight: bold"],
  .type007Table td[style*="font-weight:bold"] {
    font-size: 13px;
  }

  /* === Inline tables (rate tables, drink menu) — Keep table layout === */
  #block215 table,
  #block216 table {
    display: table !important;
    width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    font-size: 11px !important;
  }
  #block215 table thead,
  #block216 table thead {
    display: table-header-group !important;
  }
  #block215 table tbody,
  #block216 table tbody {
    display: table-row-group !important;
  }
  #block215 table tr,
  #block216 table tr {
    display: table-row !important;
    flex-direction: unset !important;
  }
  #block215 table td,
  #block215 table th,
  #block216 table td,
  #block216 table th {
    display: table-cell !important;
    width: auto !important;
    max-width: none !important;
    padding: 6px 4px !important;
    text-align: center !important;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: middle;
    font-size: 11px !important;
  }
  #block215 table th,
  #block216 table th {
    font-size: 10px !important;
    white-space: nowrap;
  }
  /* Scrollable wrapper for wide tables */
  #block215 [style*="padding:10px"],
  #block216 [style*="padding:10px"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
  }

  /* === Rate tables (/25) === */
  #block215 table,
  #block216 table {
    font-size: 12px !important;
    width: 100% !important;
    table-layout: fixed !important;
  }
  #block215 table td,
  #block215 table th,
  #block216 table td,
  #block216 table th {
    padding: 6px 4px !important;
    word-break: break-word;
    overflow-wrap: break-word;
    vertical-align: middle;
  }
  /* Drink menu: stack on very small screens */
  #block216 table thead th {
    font-size: 11px !important;
  }

  /* === Buttons — Full width, tactile === */
  .preset-btn-box {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  .preset-btn-box > div[style*="width"] {
    width: 100% !important;
  }
  .preset-btn-box .preset-btn,
  .type009-btn {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .type009-btn a {
    padding: 14px 16px !important;
    display: block;
    text-align: center !important;
  }

  /* === TEL / Contact sections === */
  .tel, .tel.line-h130, .line-h130 {
    width: 100% !important;
    text-align: center !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    padding: 8px 0 !important;
  }
  .tel .ad-direct-item,
  .tel .ad-tab-item {
    font-size: 18px !important;
    display: inline-block !important;
    word-break: break-word !important;
  }
  /* Contact message below TEL */
  .type009-txt {
    width: 100% !important;
    text-align: center !important;
    font-size: 14px !important;
    word-break: break-word !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
  }

  /* === Reservation Form — Touch-friendly === */
  .type019-form .form-box {
    width: 100% !important;
  }
  .type019-form .form-box dl {
    display: flex !important;
    flex-direction: column !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
    margin-bottom: 4px;
  }
  .type019-form .form-item-box {
    width: 100% !important;
  }
  .type019-form .cell1 {
    width: 100% !important;
    padding: 10px 0 2px !important;
    font-weight: bold;
    font-size: 14px;
    color: #333;
  }
  .type019-form .cell2 {
    width: 100% !important;
    padding: 4px 0 10px !important;
  }
  .type019-form input[type="text"],
  .type019-form input[type="email"],
  .type019-form input[type="tel"],
  .type019-form select,
  .type019-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 10px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    -webkit-appearance: none;
    appearance: none;
  }
  .type019-form select {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") right 12px center no-repeat !important;
    padding-right: 32px !important;
  }
  .type019-form input:focus,
  .type019-form select:focus,
  .type019-form textarea:focus {
    border-color: #69821b !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(105, 130, 27, 0.15) !important;
  }
  .type019-form .radio-list {
    display: flex !important;
    gap: 16px;
  }
  .type019-form .radio-list label {
    font-size: 15px;
    padding: 4px 0;
  }
  .com-back {
    width: 100% !important;
    padding: 16px !important;
    font-size: 16px !important;
    background: #69821b !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    letter-spacing: 0.1em;
    cursor: pointer;
    -webkit-appearance: none;
  }
  .com-back:active {
    background: #556b16 !important;
  }

  /* === Dynamic Calendar === */
  #dynamic-calendar {
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .dc-nav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center !important;
    margin-bottom: 16px;
  }
  .dc-nav a {
    padding: 10px 16px !important;
    font-size: 13px !important;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .dc-title {
    width: 100%;
    text-align: center;
    order: -1;
    margin-bottom: 8px;
    font-size: 18px !important;
  }
  .dc-table {
    min-width: 300px;
  }
  .dc-table th {
    padding: 8px 2px !important;
    font-size: 12px !important;
  }
  .dc-table td {
    height: 52px !important;
    padding: 4px 2px !important;
  }
  .dc-day {
    font-size: 11px !important;
  }
  .dc-status {
    font-size: 16px !important;
  }
  .dc-legend {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* === Sidebar — Below main content === */
  #middle-area .main-area {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  #middle-area .side-area {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-top: 24px !important;
  }
  .side-area .parts {
    width: 100% !important;
  }
  .pc-two-column .main-area,
  .pc-two-column .side-area {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  /* === Side Menu — Full width, clean mobile style === */
  .side-area .menu-parts,
  .side-area .menu-parts .parts-bg {
    width: 100% !important;
  }
  #middle-area .menu-parts .nav li > a {
    width: 100% !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    background-image: none !important;
    background-color: #f8f7f3 !important;
    border-bottom: 1px solid #e8e5dd !important;
    color: #333 !important;
    font-size: 14px !important;
    display: block !important;
  }
  #middle-area .menu-parts .nav li > a:hover,
  #middle-area .menu-parts .nav li > a:active {
    background-color: #f0ede5 !important;
  }
  #middle-area .menu-parts .nav li > a span {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Sub-menus */
  #middle-area .menu-parts .nav li ul {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
    position: relative !important;
  }
  #middle-area .menu-parts .nav li ul li a {
    width: 100% !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 12px 16px 12px 28px !important;
    box-sizing: border-box !important;
    background-image: none !important;
    background-color: #69821b !important;
    color: #fff !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  }
  /* Menu header (旅館案内, etc.) */
  #middle-area .menu-parts .menu-top {
    width: 100% !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    background-image: none !important;
    background-color: #69821b !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-radius: 4px 4px 0 0 !important;
  }
  #middle-area .menu-parts .menu-top span {
    color: #fff !important;
  }
  #middle-area .menu-parts .menu-bottom {
    width: 100% !important;
    height: 4px !important;
    background-image: none !important;
    background-color: #556b16 !important;
    border-radius: 0 0 4px 4px !important;
  }
  /* Local menu header */
  #middle-area .menu-parts .local-menu .menu-top,
  #middle-area .menu-parts .close-menu .menu-top {
    width: 100% !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 14px 16px !important;
    box-sizing: border-box !important;
    background-image: none !important;
    background-color: #69821b !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 15px !important;
  }

  /* === Map === */
  .map-iframe {
    width: 100% !important;
  }

  /* === Footer — Centered, clean === */
  .footer-parts {
    background-size: cover !important;
  }
  #footer {
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
    padding: 28px 20px !important;
    background-size: cover !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  #footer .logo, #footer .ad-logo,
  #footer .ad-logo-image,
  #footer .address, #footer .ad-address,
  #footer .copyright, #footer .ad-copyright,
  #footer .exmenus, #footer .ad-exmenu,
  #footer .logo-text, #footer .ad-logo-text {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  #footer .logo img, #footer .ad-logo img,
  #footer .ad-logo-image img {
    width: 140px !important;
    height: auto !important;
  }
  .footer-normal-menu {
    width: 100% !important;
    text-align: center;
    line-height: 2;
  }
  .footer-normal-menu span {
    display: none;
  }
  .footer-normal-menu a {
    font-size: 12px;
    display: inline-block;
    padding: 2px 8px;
    text-decoration: none !important;
  }
  #footer .exmenus nav ul {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
  }
  #footer .exmenus nav ul li {
    display: inline-block !important;
  }
  #footer .address {
    font-size: 12px;
    line-height: 1.6;
  }
  #footer .copyright {
    font-size: 11px;
    opacity: 0.7;
  }

  /* === Footer menu bar (above footer) === */
  .menu_list-parts {
    background-size: cover !important;
  }
  .menu_list-parts nav,
  .menu_list-parts nav[style] {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  .menu_list-parts nav a {
    display: inline-block !important;
    font-size: 12px !important;
    padding: 4px 6px !important;
    word-break: keep-all !important;
  }
  /* Override pipe separators in footer nav */
  .menu_list-parts nav span {
    font-size: 10px !important;
  }

  /* === Fixed menu (PC reservation buttons) — Hidden === */
  .pc_fixed_menu-parts {
    display: none !important;
  }
  /* Hide PC-only floating sidebar buttons */
  #menu1_item,
  #menu2_item,
  #menu3_item,
  #menu4_item,
  #menu5_item {
    display: none !important;
  }

  /* === Photo Slider / Carousel === */
  .type003-wrap {
    width: 100% !important;
    height: auto !important;
    overflow: hidden;
  }
  .type003-slider {
    width: 100% !important;
  }
  .slide-img {
    width: 100% !important;
  }
  .slide-img .block-media,
  .slide-img .media_box {
    width: 100% !important;
    height: auto !important;
  }
  .slide-img img {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    object-fit: cover;
  }
  .type003-caption {
    width: 100% !important;
  }
  .slide-prev-btn, .slide-next-btn {
    margin: 0 !important;
    font-size: 24px;
  }
  /* dbpas carousel (pages/24, 26) */
  .dbpas-carousel-wrap,
  .dbpas-carousel-inner,
  [id*="-slider"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  .slider_side_btn {
    width: 30px !important;
    height: 30px !important;
  }
  /* Fix negative margin images in sliders */
  img[style*="margin-left:-55px"],
  img[style*="margin-left: -55px"] {
    margin-left: 0 !important;
  }
  /* Slider thumbnails */
  .dbpas-carousel-navi img {
    width: 60px !important;
    height: 40px !important;
  }

  /* === Section backgrounds === */
  .section-area {
    min-height: auto !important;
  }
  .section_min_height {
    min-height: 0 !important;
    height: 0 !important;
    display: none !important;
  }
  .section-area-bg {
    background-size: cover !important;
    background-attachment: scroll !important;
  }

  /* === Slideshow sections (3-panel) === */
  .section_layout_type004 .area-list {
    display: flex !important;
    flex-direction: column !important;
  }
  .section_layout_type004 .section-area {
    width: 100% !important;
    float: none !important;
    min-height: 220px !important;
  }

  /* === Breadcrumb === */
  #pankuzu-list {
    font-size: 12px;
    display: flex;
    flex-wrap: wrap;
    line-height: 1.8;
  }

  /* === News/Topics === */
  .type013-list .clearfix {
    display: flex !important;
    flex-direction: column !important;
  }
  .type013-list .cell1 {
    width: 100% !important;
    float: none !important;
    padding-bottom: 2px !important;
  }
  .type013-list .cell2 {
    width: 100% !important;
    float: none !important;
    padding-top: 2px !important;
  }

  /* === Back to top === */
  #totop-btn {
    bottom: 16px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 3.5 !important;
  }

  /* === GDPR Cookie Bar === */
  #gdpr_box {
    flex-direction: column !important;
    display: flex !important;
    padding: 16px !important;
    gap: 10px;
  }
  #gdpr_txt, #gdpr_true, #gdpr_false {
    float: none !important;
    width: 100% !important;
    text-align: center;
  }

  /* === Instagram button === */
  .type010-box {
    text-align: center;
  }
  .type010-btn img {
    max-width: 200px;
    height: auto !important;
  }

  /* === Private/Login elements === */
  .ad-private1 {
    display: none !important;
  }

  /* === Onsen info card (block197 — bathing hours/prices box) === */
  #block197 {
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 10px !important;
    padding: 20px !important;
    margin: 0 auto !important;
  }
  #block197 .record,
  #block197 .laytou-block,
  #block197 .text,
  #block197 .text-design-set-area {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  [style*="padding-top:120px"] {
    padding-top: 48px !important;
  }
  [style*="padding-bottom:140px"] {
    padding-bottom: 48px !important;
  }
  [style*="padding-top:120px;padding-bottom:120px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  [style*="padding-top:109px"] {
    padding-top: 40px !important;
  }
  [style*="padding-bottom:108px"] {
    padding-bottom: 40px !important;
  }

  /* === Misc cleanup === */
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
  .event_none {
    pointer-events: auto !important;
  }
}

/* ---- Small phones (max 400px) ---- */
@media screen and (max-width: 400px) {
  .dc-table td {
    height: 44px !important;
  }
  .dc-table {
    min-width: 280px !important;
  }
  .dc-status {
    font-size: 14px !important;
  }
  .dc-day {
    font-size: 10px !important;
  }
  #header-menu .nav-bar > li > a {
    font-size: 13px !important;
    padding: 12px 16px !important;
  }
  .page-title {
    font-size: 140% !important;
  }
  [style*="font-size:320%"],
  [style*="font-size: 320%"] {
    font-size: 120% !important;
  }
  [style*="font-size: 200%"],
  [style*="font-size:200%"] {
    font-size: 120% !important;
  }
  #footer .address {
    font-size: 11px;
  }
  /* TEL numbers smaller on tiny screens */
  .tel, .tel.line-h130 {
    font-size: 15px !important;
  }
  .tel .ad-direct-item {
    font-size: 15px !important;
  }
  /* Smaller rate/drink tables on tiny screens */
  #block215 table,
  #block216 table {
    font-size: 9px !important;
  }
  #block215 table td,
  #block215 table th,
  #block216 table td,
  #block216 table th {
    padding: 3px 2px !important;
    font-size: 9px !important;
  }
  /* Stack sections padding */
  .section .center-area {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}