@charset "UTF-8";

body {
    background-image: url(../img/bg/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.gall_list {
    display: flex;
    margin: 0 auto 40px auto;
    justify-content: space-between;
    width: 20%;
    min-width: 300px;
    max-width: 350px;
}

.gall_li {
    list-style: none;
    font-family: "Domine", serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
    letter-spacing: 2px;
}

.gall_sub {
    width: 90%;
    margin: 0 auto 30px auto;
    font-size: 25px;
    font-family: "Domine", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 2px;
}

.gall_sub span {
    padding: 0 3% 0 2%;
    border-bottom: solid 2px #D0BFFF;
    ;
}

/* ボタン共通設定 */
.btn03 {
    /*影の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    text-align: center;
    background: transparent;
    border-radius: 25px;
    border: solid 1px #888;
    outline: none;
    font-size: 16px;
    /*アニメーションの指定*/
    transition: all 0.2s ease;
}

/*hoverをした後のボタンの形状*/
.btn03:hover {
    border-color: transparent;
}

/*ボタンの中のテキスト*/
.btn03 span {
    position: relative;
    z-index: 2;
    /*z-indexの数値をあげて文字を背景よりも手前に表示*/
    /*テキストの形状*/
    display: block;
    padding: 10px 30px;
    background: #F3F3F3;
    border-radius: 25px;
    color: #333;
    /*アニメーションの指定*/
    transition: all 0.3s ease;
}

/*== 右下に押し込まれる（立体が平面に） */

/*影の設定*/
.pushright:before {
    content: "";
    /*絶対配置で影の位置を決める*/
    position: absolute;
    z-index: -1;
    top: 4px;
    left: 4px;
    /*影の形状*/
    width: 100%;
    height: 100%;
    border-radius: 25px;
    background-color: #D0BFFF;
}

/*hoverの際にX・Y軸に4pxずらす*/
.pushright:hover span {
    background-color: #D0BFFF;
    color: #fff;
    transform: translate(4px, 4px);
}

#gall_img {
    width: 90%;
    margin: 0 auto 50px auto;
    ;
}

/*==================================================
ギャラリーのためのcss
===================================*/
.gallery {
    width: 100%;
    columns: 4;
    /*段組みの数*/
    padding: 0 15px;
    /*ギャラリー左右に余白をつける*/
    margin: 0;
}

.gallery li {
    margin-bottom: 20px;
    /*各画像下に余白をつける*/
    list-style: none;
}

/*ギャラリー内のイメージは横幅100%にする*/
.gallery img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    /*画像の下にできる余白を削除*/
}

#gall_mov {
    margin: 0 0 50px 0;
}

.mov {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

video {
    width: 46%;
    margin: 5px;
    
}


/*横幅900px以下の段組み設定*/
@media only screen and (max-width: 1024px) {

    #gall_img {
        width: 95%;
    }

    .btn03 {
        /*影の基点とするためrelativeを指定*/
        position: relative;
        /*ボタンの形状*/
        text-decoration: none;
        display: inline-block;
        text-align: center;
        background: transparent;
        border-radius: 25px;
        border: solid 1px #888;
        outline: none;
        font-size: 14px;
        /*アニメーションの指定*/
        transition: all 0.2s ease;
    }

    .btn03 span {
        position: relative;
        z-index: 2;
        /*z-indexの数値をあげて文字を背景よりも手前に表示*/
        /*テキストの形状*/
        display: block;
        padding: 10px 25px;
        background: #F3F3F3;
        border-radius: 25px;
        color: #333;
        /*アニメーションの指定*/
        transition: all 0.3s ease;
    }

    .gallery {
        columns: 3;
    }

    .mov {
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }
    
    video {
        width: 48%;
    }
    

}

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

    #gall_img {
        width: 100%;
    }

    .gall_list {
        display: flex;
        margin: 0 auto 40px auto;
        justify-content: space-around;
    }

    .gall_li {
        list-style: none;
        font-family: "Domine", serif;
        font-optical-sizing: auto;
        font-weight: weight;
        font-style: normal;
        letter-spacing: 2px;

    }

    .gallery {
        columns: 2;
    }

    .gall_sub {
        width: 90%;
        font-size: 20px;
    }

    .btn03 span {
        position: relative;
        z-index: 2;
        /*z-indexの数値をあげて文字を背景よりも手前に表示*/
        /*テキストの形状*/
        display: block;
        padding: 8px 20px;
        background: #F3F3F3;
        border-radius: 25px;
        color: #333;
        /*アニメーションの指定*/
        transition: all 0.3s ease;
    }

    .mov {
        width: 90%;
        margin: 0 auto ;
        text-align: center;
    }
    
    video {
        width: 90%;
    }
    

}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}