@charset "UTF-8";
@import url("background_deco.css");


/* ファーストビュー */
/* #first_view{
    width: 100%;
    padding-top: 42.5%;
    position: relative;
    background-image: url(../img/index/fv.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#first_view .catch{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
} */


/* height指定ver */
#first_view{
    height: 640px;
    background-image: url(../img/index/fv.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#first_view .catch{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* height指定ver */


#first_view .font_logo{
    width:20rem;
    height: 7.5rem;
    display: block;
    margin: 1rem auto;
    background-image: url(../img/index/font_logo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#first_view .message_jp{
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: bold;
    margin: .25rem 0;
    letter-spacing: 4px;
}

#first_view .message_en{
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    margin: .25rem 0;
    letter-spacing: 4px;
}

#first_view .sp_contact{
    display: none;
}

#first_view #top_slider{
    display: none;
}

/* 紹介、お知らせ */
section#intro{
    padding-top: 8rem;
    max-width: 1300px;
}

#intro h2{
    padding-bottom: 1rem;
}
#intro h5{
    padding-bottom: 2rem;
}

#intro .about_us,
#intro .news{
    text-align: center;
    width: 50%;
    min-width: 20rem;
    margin-bottom: 5rem;
}

#intro .about_us .content p,
#intro .news .content p{
    font-size: 1rem;
    line-height: 1.75rem;
    padding: .5rem;
}

#intro .news .content{
    width: 400px;
    max-width: 100%;
    margin: 0 auto;
    max-height: 300px;
    overflow: auto;
    padding: 1rem;
}

/* .intermediate_img{
    width: 100%;
    padding-top: 33%;
    background-image: url(../img/index/intermadiate.png);
    background-size: cover;
    background-position: center;
} */

/* スマホサイズの時に表示 */
/* #intro .intermediate_img{
    display: none;
    width: 100%;
    padding-top: 33%;
    background-image: url(../img/index/intermadiate.png);
    background-size: cover;
    background-position: center;
    margin-bottom: 2rem;
} */

/* スマホサイズの時に表示 */
.intermediate_img{
    display: none;
    width: 100%;
    height: 160px;
    background-image: url(../img/index/intermadiate.png);
    background-size: cover;
    background-position: center;
    margin-bottom: 2rem;
}
/* height指定ver */


/* システム */

#system h2{
    padding-bottom: 1.25rem;
}
#system h5{
    padding-bottom: 1rem;
}

#system .system{
    text-align: center;
    margin-bottom: 2rem;
}

#system .system .content p{
    font-size: 1.125rem;
    font-weight: bold;
    line-height: 2rem;
    padding: .5rem;
    word-break: keep-all;
    /* white-space: nowrap; */
}

#system .system .content p span{
    font-size: .7rem;
    line-height: 1.75rem;
}

#system .plan{
    margin: 0 auto;
    padding: 0 5%;
}

#system .plan .wrapper{
    width: 33%;
    min-width: 10rem;
    padding: 1rem 0;
}

#system .plan .item{
    text-align: center;
    padding: 1rem;
}

#system .plan .wrapper.first .item,
#system .plan .wrapper.second .item{
    border-right: 1px solid #707070;
}

#system .plan .item .comment{
    font-size: .8rem;
    line-height: 1.5rem;
    color: #644D00;
}

#system .plan .item .ballon{
    position: relative;
    display: inline-block;
    width: 100%;
    padding: .75rem 0;
    margin: .25rem 0 1.5rem 0;
}

#system .plan .item .ballon:before{
    content: "";
    position: absolute;
    display: block;
    bottom: -1rem;
    left: 50%;
    margin-left: -.5rem;
    border: solid transparent;
}

#system .plan .wrapper.first .item .ballon{
    background: #4CCCCC;
}

#system .plan .wrapper.first .item .ballon:before{
    border-top: solid #4CCCCC;
    border-width: 1rem .5rem 0 .5rem;
}

#system .plan .wrapper.second .item .ballon{
    background: #FFB236;
}

#system .plan .wrapper.second .item .ballon:before{
    border-top: solid #FFB236;
    border-width: 1rem .5rem 0 .5rem;
}

#system .plan .wrapper.third .item .ballon{
    background: #519B4B;
}

#system .plan .wrapper.third .item .ballon:before{
    border-top: solid #519B4B;
    border-width: 1rem .5rem 0 .5rem;
}

#system .plan .item .ballon p{
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: bold;
}

#system .plan .item .price{
    font-size: 1.75rem;
    line-height: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

#system .plan .item .price span{
    font-size: .75rem;
    line-height: 1.5rem;
    font-weight: normal;
    letter-spacing: 1px;
}

#system .plan .item .desc{
    color: #897400;
}

#system .plan .item .desc span{
    font-size: 1.25rem;
}

#system .plan .item .annotation{
    font-size: .7rem;
    line-height: 1.75rem;
}

#system .apply{
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
}

#system .apply p{
    font-weight: bold;
    margin-bottom: 2rem;
}

#system .apply a{
    font-size: 1.5rem;
    color: #ffffff;
    background-color: #000000;
    display: inline-block;
    padding: 0.75rem 2rem;
}


/* 初めての方へ */
#start {
    width:100%;
    padding-top: 5rem;
}

#start .start .wrapper h2,
#start .start .wrapper h5,
#start .start .wrapper .view_more a{
    padding-bottom: 2rem;
    color: #ffffff;
}

#start .start .wrapper p{
    line-height: 2rem;
    white-space: normal;
    word-break: break-all;
}

#start .start .wrapper .view_more{
    width: 50%;
    max-width: 18rem;
    background-color: #188E18;
    margin: 3rem auto;
    border-radius: 2.5rem;
}

#start .start .wrapper .view_more a{
    font-size: 1.25rem;
    line-height: 4rem;
    padding: 1rem 4rem;
}

/* #start .image{
    width: 50%;
    padding-top: 32%;
    background-image: url(../img/index/start_image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
} */


/* height指定ver */
#start .start{
    width:50%;
    height: 480px;
    background-image: url(../img/index/start_l.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom right;
}

#start .start .wrapper{
    height: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 3rem 0;
}

#start .image{
    width: 50%;
    height: 480px;
    background-image: url(../img/index/start_image.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#start .start .description{
    line-height: 2rem;
    padding: 0.5rem;
    word-break: keep-all;
    white-space: nowrap;
}
/* height指定ver */


/* ギャラリー */
#gallery{
    text-align: center;
    padding-top: 5rem;
    position: relative;
}

#gallery h2,
#gallery h5{
    padding-bottom: 2rem;
}

#gallery .instagram-gallery{
    width: 100%;
}

#gallery .instagram-gallery__list{
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

#gallery .instagram-gallery__item{
    min-width: 20%;
    width: 20%;
    padding-top: 20%;
    position: relative;
}

#gallery .instagram-gallery__item a{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#gallery .instagram-gallery__item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#gallery .view_more{
    width: 50%;
    max-width: 18rem;
    background-color: #188E18;
    margin: 3rem auto;
    border-radius: 2.5rem;
}

#gallery .view_more a{
    font-size: 1.25rem;
    line-height: 4rem;
    padding: 1rem 4rem;
    color: #ffffff;
}

/* タブレットサイズ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #first_view .font_logo{
        width:15rem;
        height: 5.625rem;
    }
    
    #first_view .message_jp{
        font-size: 1.5rem;
    }
    
    #first_view .message_en{
        font-size: 1.3rem;
    }

    #intro .about_us .content p,
    #intro .news .content p,
    #system .system .content p{
        font-size: .8rem;
    }

    #system .plan .item .comment,
    #system .system .content p span{
        font-size: .75rem;        
    }

    #start .start .wrapper p{
        line-height: 1.5rem;
    }

    #start .start .wrapper .view_more{
        margin: 1.5rem auto;
    }
    
    #start .start .wrapper .view_more a{
        font-size: 1rem;
        line-height: 2.5rem;
        padding: 1rem 2.5rem;
    }
    
    #start .start .wrapper .description p{
        font-size: .8rem;
    }

    #gallery .view_more{
        margin: 1.5rem auto;
    }
    
    #gallery .view_more a{
        font-size: 1rem;
        line-height: 2.5rem;
        padding: 1rem 2.5rem;
    }
}

/* スマホサイズ */
@media screen and (max-width: 768px) {

    #start{
        padding-top: 0;
    }

    #first_view{
        width: 100%;
        height: 100vh;
        background-image:none;
    }

    #first_view #top_slider{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }

    #first_view #top_slider .sp_slider{
        width: 100%;
        height: 100vh;
        background-size: cover;
        background-position: center;
    }

    #first_view #top_slider .sp_slider.img1{
        background-image: url("/img/index/fv_sp1.png");
    }
    #first_view #top_slider .sp_slider.img2{
        background-image: url("/img/index/fv_sp2.png");
    }

    #first_view .catch{
        top:2rem;
        bottom: auto;
        height: auto;
    }

    #first_view .font_logo{
        width:10rem;
        height: 3.75rem;
    }
    
    #first_view .message_jp, #first_view .message_en{
        display: none;
    }
    
    #first_view .sp_contact{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 3rem;        
        display: flex;
        background-color: #000000;
        position: fixed;
        z-index: 1000;
    }
    
    #first_view .sp_contact .tel{
        color: #ffffff;
        font-size: 1rem;
        font-weight: bold;
        width:60%;
        padding: 0 .25rem;
        display: flex;
        align-items: center;
    }
    
    #first_view .sp_contact .tel span{
        color: #ffffff;
        font-size: 1rem;
        padding:0 .5rem;
        font-weight: normal;
    }

    #first_view .sp_contact .tel a{
        color: #ffffff;
    }
    
    #first_view .sp_contact .reserve{
        color: #000000;
        background-color: #ffffff;
        font-size: 1rem;
        font-weight: bold;
        width: 40%;
        padding: 0 0 0 1rem;
        word-break: keep-all;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    footer{
        padding-bottom: 5rem;
    }

    #intro .about_us .content p,
    #intro .news .content p{
        font-size: .75rem;
        padding: .1rem;
    }
    #system{
        padding-top: 2rem;
    }
    #system .system .content p{
        font-size: .75rem;
        padding: .1rem;
        line-height: 1.5rem;
    }

    #system .system .content p span{
        font-size: .5rem;
    }

    #system .system{
        margin: 0 auto 2rem;
        width: 350px;
        max-width: 100%;
    }

    #system .plan{
        padding: 0;
    }

    #system .plan .wrapper{
        width: 50%;
    }

    #system .plan .item{
        padding: .25rem;
    }
    
    #system .plan .wrapper.first .item,
    #system .plan .wrapper.second .item{
        border-right: none;
    }

    #system .plan .item .comment{
        letter-spacing: 0px;
        font-size: .5rem;
    }
    #system .plan .item .ballon{
        padding: .5rem 0;
    }

    #system .plan .item .ballon p{
        font-size: .9rem;
    }

    #system .plan .item .price{
        font-size: 1.25rem;
    }

    #system .plan .item .annotation{
        font-size: .5rem;
    }

    #system .apply a{
        font-size: 1rem;
        border-radius: 2rem;
    }


    /* height指定ver */
    #start .start{
        width: 100%;
        height: 320px;
        background-image: url(../img/index/start_l.png);    
    }

    #start .image{
        width: 0;
        height: 0;
    }
    /* height指定ver */

    
    #start .start .wrapper h2,
    #start .start .wrapper h5,
    #start .start .wrapper .view_more a{
        padding-bottom: 1rem;
    }

    #start .start .wrapper p{
        line-height: 1.5rem;
        font-size: .75rem;
    }

    #start .start .wrapper .view_more{
        margin: 1rem auto;
    }
    
    #start .start .wrapper .view_more a{
        font-size: 1rem;
        line-height: 2rem;
        padding: 0 2rem;
    }    


    /* height指定ver */
    #gallery .image{
        height: 250px;
    }
    /* height指定ver */


    #gallery .view_more{
        margin: 2rem auto 1rem;
    }
    
    #gallery .view_more a{
        font-size: 1rem;
        line-height: 2rem;
        padding: 0 2rem;
    }

    .intermediate_img{
        display: block;
    }

    @media screen and (max-width: 399px) {
        #first_view .sp_contact .tel span{
            padding-left: 0;
        }
        #first_view .sp_contact .reserve{
            padding-left: .375rem;
        }
        #first_view .sp_contact{
            height: 4rem;
        }

        #system .plan.flex_center{
            display: block;
        }
        #system .plan .wrapper{
            width: 100%;
        }
        #system .plan .wrapper.third{
            margin-bottom: 2.5rem;
        }
    }

}