/* ===========================================================
   個別指導塾 Leaf  -  style.css
=========================================================== */
:root{
  --green:        #6cbf2c;
  --green-dark:   #539e1b;
  --green-deep:   #4b9b22;
  --green-light:  #eef8e0;
  --green-band:   #6bbe2e;
  --pink:         #ef8ba0;
  --pink-deep:    #e96e88;
  --pink-bg:      #f4b9c4;
  --blue:         #7f93e6;
  --blue-deep:    #5d72d6;
  --blue-bg:      #a9b6ee;
  --red:          #ef6e6e;
  --text:         #4a4a4a;
  --gray:         #f4f6f1;
  --radius:       10px;
  --shadow:       0 6px 20px rgba(0,0,0,.08);
  --maxw:         1100px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:"Noto Sans JP","M PLUS Rounded 1c",sans-serif;
  color:var(--text);
  line-height:1.8;
  font-size:15px;
  background:#fff;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{ width:90%; max-width:var(--maxw); margin-inline:auto; }
.section{ padding:70px 0; }

/* ---- rounded display font for headings/buttons ---- */
.hero__title,.sec-title span,.fit__heading,.cta__title,.mission__title,
.btn-pill,.hero__btn,.cta__btn,.btn-doc{
  font-family:"M PLUS Rounded 1c","Noto Sans JP",sans-serif;
}

/* ===== Section title ===== */
.sec-title{
  text-align:center;
  font-size:1.7rem;
  font-weight:800;
  margin-bottom:42px;
  position:relative;
}
.sec-title span{ position:relative; display:inline-block; padding-bottom:14px; color:#3f3f3f; }
.sec-title span::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:60px; height:4px; border-radius:4px; background:var(--green);
}
.sec-title--white span{ color:#fff; }
.sec-title--white span::after{ background:#fff; }

/* ===== Pill buttons ===== */
.btn-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 46px; border-radius:999px; color:#fff; font-weight:700;
  position:relative; transition:.3s; box-shadow:0 4px 0 rgba(0,0,0,.12);
}
.btn-pill::after{ content:"›"; font-size:1.2em; line-height:1; }
.btn-pill:hover{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.12); }
.btn-pill--green{ background:var(--green); }
.btn-pill--pink{ background:var(--pink-deep); }
.btn-pill--blue{ background:var(--blue-deep); }

/* ===========================================================
   HEADER
=========================================================== */
.header{
  position:fixed; inset:0 0 auto 0; height:74px; z-index:100;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:height .3s;
}
.header__inner{
  height:100%; width:94%; max-width:1280px; margin-inline:auto;
  display:flex; align-items:center; gap:24px;
}
.header__logo img{ height:40px; }
.gnav{ margin-left:auto; }
.gnav__list{ display:flex; gap:24px; }
.gnav__list a{
  font-weight:700; font-size:.92rem; position:relative; padding:6px 2px;
  transition:color .25s;
}
.gnav__list a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--green); transition:width .3s;
}
.gnav__list a:hover{ color:var(--green-dark); }
.gnav__list a:hover::after{ width:100%; }

.header__cta{ display:flex; align-items:center; gap:12px; }
.header__tel{ display:flex; flex-direction:column; line-height:1.1; color:var(--green-dark); }
.header__tel-icon{ display:none; }
.header__tel-num{ font-size:1.25rem; font-weight:800; letter-spacing:.5px; }
.btn-doc{
  background:var(--green); color:#fff; font-weight:700; padding:12px 22px;
  border-radius:8px; transition:.3s; box-shadow:0 3px 0 var(--green-dark);
}
.btn-doc:hover{ transform:translateY(2px); box-shadow:0 1px 0 var(--green-dark); background:var(--green-dark); }

.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.hamburger span{ width:26px; height:3px; background:var(--green-dark); border-radius:3px; transition:.3s; }
.hamburger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ===========================================================
   HERO
=========================================================== */
.hero{
  position:relative; margin-top:74px;
  --hw:min(64vw,1000px);            /* 中央スライド幅（= top01.png 表示幅） */
  height:calc(var(--hw) / 1.911);   /* top01.png のアスペクト比 1160:607 */
  background:#fff; overflow:hidden;
}
.hero__viewport{ position:absolute; inset:0; overflow:hidden; }
.hero__track{
  display:flex; height:100%; will-change:transform;
  transition:transform .7s cubic-bezier(.45,0,.25,1);
}
.hero__slide{ flex:0 0 var(--hw); height:100%; position:relative; overflow:hidden; }
/* slide 1 : 完成済み合成画像を余白なくフル表示 */
.hero__slide--main{ background:#fff; }
.hero__img{ width:100%; height:100%; object-fit:contain; display:block; }
/* slide 2-3 : 余白を埋める写真（見切れOK） */
.hero__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }

.hero__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--green-dark); font-size:1.8rem;
  line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); transition:.25s;
}
.hero__arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.1); }
.hero__arrow--prev{ left:18px; }
.hero__arrow--next{ right:18px; }
.hero__dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:4; display:flex; gap:10px; }
.hero__dots button{
  width:11px; height:11px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.55); transition:.25s;
}
.hero__dots button.is-active{ background:#fff; transform:scale(1.25); }

/* ===========================================================
   NEWS
=========================================================== */
.news{ padding:34px 0; background:#fff; }
.news__inner{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.news__heading{
  font-size:1.05rem; font-weight:800; color:var(--green-dark);
  padding-right:22px; border-right:2px solid #e0e0e0; white-space:nowrap;
}
.news__list{ flex:1; min-width:260px; }
.news__item{ display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px dashed #e3e3e3; flex-wrap:wrap; }
.news__date{ color:#999; font-size:.86rem; font-weight:700; }
.news__tag{
  font-size:.72rem; font-weight:700; color:#fff; background:#9bbf6e;
  padding:2px 12px; border-radius:999px; white-space:nowrap;
}
.news__tag--important{ background:var(--red); }
.news__text{ font-size:.9rem; transition:color .2s; }
.news__text:hover{ color:var(--green-dark); text-decoration:underline; }
.news .btn-pill{ padding:10px 26px; font-size:.85rem; }

/* ===========================================================
   FEATURES
=========================================================== */
.features{ background:var(--green-light); background-image:url('../images/background00.png'); background-size:cover; }
.features__intro{
  background:#fff; border-radius:16px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:36px; padding:34px 44px; margin-bottom:46px;
  border:3px solid #fff; outline:2px solid var(--green); outline-offset:-10px;
}
.features__intro-img{ flex:0 0 240px; }
.features__intro-lead{ font-size:1.6rem; font-weight:800; color:var(--green-dark); line-height:1.5; margin-bottom:10px; }
.features__intro-lead strong{ color:#ff7c2b; font-size:1.9rem; }
.features__intro-note{ font-size:.95rem; }

.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.card{
  background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
  transition:transform .3s, box-shadow .3s;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 14px 28px rgba(0,0,0,.13); }
.card__photo{ aspect-ratio:3/2; overflow:hidden; }
.card__photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.card:hover .card__photo img{ transform:scale(1.08); }
.card__label{
  color:#fff; font-weight:700; font-size:1.02rem; padding:11px 16px; position:relative;
}
.card__label--red{ background:var(--red); }
.card__label--green{ background:var(--green); }
.card__label--blue{ background:var(--blue); }
.card__text{ padding:14px 18px 22px; font-size:.9rem; }

.features__more{ text-align:center; margin-top:46px; }

/* ===========================================================
   GREEN NAV BAND
=========================================================== */
.navband{ background:var(--green-band); padding:46px 0; }
.navband__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.navband__btn{
  background:#fff; border-radius:10px; padding:22px 18px;
  display:flex; align-items:center; gap:12px; font-weight:700; color:#3f3f3f;
  box-shadow:0 4px 0 rgba(0,0,0,.12); transition:.3s; position:relative;
}
.navband__btn img{ width:38px; height:38px; object-fit:contain; }
.navband__btn span{ flex:1; font-size:.95rem; }
.navband__arrow{
  width:24px; height:24px; border-radius:50%; background:var(--green);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-size:1.1rem; transition:.3s;
}
.navband__btn:hover{ transform:translateY(-5px); box-shadow:0 9px 16px rgba(0,0,0,.18); }
.navband__btn:hover .navband__arrow{ transform:translateX(3px); }

/* ===========================================================
   FIT
=========================================================== */
.fit__heading{
  text-align:center; font-size:1.45rem; font-weight:800; color:var(--green-dark);
  margin-bottom:40px;
}
.fit__list{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 40px; max-width:860px; margin-inline:auto; }
.fit__item{
  display:flex; align-items:center; gap:14px; padding:16px 10px;
  border-bottom:2px dotted #d7e7c4;
}
.fit__item img{ width:40px; height:40px; object-fit:contain; }
.fit__item span{ font-weight:700; font-size:.95rem; }

/* ===========================================================
   AREA
=========================================================== */
.area{ position:relative; background-size:cover; background-position:center; padding:54px 0; }
.area__overlay{ position:absolute; inset:0; background:linear-gradient(rgba(76,160,30,.86),rgba(60,140,25,.9)); }
.area__inner{ position:relative; z-index:2; text-align:center; }
.area__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-bottom:22px; }
.area__list a{
  display:block; background:#fff; color:var(--green-dark); font-weight:700;
  padding:8px 26px; border-radius:999px; transition:.25s; box-shadow:0 3px 0 rgba(0,0,0,.15);
}
.area__list a:hover{ background:#ffb400; color:#fff; transform:translateY(-3px); }
.area__note{ color:#fff; font-weight:700; }

/* ===========================================================
   CONTENT
=========================================================== */
.content{ background:#fff; background-image:url('../images/backgroundwb.png'); background-size:cover; }
.content__lead{ text-align:center; margin-bottom:44px; }
.content__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-bottom:50px; }
.ccard{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); transition:transform .3s; }
.ccard:hover{ transform:translateY(-8px); }
.ccard__photo{ aspect-ratio:16/10; overflow:hidden; }
.ccard__photo img{ width:100%; height:100%; object-fit:cover; transition:.6s; }
.ccard:hover .ccard__photo img{ transform:scale(1.07); }
.ccard__title{ color:#fff; text-align:center; font-weight:800; font-size:1.25rem; padding:12px; }
.ccard__title--green{ background:var(--green); }
.ccard__title--blue{ background:var(--blue); }
.ccard__title--red{ background:var(--red); }
.ccard__body{ padding:20px 22px 26px; }
.ccard__price{ font-weight:800; color:#ff7c2b; font-size:1.2rem; margin-bottom:8px; }
.ccard__text{ font-size:.9rem; }

.content__subjects{
  position:relative;
  background:var(--green); border-radius:18px; color:#fff;
  margin-top:90px;                 /* 女性が上にはみ出す分の余白 */
  padding:34px 340px 34px 48px;    /* 右側は女性のスペースとして確保 */
  overflow:visible;
}
.content__subjects-schools{ font-weight:700; font-size:1.06rem; line-height:1.95; }
.content__subjects-img{
  position:absolute; right:26px; bottom:0; width:360px; line-height:0;
  pointer-events:none;
}
.content__subjects-img img{
  width:100%; display:block;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
}

/* ===========================================================
   VOICE
=========================================================== */
.voice{ background-color:var(--pink-bg); background-image:url('../images/background01.png'); background-size:cover; }
.voice__list{ max-width:840px; margin-inline:auto; display:flex; flex-direction:column; gap:26px; }
.voice__item{ display:flex; align-items:flex-start; gap:18px; }
.voice__item--right{ flex-direction:row; justify-content:flex-end; }
.voice__icon{ flex:0 0 76px; }
.voice__icon img{ width:76px; height:76px; border-radius:50%; background:#fff; padding:4px; box-shadow:var(--shadow); }
.voice__bubble{
  background:#fff; border-radius:14px; padding:18px 24px; position:relative; max-width:560px;
  box-shadow:var(--shadow); font-size:.92rem;
}
.voice__name{ font-weight:800; color:var(--pink-deep); margin-bottom:4px; font-size:.86rem; }
.voice__item--left .voice__bubble::before{
  content:""; position:absolute; left:-14px; top:24px; border:8px solid transparent;
  border-right-color:#fff; border-left:0;
}
.voice__item--right .voice__bubble::after{
  content:""; position:absolute; right:-14px; top:24px; border:8px solid transparent;
  border-left-color:#fff; border-right:0;
}
.voice__more{ text-align:center; margin-top:40px; }

/* ===========================================================
   FAQ
=========================================================== */
.faq{ background-color:var(--blue-bg); background-image:url('../images/background02.png'); background-size:cover; }
.faq__list{ max-width:840px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
.faq__item{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
.faq__q{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; gap:14px; padding:18px 22px; font-weight:700;
  font-size:.96rem; font-family:inherit; color:var(--text);
}
.faq__mark{
  flex:0 0 30px; width:30px; height:30px; border-radius:6px; background:var(--blue-deep);
  color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.faq__mark--a{ background:var(--red); }
.faq__toggle{ margin-left:auto; color:var(--blue-deep); font-size:.8rem; font-style:normal; transition:transform .3s; }
.faq__item.is-open .faq__toggle{ transform:rotate(180deg); }
.faq__a{
  display:flex; gap:14px; align-items:flex-start; padding:0 22px;
  max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease;
  background:#f6f8ff; font-size:.92rem;
}
.faq__item.is-open .faq__a{ max-height:300px; padding:18px 22px; }
.faq__more{ text-align:center; margin-top:36px; }

/* ===========================================================
   CTA
=========================================================== */
.cta{ background-size:cover; background-position:center; padding:60px 0; position:relative; }
.cta__inner{ display:flex; align-items:center; justify-content:center; gap:30px; }
.cta__text{
  background:rgba(255,255,255,.92); border-radius:18px; padding:36px 44px;
  box-shadow:var(--shadow); max-width:620px; text-align:center;
}
.cta__title{ font-size:1.9rem; font-weight:800; color:var(--green-dark); margin-bottom:14px; }
.cta__lead{ font-size:.95rem; margin-bottom:24px; }
.cta__btn{
  display:inline-block; background:#ffb400; color:#fff; font-weight:800; font-size:1.1rem;
  padding:16px 44px; border-radius:999px; box-shadow:0 5px 0 #d99700; transition:.3s;
}
.cta__btn:hover{ transform:translateY(2px); box-shadow:0 3px 0 #d99700; background:#ffa600; }
.cta__img img{ width:210px; animation:floaty 3.5s ease-in-out infinite; }

/* ===========================================================
   INFO  (blog + follow)
=========================================================== */
.info__grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:48px; }
.info__heading{
  font-size:1.3rem; font-weight:800; color:var(--green-dark); margin-bottom:22px;
  padding-bottom:10px; border-bottom:2px solid var(--green-light); position:relative;
}
.info__heading::after{ content:""; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--green); }
.blog__list{ display:flex; flex-direction:column; }
.blog__item a{ display:flex; gap:18px; padding:16px 0; border-bottom:1px dashed #e0e0e0; align-items:center; transition:.2s; }
.blog__item a:hover{ background:#fafbf7; }
.blog__thumb{ flex:0 0 120px; aspect-ratio:3/2; border-radius:8px; overflow:hidden; }
.blog__thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.blog__item a:hover .blog__thumb img{ transform:scale(1.07); }
.blog__date{ color:#999; font-size:.82rem; font-weight:700; display:block; margin-bottom:4px; }
.blog__ttl{ font-weight:700; font-size:.95rem; transition:color .2s; }
.blog__item a:hover .blog__ttl{ color:var(--green-dark); }
.blog__more{ margin-top:24px; }

.follow__icons{ display:flex; gap:14px; margin-bottom:26px; }
.follow__icon{
  width:50px; height:50px; border-radius:10px; color:#fff; font-weight:800; font-size:1.3rem;
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.follow__icon:hover{ transform:translateY(-4px); }
.follow__icon--fb{ background:#3b5998; }
.follow__icon--ig{ background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.follow__icon--tw{ background:#000; }
.follow__member{ background:var(--green-light); border-radius:12px; padding:24px; text-align:center; }
.follow__member-ttl{ font-weight:800; color:var(--green-dark); font-size:1.05rem; margin-bottom:8px; }
.follow__member-note{ font-size:.85rem; margin-bottom:16px; }
.follow__member-btn{
  display:inline-block; background:var(--green); color:#fff; font-weight:700;
  padding:10px 30px; border-radius:999px; transition:.3s; box-shadow:0 3px 0 var(--green-dark);
}
.follow__member-btn:hover{ transform:translateY(2px); box-shadow:0 1px 0 var(--green-dark); }

/* ===========================================================
   MISSION
=========================================================== */
.mission{
  background:linear-gradient(rgba(75,155,34,.9),rgba(75,155,34,.9)), url('../images/1856023_m のコピー.jpg');
  background-size:cover; background-position:center; color:#fff; text-align:center; padding:64px 0;
}
.mission__title{ font-size:1.6rem; font-weight:800; margin-bottom:18px; line-height:1.6; }
.mission__text{ max-width:760px; margin-inline:auto; font-size:.95rem; }

/* ===========================================================
   ACCESS
=========================================================== */
.access__grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:34px; }
.access__map{ border-radius:12px; overflow:hidden; box-shadow:var(--shadow); min-height:320px; }
.access__map iframe{ width:100%; height:100%; min-height:320px; border:0; display:block; }
.access__table{ width:100%; border-collapse:collapse; }
.access__table th,.access__table td{ text-align:left; padding:14px 12px; border-bottom:1px solid #eee; font-size:.92rem; vertical-align:top; }
.access__table th{ width:90px; color:var(--green-dark); font-weight:800; white-space:nowrap; }

/* ===========================================================
   FOOTER
=========================================================== */
.footer{ background:var(--green-deep); color:#fff; padding:48px 0 0; }
.footer__inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer__nav{ display:flex; gap:48px; flex-wrap:wrap; }
.footer__nav a{ font-size:.86rem; line-height:2.4; opacity:.92; transition:.2s; }
.footer__nav a:hover{ opacity:1; text-decoration:underline; }
.footer__brand{ text-align:right; }
.footer__logo{ background:#fff; display:inline-block; padding:10px 16px; border-radius:8px; margin-bottom:12px; }
.footer__logo img{ height:34px; }
.footer__addr{ font-size:.82rem; opacity:.9; line-height:1.7; }
.footer__copy{ text-align:center; font-size:.78rem; margin-top:40px; padding:16px; background:rgba(0,0,0,.15); }

/* ===========================================================
   PAGE TOP
=========================================================== */
.pagetop{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:var(--green); color:#fff; font-size:1rem; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:.35s;
}
.pagetop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.pagetop:hover{ background:var(--green-dark); }

/* ===========================================================
   SCROLL REVEAL
=========================================================== */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
.cards .reveal:nth-child(2),.content__cards .reveal:nth-child(2),.navband .reveal:nth-child(2){ transition-delay:.1s; }
.cards .reveal:nth-child(3),.content__cards .reveal:nth-child(3),.navband .reveal:nth-child(3){ transition-delay:.2s; }
.navband .reveal:nth-child(4){ transition-delay:.3s; }

/* ===== keyframes ===== */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-18px); } to{ opacity:1; transform:none; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes spin-in{ from{ opacity:0; transform:rotate(-180deg) scale(.4); } to{ opacity:1; transform:rotate(0) scale(1); } }

/* ===========================================================
   RESPONSIVE
=========================================================== */
@media (max-width:980px){
  .info__grid{ grid-template-columns:1fr; }
  .access__grid{ grid-template-columns:1fr; }
  .footer__brand{ text-align:left; }
}
@media (max-width:820px){
  body{ font-size:14px; }
  .gnav{
    position:fixed; inset:74px 0 auto 0; background:#fff; margin:0;
    max-height:0; overflow:hidden; transition:max-height .4s ease; box-shadow:0 8px 14px rgba(0,0,0,.1);
  }
  .gnav.is-open{ max-height:400px; }
  .gnav__list{ flex-direction:column; gap:0; padding:8px 0; }
  .gnav__list li{ border-bottom:1px solid #eee; }
  .gnav__list a{ display:block; padding:14px 24px; }
  .hamburger{ display:flex; margin-left:auto; }
  .header__cta{ margin-left:0; }
  .header__tel{ display:none; }

  .hero{ --hw:78vw; }

  .cards,.content__cards,.navband__grid,.fit__list{ grid-template-columns:1fr 1fr; }
  .features__intro{ flex-direction:column; text-align:center; padding:28px 22px; }
  .features__intro-img{ flex-basis:auto; max-width:220px; }
  .content__subjects{ margin-top:58px; padding:92px 26px 26px; border-radius:14px; }
  .content__subjects-schools{ font-size:.92rem; line-height:1.9; }
  .content__subjects-img{ width:150px; right:16px; top:-46px; bottom:auto; }
  .cta__inner{ flex-direction:column; }
  .cta__img img{ width:160px; }
  .voice__bubble{ max-width:100%; }
}
@media (max-width:520px){
  .cards,.content__cards,.navband__grid,.fit__list{ grid-template-columns:1fr; }
  .hero{ --hw:86vw; }
  .sec-title{ font-size:1.4rem; }
  .news__inner{ flex-direction:column; align-items:flex-start; }
  .news__heading{ border-right:0; }
  .footer__nav{ gap:28px; }
  .content__subjects{ margin-top:50px; padding:84px 20px 22px; }
  .content__subjects-schools{ font-size:.84rem; }
  .content__subjects-img{ width:128px; right:12px; top:-40px; }
}