@charset "UTF-8";

/* 操作できる場所と現在のフォーカスを、色と小さな動きで伝える。 */
:is(.l-header a, .l-header__menuBtn, .l-spMenu a, [data-ux-action], [data-ux-hover]):focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 5px;
}

.l-header:not(.l-header--sub) :is(a, .l-header__menuBtn):focus-visible { outline-color: #fff; }
.p-contactField__label { transition: color .18s ease; }
.p-contactField:focus-within .p-contactField__label { color: var(--c-red); }
.p-contactForm__submit[aria-busy="true"] { opacity: .8; cursor: wait; }

@media (prefers-reduced-motion: no-preference) {
  /* JSが画面の下で準備したものだけを隠す。本文の初期表示は止めない。 */
  [data-ux-reveal][data-ux-state="pending"] {
    opacity: 0;
    translate: 0 var(--ux-distance, 12px);
  }

  .l-header__navList a { transition: opacity .18s ease, translate .2s var(--ease); }
  .l-header__navList a:focus-visible { translate: 0 -1px; }
  .l-header__navList a:focus-visible::after { transform: scaleX(1); }

  /* 開く動きに合わせてメニュー項目を短い間隔で表示する。 */
  .l-spMenu__list li,
  .l-spMenu__contact {
    opacity: 0;
    translate: 0 8px;
    transition: opacity .22s ease, translate .28s var(--ease);
    transition-delay: 0s;
  }

  .l-spMenu.is-open :is(.l-spMenu__list li, .l-spMenu__contact) { opacity: 1; translate: 0 0; }
  .l-spMenu.is-open .l-spMenu__list li:nth-child(2) { transition-delay: 35ms; }
  .l-spMenu.is-open .l-spMenu__list li:nth-child(3) { transition-delay: 70ms; }
  .l-spMenu.is-open .l-spMenu__list li:nth-child(4) { transition-delay: 105ms; }
  .l-spMenu.is-open .l-spMenu__contact { transition-delay: 140ms; }
  .l-spMenu.is-open .l-spMenu__list li:focus-within { opacity: 1; translate: 0 0; transition-delay: 0s; }

  [data-ux-action],
  [data-ux-hover] {
    transition: translate .22s var(--ease), scale .16s ease, box-shadow .22s ease, opacity .22s ease, background-color .22s ease, color .22s ease;
  }

  [data-ux-action]:focus-visible,
  [data-ux-hover]:focus-visible { translate: 0 -2px; }

  [data-ux-action]:not(:disabled):active,
  [data-ux-hover]:active { translate: 0 0; scale: .985; }

  [role="tab"] { transition: background-color .22s ease, color .22s ease, scale .16s ease; }
  [role="tab"]:active { scale: .985; }

  [data-ux-hover-image] { transition: scale .48s var(--ease); }
  [data-ux-card]:focus-within [data-ux-hover-image] { scale: 1.025; }

  .p-contactForm__submit[data-send-btn][aria-busy="true"]::after {
    content: "";
    width: 1.7rem;
    height: 1.7rem;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ux-loading .8s linear infinite;
  }

  .p-contactForm__submit[data-send-btn][aria-busy="true"] img { display: none; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .l-header__navList a:hover { opacity: 1; translate: 0 -1px; }
  .l-header__navList a:hover::after { transform: scaleX(1); }

  [data-ux-action]:not(:disabled):hover,
  [data-ux-hover]:hover { translate: 0 -2px; }

  :is(.l-header__contact, .l-spMenu__contact, .p-contactType__btn, .p-contactForm__submit, .p-schoolResults__moreBtn)[data-ux-action]:not(:disabled):hover {
    box-shadow: 0 6px 16px rgba(36, 36, 36, .1);
  }

  [data-ux-card]:hover [data-ux-hover-image] { scale: 1.025; }
}

@keyframes ux-loading { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  [data-ux-reveal] { opacity: 1; }
  .l-spMenu,
  .l-header__menuLine,
  .l-spMenu__list li,
  .l-spMenu__contact,
  .p-contactField__label,
  [role="tabpanel"],
  .p-serviceTabs__panel.is-active { transition: none; }
}