@charset "utf-8";

/* CSS Document */

/* ------------------------------------------
  common
--------------------------------------------- */
body {
    color: #494645;
}

.noto-serif {
    font-family: "Noto Serif JP", serif;
}

a:hover {
    opacity: inherit !important;
}

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


.mv h1 {
    padding: 5vw 0 0 2vw;
}

.mv h1 img {
    width: 20vw;
    height: auto;
    max-width: 380px;
}

.mv-logo {
    bottom: 90px;
    right: 0;
}

.mv-logo img {
    width: 10vw;
    height: auto;
}

@media screen and (max-width: 1366px) {
    .mv {
        background: url(../images/mv-1366.webp) no-repeat top center;
        background-size: cover;
    }

    .mv-title {
        align-items: center;
    }

    .mv h1 {
        padding: 5vw 0 0 2vw;
    }

    .mv-logo {
        bottom: 60px;
        right: 0;
    }

}

.kanshu-bg {
    background: url(../images/oen-bg.svg) no-repeat 10% 40px;
}

.oen-bg {
    background: url(../images/oen-bg.svg) no-repeat 85% 40px;
}

@media screen and (max-width: 768px) {
    .kanshu-bg {
        background: url(../images/oen-bg.svg) no-repeat center center;
    }

    .oen-bg {
        background: url(../images/oen-bg.svg) no-repeat center center;
    }
}


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

/* 矢印のアニメーション部分 */
.scroll::before {
    animation: scroll 2s infinite;
    border-bottom: 1px solid #fff;
    border-left: 1px 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;
    }
}

@media screen and (max-width: 768px) {
    .scroll {
        bottom: 30px;
    }
}

/* ------------------------------------------
  introduction
--------------------------------------------- */
.introduction:before {
    content: "";
    display: block;
    width: 760px;
    height: 370px;
    position: absolute;
    background: #f1f1f1;
    right: 0;
    top: 100px;
    border-radius: 16px 0 0 16px;
    z-index: -1;
}

@media screen and (max-width: 768px) {
    .introduction:before {
        width: 80vw;
    }
}

/* ------------------------------------------
  lineup
--------------------------------------------- */
.lineup {
    background: url(../images/lineup-bg.svg) center 20px no-repeat;
}

@media screen and (max-width: 768px) {
    .lineup {
        background-size: 130%;
        background-position: -80px 40px;
    }
}

/* ------------------------------------------
  kodawari
--------------------------------------------- */
.kodawariBox + .kodawariBox {
    margin-top: 4rem;
}

.kodawariBox:before {
    content: "";
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    background-size: cover !important;
}

@media screen and (max-width: 768px) {
    .kodawariBox + .kodawariBox {
        margin-top: 2rem;

    }

    .kodawariBox:before {
        content: none;
    }
}

.kodawariBox01 {
    min-height: 410px;
}

.kodawariBox01:before {
    background: url(../images/kodawari01_pc.webp) no-repeat center right;

}

.kodawariBox02 {
    min-height: 363px;
}

.kodawariBox02:before {
    background: url(../images/kodawari02_pc.webp) no-repeat center left;
    right: 0;
}

.kodawariBox03 {
    min-height: 465px;
}

.kodawariBox03:before {
    background: url(../images/kodawari03_pc.webp) no-repeat center right;

}

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

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

/* ローディングオーバーレイのスタイル */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    /* または任意の色 */
    z-index: 9999;
    /* 最前面に表示 */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s;
}