/* ==========================================================
   HOBO-YA TOP PAGE 2026 REFINEMENT
   Scope: body.hby-homepage only
   Purpose:
   - Clear H1 hierarchy
   - Reduce excessive color variation
   - Remove old-style gradients/glass effects where safe
   - Preserve PVII functionality and structure
   ========================================================== */

.hby-homepage {
  --hby-ocean-blue: #045893;
  --hby-deep-teal: #176f78;
  --hby-warm-orange: #e6a545;
  --hby-text: #263238;
  --hby-muted: #5f6f75;
  --hby-surface: #ffffff;
  --hby-soft: #f5f9fa;
  --hby-soft-blue: #eef6fa;
  --hby-border: #d6e2e7;
}

/* ---------- H1 / page introduction ---------- */

.hby-homepage .top-page-intro {
  box-sizing: border-box;
  width: calc(100% - 20px);
  margin: 18px auto 12px;
  padding: 20px 22px 18px;
  background: var(--hby-surface);
  border: 1px solid var(--hby-border);
  border-left: 6px solid var(--hby-ocean-blue);
  box-shadow: 0 2px 8px rgba(0, 55, 85, 0.08);
  text-align: left;
}

.hby-homepage .top-page-intro-en {
  display: block;
  margin-bottom: 5px;
  color: var(--hby-ocean-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.3;
}

.hby-homepage .top-page-intro h1 {
  margin: 0;
  padding: 0;
  color: #073f66;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1.4;
  border: 0;
  text-shadow: none;
}

.hby-homepage .top-page-intro p {
  margin: 9px 0 0;
  color: var(--hby-text);
  font-size: 14px;
  line-height: 1.8;
}

/* ---------- Make top section headings visually consistent ---------- */

.hby-homepage .top-section-heading {
  background: var(--hby-surface);
  border-top: 1px solid var(--hby-border);
  border-right: 1px solid var(--hby-border);
  border-bottom: 1px solid var(--hby-border);
  box-shadow: 0 1px 5px rgba(0, 55, 85, 0.07);
}

.hby-homepage .top-section-heading h2 {
  color: #073f66;
}

/* ---------- Reduce color noise in the home-page PVII info panels ---------- */

/* Images already provide plenty of color. Keep their surrounding panels neutral. */
.hby-homepage #p7ISM_6 .ism-panel-orange,
.hby-homepage #p7ISM_6 .ism-panel-skyblue {
  background: #ffffff !important;
  background-image: none !important;
}

/* Content panels: use one neutral family instead of many unrelated colors. */
.hby-homepage #main-contents .ism-panel-orange,
.hby-homepage #main-contents .ism-panel-skyblue,
.hby-homepage #main-contents .ism-panel-gold,
.hby-homepage #main-contents .ism-panel-green,
.hby-homepage #main-contents .ism-panel-purple,
.hby-homepage #main-contents .ism-panel-beige,
.hby-homepage #main-contents .ism-panel-silver,
.hby-homepage #main-contents .ism-panel-blue,
.hby-homepage #p7LBM_2 .ism-panel-orange,
.hby-homepage #p7LBM_2 .ism-panel-skyblue,
.hby-homepage #p7LBM_2 .ism-panel-gold,
.hby-homepage #p7LBM_2 .ism-panel-green,
.hby-homepage #p7LBM_2 .ism-panel-purple,
.hby-homepage #p7LBM_2 .ism-panel-beige,
.hby-homepage #p7LBM_2 .ism-panel-silver,
.hby-homepage #p7LBM_2 .ism-panel-blue {
  background: var(--hby-soft) !important;
  background-image: none !important;
  color: var(--hby-text) !important;
}

/* Some existing headings have a legacy .white class because their old panel was dark. */
.hby-homepage #main-contents .header-style-jouge-sen,
.hby-homepage #p7LBM_2 .header-style-jouge-sen,
.hby-homepage #main-contents .header-style-jouge-sen.white,
.hby-homepage #p7LBM_2 .header-style-jouge-sen.white {
  color: var(--hby-ocean-blue) !important;
  border-color: #b9d2df !important;
  text-shadow: none !important;
}

/* ---------- Remove old glass / gradient look from buttons ---------- */

.hby-homepage .lbm-btn-glass,
.hby-homepage .tkl-gl,
.hby-homepage .tkl-BTN {
  background-image: none !important;
  text-shadow: none !important;
}

.hby-homepage .lbm-btn {
  box-shadow: none !important;
}

/* Keep the current green LINE / orange contact buttons in the new header untouched. */

/* ---------- Footer / shop area ---------- */

.hby-homepage #Shop-info {
  background: var(--hby-soft-blue);
}

.hby-homepage #Shop-info .lbm-column {
  border-color: var(--hby-border) !important;
}

.hby-homepage .footer {
  background: var(--hby-ocean-blue);
  color: #fff;
}

.hby-homepage .footer .copyright {
  margin: 0;
  padding: 12px 10px;
  color: #fff;
  text-align: center;
  font-size: 12px;
}

/* ---------- Smartphone ---------- */

@media only screen and (max-width: 600px) {

  .hby-homepage .top-page-intro {
    width: calc(100% - 16px);
    margin: 12px auto 10px;
    padding: 15px 14px 14px;
    border-left-width: 5px;
  }

  .hby-homepage .top-page-intro h1 {
    font-size: 21px;
    line-height: 1.45;
  }

  .hby-homepage .top-page-intro p {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.7;
  }

  .hby-homepage .top-page-intro-en {
    font-size: 10px;
  }
}


/* ==========================================================
   LOWER HOME PAGE REDESIGN
   "ダイビングショップがご案内する海のツアー" 以降
   ========================================================== */

/* The old template-based link carousel and shop-information block are
   visually replaced on the homepage by the modern sections above. */
.hby-homepage #p7LBM_2,
.hby-homepage #Shop-info {
  display: none !important;
}

/* Shared section styling */
.hby-homepage .hby-dive-programs,
.hby-homepage .hby-why-us,
.hby-homepage .hby-dive-consult,
.hby-homepage .hby-quick-links,
.hby-homepage .hby-shop-summary {
  box-sizing: border-box;
  width: calc(100% - 20px);
  margin: 18px auto;
}

.hby-homepage .hby-section-intro {
  margin-bottom: 14px;
  text-align: left;
}

.hby-homepage .hby-section-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--hby-ocean-blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  line-height: 1.3;
}

.hby-homepage .hby-section-intro h2,
.hby-homepage .hby-dive-consult h2,
.hby-homepage .hby-shop-summary h2 {
  margin: 0;
  padding: 0;
  color: #073f66;
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.45;
  border: 0;
  text-shadow: none;
}

.hby-homepage .hby-section-intro p,
.hby-homepage .hby-dive-consult p,
.hby-homepage .hby-shop-summary p {
  margin: 7px 0 0;
  color: var(--hby-muted);
  font-size: 13px;
  line-height: 1.75;
}

/* Program cards */
.hby-homepage .hby-program-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.hby-homepage .hby-program-card {
  overflow: hidden;
  border: 1px solid var(--hby-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(0, 54, 83, .08);
}

.hby-homepage .hby-program-card-featured {
  grid-column: span 2;
}

.hby-homepage .hby-program-card-compact {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 42% 58%;
}

.hby-homepage .hby-program-image-link {
  display: block;
  overflow: hidden;
  background: #eaf3f7;
  line-height: 0;
}

.hby-homepage .hby-program-image {
  display: block;
  width: 100%;
  height: 178px;
  object-fit: cover;
  transition: transform .25s ease;
}

.hby-homepage .hby-program-card-compact .hby-program-image {
  height: 100%;
  min-height: 190px;
}

.hby-homepage .hby-program-card:hover .hby-program-image {
  transform: scale(1.025);
}

.hby-homepage .hby-program-body {
  padding: 16px;
  text-align: left;
}

.hby-homepage .hby-program-tag {
  display: inline-block;
  margin-bottom: 7px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eaf4f8;
  color: var(--hby-ocean-blue);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.hby-homepage .hby-program-body h3 {
  margin: 0 0 8px;
  padding: 0;
  color: #073f66;
  font-size: 18px;
  line-height: 1.45;
  border: 0;
}

.hby-homepage .hby-program-body h3 a {
  color: inherit;
  text-decoration: none;
}

.hby-homepage .hby-program-body h3 a:hover {
  color: var(--hby-deep-teal);
}

.hby-homepage .hby-program-body p {
  margin: 0 0 13px;
  color: #43565e;
  font-size: 13px;
  line-height: 1.75;
}

.hby-homepage .hby-card-actions {
  margin-top: auto;
}

.hby-homepage .hby-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 13px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
}

.hby-homepage .hby-card-btn-primary {
  background: var(--hby-ocean-blue);
  color: #fff !important;
}

.hby-homepage .hby-card-btn-primary:hover,
.hby-homepage .hby-card-btn-primary:focus {
  background: #034978;
  color: #fff !important;
}

.hby-homepage .hby-text-link {
  color: var(--hby-ocean-blue);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.hby-homepage .hby-text-link:hover {
  text-decoration: underline;
}

/* Why us */
.hby-homepage .hby-why-us {
  padding: 20px;
  border: 1px solid #cddfe7;
  border-radius: 10px;
  background: #f3f8fa;
}

.hby-homepage .hby-reason-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.hby-homepage .hby-reason-card {
  padding: 17px 16px;
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.hby-homepage .hby-reason-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  margin-bottom: 9px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--hby-ocean-blue);
  color: #fff;
  font-size: 16px;
}

.hby-homepage .hby-reason-card h3 {
  margin: 0 0 6px;
  color: #073f66;
  font-size: 16px;
  line-height: 1.4;
}

.hby-homepage .hby-reason-card p {
  margin: 0;
  color: #4d6169;
  font-size: 12px;
  line-height: 1.7;
}

/* Consultation CTA */
.hby-homepage .hby-dive-consult {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  border-radius: 10px;
  background: #073f66;
  color: #fff;
}

.hby-homepage .hby-dive-consult-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.hby-homepage .hby-dive-consult .hby-section-kicker {
  color: #9ed4e9;
}

.hby-homepage .hby-dive-consult h2,
.hby-homepage .hby-dive-consult p {
  color: #fff;
}

.hby-homepage .hby-dive-consult-actions {
  flex: 0 0 270px;
  display: grid;
  gap: 8px;
}

.hby-homepage .hby-consult-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.hby-homepage .hby-consult-line {
  background: #18a53a;
  color: #fff !important;
}

.hby-homepage .hby-consult-contact {
  background: #e6a545;
  color: #392506 !important;
}

/* Quick links */
.hby-homepage .hby-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.hby-homepage .hby-quick-card {
  display: flex;
  min-height: 132px;
  padding: 16px 14px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  border: 1px solid var(--hby-border);
  border-radius: 8px;
  background: #fff;
  color: #263238;
  text-align: left;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hby-homepage .hby-quick-card:hover,
.hby-homepage .hby-quick-card:focus {
  transform: translateY(-2px);
  border-color: #8ab5c8;
  box-shadow: 0 5px 14px rgba(0, 54, 83, .09);
}

.hby-homepage .hby-quick-icon {
  color: var(--hby-ocean-blue);
  font-size: 22px;
  line-height: 1;
}

.hby-homepage .hby-quick-title {
  margin-top: 10px;
  color: #073f66;
  font-size: 15px;
  font-weight: 700;
}

.hby-homepage .hby-quick-text {
  margin-top: 5px;
  color: #607078;
  font-size: 11px;
  line-height: 1.55;
}

/* Shop summary */
.hby-homepage .hby-shop-summary {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
  padding: 21px 22px;
  border-top: 4px solid var(--hby-deep-teal);
  border-radius: 8px;
  background: #f5f8f9;
  text-align: left;
}

.hby-homepage .hby-shop-contact-list {
  padding-left: 20px;
  border-left: 1px solid #cad9df;
}

.hby-homepage .hby-shop-contact-list p {
  display: flex;
  gap: 9px;
  margin: 0 0 10px;
  align-items: flex-start;
  color: #344c55;
  font-size: 12px;
  line-height: 1.6;
}

.hby-homepage .hby-shop-contact-list p:last-child {
  margin-bottom: 0;
}

.hby-homepage .hby-shop-contact-list i {
  flex: 0 0 17px;
  margin-top: 3px;
  color: var(--hby-ocean-blue);
  text-align: center;
}

.hby-homepage .hby-shop-contact-list a {
  color: var(--hby-ocean-blue);
  font-weight: 700;
  text-decoration: none;
}

.hby-homepage .hby-shop-contact-list a:hover {
  text-decoration: underline;
}

/* Footer refinement */
.hby-homepage #footer {
  margin-top: 20px;
}

/* Tablet */
@media only screen and (max-width: 850px) {
  .hby-homepage .hby-program-card-featured {
    grid-column: span 3;
  }

  .hby-homepage .hby-program-card-compact {
    grid-column: span 3;
    grid-template-columns: 1fr;
  }

  .hby-homepage .hby-program-card-compact .hby-program-image {
    height: 170px;
    min-height: 0;
  }

  .hby-homepage .hby-quick-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Smartphone */
@media only screen and (max-width: 600px) {
  .hby-homepage .hby-dive-programs,
  .hby-homepage .hby-why-us,
  .hby-homepage .hby-dive-consult,
  .hby-homepage .hby-quick-links,
  .hby-homepage .hby-shop-summary {
    width: calc(100% - 16px);
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .hby-homepage .hby-section-intro h2,
  .hby-homepage .hby-dive-consult h2,
  .hby-homepage .hby-shop-summary h2 {
    font-size: 19px;
  }

  .hby-homepage .hby-program-grid {
    display: block;
  }

  .hby-homepage .hby-program-card,
  .hby-homepage .hby-program-card-compact {
    display: block;
    margin-bottom: 12px;
  }

  .hby-homepage .hby-program-image,
  .hby-homepage .hby-program-card-compact .hby-program-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 365 / 190;
    object-fit: cover;
  }

  .hby-homepage .hby-program-body {
    padding: 14px;
  }

  .hby-homepage .hby-program-body h3 {
    font-size: 17px;
  }

  .hby-homepage .hby-card-btn {
    display: flex;
    width: 100%;
  }

  .hby-homepage .hby-why-us {
    padding: 16px 12px;
  }

  .hby-homepage .hby-reason-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hby-homepage .hby-reason-card {
    padding: 14px;
  }

  .hby-homepage .hby-dive-consult {
    display: block;
    padding: 18px 15px;
  }

  .hby-homepage .hby-dive-consult-actions {
    margin-top: 15px;
  }

  .hby-homepage .hby-quick-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .hby-homepage .hby-quick-card {
    min-height: 125px;
    padding: 13px 11px;
  }

  .hby-homepage .hby-quick-title {
    font-size: 13px;
  }

  .hby-homepage .hby-shop-summary {
    display: block;
    padding: 17px 15px;
  }

  .hby-homepage .hby-shop-contact-list {
    margin-top: 16px;
    padding: 14px 0 0;
    border-top: 1px solid #cad9df;
    border-left: 0;
  }
}