@charset "UTF-8";

/*========All=========*/

/*セクションタイトル設定*/

h1 {
    font-size: 30px;
    color: #edecea;
    box-sizing: border-box;
    background-color: #323B60;
    width: 175px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 1.5px solid #edecea;
    outline-offset: -15px;
}

.title {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.title-long {
    width: 210px;
}


/*------キービジュアル-----*/
#kv {
    position: relative;
}


#kv .Top_slider {
    width: 100%;
}

#kv .Top_slider div {
    height: 600px;
}

#kv .kv-text {
    font-family: "Tangerine", cursive;
    font-weight: 400;
    font-size: 10vw;
    color: #F6F7EC;
    position: absolute;
    bottom: 3%;
    left: 3%;
    text-shadow: #e57fcd 5px 0 5px;
    z-index: 2;
}

/* ---slickの設定--- */

/* KVの高さ設定 */
.slick-img img {
    height: 100vh;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    width: 100%;
}


/*------サービス-----*/

#service {
    margin-top: 100px;
}

#service ul {
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;
}

#service .service-blk {
    position: relative;
    width: 32%;
    overflow: hidden;
}

#service .service-blk .photo img {
    width: 100%;
    vertical-align: top;
    transition: all 0.75s ease;
    transform: scale(1);
}

#service .service-blk .photo:hover img {
    transform: scale(1.1);
}

#service p {
    font-family: "Tangerine", cursive;
    font-weight: 700;
    font-style: normal;
    font-size: 4rem;
    color: #323B60;
    white-space: nowrap;
}

#service .service-text-l {
    position: absolute;
    top: 50%;
    left: 40%;
}

#service .service-text-m {
    position: absolute;
    top: 30%;
    left: 50%;
}

#service .service-text-r {
    position: absolute;
    top: 10%;
    left: 50%;
}

#service a:hover {
    cursor: pointer;
}

/*------ギャラリー-----*/

#gallery {
    background-color: #e6e6e6;
    padding: 20px 0 50px 0;
}

#gallery .slider-img {
    width: 180px;
    height: 180px;
}

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

/*------インフォメーション-----*/

#information {
    padding-top: 20px;
}

#information .info-blk {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

#information .info-blk dl {
    width: 600px;
    align-items: center;
    line-height: 50px;
    border-bottom: 1px dotted #999999;
    box-sizing: border-box;
}

#information .info-blk dt {
    width: 35%;
    float: left;
    box-sizing: border-box;
}

/*------VIEW MOREボタン-----*/

.button_view {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    transition: all 0.3s ease 0s;
}

.button_view a {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 20px;
    width: 200px;
    height: 50px;
    border: 1px solid #4d4d4d;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px;
}

.button_view a:hover {
    background: #4d4d4d;
    color: #fff;
}

/*--------------------------------------
スマホ
--------------------------------------*/

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

    #kv .Top_slider div {
        height: 240px;
    }

    #service .inner {
        width: 94%;
    }

    #service ul {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    #service .service-blk {
        width: 100%;
        margin-bottom: 20px;
    }



    /*------ギャラリー-----*/

    #gallery .slider {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    #gallery .slider .slider-img {
        width: 50%;
    }
    

    /*------インフォメーション-----*/

    #information .info-blk dl {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #information .inner {
        width: 80%;
    }

    #information dl {
        padding: 10px 0;
    }

    #information dt,
    dd {
        line-height: 30px;

    }

}