/* =========================================================
   ライセンス取得カテゴリートップ専用
   南国・海・砂浜をイメージしたデザイン
   ========================================================= */

.course-hub {
  --course-deep: #07506d;
  --course-ocean: #0788a9;
  --course-turquoise: #38bfd0;
  --course-aqua: #edfafa;
  --course-sand: #fff7e6;
  --course-sunset: #f28a31;
  color: #17384d;
  background: #f6fbfc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.course-hub * {
  box-sizing: border-box;
}
.course-hub a {
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Hero */
.course-hero {
  position: relative;
  overflow: hidden;
  padding: 58px 40px 54px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 14%, rgba(255,211,106,.38) 0, rgba(255,211,106,0) 25%),
    linear-gradient(135deg, #07536f 0%, #078ba5 58%, #39bac8 100%);
}
.course-hero::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -11px;
  height: 34px;
  opacity: .45;
  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;
}
.course-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
}
.course-kicker,
.course-eyebrow {
  margin: 0 0 8px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .15em;
}
.course-kicker {
  color: #c9f4f5;
}
.course-hero h1 {
  margin: 0 0 15px;
  color: #fff;
  font-size: 2.3rem;
  line-height: 1.35;
  text-shadow: 0 2px 12px rgba(0,46,62,.18);
}
.course-hero-lead {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.94);
  font-size: 1rem;
  line-height: 1.9;
}
.course-hero-symbols {
  margin-top: 20px;
  color: #ffe09a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  letter-spacing: .18em;
}

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

/* common section */
.course-section {
  padding: 50px 34px;
}
.course-section-white {
  background: #fff;
}
.course-section-aqua {
  background:
    linear-gradient(180deg, #edfafa 0%, #f7fcfc 70%, #fff9ed 100%);
}
.course-section-sand {
  background:
    linear-gradient(180deg, #fff9ec 0%, #fffdf8 100%);
}
.course-section-inner {
  max-width: 920px;
  margin: 0 auto;
}
.course-eyebrow {
  color: #078ba5;
}
.course-title {
  margin: 0 0 13px;
  color: #12435d;
  font-size: 1.8rem;
  line-height: 1.4;
}
.course-lead,
.course-copy p {
  color: #526f80;
  line-height: 1.9;
}
.course-lead {
  max-width: 780px;
  margin: 0 0 28px;
}
.course-copy {
  max-width: 830px;
}
.course-copy p {
  margin: 0 0 16px;
}

/* tropical features */
.course-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 28px;
}
.course-feature {
  position: relative;
  overflow: hidden;
  min-height: 145px;
  padding: 22px 15px;
  border: 1px solid #cfe8ea;
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fff 0%, #eefbfc 75%, #fff8e9 100%);
  text-align: center;
  box-shadow: 0 8px 22px rgba(21,95,112,.06);
}
.course-feature::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -13px;
  height: 29px;
  opacity: .5;
  background:
    radial-gradient(22px 11px at 22px 0,
      transparent 20px,
      rgba(51,183,199,.18) 21px,
      rgba(51,183,199,.18) 23px,
      transparent 24px)
    0 0 / 44px 27px repeat-x;
}
.course-feature-icon {
  display: block;
  margin-bottom: 8px;
  color: #f3a23c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.8rem;
}
.course-feature-icon.course-wave {
  color: #2cb0c3;
  font-size: 2.05rem;
}
.course-feature strong {
  display: block;
  margin-bottom: 6px;
  color: #096f8e;
}
.course-feature span:last-child {
  display: block;
  color: #667d8b;
  font-size: .84rem;
  line-height: 1.6;
}

/* Cards */
.course-card-grid {
  display: grid;
  gap: 18px;
}
.course-card-grid-2 {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.course-card-grid-stepup {
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.course-card {
  padding: 27px 25px;
  border: 1px solid #d2e5ea;
  border-radius: 13px;
  background:
    linear-gradient(180deg, #fff 0%, #fff 74%, #fffaf0 100%);
  box-shadow: 0 10px 25px rgba(22,83,107,.07);
}
.course-card-recommended {
  border-top: 4px solid #f28a31;
}
.course-card h3 {
  margin: 0 0 10px;
  color: #12435d;
  font-size: 1.25rem;
}
.course-card p,
.course-card li {
  color: #597283;
  line-height: 1.75;
}
.course-card ul {
  margin: 14px 0 18px;
  padding-left: 1.2em;
}
.course-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #086d89;
  background: #e5f7f8;
  font-size: .76rem;
  font-weight: 800;
}
.course-badge-orange {
  color: #fff;
  background: #f28a31;
}
.course-card-symbol {
  display: block;
  margin-bottom: 8px;
  color: #29abc0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
}
.course-text-link {
  color: #087e9d;
  font-weight: 800;
  text-decoration: none;
}

/* Buttons */
.course-btn {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-radius: 8px;
  color: #fff !important;
  background: linear-gradient(90deg, #087f9e, #08a0b4);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 7px 18px rgba(4,103,130,.18);
}
.course-btn-orange {
  background: linear-gradient(90deg, #ef7d25, #f49d35);
}
.course-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}

/* Comparison table */
.course-table-wrap {
  overflow-x: auto;
  border: 1px solid #eadbb9;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(110,87,44,.06);
}
.course-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 570px;
}
.course-table th,
.course-table td {
  padding: 16px 14px;
  border-bottom: 1px solid #eee4cd;
  text-align: center;
}
.course-table th {
  color: #fff;
  background: #0a7893;
  font-weight: 800;
}
.course-table tbody tr:last-child td {
  border-bottom: 0;
}
.course-table a {
  color: #087d9d;
  font-weight: 800;
}
.course-info-box {
  margin-top: 22px;
  padding: 20px 22px;
  border-left: 4px solid #f1a13b;
  border-radius: 0 9px 9px 0;
  background: #fff;
}
.course-info-box strong {
  display: block;
  margin-bottom: 6px;
  color: #90571a;
}
.course-info-box p {
  margin: 0;
  color: #6b6457;
  line-height: 1.8;
}

/* Path */
.course-path {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 28px;
}
.course-path-item {
  padding: 20px 13px;
  border: 1px solid #cce5e8;
  border-radius: 11px;
  background: #fff;
  text-align: center;
}
.course-path-item > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border-radius: 50%;
  color: #fff;
  background: #13a0b3;
  font-size: .76rem;
  font-weight: 800;
}
.course-path-item strong {
  display: block;
  color: #0b6f89;
}
.course-path-item p {
  margin: 7px 0 0;
  color: #657c89;
  font-size: .82rem;
  line-height: 1.6;
}
.course-path-arrow {
  align-self: center;
  color: #31b2c2;
  font-size: 2rem;
}
.course-pro-cta {
  margin-top: 24px;
  padding: 25px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #07536f, #087d94);
  text-align: center;
}
.course-pro-cta h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 1.3rem;
}
.course-pro-cta p {
  margin: 0 0 16px;
  color: rgba(255,255,255,.9);
  line-height: 1.75;
}

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

/* Mobile */
@media only screen and (max-width: 760px) {
  .course-hero {
    padding: 42px 20px 40px;
  }
  .course-hero h1 {
    font-size: 1.82rem;
  }
  .course-quick-nav {
    grid-template-columns: repeat(2, 1fr);
  }
  .course-section {
    padding: 38px 18px;
  }
  .course-title {
    font-size: 1.48rem;
  }
  .course-feature-grid,
  .course-card-grid-2,
  .course-card-grid-stepup {
    grid-template-columns: 1fr;
  }
  .course-feature {
    min-height: 0;
  }
  .course-card {
    padding: 23px 19px;
  }
  .course-path {
    grid-template-columns: 1fr;
  }
  .course-path-arrow {
    transform: rotate(90deg);
    justify-self: center;
    line-height: .7;
  }
  .course-cta {
    padding: 38px 20px;
  }
  .course-cta h2 {
    font-size: 1.35rem;
  }
}