/* Shared section titles: Japanese label / Albert Sans display, with light
   drifting through the letterforms. Reference: recruit.saneki.co.jp. */
:root {
  --title-font: 'Albert Sans', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --title-ink: #19394f;
  --title-blue: #4c8dff;
}
#main .motto-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--title-ink);
  font-family: var(--title-font);
  font-weight: 500;
  font-size: inherit;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: none;
  opacity: 1;
}
#main .motto-title::before,
#main .motto-title::after {content: none;}
#main .motto-title__label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  font: 700 clamp(15px, 1.25vw, 18px)/1.7 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  letter-spacing: .025em;
  text-wrap: balance;
}
#main .motto-title__label::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  align-self: baseline;
  transform: translateY(-.2em);
  border-radius: 50%;
  background: #4c8dff;
}
#main .motto-title__display {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font: 500 clamp(46px, 5.21vw, 80px)/1.1 var(--title-font);
  letter-spacing: -.035em;
  overflow-wrap: normal;
  text-wrap: balance;
}
#main .motto-title__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: radial-gradient(ellipse at center, #fff 0%, #e0f8ff 12%, #7cceff 28%, #4c8dff 42%, transparent 68%);
  background-size: 210px 170%;
  background-repeat: no-repeat;
  background-position: -240px 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: motto-title-light 10s ease-in-out infinite;
  animation-play-state: paused;
}
#main .motto-title.is-title-visible .motto-title__light {animation-play-state: running;}
@keyframes motto-title-light {
  0% {background-position: -240px 50%;}
  50% {background-position: calc(100% + 240px) 50%;}
  100% {background-position: -240px 50%;}
}
#main .motto-title--light {color: #fff;}
#main .motto-title--light .motto-title__label::before {background: #a5edff;}
#main .motto-title--light .motto-title__light {
  background-image: radial-gradient(ellipse at center, #fff 0%, #fff 15%, #8debff 30%, #45bdf8 45%, transparent 68%);
}
#main .motto-title__note {
  margin: 22px 0 0;
  color: inherit;
  font: 500 14px/1.8 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  letter-spacing: .03em;
}
/* Keep the section's chosen alignment, while using one type hierarchy. */
#main .studio-pricing__heading .motto-title,
#main .faq-heading .motto-title,
#main .legal-hero .motto-title {align-items: flex-start; text-align: left;}
#main .studio-pricing__heading .motto-title__label,
#main .faq-heading .motto-title__label,
#main .legal-hero .motto-title__label {justify-content: flex-start;}
#main .concept .section-head {gap: 0;}
#main .stories-heading > p:last-child {margin-top: 20px;}
#main .daily-gallery__heading .motto-title {transform: none; animation: none;}
#main .daily-gallery__heading .motto-title__note {font-size: 15px;}
#main .school-compare__heading .school-compare__intro {margin-top: 26px;}
#main .studio-pricing__heading {gap: 0;}
#main .reform-features__heading {margin-bottom: 72px;}
#main .legal-hero h1.motto-title > span {display: block;}
#main .legal-hero h1.motto-title > .motto-title__label {display: flex;}
/* The hero and content-card titles retain their useful size and structure. */
#main :is(h1,h2,h3,h4):not(.motto-title),
#main :is(h1,h2,h3,h4):not(.motto-title) > span {
  font-family: var(--title-font);
}
#main :is(h1,h2,h3,h4) .title-shimmer-text {
  display: inline;
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  white-space: inherit;
  text-shadow: none;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  #main :is(h1,h2,h3,h4) .title-shimmer-text {
    background-color: var(--shimmer-ink, #19394f);
    background-image: linear-gradient(105deg, transparent 12%, #71c8ff 36%, #e8f9ff 49%, #fff 52%, #81d6ff 65%, transparent 88%);
    background-size: 5em 100%;
    background-repeat: no-repeat;
    background-position: -6em 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    animation: motto-copy-light 10s ease-in-out infinite;
    animation-play-state: paused;
  }
  #main .is-title-visible .title-shimmer-text {animation-play-state: running;}
}
@keyframes motto-copy-light {
  0% {background-position: -6em 0;}
  50% {background-position: calc(100% + 6em) 0;}
  100% {background-position: -6em 0;}
}
@media(max-width: 700px) {
  #main .motto-title {gap: 13px;}
  #main .motto-title__display {font-size: clamp(36px, 10.2vw, 56px); line-height: 1.12;}
  #main .motto-title__label {font-size: 14px; gap: 8px;}
  #main .motto-title__note {font-size: 13px; margin-top: 18px;}
  #main .reform-features__heading {margin-bottom: 54px;}
  #main .motto-title__light {background-size: 140px 170%;}
}
@media(prefers-reduced-motion: reduce) {
  #main .motto-title__light {display: none; animation: none;}
  #main :is(h1,h2,h3,h4) .title-shimmer-text {animation: none; background-image: none;}
}
@media(forced-colors: active) {
  #main .motto-title {color: CanvasText;}
  #main .motto-title__light {display: none;}
  #main :is(h1,h2,h3,h4) .title-shimmer-text {background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; animation: none;}
}