@charset "utf-8";

/* CSS Document */

html,
body {
    height: 100%;
    overflow: hidden;
    /* ページ自体はスクロールさせない */
    margin: 0;
    padding: 0;
}

main {
    height: 100vh;
    /* ビューポートいっぱい */
    overflow-y: auto;
    /* メインだけスクロール可能に */
}

@media screen and (max-width: 768px) {

    html,
    body {
        height: auto;
        overflow: scroll;
    }

    main {
        height: auto;
        overflow-y: auto;
    }
}

/* ------------------------------------------
  common
--------------------------------------------- */
.bg-cosmos {
    background: #8ab7d2;
}

.color-cosmos-dark {
    color: #5e7d8f;
}

.bg-cosmos-dark {
    background: #5e7d8f;
}

a:hover {
    opacity: inherit !important;
}

.font-jost {
    font-family: "Jost", sans-serif;
}

.modal__content {
    width: 35%;
}


/* ------------------------------------------
  sp menu
--------------------------------------------- */
.fd26menu_sp {
    background: #8ab7d2;
    position: fixed;
    z-index: 100;
    top: 55px;
    right: 0px;
    display: block;
    width: 45px;
    height: 40px;
    padding-left: 8px;
}

.fd26menu_sp .ph-menus_humberger:nth-child(1) {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.fd26menu_sp.is-open .ph-menus_humberger:nth-child(1) {
    -webkit-transform: translate(0, 10px) rotate(45deg);
    transform: translate(0, 10px) rotate(45deg);
    left: 9px;
}

.fd26menu_sp .ph-menus_humberger:nth-child(3) {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    bottom: 10px;
}

.fd26menu_sp.is-open .ph-menus_humberger:nth-child(3) {
    -webkit-transform: translate(0, -7px) rotate(-45deg);
    transform: translate(0, -7px) rotate(-45deg);
    left: 9px;
}

.fd26menu_sp.is-open .ph-menus_humberger:nth-child(2) {
    opacity: 0;
}

aside.menu.is-open{
    display: flex !important;
}

/* ------------------------------------------
  mv
--------------------------------------------- */
.mv {
    background: url(../images/kv-bg.webp) no-repeat center center;
    background-size: cover;
}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 768px) {
    .mv {
        height: 150vw;
    }
}


/* ------------------------------------------
  アニメーション
--------------------------------------------- */

/* スクロールダウンの位置 */
.scroll {
    padding-top: 60px;
    position: absolute;
    text-align: center;
    left: 50%;
    bottom: -100px;
    display: block;
}

/* 矢印のアニメーション部分 */
.scroll::before {
    animation: scroll 2s infinite;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    content: "";
    height: 30px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
}

/* 矢印のアニメーション */
@keyframes scroll {
    0% {
        opacity: 0;
        transform: rotate(-45deg) translate(0, 0);
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        transform: rotate(-45deg) translate(-20px, 20px);
    }

    100% {
        opacity: 0;
    }
}

/* メニューのアニメーション */
@keyframes hoverBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

.hover-bounce:hover {
    animation: hoverBounce .9s infinite;
}

/*ロゴのアニメーション*/
.logo-wrapper {
    position: absolute;
    left: 40px;
    bottom: 40px;
    width: 17vw;
}

.logo-fade {
    /* フェード用アニメーションを 6秒かけて、ゆるく、繰り返す */
    animation: fadeInOut 6s ease-in-out infinite;
}

/* キーフレーム定義 */
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (max-width: 768px) {
    .logo-wrapper {
        position: absolute;
        left: 20px;
        bottom: 20px;
        width: 50vw;
    }
}

/*流れる文字①*/
.kv-top-obi {
    width: calc(100% - 80px);
    height: 25px;
    overflow: hidden;
    position: absolute;
    top: 40px;
    left: 40px;

    /* 2) 背景画像設定 */
    background-image: url(../images/kv-obi.svg);
    background-repeat: repeat-x;
    /* 横に繰り返し */
    background-position: 0 0;
    background-size: auto 100%;
    /* 高さ100%にフィット、横は自動 */

    /* 3) アニメーション適用 */
    animation: kv-slide-bg 40s linear infinite;
}

/* 4) キーフレーム定義 */
@keyframes kv-slide-bg {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

@media screen and (max-width: 768px) {
    .kv-top-obi {
        width: 100%;
        height: 15px;
        top: 25px;
        left: 0;
    }
}


/*流れる文字②*/
.main-bottom-obi-wrap {
    padding-left: 0.6%;
}

.main-bottom-obi {
    width: 100%;
    height: 35px;
    /* 画像の高さに合わせて調整 */
    overflow: hidden;
    position: relative;

    /* 2) 背景画像設定 */
    background-image: url(../images/main-bottom-obi.svg);
    background-repeat: repeat-x;
    /* 横に繰り返し */
    background-position: 0 0;
    background-size: auto 100%;
    /* 高さ100%にフィット、横は自動 */

    /* 3) アニメーション適用 */
    animation: slide-bg 20s linear infinite;
}

/* 4) キーフレーム定義 */
@keyframes slide-bg {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100% 0;
    }
}

@media screen and (max-width: 768px) {
    .main-bottom-obi {
        height: 25px;
    }
}

/*サイドメニューのアニメーション*/
.menu-title span {
    display: inline-block;
    animation: bounce 2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.5s);
    margin: 0 -5px;
}

/* バウンスのキーフレーム */
@keyframes bounce {

    0%,
    20%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-5px);
    }
}

.links-title span {
    display: inline-block;
    animation: links-bounce 2.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.5s);
    margin: 0 -5px;
}

/* バウンスのキーフレーム */
@keyframes links-bounce {

    0%,
    20%,
    100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-5px);
    }
}


/* ------------------------------------------
  loading
--------------------------------------------- */

#lead-fadeIn {
    opacity: 0;
    transform: translate(0, 30px);
    transition: all 1000ms;
}

r #lead-fadeIn.lead-fadeIn-active {
    opacity: 1;
    transform: translateY(0);
}

#loading {}

#kv-lead {
    opacity: 0;
    -webkit-transition: all 2s;
    transition: all 2s;
    transform: translateY(15px);
}

#kv-lead.kv-lead-loaded {
    opacity: 1;
    transform: translateY(0);
}

/*fadein*/
.fadein {
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1500ms;
}

.fadein-active {
    opacity: 1;
    transform: translate(0, 0);
}

/* ========================================================
   for SP
===========================================================*/

@media screen and (max-width: 768px) {
    .modal__content {
        width: 90%;
    }
}