@charset "utf-8";



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

.slider-item01 {
    background:url(../img/top/3.jpg);
		background-size:cover;
}

.slider-item02 {
    background:url(../img/top/2.jpg);
		background-size:cover;
}

.slider-item03 {
    background:url(../img/top/1.jpg);
		background-size:cover;
}

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

/*矢印の設定*/

.slick-prev, 
.slick-next {
    position: absolute;
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #fff;/*矢印の色*/
    border-right: 2px solid #fff;/*矢印の色*/
    height: 25px;
    width: 25px;
}

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

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



.slider.slick-initialized.slick-slider.slick-dotted ul.slick-dots {
display: none !important;
}



.box-main {
width: 980px;
padding: 0px;
margin: 0 auto;
position: relative;
height: 665px;
}
.en-text01 {
position: absolute;
color: #FFF;
top: 40%;
left: 44%;
font-size: 18px;
text-shadow: 0 0 5px #ddd;
}
.catch-copy-text01 {
position: absolute;
color: #FFF;
top: 44%;
left: 43%;
font-size: 44px;
font-weight: 600;
font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
text-shadow: 0 0 5px #ddd;
letter-spacing: 4px;
}

.en-text02 {
position: absolute;
color: #FFF;
top: 40%;
font-size: 18px;
text-shadow: 0 0 5px #ddd;
left: 0;
}
.catch-copy-text02 {
position: absolute;
color: #FFF;
top: 44%;
left: 0;
font-size: 44px;
font-weight: 600;
font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
text-shadow: 0 0 5px #ddd;
letter-spacing: 4px;
}

.en-text03 {
position: absolute;
color: #FFF;
top: 33%;
left: 0;
font-size: 18px;
text-shadow: 0 0 5px #ddd;
left: 50%;
transform: translateX(-50%);
}
.catch-copy-text03 {
position: absolute;
color: #FFF;
top: 38%;
font-size: 44px;
font-weight: 600;
font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
text-shadow: 0 0 5px #ddd;
letter-spacing: 4px;
text-align: center;
}



/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 960px) {
.box-main {
    width: 100%;
    padding: 0px;
    margin: 0 auto;
    position: relative;
    height: 665px;
}
.en-text01 {
    position: absolute;
    color: #FFF;
    top: 43%;
    left: 25%;
    font-size: 18px;
    text-shadow: 0 0 5px #ddd;
}
.catch-copy-text01 {
    position: absolute;
    color: #FFF;
    top: 47%;
    left: 24%;
    font-size: 44px;
    font-weight: 600;
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
    text-shadow: 0 0 5px #ddd;
    letter-spacing: 4px;
}

.en-text02 {
    position: absolute;
    color: #FFF;
    top: 43%;
    font-size: 18px;
    text-shadow: 0 0 5px #ddd;
    left: 115px;
}
.catch-copy-text02 {
    position: absolute;
    color: #FFF;
    top: 47%;
    left: 110px;
    font-size: 44px;
    font-weight: 600;
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
    text-shadow: 0 0 5px #ddd;
    letter-spacing: 4px;
}

.en-text03 {
    position: absolute;
    color: #FFF;
    top: 28%;
    font-size: 18px;
    text-shadow: 0 0 5px #ddd;
    left: 50%;
    transform: translateX(-50%);
}
.catch-copy-text03 {
    position: absolute;
    color: #FFF;
    top: 33%;
    font-size: 44px;
    font-weight: 600;
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
    text-shadow: 0 0 5px #ddd;
    letter-spacing: 4px;
    text-align: center;
		padding: 0 80px;
}
}

/* smartphone */
@media screen and (max-width: 640px) {
.slick-prev, .slick-next {
    position: absolute;
    z-index: 3;
    top: 40%;
    cursor: pointer;
    outline: none;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    height: 25px;
    width: 25px;
}
.slider-item {
    width: 100%;
    height: 308px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.slider {
    position: relative;
    z-index: 1;
    height: 336px;
}
.box-main {
    width: 100%;
    padding: 0px;
    margin: 0 auto;
    position: relative;
    height: 110px;
}
.en-text01 {
    position: absolute;
    color: #FFF;
    top: 78%;
    left: 25%;
    font-size: 12px;
    text-shadow: 0 0 5px #ddd;
}
.catch-copy-text01 {
    position: absolute;
    color: #FFF;
    top: 107%;
    left: 24%;
    font-size: 24px;
    font-weight: 600;
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
    text-shadow: 0 0 5px #ddd;
    letter-spacing: 0;
}
.catch-copy-text01 br.new-line {
display: block;
}
.en-text02 {
    position: absolute;
    color: #FFF;
    top: 72%;
    font-size: 15px;
    text-shadow: 0 0 5px #ddd;
    left: 21px;
    padding: 0 15px;
}
.catch-copy-text02 {
    position: absolute;
    color: #FFF;
    top: 117%;
    left: 33px;
    font-size: 24px;
    font-weight: 600;
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
    text-shadow: 0 0 5px #ddd;
    letter-spacing: 0;
}
.catch-copy-text02 br.new-line {
display: block;
}

.en-text03 {
		position: absolute;
		color: #FFF;
		top: 63%;
		font-size: 12px;
		text-shadow: 0 0 5px #ddd;
		transform: translateX(-50%);
		width: 100%;
		text-align: center;
}
.catch-copy-text03 {
    position: absolute;
    color: #FFF;
    top: 78%;
    font-size: 24px;
    font-weight: 600;
    font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo sans-serif;
    text-shadow: 0 0 5px #ddd;
    letter-spacing: 4px;
    text-align: center;
    padding: 0 30px;
}
.slider-item02 {
	    background-position: calc(50% - 45px) !important;
	}
}