@charset "UTF-8";
/*コースアイコン*/
/*共通アコーディオンコース用*/
.hero_wrap {
  padding: 1rem 0;
}
.hero_wrap ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
}
@media (max-width: 622px) {
  .hero_wrap ul {
    justify-content: space-between;
  }
}
.hero_wrap ul li {
  width: calc((100% - 4rem) / 3);
  text-align: left;
  color: #4A4D87;
  font-weight: 600;
  padding: 1rem;
}
@media (max-width: 622px) {
  .hero_wrap ul li {
    width: calc((100% - 2rem) / 3);
    padding: 1rem 0;
  }
}
.hero_wrap ul li p {
  display: flex;
  justify-content: center;
  font-size: min(1.3vmax, 1rem);
}
@media (max-width: 622px) {
  .hero_wrap ul li p {
    font-size: min(1.2vmax, 0.875rem);
  }
}
.hero_wrap ul li h3 {
  font-size: min(3vmax, 2.5rem);
  min-height: 2em;
  line-height: 1.3;
  font-weight: 600;
  text-shadow: 0.03em 0 0 #fff;
}
@media (max-width: 860px) {
  .hero_wrap ul li h3 {
    font-size: min(2vmax, 1.8rem);
  }
}
@media (max-width: 622px) {
  .hero_wrap ul li h3 {
    font-size: min(1.8vmax, 1.8rem);
  }
}
.hero_wrap ul li b {
  display: flex;
  align-items: flex-end;
}
.hero_wrap ul li b span {
  line-height: 1;
  display: flex;
  text-align: left;
}
.hero_wrap ul li b span.value {
  font-size: min(3.5vmax, 3rem);
}
@media (max-width: 622px) {
  .hero_wrap ul li b span.value {
    font-size: min(2.8vmax, 2.3rem);
  }
}
.hero_wrap ul li b span.value_content {
  font-size: min(1.8vmax, 1.5rem);
  font-weight: 550;
}
@media (max-width: 622px) {
  .hero_wrap ul li b span.value_content {
    font-size: min(1.5vmax, 1.2rem);
  }
}
.hero_wrap ul li b span.unit {
  font-weight: 550;
  font-size: min(1.5vmax, 1.2rem);
}
@media (max-width: 622px) {
  .hero_wrap ul li b span.unit {
    font-size: min(1.75vmax, 1.5rem);
  }
}

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
}

/*黒背景＋大見出し*/
.intro {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
  /*4秒かけて消す*/
  -webkit-animation: introFadeOut 0.4s ease forwards;
          animation: introFadeOut 0.4s ease forwards;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.intro h2 {
  font-size: clamp(2.3rem, 3vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  -webkit-animation: introTextUp 2s ease forwards;
          animation: introTextUp 2s ease forwards;
}

/*通常コンテンツ*/
.hero-content {
  position: relative;
  z-index: 1;
  padding: 20vh 10vw;
  opacity: 0;
  -webkit-animation: contentFadeIn 2s ease forwards;
          animation: contentFadeIn 2s ease forwards;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
  /*サブタイトル*/
}
.hero-content .float-title {
  opacity: 0;
  transform: translateY(32px);
  -webkit-animation-name: floatUpTitle;
          animation-name: floatUpTitle;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.hero-content .float-text {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(20px);
  -webkit-animation-name: floatUpText;
          animation-name: floatUpText;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.hero-content .h2 {
  font-size: 2.4rem;
  margin-bottom: 1rem;
}
.hero-content .p {
  font-size: 1.6rem;
  line-height: 1.8;
}
.hero-content .slide-stop-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hero-content .slide-stop-list li {
  opacity: 0;
  transform: translateX(-24px); /* 開始位置 */
  -webkit-animation: slideStop 1s;
          animation: slideStop 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.hero-content .slide-stop-list li:nth-child(1) {
  -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s;
}
.hero-content .slide-stop-list li:nth-child(2) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.hero-content .slide-stop-list li:nth-child(3) {
  -webkit-animation-delay: 5.5s;
          animation-delay: 5.5s;
}

/*アニメーション定義*/
@-webkit-keyframes slideStop {
  to {
    opacity: 1;
    transform: translateX(0); /* ←ここが停止位置 */
  }
}
@keyframes slideStop {
  to {
    opacity: 1;
    transform: translateX(0); /* ←ここが停止位置 */
  }
}
/* 大見出しが少し浮き上がる */
@-webkit-keyframes introTextUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes introTextUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 黒背景が消える */
@-webkit-keyframes introFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes introFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* 背景画像＋他テキスト表示 */
@-webkit-keyframes contentFadeIn {
  to {
    opacity: 1;
  }
}
@keyframes contentFadeIn {
  to {
    opacity: 1;
  }
}
@-webkit-keyframes floatUpTitle {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes floatUpTitle {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes floatUpText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes floatUpText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes bounceUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  70% {
    opacity: 1;
    transform: translateY(-8px); /* 行き過ぎ */
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bounceUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  70% {
    opacity: 1;
    transform: translateY(-8px); /* 行き過ぎ */
  }
  100% {
    transform: translateY(0);
  }
}
/*# sourceMappingURL=top-animation.css.map */