@charset "utf-8";
/* Copyright 2018 FSFIELD All Rights Reserved. */

/* ------------------------------------------------------------

home

------------------------------------------------------------ */

/* メインビジュアル
---------------------------------------------- */
#bg_main{
	background: url("../img/bg_main01.jpg") no-repeat 0 bottom;
	background-size: cover;
	height: 988px;
}

#main{
	background: url("../img/home/img_main01.png") repeat-x 0 bottom;
	width: 100%;
	height: 980px;
	padding-top: 140px;
	position: relative;
}

#txt_main01{
    width: 960px;
    height: 170px;
    margin-left: -480px;
    position: absolute;
    top: 40px;
    left: 50%;
    z-index: 2;
}

#slider .slick-list{overflow: visible;}

#slider .slick-slide{
	position: relative;
	width: 100%;
	height: 720px;
}

#slider .slick-slide img{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -610px;
}
	
/* Dots */
.slick-dotted.slick-slider{margin-bottom: 30px;}

.slick-dots{
    position: absolute;
    bottom: -50px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li{
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 10px !important;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button{
	background: url(../img/ico_circle02.png) no-repeat 0 0;
    font-size: 0;
    line-height: 0;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
}

.slick-dots li button:hover,
.slick-dots li.slick-active button{background: url(../img/ico_circle01.png) no-repeat 0 0;}

/* あくらーきっずすまいるとは？
---------------------------------------------- */
#wrap_about{
	background:url("../img/home/bg_about01.jpg") no-repeat 0 0;
	background-size: cover;
	position: relative;
	z-index: 1;
	padding: 90px 0 130px;
}

#wrap_about::after{
	content: "";
	display: block;
	background: url("../img/home/bg_about03.png") no-repeat 0 0;
	width: 857px;
	height: 100px;
    position: absolute;
    left: 0;
    bottom: -2.6vw;
}

#about{
	width: 960px;
	margin: 0 auto;
	display:-webkit-flex;/*--safari用--*/
	display:flex;
	-webkit-justify-content:space-between;/*--safari用--*/
	justify-content:space-between;
}

#about_inner{
	width: 500px;
	font-size: 1.6rem;
	line-height: 1.8;
	padding-top: 70px;
}

#parallax{
	min-height: 400px;
	height: 24vw;
	-webkit-transform: skewY(-3deg);
	-ms-transform: skewY(-3deg);
	transform: skewY(-3deg);
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#parallax_inner{
	background: url(../img/home/bg_about02.jpg) no-repeat center;
	background-size: cover;
	background-attachment: fixed;
	height: 100%;
	-webkit-transform: skewY(3deg);
	-ms-transform: skewY(3deg);
	transform: skewY(3deg);
	margin-top: -2.51vw;
}

#wrap_home01{
	background: url("../img/bg_wave01.png") repeat-x 0 0;
	margin-top: -4vw;
	padding-top: 13px;
	position: relative;
	z-index: 1;
}

#wrap_home02{
	background: #FDFCF1;
	padding: 70px 0 100px;
	position: relative;
	z-index: 0;
}

#wrap_home02::before{
	content: "";
	display: block;
	background: url("../img/home/bg_home02.jpg") no-repeat 0 0;
	width: 861px;
	height: 745px;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: -2;
}

#wrap_home02::after{
	content: "";
	display: block;
	background: url("../img/home/bg_home01.png") no-repeat 0 0;
	width: 100%;
	height: 870px;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
}

/* ナビ
---------------------------------------------- */
#nav_home{
	display:-webkit-flex;/*--safari用--*/
	display:flex;
	-webkit-justify-content:space-between;/*--safari用--*/
	justify-content:space-between;
	width: 950px;
	margin: 0 auto 80px;
}

/* お知らせ・ブログ
---------------------------------------------- */
#info{
	display:-webkit-flex;/*--safari用--*/
	display:flex;
	-webkit-justify-content:space-between;/*--safari用--*/
	justify-content:space-between;
	width: 950px;
	margin: 0 auto;
}

#news,
#blog{
	background: #FDFCF1;
	border: 3px solid #AA9F93;
	border-radius: 7px;
	width: 460px;
	padding-bottom: 20px;
}

#news h2,
#blog h2{
	background: url("../img/bg_bdr02.gif") repeat-x 0 bottom;
	padding: 20px 0 30px;
	text-align: center;
}

/*--記事--*/
.wrap_article_home{padding: 20px;}

.article_home{
	background: url("../img/bg_bdr01.png") repeat-x 0 bottom;
	margin-bottom: 22px;
}

.article_home:last-of-type{margin-bottom: 0;}

.article_home a{
	display:-webkit-flex;/*--safari用--*/
	display:flex;
	-webkit-justify-content:space-between;/*--safari用--*/
	justify-content:space-between;
	font-size: 1.6rem;
	padding-bottom: 22px;
}

.article_home a .photo{
	display: block;
	width: 100px;
	height: 100px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.article_home_inner{width: 305px;}

.article_home_inner time{
	color: #AA9F93;
	display: block;
	padding-left: 10px;
	margin-bottom: 5px;
}

.article_home_inner h3{
	background: url("../img/ico_arrow01.png") no-repeat 0 0.6em;
	color: #333;
	padding-left: 10px;
}

.article_home a:hover .article_home_inner h3{color: #68C5C9;}


@media screen and (min-width:2500px){ /* 表示領域が2500px以上の場合に適用するスタイル */
	
	#wrap_about::after{
		background-size: cover;
		width: 1160px;
		height: 134px;
	}
	
}/*--@media--*/


@media screen and (min-width:1920px){ /* 表示領域が1920px以上の場合に適用するスタイル */

	#about::after {
		background-size: contain !important;
		width: calc(50vw - 200px);
		height: 0;
		padding-top: 5.1%;
	}

}/*--@media--*/


@media screen and (max-width:1339px){ /* 表示領域が1339px以下の場合に適用するスタイル */

	#txt_main01{top: 100px;}
	
	#slider .slick-slide img{
		top: 80px;
		margin-left: -490px;
		width: 980px;
	}
	
	.slick-dots{
		width: 1010px;
		margin: 0 auto;
	}

}/*--@media--*/


@media screen and (max-width:1140px){ /* 表示領域が1119px以下の場合に適用するスタイル */

	#about::after{bottom: -30px;}
	
	#parallax{height: 400px;}

	#parallax_inner{background-position: center;}
	
	#wrap_home01{margin-top: -42px;}
	
	#wrap_about::after{bottom: -31px;}

}/*--@media--*/