/* =========================================================
   ナンユアン島・タオ島 シュノーケリングカテゴリートップ
   南国・ターコイズ・砂浜イメージ
   ========================================================= */

.sn-hub {
  --sn-deep:#07506c;
  --sn-ocean:#0787a5;
  --sn-turquoise:#32b7c7;
  --sn-aqua:#ecfafa;
  --sn-sand:#fff7e6;
  --sn-orange:#f28a31;
  color:#17394d;
  background:#f6fbfc;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",
              "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.sn-hub * { box-sizing:border-box; }
.sn-hub img { max-width:100%; height:auto; display:block; }
.sn-hub a { transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease; }

/* Hero */
.sn-hero {
  position:relative;
  overflow:hidden;
  padding:62px 42px 56px;
  color:#fff;
  background:
    radial-gradient(circle at 86% 14%,rgba(255,211,105,.42) 0,rgba(255,211,105,0) 24%),
    linear-gradient(135deg,#06516e 0%,#078aa4 55%,#35bac6 100%);
}
.sn-hero::after {
  content:"";
  position:absolute;
  left:-5%; right:-5%; bottom:-11px;
  height:34px;
  opacity:.46;
  background:
    radial-gradient(28px 12px at 28px 0,
      transparent 25px,
      rgba(255,255,255,.55) 26px,
      rgba(255,255,255,.55) 28px,
      transparent 29px)
    0 0 / 56px 26px repeat-x;
}
.sn-hero-inner { position:relative; z-index:1; max-width:820px; }
.sn-kicker,.sn-eyebrow {
  margin:0 0 8px;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.15em;
}
.sn-kicker { color:#c8f4f5; }
.sn-hero h1 {
  margin:0 0 15px;
  color:#fff;
  font-size:2.35rem;
  line-height:1.3;
  text-shadow:0 2px 12px rgba(0,48,64,.2);
}
.sn-hero-lead {
  max-width:760px;
  margin:0;
  color:rgba(255,255,255,.95);
  line-height:1.9;
}
.sn-hero-symbols {
  margin-top:20px;
  color:#ffe19a;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.18em;
}

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

/* sections */
.sn-section { padding:50px 34px; }
.sn-section-inner { max-width:920px; margin:0 auto; }
.sn-section-white { background:#fff; }
.sn-section-recommended {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,#eafafa 0%,#f7fcfc 66%,#fff8e9 100%);
}
.sn-section-recommended::before {
  content:"";
  position:absolute;
  top:-105px; right:-85px;
  width:270px; height:270px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,209,102,.22) 0%,rgba(255,209,102,0) 69%);
}
.sn-section-recommended .sn-section-inner { position:relative; z-index:1; }
.sn-section-sand {
  background:linear-gradient(180deg,#fff8e9 0%,#fffdf8 100%);
}
.sn-section-info { background:#eef9fb; }
.sn-eyebrow { color:#078aa5; }
.sn-title,
.sn-recommend-head h2 {
  margin:0 0 13px;
  color:#12445d;
  font-size:1.82rem;
  line-height:1.4;
}
.sn-lead {
  max-width:800px;
  margin:0 0 28px;
  color:#536f80;
  line-height:1.9;
}

/* recommendation */
.sn-recommend-head { margin-bottom:26px; }
.sn-recommend-badge {
  display:inline-block;
  margin-bottom:12px;
  padding:7px 13px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(90deg,#ef7c25,#f49d35);
  font-size:.8rem;
  font-weight:900;
  box-shadow:0 6px 16px rgba(203,95,16,.16);
}
.sn-featured-card {
  display:grid;
  grid-template-columns:1.18fr .82fr;
  overflow:hidden;
  border:2px solid #f2a34b;
  border-radius:16px;
  background:#fff;
  box-shadow:0 14px 32px rgba(13,92,112,.12);
}
.sn-featured-image { position:relative; min-height:360px; }
.sn-featured-image img {
  width:100%;
  height:100%;
  min-height:360px;
  object-fit:cover;
}
.sn-image-label {
  position:absolute;
  left:16px; bottom:16px;
  padding:7px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(3,82,105,.82);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
}
.sn-featured-body { padding:31px 27px; }
.sn-price-line {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:18px;
}
.sn-price {
  color:#e96610;
  font-size:2.15rem;
  font-weight:900;
  line-height:1;
}
.sn-price small { font-size:.82rem; color:#5d7381; }
.sn-price-small { font-size:1.9rem; }
.sn-daily {
  padding:5px 10px;
  border-radius:999px;
  color:#08728c;
  background:#e7f7f8;
  font-size:.78rem;
  font-weight:800;
}
.sn-check-list {
  margin:0 0 18px;
  padding:0;
  list-style:none;
}
.sn-check-list li {
  position:relative;
  margin:0 0 9px;
  padding-left:24px;
  color:#405f72;
  line-height:1.55;
}
.sn-check-list li::before {
  content:"✦";
  position:absolute;
  left:0;
  color:#2eb3c2;
}
.sn-note {
  margin:0 0 19px;
  padding:12px 14px;
  border-left:4px solid #f0a23d;
  background:#fff8e9;
  color:#72572f;
  font-size:.86rem;
  line-height:1.65;
}
.sn-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.sn-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;
}
.sn-btn:hover { opacity:.92; transform:translateY(-1px); }
.sn-btn-primary {
  color:#fff !important;
  background:linear-gradient(90deg,#087d9c,#09a0b3);
  box-shadow:0 7px 18px rgba(5,107,132,.18);
}
.sn-btn-secondary {
  color:#fff !important;
  background:linear-gradient(90deg,#ef7c25,#f49d35);
}
.sn-btn-secondary-dark {
  color:#0a7089 !important;
  border:1px solid #afdbe2;
  background:#fff;
}

/* recommendation reasons */
.sn-reason-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}
.sn-reason {
  position:relative;
  overflow:hidden;
  padding:21px 16px 18px;
  border:1px solid #cfe7e9;
  border-radius:11px;
  background:linear-gradient(180deg,#fff 0%,#effbfc 72%,#fff9ec 100%);
  text-align:center;
}
.sn-reason > span {
  display:block;
  margin-bottom:7px;
  color:#f1a03b;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.6rem;
}
.sn-reason:nth-child(2) > span { color:#2bb0c1; font-size:1.9rem; }
.sn-reason strong { color:#096f8c; }
.sn-reason p {
  margin:7px 0 0;
  color:#647c89;
  font-size:.85rem;
  line-height:1.65;
}

/* secondary */
.sn-secondary-card {
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid #d4e6ea;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 25px rgba(23,83,105,.07);
}
.sn-secondary-image { min-height:300px; }
.sn-secondary-image img {
  width:100%;
  height:100%;
  min-height:300px;
  object-fit:cover;
}
.sn-secondary-body { padding:28px 26px; }
.sn-secondary-body p { color:#567181; line-height:1.8; }

/* compare */
.sn-compare-wrap {
  overflow-x:auto;
  border:1px solid #eadcb9;
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 22px rgba(110,87,44,.06);
}
.sn-compare-table {
  width:100%;
  min-width:610px;
  border-collapse:collapse;
}
.sn-compare-table th,
.sn-compare-table td {
  padding:16px 13px;
  border-bottom:1px solid #eee4cf;
  text-align:center;
}
.sn-compare-table thead th {
  color:#fff;
  background:#0a7892;
}
.sn-compare-table thead .sn-table-recommended {
  background:#ef862d;
}
.sn-compare-table tbody th {
  color:#31576a;
  background:#fbfaf5;
}
.sn-compare-table tbody tr:last-child th,
.sn-compare-table tbody tr:last-child td {
  border-bottom:0;
}
.sn-choice-box {
  margin-top:22px;
  padding:23px;
  border-radius:12px;
  background:#fff;
  text-align:center;
}
.sn-choice-box h3 {
  margin:0 0 8px;
  color:#0a728d;
}
.sn-choice-box p {
  max-width:720px;
  margin:0 auto 17px;
  color:#607786;
  line-height:1.8;
}

/* info */
.sn-info-link {
  display:inline-block;
  color:#087b99;
  font-weight:800;
  text-decoration:none;
}

/* CTA */
.sn-cta {
  position:relative;
  overflow:hidden;
  padding:46px 30px;
  color:#fff;
  background:
    radial-gradient(circle at 87% 15%,rgba(255,190,75,.29) 0%,rgba(255,190,75,0) 25%),
    linear-gradient(135deg,#075a78,#087f96);
  text-align:center;
}
.sn-cta::after {
  content:"";
  position:absolute;
  left:-5%; right:-5%; bottom:-11px;
  height:29px;
  opacity:.35;
  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;
}
.sn-cta > * { position:relative; z-index:1; }
.sn-cta-symbols {
  margin-bottom:8px;
  color:#ffd17b;
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.16em;
}
.sn-cta h2 {
  margin:0 0 10px;
  color:#fff;
  font-size:1.55rem;
}
.sn-cta p {
  max-width:720px;
  margin:0 auto 20px;
  color:rgba(255,255,255,.9);
  line-height:1.8;
}
.sn-btn-light {
  color:#07647d !important;
  background:#fff;
}

/* mobile */
@media only screen and (max-width:760px) {
  .sn-hero { padding:42px 20px 40px; }
  .sn-hero h1 { font-size:1.82rem; }
  .sn-quick-nav { grid-template-columns:repeat(2,1fr); }
  .sn-section { padding:38px 18px; }
  .sn-title,.sn-recommend-head h2 { font-size:1.48rem; }
  .sn-featured-card,
  .sn-secondary-card { grid-template-columns:1fr; }
  .sn-featured-image,
  .sn-featured-image img { min-height:230px; }
  .sn-secondary-image,
  .sn-secondary-image img { min-height:220px; }
  .sn-featured-body,
  .sn-secondary-body { padding:23px 19px; }
  .sn-reason-grid { grid-template-columns:1fr; }
  .sn-actions .sn-btn { width:100%; }
  .sn-cta { padding:38px 20px; }
  .sn-cta h2 { font-size:1.35rem; }
}