/* フッター（青い面。左に教室名と申し込み、右に案内の一覧） */
.footer {
  padding: 40px 0 8px;
  background: var(--main-btn);
  color: var(--white);
}
@media (min-width: 640px) { .footer { padding-bottom: 40px; } }
.footer__inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
@media (min-width: 960px) {
  .footer__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    gap: 24px 80px;
    max-width: 1000px;
  }
  .fnav { grid-column: 2 / 3; grid-row: 1 / 3; }
  .footer__cta { align-self: end; }
  .footer__btm { grid-column: 1 / 3; }
}

.footer__brand { display: flex; align-items: center; gap: 16px; }
.footer__logo {
  display: grid;
  place-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--white);
  color: var(--main-ink);
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}
.footer__logo span { display: block; font-size: 7px; letter-spacing: 0.08em; }
.footer__name { font-family: var(--f-maru); font-weight: 700; font-size: 14px; line-height: 1.5; letter-spacing: 0.06em; }
.footer__desc { margin-top: 6px; font-size: 12px; line-height: 1.7; }
@media (min-width: 960px) {
  .footer__brand { align-items: flex-start; gap: 24px; }
  .footer__logo { width: 128px; height: 128px; border-radius: 32px; font-size: 19px; }
  .footer__logo span { font-size: 12px; }
  .footer__name { font-size: 18px; line-height: 1.78; }
  .footer__desc { margin-top: 8px; font-size: 13px; line-height: 2; }
}

.footer__cta { margin-top: 24px; }
@media (min-width: 960px) { .footer__cta { margin-top: 0; } }
.footer__ttl { font-family: var(--f-maru); font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0.06em; }
.footer__txt { margin-top: 4px; font-size: 13px; line-height: 1.7; }
.footer__btn { margin-top: 12px; }
.footer__txt + .footer__btn { margin-top: 16px; }
.footer__memo { margin-top: 8px; font-size: 12px; }
.footer__sns { display: flex; gap: 16px; margin-top: 16px; }
.footer__sns a {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: background-color 0.3s ease-out;
}
.footer__sns a:hover { background: rgba(255, 255, 255, 0.15); }
.footer__sns svg { width: 24px; height: 24px; fill: currentColor; }
@media (min-width: 960px) {
  .footer__ttl { font-size: 20px; }
  .footer__txt { font-size: 14px; }
  .footer__sns { justify-content: flex-end; }
}

/* 案内の一覧 */
.fnav {
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  font-family: var(--f-maru);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.fnav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding: 4px 0; }
.fnav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  transition: opacity 0.2s ease-out;
}
.fnav a:hover { opacity: 0.8; }
.fnav a::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  rotate: 45deg;
}
.fnav__label {
  padding: 12px 0 4px;
  font-family: var(--f-jp);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
}
.fnav__sub { padding-bottom: 8px; }
.fnav__sub a { padding: 6px 0; }
@media (min-width: 960px) {
  .fnav { margin-top: 0; border-top: 0; font-size: 16px; line-height: 1.75; }
  .fnav__item { padding: 0 0 20px; }
  .fnav__item + .fnav__item { padding-top: 20px; }
  .fnav a { padding: 4px 0; }
  .fnav__label { padding: 0 0 8px; }
  .fnav__sub { padding-bottom: 0; }
}

.footer__btm { margin-top: 40px; text-align: center; }
.footer__copy { font-size: 13px; }
.footer__note { margin-top: 8px; font-size: 12px; line-height: 1.7; }