:root {
  --blue: #0035bb;
  --yellow: #fff692;
  --gray: #eaeaea;
  --blue-light: #eef7ff;
  --orange-light: #ffe1ba;
  --orange: #ff543e;
  --blue-clear: #83b7ff;
}

.text-orange {
  color: var(--orange);
}

.text-yellow {
  color: var(--yellow);
}

.text-blue {
  color: var(--blue);
}

.bg-orange-light {
  background-color: var(--orange-light);
}

.bg-blue-clear {
  background-color: var(--blue-clear);
}

a {
  color: var(--blue);
}

p:last-child {
  margin-bottom: 0;
}

footer {
  background-color: var(--blue);
  color: white;
  padding: 20px 0;
}

.icon-tel {
  background: url("../img/common/icon-tel.png")
    left center no-repeat;
  background-size: 32px 32px;
  padding-left: 42px;
  font-size: 22px;
  font-weight: bold;
}

h1 {
  font-size: 30px;
}

.container {
  max-width: 1140px;
}

.container-sm {
  max-width: 960px;
}

.intro-bg {
  background: url("../img/index/intro-bg.jpg") center top no-repeat;
  background-size: cover;
}

.mw-500 {
  max-width: 500px;
}

.mw-340 {
  max-width: 340px;
}

.mb-100 {
  margin-bottom: 100px;
}

@media (max-width: 767.98px) {
  .mb-100 {
    margin-bottom: 50px;
  }
}

.intro-space {
  padding-left: 110px;
}

.intro-recruit-head {
  background: url("../img/index/intro-recruit-head.png")
    center center no-repeat;
  background-size: 300px 50px;
  font-size: 20px;
  color: white;
  padding-top: 0.5em;
  text-align: center;
  width: 300px;
  height: 50px;
  display: inline-block;
}

.intro-recruit-btn {
  background-color: var(--yellow);
  border-radius: 50px;
  border: 1px solid var(--blue);
  padding: 5px 40px;
  text-align: center;
  font-size: 20px;
  display: inline-block;

  a {
    text-decoration: none;
    color: black;
  }
}

.intro-txt {
  background-color: rgba(0, 53, 187, 0.8);
  color: white;
  max-width: 360px;
  padding: 0 30px;
  height: 100%;
}

.intro-record-btn {
  background: url("../img/index/intro-record-btn.png")
    left center no-repeat;
  background-size: 95px 61px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
  padding-left: 95px;
  min-height: 61px;
  min-width: 250px;
  font-size: 22px;
  color: black;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-voice-btn {
  background: url("../img/index/intro-voice-btn.png")
    left center no-repeat;
  background-size: 95px 61px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.15);
  padding-left: 95px;
  min-height: 61px;
  min-width: 250px;
  font-size: 22px;
  color: black;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-course-btn {
  display: inline-block;
  min-height: 61px;
  min-width: 250px;
  font-size: 22px;
  background-color: var(--blue);
  border-radius: 5px;
  color: white;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 30px;
  font-size: 19px;
}

.intro-child-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 5px 30px;
  margin-left: 30px;
  border: 1px solid var(--blue);
  font-size: 19px;
}

.news-bg {
  background-color: var(--gray);
  min-height: 440px;
}

.news-left {
  background-color: white;
  border: 1px solid var(--blue);
  border-radius: 5px;
  padding: 1em 1em 2em;
  margin: -10px 0;
}

.news-left-container {
  overflow-y: auto;
  max-width: 800px;
  height: 460px;
  padding: 1em;
}

.has-background {
  padding: 0 10px !important;
}

.has-light-gray-background-color {
  background-color: #e6e6e6;
  padding: 0 10px;
}

.has-light-yellow-background-color {
  background-color: #fff3b0;
  padding: 0 10px;
}

.has-light-blue-background-color {
  background-color: #b6d6ee;
  padding: 0 10px;
}

.has-light-green-background-color {
  background-color: #bfe3b3;
  padding: 0 10px;
}

.has-light-pink-background-color {
  background-color: #f2caca;
  padding: 0 10px;
}

.has-deep-gray-background-color {
  background-color: #d1d1d1;
  padding: 0 10px;
}

.has-deep-yellow-background-color {
  background-color: #ffe08a;
  padding: 0 10px;
}

.has-deep-blue-background-color {
  background-color: #b7d6f2;
  padding: 0 10px;
}

.has-deep-green-background-color {
  background-color: #bfe3b8;
  padding: 0 10px;
}

.has-deep-pink-background-color {
  background-color: #f6c1c1;
  padding: 0 10px;
}

.has-light-gray-color {
  color: #555555;
}

.has-light-yellow-color {
  color: #5a4b00;
}

.has-light-blue-color {
  color: #1f4e79;
}

.has-light-green-color {
  color: #1f5c2e;
}

.has-light-pink-color {
  color: #7a2e2e;
}

.has-deep-gray-color {
  color: #333333;
}

.has-deep-yellow-color {
  color: #4d3b00;
}

.has-deep-blue-color {
  color: #123b63;
}

.has-deep-green-color {
  color: #1c4a28;
}

.has-deep-pink-color {
  color: #5a1f1f;
}

.has-delete-color {
  color: inherit;
}

.has-delete-background-color {
  background-color: transparent;
}

#lecturer {
  background-color: var(--blue-light);
  padding: 60px 0;
}

#trial {
  background: url("../img/index/trial-bg.jpg")
    center center no-repeat;
  background-size: cover;
  padding: 100px 0;
}

@media (max-width: 767.98px) {
  #trial {
    background: url("../img/index/trial-bg-sp.jpg")
      center center no-repeat;
    background-size: cover;
    padding: 240px 0 30px;
  }
}

.trial-txt {
  color: white;
  width: 416px;
  line-height: 1.2;
  padding: 10px;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  background-color: #0035bb;
  border-radius: 10px;

  &::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid #0035bb;
  }
}

@media (max-width: 767.98px) {
  .trial-txt {
    width: 329px;
    padding: 15px 40px;
    line-height: 1.6;
    &::after {
      bottom: -20px;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      border-top: 20px solid #0035bb;
    }
  }
}

.btn-blue {
  background-color: var(--blue);
  border-radius: 50px;
  padding: 5px 30px;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.policy-card {
  border: 1px solid var(--blue);
  padding: 30px;
  height: 100%;
}

@media (max-width: 767.98px) {
  .policy-card {
    border: none;
    padding: 0;
    height: auto;
  }
}

.policy-title {
  cursor: default;
  pointer-events: none;
  margin-bottom: 24px;
}

@media (max-width: 767.98px) {
  .policy-title {
    border: 1px solid var(--blue);
    padding: 15px;
    cursor: pointer;
    line-height: 1;
    pointer-events: all;
    position: relative;
    margin-bottom: 0;

    &::after {
      content: ">";
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.2rem;
      line-height: 1;
      margin-bottom: 24px;
      transition:
        transform 0.2s ease,
        content 0.2s ease;
    }

    &:not(.collapsed) {
      margin-bottom: 24px;

      &::after {
        content: "×";
      }
    }
  }
}

/* =========================
   共通リセット
========================= */
.global-nav ul,
.global-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-nav a {
  text-decoration: none;
  color: #000;
}

/* =========================
   PC表示（768px以上）
========================= */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }

  .global-nav {
    display: block;
  }

  #globalnavi {
    display: flex;
    gap: 24px;
  }

  #globalnavi > li > a {
    padding: 0;
  }

  /* サブメニュー */
  .sub-menu {
    display: none;
    position: absolute;
    background: white;
    padding: 8px 0;
  }

  .has-children:hover > .sub-menu {
    display: block;
  }

  .sub-menu a {
    display: block;
    padding: 6px 16px;
  }

  .sub-menu li {
    border: 1px solid var(--gray);
    border-top: none;

    &:first-child {
      border-top: 1px solid var(--gray);
    }
  }
}

/* =========================
   スマホ表示（767px以下）
========================= */
@media (max-width: 767.98px) {
  /* ハンバーガーボタン */
  .menu-toggle {
    display: flex;
    width: 36px;
    height: 28px;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
  }

  .menu-toggle span {
    height: 3px;
    background: #777;
    display: block;
  }

  /* メニュー本体 */
  .global-nav {
    display: none;
    margin-top: 12px;
  }

  .global-nav.is-open {
    display: block;
  }

  #globalnavi {
    border-top: 1px solid #ccc;
  }

  #globalnavi > li > a {
    display: block;
    padding: 12px 8px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    color: #333;
  }

  /* サブメニュー */
  .sub-menu {
    display: none;
    background: #f5f5f5;
  }

  .sub-menu.is-open {
    display: block;
  }

  .sub-menu a {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    color: #555;
  }
}