@charset "UTF-8";
/* CSS Document */

.spot-inner{
	padding-top: 10rem;
}
.spot-ttl{
	font-size: 3.2rem;
    font-weight: bold;
}
.meisyo-txt{
	font-size: 1.5rem;
    line-height: 2.4;
    padding-top: 3rem;
}
/*spot-slide*/
.spot-back{
    background-color: #FFDC01;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 10rem 2em;
    margin: 8rem 0 0;
    position: relative;
}
.spot-ttl2{
    font-size: 2.2rem;
    font-weight: bold;
    padding-bottom: 1rem;
}
.spot-ttl2 span{
	display: block;
    font-size: 1.3rem;
}
.spot-txt2{
	 padding-top: 2rem;
    font-size: 1.3rem;
}
.spot-btn{
	display: block;
    border: solid 1px;
    text-align: center;
    width: 50%;
    padding: 1rem;
    font-weight: bold;
    font-size: 1.7rem;
    margin: 5rem auto 0;
}
.slick-prev::before {
  content: url(../images/left.svg);
}
.slick-next::before {
   content: url(../images/right.svg);
}

.slick-prev, .slick-next{
	width: 15px;
}
.slick-prev {
    left: -7%;
    position: absolute;
    z-index: 1;
    top: 35%;
}
.slick-next{
    right: -7%;
    position: absolute;
    z-index: 1;
    top: 35%;
}.slick-prev:before, .slick-next:before{
	opacity: 1;
}
/*btn-エリア*/
.btn-eria{
	padding-bottom: 10rem;
}

.btn-list{
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    padding: 8rem 0 8rem;
}

.spot1{
	background: url(../images/spot/spot1.svg);
}
.spot1:hover{
	background:url('../images/spot/spot1-1.svg');
}
.spot2{
	background: url(../images/spot/spot2.svg);
}
.spot2:hover{
	background:url('../images/spot/spot1-2.svg');
}
.spot3{
	background: url(../images/spot/spot3.svg);
}
.spot3:hover{
	background:url('../images/spot/spot1-3.svg');
}
.spot4{
	background: url(../images/spot/spot4.svg);
}
.spot4:hover{
	background:url('../images/spot/spot1-4.svg');
}
.spot5{
	background: url(../images/spot/spot5.svg);
}
.spot5:hover{
	background:url('../images/spot/spot1-5.svg');
}
.spot6{
	background: url(../images/spot/spot6.svg);
}
.spot6:hover{
	background:url('../images/spot/spot1-6.svg');
}
.spot7{
	background: url(../images/spot/spot7.svg);
}
.spot7:hover{
	background:url('../images/spot/spot1-7.svg');
}
.spot8{
	background: url(../images/spot/spot8.svg);
}
.spot8:hover{
	background:url('../images/spot/spot1-8.svg');
}
.spot9{
	background: url(../images/spot/spot9.svg);
}
.spot9:hover{
	background:url('../images/spot/spot1-9.svg');
}
.spot10{
	background: url(../images/spot/spot10.svg);
}
.spot10:hover{
	background:url('../images/spot/spot1-10.svg');
}
.btn-box{
    display: block;
    width: 13.45rem;
    height: 8rem;
    background-repeat: no-repeat;
}
.btn-box:hover{
	background-repeat: no-repeat;
}
/*map*/
.kasoumap{
	margin: 0;
}
.street-map {
    background: url(../images/street-map-sp.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 8rem 2em 7rem;
    margin: 2rem 0 0;
    position: relative;
}

.street-map-txt{
    color: #fff;
    padding-top: 4rem;
    font-size: 1.6rem;
}
.street-map-btn {
    color: #fff;
    border: solid 1px;
    display: block;
    padding: 1rem 0;
    width: 40%;
    text-align: center;
    margin-top: 3rem;
}
@media (min-width: 769px) {
	.kasou-top-pc {
    position: relative;
    z-index: 1;
}
	.street-map {
    background: url(../images/street-map-pc.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 8rem 2em 7rem;
    margin: 2rem 0 0;
    position: relative;
}
	.spot-inner {
	padding-top: 0;
	}
	.spot-ttl {
	margin-top: 2.6rem;
	}
	.top-wp::after{
		
	}
	.meisyo-txt {
	font-size: 1.2rem;
	line-height: 3.4;
	padding-top: 3rem;
	width: 40%;
	}
	.slide-flex{
	display: flex;
	flex-direction: row-reverse;
	}
	.spot-back{
	padding: 10rem 10em;
	}
	.slide-detail1{
	width: 60%;
	}
	.slide-detail2{
	padding-right: 2rem;
    width: 40%;
	}
	.spot-txt2 {
    padding-top: 2rem;
    font-size: 1rem;
    width: 90%;
	}
	.spot-ttl2 {
    font-size: 1.8rem;
    font-weight: bold;
    padding-bottom: 1rem;
	}
	.spot-ttl2 span {
    display: block;
    font-size: 1rem;
	}
	.spot-btn {
	width: 60%;
    padding: 0.9rem;
    font-weight: bold;
    font-size: 1.1rem;
    margin: 3rem 0 0;
	}
	.street-map-wp .kasou-ttl-wp{
		position: inherit;
	}
	.slick-prev {
    left: -7%;
    top: 50%;
	width: 2.3%;
	}
	.slick-next {
    right: -7%;
    top: 50%;
    width: 2.3%;
	}
	.btn-list {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: flex-start;
    padding: 8rem 0 8rem;
	}
	.btn-box {
    width: 15rem;
    height: 8rem;
	margin-bottom: 2rem;
	}
	.kasoumap {
	margin: 0 auto;
	}
	.street-map-wp .kasou-ttl span {
    position: absolute;
    top: -10%;
    right: 34%;
    left: 50%;
    width: 16%;
	}
	.street-map{
	padding: 8rem 10em 7rem;
	margin: 5rem 0 0;
	}
	.street-map-btn {
    width: 20%;
    text-align: center;
    font-weight: bold;
    margin-top: 3rem;
    font-size: 1.1rem;
	}
	.map-txt-img{
	width: 80%;
    margin: 3rem auto 3rem;
    display: block;
	}

}