@charset "UTF-8";

/* ==============================
   Sub Pages - HATAGO
   ============================== */

/* ----- Page Hero Banner ----- */
.page-hero {
  height: 300px;
  margin-top: 150px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11, 95, 113, 0.5);
}
.page-hero h1 {
  color: #ffffff;
  font-size: 3.2rem;
  font-weight: bold;
  z-index: 1;
  position: relative;
  text-align: center;
  letter-spacing: 6px;
  line-height: 1.6;
}
.page-hero h1 span {
  display: block;
  font-size: 1.6rem;
  font-weight: normal;
  letter-spacing: 3px;
  margin-top: 8px;
  opacity: 0.85;
}

/* ----- Breadcrumb ----- */
.pagetemp-top {
  background: #f8f8f8;
}
.pagetemp-top .breadcrumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 15px 50px;
  font-size: 1.2rem;
}
.pagetemp-top .breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.pagetemp-top .breadcrumb ul li {
  color: #0B5F71;
  margin-right: 10px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.pagetemp-top .breadcrumb ul li::after {
  content: ">";
  margin-left: 10px;
  color: #999;
}
.pagetemp-top .breadcrumb ul li:last-child::after {
  content: "";
}
.pagetemp-top .breadcrumb ul li a {
  color: #999;
}
.pagetemp-top .breadcrumb ul li a:hover {
  color: #0B5F71;
}

/* ----- Sub Page Section Base ----- */
.sub-section {
  padding: 80px 0;
  background: url('../images/bg_about.png') repeat;
}
.sub-section:nth-child(even) {
  background: #f8f8f8;
}
.sub-section .inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 50px;
}
.sub-section h2 {
  font-size: 3.0rem;
  font-weight: bold;
  color: #0B5F71;
  text-align: center;
  margin-bottom: 50px;
  letter-spacing: 4px;
}
.sub-section h2 span {
  display: block;
  font-size: 1.4rem;
  font-weight: normal;
  color: rgba(11, 95, 113, 0.6);
  margin-top: 8px;
}

/* ----- Sub Page h3 (teal bar) ----- */
.sub-section h3 {
  font-size: 2.4rem;
  font-weight: normal;
  width: 100%;
  max-width: 1280px;
  background: #0B5F71;
  color: #ffffff;
  text-align: center;
  padding: 10px 0;
  margin: 0 auto 30px;
}

/* ----- Room Cards Grid ----- */
.room-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 60px;
}
.room-card {
  border: 1px solid rgba(11, 95, 113, 0.2);
  background: #ffffff;
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.room-card:hover {
  box-shadow: 0 4px 20px rgba(11, 95, 113, 0.15);
}
.room-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.room-card-info {
  padding: 24px;
  color: #0B5F71;
}
.room-card-info h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.room-card-info .floor-badge {
  background: #0B5F71;
  color: #ffffff;
  font-size: 1.2rem;
  padding: 3px 10px;
  border-radius: 4px;
}
.room-card-info p {
  font-size: 1.4rem;
  line-height: 1.8;
  color: rgba(11, 95, 113, 0.7);
}

/* ----- Tour Page ----- */
.tour-intro {
  text-align: center;
  font-size: 1.6rem;
  line-height: 2.2;
  color: #0B5F71;
  margin-bottom: 60px;
}
.tour-guide {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 60px;
}
.tour-guide-img {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tour-guide-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}
.tour-guide-text {
  flex: 1;
  color: #0B5F71;
}
.tour-guide-text h4 {
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 16px;
}
.tour-guide-text p {
  font-size: 1.5rem;
  line-height: 2.0;
}
.tour-examples {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.tour-example-card {
  background: #ffffff;
  border: 1px solid rgba(11, 95, 113, 0.15);
  padding: 24px;
  text-align: center;
  color: #0B5F71;
}
.tour-example-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-bottom: 16px;
}
.tour-example-card h5 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.tour-example-card p {
  font-size: 1.3rem;
  color: rgba(11, 95, 113, 0.6);
}
.tour-pricing {
  background: rgba(11, 95, 113, 0.05);
  border: 2px solid rgba(11, 95, 113, 0.2);
  padding: 40px;
  text-align: center;
  margin-bottom: 60px;
  color: #0B5F71;
}
.tour-pricing h4 {
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 16px;
}
.tour-pricing .price-highlight {
  font-size: 2.4rem;
  font-weight: bold;
  color: #d4573a;
  margin-bottom: 12px;
}
.tour-pricing p {
  font-size: 1.4rem;
  line-height: 1.8;
}
.tour-agency {
  text-align: center;
  padding: 30px;
  background: #ffffff;
  border: 1px solid rgba(11, 95, 113, 0.15);
  color: #0B5F71;
  margin-bottom: 40px;
}
.tour-agency p {
  font-size: 1.4rem;
  line-height: 1.8;
}

/* ----- Surrounding Facilities (Tourism page) ----- */
.area-intro {
  text-align: center;
  font-size: 1.6rem;
  line-height: 2.0;
  color: #0B5F71;
  margin-bottom: 60px;
}
.facilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}
.facility-card {
  background: #ffffff;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 113, 0.15);
}
.facility-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.facility-card-info {
  padding: 20px;
  color: #0B5F71;
}
.facility-card-info h5 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.facility-card-info p {
  font-size: 1.3rem;
  color: rgba(11, 95, 113, 0.6);
  line-height: 1.7;
}

/* ----- Access Page ----- */
.access-map-large {
  margin-bottom: 40px;
}
.access-map-large iframe {
  width: 100%;
  height: 500px;
  border: 0;
}
.access-info-box {
  display: flex;
  gap: 40px;
  margin-bottom: 60px;
}
.access-address {
  flex: 1;
  color: #0B5F71;
}
.access-address h4 {
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.access-address h4 .icon-box {
  background: #0B5F71;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 1.3rem;
  border-radius: 4px;
}
.access-address p {
  font-size: 1.5rem;
  line-height: 2.0;
}
.access-transport {
  flex: 1;
}
.transport-item {
  background: rgba(11, 95, 113, 0.05);
  border-left: 4px solid #0B5F71;
  padding: 20px 24px;
  margin-bottom: 16px;
  color: #0B5F71;
}
.transport-item strong {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 4px;
}
.transport-item span {
  font-size: 1.3rem;
  color: rgba(11, 95, 113, 0.6);
}

/* ----- CTA Section ----- */
.cta-section {
  padding: 60px 0;
  text-align: center;
  background: url('../images/bg_about.png') repeat;
}
.cta-section p {
  font-size: 1.5rem;
  color: #0B5F71;
  margin-bottom: 24px;
}
.cta-section button {
  border: none;
  background: none;
}
.cta-section button a {
  display: inline-block;
  background: #0B5F71;
  color: #ffffff;
  padding: 18px 60px;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 3px;
  position: relative;
  transition: all 0.3s;
}
.cta-section button a:hover {
  background: #084a58;
}
.cta-section button a::after {
  position: absolute;
  content: ">";
  right: 20px;
}

/* ----- Precautions (Sub Page) ----- */
.sub-section .precautions {
  max-width: 1000px;
  margin: 0 auto;
}
.sub-section .precautions h4 {
  display: block;
  color: #0B5F71;
  border: 1px solid #0B5F71;
  text-align: center;
  font-size: 2.4rem;
  padding: 20px;
  margin: 50px 0;
}
.sub-section .precautions h5 {
  display: block;
  font-size: 2.4rem;
  color: #0B5F71;
  border-bottom: 1px solid #0B5F71;
  margin-bottom: 30px;
}
.sub-section .precautions p {
  font-size: 1.4rem;
  line-height: 3.5rem;
  margin-bottom: 35px;
  color: #0B5F71;
}
.sub-section .precautions a {
  color: #d4573a;
  font-weight: bold;
}

/* ----- Overview Table (Sub Page) ----- */
.sub-section .overview-table {
  max-width: 1000px;
  margin: 0 auto;
}
.sub-section .overview-table table {
  width: 100%;
  border-collapse: collapse;
}
.sub-section .overview-table table th,
.sub-section .overview-table table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(11, 95, 113, 0.15);
  font-size: 1.4rem;
  line-height: 1.8;
  color: #0B5F71;
  vertical-align: top;
}
.sub-section .overview-table table th {
  width: 160px;
  font-weight: bold;
  background: rgba(11, 95, 113, 0.05);
  white-space: nowrap;
}
.sub-section .overview-table table td strong {
  font-weight: bold;
}
.sub-section .overview-table table td em {
  font-style: normal;
  font-size: 1.2rem;
  color: rgba(11, 95, 113, 0.6);
}

/* ----- Booking Room Tabs ----- */
.booking-room-tabs {
  display: flex !important;
  justify-content: center !important;
  gap: 0 !important;
  margin-bottom: 30px !important;
  flex-wrap: wrap !important;
}
a.room-tab {
  background: rgba(11, 95, 113, 0.08) !important;
  color: #0B5F71 !important;
  border: 1px solid rgba(11, 95, 113, 0.2) !important;
  border-bottom: 3px solid transparent !important;
  padding: 14px 24px !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  text-decoration: none !important;
  display: inline-block !important;
  flex: 1 !important;
  min-width: 160px !important;
}
a.room-tab:hover {
  background: rgba(11, 95, 113, 0.15) !important;
}
a.room-tab.active {
  background: #0B5F71 !important;
  color: #ffffff !important;
  border-color: #0B5F71 !important;
  border-bottom-color: #d4573a !important;
}

/* ----- Room Calendar Panels ----- */
.room-calendar {
  display: none !important;
}
.room-calendar.active {
  display: block !important;
}
.room-calendar-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(11, 95, 113, 0.05);
  border-left: 4px solid #0B5F71;
}
.room-calendar-header h3 {
  font-size: 2.0rem;
  font-weight: bold;
  color: #0B5F71;
  background: transparent;
  text-align: left;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.room-calendar-header .floor-badge {
  background: #0B5F71;
  color: #ffffff;
  font-size: 1.2rem;
  padding: 3px 10px;
  border-radius: 4px;
}
.room-calendar-header p {
  font-size: 1.3rem;
  color: rgba(11, 95, 113, 0.6);
  text-align: left;
  margin: 0;
}

/* ----- Calendar Panel: Match Details Panel styling + Gap ----- */
.booking-room-calendars #booking-package_calendarPage {
  background: #ffffff !important;
  border: 1px solid rgba(11, 95, 113, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(11, 95, 113, 0.1) !important;
  overflow: hidden !important;
  width: calc(50% - 8px) !important;
  margin-right: 16px !important;
}

/* ----- Booking Package Calendar Override ----- */
.booking-room-calendars .booking-package .calendarHeader {
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%) !important;
  color: #ffffff !important;
  border-bottom: 3px solid #d4573a !important;
}
.booking-room-calendars .booking-package .calendarData {
  color: #ffffff !important;
}
.booking-room-calendars .booking-package .week_slot {
  color: #0B5F71 !important;
  font-weight: bold !important;
  font-size: 1.2rem !important;
}
.booking-room-calendars .booking-package .day_slot {
  color: #0B5F71 !important;
  border-color: rgba(11, 95, 113, 0.15) !important;
}
.booking-room-calendars .booking-package .day_slot.available_day:not(.closeDay) {
  cursor: pointer !important;
}
.booking-room-calendars .booking-package .day_slot.available_day:not(.closeDay):hover {
  background: rgba(57, 170, 160, 0.18) !important;
  box-shadow: inset 0 0 0 2px rgba(57, 170, 160, 0.5) !important;
  border-radius: 4px !important;
}
.booking-room-calendars .booking-package .day_slot.selectedDay {
  background: #0B5F71 !important;
  color: #ffffff !important;
}
.booking-room-calendars .booking-package .day_slot.closeDay {
  color: rgba(11, 95, 113, 0.3) !important;
}
.booking-room-calendars .booking-package button,
.booking-room-calendars .booking-package input[type="submit"] {
  background: #0B5F71 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 30px !important;
  font-size: 1.4rem !important;
  cursor: pointer !important;
  transition: background 0.3s !important;
}
.booking-room-calendars .booking-package button:hover,
.booking-room-calendars .booking-package input[type="submit"]:hover {
  background: #084a58 !important;
}
.booking-room-calendars .booking-package input[type="text"],
.booking-room-calendars .booking-package input[type="email"],
.booking-room-calendars .booking-package input[type="tel"],
.booking-room-calendars .booking-package select,
.booking-room-calendars .booking-package textarea {
  border: 1px solid rgba(11, 95, 113, 0.3) !important;
  padding: 10px 14px !important;
  font-size: 1.4rem !important;
  color: #0B5F71 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.booking-room-calendars .booking-package input[type="text"]:focus,
.booking-room-calendars .booking-package input[type="email"]:focus,
.booking-room-calendars .booking-package textarea:focus {
  border-color: #0B5F71 !important;
  outline: none !important;
}

/* ==============================================
   Phase 5: Booking Calendar UI Improvements
   ============================================== */

/* ----- 5-4: Booking Detail Panel Redesign ----- */
.booking-room-calendars #booking-package_durationStay {
  background: #ffffff !important;
  border: 1px solid rgba(11, 95, 113, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(11, 95, 113, 0.1) !important;
  overflow: hidden !important;
  width: calc(50% - 8px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ----- Step 2: Personal Info Form Panel ----- */
.booking-room-calendars #booking-package_inputFormPanel {
  width: calc(50% - 8px) !important;
  margin-left: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(11, 95, 113, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(11, 95, 113, 0.1) !important;
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.booking-room-calendars #booking-package_inputFormPanel .title_in_form {
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%) !important;
  color: #ffffff !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  padding: 18px 24px !important;
  margin: 0 !important;
  border-bottom: 3px solid #d4573a !important;
  letter-spacing: 2px !important;
  text-align: center !important;
}
.booking-room-calendars #booking-package_inputFormPanel input[type="text"],
.booking-room-calendars #booking-package_inputFormPanel input[type="email"],
.booking-room-calendars #booking-package_inputFormPanel input[type="tel"],
.booking-room-calendars #booking-package_inputFormPanel textarea,
.booking-room-calendars #booking-package_inputFormPanel select {
  border: 1.5px solid rgba(11, 95, 113, 0.2) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 1.4rem !important;
  color: #0B5F71 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.booking-room-calendars #booking-package_inputFormPanel .formContent {
  padding: 20px 24px !important;
}
.booking-room-calendars .bookingDetailsTitle {
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%) !important;
  color: #ffffff !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  padding: 18px 24px !important;
  margin: 0 !important;
  border-bottom: 3px solid #d4573a !important;
  letter-spacing: 2px !important;
  text-align: center !important;
}
.booking-room-calendars #booking-package_durationStay .row {
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(11, 95, 113, 0.06) !important;
  margin: 0 !important;
  transition: background 0.2s !important;
}
.booking-room-calendars #booking-package_durationStay .row:hover {
  background: rgba(11, 95, 113, 0.02) !important;
}
.booking-room-calendars #booking-package_durationStay .row .label {
  font-weight: 700 !important;
  color: #0B5F71 !important;
  font-size: 1.25rem !important;
  letter-spacing: 0.5px !important;
}
.booking-room-calendars #booking-package_durationStay .row .value {
  color: #2c3e50 !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
}
.booking-room-calendars #booking-package_durationStay .guests_row {
  padding: 14px 24px !important;
  border-bottom: 1px solid rgba(11, 95, 113, 0.06) !important;
}
.booking-room-calendars #booking-package_durationStay .guests_row .name {
  font-weight: 700 !important;
  color: #0B5F71 !important;
  font-size: 1.25rem !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.booking-room-calendars #booking-package_durationStay .guests_row select {
  border: 1.5px solid rgba(11, 95, 113, 0.2) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 1.4rem !important;
  color: #0B5F71 !important;
  background: #f8fbfc !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230B5F71' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}
.booking-room-calendars #booking-package_durationStay .guests_row select:focus {
  border-color: #0B5F71 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(11, 95, 113, 0.1) !important;
}
.booking-room-calendars #booking-package_durationStay .row.total_amount {
  padding: 20px 24px !important;
  background: linear-gradient(135deg, rgba(11, 95, 113, 0.04) 0%, rgba(11, 95, 113, 0.08) 100%) !important;
  border-top: 2px solid rgba(11, 95, 113, 0.1) !important;
  border-bottom: none !important;
  margin: 0 !important;
}
.booking-room-calendars #booking-package_durationStay .row.total_amount .name {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #0B5F71 !important;
}
.booking-room-calendars #booking-package_durationStay .row.total_amount .value {
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: #d4573a !important;
  letter-spacing: 0.5px !important;
}
/* Summary section */
.booking-room-calendars #booking-package_durationStay .row.summary {
  padding: 16px 24px !important;
  background: rgba(11, 95, 113, 0.02) !important;
  border-bottom: 1px solid rgba(11, 95, 113, 0.06) !important;
}
.booking-room-calendars #booking-package_durationStay .summaryTitle {
  font-weight: 600 !important;
  color: #0B5F71 !important;
  font-size: 1.2rem !important;
}
.booking-room-calendars #booking-package_durationStay .summaryValue {
  color: #2c3e50 !important;
  font-size: 1.3rem !important;
}
.booking-room-calendars #booking-package_durationStay .totalLengthOfStayLabel {
  color: #0B5F71 !important;
  font-weight: 700 !important;
}
.booking-room-calendars .next_page_button,
.booking-room-calendars button.next_page_button {
  display: block !important;
  width: calc(100% - 48px) !important;
  margin: 20px 24px 24px !important;
  padding: 16px 30px !important;
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(11, 95, 113, 0.25) !important;
}
.booking-room-calendars .next_page_button:hover,
.booking-room-calendars button.next_page_button:hover {
  background: linear-gradient(135deg, #084a58 0%, #0B5F71 100%) !important;
  box-shadow: 0 6px 20px rgba(11, 95, 113, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* ----- Next Page Button: Disabled / Gray-out (guest not selected) ----- */
.booking-room-calendars .next_page_button[disabled],
.booking-room-calendars button.next_page_button[disabled] {
  background: #b0b8bc !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  position: relative !important;
}
.booking-room-calendars .next_page_button[disabled]:hover,
.booking-room-calendars button.next_page_button[disabled]:hover {
  background: #a0a8ac !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Hint message below button text on hover
   Override main button::after (arrow SVG) with hint text */
.booking-room-calendars .next_page_button[disabled]::after {
  content: 'ゲストの人数を選択してください' !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  background-image: none !important;
  background: none !important;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0);
  transition: color 0.25s ease;
}
/* Guest count exceeds room capacity */
.booking-room-calendars .next_page_button[disabled][data-hint="over"]::after {
  content: 'ゲストの人数が定員を超えています' !important;
}
.booking-room-calendars .next_page_button[disabled]:hover::after {
  color: rgba(255, 255, 255, 0.95);
  right: auto !important;
}

/* ----- Step 2: Hide next_page_button when calendar is hidden (prevents flash) ----- */
#booking-package_calendarPage.hidden_panel ~ #booking-package_durationStay .next_page_button {
  display: none !important;
}

/* ----- Step 2: Hide duplicate guest count field ----- */
.booking-room-calendars #booking-package_inputFormPanel .row:has(#booking_package_input_guests) {
  display: none !important;
}
/* Fallback for browsers without :has() support */
.booking-room-calendars #booking-package_inputFormPanel #booking_package_input_guests {
  display: none !important;
}

/* ----- Step 2: Book Now / Return Button Unification ----- */
.booking-room-calendars .bottomBarPanel {
  padding: 20px 24px 24px !important;
  display: flex !important;
  gap: 12px !important;
}
.booking-room-calendars button.book_now_button {
  display: block !important;
  flex: 1 !important;
  padding: 16px 30px !important;
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(11, 95, 113, 0.25) !important;
}
.booking-room-calendars button.book_now_button:hover {
  background: linear-gradient(135deg, #084a58 0%, #0B5F71 100%) !important;
  box-shadow: 0 6px 20px rgba(11, 95, 113, 0.4) !important;
  transform: translateY(-2px) !important;
}
/* ----- Book Now Button: Disabled until policy agreed ----- */
.booking-room-calendars button.book_now_button[disabled] {
  background: #b0b8bc !important;
  color: rgba(255, 255, 255, 0.7) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  position: relative !important;
}
.booking-room-calendars button.book_now_button[disabled]:hover {
  background: #a0a8ac !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Override main button::after arrow for disabled book_now */
.booking-room-calendars button.book_now_button[disabled]::after {
  content: 'キャンセルポリシーに同意してください' !important;
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  background-image: none !important;
  background: none !important;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0);
  transition: color 0.25s ease;
}
.booking-room-calendars button.book_now_button[disabled]:hover::after {
  color: rgba(255, 255, 255, 0.95);
  right: auto !important;
}
.booking-room-calendars button.return_form_button {
  display: block !important;
  flex: 0 0 auto !important;
  padding: 16px 30px !important;
  background: #ffffff !important;
  color: #0B5F71 !important;
  border: 2px solid #0B5F71 !important;
  border-radius: 10px !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  box-shadow: none !important;
}
.booking-room-calendars button.return_form_button:hover {
  background: rgba(11, 95, 113, 0.05) !important;
  box-shadow: 0 2px 10px rgba(11, 95, 113, 0.15) !important;
  transform: translateY(-2px) !important;
}

/* ----- Cancellation Policy Modal ----- */
.hatago-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.hatago-modal {
  background: #ffffff;
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: hatago-modal-in 0.3s ease;
}
@keyframes hatago-modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.hatago-modal-header {
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%);
  color: #ffffff;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid #d4573a;
}
.hatago-modal-header h3 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  white-space: nowrap;
}
.hatago-modal-close {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2.4rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.8;
  transition: opacity 0.2s;
}
/* Remove global main button::after arrow from modal close button */
.hatago-modal-close::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}
.hatago-modal-close:hover {
  opacity: 1;
}
.hatago-modal-body {
  padding: 28px 24px;
  font-size: 1.4rem;
  line-height: 2.0;
  color: #2c3e50;
}
.hatago-modal-body strong {
  color: #d4573a;
}
.hatago-policy-link {
  color: #d4573a !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}
.hatago-policy-link:hover {
  color: #0B5F71 !important;
}

/* ----- Clear Button Redesign ----- */
.booking-room-calendars #booking-package_durationStay .clearLabel,
.booking-room-calendars #booking-package_durationStay .clearDate,
.booking-room-calendars #booking-package_durationStay span[id*="clearLabel"],
.booking-room-calendars #booking-package_durationStay span[id*="Clear"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 14px !important;
  background: rgba(212, 87, 58, 0.08) !important;
  color: #d4573a !important;
  border: 1.5px solid rgba(212, 87, 58, 0.25) !important;
  border-radius: 20px !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.5px !important;
  line-height: 1.4 !important;
}
.booking-room-calendars #booking-package_durationStay .clearLabel:hover,
.booking-room-calendars #booking-package_durationStay .clearDate:hover,
.booking-room-calendars #booking-package_durationStay span[id*="clearLabel"]:hover,
.booking-room-calendars #booking-package_durationStay span[id*="Clear"]:hover {
  background: rgba(212, 87, 58, 0.15) !important;
  border-color: #d4573a !important;
  color: #c04530 !important;
  transform: scale(1.02) !important;
}
/* Also style the clear link as a pill button */
.booking-room-calendars #booking-package_durationStay a[class*="clear"],
.booking-room-calendars #booking-package_durationStay label[id*="clear"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 14px !important;
  background: rgba(212, 87, 58, 0.08) !important;
  color: #d4573a !important;
  border: 1.5px solid rgba(212, 87, 58, 0.25) !important;
  border-radius: 20px !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
.booking-room-calendars #booking-package_durationStay a[class*="clear"]:hover,
.booking-room-calendars #booking-package_durationStay label[id*="clear"]:hover {
  background: rgba(212, 87, 58, 0.15) !important;
  border-color: #d4573a !important;
}

/* ----- Plan Options Table Enhancement (Pricing Page) ----- */
.sub-section.room-pricesContent .plan-options {
  max-width: 820px;
  margin: 40px auto 30px;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(11, 95, 113, 0.08);
  background: #ffffff;
}
.sub-section.room-pricesContent .plan-option-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(11, 95, 113, 0.08);
  border: none;
  margin-bottom: 0;
  transition: background 0.2s ease;
}
.sub-section.room-pricesContent .plan-option-row:hover {
  background: rgba(11, 95, 113, 0.03);
}
.sub-section.room-pricesContent .plan-option-row:last-child {
  border-bottom: none;
}
.sub-section.room-pricesContent .plan-options > .plan-option-row {
  border: none;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(11, 95, 113, 0.08);
}
.sub-section.room-pricesContent .plan-options > .plan-option-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.sub-section.room-pricesContent .plan-option-label {
  flex: 1;
  color: #0B5F71;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 20px 28px;
}
.sub-section.room-pricesContent .plan-option-price {
  color: #0B5F71;
  text-align: center;
  padding: 20px 28px;
  border-left: 1px solid rgba(11, 95, 113, 0.08);
  min-width: 220px;
  background: rgba(11, 95, 113, 0.02);
}
.sub-section.room-pricesContent .plan-option-price .price-num {
  font-size: 2.8rem;
  font-weight: 800;
  color: #d4573a;
}
.sub-section.room-pricesContent .plan-option-price .price-unit {
  font-size: 1.6rem;
  font-weight: 700;
  color: #d4573a;
}
.sub-section.room-pricesContent .plan-option-price .price-per {
  font-size: 1.2rem;
  color: rgba(11, 95, 113, 0.6);
}
.sub-section.room-pricesContent .plan-option-price .price-note {
  display: block;
  font-size: 1.1rem;
  font-style: normal;
  color: rgba(11, 95, 113, 0.5);
  margin-top: 2px;
}
.sub-section.room-pricesContent .plan-option-price .price-tour {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0B5F71;
}

/* ----- 5-1: Date Range Highlighting ----- */
.booking-room-calendars .selected_day_slot {
  background-color: rgba(11, 95, 113, 0.08) !important;
}
.booking-room-calendars .selected_start_day {
  background: linear-gradient(to right, transparent 50%, rgba(11, 95, 113, 0.1) 50%) !important;
}
.booking-room-calendars .selected_start_day > .dateField {
  background: #0B5F71 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  z-index: 1 !important;
}
.booking-room-calendars .selected_day_range {
  background-color: rgba(11, 95, 113, 0.1) !important;
}
.booking-room-calendars .selected_day_range > .dateField {
  background: rgba(11, 95, 113, 0.15) !important;
  background-image: none !important;
  background-color: rgba(11, 95, 113, 0.15) !important;
  color: #0B5F71 !important;
  font-weight: 600 !important;
}
.booking-room-calendars .selected_end_day {
  background: linear-gradient(to left, transparent 50%, rgba(11, 95, 113, 0.1) 50%) !important;
}
.booking-room-calendars .selected_end_day > .dateField {
  background: #0B5F71 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  z-index: 1 !important;
}
.booking-room-calendars .selected_start_day .hatago-price,
.booking-room-calendars .selected_end_day .hatago-price {
  color: rgba(255, 255, 255, 0.8) !important;
}
.booking-room-calendars .selected_day_range .hatago-price {
  color: rgba(11, 95, 113, 0.5) !important;
}

/* ----- 5-2: Calendar Price Display ----- */
.booking-room-calendars .day_slot {
  height: 102px !important;
  position: relative !important;
}
.booking-room-calendars .day_slot .dateField {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 4px 2px 16px 2px !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.hatago-date-num {
  display: block !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
.hatago-price {
  display: block !important;
  font-size: 1.3rem !important;
  color: #d4573a !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}
.day_slot.closeDay .hatago-price,
.day_slot.pastDay .hatago-price {
  color: rgba(11, 95, 113, 0.2) !important;
}

/* ----- 5-3: Availability Status (◯ / ✗) ----- */
.booking-room-calendars .day_slot.available_day:not(.closeDay):not(.closingDay):not(.pastDay)::before {
  content: '◯' !important;
  position: absolute !important;
  top: 3px !important;
  right: 4px !important;
  font-size: 1.2rem !important;
  color: #27ae60 !important;
  font-weight: bold !important;
  line-height: 1 !important;
  z-index: 2 !important;
}
.booking-room-calendars .day_slot.closingDay::before {
  content: '✗' !important;
  position: absolute !important;
  top: 3px !important;
  right: 4px !important;
  font-size: 1.2rem !important;
  color: #e74c3c !important;
  font-weight: bold !important;
  line-height: 1 !important;
  z-index: 2 !important;
}

/* Availability Legend (below season badge, above calendar grid) */
.hatago-calendar-legend {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 0 12px 4px;
  padding: 10px 20px;
  background: rgba(11, 95, 113, 0.03);
  border: 1px solid rgba(11, 95, 113, 0.08);
  border-radius: 8px;
  font-size: 1.3rem;
  color: #0B5F71;
}
.hatago-calendar-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hatago-calendar-legend .legend-icon {
  font-weight: bold;
  font-size: 1.1rem;
}
.hatago-calendar-legend .legend-icon.available { color: #27ae60; }
.hatago-calendar-legend .legend-icon.full { color: #e74c3c; }
.hatago-calendar-legend .legend-icon.spot-peak { color: #e67e22; }

/* ----- 5-5: Season Badge ----- */
.hatago-season-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 4px 0 6px;
  border-radius: 8px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #0B5F71;
}
.hatago-season-badge.season-high {
  background: rgba(212, 87, 58, 0.1);
  border-left: 4px solid #d4573a;
}
.hatago-season-badge.season-mid {
  background: rgba(11, 95, 113, 0.06);
  border-left: 4px solid #0B5F71;
}
.hatago-season-badge.season-low {
  background: rgba(39, 174, 96, 0.06);
  border-left: 4px solid #27ae60;
}
.hatago-season-badge .season-label {
  font-weight: 800;
  font-size: 1.4rem;
}
.hatago-season-badge.season-high .season-label { color: #d4573a; }
.hatago-season-badge.season-mid .season-label { color: #0B5F71; }
.hatago-season-badge.season-low .season-label { color: #27ae60; }

/* ----- 5-6: Event Cells & Labels ----- */
.day_slot.hatago-spot-peak {
  background-color: rgba(230, 126, 34, 0.1) !important;
}
.day_slot.hatago-event-cell {
  background-color: rgba(11, 95, 113, 0.06) !important;
}
.day_slot.hatago-spot-peak.selected_start_day,
.day_slot.hatago-spot-peak.selected_end_day {
  background: linear-gradient(to right, rgba(230, 126, 34, 0.1) 0%, rgba(11, 95, 113, 0.1) 50%) !important;
}
/* Event name label inside calendar cells */
.hatago-event-label {
  position: absolute !important;
  bottom: 2px !important;
  left: 1px !important;
  right: 1px !important;
  font-size: 0.6rem !important;
  line-height: 1.1 !important;
  text-align: center !important;
  padding: 2px 2px !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  z-index: 3 !important;
  pointer-events: none !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
}
.hatago-event-label.spot-peak-label {
  background: rgba(230, 126, 34, 0.9) !important;
  color: #fff !important;
}
.hatago-event-label.regular-label {
  background: rgba(11, 95, 113, 0.85) !important;
  color: #fff !important;
}

/* ----- 5-7: Events Panel (below calendar grid) ----- */
.hatago-events-panel {
  margin: 12px 12px 16px;
  padding: 16px 20px;
  background: rgba(11, 95, 113, 0.03);
  border: 1px solid rgba(11, 95, 113, 0.1);
  border-radius: 10px;
  clear: both;
}
.hatago-events-panel h4 {
  font-size: 1.4rem;
  color: #0B5F71;
  margin: 0 0 10px;
  font-weight: 700;
  border-bottom: 2px solid rgba(11, 95, 113, 0.1);
  padding-bottom: 8px;
}
.hatago-events-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hatago-events-panel li {
  font-size: 1.25rem;
  color: #333;
  padding: 5px 0 5px 18px;
  position: relative;
  line-height: 1.6;
}
.hatago-events-panel li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 12px;
  width: 8px;
  height: 8px;
  background: #d4573a;
  border-radius: 50%;
}
.hatago-events-panel .spot-peak-info {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(230, 126, 34, 0.08);
  border-radius: 6px;
  border-left: 3px solid #e67e22;
}
.hatago-events-panel .spot-peak-label {
  display: block;
  font-weight: 700;
  color: #e67e22;
  font-size: 1.3rem;
  margin-bottom: 4px;
}
.hatago-events-panel .spot-peak-item {
  display: block;
  font-size: 1.2rem;
  color: #555;
  padding-left: 8px;
}

/* ----- Season Legend (below availability legend, above calendar grid) ----- */
.hatago-season-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0 12px 6px;
  padding: 8px 20px;
  background: rgba(11, 95, 113, 0.03);
  border: 1px solid rgba(11, 95, 113, 0.08);
  border-radius: 8px;
  font-size: 1.25rem;
  color: #0B5F71;
  flex-wrap: wrap;
}
.hatago-season-legend > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.season-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.season-dot.season-high { background: #d4573a; }
.season-dot.season-mid { background: #0B5F71; }
.season-dot.season-low { background: #27ae60; }
.season-dot.season-spot { background: #e67e22; }

/* ----- Event Tooltip Popup ----- */
.hatago-event-tooltip {
  position: fixed;
  z-index: 99999;
  background: #0B5F71;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: none;
}
.hatago-event-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #0B5F71;
}

/* ----- Active Navigation State ----- */
.menu li.current-menu-item > a,
.menu li.current_page_item > a {
  border-bottom: 3px solid #0B5F71;
  font-weight: 500;
}

/* ==============================
   Mobile Responsive
   ============================== */
@media screen and (max-width: 768px) {
  .page-hero {
    height: 200px;
    margin-top: 60px;
  }
  .page-hero h1 {
    font-size: 2.2rem;
    letter-spacing: 3px;
  }
  .page-hero h1 span {
    font-size: 1.3rem;
  }
  .pagetemp-top .breadcrumb {
    padding: 12px 20px;
    font-size: 1.1rem;
  }
  .sub-section {
    padding: 50px 0;
  }
  .sub-section .inner {
    padding: 0 20px;
  }
  .sub-section h2 {
    font-size: 2.4rem;
    margin-bottom: 30px;
  }
  .room-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .room-card img {
    height: 200px;
  }
  .tour-guide {
    flex-direction: column;
  }
  .tour-guide-img {
    flex: none;
    width: 100%;
  }
  .tour-examples {
    grid-template-columns: 1fr;
  }
  .facilities-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .access-map-large iframe {
    height: 300px;
  }
  .access-info-box {
    flex-direction: column;
    gap: 24px;
  }
  .tour-pricing {
    padding: 24px;
  }
  .sub-section .precautions h4 {
    font-size: 1.8rem;
    padding: 14px;
    margin: 30px 0;
  }
  .sub-section .precautions h5 {
    font-size: 1.8rem;
  }
  .sub-section .overview-table table th {
    width: 120px;
    font-size: 1.2rem;
  }
  .sub-section .overview-table table td {
    font-size: 1.3rem;
  }
  .booking-room-tabs {
    flex-direction: column !important;
    gap: 0 !important;
  }
  a.room-tab {
    padding: 12px 20px !important;
    font-size: 1.3rem !important;
    text-align: center !important;
    width: 100% !important;
    min-width: auto !important;
  }
  .room-calendar-header {
    padding: 16px;
  }
  .room-calendar-header h3 {
    font-size: 1.6rem;
  }
  /* Phase 5: Mobile booking panels */
  .booking-room-calendars #booking-package_calendarPage {
    border-radius: 10px !important;
  }
  .booking-room-calendars #booking-package_durationStay {
    margin-top: 16px !important;
    border-radius: 10px !important;
  }
  .booking-room-calendars .bookingDetailsTitle {
    font-size: 1.4rem !important;
    padding: 14px 16px !important;
  }
  .booking-room-calendars #booking-package_durationStay .row {
    padding: 12px 16px !important;
  }
  .booking-room-calendars #booking-package_durationStay .guests_row {
    padding: 10px 16px !important;
  }
  .booking-room-calendars #booking-package_durationStay .row.total_amount .value {
    font-size: 2.0rem !important;
  }
  .booking-room-calendars #booking-package_inputFormPanel {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 16px !important;
    border-radius: 10px !important;
  }
  .booking-room-calendars #booking-package_inputFormPanel .title_in_form {
    font-size: 1.4rem !important;
    padding: 14px 16px !important;
  }
  .booking-room-calendars #booking-package_inputFormPanel .formContent {
    padding: 16px !important;
  }
  .booking-room-calendars .next_page_button,
  .booking-room-calendars button.next_page_button {
    width: calc(100% - 32px) !important;
    margin: 16px 16px 20px !important;
    font-size: 1.4rem !important;
  }
  .booking-room-calendars .bottomBarPanel {
    padding: 16px 16px 20px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .booking-room-calendars button.book_now_button,
  .booking-room-calendars button.return_form_button {
    font-size: 1.4rem !important;
    padding: 14px 24px !important;
    letter-spacing: 1px !important;
  }
  .hatago-price {
    font-size: 1.1rem !important;
  }
  .booking-room-calendars .day_slot {
    height: 86px !important;
  }
  .booking-room-calendars .day_slot.available_day:not(.closeDay):not(.closingDay):not(.pastDay)::before,
  .booking-room-calendars .day_slot.closingDay::before {
    font-size: 1.0rem !important;
  }
  .hatago-calendar-legend {
    gap: 16px;
    font-size: 1.2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .hatago-season-legend {
    gap: 12px;
    font-size: 1.1rem;
    flex-wrap: wrap;
  }
  .hatago-season-badge {
    font-size: 1.15rem;
    padding: 8px 12px;
  }
  .hatago-events-panel {
    padding: 12px 14px;
  }
  .hatago-events-panel h4 {
    font-size: 1.25rem;
  }
  .hatago-events-panel li {
    font-size: 1.1rem;
  }
}

/* ==============================
   Photo Gallery - ハタゴ写真館
   ============================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.gallery-item {
  overflow: hidden;
  border-radius: 6px;
  background: #f5f5f5;
}

.gallery-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.gallery-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  cursor: pointer;
}

.gallery-link:hover img {
  transform: scale(1.06);
}

.gallery-caption {
  padding: 10px 12px;
  font-size: 1.2rem;
  color: #0B5F71;
  text-align: center;
  line-height: 1.5;
}

/* ----- Lightbox ----- */
.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 100000;
  justify-content: center;
  align-items: center;
}

.gallery-lightbox.active {
  display: flex;
}

.gallery-lightbox .lightbox-img {
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* Override global "main button" styles for lightbox buttons */
.gallery-lightbox button {
  width: auto !important;
  height: auto !important;
  background: none !important;
  font-size: inherit !important;
  position: absolute !important;
}
.gallery-lightbox button::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

.gallery-lightbox .lightbox-close {
  position: absolute !important;
  top: 16px;
  right: 24px;
  color: #fff;
  font-size: 3.6rem;
  background: rgba(0, 0, 0, 0.4) !important;
  border: none;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.gallery-lightbox .lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: scale(1.1);
}

.gallery-lightbox .lightbox-prev,
.gallery-lightbox .lightbox-next {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 2.8rem;
  background: rgba(0, 0, 0, 0.4) !important;
  border: none;
  cursor: pointer;
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
}

.gallery-lightbox .lightbox-prev:hover,
.gallery-lightbox .lightbox-next:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-50%) scale(1.1);
}

.gallery-lightbox .lightbox-prev {
  left: 20px;
}

.gallery-lightbox .lightbox-next {
  right: 20px;
}

/* Photo counter */
.gallery-lightbox .lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  letter-spacing: 2px;
  z-index: 10;
}

/* ----- Gallery Responsive ----- */
@media screen and (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 10px;
  }

  .gallery-caption {
    font-size: 1.1rem;
    padding: 8px 8px;
  }

  .gallery-lightbox .lightbox-prev,
  .gallery-lightbox .lightbox-next {
    font-size: 2rem;
    width: 42px !important;
    height: 42px !important;
  }

  .gallery-lightbox .lightbox-close {
    top: 10px;
    right: 12px;
    font-size: 2.8rem;
    width: 40px !important;
    height: 40px !important;
  }

  .gallery-lightbox .lightbox-prev {
    left: 10px;
  }

  .gallery-lightbox .lightbox-next {
    right: 10px;
  }
}

/* ==============================
   連泊割引 - Extended Stay Discount
   ============================== */

.longstay-section {
  background: rgba(11, 95, 113, 0.03);
}
.longstay-intro {
  text-align: center;
  color: #0B5F71;
  font-size: 1.5rem;
  line-height: 2.0;
  margin-bottom: 50px;
}

/* --- Discount Tiers (3 cards) --- */
.longstay-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto 60px;
}
.longstay-tier {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px 20px;
  text-align: center;
  box-shadow: 0 2px 16px rgba(11, 95, 113, 0.06);
  border: 1.5px solid rgba(11, 95, 113, 0.08);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.longstay-tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(11, 95, 113, 0.12);
}
.longstay-tier.featured {
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%);
  border: none;
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(11, 95, 113, 0.25);
}
.longstay-tier.featured:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 12px 40px rgba(11, 95, 113, 0.3);
}
.longstay-tier.featured .tier-duration,
.longstay-tier.featured .tier-name {
  color: rgba(255, 255, 255, 0.85);
}
.longstay-tier.featured .tier-discount {
  color: #ffffff;
}
.tier-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #d4573a;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
  padding: 4px 18px;
  border-radius: 20px;
  letter-spacing: 1px;
  white-space: nowrap;
}
.tier-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
  line-height: 1;
}
.tier-duration {
  font-size: 1.3rem;
  color: #0B5F71;
  font-weight: 600;
  margin-bottom: 4px;
}
.tier-name {
  font-size: 1.15rem;
  color: rgba(11, 95, 113, 0.6);
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}
.tier-discount {
  font-size: 4.0rem;
  font-weight: 900;
  color: #d4573a;
  line-height: 1;
}
.tier-discount span {
  font-size: 1.8rem;
  font-weight: 700;
}

/* --- Nomad Plan Detail Box --- */
.nomad-plan {
  max-width: 860px;
  margin: 0 auto 40px;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(11, 95, 113, 0.08);
  border: 1.5px solid rgba(11, 95, 113, 0.1);
}
.nomad-plan-header {
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%);
  padding: 28px 32px;
  text-align: center;
}
.nomad-plan-header h3 {
  color: #ffffff !important;
  background: none !important;
  font-size: 2.6rem !important;
  font-weight: 800;
  margin: 0 0 4px;
  padding: 0 !important;
  text-align: center !important;
  width: auto;
  max-width: none;
  letter-spacing: 2px;
}
.nomad-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;
}

/* Price Cards */
.nomad-prices {
  padding: 28px 32px 8px;
}
.nomad-price-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(11, 95, 113, 0.08);
  transition: background 0.2s;
}
.nomad-price-card:last-child {
  border-bottom: none;
}
.nomad-price-card:hover {
  background: rgba(11, 95, 113, 0.02);
}
.nomad-room-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0B5F71;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
}
.nomad-room-name .floor-badge {
  display: inline-block;
  background: #0B5F71;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
  line-height: 1.6;
}
.nomad-price-detail {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nomad-original {
  font-size: 1.2rem;
  color: #999;
  text-decoration: line-through;
}
.nomad-arrow {
  font-size: 1.6rem;
  color: #d4573a;
  font-weight: bold;
}
.nomad-final {
  font-size: 1.4rem;
  color: #d4573a;
  font-weight: 600;
}
.nomad-final strong {
  font-size: 2.6rem;
  font-weight: 900;
}
.nomad-final small {
  font-size: 1.2rem;
}

/* Note */
.nomad-note {
  text-align: center;
  font-size: 1.2rem;
  color: rgba(11, 95, 113, 0.5);
  padding: 0 32px;
  margin: 8px 0 0;
}

/* Benefits */
.nomad-benefits {
  margin: 0;
  padding: 24px 32px 32px;
}
.nomad-benefits h4 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #0B5F71;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(11, 95, 113, 0.1);
}
.nomad-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.nomad-benefit {
  text-align: center;
  background: rgba(11, 95, 113, 0.04);
  border-radius: 12px;
  padding: 20px 12px;
  transition: transform 0.2s, background 0.2s;
}
.nomad-benefit:hover {
  transform: translateY(-2px);
  background: rgba(11, 95, 113, 0.08);
}
.benefit-icon {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}
.nomad-benefit p {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0B5F71;
  margin: 0;
}

/* CTA */
.longstay-cta {
  text-align: center;
  font-size: 1.5rem;
  color: #0B5F71;
  margin: 0;
}
.longstay-cta a {
  color: #d4573a;
  font-weight: 700;
  text-decoration: underline;
}
.longstay-cta a:hover {
  color: #0B5F71;
}

/* --- Mobile --- */
@media screen and (max-width: 768px) {
  .longstay-tiers {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 340px;
  }
  .longstay-tier.featured {
    transform: scale(1);
    order: -1;
  }
  .longstay-tier.featured:hover {
    transform: translateY(-4px);
  }
  .tier-discount {
    font-size: 3.2rem;
  }
  .nomad-plan {
    margin: 0 auto 30px;
    border-radius: 16px;
  }
  .nomad-plan-header {
    padding: 22px 20px;
  }
  .nomad-plan-header h3 {
    font-size: 2.0rem !important;
  }
  .nomad-prices {
    padding: 20px 16px 4px;
  }
  .nomad-price-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 12px;
  }
  .nomad-price-detail {
    justify-content: flex-start;
    gap: 8px;
  }
  .nomad-final strong {
    font-size: 2.2rem;
  }
  .nomad-benefits {
    padding: 20px 16px 24px;
  }
  .nomad-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* ==============================
   宿泊の流れ - Stay Flow
   ============================== */

/* Timeline Container */
.stayflow-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding-left: 40px;
}
.stayflow-timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #0B5F71, rgba(11, 95, 113, 0.2));
  border-radius: 3px;
}

/* Step */
.stayflow-step {
  display: flex;
  gap: 24px;
  margin-bottom: 48px;
  position: relative;
}
.stayflow-step:last-child {
  margin-bottom: 0;
}

/* Step Number Circle */
.stayflow-number {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 15px rgba(11, 95, 113, 0.3);
}
.stayflow-number span {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

/* Step Content Card */
.stayflow-content {
  flex: 1;
  background: #ffffff;
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 2px 16px rgba(11, 95, 113, 0.06);
  border: 1px solid rgba(11, 95, 113, 0.08);
  position: relative;
}
.stayflow-content::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #ffffff;
  filter: drop-shadow(-2px 0 1px rgba(11, 95, 113, 0.04));
}
.stayflow-content h3 {
  color: #0B5F71 !important;
  background: none !important;
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 2px;
  padding: 0 !important;
  text-align: left !important;
  letter-spacing: 1px;
  width: auto;
  max-width: none;
  border-radius: 0;
}
.stayflow-subtitle {
  color: rgba(11, 95, 113, 0.5);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 16px;
  letter-spacing: 1px;
}
.stayflow-body p {
  font-size: 1.45rem;
  line-height: 2.0;
  color: #2c3e50;
  margin-bottom: 16px;
}
.stayflow-body p:last-child {
  margin-bottom: 0;
}
.stayflow-body a {
  color: #d4573a;
  font-weight: 600;
  text-decoration: underline;
}
.stayflow-body a:hover {
  color: #0B5F71;
}

/* Note Box */
.stayflow-note {
  background: rgba(11, 95, 113, 0.04);
  border-left: 4px solid #0B5F71;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 16px 0;
}
.stayflow-note strong {
  display: block;
  color: #0B5F71;
  font-size: 1.35rem;
  margin-bottom: 10px;
}
.stayflow-note ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stayflow-note li {
  font-size: 1.35rem;
  color: #2c3e50;
  padding: 4px 0 4px 20px;
  position: relative;
  line-height: 1.8;
}
.stayflow-note li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #0B5F71;
  font-weight: bold;
}

/* Payment Note */
.stayflow-note-payment {
  background: rgba(212, 87, 58, 0.04);
  border-left-color: #d4573a;
  margin-top: 20px;
}
.stayflow-note-payment strong {
  color: #d4573a;
  font-size: 1.45rem;
}
.stayflow-note-payment p {
  font-size: 1.35rem !important;
  color: #2c3e50;
  line-height: 2.0 !important;
  margin: 8px 0 0 !important;
}
.stayflow-note-payment p strong {
  display: inline;
  font-size: inherit;
  margin: 0;
  color: #d4573a;
}

/* Highlight Box */
.stayflow-highlight {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(11, 95, 113, 0.06) 0%, rgba(11, 95, 113, 0.02) 100%);
  border: 1.5px solid rgba(11, 95, 113, 0.15);
  border-radius: 10px;
  padding: 12px 24px;
  margin: 12px 0;
}
.highlight-label {
  font-size: 1.3rem;
  color: #0B5F71;
  font-weight: 600;
}
.highlight-value {
  font-size: 2.0rem;
  color: #d4573a;
  font-weight: 800;
}

/* Tip Text */
.stayflow-tip {
  font-size: 1.25rem !important;
  color: rgba(11, 95, 113, 0.6) !important;
  line-height: 1.8 !important;
  margin-top: 12px;
}

/* Checklist */
.stayflow-checklist {
  background: rgba(212, 87, 58, 0.04);
  border: 1.5px solid rgba(212, 87, 58, 0.15);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 16px 0;
}
.stayflow-checklist h4 {
  color: #d4573a;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 12px;
}
.stayflow-checklist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stayflow-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  color: #2c3e50;
  padding: 8px 0;
  border-bottom: 1px solid rgba(212, 87, 58, 0.08);
}
.stayflow-checklist li:last-child {
  border-bottom: none;
}
.check-icon {
  font-size: 1.6rem;
}

/* Info Grid (check-in/out times) */
.stayflow-info-grid {
  display: flex;
  gap: 16px;
  margin: 16px 0;
}
.stayflow-info-item {
  flex: 1;
  text-align: center;
  background: linear-gradient(135deg, #0B5F71 0%, #0e7a91 100%);
  border-radius: 10px;
  padding: 16px;
  color: #ffffff;
}
.info-label {
  display: block;
  font-size: 1.2rem;
  opacity: 0.85;
  margin-bottom: 4px;
}
.info-value {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Feature Icons */
.stayflow-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.stayflow-feature {
  text-align: center;
  padding: 16px 8px;
  background: rgba(11, 95, 113, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(11, 95, 113, 0.08);
}
.stayflow-feature span {
  display: block;
  font-size: 2.4rem;
  margin-bottom: 8px;
}
.stayflow-feature p {
  font-size: 1.2rem !important;
  color: #0B5F71 !important;
  font-weight: 600;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Services Grid */
.stayflow-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0;
}
.stayflow-service-card {
  background: rgba(11, 95, 113, 0.03);
  border: 1px solid rgba(11, 95, 113, 0.08);
  border-radius: 10px;
  padding: 18px 20px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.stayflow-service-card:hover {
  box-shadow: 0 4px 16px rgba(11, 95, 113, 0.1);
  transform: translateY(-2px);
}
.stayflow-service-card h5 {
  font-size: 1.4rem;
  color: #0B5F71;
  font-weight: 700;
  margin: 0 0 8px;
}
.stayflow-service-card p {
  font-size: 1.25rem !important;
  color: #555 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* FAQ Section */
.stayflow-faq {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  background: #ffffff;
  border-radius: 10px;
  padding: 24px 28px;
  margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(11, 95, 113, 0.05);
  border: 1px solid rgba(11, 95, 113, 0.08);
}
.faq-question {
  color: #0B5F71;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 10px;
  padding-left: 24px;
  position: relative;
}
.faq-question::before {
  content: 'Q';
  position: absolute;
  left: 0;
  color: #d4573a;
  font-weight: 800;
  font-size: 1.6rem;
}
.faq-answer {
  color: #2c3e50;
  font-size: 1.4rem;
  line-height: 1.9;
  padding-left: 24px;
  position: relative;
}
.faq-answer::before {
  content: 'A';
  position: absolute;
  left: 0;
  color: #0B5F71;
  font-weight: 800;
  font-size: 1.6rem;
}

/* ----- Stay Flow Mobile ----- */
@media screen and (max-width: 768px) {
  .stayflow-timeline {
    padding-left: 0;
  }
  .stayflow-timeline::before {
    left: 27px;
  }
  .stayflow-step {
    flex-direction: column;
    gap: 0;
    padding-left: 20px;
  }
  .stayflow-number {
    width: 48px;
    height: 48px;
    margin-bottom: -24px;
    z-index: 2;
    margin-left: -8px;
  }
  .stayflow-number span {
    font-size: 1.8rem;
  }
  .stayflow-content {
    padding: 32px 20px 24px;
    margin-left: 16px;
  }
  .stayflow-content::before {
    display: none;
  }
  .stayflow-content h3 {
    font-size: 1.8rem;
  }
  .stayflow-features {
    grid-template-columns: repeat(2, 1fr);
  }
  .stayflow-services-grid {
    grid-template-columns: 1fr;
  }
  .stayflow-info-grid {
    flex-direction: column;
    gap: 10px;
  }
  .stayflow-info-item {
    padding: 12px;
  }
  .info-value {
    font-size: 2.0rem;
  }
  .faq-item {
    padding: 20px;
  }
  .faq-question {
    font-size: 1.35rem;
  }

  /* Plan options mobile */
  .sub-section.room-pricesContent .plan-option-row {
    flex-direction: column;
    text-align: center;
  }
  .sub-section.room-pricesContent .plan-option-label {
    padding: 16px 20px 8px;
  }
  .sub-section.room-pricesContent .plan-option-price {
    border-left: none;
    border-top: 1px solid rgba(11, 95, 113, 0.08);
    padding: 8px 20px 16px;
    min-width: auto;
    width: 100%;
  }
}