@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
/*追加*/
                  /* フレックスボックスにする */

}



.slider img {
    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化,60vw（vwは画像サイズに対する割合）*/
    height:300px;
/*追加*/

              /* 文字色 */
              /* 外側の余白 */
}

.slider .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}

/*マウスオーバーで文字　始まり*/
.over2 {
    height: 300px;
    overflow: hidden; /*はみ出した要素の処理（hiddenは隠す指定）*/
    position: relative; /*要素の位置を指定（relativeは相対的に位置表示）*/
}

.over2 .caption {
    font-size: 130%;
    color: #fff;
    text-align: center; /*ブロック要素に有効、インライン要素には不可（span,a,などは×）*/
    padding-top: 80px;
    /*縦センタリング　
    position: absolute;
    top: 50%;
    -webkit-transform : translateY(-50%);
    transform : translateY(-50%);*/
}

.over2 .mask {
    width: 60vw;
    height: 100%;
    position: absolute; /*要素の位置を指定（absoluteは親要素に対して絶対位置指定、親要素はrelative,fixed,で）*/
    top: 0;
    left: 0;
    opacity: 0; /* 透明度の指定、（0は透明、表示させない　0.0~1.0の範囲で） */
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-transform: rotateX(-90deg) rotateY(-90deg);
    transform: rotateX(-90deg) rotateY(-90deg);
    -webkit-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.over2:hover .mask {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg) rotateY(0);
    opacity: 1; /* ホバーで表示する */
}
/*マウスオーバーで文字 終わり*/

/*矢印の設定*/

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

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

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

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}


/*ここから追加分*/




/*========= レイアウトのためのCSS ===============*/









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