@charset "utf-8";
/* CSS Document */



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

.slider-box{/*オリジナル*/
	width: 100%;
	padding: 100px 0 0 0;
}

.top-slider-illust img{/*オリジナル*/
	position: absolute;
	right: 0;
	bottom: 0;/*135px*/
	width: 45%;/*45%*/
	height: auto;
}

@media screen and (max-width:1000px) {
	
.slider-box{
	padding: 50px 0 0 0;
}

.top-slider-illust img{
	width: 75%;
	bottom: 60px;
}
	
}

@media screen and (max-width:700px) {
	
.top-slider-illust img{
	bottom: 35px;
}
	
}


.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:100%;
    margin:0 auto;
}

.slider img {
    width:40vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}
.slider a:hover img {
	opacity:0.75;
}

.slider p {
    width:40vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
}


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

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


.slick-slider div {
	transition: none;/*一周周ったスライダーの逆戻りを解除してくれる*/
}



/*矢印の設定*/

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

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

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

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

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

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

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

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


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

ul.slider li img{
	border-radius:25px;
}

@media screen and (max-width:1000px){
	
.slider img {
    width:90vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:3%;/* -1.5%*/
}

.slick-next {/*次へ矢印の位置と形状*/
    right:3%;/* -1.5%*/
}

.slick-prev, 
.slick-next {
    top:40%;
    border-top: 7.5px solid #666;/*矢印の色*/
    border-right: 7.5px solid #666;/*矢印の色*/
    height: 25px;/*25px*/
    width: 25px;/*25px*/
}

.slick-dots button {
    width:10px;/*ドットボタンのサイズ*/
    height:10px;/*ドットボタンのサイズ*/
}
	
}