@charset "utf-8";

/*=================================
スライダーのためのcss
===================================*/
.slider {
    position:relative;
/*  z-index: 1;*/
  height: 700px;
}
/*　背景画像設定　*/
.slider-item01 {
    background:url(../img/slide_01.jpg);
}
.slider-item02 {
    background:url(../img/slide_02-2.jpg);
}
/*.slider-item03 {
    background:url(../img/slide_03.jpg);
}*/
.slider-item04 {
    background:url(../img/slide_04.jpg);
}
.slider-item05 {
    background:url(../img/slide_05.jpg);
}

.slider-item {
    width: 100%;
    height:700px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
@media screen and (max-width: 769px) {
.slider {
    position:relative;
  height: 320px;
}
.slider-item {
    width: 100%;
    height:320px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
}
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;
  z-index: 3;
    top: 56%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #ccc;
    border-right: 2px solid #ccc;
    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:8px;
    height:8px;
    display:block;
    border-radius:50%;
    background:#ccc;
}
.slick-dots .slick-active button{
    background:#333;
}

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

/*a{
  color: #fff;
}

a:hover,
a:active{
  text-decoration: none;
}
*/
h1.slideon_txt{
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 10%;
	/* transform: translate(-50%, -50%);*/
	text-align: center;
	font-size: 24px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: normal;
	color: #ffffff;
}
@media screen and (max-width: 769px) {
	h1.slideon_txt{
		bottom: 4%;
	right: 10%;
	font-size: 18px;
	letter-spacing: 0.1em;
}
}
.slidearea{
  position: relative;
}
@media screen and (max-width: 1080px) {
.slidearea{
	padding-top: 60px;
}
}
.container p{
  padding: 300px 0; 
  text-align: center;
  color: #fff;
}