/*  -------------------------------MENU BUTTON------------------------------- */
.btn {
	border-radius:0 0 0 3px;
}

/*  -------------------------------HEADER------------------------------- */
header{
	width:100%;
	height:100px;
	position:absolute;
	top:0;
}
.nisshojp{
	width:100%;
	height:35px;
	background:#fff;
	overflow:hidden;
}
.nisshojp a{
	display:block;
	width:78px;
	height:15px;
	background:url(../svg/svg_nisshojp_black.svg) no-repeat;
	background-size:auto 15px;
	text-indent:-9999px;
	opacity:0.25;
	margin:10px;
}
h1{
	width:100%;
	height:96px;
	background-image:url(../svg/svg_androom_logo.svg), url(../svg/svg_bg_arch.svg);
	background-position:center, center 40px;
	background-repeat:no-repeat, no-repeat;
	background-size:auto 96px, 100% 20px;
	text-indent:-9999px;
}

/*  -------------------------------TOP_IMAGE------------------------------- */
#stage{
	position:relative;
	width:100%;
	max-width:100%;
	height:480px;
	overflow:hidden;
	margin-top:75px;
	background:#000;
}
#stage ul:last-child{
	display:none;
}
.pic{
	position:absolute;
}
.pic img{
	width:600px;
	height:480px;
	opacity:0;
	animation:imgTrans 78s infinite; /* （6×物件数）s */
}
#photo13 img {
	animation-delay: 1s; /* （固定値1s） */
}
#photo12 img {
	animation-delay: 7s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo11 img {
	animation-delay: 13s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo10 img {
	animation-delay: 19s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo9 img {
	animation-delay: 25s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo8 img {
	animation-delay: 31s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo7 img {
	animation-delay: 37s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo6 img {
	animation-delay: 43s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo5 img {
	animation-delay: 49s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo4 img {
	animation-delay: 55s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo3 img {
	animation-delay: 61s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo2 img {
	animation-delay: 67s; /* （6×物件[n-1]番目 ＋1）s */
}
#photo1 img {
	animation-delay: 73s; /* （6×物件[n-1]番目 ＋1）s */
}
@keyframes imgTrans {
	0%{opacity:0; transform:translateX(-40px);}
	2.7%{opacity:1;}
	5.7%{opacity:1;}
	9.7%{opacity:0;} /*物件数：13_ 現在の基準点：7.7% */
	100%{opacity:0; transform:translateX(-240px);}
}

/*  -------------------------------TOP_LINK------------------------------- */
#toplink{
	width:100%;
	height:120px;
	margin-top:-120px;
	background:rgba(0,0,0,0.5);
	text-align:center;
	position:absolute;
	top:555px;
	overflow:hidden;
}
#toplink .icon{
	padding:5px 0 0;
}
#toplink .title{
	margin-top:45px;
}
#toplink p{
	padding:3px 0 0;
	color:#fff;
	font-size:10px;
	letter-spacing:1px;
	font-family: 'Work Sans', sans-serif;
	font-family: 'Oswald', sans-serif;
}
#toplink section{
	width:100%;
	height:120px;
	animation:nameTrans 78s infinite; /* （6×物件数）s */
	opacity:0;
}
#toplink #name13{
	animation-delay: 1s;
}
#toplink #name12{
	animation-delay: 7s;
}
#toplink #name11{
	animation-delay: 13s;
}
#toplink #name10{
	animation-delay: 19s;
}
#toplink #name09{
	animation-delay: 25s;
}
#toplink #name08{
	animation-delay: 31s;
}
#toplink #name07{
	animation-delay: 37s;
}
#toplink #name06{
	animation-delay: 43s;
}
#toplink #name05{
	animation-delay: 49s;
}
#toplink #name04{
	animation-delay: 55s;
}
#toplink #name03{
	animation-delay: 61s;
}
#toplink #name02{
	animation-delay: 67s;
}
#toplink #name01{
	animation-delay: 73s;
}
@keyframes nameTrans {
	0%{width:150%; opacity:0;}
	2.7%{width:100%; opacity:1;}
	4.7%{width:100%; opacity:1;}
	10.7%{width:50%; opacity:0;} /*物件数：13 _ 現在の基準点：7.7% */
	100%{width:0; opacity:0;}
}
#topicon{
	position:absolute;
	top:440px;
	left:50%;
	margin-left:-40px;
	width:80px;
	height:40px;
	overflow:hidden;
}
#topicon .icon{
	width:80px;
	height:40px;
	position:absolute;
	text-align:center;
}
#topicon .icon object{
	display:inline-block;
	opacity:0;
	width:60px;
	animation:iconTrans 78s infinite; /* （6×物件数）s */
}
#topicon .icon .icon13{
	animation-delay: 1s;
}
#topicon .icon .icon12{
	animation-delay: 7s;
}
#topicon .icon .icon11{
	animation-delay: 13s;
}
#topicon .icon .icon10{
	animation-delay: 19s;
}
#topicon .icon .icon09{
	animation-delay: 25s;
}
#topicon .icon .icon08{
	animation-delay: 31s;
}
#topicon .icon .icon07{
	animation-delay: 37s;
}
#topicon .icon .icon06{
	animation-delay: 43s;
}
#topicon .icon .icon05{
	animation-delay: 49s;
}
#topicon .icon .icon04{
	animation-delay: 55s;
}
#topicon .icon .icon03{
	animation-delay: 61s;
}
#topicon .icon .icon02{
	animation-delay: 67s;
}
#topicon .icon .icon01{
	animation-delay: 67s;
}
@keyframes iconTrans {
	1%{width:60px; opacity:0;}
	2.7%{width:80px; opacity:1;}
	4.7%{width:80px; opacity:1;}
	10.7%{width:0px; opacity:0;} /*物件数：13 _ 現在の基準点：7.7% */
	100%{width:0; opacity:0;}
}


/*  -------------------------------CONCEPT------------------------------- */
#concept{
	padding:20px 0 40px;
}
#concept h2{
	height:28px;
	background:url(../svg/svg_concept.svg) no-repeat center;
	background-size:auto 28px;
	text-indent:-9999px;
}
#concept p{
	margin-top:15px;
	font-size:14px;
	text-align:center;
	line-height:1.75;
}
#concept .about_btn{
	display:block;
	margin:50px auto 30px;
	width:290px;
	height:45px;
	background:url(../svg/svg_about.svg) no-repeat center;
	background-size:auto 45px;
	text-indent:-9999px;
}


/*  -------------------------------ROOM_LIST------------------------------- */
.arch{
	width:100%;
	height:20px;
	background:url(../svg/svg_bg_arch.svg) no-repeat center top #e5e5e5;
	background-size:100% 20px;
}

#rooms{
	background-color:#e5e5e5;
	text-align:center;
}
#rooms h2{
	height:28px;
	background:url(../svg/svg_roomlist.svg) no-repeat center bottom;
	background-size:auto 28px;
	text-indent:-9999px;
	margin-bottom:25px;
}
#rooms section{
	width:100%;
	height:220px;
	background-size:auto 220px;
	overflow:hidden;
}
#rooms a{
	display:block;
	box-sizing:border-box;
	width:100%;
	height:220px;
	padding-top:18px;
	text-decoration:none;
	color:#fff;
}
#rooms .room_num{
	font-size:26px;
	font-family: 'Oswald', sans-serif;
	letter-spacing:1px;
	line-height:1;
}
#rooms h3{
	margin:20px 0 15px;
}
#rooms p{
	font-size:13px;
	line-height:1.5;
}
/* 複数物件あり（section内の最初に<div class="collection">2 rooms</div>を付ける） */
.collection{
	position:absolute;
	left:0;
	width:55px;
	height:24px;
	padding:3px 0 0 0;
	margin:10px 0 0;
	background:rgba(0,0,0,0.6);
	oveflow:hidden;
	color:#fff;
	text-align:center;
	font-size:12px;
	font-family: 'Oswald', sans-serif;
	box-sizing:border-box;
	border-radius: 0 3px 3px 0;
}

/* NEW（section内の最初に<div class="new">NEW</div>を付ける） */
.new{
	position:absolute;
	right:0;
	width:50px;
	height:50px;
	background:url(../svg/svg_new.svg) no-repeat center bottom;
	background-size:50px 50px;
	text-indent:-9999px;
	oveflow:hidden;
}
/* UPDATE（section内の最初に<div class="update">UPDATE</div>を付ける） */
.update{
	position:absolute;
	right:0;
	width:50px;
	height:50px;
	background:url(../svg/svg_update.svg) no-repeat center bottom;
	background-size:50px 50px;
	text-indent:-9999px;
	oveflow:hidden;
}
/* COMING SOON（sectionタグにclass="soon"を付ける）*/
#rooms .soon .room_num{
	margin:-5px 0 -3px;
	font-size:12px;
	line-height:1.2;
}
#rooms .soon  .room_num span{
	font-size:10px;
	letter-spacing:0;
	display:inline-block;
	border:solid 1px #fff;
	margin:2px 0 0;
	padding:2px 6px;
}
#rooms .soon h3, #rooms .soon p{
	opacity:0.4;
}
#rooms .soon a{
	pointer-events:none;
}


/*  -------------------------------ROOM_CONTENTS------------------------------- */
.room01{
	background:url(../img/room01.jpg) no-repeat center;
}
.room01 a{
	background:rgba(35,30,0,0.6);
}
.room02{
	background:url(../img/room02.jpg) no-repeat center;
}
.room02 a{
	background:rgba(95,55,70,0.6);
}
.room03{
	background:url(../img/room03.jpg) no-repeat center;
}
.room03 a{
	background:rgba(30,60,0,0.6);
}
.room04{
	background:url(../img/room04.jpg) no-repeat center;
}
.room04 a{
	background:rgba(35,60,110,0.6);
}
.room05{
	background:url(../img/room05.jpg) no-repeat center;
}
.room05 a{
	background:rgba(20,50,10,0.6);
}
.room06{
	background:url(../img/room06.jpg) no-repeat center;
}
.room06 a{
	background:rgba(100,30,55,0.6);
}
.room07{
	background:url(../img/room07.jpg) no-repeat center;
}
.room07 a{
	background:rgba(140,30,50,0.6);
}
.room08{
	background:url(../img/room08.jpg) no-repeat center;
}
.room08 a{
	background:rgba(10,190,210,0.6);
}
.room09{
	background:url(../img/room09.jpg) no-repeat center;
}
.room09 a{
	background:rgba(170,60,0,0.6);
}
.room10{
	background:url(../img/room10.jpg) no-repeat center;
}
.room10 a{
	background:rgba(100,40,15,0.6);
}
.room11{
	background:url(../img/room11.jpg) no-repeat center;
}
.room11 a{
	background:rgba(45,35,10,0.6);
}
.room12{
	background:url(../img/room12.jpg) no-repeat center;
}
.room12 a{
	background:rgba(75,55,50,0.6);
}
.room13{
	background:url(../img/room13.jpg) no-repeat center;
}
.room13 a{
	background:rgba(35,105,50,0.6);
}

/*  -------------------------------ABOUT------------------------------- */
.about{
	position: fixed;
	top:0;
	left:-100%;
	width: 100%;
	height: 100vh;
	z-index: 13;
 	background-color:#000;
	transition:0.3s;
	opacity:0;
	box-sizing:border-box;
	padding:3%;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}
.about.open{
	left: 0;
	opacity:1;
}
.about_content{
	text-align:center;
	width:100%;
	min-height:calc(100vh - 25px);
	min-height:100%;
	background:#efefef url(../svg/svg_bg_about.svg) no-repeat center;
	background-size:246px auto;
	border-radius:5px;
	color:#777;
	font-size:12px;
	line-height:1.5;
	padding-bottom:40px;
	box-sizing:border-box;
	overflow:auto;
	-webkit-overflow-scrolling: touch;
}
.about_content h3{
	background:#000 url(../img/about.jpg) no-repeat;
	background-size:auto 35px;
	background-position:center 0;
	padding:35px 0 0;
	margin:0 0 15px;
}
.about_content h3 object{
	vertical-align:bottom;
}
.about_content p{
	padding:5px;
}
.about_content p strong{
	color:#000;
	font-weight:bold;
}
.about_content .about_btn{
	display:block;
	width:40%;
	margin:15px auto 0;
	padding:6px;
	background:#000;
	color:#fff;
	font-size:14px;
	font-family: 'Oswald', sans-serif;
	letter-spacing:2px;
	border-radius:5px;
}