@charset "UTF-8";
/* CSS Document */


/*--  mv  --*/
#mv-content .cont-inner {
  height: 460px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 980px) {
  #mv-content .cont-inner {
    padding: 30px 0;
    height: auto;
  }
}
@media screen and (min-width: 981px) {
  #mv-content .text-container {
    width: auto;
    white-space:nowrap;
    overflow:hidden;
    animation: jojo 1.2s linear forwards, fadeIn 1.5s ease-out 0.5s forwards;
    text-align: left;
    animation-delay: 0.5s;
    opacity: 0;
  }
}
@media screen and (max-width: 980px) {
  #mv-content .text-container {
    animation: fadeIn 2s ease-out 0.5s forwards;
    text-align: left;
    animation-delay: 0.5s;
    opacity: 0;
  }
}
@keyframes jojo {
  from {
    width:0%;
  }
  to {
    width:100%;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0; /* 最初は完全に透明 */
  }
  to {
    opacity: 1; /* 最終的に不透明 */
  }
}
#mv-content h2 {
  font-size: 76px;
  font-weight: 500;
  line-height: 1.5;
  background:
        radial-gradient(circle at 10% 20%, #315FAC 0%, transparent 80%),
        radial-gradient(circle at 90% 80%, #5DD8DA 0%, transparent 80%),
        radial-gradient(circle at 50% 50%, #11B395 0%, transparent 80%);
        /* グラデーションの初期位置とサイズ */
  background-size: 400% 400%; /* グラデーションのサイズを大きくし、移動範囲を確保 */
  background-position: 0% 0%; /* 初期位置 */

  /* 背景をテキストの形状にクリップ */
  -webkit-background-clip: text; /* SafariなどWebKit系ブラウザ対応 */
  background-clip: text;

  /* テキストの色を透明に */
  color: transparent; 

  /* アニメーションの定義 */
  animation: moveGlow 10s ease-in-out infinite alternate; /* 動きの速さやパターンを調整 */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(34, 133, 162, .2);
}
@media screen and (max-width: 980px) {
  #mv-content h2 {
    font-size: 9.3vw;
  }
}
/* グラデーションを動かすアニメーション */
@keyframes moveGlow {
    0% {
        background-position: 0% 0%; /* 左上から開始 */
    }
    25% {
        background-position: 50% 50%; /* 中央へ */
    }
    50% {
        background-position: 100% 0%; /* 右上へ */
    }
    75% {
        background-position: 0% 100%; /* 左下へ */
    }
    100% {
        background-position: 100% 100%; /* 右下へ */
    }
}


/*--  cont1  --*/

#cont1 .cont-inner {
  background: linear-gradient(92.28deg, #60A2D8 0%, #5DD8DA 100%);
  color: #fff;
  border-radius: 30px;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 981px) {
  #cont1 .cont-inner {
    padding: 160px 72px 240px;
  }
}
@media screen and (max-width: 980px) {
  #cont1 .cont-inner {
    padding-bottom: 80px;
  }
}
#cont1 .cont-inner .flex-box {
  gap: 210px;
  align-items: flex-start;
  z-index: 2;
  position: relative;
}
#cont1 .cont-inner .flex-box dt {
  font-size: 40px;
  line-height: 1.5;
}
@media screen and (max-width: 980px) {
  #cont1 .cont-inner .flex-box dt {
    margin-top: 30px;
    font-size: 6vw;
  }
}
#cont1 .cont-inner .flex-box dd p {
  margin-top: 30px;
}
@media screen and (max-width: 980px) {
  #cont1 .cont-inner .flex-box dd p {
    margin-top: 20px;
  }
}
#cont1 .wave {
    position: absolute;
    bottom: -50px;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 20rem;
    z-index: 1;
}
@media screen and (max-width: 980px) {
  #cont1 .wave {
    height: 80px;
    bottom: 0;
  }
}
#cont1 .wave .all {
    -webkit-animation: elasticity1 15s ease infinite;
    animation: elasticity1 15s ease infinite;
    position: relative;
    width: 100%;
    height: 20rem;
    opacity: .5;
}
@media screen and (max-width: 980px) {
  #cont1 .wave .all {
    opacity: .8;
  }
}
#cont1 .wave .all .wave1 {
    -webkit-animation: elasticity2 15s ease infinite;
    animation: elasticity2 15s ease infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
#cont1 .wave .all .wave1 div {
    -webkit-animation: scroll1 20s linear infinite;
    animation: scroll1 20s linear infinite;
    background-image: url(../img/wave01.svg);
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: 200rem;
    width: 100%;
    height: 12rem;
}
@media screen and (max-width: 980px) {
  #cont1 .wave .all .wave1 div {
    background-size: 80rem;
  }
}
#cont1 .wave .all .wave2 {
    -webkit-animation: elasticity1 10s ease infinite;
    animation: elasticity1 10s ease infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
#cont1 .wave .all .wave2 div {
    -webkit-animation: scroll1 30s linear infinite;
    animation: scroll1 30s linear infinite;
    background-image: url(../img/wave02.svg);
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: 200rem;
    width: 100%;
    height: 18rem;
}
@media screen and (max-width: 980px) {
  #cont1 .wave .all .wave2 div {
    background-size: 80rem;
  }
}
#cont1 .wave .all .wave3 {
    -webkit-animation: elasticity2 10s ease infinite;
    animation: elasticity2 10s ease infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
#cont1 .wave .all .wave3 div {
    -webkit-animation: scroll2 25s linear infinite;
    animation: scroll2 25s linear infinite;
    background-image: url(../img/wave02.svg);
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: 200rem;
    width: 100%;
    height: 18rem;
}
@media screen and (max-width: 980px) {
  #cont1 .wave .all .wave3 div {
    background-size: 80rem;
  }
}
@-webkit-keyframes scroll1 {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 200rem 0
    }
}
@keyframes scroll1 {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 200rem 0
    }
}
@-webkit-keyframes scroll2 {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -200rem 0
    }
}
@keyframes scroll2 {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -200rem 0
    }
}
@-webkit-keyframes elasticity1 {
    0% {
        -webkit-transform: scale(1, 1.1);
        transform: scale(1, 1.1)
    }

    50% {
        -webkit-transform: scale(1, 0.5);
        transform: scale(1, 0.5)
    }

    100% {
        -webkit-transform: scale(1, 1.1);
        transform: scale(1, 1.1)
    }
}
@keyframes elasticity1 {
    0% {
        -webkit-transform: scale(1, 1.1);
        transform: scale(1, 1.1)
    }

    50% {
        -webkit-transform: scale(1, 0.5);
        transform: scale(1, 0.5)
    }

    100% {
        -webkit-transform: scale(1, 1.1);
        transform: scale(1, 1.1)
    }
}
@-webkit-keyframes elasticity2 {
    0% {
        -webkit-transform: scale(1, 1.1);
        transform: scale(1, 1.1)
    }

    50% {
        -webkit-transform: scale(1, -1);
        transform: scale(1, -1)
    }

    100% {
        -webkit-transform: scale(1, 1.1);
        transform: scale(1, 1.1)
    }
}
@keyframes elasticity2 {
    0% {
        -webkit-transform: scale(1, 1.1);
        transform: scale(1, 1.1)
    }

    50% {
        -webkit-transform: scale(1, -1);
        transform: scale(1, -1)
    }

    100% {
        -webkit-transform: scale(1, 1.1);
        transform: scale(1, 1.1)
    }
}

/*--  cont2  --*/
#cont2 {
}
@media screen and (max-width: 980px) {
  #cont2 {
  }
}
#cont2 .cont-inner {
  justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0;
}
@media screen and (max-width: 980px) {
  #cont2 .cont-inner {
    display: flex;
    flex-direction: column-reverse;
  }
}
#cont2 .news {
  flex-basis: 780px;
  margin: 80px auto 0;
}
@media screen and (max-width: 980px) {
  #cont2 .news {
    margin: 0;
    flex-basis: auto;
  }
}
#cont2 .news .flex-box {
  border-top: solid 1px #E3E3E3;
  gap: 20px;
  padding: 20px;
}
@media screen and (max-width: 980px) {
  #cont2 .news .flex-box {
    padding: 20px 0;
    display: flex;
    align-items: center;
  }
}
#cont2 .news .flex-box:last-child {
  border-bottom:  solid 1px #E3E3E3;
}
@media screen and (max-width: 980px) {
  #cont2 .news .flex-box:first-child {
    border: none;
  }
}
#cont2 .news .flex-box img {
  border-radius: 10px;
  width: 242px;
  line-height: 1;
}
@media screen and (max-width: 980px) {
  #cont2 .news .flex-box img {
    width: 40%;
  }
}
#cont2 .news .flex-box ul {
  flex-basis: calc(100% - 262px);
}
@media screen and (max-width: 980px) {
  #cont2 .news .flex-box ul {
    flex-basis: 60%;
  }
}
#cont2 .news .flex-box .data {
  font-weight: 300;
  font-size: 18px;
  margin-bottom: 10px;
}
@media screen and (max-width: 980px) {
  #cont2 .news .flex-box .data {
    font-size: 14px;
    margin-bottom: 0;
  }
}
#cont2 .news .flex-box .data .tag {
  border-radius: 20px;
  background: #00B7BD;
  color: #fff;  
  display: inline-block;
  text-align: center;
  line-height: 1.4;
  width: 120px;
  margin-left: 10px;
  font-size: 16px;
  font-family: 'Noto Sans JP';
}
@media screen and (max-width: 980px) {
  #cont2 .news .flex-box .data .tag {
    margin-left: 5px;
    font-size: 12px;
    width: auto;
    padding: 0 8px;
  }
}
#cont2 .news .flex-box .info a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 980px) {
  #cont2 .title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: flex-end;
  }
}
#cont2 h2 {
  margin-bottom: 40px;
}
#cont2 .loop-wrap {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}
#cont2 .loop-inner {
  display: inline-flex;
  animation: slide-loop 45s linear infinite;
}
@media screen and (max-width: 980px) {
  #cont2 .loop-inner {
    animation: slide-loop 20s linear infinite;
  }
}
#cont2 .loop {
  font-size: 130px;
  background: linear-gradient(92.28deg, rgba(96, 162, 216, 0.2) 0%, rgba(93, 216, 218, 0.2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
@media screen and (max-width: 980px) {
  #cont2 .loop {
    font-size: 40px;
  }
}
@keyframes slide-loop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


/*--  cont3  --*/

#cont3 {
  background: #F2FBFD;
}
#cont3 .flex-box {
  gap: 80px;
}
@media screen and (max-width: 980px) {
  #cont3 .flex-box {
    padding-bottom: 0;
  }
}
#cont3 p {
  font-size: 24px;
  line-height: 1.5;
  margin-top: 60px;
}
@media screen and (max-width: 980px) {
  #cont3 p {
    font-size: 16px;
    margin-top: 20px;
  }
}
#cont3 img {
  flex-basis: 540px;
  width: 540px;
}

/*--  cont4  --*/

#cont4 {
  background: #F2FBFD;
}
#cont4 .flex-box {
  align-items: flex-start;
  gap: 80px;
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
  }
}
#cont4 .flex-box .title h2 {
  margin-bottom: 60px;
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .title h2 {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .title .round-btn {
    width: 180px;
  }
}
#cont4 .flex-box .lists {
  box-shadow: 0px 0px 30px 0px #0000000D;
  background-color: #fff;
  border-radius: 30px;
  padding: 20px;
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .lists {
    margin: 0 -5vw;
  }
}
#cont4 .flex-box .lists a {
  gap: 20px;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  border-bottom: 1px solid #E3E3E3
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .lists a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}
#cont4 .flex-box .lists a:last-child {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
#cont4 .flex-box .lists .image {
  border-radius: 20px;
  width: 300px;
  flex-basis: 300px;
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .lists .image {
    width: 80%;
    flex-basis: 80%;
  }
}
#cont4 .flex-box .lists dl {
  flex-basis: calc(100% - 400px);
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .lists dl {
    flex-basis: 78%;
  }
}
#cont4 .flex-box .lists dt span {
  border: 1px solid #333333;
  padding: 3px 20px;
  border-radius: 20px;
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .lists dt span {
    font-size: 12px;
    padding: 2px 15px;
  }
}
#cont4 .flex-box .lists dt img {
  height: 40px;
  padding-top: 10px;
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .lists dt img {
    height: 30px;
  }
}
#cont4 .flex-box .lists .btn {
  flex-basis: 60px;
}
@media screen and (max-width: 980px) {
  #cont4 .flex-box .lists .btn {
    flex-basis: 15%;
    width: 15%;
  }
}