@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/

/*画像の横幅を100%にしてレスポンシブ化*/
.gallery-slide img {
    width: 100%;
    height: auto;
    vertical-align: bottom; /*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/
.gallery-slide .gallery {
    margin: 0 0 5px 0;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.gallery-slide .slick-prev,
.gallery-slide .slick-next,
.choice-btn .slick-prev,
.choice-btn .slick-next{
    position: absolute; /*絶対配置にする*/
    z-index: 3;
    top: 42%;
    cursor: pointer; /*マウスカーソルを指マークに*/
    outline: none; /*クリックをしたら出てくる枠線を消す*/
    border-top: 3px solid #fff; /*矢印の色*/
    border-right: 3px solid #fff; /*矢印の色*/
    height: 20px;
    width: 20px;
}

.gallery-slide .slick-prev, .choice-btn .slick-prev { /*戻る矢印の位置と形状*/
    left: 4.5%;
    transform: rotate(-135deg);
}

.gallery-slide .slick-next, .choice-btn .slick-next { /*次へ矢印の位置と形状*/
    right: 4.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.gallery-slide .choice-btn li {
    cursor: pointer;
    outline: none;
    background: #333;
}

    .gallery-slide .choice-btn li img {
        opacity: 0.4; /*選択されていないものは透過40%*/
    }

    .gallery-slide .choice-btn li.slick-current img {
        opacity: 1; /*選択されているものは透過しない*/
    }

/*========= レイアウトのためのCSS ===============*/
/*エリア全体を中央寄せ*/
.gallery-slide .wrapper {
    width: 94%;
    max-width: 900px;
    margin: 0 auto;
}

.gallery-slide ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-slide a {
    color: #333;
}

    .gallery-slide a:hover,
    .gallery-slide a:active {
        text-decoration: none;
    }

.gallery-slide h1 {
    text-align: center;
    font-size: 6vw;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 30px 0;
}

.gallery-slide p {
    margin: 30px 0;
    word-wrap: break-word;
}


.choice-btn .slick-prev:before {
    display: none !important
}

.choice-btn .slick-next:before {
    display: none !important
}

.gallery-slide .slick-prev::before {
    display: none !important
}

.gallery-slide .slick-next::before {
    display: none !important
}