@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {
 position:relative;
 background:#6323a2;
 z-index: 1;
 /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
  /*height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

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

/*矢印の設定*/
/*.slick-prev, 
.slick-next {
 position: absolute;
 z-index: 3;
 top: 47%;
 cursor: pointer;/*マウスカーソルを指マークに
 outline: none;/*クリックをしたら出てくる枠線を消す
 border-top: 2px solid #ffffff;/*矢印の色
 border-right: 2px solid #ffffff;/*矢印の色
 height: 25px;
 width: 25px;
}
.slick-prev {/*戻る矢印の位置と形状
 left:2.5%;
 transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状
 right:2.5%;
 transform: rotate(45deg);
}
*/

/*ドットナビゲーションの設定*/
.slick-dots {
 position: relative;
 z-index: 3;
 text-align:center;
 margin:-50px 0 0 0;/*ドットの位置*/
}
.slick-dots li {
 display:inline-block;
 margin:0 5px;
}
.slick-dots button {
 color: transparent;
 outline: none;
 width:12px;/*ドットボタンのサイズ*/
 height:12px;/*ドットボタンのサイズ*/
 display:block;
 border: 0px solid;
 border-radius:50%;
 background:#f7f4f9;/*ドットボタンの色*/
}
.slick-dots .slick-active button{
 background:#6323a2;/*ドットボタンの現在地表示の色*/
}

/*イメージ内コピー*/
.slider-copy{
 position: absolute;
 z-index: 2;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
 font-size:2.2vw;
 letter-spacing: 0.0em;
 /*text-transform: uppercase;*/
 color: #ffffff;
}




/*========= レイアウトのためのCSS ===============*/
/*ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #fff;
}

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

h1{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size:6vw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.wrapper{
  position: relative;
}

.container{
  background:#555;
}

.container p{
  padding: 300px 0; 
  text-align: center;
  color: #fff;
}



/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	.lock {
		overflow:hidden;
	}

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

/*イメージ内コピー*/
.slider-copy{
position: static;
}

 
}