* {
  box-sizing: border-box;
}

/* ==============================
   バナー本体
============================== */

.school-banner {
  position: relative;

  width: 100%;
  max-width: 1000px;
  height: 100px;

  margin: 0 auto;
  padding: 0.8rem 1.9rem;

  overflow: hidden;

  border-radius: 20px;

  background:
    linear-gradient(
      120deg,
      #32b7c7 0%,
      #39c99b 48%,
      #91d957 100%
    );

  box-shadow:
    0 10px 25px rgba(30, 80, 100, 0.16);

  color: white;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1.5rem;
}


/* ==============================
   背景装飾
============================== */

.school-banner::before {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  right: -55px;
  top: -95px;

  border-radius: 50%;

  background: rgba(255,255,255,0.16);
}

.school-banner::after {
  content: "";

  position: absolute;

  width: 120px;
  height: 120px;

  right: 180px;
  bottom: -90px;

  border-radius: 50%;

  background: rgba(255,255,255,0.12);
}


/* 小さい丸 */

.circle {
  position: absolute;

  border-radius: 50%;

  background: rgba(255,255,255,0.28);
}

.circle1 {
  width: 13px;
  height: 13px;

  top: 13px;
  right: 260px;
}

.circle2 {
  width: 7px;
  height: 7px;

  top: 34px;
  right: 225px;
}


/* ==============================
   タイトル部分
============================== */

.banner-content {
  position: relative;
  z-index: 2;

  min-width: 0;
}


/* 英字ラベル */

.banner-label {
  display: inline-block;

  margin-bottom: 0.2rem;
  padding: 0.15rem 0.65rem;

  border-radius: 999px;

  background: white;
  color: #16828e;

  font-size: clamp(0.48rem, 1.1vw, 0.65rem);
  font-weight: 700;

  letter-spacing: 0.1em;
}


/* メインタイトル */

.school-banner h1 {
  margin: 0;

  font-size: clamp(1.15rem, 3vw, 1.9rem);

  line-height: 1.15;

  font-weight: 800;
  letter-spacing: 0.02em;

  white-space: nowrap;
}


/* 黄色マーカー */

.school-banner h1 span {
  position: relative;
  z-index: 1;

  display: inline-block;
}

.school-banner h1 span::after {
  content: "";

  position: absolute;

  left: -0.1em;
  right: -0.1em;
  bottom: 0.05em;

  height: 0.28em;

  background: #ffe66d;

  border-radius: 0.2em;

  z-index: -1;
}


/* ==============================
   ボタン
============================== */

.banner-button {
  position: relative;
  z-index: 2;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0.4em;

  padding: 0.7em 1.3em;

  border-radius: 0.8em;

  background: white;
  color: #16828e;

  text-decoration: none;

  font-size: clamp(0.72rem, 1.5vw, 0.9rem);
  font-weight: 700;

  white-space: nowrap;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.12);

  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.banner-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 7px 16px rgba(0,0,0,0.17);
}


/* ==============================
   タブレット
============================== */

@media (max-width: 800px) {

  .school-banner {
    padding-left: 1.3rem;
    padding-right: 1.3rem;

    gap: 1rem;
  }

}


/* ==============================
   スマートフォン
============================== */

@media (max-width: 600px) {

  .school-banner {
    height: auto;
    min-height: 120px;

    padding: 1rem 1.2rem;

    border-radius: 17px;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    gap: 0.7rem;
  }

  .school-banner h1 {
    font-size: clamp(1.1rem, 6vw, 1.55rem);

    line-height: 1.25;

    white-space: normal;
  }

  .school-banner h1 span {
    display: inline;
  }

  .banner-label {
    font-size: clamp(0.45rem, 2.5vw, 0.6rem);
  }

  .banner-button {
    font-size: clamp(0.72rem, 3.5vw, 0.88rem);
  }

  .school-banner::before {
    width: 150px;
    height: 150px;

    right: -65px;
    top: -65px;
  }

  .school-banner::after {
    right: 30px;
    bottom: -100px;
  }

  .circle1 {
    right: 90px;
  }

  .circle2 {
    right: 65px;
  }
}


/* ==============================
   小さいスマートフォン
============================== */

@media (max-width: 380px) {

  .school-banner {
    padding: 0.9rem 1rem;
  }

  .banner-button {
    width: 100%;
  }

}