@charset "utf-8";

/*---------------------------------------------------------------- */
/* common
------------------------------------------------------------------ */

.flexslider { display:none; position:relative;}
.mobile .flexslider { display: inline-block;}


/*---------------------------------------------------------------- */
/* loading
------------------------------------------------------------------ */
#progressWrap {
	position:fixed;
	top:0;
	left:0;
	z-index:999999;
	width:100%;
	height:100%;

background-image: -ms-linear-gradient(left, #24221b, #000);
background-image: -webkit-linear-gradient(left, #24221b, #000);
background-image: linear-gradient(to right, #24221b, #000);

}
#progress {	width: 100%; height:200px; position:fixed; top:40%; z-index:10000;}

#ttl { font-family:"Times New Roman", Times, serif; color:#fff; font-size:1.6em; font-weight:normal; margin-top:70px; }
#logo { text-align:center; width:100%; position:absolute; top:0;}

#progressBar {
	width: 0;
	height: 1px;
	background-color: rgba(255,255,255,1);
	z-index:10;
	position:absolute;
	top:100px;
}
#progressTxt {
	font-size:1.8em;
	font-family:"Times New Roman", Times, serif;
	width:100%;
	text-align:center;
	color:#fff;
	position: absolute;
	top:150px;
	z-index:5;
}
#progressTxt span { font-size:0.3em;}
.mobile #progressTxt span { font-size:0.5em; margin:0 3px;}

#canvasArea canvas { position:absolute; top:-15%; left:0; z-index:5;}



/*---------------------------------------------------------------- */
/* keyV
------------------------------------------------------------------ */
#keyV { position:relative;}
#keyCopy { opacity:0; transition:2s all ease-in-out 1s; position:absolute; top:50%; transform:translateY(-30%); width:100%; text-align:center; z-index:100;}
.videoEnded #keyCopy { opacity:1; transform:translateY(-50%);}

#keyV video {
	position: fixed;
	left: 50%; 
	top: 50%; 
	transform:translate(-50%,-50%);
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	height: auto;
	z-index:0;
}
#skipBtn {
    position: fixed;
    top: 80px;
    right: 10px;
    z-index: 9999;
    font-size: 1.4em;
    text-align: center;
    color: #fff;
    background: #000;
    padding: 5px 15px;
    width: 100px;
    cursor: pointer;
	opacity:0;
	transition:1s all ease-in-out;
	font-family:"Times New Roman", Times, serif;
}
.load #skipBtn { opacity:1;}
#skipBtn:hover {
    background: #353535;
}


/*---------------------------------------------------------------- */
/* info pr
------------------------------------------------------------------ */
#contentsStart { margin-top: -85px; padding-top: 85px;}
#infoArea { position: relative; background:rgba(0,0,0,0.75); width:100%; }
	/*#infoTxt { border-bottom: 1px solid #666; margin-bottom: 30px;}*/
	#infoTxt h2 { color:#fff; font-size:1.2em; font-weight:normal; display:block; vertical-align:top; text-align:center; padding:1em; margin-bottom:20px;}
	#infoTxt p {
		color: #fff;
		font-size: 3em;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		letter-spacing: 0.1em;
		margin: 10px 4% 20px;
		font-family: "Times New Roman", Times, "HG明朝B", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
		line-height: 1.4;
	}
	#infoTxt p small {font-size:0.4em; letter-spacing:0.05em;}
	#infoTxt p span {font-size:0.7em; letter-spacing:0.07em;}
	
	#infoTxt p.req { /*border-right:1px solid #666;*/ /*padding-right:20px; margin-right:20px;*/}
	
	#infoTxt { padding-top:1em; width:100%;}
	#infoTxt,
	#infoBtn,
	#infoBnr,
	#infoBnr05 { display:inline-block; vertical-align:top;}
	#infoBtn,
	#infoBnr,
	#infoBnr05 { margin:0 1em;}
	#infoTxt #infoBtn {
		display: block;
		margin: 5px auto 30px;
	}

#pr { border:1px solid rgba(255,255,255,0.20); }
#pr li { display:inline-block; padding:20px 0; width:33.3333333333%; text-align:center; border:1px solid rgba(255,255,255,0.20); border-width:0 0 0 1px;}
#pr li:first-child { border:none;}
#merit { border:1px solid rgba(255,255,255,0.30); background: rgba(134,120,0,0.37); margin-bottom: 15px; }

#merit h2 {font-size: 2.8em; color: #fff;line-height: 1.3;padding: 30px 0 35px;}
#merit h2 span {font-size: 1.2em;}
#merit p.subText {font-size: 2.2em;color: #fff;margin-bottom: 10px; font-family:"Times New Roman", Times, "HG明朝B", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
#merit li { display:inline-block; padding:20px 0; width:33.3333333333%; text-align:center; border:1px solid rgba(255,255,255,0.20); border-width:0 0 0 1px;}
#merit li:first-child { border:none;}
#info { padding:20px 0;}


/*---------------------------------------------------------------- */
/* subpageLink
------------------------------------------------------------------ */
.subPageLink .photo { width:62.5%; line-height:0; transition:all ease-in-out .3s; position:relative;}
.subPageLink .photo figcaption { position:absolute; bottom:0; right:0; background:rgba(0,0,0,0.75); margin:0; padding:5px;}
.subPageLink .txt { width:37.5%; transition:all ease-in-out .3s} 
section .photo, section .txt { display:inline-block; vertical-align:top;}
.subPageLink .txt {	background:#fff; position:relative;}
.txtInner { position:absolute; top:50%; transform:translateY(-50%); padding:0 16%; z-index:99; transition:all ease-in-out .4s;}

.subPageLink a {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-direction: row;
	flex-direction:         row;
}
.subPageLink.photoR a {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-direction: row-reverse;
	flex-direction:         row-reverse;
}
.subPageName { color:#000; font-size:2.4em; font-family:"Times New Roman", Times, serif; position:relative; padding-bottom:20px; margin-bottom:20px; text-align:left; transition:all ease-in-out .3s;}
.subPageName::after { content:""; position:absolute; bottom:0; border-bottom:1px solid #000; width:50px; left:0; transition:all ease-in-out 1s;}
.subPageLink h2 { font-size:2.0em; letter-spacing:0.00em; text-align:left; line-height:1.5; margin-bottom:20px; font-family:  "ヒラギノ明朝 ProN W2", "HiraMinProN-W2","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝B", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ Ｐ明朝" ,"MS PMincho", "MS 明朝", serif; transition:all ease-in-out .3s;}
.subPageLink p { font-size:1.3em; text-align:left; line-height:1.8; transition:all ease-in-out .3s;}
.subPageLink a h2 { color:#000;}
.viewMore { color:#fff; font-size:1.5em; font-family:"Times New Roman", Times, serif; background:#3d312d; padding:15px; width:200px; transition:all ease-in-out 1s;}

.subPageLink { transition:all ease-in-out .3s; cursor:pointer; position:relative;}
.subPageLink::after { content:""; position:absolute; top:0; right:0; width:60%; background:rgba(0,0,0,0); z-index:5; height: 100%; transition:all ease-in-out .4s;}
.mobile .subPageLink::after { content: none;}

#developerArea.subPageLink .photo figcaption { background:none; width:100%; height:100%;}
#developerArea figcaption span { position:absolute; bottom:0; right:0; background: rgba(0,0,0,0.75); padding:5px;}
#developerArea figcaption span.cap1 { bottom:0; right:52%;}
#developerArea figcaption span.cap2 { bottom:50%; right:0;}


@media only screen and (min-width: 769px) {

	.subPageLink:hover .txt { background:none;}
	.subPageLink:hover .photo { opacity:0;}
	
	.subPageLink:hover::after { width:100%; background:rgba(0,0,0,0.5);}

	.subPageLink:hover .subPageName { color:#fff;}
	.subPageLink:hover .subPageName::after {border-bottom:1px solid #fff; width:150px;} 
	.subPageLink:hover h2 { color:#fff;}
	.subPageLink:hover p { color:#fff;}
	
	.subPageLink:hover .viewMore { color:#062128; background:#fff; }	
}

/*---------------------------------------------------------------- */
/* conceptArea
------------------------------------------------------------------ */
#conceptArea { background:url(../img/concept.jpg) top center no-repeat; background-size:cover;}
#locationArea { background:url(../img/location.jpg) top center no-repeat; background-size:cover;}
#accessArea { background:url(../img/access.jpg) top center no-repeat; background-size:cover;}
#designArea { background:url(../img/design.jpg) top center no-repeat; background-size:cover;}
#planArea { background:url(../img/plan.jpg) top center no-repeat; background-size:cover;}
#equipmentArea { background:url(../img/equipment.jpg) top center no-repeat; background-size:cover;}
#qualityArea { background:url(../img/quality.jpg) top center no-repeat; background-size:cover;}
#modelroomArea { background:url(../img/modelroom.jpg) top center no-repeat; background-size:cover;}
#developerArea { background:url(../img/developer.jpg) top center no-repeat; background-size:cover;}

/*---------------------------------------------------------------- */
/* BnrCont
------------------------------------------------------------------ */
.commonBnrCont { max-width: 900px; margin: 11px auto 15px;}
.appliBnrCont { max-width: 900px; margin: 11px auto 5px;}
.appliBnrWrap {
	background: url(../img/bnrAppli_bg.jpg) repeat top left;
	border-left:1px solid #ae9d5e;
	border-right:1px solid #ae9d5e;
	margin: 0 2%;
}
.appliBnrWrap p {
    margin: 20px 0 0;
    font-size: 1.8em;
	font-family:"Times New Roman", Times, "HG明朝B", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.appliBnrWrap:before,
.appliBnrWrap:after {
	content:"";
	display:block;
	height:1px;
	width:100%;
	background: #ae9d5e;
	background: -moz-linear-gradient(-45deg,  #ae9d5e 0%, #fce48a 50%, #ae9d5e 100%);
	background: -webkit-linear-gradient(-45deg,  #ae9d5e 0%,#fce48a 50%,#ae9d5e 100%);
	background: linear-gradient(135deg,  #ae9d5e 0%,#fce48a 50%,#ae9d5e 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ae9d5e', endColorstr='#ae9d5e',GradientType=1 );
}
.appliBnrWrap h3,
.appliBnrWrap div {display: inline-block; vertical-align: middle; padding: 15px 1.5%;}


@media only screen and (max-width: 1480px) {
	#infoTxt { width:100%; /*padding-bottom:20px; margin-bottom:20px;  border-bottom:1px solid rgba(255,255,255,0.20);*/}
}

@media only screen and (max-width: 1400px) {
	#merit li { padding:20px 2%;}
	#merit li:nth-child(1),
	#merit li:nth-child(2),
	#merit li:nth-child(3) {width: 33.3333333333%;}
}
@media only screen and (max-width: 1366px) {
	.subPageLink h2 br { display:none;}
}
@media only screen and (max-width: 1300px) {
	#pr li { padding:20px 2%;}
	#pr li:nth-child(1) { width:25%;}
	#pr li:nth-child(2) { width:35%;}
	#pr li:nth-child(3) { width:40%;}
}
@media only screen and (max-width: 1139px) {
#infoBtn,#infoBnr,#infoBnr05 {
    margin: 0 0 1em 0;
    width: 32.71869%;
    padding: 0 1%;
}
#infoBtn{
    margin: 0;
}
}


@media only screen and (max-width: 910px) {
	.appliBnrCont { max-width: 460px; padding: 0 30px;}
	.appliBnrWrap p { margin: 25px 20px 5px; }
	.appliBnrWrap h3,
	.appliBnrWrap div {display: block; padding: 15px 6%;}
}


@media only screen and (max-width: 890px) {
	#infoTxt p { display:block;}
	#infoTxt p.req { border-right:0; padding-right:0; /*margin: 15px 0;*/}
}




@media only screen and (max-width: 830px) {
	.subPageLink a,
	.subPageLink.photoR a { display:inline-block;}
	.subPageLink .photo { width:100%;}
	.subPageLink .txt { width:100%;}
}
@media only screen and (max-width: 767px) {
	#video,#skipBtn { display: none;}
	#keyCopy { padding:20%;}
	
	#infoTxt, #infoBtn, #infoBnr { margin:0;}
	
	#infoBtn,
	#infoBnr,
	#infoBnr05{
	margin:10px 0;
    width: auto;
    padding: 0;
    display: block;}
	
	#infoTxt #infoBtn {
		margin: 10px auto;
	}
	
	.subPageName { text-align:center;}
	.subPageName::after { width:30px; left:50%; transform:translateX(-50%);}
	
	#merit h2 {font-size: 1.9em; }
	#merit p.subText {font-size: 1.8em; }
}

@media only screen and (max-width: 768px) {
	/*#keyV { padding-top:60px;}*/
	
	.viewMore { margin: 0 auto;}
	
	#pr { border-width:0 0 1px;}
	#pr li { border-width:1px 0 0;}
	#pr li:nth-child(1) { width:100%;}
	#pr li:nth-child(2) { width:100%;}
	#pr li:nth-child(3) { width:100%;}
	#merit { border-width:0 0 1px;}
	/*#merit h2 {font-size: 2.4em;}*/
	#merit li { border-width:1px 0 0;}
	#merit li:nth-child(1) { width:100%;}
	#merit li:nth-child(2) { width:100%;}
	#merit li:nth-child(3) { width:100%;}
	
	#infoTxt h2 { width:100%; padding:0 4%; margin-bottom:20px; text-align:center;}
	#infoTxt p { text-align:center; font-size:2.4rem;}
	#infoTxt p small { line-height:0.5;}
	#infoTxt{ margin:0;}
/*	#infoBnr { margin:0 10px;}
*/	/*#infoTxt { margin-bottom:20px; padding: 0 4%;}*/
	
	.txtInner { position:static; transform: translateY(0); padding:5vh 10%;}
}

@media only screen and (max-width: 515px) {
	#infoTxt p {
		font-size: 1.7rem;
	}
	
	
}