@charset "utf-8";

@font-face {
    font-family: 'NotoSansJP-Medium';
    src: url('../images/fonts/NotoSansJP-Medium.woff') format('woff');
}

@font-face {
    font-family: 'NotoSansJP-SemiBold';
    src: url('../images/fonts/NotoSansJP-SemiBold.woff') format('woff');
}

@font-face {
    font-family: 'LINESeedJP_OTF_Rg';
    src: url('../images/fonts/LINESeedJP_OTF_Rg.woff') format('woff');
}

@font-face {
    font-family: 'LINESeedJP_OTF_Bd';
    src: url('../images/fonts/LINESeedJP_OTF_Bd.woff') format('woff');
}

body {
    margin: 0;
    padding: 0;
    background-color: #fefcf3;
    color: #38A67F;
    font-family: 'LINESeedJP_OTF_Rg';
    font-size: 100%;
}

.title_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
}

.title_logo {
    position: absolute;
    left: calc((480 / 1920) * 100vw);
    top: calc(160 * (1080 * (100vw / 1920)) / 1080);
    width: calc((140 / 1920) * 100vw);
}

/* タイトルエリア */
.title_area {
    position: absolute;
    left: 0;
    top: calc(110 * (1080 * (100vw / 1920)) / 1080);
    width: 100vw;
    height: calc(164 * (1080 * (100vw / 1920)) / 1080);
    text-align: center;
}

.title_text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #02A66A;
    font-family: 'NotoSansJP-SemiBold';
    font-size: 3vw;
    margin: 0;
}

.subtitle {
    font-size: 1.7vw;
}

.h2_text {
    position: absolute;
    top: calc(310 * (1080 * (100vw / 1920)) / 1080);
    width: 100vw;
    text-align: center;
    font-family: 'NotoSansJP-Medium';
    font-weight: 500;
    font-size: 2.6vw;
}

.swiper {
    position: absolute;
    left: 0;
    top: calc(460 * (1080 * (100vw / 1920)) / 1080);
    width: 100vw;
    height: calc(465 * (1080 * (100vw / 1920)) / 1080);
}

.swiper-wrapper {
    height: 100%;
}

.swiper-slide {
    margin: calc((10 / 1920) * 100vw);
    width: calc((560 / 1920) * 100vw);
    height: calc(445 * (1080 * (100vw / 1920)) / 1080);
    background-color: #f1c22e;
    border-radius: calc(25 * (1080 * (100vw / 1920)) / 1080);
    text-align: center;
}

.slide_img {
    width: calc((450 / 1920) * 100vw);
    height: calc(252 * (1080 * (100vw / 1920)) / 1080);
    margin-top: calc(25 * (1080 * (100vw / 1920)) / 1080);
    margin-bottom: calc(10 * (1080 * (100vw / 1920)) / 1080);
    object-fit: cover;
}

.swiper-button-prev {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    width: calc((89 / 1920) * 100vw);
    height: calc(158 * (1080 * (100vw / 1920)) / 1080);
    z-index: 999;
}

.swiper-button-prev::after {
    display: none;
}

.swiper-button-prev img {
    width: calc((89 / 1920) * 100vw);
    height: calc(158 * (1080 * (100vw / 1920)) / 1080);
}

.swiper-button-next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    width: calc((89 / 1920) * 100vw);
    height: calc(158 * (1080 * (100vw / 1920)) / 1080);
    z-index: 999;
}

.swiper-button-next::after {
    display: none;
}

.swiper-button-next img {
    width: calc((89 / 1920) * 100vw);
    height: calc(158 * (1080 * (100vw / 1920)) / 1080);
}

.swipe_finger {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-top: 0;
    width: calc((213 / 1920) * 100vw);
    height: calc(216 * (1080 * (100vw / 1920)) / 1080);
    z-index: 999;
}

.swipe_finger img {
    width: calc((213 / 1920) * 100vw);
    height: calc(216 * (1080 * (100vw / 1920)) / 1080);
}

.videotitle {
    color: #111;
    font-size: 1.4vw;
    line-height: 1.2em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.videotitle span {
    display: inline-block;
    font-size: 1.2vw;
}

.creationyear {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(50 * (1080 * (100vw / 1920)) / 1080);
    color: #111;
    font-size: 1.2vw;
    line-height: 1.3em;
}

.playtime {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(12 * (1080 * (100vw / 1920)) / 1080);
    color: #111;
    font-size: 1.2vw;
}

/* フッター */
.footer {
    position: absolute;
    left: calc((68 / 1920) * 100vw);
    top: calc(950 * (1080 * (100vw / 1920)) / 1080);
}

.footer_button {
    display: flex;
    align-items: center;
}

.btn_back img {
    width: calc((100/ 1920) * 100vw);
    height: calc(100 * (1080 * (100vw / 1920)) / 1080);
    cursor: pointer;
}

.back_text {
    font-size: 1.4vw;
    font-weight: 500;
    margin-left: calc((5 / 1920) * 100vw);
}


@media screen and (max-width: 767px) and (orientation: portrait) {
    .title_img {
        display: none;
    }
    .title_logo {
        left: 10vw;
    }
    .title_text {
        width: 100%;
        font-size: 5vw;
    }
    .h2_text {
        left: 50%;
        transform: translateX(-50%);
        width: 90vw;
        font-size: 4.2vw;
    }
    .swiper {
        top: 35vw;
        width: 100vw;
        height: 60vw;
    }
    .swiper-wrapper {
        height: 100%;
    }
    .swiper-slide {
        margin: 2vw;
        width: 80vw!important;
        height: 55vw;
        background-color: #f1c22e;
        border-radius: calc(25 * (1080 * (100vw / 1920)) / 1080);
        text-align: center;
    }
    .slide_img {
        width: 70vw;
        height: 38vw;
        margin-top: 3%;
        margin-bottom: 1%;
        object-fit: cover;
    }
    .videotitle {
        font-size: 3vw;
    }
    .playtime {
        font-size: 2.4vw;

    }
    .footer {
        display: none;
    }
}