/* =========================================================
   送迎・船・各種手配 カテゴリートップ
   サムイ島の海・移動・旅行サポートをイメージ
   ========================================================= */

.service-hub {
  --sv-deep:#164f67;
  --sv-blue:#237f9a;
  --sv-aqua:#eaf8fa;
  --sv-turquoise:#4bb9bf;
  --sv-sand:#fff7e8;
  --sv-orange:#ef8b35;
  color:#294653;
  background:#f7fbfc;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",
              "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.service-hub * { box-sizing:border-box; }
.service-hub img { display:block; width:100%; max-width:100%; height:auto; }
.service-hub a { transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease; }

/* Intro */
.service-intro {
  position:relative;
  overflow:hidden;
  padding:56px 40px 50px;
  color:#fff;
  background:
    radial-gradient(circle at 87% 15%,rgba(255,207,105,.34) 0%,rgba(255,207,105,0) 25%),
    linear-gradient(135deg,#164f67 0%,#237f9a 58%,#4bb9bf 100%);
}
.service-intro::after {
  content:"";
  position:absolute;
  left:-5%; right:-5%; bottom:-11px;
  height:32px;
  opacity:.4;
  background:
    radial-gradient(27px 12px at 27px 0,
      transparent 24px,
      rgba(255,255,255,.52) 25px,
      rgba(255,255,255,.52) 27px,
      transparent 28px)
    0 0 / 54px 26px repeat-x;
}
.service-intro-inner { position:relative; z-index:1; max-width:840px; }
.service-kicker,
.service-eyebrow {
  margin:0 0 8px;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.15em;
}
.service-kicker { color:#d0f4f5; }
.service-intro h1 {
  margin:0 0 14px;
  color:#fff;
  font-size:2.22rem;
  line-height:1.4;
}
.service-intro-lead {
  max-width:780px;
  margin:0;
  color:rgba(255,255,255,.95);
  line-height:1.9;
}
.service-symbols {
  margin-top:18px;
  color:#ffe09a;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.18em;
}

/* Quick nav */
.service-quick-nav {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:#c9e0e5;
}
.service-quick-nav a {
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:center;
  padding:12px;
  color:#285669;
  background:#fff;
  font-weight:800;
  text-align:center;
  text-decoration:none;
}
.service-quick-nav a:hover { background:#edf9fa; }

/* Sections */
.service-section { padding:50px 34px; }
.service-section-inner { max-width:920px; margin:0 auto; }
.service-section-white { background:#fff; }
.service-section-aqua {
  background:linear-gradient(180deg,#eaf8fa 0%,#f8fcfc 68%,#fff9ec 100%);
}
.service-section-sand {
  background:linear-gradient(180deg,#fff7e8 0%,#fffdf8 100%);
}
.service-eyebrow { color:#27839b; }
.service-title {
  margin:0 0 13px;
  color:#224d60;
  font-size:1.8rem;
  line-height:1.4;
}
.service-lead {
  max-width:800px;
  margin:0 0 27px;
  color:#5d7380;
  line-height:1.9;
}

/* Boat featured */
.service-recommend-badge {
  display:inline-block;
  margin-bottom:12px;
  padding:7px 13px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(90deg,#ef7d27,#f39a3a);
  font-size:.8rem;
  font-weight:900;
}
.service-feature-card {
  display:grid;
  grid-template-columns:1.13fr .87fr;
  overflow:hidden;
  border:2px solid #eaa255;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 32px rgba(23,81,101,.10);
}
.service-feature-image {
  position:relative;
  min-height:355px;
}
.service-feature-image img {
  height:100%;
  min-height:355px;
  object-fit:cover;
}
.service-image-label {
  position:absolute;
  left:16px; bottom:16px;
  padding:7px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(18,75,96,.84);
  font-size:.77rem;
  font-weight:800;
  letter-spacing:.08em;
}
.service-feature-body { padding:29px 26px; }
.service-feature-body h3 {
  margin:0 0 10px;
  color:#224d60;
  font-size:1.3rem;
}
.service-feature-body p {
  color:#5a7180;
  line-height:1.8;
}
.service-check-list {
  margin:14px 0 18px;
  padding:0;
  list-style:none;
}
.service-check-list li {
  position:relative;
  margin:0 0 8px;
  padding-left:23px;
  color:#496573;
}
.service-check-list li::before {
  content:"✦";
  position:absolute;
  left:0;
  color:#3db0bc;
}
.service-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Full Moon */
.service-fullmoon-card {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  margin-top:20px;
  padding:22px;
  border:1px solid #d9d6c7;
  border-radius:13px;
  background:
    radial-gradient(circle at 8% 50%,rgba(255,206,92,.20),rgba(255,206,92,0) 24%),
    linear-gradient(90deg,#fffdf8,#f2f7f8);
}
.service-moon {
  display:flex;
  width:58px;
  height:58px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#ba8025;
  background:#fff2c9;
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.1rem;
}
.service-fullmoon-copy h3 {
  margin:3px 0 5px;
  color:#224d60;
}
.service-fullmoon-copy p {
  margin:0;
  color:#61747d;
  line-height:1.7;
}
.service-mini-label {
  color:#27839b;
  font-size:.71rem;
  font-weight:900;
  letter-spacing:.1em;
}

/* Cards */
.service-card-grid {
  display:grid;
  gap:17px;
}
.service-card-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.service-card {
  overflow:hidden;
  border:1px solid #d2e2e6;
  border-radius:13px;
  background:#fff;
  box-shadow:0 8px 23px rgba(23,82,103,.06);
}
.service-card > img {
  height:210px;
  object-fit:cover;
  object-position:center top;
}
.service-card-body { padding:20px 18px; }
.service-card-body h3 {
  margin:4px 0 8px;
  color:#224d60;
  font-size:1.16rem;
}
.service-card-body p {
  color:#607783;
  line-height:1.72;
}
.service-card-plain {
  background:linear-gradient(180deg,#eef9fa 0%,#fff9ec 100%);
}
.service-card-symbol {
  padding:29px 20px 0;
  color:#3cacb7;
  font-size:2rem;
  font-weight:300;
}
.service-text-link {
  color:#247d96;
  font-weight:800;
  text-decoration:none;
}

/* Stay */
.service-stay-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.service-stay-card {
  padding:26px 23px;
  border:1px solid #e1dccb;
  border-radius:13px;
  background:#fff;
}
.service-stay-symbol {
  margin-bottom:9px;
  color:#dfa146;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.8rem;
}
.service-stay-symbol-blue { color:#3aa9b7; }
.service-stay-card h3 {
  margin:0 0 8px;
  color:#224d60;
}
.service-stay-card p {
  color:#63757d;
  line-height:1.75;
}
.service-stay-card a {
  color:#247d96;
  font-weight:800;
  text-decoration:none;
}

/* Travel flow */
.service-guide-section {
  padding:49px 34px;
  background:#edf7f9;
}
.service-flow {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:9px;
  align-items:stretch;
  margin-top:26px;
}
.service-flow-item {
  padding:19px 12px;
  border:1px solid #cedfe3;
  border-radius:10px;
  background:#fff;
  text-align:center;
}
.service-flow-number {
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  border-radius:50%;
  color:#fff;
  background:#318aa1;
  font-size:.75rem;
  font-weight:800;
}
.service-flow-item strong {
  display:block;
  margin-bottom:10px;
  color:#28576a;
}
.service-flow-links {
  display:grid;
  gap:6px;
  margin-top:4px;
}
.service-flow-links a {
  display:block;
  padding:7px 8px;
  border:1px solid #b9dbe2;
  border-radius:6px;
  color:#176f89;
  background:#f4fbfc;
  font-size:.78rem;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
}
.service-flow-links a:hover,
.service-flow-links a:focus {
  color:#fff;
  background:#2789a0;
  border-color:#2789a0;
}

.service-flow-item a {
  color:#247d96;
  font-weight:800;
  text-decoration:none;
  border-bottom:1px solid rgba(36,125,150,.25);
}
.service-flow-item a:hover,
.service-flow-item a:focus {
  color:#164f67;
  border-bottom-color:#164f67;
}
.service-flow-arrow {
  align-self:center;
  color:#4ba9b6;
  font-size:2rem;
}
.service-info-box {
  margin-top:22px;
  padding:20px 22px;
  border-left:4px solid #eda14b;
  border-radius:0 9px 9px 0;
  background:#fff;
}
.service-info-box strong {
  display:block;
  margin-bottom:6px;
  color:#7b562d;
}
.service-info-box p {
  margin:0;
  color:#66747a;
  line-height:1.8;
}

/* Buttons */
.service-btn {
  display:inline-flex;
  min-height:46px;
  align-items:center;
  justify-content:center;
  padding:11px 19px;
  border-radius:8px;
  font-weight:800;
  text-decoration:none;
}
.service-btn-primary {
  color:#fff !important;
  background:linear-gradient(90deg,#237b96,#38a5b5);
}
.service-btn-orange {
  color:#fff !important;
  background:linear-gradient(90deg,#eb7e2c,#f19a3b);
}
.service-btn-dark {
  color:#fff !important;
  background:#28576a;
}
.service-btn:hover {
  opacity:.92;
  transform:translateY(-1px);
}

/* CTA */
.service-cta {
  position:relative;
  overflow:hidden;
  padding:46px 30px;
  color:#fff;
  background:
    radial-gradient(circle at 87% 15%,rgba(255,197,86,.27) 0%,rgba(255,197,86,0) 25%),
    linear-gradient(135deg,#174f67,#267b93);
  text-align:center;
}
.service-cta::after {
  content:"";
  position:absolute;
  left:-5%; right:-5%; bottom:-10px;
  height:29px;
  opacity:.32;
  background:
    radial-gradient(24px 11px at 24px 0,
      transparent 21px,
      rgba(255,255,255,.48) 22px,
      rgba(255,255,255,.48) 24px,
      transparent 25px)
    0 0 / 48px 25px repeat-x;
}
.service-cta > * { position:relative; z-index:1; }
.service-cta-symbols {
  margin-bottom:8px;
  color:#ffd487;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.16em;
}
.service-cta h2 {
  margin:0 0 10px;
  color:#fff;
  font-size:1.55rem;
}
.service-cta p {
  max-width:720px;
  margin:0 auto 20px;
  color:rgba(255,255,255,.9);
  line-height:1.8;
}
.service-btn-light {
  color:#22596c !important;
  background:#fff;
}

/* Mobile */
@media only screen and (max-width:760px) {
  .service-intro { padding:42px 20px 40px; }
  .service-intro h1 { font-size:1.78rem; }
  .service-quick-nav { grid-template-columns:repeat(2,1fr); }

  .service-section,
  .service-guide-section { padding:38px 18px; }
  .service-title { font-size:1.48rem; }

  .service-feature-card,
  .service-card-grid-3,
  .service-stay-grid { grid-template-columns:1fr; }

  .service-feature-image,
  .service-feature-image img { min-height:230px; }
  .service-feature-body { padding:23px 19px; }
  .service-actions .service-btn { width:100%; }

  .service-fullmoon-card {
    grid-template-columns:auto 1fr;
  }
  .service-fullmoon-action {
    grid-column:1 / -1;
  }
  .service-fullmoon-action .service-btn { width:100%; }

  .service-card > img {
    height:205px;
    object-position:center top;
  }

  .service-flow { grid-template-columns:1fr; }
  .service-flow-arrow {
    transform:rotate(90deg);
    justify-self:center;
    line-height:.7;
  }

  .service-cta { padding:38px 20px; }
  .service-cta h2 { font-size:1.35rem; }
}


/* Interpreter / Japanese support - Coming Soon */
.service-stay-card-coming {
  position:relative;
  border-color:#ead9c8;
  background:linear-gradient(180deg,#fffdf8 0%,#fff7eb 100%);
}
.service-coming-badge {
  display:inline-block;
  margin-bottom:12px;
  padding:5px 9px;
  border-radius:999px;
  color:#9a5d2f;
  background:#fff0dc;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.05em;
}
.service-stay-symbol-coral { color:#e48758; }
.service-coming-note {
  display:inline-block;
  margin-top:4px;
  color:#9b6a45;
  font-size:.79rem;
  font-weight:800;
}
.service-flow-coming {
  display:block;
  padding:7px 8px;
  border:1px dashed #e1b98f;
  border-radius:6px;
  color:#8b633f;
  background:#fff9ef;
  font-size:.75rem;
  font-weight:800;
  line-height:1.25;
  text-align:center;
}
.service-flow-coming small {
  color:#a37a58;
  font-size:.68rem;
  font-weight:700;
}