@charset "UTF-8";

/* ホーム */
#content{
	padding:0;
	background:none;
	text-shadow:none;
}

#slideshow{
	positison:relative;
	top:71px;
	width:100%;
	height:calc(100vh - 71px);
}
@media (min-width: 1024px) {
	#slideshow{
		top:0;
		width:calc(100% - 140px);
		height:100vh;
	}
}

#main-logo{
	position:absolute;
	top:50%;
	margin-top:-40px;
	width:100%;
	text-align:center;
	color:#FFF;
}
#main-logo img{
	width:auto;
	height:80px;
	-webkit-animation: logo-top 2.2s ease-in-out;
    animation: logo-top 2.2s ease-in-out;
}
#main-logo h2.headline{
	font-size:1.4rem;
	padding-top:15px;
	letter-spacing:0.1em;
	-webkit-animation: logo-top 2.7s ease-in-out;
    animation: logo-top 2.7s ease-in-out;
	font-family:'Times New Roman','BIZ UD明朝','BIZ UDMincho','游明朝','YuMincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','メイリオ','Meiryo','ＭＳ Ｐ明朝','MS PMincho',serif;
}
@media (min-width: 568px) {
	#main-logo{
		margin-top:-25px;
	}
}
@media (min-width: 768px) {
	#main-logo{
		margin-top:-60px;
	}
	#main-logo img{
		height:90px;
	}
	#main-logo h2.headline{
		font-size:1.5rem;
		padding-top:30px;
	}
}
@media (min-width: 1024px) {
	#main-logo{
		margin-top:-78px;
		width:calc(100% - 140px);
		left:140px;
	}
	#main-logo img{
		height:100px;
	}
	#main-logo h2.headline{
		font-size:1.6rem;
		letter-spacing:0.15em;
	}
}

.home-cont{
	background:#F9F9F9;
}
#info{
	font-size:0;
	padding:25px 15px 30px;
	text-shadow:0 1px 0 #FFF;
}
.info{
	text-align:center;
}
.info#info-img{
	padding-top:15px;
}
.info p{
	font-size:1.4rem;
	font-family:'Times New Roman','BIZ UD明朝','BIZ UDMincho','游明朝','YuMincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','メイリオ','Meiryo','ＭＳ Ｐ明朝','MS PMincho',serif;
}
.info h3{
	font-size:1.5rem;
	letter-spacing:0.1em;
	padding-top:7px;
	font-family:'Times New Roman','BIZ UD明朝','BIZ UDMincho','游明朝','YuMincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','メイリオ','Meiryo','ＭＳ Ｐ明朝','MS PMincho',serif;
}
.info h4.debut{
	font-family:'Open Sans';
	font-weight:700;
	font-size:3.3rem;
	padding:15px 0 10px;
}
.info h4{
	font-size:1.7rem;
	line-height:170%;
	letter-spacing:0.1em;
	padding:3px 0;
}
.big{
	font-family:'Open Sans';
	font-weight:600;
	font-size:200%;
}
.info ul{
	text-align:left;
	list-style-type:square;
	padding-top:20px;
	padding-left:20px;
	font-family:'Times New Roman','BIZ UD明朝','BIZ UDMincho','游明朝','YuMincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','メイリオ','Meiryo','ＭＳ Ｐ明朝','MS PMincho',serif;
}
.info ul li{
	font-size:1.2rem;
	line-height:150%;
	padding:2px 0;
}
@media (min-width: 375px) {
	.info p{
		letter-spacing:0.05em;
	}
	.info h4.debut{
		letter-spacing:0.05em;
	}
}
@media (min-width: 568px) {
	#info{
		padding:30px;
	}
	.info ul{
		text-align:center;
		list-style-position:inside;
		padding-left:0;
	}
}
@media (min-width: 768px) {
	#info{
		padding:40px;
	}
	.info h4.debut{
		font-size:3.5rem;
	}
}
@media (min-width: 1024px) {
	#info{
		display:-webkit-box;
    	display:-moz-box;
   		display:-ms-box;
    	display:-webkit-flexbox;
    	display:-moz-flexbox;
    	display:-ms-flexbox;
    	display:-webkit-flex;
    	display:-moz-flex;
    	display:-ms-flex;
    	display:flex;
    	-webkit-box-lines:multiple;
    	-moz-box-lines:multiple;
    	-webkit-flex-wrap:wrap;
    	-moz-flex-wrap:wrap;
    	-ms-flex-wrap:wrap;
    	flex-wrap:wrap;
	}
	.info{
		text-align:left;
		display:inline-block;
		width:calc(50% - 10px);
	}
	.info#info-img{
		margin-left:20px;
		background-repeat:none;
		background-position:center;
		background-size:cover;
	}
	.info h4.debut{
		font-size:3.7rem;
		padding-top:30px;
	}
	.info ul{
		text-align:left;
		list-style-position:outside;
		padding-top:30px;
		padding-left:15px;
	}
}
@media (min-width: 1200px) {
	#info{
		padding:50px;
	}
	.info p{
		font-size:1.5rem;
	}
	.info h3{
		font-size:1.6rem;
	}
	.info ul li{
		font-size:1.3rem;
		padding:3px 0;
	}
}

.space568{
	display:none;
}
@media (min-width: 568px) {
	.space568{
		display:inline;
	}
}


#btn{
	display:grid;
	grid-template-columns:1fr;
	box-sizing:border-box;
}
.btn{
	position:relative;
	border:1px solid #DDD;
	border-bottom:none;
	width:100%;
	height:320px;
	padding:15% 20%;
	box-sizing:border-box;
}
.btn:nth-child(6){
	border-bottom:1px solid #DDD;
}
.thumnail-image{
	width:100%;
	height:100%;
	object-fit:contain;
	object-position:center center;
}
.btn h3{
	position:absolute;
	top:15px;
	left:0;
	width:100%;
	text-align:center;
	font-family:'Open Sans';
	font-weight:500;
	font-size:1.5rem;
	letter-spacing:0.1em;
}
.btn:hover{
	background:#000;
	background:#666;
}
.btn:hover h3{
	color:#FFF;
}
.btn.dead:hover{
	background:#F9F9F9;
}
.btn.dead h3{
	color:#CCC;
}
.btn.dead:hover h3{
	color:#CCC;
}
@media (min-width: 375px) {
	.btn{
		height:375px;
	}
}
@media (min-width: 414px) {
	.btn{
		height:414px;
	}
}
@media (min-width: 568px) {
	#btn{
		grid-template-columns:1fr 1fr;
	}
	.btn{
		height:284px;
	}
	.btn:nth-child(odd){
		border-right:none;
	}
	.btn:nth-child(5){
		border-bottom:1px solid #DDD;
	}
}
@media (min-width: 667px) {
	.btn{
		height:333.5px;
	}
}
@media (min-width: 736px) {
	.btn{
		height:368px;
	}
}
@media (min-width: 768px) {
	.btn{
		height:384px;
	}
}
@media (min-width: 812px) {
	.btn{
		height:406px;
	}
}
@media (min-width: 1024px) {
	#btn{
		grid-template-columns:1fr 1fr 1fr;
	}
	.btn{
		height:295px;
	}
	.btn:nth-child(even){
		border-right:none;
	}
	.btn:nth-child(4){
		border-bottom:1px solid #DDD;
	}
	.btn h3{
		font-size:1.7rem;
	}
}
@media (min-width: 1080px) {
	.btn{
		height:313px;
	}
}
@media (min-width: 1180px) {
	.btn{
		height:346px;
	}
}
@media (min-width: 1200px) {
	.btn{
		height:353px;
	}
}

/* 360°モデルルーム */
#model360{
	text-align:center;
	padding:50px 0;
}
#model360 img{
	width:170px;
}
#model360 a{
	-webkit-transition:ease-in-out 0.5s;
	-moz-transition:ease-in-out 0.5s;
	-ms-transition:ease-in-out 0.5s;
	-o-transition:ease-in-out 0.5s;
	transition:ease-in-out 0.5s;
}
#model360 a:hover{
	opacity:0.5;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
}
@media (min-width: 568px) {
	#model360 img{
		width:200px;
	}
}
@media (min-width: 768px) {
	#model360{
		padding:70px 0;
	}
	#model360 img{
		width:200px;
	}
}
@media (min-width: 1024px) {
	#model360 img{
		width:230px;
	}
}

/* カルーセルスライダー */
#slider{
	padding:0 0 30px;
}
@media (min-width: 768px) {
	#slider{
		padding:0 0 50px;
	}
}