/**************スライドショー設定**************/
/*ボタン装飾リセット*/
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

.slider{
	/*スライドショーの位置の起点とするためposition:relative;をつける*/
	position: relative;
	/*z-indexの値の小さくして背景に回す*/
	z-index: 0;
	/*中央揃え+bottom20%*/
	margin: 10px auto 20% auto;
	/*スライダー全体の縦幅を画面の高さいっぱい 100vh にする*/
	height: 100vh;
	max-width: 80%;
}

/*スライドショー背景リンク範囲設定*/

li a{
    display: block;
    height: 100vh;
    width: 80%;
}

/*//スライドショー背景リンク範囲設定*/


/*WORKS________背景画像設定*/

.works_slider-item01{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item02{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item03{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item04{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item05{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item06{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item07{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item08{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item09{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item10{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item11{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.works_slider-item12{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}

/*PRODUCTS________背景画像設定*/

.products_slider-item01{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.products_slider-item02{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.products_slider-item03{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.products_slider-item04{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}

/*ADMIRATION________背景画像設定*/

.friends_slider-item01{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.friends_slider-item02{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.friends_slider-item03{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}
.friends_slider-item04{
	width: 100%;
    background-potision: center;
	background:url("../images/favicon2.png")
}



/*slider_item________背景画像設定*/

.slider-item{
	/*各スライダー全体の横幅を画面の横幅いっぱい 100% にする*/
	width: 100%;
	/*各スライダー全体の縦幅を画面の高さいっぱい 100vh にする*/
	height: 60vh;
	/*背景画像をリピートしない*/
	background-repeat: no-repeat;
    /*背景画像の位置を中央に*/
    background-position: center;
	/*背景画像が.slider-item全体を覆い表示*/
	background-size: 30%;
}

/*矢印の設定　　矢印が必要な場合は下記を表示してあげる*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next{
	position: absolute; /*絶対配置にする*/
	z-index: 3;
	top: 28%; /*上から42%の位置に表示*/
	/*マウスカーソルを指マークに*/
	cursor: pointer;
	/*クリックしたら出てくる枠線を消す*/
	outline: none;
	border-radius: 0%;
	border-top: 5px solid #FF6C4A;/*矢印の色*/
	border-right: 2px solid #FF6C4A;/*矢印の色*/
	height: 25px;/*矢印のサイズ*/
	width: 25px;/*矢印のサイズ*/
}

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

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

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

.slick-dots{
	max-width: 100%;
	display: none;
	text-align: left;
}

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

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

.slick-dots .slick-active button{
	/*ドットボタンの現在地の表示色*/
	background: #FF6C4A;
}
/**************スライドショー設定終了**************/


/* ----------------------------------------------------------------スマホ版 */

@media screen and (max-width:428px){
.slick-dots{
	max-width: 90%;
	display: none;
	position: relative;
	z-index: 3;
	text-align: center;
	top: 5%;
	left: 50%;
    transform: translate(-50%, -50%);
}
    
/*SP_スライドショー背景リンク範囲設定*/

li a{
    height: 70vh;
    width: 100%
}

/*//SP_スライドショー背景リンク範囲設定*/
    
/*SP_WORKS________背景画像設定*/

.works_slider-item01{
	background:url("../images/favicon2.png");
}
.works_slider-item02{
	background:url("../images/sp_impactzone.png");
}
.works_slider-item03{
	background:url("../images/sp_okayamamodel.png");
}

/*SP_FRIENDS________背景画像設定*/

.friends_slider-item01{
	width: 100%;
	background:url("../images/sp_slider_comingsoon.png");
}
.friends_slider-item02{
	width: 100%;
	background:url("../images/sp_slider_comingsoon.png");
}
.friends_slider-item03{
	width: 100%;
	background:url("../images/sp_slider_comingsoon.png");
}

/*SP_PRODUCTS________背景画像設定*/

.products_slider-item01{
	width: 100%;
	background:url("../images/sp_slider_comingsoon.png");
}
.products_slider-item02{
	width: 100%;
	background:url("../images/sp_slider_comingsoon.png");
}
.products_slider-item03{
	width: 100%;
	background:url("../images/sp_slider_comingsoon.png");
}
    
    .slider-item{
	/*各スライダー全体の横幅を画面の横幅いっぱい 100% にする*/
	width: 100%;
	/*各スライダー全体の縦幅を画面の高さいっぱい 60vh にする*/
	height: 68vh;
	/*背景画像をリピートしない*/
	background-repeat: no-repeat;
    /*背景画像の位置を中央に*/
    background-position: center;
	/*背景画像が.slider-item全体を覆い表示*/
	background-size: cover;
	
}
    
}