@charset "UTF-8";
@media print, screen and (max-width: 750px) {
  #header .logo {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
  }
  #header .logo > a {
    width: 150px;
    height: 64px;
    background: #fff;
    border-right: 2px solid #36a3a7;
    border-bottom: 2px solid #36a3a7;
    border-radius: 0 0 25px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #header .logo > a > img {
    width: 100px;
    transform: translate(-2px, -2px);
  }
}
@media screen and (min-width: 751px) {
  .home #header .logo {
    opacity: 1;
    left: 40px;
    transform: translate(0, 0);
  }
}
.top-mv img {
  width: 100%;
  display: block;
}
.top-mv picture {
  display: block;
}
.top-mv button {
  border: none;
}
.top-mv button:hover {
  cursor: pointer;
}
.top-mv .u-pc {
  display: block;
}
@media print, screen and (max-width: 750px) {
  .top-mv .u-pc {
    display: none;
  }
}
.top-mv .u-sp {
  display: none;
}
@media print, screen and (max-width: 750px) {
  .top-mv .u-sp {
    display: block;
  }
}
.top-mv {
  height: 71.1428571429vw;
  background: linear-gradient(to bottom, #7ED5BE 0%, #36A3A6 100%);
  position: relative;
}
@media print, screen and (max-width: 750px) {
  .top-mv {
    height: 182.951653944vw;
  }
}
.top-mv::before, .top-mv::after {
  content: "";
  width: 100%;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
}
.top-mv::before {
  height: 10.7142857143vw;
  background-image: url("../img/top/bg_mv_top.png");
  top: 0;
}
@media print, screen and (max-width: 750px) {
  .top-mv::before {
    content: none;
  }
}
.top-mv::after {
  height: 20.2142857143vw;
  background-image: url("../img/top/bg_mv_bottom.png");
  bottom: 0;
}
@media print, screen and (max-width: 750px) {
  .top-mv::after {
    height: 50.3816793893vw;
    background-image: url("../img/top/bg_mv_bottom_sp.png");
    z-index: 20;
  }
}
.top-mv__ttl {
  width: 53.2635714286vw;
  position: absolute;
  top: 10vw;
  left: 31.3571428571vw;
  z-index: 10;
}
@media print, screen and (max-width: 750px) {
  .top-mv__ttl {
    width: 87.3613231552vw;
    top: 30.534351145vw;
    left: 5.5979643766vw;
  }
}
.top-mv__chara {
  width: 20.4864285714vw;
  position: absolute;
  top: 7.8571428571vw;
  left: 72.3571428571vw;
  z-index: 10;
}
@media print, screen and (max-width: 750px) {
  .top-mv__chara {
    width: 32.5699745547vw;
    top: 16.2849872774vw;
    left: 65.903307888vw;
  }
}
.top-mv__img {
  filter: drop-shadow(0 1.6035714286vw 2.6721428571vw rgba(0, 0, 0, 0.25));
  width: 23.1428571429vw;
  position: absolute;
  top: 17.7142857143vw;
  left: 5.1428571429vw;
  z-index: 10;
}
@media print, screen and (max-width: 750px) {
  .top-mv__img {
    width: 45.8015267176vw;
    top: 82.1882951654vw;
    left: 9.1603053435vw;
  }
}
.top-mv__txt {
  font-weight: 600;
  font-size: 1.2857142857vw;
  line-height: 1.2;
  color: #fff;
  margin: 0.75em 0 0 42.2857142857vw;
}
@media print, screen and (max-width: 750px) {
  .top-mv__txt {
    font-size: 3.3078880407vw;
    text-align: center;
    margin: 0.75em 0 0 52.9262086514vw;
  }
}
.top-mv__txt > span {
  color: #FFE665;
}
.top-mv {
  /* --- 全体コンテナ --- */
}
.top-mv .slider-container {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  top: 38.9285714286vw;
  left: 0;
}
@media print, screen and (max-width: 750px) {
  .top-mv .slider-container {
    top: 86.5139949109vw;
  }
}
.top-mv {
  /* --- テキスト画像エリア --- */
}
.top-mv .text-image-area {
  position: relative;
  width: 100%;
  height: 4.5714285714vw; /* テキスト画像の高さに合わせて調整 */
  box-sizing: border-box;
}
@media print, screen and (max-width: 750px) {
  .top-mv .text-image-area {
    height: 10.6870229008vw;
  }
}
.top-mv .text-image-item {
  position: absolute;
  top: 0;
  /* ⭕ 一番最初の「ど真ん中」の配置に戻しました */
  left: 50%;
  /* 
  	👇 ここがポイントです！
  	本来の真ん中「-50%」から、数値を少しプラス（右へ移動）に調整しています。
  	イラストの右寄せ具合に合わせて、ここの「-20%」の数値を `-10%` や `-30%` などに微調整してください。
  */
  /* 👇 テキスト画像の横幅（イラストとサイズ感を合わせる調整） */
  width: 16%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease, visibility 0.1s ease;
}
.top-mv .text-image-item:nth-child(1) {
  width: 19.1428571429vw;
  transform: translateX(-24%);
}
.top-mv .text-image-item:nth-child(2) {
  width: 15.6428571429vw;
  transform: translateX(-19%);
}
.top-mv .text-image-item:nth-child(3) {
  width: 13.9285714286vw;
  transform: translateX(-17%);
}
.top-mv .text-image-item:nth-child(4) {
  width: 12.7857142857vw;
  transform: translate(-14%, 1.0714285714vw);
}
.top-mv .text-image-item:nth-child(5) {
  width: 15.6428571429vw;
  transform: translateX(-20%);
}
.top-mv .text-image-item:nth-child(6) {
  width: 16.2857142857vw;
  transform: translateX(-23%);
}
.top-mv .text-image-item:nth-child(7) {
  width: 19.1428571429vw;
  transform: translateX(-24%);
}
.top-mv .text-image-item:nth-child(8) {
  width: 16.2857142857vw;
  transform: translateX(-23%);
}
.top-mv .text-image-item:nth-child(9) {
  width: 18vw;
  transform: translateX(-24%);
}
@media print, screen and (max-width: 750px) {
  .top-mv .text-image-item:nth-child(1) {
    width: 40.9160305344vw;
    transform: translateX(16%);
  }
  .top-mv .text-image-item:nth-child(2) {
    width: 33.4351145038vw;
    transform: translateX(30%);
  }
  .top-mv .text-image-item:nth-child(3) {
    width: 29.7709923664vw;
    transform: translateX(41%);
  }
  .top-mv .text-image-item:nth-child(4) {
    width: 27.3282442748vw;
    transform: translate(46%, 3.8167938931vw);
  }
  .top-mv .text-image-item:nth-child(5) {
    width: 33.4351145038vw;
    transform: translateX(30%);
  }
  .top-mv .text-image-item:nth-child(6) {
    width: 34.8091603053vw;
    transform: translateX(26%);
  }
  .top-mv .text-image-item:nth-child(7) {
    width: 40.9160305344vw;
    transform: translateX(16%);
  }
  .top-mv .text-image-item:nth-child(8) {
    width: 34.8091603053vw;
    transform: translateX(26%);
  }
  .top-mv .text-image-item:nth-child(9) {
    width: 38.4732824427vw;
    transform: translateX(20%);
  }
}
.top-mv .text-image-item.is-active {
  opacity: 1;
  visibility: visible;
}
.top-mv .text-image-item img {
  width: 100%;
  height: auto;
  display: block;
}
.top-mv {
  /* --- Swiper本体（v4.4.1仕様） --- */
}
.top-mv .swiper-container {
  width: 100%;
  overflow: visible !important;
  box-sizing: border-box;
}
.top-mv .swiper-wrapper {
  display: flex;
  box-sizing: border-box;
  padding-left: 15%; /* イラストを右に押し出している設定 */
}
@media print, screen and (max-width: 750px) {
  .top-mv .swiper-wrapper {
    /* 
      スマホ画面で、アクティブな1枚目をどれくらい右に押し出すかの設定です。
      デザインを見ながら「40%」や「45%」などに微調整してください。
    */
    padding-left: 296% !important;
  }
}
.top-mv .swiper-slide {
  flex-shrink: 0;
  height: 100%;
  position: relative;
  box-sizing: border-box;
}
.top-mv .swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.top-mv {
  /* Swiper4系のコンテナクラスを指定 */
}
.top-mv .swiper-container {
  visibility: hidden; /* 読み込み中は見えなくする（高さは維持してガタつきを防ぐ） */
}
.top-mv {
  /* 初期化が完了したら表示する */
}
.top-mv .swiper-container.is-initialized {
  visibility: visible;
}

.top-fixed {
  position: relative;
  z-index: 1;
}
@media print, screen and (max-width: 750px) {
  .top-fixed {
    width: 100%;
    box-sizing: border-box;
    padding: 0 4.0712468193vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 10.1781170483vw;
    left: 0;
    z-index: 99;
  }
}
.top-fixed .--signup {
  font-weight: 700;
  font-size: 1.7142857143vw;
  letter-spacing: 0.1714285714vw;
  text-align: center;
  color: #FFF;
  width: 34.2857142857vw;
  height: 4.7857142857vw;
  background: linear-gradient(180deg, #FF956B 0%, #FF6638 100%);
  border-radius: 9999px;
  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 61.2857142857vw;
  left: 39.1428571429vw;
  transition: 0.2s;
}
@media print, screen and (max-width: 750px) {
  .top-fixed .--signup {
    font-size: 6.106870229vw;
    letter-spacing: 0.6106870229vw;
    width: 56.9974554707vw;
    height: 17.048346056vw;
    padding: 0 0 0 20.3562340967vw;
    justify-content: flex-start;
    position: relative;
    inset: auto;
  }
}
@media (hover: hover) {
  .top-fixed .--signup:hover {
    cursor: pointer;
    transform: scale(1.05);
  }
}
.top-fixed .--signup > span {
  width: 4.7857142857vw;
  height: 4.7857142857vw;
  background: #fff;
  border: 2px solid #FF683A;
  border-radius: 9999px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}
@media print, screen and (max-width: 750px) {
  .top-fixed .--signup > span {
    width: 17.048346056vw;
    height: 17.048346056vw;
  }
}
.top-fixed .--signup > span > img {
  width: 2.8021428571vw;
}
@media print, screen and (max-width: 750px) {
  .top-fixed .--signup > span > img {
    width: 9.9821882952vw;
  }
}
.top-fixed .--login {
  display: none;
}
@media print, screen and (max-width: 750px) {
  .top-fixed .--login {
    font-weight: 700;
    font-size: 4.0712468193vw;
    letter-spacing: 0.4071246819vw;
    text-align: center;
    color: #36A3A7;
    width: 30.7888040712vw;
    height: 15.0127226463vw;
    background: #FFF;
    border: 2px solid #37979B;
    border-radius: 9999px;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media print, screen and (max-width: 750px) {
  .spFixBtn {
    transform: translateY(calc(100% + 2.5445292621vw));
  }
  .header_active .spFixBtn {
    transform: translateY(0);
  }
}

/****	---- end ----
===================================****//*# sourceMappingURL=top.css.map */