@charset "utf-8";

.manBg {
	background: url("../images/plan/main_bg.jpg") no-repeat 50% 88%;
	background-size: cover;
}

#sec01 h2 {
    padding: 100px 0 200px;
}

#sec01 h2 span {
    background: rgb(255 255 255 / 80%);
    padding: 20px 50px;
    font-weight: 900;
    letter-spacing: 4px;
	font-size: 36px;
}

#sec01 h3.notoSans {
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 100px;
    padding: 20px;
}


.modelhouse_box{
width: 100%;
background-color: #f0eee8;
padding: 40px;
margin: 80px 0 0 0;
}

.modelhouse_box h3{
width: 100%;
text-align: center;
display: block;
font-size: 22px;
	font-weight: 600;
line-height: 1.5;
letter-spacing: 0;
padding: 10px;
color: #fff;
background-color: #b7ad8a;
margin: 40px 0 0 0;
}


.modelhouse_slide{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}

.modelhouse_slide li{
padding: 20px;
}

.modelhouse_slide .slide-arrow{
cursor: pointer;
}

.modelhouse_slide .slide-arrow span{
font-size: 5rem;
font-weight: 200;
}

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

.modelhouse_slide .slick-dots li{
padding: 0;
width:10px;
height:10px;
}

.modelhouse_slide .slick-dots li button{
    width:100%;
    height:100%;
    background:#f0eee8;
    border-radius:50%;
    color:#968f68;
}

.modelhouse_slide .slick-dots li.slick-active button{
    background:#968f68;
color:#fff;
}

.modelhouse_slide .slick-dots li button:before{
    content:none;
}

.MT_20 {
    margin-top: 20px !important;
}

.plan_title{
width: 100%;
text-align: center;
margin: 80px 0 0;
}

.plan_title h3{
font-family: "din-2014", sans-serif;
font-size: 40px;
color: #b7ad8a;
}

.modelhouse_slide {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}

.cap2 {
    font-size: 14px;
    padding: 0 5px;
    color: #000;
    letter-spacing: 0 !important;
}



@media screen and (max-width: 767px)  {	
	
	#sec01 h2 {
		padding: 60px 0 140px;
	}

	#sec01 h2 span {
		padding: 14px 20px;
		font-size: 20px;
	}

	#sec01 h3.notoSans {
		font-size: 18px;
		margin-bottom: 40px;
		padding: 10px 0;
	}
	
	
.modelhouse_box{
padding: 20px 10px;
margin: 40px 0 0 0;
}

.modelhouse_box h3{
font-size: 16px;
line-height: 1.5;
letter-spacing: 0;
padding: 10px;
margin: 20px 0 0 0;
text-align: center;
}

.modelhouse_slide li{
padding: 10px;
}
	
.js-scrollable2 img {
width: 200% !important;
}	
	
.pin_area {
    display: block;
    max-width: none;
    height: auto;
    transform-origin: 0 0;
    touch-action: pan-x pan-y !important;
}	
.W_100.js-scrollable2 {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
	
	.cap2 {
    font-size: 12px;
}
	
.plan_title h3 {
    font-size: 22px;
}	
	
ul.modelhouse_slide {
    width: 86%;
    margin: 0 auto;
}	
	.slick-prev {
    left: -25px!important;
}
.slick-next {
    right: -25px!important;
}	

}

@media screen and (min-width: 768px) and (max-width:1024px)  {
	
	
}