@charset "utf-8";
/* CSS Document */
/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:100%;
    margin:0 auto;
	padding-top:90px;
}

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

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

.slider .slick-slide.slick-center{
  transform: scale(1);/*中央の画像のサイズ等倍に*/
  opacity: 1;/*透過なし*/
/*filter: brightness(1.0);/*フィルタをかける　1.0が100％黒*/
}

.slider img:hover{
filter: brightness(0.8);  /*マウスオーバーでフィルタをかける　1.0が100％黒*/
}


/*矢印の設定*/

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

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

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


/*画像の上の白文字*/
.category{
	position:absolute;
  /* 水平・垂直方向の中央揃え */
  position: absolute;
  top: 50%;
  left: 50%;
	width:100%;
  transform: translate(-50%, -50%);
	text-align:center;
	color:#fff;
	font-size:36px;
	line-height:1.5em;
	font-weight:bold;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
	cursor: pointer;/*マウスカーソルを指マークに*/
}

/*中くらいの文字サイズ*/
.category .txt-m{
	font-size:26px;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

/*小さい文字サイズ*/
.category .txt-s{
	font-size:20px;
	text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

.category-btn{
	border:solid 1px #fff;
	text-align:center;
	border-radius:40px;
	width:250px;
	font-size:18px;
	margin:0 auto;
	padding:10px 0;
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
	background-color: rgba(0, 0, 0, 0.0);
	
}
.category-btn:hover{
	 background-color: rgba(0, 0, 0, 0.4);
}

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

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

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

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

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

/*画面幅1300px以下の追加指定*/
@media screen and (max-width:1300px) {

/*画像の上の白文字*/
.category{
	width:100%;
	text-align:center;
	color:#fff;
	font-size:20px;
	line-height:2.0em;
	font-weight:bold;
}
	
}


/*画面幅1100px以下の追加指定*/
@media screen and (max-width:1100px) {

/*画像の上の白文字*/
.category{
	width:100%;
	text-align:center;
	color:#fff;
	font-size:20px;
	line-height:1.5em;
	font-weight:bold;
}
	
}

/*画面幅900px以下の追加指定*/
@media screen and (max-width:900px) {

/*画像の上の白文字*/
.category{
	width:100%;
	text-align:center;
	color:#fff;
	font-size:20px;
	line-height:1.5em;
	font-weight:bold;
}
	
}

/*画面幅460px以下の追加指定*/
@media screen and (max-width:460px) {
	
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:100%;
    margin:0 auto;
	padding-top:105px;
}	
	
.slider img {
    width:100vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
	transition: 0.3s;
}
	

/*画像の上の白文字*/
.category{
	text-align:center;
	color:#fff;
	font-size:20px;
	line-height:1.5em;
	font-weight:bold;
}

/*中くらいの文字サイズ*/
.category .txt-m{
	font-size:16px
}

/*小さい文字サイズ*/
.category .txt-s{
	font-size:12px
}

.category-btn{
	border:solid 1px #fff;
	text-align:center;
	border-radius:40px;
	width:200px;
	font-size:16px;
	margin:0 auto;
	padding:8px 0;
}

/*矢印の設定*/

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

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

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



}