body {
    background-color: #FFFFFF;
}


img {
    width: 100%;

    vertical-align: bottom;
}
@media print, screen and (max-width: 665px) {
    /* #fullpage img {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
    } */

    #fullpage img {
        position: absolute;
        top: 50%;
        left: 0;

/* width: 100%; */
        /* height: 100%; */

        -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
                transform: translate(0, -50%);

        object-fit: cover;
    }
}

.pc-only {
    display: block;
}
.sp-only {
    display: none;
}
@media print, screen and (max-width: 665px) {
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
}


/* スライド　コントロール */
.fp-slides {
    transform: translate3d(0, 0, 0);
}
.fp-controlArrow {
    margin-top: 0;
}
.fp-controlArrow.fp-next,
.fp-controlArrow.fp-prev {
    /* top: 55.102%; */
    top: 52.102%;

    width: 1.875%;
    height: 3.33333333333333%;

    border: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.fp-controlArrow.fp-next {
    right: 0.9895%;

    background-image: url(images/arrow-gray.png);
}
.fp-controlArrow.fp-prev {
    left: 1.40625%;

    transform: rotateZ(180deg);

    background-image: url(images/arrow-gray.png);
}


/* スライド内　共通 */
.slide-inner {
    position: relative;
    height: 100%;
}
.slide-inner .panel {
    height: 100%;
}
.panel {
    position: relative;
}
/* 写真 */
.panel .photo {
    position: relative;

    overflow: hidden;

    width: 100%;
}
@media print, screen and (max-width: 665px) {
    .fp-slides {
        height: 100vmax; /* IE用 フォールバック */
        height: 100vh; /* フォールバック */
        height: -moz-available;
        height: -webkit-fill-available;
        height:         fill-available;
    }
    .fp-controlArrow.fp-next,
    .fp-controlArrow.fp-prev {
        top: auto;
        bottom: 3.7383vw;

        width: 6.542vw;
        height: 6.542vw;

        background-image: url(images/arrow-gray.png);
    }
    .fp-controlArrow.fp-next {
        right: 2.2056vw;
    }
    .fp-controlArrow.fp-prev {
        left: 2.2056vw;
    }


    .panel .photo {
        width: 100%;
        padding-top: 177.8666%;
    }
}


/* スマホの横回転の調整 */
.slide-inner .panel {
    display: table;

    width: 100%;
    height: 100%;
}
.max-photo {
    display: table-cell;

    vertical-align: middle;
}
.panel .max-photo img,
.panel .photo img {
    position: relative;
    top: 0;
    left: 0;

    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}

@media (orientation: landscape) and (min-width: 665px) {
    /* ここに横向きの画面に適用したいスタイルを記述します */
    .panel .max-photo img,
    .panel .photo img {
        position: absolute;
        top: 50%;
        left: 0;

/* width: 100%; */
        /* height: 100%; */

        -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
                transform: translate(0, -50%);

        object-fit: cover;
    }
}

/* 縦向きでかつ画面幅が 665 以上の場合に適用 */
@media (orientation: portrait) and (max-width: 665px) {
    .max-photo {
        vertical-align: bottom;
    }
}

/* 最終ページの最初へ行くボタン */
.btn-page {
    position: absolute;
    z-index: 1;
    width: 4%;
    top: 50.8%;
    right: 0;
}
@media print, screen and (max-width: 655px) {
    .btn-page {
        width: 9.4%;
        top: auto;
        bottom: 2.7383vw;
    }
    #fullpage .btn-page img {
        position: relative;
        top: 0;
        left: 0;
        transform: initial;
    }
}
