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


#areaP01 {
	background:#ccc;
}
#areaP02 {
	background:#eee;
}
#areaP03 {
	background:#ecc;
}
#areaP04 {
	background:#eef;
}


/************************************************
スライド項目のサンプル設定例
***********************************************/
#listPhoto {
	max-width:1000px;
	margin:auto;
	position:relative;
}

#listPhoto .photo{
	text-align:center;
	line-height:0;
	background:#333;
	position:relative;
	width:100%;
	height:100%;
}
#listPhoto .photo img{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}

/*セレクトボタンの設定*/
#listPhoto .slidesjs-pagination {
	display:flex;
	justify-content: center;
}
#listPhoto .slidesjs-pagination li{
	padding:0 1.0em;
}
#listPhoto .slidesjs-pagination li a{
	display:block;
	width:25px;
	height:0;
	padding:25px 0 0 0;
	overflow:hidden;
	background:#eee;
	border-radius: 25px;        /* CSS3草案 */  
	-webkit-border-radius: 25px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 25px;   /* Firefox用 */
}
#listPhoto .slidesjs-pagination li a.active{
	background-color:#333;
}

/*NEXT・PREVボタン設定*/
#listPhoto .slidesjs-navigation {
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:10;
	color:#fff;
	background:#666;
	padding:0.2em 0.6em;
	display:block;
}
#listPhoto .slidesjs-next {right:0;}
#listPhoto .slidesjs-previous {left:0;}
#listPhoto .slidesjs-next:after {content:" >>";}
#listPhoto .slidesjs-previous::before {content:"<< ";}
#listPhoto .slidesjs-play,
#listPhoto .slidesjs-stop {display:none!important;}








/********************************************************************
.ttlPtrn01（タイトル装飾）
********************************************************************/

.ttlPtrn01 {
	position:relative;
	margin-bottom:3.2em;
	display: flex;
	justify-content:flex-end;
	/*height: 3.8em;*/
}
.ttlPtrn01::before {
	display:block;
	/*content:"";*/
	width: 70%;
	height: 0;
	padding: 47% 0 0 0;
	background: no-repeat center center;
	background-size:cover;
	border:solid 1px #9a9a9a;
	opacity: 0;
	transform:translateX(15%);
	transition-property:transform,opacity;
	transition-duration:0.4s;
	transition-timing-function:ease-in-out;
	transition-delay:0.8s;
}
.ttlPtrn01.show::before {
	opacity: 1;
	transform:translateX(10%);
}
.ttlPtrn01 span{
	width:88%;
	font-size:1.5em;
	font-size:6.5vw;
	display:block;
	color:#fff;
	padding:0.8em 1.0em 0.8em 1.5em;
	text-align:right;
	position:relative;
	right:0;
	bottom:0;
	opacity: 0;
	transform:translate(-5%,35%);
	background:#009868;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,009868+23,009868+42&0+0,0.67+23,0.67+42 */
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(0,152,104,0.67) 23%, rgba(0,152,104,0.67) 42%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(0,152,104,0.67) 23%,rgba(0,152,104,0.67) 42%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(0,152,104,0.67) 23%,rgba(0,152,104,0.67) 42%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ab009868',GradientType=1 ); /* IE6-9 */
	transition-property:opacity,transform;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:1.0s;
}

.ttlPtrn01 span{
}
.ttlPtrn01.show span{
	transform:translate(0%,35%);
	opacity: 1;
}



@media  print, screen and ( min-width:992px ){
	.ttlPtrn01 span{
		font-size:1.75em!important;
		font-weight:bold;
		padding:1.1em 1.0em 1.1em 1.0em;
	}
}


/********************************************************************
#introduction
********************************************************************/

#introduction{}


@-webkit-keyframes viewPhoto {
 0% { opacity:0; } 
 45%,55% { opacity:1; filter: blur(5px);}
 100% { opacity:1;filter: blur(0); } 
}
@keyframes viewPhoto {
 0% { opacity:0; } 
 45%,55% { opacity:1; filter: blur(5px);}
 100% { opacity:1;filter: blur(0); } 
}
#introduction .photo.p01,
#introduction .photo.p02{
	opacity:0;
	filter: blur(5px);
}
#introduction .photo.p01.show,
#introduction .photo.p02.show{
	animation: viewPhoto 0.9s ease 0s forwards alternate;
	-webkit-animation: viewPhoto 0.9s ease 0s forwards alternate;
}


#introduction .text.p01{
	opacity:0;
	transition-property:opacity;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction .text.p01.show{
	opacity:1;
}


#introduction .list.p01{
	opacity:0;
	transform:translateX(10%);
	transition-property:opacity,transform;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction .list.p01.show{
	opacity:1;
	transform:translateX(0);
}

#introduction strong{
	color:#07afa7;
	font-size:1.2em;
}


#introduction #imageCatch {
	background:#000;
	position:relative;
	-moz-transform:    rotateX( 90deg );  /* Firefox用 */
	-webkit-transform: rotateX( 90deg );  /* Chrome,Safari,新しいOpera用 */
	-o-transform:      rotateX( 90deg );  /* 古いOpera用 */
	-ms-transform:     rotateX( 90deg );  /* IE9用 */
	transform:         rotateX( 90deg );  /* CSS3の書き方 */
	opacity: 0;
	transition-property:opacity,-moz-transform,-webkit-transform,-o-transform,-ms-transform,transform;
	transition-duration:0.7s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction #imageCatch.show {
	opacity: 1;
	-moz-transform:    rotateX( 0deg );  /* Firefox用 */
	-webkit-transform: rotateX( 0deg );  /* Chrome,Safari,新しいOpera用 */
	-o-transform:      rotateX( 0deg );  /* 古いOpera用 */
	-ms-transform:     rotateX( 0deg );  /* IE9用 */
	transform:         rotateX( 0deg );  /* CSS3の書き方 */
}
#introduction #imageCatch .photo {
	opacity: 0;
	transform: scale(0.7);
	transition-property:opacity,transform;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0.4s;
}
#introduction #imageCatch.show .photo {
	opacity: 1;
	transform: scale(1);
}

#introduction #imageCatch p {
	color:#fff;
	opacity: 0;
	transform:translateY(10%);
	transition-property:opacity,transform;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0.8s;
}
#introduction #imageCatch.show p {
	opacity: 1;
	transform:translateY(0);
}

#introduction .forKeiyaku {
	padding:4.5em 0 2.5em;
}

#introduction .forKeiyaku .ttlKeiyaku {
	color: #009d9500;
    text-align: center;
    padding: 0.8em 0.95em;
    font-size: 4.6vw;
    position: relative;
    font-weight: bold;
    margin-bottom: 1.5em;
    border: solid 2px #009d95;
    transform: scaleX(.5);
    border-radius: 45px;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    opacity: 0;
    transition-property: color,transform,opacity;
    transition-duration: 0.6s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
#introduction .forKeiyaku .ttlKeiyaku.show {
	color:#009d95ff;
	transform: scaleX(1);
	opacity: 1;
}

#introduction .forKeiyaku .listContact {
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}
#introduction .forKeiyaku .listContact .blockContact{
	display:block;
	position:relative;
	width:50%;
 	width : -webkit-calc(50% - 0.8em) ;
 	width : calc(50% - 0.8em) ;
	background:#2cb8c1;
	text-align:center;
	color:#fff;
	font-size:5.1vw;
	font-family: 'Hind', sans-serif;
	padding:3.5em 0.5em 0.5em;
	margin:0.6em 0.4em;
	transform: scale(0.5);
	opacity: 0;
	transition-property:transform,opacity;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction .forKeiyaku .listContact .blockContact.show{
	transform: scale(1);
	opacity: 1;
}
#introduction .forKeiyaku .listContact .blockContact::before{
	content:"";
	display:block;
	width:50px;
	height:50px;
	background:no-repeat left top;
	background-size:100%;
	position:absolute;
	left:50%;
	top:0.5em;
	transform:translateX(-50%);
}

#introduction .forKeiyaku .listContact .blockContact.Mail {
	width:100%;
 	width : -webkit-calc(100% - 0.8em) ;
 	width : calc(100% - 0.8em) ;
}

#introduction .forKeiyaku .listContact .blockContact.Tel::before{
	background-image:url(css_img/iconIntroductionTel.svg);
}

#introduction .forKeiyaku .listContact .blockContact.Fax::before{
	background-image:url(css_img/iconIntroductionFax.svg);
}
#introduction .forKeiyaku .listContact .blockContact.Mail::before{
	background-image:url(css_img/iconIntroductionMail.svg);
}



#introduction .forKeiyaku .listMessageForm {
	margin:0;
}

#introduction .forKeiyaku .listMessageForm li{
	margin:0;
	padding:1.0em 0;
	opacity: 0;
	transform: translateX(20%);
	transition-property:opacity,transform;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction .forKeiyaku .listMessageForm li.show{
	opacity: 1;
	transform: translateX(0);
}

#introduction .forKeiyaku .listMessageForm a{
	display:block;
	color:#fff;
	position:relative;
	background:#009ea9;
	font-weight:bold;
	overflow:hidden;
	font-size:4.7vw;
}
#introduction .forKeiyaku .listMessageForm a,
#introduction .forKeiyaku .listMessageForm a:hover{
	text-decoration:none;
}
#introduction .forKeiyaku .listMessageForm a::before{
	position:absolute;
	left:0;
	top:0;
	content:"";
	width:100%;
	height:100%;
	background:#ffb919;
	transform:translateX(100%);
	transition-property:transform;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction .forKeiyaku .listMessageForm a:hover::before{
	transform:translateX(0);
}

#introduction .forKeiyaku .listMessageForm a .frameBtm {
	position:relative;
	padding:1.0em 0.8em 1.2em;
}

#introduction .forKeiyaku .listMessageForm a span{
	left:0;
	bottom:-0.3em;
	top:auto;
	font-size:3.5vw;
	position:relative;
	display:block;
	font-weight:normal;
}


#introduction .guideShortmail {
	text-align: center;
	border:solid 1px #32c2cc;
	background:#fff;
	position:relative;
	padding:6.5em 0.8em 0.5em;
	opacity: 0;
	transition-property:opacity;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
#introduction .guideShortmail.show {
	opacity: 1;
}

#introduction .guideShortmail::before {
	position:absolute;
	left:50%;
	top:1.5em;
	transform:translate(-50%,20%);
	content:"";
	width:70px;
	height:51px;
	background: url(css_img/iconShormailMessage.svg) no-repeat center top;
	opacity:0;
	transition-property:opacity,transform;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0.6s;
}
#introduction .guideShortmail.show::before {
	transform:translate(-50%,0);
	opacity:1;
}



#introduction .forKeiyaku .titleMessAlltime {
	position:relative;
	opacity: 0;
	transform:translate(-3%,-3%);
	transition-property:opacity,transform;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0.6s;
}
#introduction .forKeiyaku .titleMessAlltime.show {
	opacity: 1;
	transform:translate(0,0);
}
#introduction .forKeiyaku .titleMessAlltime h3{
	position: absolute;
	font-size: 4.2vw;
	font-weight: bold;
	top: 0;
	width: 75%;
	padding: 0.8em 1.1em;
	border: solid 1px #000;
	background: #ffffff99;
	z-index:5;
	opacity: 0;
	transform: translateX(5%);
	transition-property:opacity,transform;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:1.0s;
}
#introduction .forKeiyaku .titleMessAlltime.show h3{
	transform: translateX(0);
	opacity: 1;
}


#introduction .ttlMinCate {
	background:url(css_img/bgTtlMinCateKeylost.png) no-repeat right bottom;
	background-size:100%;
	color:#ffffff;
	height:0;
	overflow:hidden;
	position:relative;
	padding:35% 0 0 0;
	font-size:6.2vw;
	opacity: 0;
	transition-property:opacity;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction .ttlMinCate.show {
	opacity: 1;
}
	
#introduction .ttlMinCate span{
	position:absolute;
	right:0.8em;
	bottom:1.5em;
	opacity: 0;
	transform: translateX(-10%);
	transition-property:opacity,transform;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.8s;
}
#introduction .ttlMinCate.show span{
	opacity: 1;
	transform: translateX(0);
}

#introduction .ttlMinCate::before {
	content:"";
	background:#0084ff66;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

#introduction .ttlMinCate:after {
	position:absolute;
	left:0;
	bottom:1.0em;
	width:100%;
	height:3px;
	background:#fff;
	content:"";
	opacity:0;
	transform: translateX(-100%);
	transition-property:opacity,transform;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
#introduction .ttlMinCate.show:after {
	opacity:1;
	transform: translateX(0);
}

#introduction .photo.p01 {
	padding:2.5em 0;
}

#introduction .link.p01{
	display: block;
    color: #fff;
    font-size: 4.8vw;
    font-weight: bold;
    padding: 1.3em 0.8em;
    background: #2ac0ee;
	border: solid 1px #fff;
    margin-bottom: 2.0em;
	position: relative;
}
#introduction .link.p01:after{
	content: "";
	width:35px;
	height:35px;
	position: absolute;
	background: url(css_img/iconBtmCursorUnder.svg) no-repeat center center;
	background-size: 100%;
	display: block;
	right:20px;
	top:50%;
	transform: translateY(-50%);
}
#introduction .link.p01::before{
	content: "";
	display: block;
	width:100%;
	height: 100%;
	background:#ffcb00;
	position:absolute;
	left:50%;
	top: 0;
	-moz-transform:    translate(-50%) rotateY( 90deg );  /* Firefox用 */
	-webkit-transform: translate(-50%) rotateY( 90deg );  /* Chrome,Safari,新しいOpera用 */
	-o-transform:      translate(-50%) rotateY( 90deg );  /* 古いOpera用 */
	-ms-transform:     translate(-50%) rotateY( 90deg );  /* IE9用 */
	transform:         translate(-50%) rotateY( 90deg );  /* CSS3の書き方 */
	transition-property:-moz-transform,-webkit-transform,-o-transform,-ms-transform,transform;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction .link.p01 span{
	position: relative;
	z-index: 2;
}
#introduction .link.p01:hover::before{
	-moz-transform:    translate(-50%) rotateY( 0deg );  /* Firefox用 */
	-webkit-transform: translate(-50%) rotateY( 0deg );  /* Chrome,Safari,新しいOpera用 */
	-o-transform:      translate(-50%) rotateY( 0deg );  /* 古いOpera用 */
	-ms-transform:     translate(-50%) rotateY( 0deg );  /* IE9用 */
	transform:         translate(-50%) rotateY( 0deg );  /* CSS3の書き方 */
}

#introduction .pagelinkMenu{
	margin-bottom: 1.5em;
}
#introduction .pagelinkMenu ul{
	display: flex;
}
#introduction .pagelinkMenu li{
	width:33%;
	width : -webkit-calc(100% / 3) ;
	width : calc(100% / 3) ;
	padding: 0;
	margin: 0;
}
#introduction .pagelinkMenu li a{
	display: block;
	height: 0;
	padding:100% 0 0 0;
	background: url("css_img/btmBgSlidepage.svg") center center no-repeat;
	background-size:85%;
	color: #fff;
	transition-property:background-size;
	transition-duration:0.2s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#introduction .pagelinkMenu li a:hover{
	background-size:95%;
}
#introduction .pagelinkMenu li a span{
	text-align: center;
	width: 85%;
	font-weight: bold;
	font-size: 2vw;
	line-height: 3vw;
	padding: 0.5em;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
}

@media  print, screen and ( min-width:992px ){
	
	#introduction #imageCatch .photo img{
		width:100%;
	}
	
	#introduction #imageCatch p {
		position:absolute;
		width:100%;
		left:0;
		bottom:0;
		font-size:1.2em;
		padding:1.0em 1.5em;
		background:#00000099;
	}
	
	
	#introduction .forKeiyaku .ttlKeiyaku {
		padding: 0.5em 1.5em;
    font-size: 2.1em;
		margin-bottom:1.0em;
		/*height:100px;*/
		border-radius: 100px;        /* CSS3草案 */  
		-webkit-border-radius: 100px;    /* Safari,Google Chrome用 */
		-moz-border-radius: 100px;   /* Firefox用 */
	}
	
	#introduction .forKeiyaku .listContact .blockContact{
		width : -webkit-calc(50% - 0.8em) ;
		width : calc(50% - 0.8em) ;
		font-size:3.4em;
		padding:3.0em 0.5em 0.5em;
		margin:0.6em 0.4em;
	}

	#introduction .forKeiyaku .listContact .blockContact.Mail {
		font-size: 2.8em;
		padding: 3.3em 0.5em 1.0em;
	}
	
	#introduction .forKeiyaku .listContact .blockContact::before{
		width:95px;
		height:95px;
		/*top:1.6em;*/
	}
	
	
	
	
	#introduction .forKeiyaku .titleMessAlltime {
		height:350px;
		overflow:hidden;
	}

	
	#introduction .forKeiyaku .titleMessAlltime h3{
		font-size: 1.5em;
		top: 0;
		width: 75%;
		padding: 0.8em 1.1em;
	}
	
	#introduction .forKeiyaku .titleMessAlltime .photo {
		position:absolute;
		right:0;
		bottom:-5px;
		width:550px;
	}
	
	
	#introduction .forKeiyaku .listMessageForm {
		display:flex;
		flex-wrap: wrap;
	}
	
	#introduction .forKeiyaku .listMessageForm li{
		margin:0;
		padding:1.0em 1.0em;
		width:100%;
		font-size:0.84em;
	}
	
	
	#introduction .forKeiyaku .listMessageForm a{
		font-size:1.5em;
	}
	
	#introduction .forKeiyaku .listMessageForm a span{
		bottom:-0.3em;
		font-size:0.87em;
	}
	
	
	
	#introduction .guideShortmail {
		padding: 1.8em 1.5em 1.8em 9.5em;
		text-align: left;
	}
	
	#introduction .guideShortmail::before {
		left:3.0em;
		top:50%;
		transform:translate(0,-70%);
		width:70px;
		height:51px;
		line-height:1.8em;
	}
	#introduction .guideShortmail.show::before {
		transform:translate(0,-50%);
	}
	
	
	
	#introduction .ttlMinCate {
		padding-top:180px;
		font-size:2.0em;
		background-position:right -210px;
	}
	
	#introduction .link.p01{
		font-size: 1.5em;
		padding: 1.3em 0.8em;
		margin-bottom: 2.0em;
	}
	
	#introduction .link.p01:after{
		width:45px;
		height:45px;
		right:30px;
	}

	#introduction .pagelinkMenu li a span{
		width: 90%;
		font-size: 1.5em;
		line-height: 1.5em;
		padding: 0.5em;
	}
	
}



/********************************************************************
#groupRecession（「ご退去について」）
********************************************************************/


#groupRecession {}

#groupRecession p.p01{
	font-weight: bold;
	font-size: 1.3em;
	text-align: center;
	color:#15bdad;
	padding-bottom: 0.5em;
	opacity:0;
	transform: translateY(-1em);
	transition-property:opacity,transform;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
#groupRecession p.p01.show{
	opacity: 1;
	transform: translateY(0);
}
#groupRecession p.p01::before,
#groupRecession p.p01::after{
	content: " ▼ ";
}

#groupRecession p.p02{
	text-align: center;
	color: #1e818c;
	opacity: 0;
	padding-top: 0.8em;
	transform: translateY(-15%);
	transition-property:transform,opacity;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
#groupRecession p.p02.show{
	opacity: 1;
	transform: translateY(0);
}

#groupRecession .boxTitle {
	position:relative;
	min-height:130px;
	margin:auto;
	max-width:400px;
}

#groupRecession .boxTitle::before {
	content:"";
	position:absolute;
	width:110px;
	height:110px;
	display:block;
	background: url(css_img/iconRecessionTtl.svg) no-repeat left top;
	background-size:100%;
	left:8px;
	bottom:0;
	opacity:0;
	transition-property:opacity;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#groupRecession .boxTitle.show::before {
	opacity:1;
}



#groupRecession .boxTitle .frame{
	width:228px;
	height:90px;
	padding:10px 0 0 35px;
	background:url(css_img/fukidashiRecessionFrame.svg) no-repeat left top;
	background-size:100%;
	position: absolute;
	right:5px;
	top:0;
	opacity:0;
	transform:scale(0.5) translate(-20%, 25%);
	transition-property:opacity,transform;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:0.5s;
}
#groupRecession .boxTitle .frame.show{
	opacity:1;
	transform:scale(1.0) translate(0, 0);
}

#groupRecession .boxTitle .frame h3{
	background: url(css_img/fukidashiRecessionTitle.svg) no-repeat left top;
	background-size:100%;
	width:130px;
	height:0;
	overflow:hidden;
	padding:13% 0 0 0;
	margin-bottom:0.6em;
}

#groupRecession .boxTitle .frame p{
	background: url(css_img/fukidashiRecessionText.svg) no-repeat left top;
	background-size:100%;
	width:173px;
	height:0;
	overflow:hidden;
	padding:20% 0 0 0;
}


#groupRecession .listSpanRecess {
	padding:1.0em 0.5em;
}

#groupRecession .listSpanRecess dl {
	padding:1.0em 0;
	position:relative;
	opacity:0;
	transform:translateX(-10%);
	transition-property:opacity,transform;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
#groupRecession .listSpanRecess dl.show {
	opacity:1;
	transform:translateX(0);
}


#groupRecession .listSpanRecess dt {
	position:relative;
	padding:15% 0 0 0;
	margin-bottom:1.2em;
	background: url(css_img/ttlbgRecessionBar.svg) no-repeat left top;
	background-size:100%;
	color:#fff;
	font-size:4vw;
	font-weight:bold;
}
#groupRecession .listSpanRecess dt span{
	position:absolute;
	left:1.0em;
	top:50%;
	opacity:0;
	transform:translateY(-50%);
	transition-property:opacity,;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.6s;
}
#groupRecession .listSpanRecess dl.show dt span{
	opacity:1;
}
#groupRecession .listSpanRecess dt span::before{
	content:"◆ ";
}

#groupRecession .listSpanRecess dd{
	opacity:0;
	transform:translateY(-30%);
	transition-property:opacity,;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
	transition-delay:1.1s;
}
#groupRecession .listSpanRecess dl.show dd{
	opacity:1;
	transform:translateY(0);
}

#groupRecession .text.p01{
	font-weight: bold;
  color: #ff6d28;
  text-align: center;
	font-size: 1.14em;
	text-shadow:0 0 15px #ffffff;
	opacity:0;
	transition-property:opacity;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
#groupRecession .text.p01.show{
	opacity:1;
}


#groupRecession .text.p02{
  color: #525252;
	font-size:0.87em;
	opacity:0;
	position:relative;
	transform:translateX(10%);
	/*font-weight:bold;*/
	transition-property:opacity,transform;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.3s;
}
#groupRecession .text.p02.show{
	opacity:1;
	transform:translateX(0);
}

#groupRecession .text.p03{
	padding: 0.8em 1.5em 0.8em 1.5em;
	font-size: 0.81em;
	font-weight: bold;
	color: #18b6bd;
	opacity: 0;
	transition-property:opacity;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#groupRecession .text.p03.show{
	opacity:1;
}

#groupRecession .list.p01{}
#groupRecession .list.p01 li{
	font-size:0.91em;
	padding:1.8em 0 1.8em 25px;
	color:#386368;
	border-bottom: solid 2px #5fccbe;
	position:relative;
	font-weight:bold;
	opacity:0;
	transform:translateX(10%);
	transition-property:opacity,transform;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}

#groupRecession .list.p01 li.show{
	opacity:1;
	transform:translateX(0);
}

#groupRecession .list.p01 li span{
	color:#13b68e;
	top:1.61em;
}


#groupRecession .ttlPtrn01.p01::before {
	background-image: url(css_img/photoAfterLiveTtl_01.png);
}
#groupRecession .ttlPtrn01.p02::before {
	background-image: url(css_img/photoAfterLiveTtl_02.png);
}

@media print, screen and ( min-width:992px ){
	
	
	

	#groupRecession .boxTitle {
		min-height:190px;
		width:610px;
		max-width:none;
	}
	
	
	#groupRecession .boxTitle::before {
		width:205px;
		height:170px;
		left:8px;
		bottom:0;
	}
	
	#groupRecession .boxTitle .frame{
		width:428px;
		height:166px;
		padding:18px 0 0 65px;
		right:0px;
		top:0;
	}
	
	#groupRecession .boxTitle .frame h3{
		width:237px;
		padding-top:13%;
		margin-bottom:0.6em;
	}
	
	
	#groupRecession .boxTitle .frame p{
		width:323px;
		padding-top:20%;
	}

	#groupRecession .listSpanRecess dl {
		padding:2.0em 0;
		display:flex;
	}
	
	
	
	#groupRecession .listSpanRecess dt {
		padding-top:102px;
		margin-bottom:0;
		font-size:1.5em;
		width:523px;
		transform:translateX(-50px);
		background-image: url(css_img/ttlbgRecessionBarWide.png);
		background-position:left top;
	}
	
	#groupRecession .listSpanRecess dt span{
		left:3.5em;
		top:20px;
		transform:translateY(0);
	}
	
	#groupRecession .listSpanRecess dd {
		width:500px;
	}
	
	
	
	
	
	#groupRecession .text.p01{
		font-size: 1.65em;
	}
	
	
	#groupRecession .list.p01 li{
		font-size:1.02em;
		padding:1.8em 20px 1.8em 55px;
	}
	#groupRecession .list.p01 li span{
		top:1.61em;
		left:15px;
	}
	
}





/********************************************************************
#groupRule（「ご入居中のルールとマナー」）
********************************************************************/

#groupRule .ttlPtrn01 span{
		font-size:5.4vw;
	}

#groupRule .ttlPtrn01.p01::before {
	background-image: url(css_img/photoRule01.png);
}

#groupRule .group.p01,
#groupTrouble .group.p01 {
	padding:1.2em 0;
}
#groupRule .group,
#groupTrouble .group {
	opacity:0;
	transform:translateX(5%);
	transition-property:opacity,transform;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0.1s;
}

#groupRule .group.show,
#groupTrouble .group.show{
	opacity:1;
	transform:translateX(0);
}

#groupRule .group.p01 dt,
#groupTrouble .group.p01 dt{
	color:#0897f2;
	font-weight:bold;
	font-size:1.25em;
	margin-bottom:0.8em;
}
#groupRule .group.p01 dt::before,
#groupTrouble .group.p01 dt::before{
	content:"◎ ";
}

#groupRule .group.p01 dd,
#groupTrouble .group.p01 dd{
	color:#506776;
}


#groupRule .group.p02 {
	padding:0.2em 0;
	color:#2382bf;
}


#groupRule .group.p03 {
	padding:0.5em 0;
}
#groupRule .group.p03 dt {
	color:#006dbb;
	font-weight:bold;
	margin-bottom:0.5em;
}
#groupRule .group.p03 dt::before {
	content:"■ ";
}

#groupRule .ttl.p01{
	padding:0.5em 1.0em;
	background:#5cbfce;
	color:#fff;
	font-weight:bold;
	font-size:1.08em;
	margin-bottom:1.0em;
	opacity:0;
	transform:translateX(-10%);
	transition-property:opacity,transform;
	transition-duration:0.4s;
	transition-timing-function:ease-in-out;
	transition-delay:0.0s;
}

#groupRule .ttl.p01.show{
	opacity:1;
	transform:translateX(0);
}

#groupRule .ttl.p01 span{
	opacity:0;
	transform:translateX(-10%);
	transition-property:opacity;
	transition-duration:0.4s;
	transition-timing-function:ease-in-out;
	transition-delay:0.45s;
}
#groupRule .ttl.p01.show span{
	opacity:1;
}

/********************************************************************
#groupTrouble（「ご入居中のトラブル・メンテナンスについて」）
********************************************************************/

#groupTrouble {}

#groupTrouble .ttlPtrn01 {
	margin-bottom: 4.5em;
}

#groupTrouble .naviSetsubi {
	position: relative;
	font-weight: bold;
	font-size: 4.05vw;
	color:#000;
	padding: 0 1.5em 27% 0;
	margin-bottom: 1.0em;
	opacity:0;
	transform: translateX(-30px);
	transition-property:opacity,transform;
	transition-duration:0.4s;
	transition-timing-function:ease-in-out;
	transition-delay:0.45s;
}
#groupTrouble .naviSetsubi .frame{
	border:solid 2px #65c4ff;
	background:#fff;
	padding: 1.0em 1.5em;
}
#groupTrouble .naviSetsubi.show {
	opacity: 1;
	transform: translateX(0);
}
#groupTrouble .naviSetsubi:after {
	content:"";
	display:block;
	width:35%;
	height:0;
	padding: 26% 0 0 0;
	z-index: 5;
	/*background: #eee;;*/
	background:url("css_img/iconIntroHP.svg") no-repeat top center;
	background-size:100%;
	position: absolute;
	right:0;
	bottom:0;
	opacity: 0;
	transform: translate(0,10px);
	transition-property:opacity,transform;
	transition-duration:0.4s;
	transition-timing-function:ease-in-out;
	transition-delay:0.7s;
}
#groupTrouble .naviSetsubi.show:after {
	opacity: 1;
	transform: translate(0,0);
}

#groupTrouble .ttlPtrn01 span{
		font-size:5.4vw;
	}

#groupTrouble .ttlPtrn01.p01::before {
	background-image: url(css_img/photoRule01.png);
}

@media print, screen and ( min-width:992px ){
	#groupTrouble .naviSetsubi {
		font-size: 1.25em;
		line-height: 1.8em;
		padding-bottom: 95px;
		padding-left: 1.5em;
	}

	#groupTrouble .naviSetsubi .frame {
		width:600px;
	}
	#groupTrouble .naviSetsubi:after {
		width:270px;
		padding-top:210px;
		right:0;
		bottom:0;
	}
}


/********************************************************************
#groupRule（「ご入居中のルールとマナー」）
********************************************************************/

#groupRule {}

#groupRule h4{
	font-weight:bold;
	font-size:1.1em;
	opacity:0;
	transition-property:opacity;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#groupRule h4.show{
	opacity:1;
}

#groupRule h4::before{
	content: "■ ";
}

#groupRule .text.p01{
	color: #485354;
	font-size: 0.91em;
	font-size:0.91em;
	opacity:0;
	transition-property:opacity;
	transition-duration:0.6s;
	transition-timing-function:ease-in-out;
	transition-delay:0s;
}
#groupRule .text.p01.show{
	opacity:1;
}


/********************************************************************
#groupContact（「お問合せフォーム」）
********************************************************************/

#groupContact {
}

#groupContact form{
	opacity:0;
}
#groupContact form.show {
	opacity:1;
}