@charset "UTF-8";
/*
  高校別 定期テスト対策LP（/high/case/ ※URLは仮）専用スタイル
  ポイント・3つの理由・口コミ・校舎検索・FAQ は top.css の既存スタイルをそのまま使い、
  ここではこのLP固有のパーツ（hc-*）と、既存パーツの微調整のみを定義する。
*/
.page-high-case {
  --hc-green: #00964b;
  --hc-green-dark: #006b35;
  --hc-pink: #fa1e7b;
  --hc-orange: #ea5504;
  --hc-yellow: #fff100;
  --hc-lemon: #fffccc;
}

.hc-section {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* SPのみ、main の左右余白を打ち消して画面幅いっぱいに広げるパーツ
   （PCは main の幅 max-width:1000px / padding:0 30px に収める） */
/* 成績UP実績のカルーセルは lp/osaka と同じくPCでも画面幅いっぱい */
.hc-result {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

@media screen and (max-width: 768px) {
  .hc-kv,
  .hc .price-banner,
  .hc-cta {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@media screen and (min-width: 769px) {
  .hc .price-banner {
    margin-left: 0;
    margin-right: 0;
  }

  /* 料金バナーの直下に成績UP実績の吹き出しが来るので、くっつかないようにあける（SPは料金バナー側の余白で20pxあく） */
  .hc-result {
    margin-top: 50px;
  }

  /* 口コミスライダーのページ送り（口コミ枠の20px下まで出る）から「校舎ごとの成績UPをご紹介中！」の吹き出しまでを60pxあける。
     口コミ枠の下 margin 60px − ページ送り 20px − 吹き出しの上はみ出し 27px（top-search.html の .pink-balloon）= 13px なので +47px */
  .hc-school {
    padding-top: 47px;
  }
}

/* SPのパンくずは common.css で下の要素に重ねる指定（margin-bottom: -60px）なので、リード文と重ならないよう戻す */
.page-high-case .breadcrumb {
  margin-bottom: 0;
}

/* FV上部のリード文 */
.hc-lead {
  margin: 0;
  padding: 4px 0 16px;
  /* SPは「〇〇高校の／定期テスト対策は、／森塾にお任せください！」の3行（.spbr で改行）。
     26pxは360px幅の端末でも「サレジアン国際学園高校の」が1行に収まるサイズ */
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* パンくずを非表示にしたので、その分の余白をリード文の上に持たせる。
   940px以下はヘッダーが固定表示（高さ75px）で main の上端（60px）より下まで重なるため多めにあける */
@media screen and (max-width: 940px) {
  .hc-lead {
    padding: 24px 0 8px;
    line-height: 1.3;
    font-feature-settings: "palt";
  }
}

@media screen and (min-width: 941px) {
  .hc-lead {
    padding-top: 30px;
  }
}

.hc-lead__school {
  color: var(--hc-pink);
  background: linear-gradient(transparent 62%, var(--hc-yellow) 62%);
}

.hc-lead__green {
  color: var(--hc-green);
}

.hc-lead__sm {
  font-size: 0.8em;
}

/* KV */
.hc-kv {
  background: var(--hc-green);
  text-align: center;
}

/* 料金バナー：lp/osaka と同じく top.css の青を緑に上書き */
.hc .price-banner {
  background-color: #2c6918;
  background-image: none;
}

.hc-kv .top-hero__link {
  display: block;
}

/* SP画像（750px）は中央寄せ、PC画像（2000x560）は画面幅いっぱい */
.hc-kv img {
  display: block;
  width: 100%;
  max-width: 750px;
  height: auto;
  margin: 0 auto;
}

@media screen and (min-width: 601px) {
  .hc-kv img {
    max-width: none;
  }
}

/* 高校名 */
.hc-intro {
  position: relative;
  max-width: 640px;
  margin: 15px auto 15px;
  padding: 10px 0;
}

.hc-intro::before,
.hc-intro::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  border: 3px solid var(--hc-green);
}

.hc-intro::before {
  left: 0;
  border-right: none;
}

.hc-intro::after {
  right: 0;
  border-left: none;
}

.hc-intro__text {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.hc-intro__school {
  color: var(--hc-green);
  font-size: 25px;
}

.hc-intro__green {
  color: var(--hc-green);
}

.hc-intro__marker {
  display: inline-block;
  padding: 0 6px;
  color: var(--hc-pink);
  font-size: 24px;
  background: linear-gradient(transparent 55%, var(--hc-yellow) 55%);
}

/* 成績UP実績：2段ループ（動き・写真サイズは common.css の .loopImage__* を使用） */
.hc-result__loop {
  padding-bottom: 4px;
}

/* 写真の下から直後のCTAまでを SP 30px／PC 50px あける。
   写真の下には .loopImage__section の margin-bottom（SP 8px／PC 12px）＋ 上の padding-bottom 4px がすでにあるので、その差分 */
.hc-result {
  margin-bottom: 18px;
}

@media screen and (min-width: 769px) {
  .hc-result {
    margin-bottom: 34px;
  }
}

/* 吹き出しは top.css の .pink-balloon。osaka は写真枠に重ねるため top:-27px だが、ここでは重ねない */
.hc-result .pink-balloon {
  top: 0;
  margin-bottom: 30px;
}

/* 長い高校名のとき「成績アップ」の途中で改行されないように */
.hc-result .pink-balloon span {
  white-space: nowrap;
}

/* footerSchool 直上の写真ループ：直前のCTAの下マージンと二重にならないよう、common.css の上マージン（SP 50px／PC 80px）を打ち消す */
.page-high-case .loopImage {
  margin-top: 0;
}


/* よくあるご質問の最後の質問枠から直後のCTAまでを SP 40px／PC 50px あける。
   common.css の .faq-content の margin-bottom などで既に20pxあいているので、その差分。
   margin だと最後の .faq-content の margin-bottom と相殺されるので padding であける */
.hc .faq {
  padding-bottom: 20px;
}

@media screen and (min-width: 769px) {
  .hc .faq {
    padding-bottom: 30px;
  }
}

/* CTA（無料体験＋保護者さんに共有） */
.hc-cta {
  margin-bottom: 30px;
  padding: 30px 20px;
  background: var(--hc-lemon);
}

.hc-cta__lead {
  margin: 0 0 12px;
  color: var(--hc-orange);
  font-weight: 700;
  text-align: center;
  font-size: 1.8rem;
}

.hc-cta__lead::before {
  content: "＼ ";
}

.hc-cta__lead::after {
  content: " ／";
}

.hc-cta__btn {
  position: relative;
  display: block;
  max-width: 500px;
  margin: 0 auto 24px;
  padding: 18px 40px;
  background: var(--hc-orange);
  color: #fff !important;
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none !important;
  transition: opacity 0.2s;
  border-radius: 5px;
}

.hc-cta__btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
}

.hc-cta__btn:hover {
  opacity: 0.8;
}

.hc-share {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 327px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.hc-share__item {
  margin: 0;
}

.hc-share__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 4px 12px;
  border: 1px solid #333;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 0 var(--hc-green-dark);
  color: #333 !important;
  font: inherit;
  font-size: 14px;
  text-decoration: none !important;
  cursor: pointer;
}

/* アイコンは縦横比がまちまちなので、48px四方の枠に比率を保って収める */
.hc-share__link img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.hc-share__link:active {
  box-shadow: none;
  transform: translateY(3px);
}

/* ページ内リンク */
.hc-anchor {
  max-width: 640px;
  margin: 0 auto 24px;
}

.hc-anchor__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hc-anchor__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 65px;
  padding: 0 2px 16px;
  position: relative;
  border: 2px solid var(--hc-green);
  border-radius: 6px;
  color: var(--hc-green) !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
}

.hc-anchor__link::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--hc-green);
  border-bottom: 2px solid var(--hc-green);
  transform: translateX(-50%) rotate(45deg);
}

/* 高校に対応した定期テスト対策 */
.hc-test {
  max-width: 640px;
  margin: 70px auto 40px;
  border: 2px solid var(--hc-green);
}

/* lp/osaka の「各校舎の地域に対応した入試対策！」と同じく、吹き出しをボックスの上辺に重ねる */
.hc-test__title {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 40px);
  margin: -40px auto 24px;
  padding: 12px 30px;
  border-radius: 60px;
  background: var(--hc-green);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

/* ページ内リンク（#hc-test）で飛んだとき、枠の上にはみ出した吹き出しが固定ヘッダーに隠れないよう、
   common.css の :target（PC 145px／SP 80px）に吹き出しのはみ出し分＋余白 60px を足す */
.hc-test:target {
  scroll-margin-top: 205px;
}

@media screen and (max-width: 940px) {
  .hc-test:target {
    scroll-margin-top: 140px;
  }
}

.hc-test__school {
  color: #ff0;
}

.hc-test__title::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top-color: var(--hc-green);
}

.hc-test__body {
  padding: 0px 2em 2em;
}

.hc-test__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 20px;
}

.hc-test__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* 本文中の高校名だけ黄色マーカー */
.hc-test__marker {
  background: linear-gradient(transparent 70%, rgb(255, 246, 0) 70%);
}

/* PCは lp/osaka の「各校舎の地域に対応した入試対策！」と同じく、メイン幅いっぱいの枠に画像（左）と文章（右）を横並び */
@media screen and (min-width: 769px) {
  .hc-test {
    max-width: none;
  }

  .hc-test__body {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 40px 40px;
  }

  .hc-test__image {
    flex-shrink: 0;
    width: 42%;
    margin: 0;
  }

  .hc-test__text {
    font-size: 16px;
    line-height: 2;
  }
  .hc-anchor__list {
    gap: 15px;
  }
  .hc-anchor__link {
    border: 3px solid var(--hc-green);
    font-size: 16px;
  }
  .hc-cta {
    margin-bottom: 60px;
  }
}

/* 成績UP実績の吹き出し（SP）。校舎検索の吹き出しは TOP と同じ見た目にするため対象外 */
@media screen and (max-width: 768px) {
    .hc-result .pink-balloon {
        border-radius: 60px;
        padding: 13px 45px;
        min-width: 260px;
    }
    .hc-result .pink-balloon p {
        line-height: 1.1;
    }
}

@media (min-width: 941px) {
  .hc-intro__text {
    font-size: 24px;
  }

  .hc-intro__school,
  .hc-intro__marker {
    font-size: 30px;
  }

  .hc-lead {
    font-size: 30px;
  }

  .hc-test__title {
    font-size: 24px;
  }
  .hc-intro::before {
    left: 20px;
    border-right: none;
  }

.hc-intro::after {
    right: 20px;
    border-left: none;
  }
  .hc-intro {
    margin: 40px auto 60px;
  }
}