@charset "UTF-8";

/* index.html 専用設定 */


.mainbox{
    margin:0px !important;
}




/*以下、スライドショー用CSS設定 ############################################################ */

.index-carouselgroup{
    padding: 0px 0;

    width: 100%;
    height: 100vh;
}
.index-carousel{
    width: 100%;
    margin:0 0;
    margin: 0 0;
    white-space:nowrap;
    overflow: hidden;
}

.index-carousel .index-thumb{
    display: block;
    background-color: #fff;
    width: 100%;
    margin:0 0;
    overflow: hidden;
}
.index-carousel .index-thumb img{
    display: block;
    width: 100%;
    height: 100vh;
    position: relative;
    white-space:nowrap;
    overflow: hidden;
    object-fit: cover;
}
.index-carousel .index-thumb img::after{
    display: block;
    content: "";
    padding-bottom:calc(100vh - 0rem);
}

@media screen and (min-width: 768px){
    .index-carousel .index-thumb img{
        /*width: 100%;*/
        /*height: 100vh;*/
        margin:0 auto;
    }
}

.index-carousel .thumbcap-jp{
    display: block;
    text-align: center;
    font-size: 1.3rem;
    padding: 0.3rem 0 0;
    letter-spacing: 0.3rem;
}
.index-carousel .thumbcap-en{
    display: block;
    text-align: center;
    font-size: 0.9rem;
    padding: 0.3rem 0 0.3rem;
    letter-spacing: 0.3rem;
}





/*以下、ビデオ用CSS設定 ############################################################ */

.index-video{
    padding: 0px 0;
}


.index-video-thumb{
    width: 100%;
    margin:0 0;
    margin: 0 0;
    white-space:nowrap;
    overflow: hidden;
}
.index-video-thumb video{
    display: block;
    width: 100%;
    height: 100vh;
    position: relative;
    white-space:nowrap;
    overflow: hidden;
    object-fit: contain;/* contain か cover で設定できます */
}
.index-video-thumb video::after{
    display: block;
    content: "";
    padding-bottom:calc(100vh - 0rem);
}
/* ▼ object-fit: cover のとき、必要な設定です*/
/*
@media screen and (min-width: 768px){
    .index-video-thumb video{
        width: auto;
        height: 100vh;
        margin:0 auto;
    }
}
*/


/*
＜＜このCSSの使い方＞＞
[class="mainbox"]内に、以下のコードを内包して使用してください

                <!-- ▼▼▼▼画像スライドショーデータ -->
                <div class="index-carouselgroup">

                    <div class="index-carousel">
                        <a href="">
                            <p>
                                <span class="index-thumb">
                                    <img alt="Sample Photo" src="images/_sample_photo_1.webp">
                                </span>
                            </p>
                        </a>
                    </div>
                    <div class="index-carousel">
                        <a href="">
                            <p>
                                <span class="index-thumb">
                                    <img alt="Sample Photo" src="images/_sample_photo_2.webp">
                                </span>
                            </p>
                        </a>
                    </div>
                    <div class="index-carousel">
                        <a href="">
                            <p>
                                <span class="index-thumb">
                                    <img alt="Sample Photo" src="images/_sample_photo_3.webp">
                                </span>
                            </p>
                        </a>
                    </div>

                </div>

または

                <!-- ▼▼▼▼動画ブロック -->
                <div class="index-video">
                    <div class="index-video-thumb">
                        <video src="videos/testvideos.mp4" alt="" playsinline autoplay muted loop></video>
                    </div>
                </div>

内容は適宜修正してください

*/







/*以下、本文用CSS設定 ############################################################ */



/* ▼ スライドショー上テキスト（スライドショー要素よりも上にタグライン要素が設置されております）*/
#indexheader{/*スライドショーを内包する.mainboxにidを指定してください*/
    position: relative;
    z-index: 0;
    height: 100vh;
}

.index-tagline{
    width: 100%;
    height: 100vh;

    display: table;
    position: absolute;
    z-index: 1;
}
.index-tagline-bg{
    display: table-cell;
    vertical-align: middle;
    
    text-align: center;
    color: #000;
    overflow: hidden;
    text-shadow:
    0px 0px 0px #fff

    ,
     -2px -2px 0px #fff
     ,
     -2px 2px 0px #fff
     ,
     2px -2px 0px #fff
     ,
     2px 2px 0px #fff

     ,
     -1px -2px 0px #fff
     ,
     -1px 2px 0px #fff
     ,
     1px -2px 0px #fff
     ,
     1px 2px 0px #fff

     ,
     -2px -1px 0px #fff
     ,
     -2px 1px 0px #fff
     ,
     2px -1px 0px #fff
     ,
     2px 1px 0px #fff

    ,
    -1px -1px 0px #fff
    ,
    -1px 1px 0px #fff
    ,
    1px -1px 0px #fff
    ,
    1px 1px 0px #fff

    ,
    0px -2px 0px #fff
    ,
    0px 2px 0px #fff
    ,
    -2px 0px 0px #fff
    ,
    2px 0px 0px #fff

    ;

}
.index-tagline-bg h1{
    font-size: 2.5rem;
    line-height: 2;
    margin-bottom: 2.2rem;
    
}
.index-tagline-bg p{
    font-size: 1.5rem;
    line-height: 2;
    font-family: sans-serif;
}


.index-carouselgroup{
    position: fixed;
}

/* ▼ 冒頭リードテキスト*/

@media screen and (min-width: 768px){
    #indexhtml-17read{
        background-color: #fff;
        padding-top: 40px;
        padding-bottom: 40px;

        background-image: url('../images/indexhtml-17read-bgpc.webp');
        background-position: center;
        background-repeat: repeat-y;

    }
    .indexhtml-17read-mess{
        text-align: center;
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #fffd;
    }


    #indexhtml-17read p{
        line-height: 2.5;
    }
}

@media screen and (max-width: 767px){
    #indexhtml-17read{
        background-color: #fff;
    }
    .indexhtml-17read-mess{
        padding-top: 80px;
        padding-bottom: 80px;
        text-align: center;
        line-height: 2.5;
    }
    #indexhtml-17readimg img{
        width: 100%;
        display: block;
    }
    #indexhtml-17read p{
        line-height: 2.5;
    }

}




/* ▼ 予約ボタン*/
.indexhtml-toreservation{
    background-color: #fff;
}
.indexhtml-toreservation a{
    text-decoration: none;
    display: block;
}

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

    .flex-box{
        display: flex;
    }
    .indexhtml-toreservation-left{
        border-right: #c7c7c7 dotted 3px;
        text-align: center;
        padding-right: 10px;
        margin-right: 30px;

        width: 30%;
    }
    .indexhtml-toreservation-right{
        width: 70%;
    }
}
@media screen and (max-width: 767px){
    .flex-box{
        display: block;
    }
    .indexhtml-toreservation-left{
        border-bottom: #c7c7c7 dotted 3px;
        text-align: center;
        padding-bottom: 10px;
        margin-bottom: 30px;
    }
}

.indexhtml-toreservation-notice{
    text-align: center;
}





.indexhtml-toreservation-button{
    background-color: #c7c7c7;
    text-decoration: none;
    text-align: center;

    padding-top: 20px;
    padding-bottom: 20px;

    line-height: 1.7;
}
.indexhtml-toreservation-button p:nth-child(1){
    font-size: 1.5rem;
}
.indexhtml-toreservation-button p:nth-child(2){
    font-size: 1rem;
}





/* ▼ 基本スタジオ料金表*/
#indexhtml-topics{
    background-color: #ebebeb;
    background-image: url(../images/indexhtml-topic-bg.webp);
    background-position: center;
}

@media screen and (min-width: 768px){
    .indexhtml-topics-thumbnail li{
        float: left;
        margin-right: 20px;
        margin-top: 20px;
        width: 229px;
    }
    .indexhtml-topics-thumbnail li:nth-child(-n+3){
        margin-top: 0px;
    }
    .indexhtml-topics-thumbnail li:nth-child(3n){
        margin-right: 0px;
    }
    .indexhtml-topics-thumbnail li img{
        display: block;
        width: 100%;
    }

    .indexhtml-topics-thumbnail::after{
        content: "";
        display: block;
        clear: both;
    }
}
@media screen and (max-width: 767px){
    .indexhtml-topics-thumbnail li{
        float: left;
        margin-right: 20px;
        margin-top: 20px;
        width: calc(50% - 10px);
    }
    .indexhtml-topics-thumbnail li:nth-child(-n+2){
        margin-top: 0px;
    }
    .indexhtml-topics-thumbnail li:nth-child(2n){
        margin-right: 0px;
    }
    .indexhtml-topics-thumbnail li img{
        display: block;
        width: 100%;
    }

    .indexhtml-topics-thumbnail::after{
        content: "";
        display: block;
        clear: both;
    }
}




/* ▼ 基本スタジオ料金表*/
#indexhtml-charge{
    background-color: #ebebeb;
    position: relative;
}
.indexhtml-charge-table table{
    width: 100%;
}
.indexhtml-charge-table th{
    background-color: #c7c7c7;
    border:1px solid #666;
    padding:0 1rem;
    line-height: 2;
}
.indexhtml-charge-table td{
    background-color: #fff;
    border:1px solid #666;
    padding:0 1rem;
    line-height: 2;

}
#indexhtml-charge::before{
    background-image: url(../images/indexhtml-charge-bg.webp);
    background-repeat: repeat;
    background-position: 0%;
    content: "";
    display: block;
    width: 50%;
    margin-left: 50%;

    height: 140px;
    
    position: absolute;
    margin-top: 28px;
    z-index: 0;
}
#indexhtml-charge::after{
    background-image: url(../images/indexhtml-charge-bg.webp);
    background-repeat: repeat;
    background-position: 100%;
    content: "";
    display: block;

    width: 50%;

    height: 140px;
    
    position: absolute;
    margin-top: -168px;
    z-index: 0;
}
#indexhtml-charge .main-section{
    position: relative;
    z-index: 10;
}





/* ▼ レンタル機材*/
#indexhtml-equipment{
    background-color: #fff;
    
}




.indexhtml-equipment-thumbnail a{
    text-decoration: none;
}
.indexhtml-equipment-thumbnail-l{
    
    width: 100%;
    text-align: center;
    line-height: 1.5;
    background-color: #f0f0f0;
    height: 80px;
    overflow: hidden;
}



@media screen and (min-width: 768px){
    .indexhtml-equipment-thumbnail li{
        float: left;
        margin-right: 20px;
        margin-top: 40px;
        width: 229px;

    }
    .indexhtml-equipment-thumbnail li:nth-child(-n3){
        margin-top: 0px;
    }
    .indexhtml-equipment-thumbnail li:nth-child(3n){
        margin-right: 0px;
    }
    .indexhtml-equipment-thumbnail li img{
        display: block;
        width: 100%;
        height: 312.63px;
        object-fit: cover;
    }

    .indexhtml-equipment-thumbnail::after{
        content: "";
        display: block;
        clear: both;
    }
}
@media screen and (max-width: 767px){
    .indexhtml-equipment-thumbnail li{
        float: left;
        margin-right: 20px;
        margin-top: 40px;
        width: calc(50% - 10px);
    }
    .indexhtml-equipment-thumbnail li:nth-child(-n+2){
        margin-top: 0px;
    }
    .indexhtml-equipment-thumbnail li:nth-child(2n){
        margin-right: 0px;
    }
    .indexhtml-equipment-thumbnail li img{
        display: block;
        width: 100%;
        height: 60vw;
        max-height: 316.77px;

        object-fit: cover;
    }

    .indexhtml-equipment-thumbnail::after{
        content: "";
        display: block;
        clear: both;
    }



    #indexhtml-equipment .main-paragraph-group{
        max-width: 480px;
        margin:auto;
    }

}





/*お知らせ*/
#indexhtml-news{
    background-color: #ebebeb;
}
@media screen and (min-width: 768px){
    #indexhtml-news .main-section-group{
        display: flex;
    }

    #indexhtml-news .main-head-group{
        width: 30%;
        text-align: left;
    }

    #indexhtml-news .main-head-group h1{
        text-align: left;
    }
    #indexhtml-news .main-paragraph-group{
        width: 70%;
        height: 400px;
        overflow-y: scroll;
    }
}



@media screen and (max-width: 767px){

    
    #indexhtml-news .main-paragraph-group{
        width: 100%;
        height: 300px;
        overflow-y: scroll;
    }
}