body {
    font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
    color: white;
}

h2 {
    font-size: 24px;
    text-align: center;
}

h3 {
    font-size: 18px;
    text-align: center;
}

.fv {
    width: 100%;
}

.fv img {
    width: 100%;
}

.onesize img,
.hotel img,
.cafe img {
    margin: auto;
    text-align: center;
}

.is-anime.mask {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.is-anime.mask.active {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
}

.is-anime.mask.slow {
    -webkit-transition: 1.5s ease-in-out;
    transition: 1.5s ease-in-out;
}

.is-anime.fade {
    -webkit-filter: blur(20px);
    filter: blur(20px);
    opacity: 0;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

.is-anime.fade.active {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}



/* 基本のフェードインとスライドアップ効果 */
.slide-up-fade-in {
    opacity: 0;
    transform: translateY(200px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* アクティブ状態：最終的な表示状態 */
.slide-up-fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

/* スローアニメーション効果 */
.slide-up-fade-in.slow {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* クイックアニメーション効果 */
.slide-up-fade-in.fast {
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.blackback {
    background-image: url(../img/backblack.jpg);
    background-size: cover;
    background-position: center;
    height: fit-content;
    color: white;
}

.whiteback {
    background-image: url(../img/backwhite.jpeg);
    background-size: cover;
    background-position: center;
    height: fit-content;
    color: #4d4d4d;
}









.cta {
    text-align: center;
    font-size: 20px;
    display: inline-block;
    /* ボタン化 */
    background-color: white;
    /* ボタン色 */
    color: #4d4d4d;
    /* 文字色 */
    padding: 5px 40px;
    /* 内側の余白 */
    border: 2px solid #4d4d4d;
    /* 枠線 */
    border-radius: 0;
    /* 四角にする（丸めない） */
    text-decoration: none;
    /* リンクの下線を消す */
    margin: auto;
}

@media screen and (min-width: 768px) {
    .sp {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .pc {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .fv {
        width: 100%;
    }

    .fv img {
        width: 100%;
    }

    .plantext {
        color: white;
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 20px;
        line-height: 2.5;
    }

    .paddingtext {
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 20px;
        line-height: 2.5;
    }

    .vientomain {
        font-size: 72px;
        text-align: center;
    }

    .vientosub {
        font-size: 24px;
        text-align: center;
    }

    .vertical-text {
        writing-mode: vertical-rl;
        /* 縦書き、右から左へ */
        text-orientation: mixed;
        /* 漢字や英字の回転調整 */
        font-size: 40px;
    }

    .vertical-textblack {
        writing-mode: vertical-rl;
        /* 縦書き、右から左へ */
        text-orientation: mixed;
        /* 漢字や英字の回転調整 */
        font-size: 40px;
    }

    .flexbox {
        display: flex;
        justify-content: space-between;
    }

    .flexbox img {
        width: 80%;
    }

    .maxwidth {
        max-width: 1280px;
        width: 60%;
        margin: auto;
    }

    .japandimain {
        font-size: 72px;
        text-align: center;
        font-family: "futura-pt", sans-serif;
        font-weight: 400;
        font-style: normal;

    }

    .japandisub {
        font-size: 24px;
        text-align: center;
    }
}

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

    .fv img {
        width: 100%;
    }

    .plantext {
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 16px;
        width: 90%;
        margin: auto;
    }

    .paddingtext {
        padding-top: 30px;
        padding-bottom: 30px;
        font-size: 16px;
        width: 90%;
        margin: auto;
    }

    .vientomain {
        font-size: 26px;
        text-align: center;
    }

    .vientosub {
        font-size: 18px;
        text-align: center;
    }

    .vertical-text {
        writing-mode: vertical-rl;
        /* 縦書き、右から左へ */
        text-orientation: mixed;
        /* 漢字や英字の回転調整 */
        font-size: 20px;
    }

    .vertical-textblack {
        writing-mode: vertical-rl;
        /* 縦書き、右から左へ */
        text-orientation: mixed;
        /* 漢字や英字の回転調整 */
        font-size: 20px;
    }

    .flexbox {
        display: flex;
        justify-content: space-between;
    }

    .flexbox img {
        width: 80%;
    }

    .maxwidth {
        width: 90%;
        margin: auto;
    }

    .japandimain {
        font-size: 26px;
        text-align: center;
        font-family: "futura-pt", sans-serif;
        font-weight: 400;
        font-style: normal;

    }

    .japandisub {
        font-size: 18px;
        text-align: center;
    }
}