@charset "UTF-8";

/* ===========================================
	   Top Page
   =========================================== */

/* slider */
.slider{
	position: relative;
}
.swiper-slide img{
	width: 100%;
	max-width: none;
}
.swiper-slide{
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
@media (max-width: 767px){
	.slider{
		position: relative;
		width: 100%;
		height: calc(133vw + 70px);
		padding-bottom: 30px;
	}
	.swiper-wrapper{
		padding-bottom: 40px;
	}
	.swiper-slide{
		width: 100%;
		height: 133vw;
		background-size: auto 100%;
	}
	.slide1{
		background-image: url(../sy_images/home/to_01_img01_sp.jpg);
	}
	.slide2{
		background-image: url(../sy_images/home/to_01_img02_sp.jpg);
	}
	.slide3{
		background-image: url(../sy_images/home/to_01_img03_sp.jpg);
	}
	.swiper-pagination{
		padding-right: 15px;
		text-align: right;
	}
	.swiper-container-horizontal > .swiper-pagination-bullets{
		bottom: 0;
	}
	.swiper-pagination-bullet {
		width: 15px;
		height: 15px;
		display: inline-block;
		border-radius: 0;
		background: #c1c0ab;
		opacity: 1;
	}
	.swiper-pagination-bullet-active {
		opacity: 1;
		background: #f98000;
	}
	.ho_head{
		position: absolute;
		z-index: 9;
		top: calc(50% - 98px);
		left: calc(50% - 125px);
		width: 251px;
	}
}
@media (min-width: 768px){
	.slider{
		margin-top: 40px;
		padding-bottom: 50px;
	}
	.swiper-slide{
		width: 60%;
		height: 36.3vw;
		border-radius: 15px;
	}
	.slide1{
		background-image: url(../sy_images/home/co_slider001.jpg);
	}
	.slide2{
		background-image: url(../sy_images/home/co_slider002.jpg);
	}
	.slide3{
		background-image: url(../sy_images/home/co_slider003.jpg);
	}
	.swiper-button-prev,
	.swiper-button-next {
		width: 50px;
		height: 50px;
		margin-top: -25px;
	}
	.swiper-button-prev {
		background: url(../sy_images/common/co_slider_l.png) no-repeat center;
		left: calc(18.75% - 32px);
	}
	.swiper-button-next {
		background: url(../sy_images/common/co_slider_r.png) no-repeat center;
		right: calc(18.75% - 32px);
	}
}

/* sec1 */
.ho_sec1{
	position: relative;
	z-index: 3;
	text-align: center;
	font-weight: 700;
}
.ho_sec1_btn{
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px){
	.ho_sec1{
		padding: 30px 5% 0;
	}
	.ho_sec1_lead{
		margin-top: 27px;
	}
	.ho_sec1_list{
		padding: 50px 5% 55px;
	}
	.ho_sec1_list li ~ li{
		margin-top: 20px;
	}
}
@media (max-width: 360px){
	.ho_sec1_lead{
		font-size: 1.5rem;
	}
	.ho_sec1_lead br{
		display: none;
	}
}
@media (min-width: 768px){
	.ho_sec1{
		width: 1000px;
		margin: 70px auto 0;
		padding: 25px 0;
	}
	.ho_sec1_head{
		width: 877px;
		margin-left: auto;
		margin-right: auto;
	}
	.ho_sec1_lead{
		margin-top: 47px;
		font-size: 2.2rem;
	}
	.ho_sec1_list{
		display: flex;
		justify-content: space-between;
		margin-top: 42px;
	}
	.ho_sec1_list li{
		width: 295px;
	}
	.ho_sec1_list li:nth-child(2){
		margin-top: 50px;
	}
	.ho_sec1_list li:nth-child(3){
		margin-top: 17px;
	}
	.ho_sec1_btn{
		margin-top: 35px;
	}
	
}

.ho_sec2_head{
	margin-left: auto;
	margin-right: auto;
}
.ho_sec2_lead{
	color: #fff;
	line-height: 2.3;
}
@media (max-width: 767px){
	.ho_sec2{
		min-height: 325.534vw;
		margin-top: 35px;
		padding: 120px 5% 0;
		background-image: 
			url(../sy_images/home/to_backimg_sp01.png), url(../sy_images/home/to_backimg_sp02.jpg);
		background-repeat: no-repeat;
		background-position: center 0, center 65.96vw;
		background-size: 100% auto;
	}
	.ho_sec2_head{
		max-width: 328px;
		margin-bottom: 32px;
	}
}
@media (max-width: 359px){
	.ho_sec2_lead{
		line-height: 2;
	}
}
@media (min-width: 768px){
	.ho_sec2{
		min-width: 1000px;
		min-height: 1359px;
		margin-top: -50px;
		padding-top: 210px;
		text-align: center;
		background: url(../sy_images/home/to_backimg.png) no-repeat center 0;
		background-size: 1440px auto;
	}
	.ho_sec2_head{
		width: 640px;
	}
	.ho_sec2_lead{
		margin-top: 20px;
	}
}
@media (min-width: 1440px){
	.ho_sec2{
		height: 93.75vw;
		padding-top: 14.583vw;
		background-size: cover;
	}
}

/* gmap */
.gmap_container{
	padding: 0 5%;
}
.gmap {
	overflow: hidden;
	position: relative;
	height: 0;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
@media (max-width: 767px){
	.gmap_container{
		margin-top: -33vw;
		margin-bottom: 45px;
	}
	.gmap{
		width: 100%;
		padding-top: 255px;
	}
}
@media (min-width: 768px){
	.gmap_container{
		margin: -151px 0 60px;
	}
	.gmap{
		width: 100%;
		padding-top: 385px;
	}
}
@media (min-width: 1440px){
	.gmap_container{
		margin-top: -10.42vw;
	}
}