/* CSS Document */
/*---------------------------------------------
  General Settings
  ---------------------------------------------*/
  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

html,
body {
    margin: 0 auto;
    padding: 0 auto;
}

.swiper-container {
    padding: 0px 0 50px;
    background: #eeeeee;
}

/*---------------------------------------------
  画像ロゴ
  ---------------------------------------------*/
.s-four-text img {
    width: 60%
}

/*---------------------------------------------
  ボタン
  ---------------------------------------------*/
.na_top_btn {
    display: inline-block;
    padding: 10px 37px 10px;
    border-radius: 32px;
    border: 1px #fff solid;
    background-color: none;
    text-decoration: none;
    font-size: 15px;
    color: #fff;
    text-align: center;
    max-width: 225px;
    width: 100%;
}

/*---------------------------------------------
  丸目印の色
  ---------------------------------------------*/
.swiper-pagination-bullet-active {
    background-color: #222;
}

/*---------------------------------------------
  １番上テキスト
  ---------------------------------------------*/

@keyframes slideFromRight {

    0%,
    25% {
        transform: translateX(50px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/*---------------------------------------------
  2番上テキスト
  ---------------------------------------------*/


@keyframes slideFromRightSub {

    0%,
    45% {
        transform: translateX(50px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/*---------------------------------------------
  3番上テキスト
  ---------------------------------------------*/
.s-four-wrap {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.s-four-text,
.s-four-sub {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    color: white;
}


.s-four-textitem,
.s-four-subitem {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    color: white;
}

.s-four-box {
    position: absolute;
    width: 40%;
    left: 0;
    text-align: center;
    color: white;
}

.s-four-boxitem {
    position: absolute;
    width: 40%;
    left: 0;
    text-align: center;
    color: white;
}

.s-four-text {
    top: 12%;
    font-size: 5vw;
}

.s-four-textitem {
/*    top: 20%; */
    font-size: 5vw;
}

.s-four-sub {
    top: 75%;
    font-size: 2vw;
    display: block;
}

.s-four-subitem {
    top: 55%;
    font-size: 2vw;
}

.s-four-box {
    bottom: 0;
    height: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.75);
    text-align: left;
}


.s-four-boxitem {
    bottom: 0;
    height: 100%;
    box-sizing: border-box;
    text-align: left;
}

.swiper-slide-active .walltaiou {
    animation: slideFromRightSub 2.8s ease 0s 1 normal;
}

.swiper-slide-active .s-four-text {
    animation: slideFromRight 2.5s ease 0s 1 normal;
}

.swiper-slide-active .s-four-textitem {
    animation: slideFromRight 4.5s ease 0s 1 normal;
}

.swiper-slide-active .s-four-sub {
    animation: slideFromRightSub 2.8s ease 0s 1 normal;
}

.swiper-slide-active .s-four-subitem {
    animation: slideFromRightSub 5.0s ease 0s 1 normal;
}

/*.swiper-slide-active .s-four-box {
  animation: slideFromRightBox 1.0s ease 0s 1 normal;
}*/


.s-four-subitemno {
    position: absolute;
    font-size: 16px;
    width: 100%;
    height: 100vh;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    /* top: 337px; */
    line-height: 25px;
    margin: 0 auto;
}


.swiper-slide-active .s-four-boxitem {
    animation: slideFromRightBox 1.0s ease 0s 1 normal;
}


@keyframes slideFromRightBox {

    0%,
    65% {
        transform: translateX(200%);
    }

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

.swiper-container {
    width: 100%;
}

.swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.swiper-containersp,
.swiper-containeritem,
img.top_bunner__for_sp {
    display: none;
}



/* 以下のメディアのMaxをすべて固定している↓ */
@media screen and (max-width:639px) {
    /*スマホ用のcssを記述*/
    img.top_bunner__for_sp {
        display: block;
    }
    .s-four-box {
        background: #000000;
    }
    .na_pc {
        display: none;
    }
    .s-four-subitemno {
        bottom: 20%;
    }
    /*---------------------------------------------
ページ送り
  ---------------------------------------------*/
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 22px !important;
    }
    .s-four-wrap>a img {
        height: calc(100vh - 23vw);
        object-fit: cover;
    }

    .s-four-wrap>img {
/*
        height: 450px;
        */
        height: calc(100vh - 111px);/* 全画面化 */
        object-fit: cover;
        width: 100%;
    }

    .swiper-container {
        display: none;
    }

    .swiper-containersp {
        display: block;
        width:100vw;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .swiper-containeritem {/* 各商品ページトップスライダーl外装 */
        display: block;
/*
        height: 450px;
        overflow-y: hidden; 方向を制限しても非表示が解除できないので指定ごと非表示化
*/
        height: calc(100vh - 111px);/* 全画面化 */
        position: relative;
    }

    .s-four-text {
        top: 4%;
        font-size: 5vw;
    }

    .s-four-textitem {
        /*top: 12%;*/
        bottom:120px;
        font-size: 3vw;
    }


    .s-four-text2 {
        top: 2%;
        font-size: 5vw;
    }


    .s-four-text img {
        width: 80%;
        max-width: 400px;
    }

    .s-four-text2 img {
        width: 66%;
    }

/*
    .swiper-container {}
*/
    .swiper-button-next,
    .swiper-button-prev {
        top: 30%;
    }

    .s-four-box {
        width: 100%;
    }

    .s-four-boxitem {
        width: 100%;
    }


    /*---------------------------------------------
ボタン
  ---------------------------------------------*/
    .na_top_btn {
        padding: 2px 20px 2px;
        font-size: 12px;
        width: auto;
    }

    .s-four-sub {
        top: 34%;
        font-size: 6.0vw;
        line-height: 1.2;
    }

    .s-four-subitem {
        top: 34%;
        font-size: 5vw;
        line-height: 22px;
    }

    body .swiper-container-horizontal>.swiper-pagination-bullets {
        position: relative;
        bottom: 0px;
    }


    /*---------------------------------------------
 黒ボックス
  ---------------------------------------------*/
    @keyframes slideFromRightBox {

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

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

        .swiper-slide-active .s-four-text {
            animation: slideFromRight 3.0s ease 0s 1 normal;
        }

        .swiper-slide-active .s-four-text2 {
            animation: slideFromRight 4.5s ease 0s 1 normal;
        }

        .swiper-slide-active .s-four-sub {
            animation: slideFromRightSub 4.0s ease 0s 1 normal;
        }

        .swiper-slide-active .s-four-subitem {
            animation: slideFromRightSub 5.0s ease 0s 1 normal;
        }

        .swiper-slide-active .s-four-box {
            animation: slideFromRightBox 4.0s ease 0s 1 normal;
        }

        .swiper-slide-active .s-four-boxitem {
            animation: slideFromRightBox 4.0s ease 0s 1 normal;
        }



    }


    @media screen and (min-width:320px) {
        /*スマホ用のcssを記述*/
        .products_top_logo {
          width:100%;
          fill:#ffffff;
        }

        .s-four-boxitem {
            height: 24%;
        }

        .s-four-sub {
            top: 44%;
        }

        .s-four-subitem {
            top: 43%
        }

        .s-four-text2 img {
            width: 92%;
        }

        .s-four-text2 {
            top: 6%;
            font-size: 5vw;
        }

        .s-four-textitem {
            top: 30%;
            font-size: 5vw;
        }

        .swiper-container-vertical>.swiper-pagination-bullets {
            top: 40%;
        }

        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 110px;
        }

        .s-four-subitemno svg {
            width: 80%;
            /* top: -53px; */
            /* position: static; */
        }

    }


    @media screen and (min-width:360px) {

        /*スマホ用のcssを記述*/
        .s-four-boxitem {
            height: 31%;
        }


        .s-four-sub {
            top: 38%;
        }

        .s-four-subitem {
            top: 38%;
        }

        .s-four-text {
            top: 6%;
        }

        .s-four-textitem {
            top: 60%;
            font-size: 3.5vw;
        }

        .na_top_btn {
            padding: 0px 16px 0px;
            font-size: 14px;
            
        }

        .s-four-text2 img {
            width: 95%;
        }

    }


    @media screen and (min-width:370px) {

        /*スマホ用のcssを記述*/
        .s-four-boxitem {
            height: 42%;
        }

        .s-four-sub {
            top: 65%;
        }
        .s-four-text2 img {
            width: 95%;
        }

        .s-four-text {
            top: 0%;
        }

        .s-four-subitem {
            top: 30%;
        }

        .s-four-textitem {
            top: 60%;
            font-size: 3.5vw;
        }

    @media screen and (min-width:375px) {

        .s-four-textitem {
            top: 65%;
            font-size: 5vw;
        }

    @media screen and (min-width:414px) {

        .s-four-textitem {
            top: 65%;
            font-size: 5vw;
        }

        /*---------------------------------------------
ページbtn
  ---------------------------------------------*/

        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 129px;
        }

    }


    @media screen and (min-width:375px) {
        /*---------------------------------------------
ページbtn
  ---------------------------------------------*/

        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 210px;
        }
/*
        .s-four-subitemno {
            top: 392px;
        }
*/
    }


    @media screen and (min-width:414px) {
        /*スマホ用のcssを記述*/

        .s-four-boxitem {
            height: 50%;
        }

/*
        .s-four-textitem {
            top: 48%;
        }

        .s-four-subitemno {
            top: 392px;
        }
*/
        .s-four-sub {
            top: 66%;
        }

        /*---------------------------------------------
ページbtn
  ---------------------------------------------*/

        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 338px;
        }

    }
    @media screen and (min-width:1080px) {

        /*1080pxcssを記述*/
        .s-four-sub {
            top: 65%;
        }

    }
}
@media screen and (max-width:420px) {
    .s-four-wrap>a img{
        height: calc(100vh - 130px);
        object-fit: cover;
/*        transform: scale(1.2);*/
    }    
    body#fs_Top .s-four-box {
        position:absolute;
        bottom: 0;
        height: 26vw;
    }
}
    /*---------------------------------------------
  Style End
  ---------------------------------------------*/