@charset "utf-8";
/* ホーム　スライドショー 『動くWEBデザインアイデア帳』P.277～*/
/* 横幅９４％で左右に余白を持たせて中央寄せ */
.slider{
    width: 1240px;
    /* 94%→1240pxに変更 */
    margin: 0 auto;
}

.slider img{
    /* スライダー内の画像を60vwにしてレスポンシブ化 */
    width: 750px;
    height: auto;
    margin: 0 30px;
}

.slider .slick-slide{
    /* 左右の画像サイズを80％に */
    transform: scale(0.8);
    /* 拡大や透過のｱﾆﾒｰｼｮﾝを0.5秒で */
    transition: all .5s;
    /* 透過50％ */
    opacity: 0.5;
}

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