/*----------------------------------------------------------------------------*/
/* 	UI パーツ　共通 CSS						 					     */
/*----------------------------------------------------------------------------*/

	/* 詳しくは　Button :hover 「 □　→ ■  」  */

	.detail-btn {
		width:260px;
		height:50px;
		border:2px solid #0079C1;		/* PressanceBlue02 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:11px 11px;
		background-position: 12px  18px;
		background-color:#0079C1;		/* PressanceBlue02 */
	}
	.detail-btn  a{
		font-family: "NotoSansCJKjp-Medium";
		font-size:15px;
		color:#FFF;
		text-decoration:none;
		line-height:47px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail {
		width:260px;
		height:50px;
		left:-260px;
		top:0px;
		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:11px 11px;
		background-position: 235px 18px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.detail-btn:hover .eff-detail  {
		left:0;top:0;
	}
	.detail-btn:hover a{
		color:#FFF;
		color:#0079C1;		/* PressanceBlue02 */
	}

	@media only screen and (max-width:768px) {

		.detail-btn {
			width:200px;
			height:40px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:10px 10px;
			background-position: 10px  13px; 
			background-color:#0079C1;		/* PressanceBlue02 */
		}
		.detail-btn  a{
			font-size:12px;
			line-height:37px;
		}
		.eff-detail {
			width:200px;
			height:40px;
			left:-200px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.detail-btn {
			width:200px;
			height:40px;
			background-position:  left 5px  top 15px;
		}
		.detail-btn  a{
			font-size:14px;
			line-height:40px;
		}
		.eff-detail {
			width:200px;
			height:40px;
			left:-200px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  15px; 
		}
	}

	/* 間取りType詳細 Button :hover 「 □　→ ■  」  */

	.rdetail-btn {
		width:300px;
		height:50px;
		border:2px solid #0079C1;		/* PressanceBlue02 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:11px 11px;
		background-position: 12px  18px;
		background-color:#0079C1;		/* PressanceBlue02 */
	}
	.rdetail-btn  a{
		font-family: "NotoSansCJKjp-Medium";
		font-size:15px;
		color:#FFF;
		text-decoration:none;
		line-height:47px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail {
		width:300px;
		height:50px;
		left:-300px;
		top:0px;
		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:11px 11px;
		background-position: 235px 18px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.rdetail-btn:hover .eff-detail  {
		left:0;top:0;
	}
	.rdetail-btn:hover a{
		color:#FFF;
		color:#0079C1;		/* PressanceBlue02 */
	}

	@media only screen and (max-width:768px) {

		.rdetail-btn {
			width:260px;
			height:40px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:10px 10px;
			background-position: 10px  13px; 
			background-color:#0079C1;		/* PressanceBlue02 */
		}
		.rdetail-btn  a{
			font-size:12px;
			line-height:37px;
		}
		.eff-detail {
			width:260px;
			height:40px;
			left:-260px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.rdetail-btn {
			width:180px;
			height:40px;
			background-position:  left 5px  top 12px;
		}
		.rdetail-btn  a{
			font-size:14px;
			line-height:35px;
		}
		.eff-detail {
			width:180px;
			height:40px;
			left:-180px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  12px; 
		}
	}

	/*　一覧に戻る Button :hover 「 □　→ ■  」  */

	.rlist-btn {
		width:300px;
		height:50px;
		border:2px solid #0079C1;		/* PressanceBlue02 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-arrow01.png") no-repeat;
		background-size:26px 8px;
		background-position: 12px  18px;
		background-color:#0079C1;		/* PressanceBlue02 */
	}
	.rlist-btn  a{
		font-family: "NotoSansCJKjp-Medium";
		font-size:15px;
		color:#FFF;
		text-decoration:none;
		line-height:47px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-list {
		width:300px;
		height:50px;
		left:-300px;
		top:0px;
		background	: url("../images/icon/btn-arrow02.png") no-repeat;
		background-size:26px 8px;
		background-position: 235px 18px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.rlist-btn:hover .eff-list {
		left:0;top:0;
	}
	.rlist-btn:hover a{
		color:#FFF;
		color:#0079C1;		/* PressanceBlue02 */
	}

	@media only screen and (max-width:768px) {

		.rlist-btn {
			width:260px;
			height:40px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-arrow01.png") no-repeat;
			background-size:18.2px 5.6px;
			background-position: 10px  13px; 
			background-color:#0079C1;		/* PressanceBlue02 */
		}
		.rlist-btn  a{
			font-size:12px;
			line-height:37px;
		}
		.eff-list {
			width:260px;
			height:40px;
			left:-260px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.rlist-btn {
			width:180px;
			height:40px;
			background-position:  left 5px  top 12px;
		}
		.rlist-btn  a{
			font-size:14px;
			line-height:35px;
		}
		.eff-list {
			width:180px;
			height:40px;
			left:-180px;
			top:0px;
			background	: url("../images/icon/btn-arrow01.png") no-repeat;
			background-size:20px 5.6px;
			background-position: 5px  12px; 
		}
	}

	/* 詳しくは　Button :hover 「 □　→ ■  」  */

	.detail-btn02 {
		width:150px;
		height:30px;
		border:2px solid #E25A7B;	/* CM-pink02  */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:8px 8px;
		background-position: 10px  10px;
		background-color:#E25A7B;	/* CM-pink02  */
	}
	.detail-btn02  a{
		font-family:arial;
		font-size:13px;
		color:#E25A7B;	/* CM-pink02  */
		color:#FFF;
		text-decoration:none;
		line-height:28px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail02 {
		width:150px;
		height:30px;
		left:-150px;
		top:0px;
		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:8px 8px;
		background-position: 130px 10px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.detail-btn02:hover .eff-detail02  {
		left:0;top:0;
	}
	.detail-btn02:hover a{
		color:#FFF;
		color:#E25A7B;	/* CM-pink02  */
	}

	@media only screen and (max-width:768px) {

		.detail-btn02 {
			width:130px;
			height:30px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  9px; 
			background-color:#E25A7B;	/* CM-pink02  */
		}
		.detail-btn02  a{
			font-size:12px;
			line-height:26px;
		}
		.eff-detail02 {
			width:130px;
			height:30px;
			left:-130px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.detail-btn02 {
			width:150px;
			height:30px;
			background-position:  left -2px  top 15px;
		}
		.detail-btn02  a{
			font-size:14px;
			line-height:40px;
		}
		.eff-detail02 {
			width:150px;
			height:30px;
			left:-150px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 10px  10px; 
		}
	}

	/* 詳しくは　Button :hover 「 □　→ ■  」  */

	.detail-btn03 {
		width:200px;
		height:45px;
		border:2px solid #E25A7B;	/* CM-pink02  */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-sym01.png") no-repeat;
		background-size:10px 10px;
		background-position: 10px  16px;
		background-color:#E25A7B;	/* CM-pink02  */
	}
	.detail-btn03  a{
		font-size:14px;
		color:#E25A7B;	/* CM-pink02  */
		color:#FFF;
		font-family: "NotoSansCJKjp-Medium";
		text-decoration:none;
		line-height:38px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail03 {
		width:200px;
		height:45px;
		left:-200px;
		top:0px;
		background	: url("../images/icon/btn-sym02.png") no-repeat;
		background-size:10px 10px;
		background-position: 170px 16px; 
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.detail-btn03:hover .eff-detail03  {
		left:0;top:0;
	}
	.detail-btn03:hover a{
		color:#FFF;
		color:#E25A7B;	/* CM-pink02  */
	}

	@media only screen and (max-width:768px) {

		.detail-btn03 {
			width:180px;
			height:30px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-sym01.png") no-repeat;
			background-size:8px 8px;
			background-position: 5px  8px; 
			background-color:#E25A7B;	/* CM-pink02  */
		}
		.detail-btn03  a{
			font-size:12px;
			line-height:26px;
		}
		.eff-detail03 {
			width:180px;
			height:30px;
			left:-180px;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.detail-btn03 {
			width:200px;
			height:40px;
			background-position:  left -2px  top 15px;
		}
		.detail-btn03  a{
			font-size:14px;
			line-height:30px;
			font-family: "NotoSansCJKjp-Medium";
		}
		.eff-detail03 {
			width:200px;
			height:40px;
			left:-200px;
			top:0px;
			background	: url("../images/icon/btn-sym02.png") no-repeat;
			background-size:8px 8px;
			background-position: 10px  10px; 
		}
	}

	/* 詳しくは　Button :hover 「 □　→ ■  」  */

	.detail-btn01 {
		margin: 0 auto 0 auto;
		width:200px;
		height:40px;
		border:2px solid #D35400;		/* LD-red01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-arrow01.png") no-repeat;
		background-size:31px 9px;
		background-size:23px 6.8px;	/* 75% */
		background-position: 10px  13px; 
		background-color:#FFF;
		background-color:#D35400;		/* LD-red01 */
	}
	.detail-btn01  a{
		font-family:arial;
		font-size:13px;
		color:#D35400;		/* LD-red01 */
		color:#FFF;
		text-decoration:none;
		line-height:36px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-detail01 {
		width:200px;
		height:40px;
		left:-200px;
		top:0px;
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:23px 6.8px;	/* 75% */
		background-position: 160px 13px; 
		background-color:#D35400;		/* LD-red01 */
		background-color:#FFF;
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.detail-btn01:hover .eff-detail01  {
		left:0;top:0;
	}
	.detail-btn01:hover a{
		color:#FFF;
		color:#D35400;		/* LD-red01 */
	}

	@media only screen and (max-width:768px) {

		.detail-btn01 {
			margin: 0 auto 0 auto;
			width:160px;
			height:35px;
			background-position:  left 0px  top 10px;
			background	: url("../images/icon/btn-arrow01.png") no-repeat;
			background-size:23px 6.8px;	/* 75% */
			background-position: 5px  10px; 
			background-color:#D35400;		/* LD-red01 */
		}
		.detail-btn01  a{
			font-size:12px;
			line-height:31px;
			color:#FFF;
		}
		.eff-detail01 {
			width:160px;
			height:35px;
			left:-180px;
			top:0px;
			color:#D35400;		/* LD-red01 */
			background-color:#FFF;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.detail-btn01 {
			width:200px;
			height:40px;
			background-position:  left -2px  top 15px;
		}
		.detail-btn01  a{
			font-size:14px;
			line-height:40px;
		}
		.eff-detail01 {
			margin: 0 auto 0 auto;
			width:200px;
			height:40px;
			left:-200px;
			top:0px;
			background	: url("../images/icon/btn-arrow.png") no-repeat;
			background-size:26px 7.7px;
			background-size:23px 6.8px;	/* 75% */
			background-position: -2px  25px; 
		}
	}


/* ■ 申し込み enter Button  */

	/* Button :hover □　→ ■  */

	.ent-btn {
		width:400px;
		height:65px;
		border:3px solid #D35400;		/* LD-red01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background	: url("../images/icon/btn-arrow.png") no-repeat;
		background-size:31px 9px;
		background-size:22px 6px;
		background-position:  left 0px  top 25px;
		background-color:#FFF;
	}
	.ent-btn  a{
		font-size:18px;
		font-family: "NotoSansCJKjp-Medium";
		font-display: swap;
		color:#FFF;
		color:#D35400;		/* LD-red01 */
		text-decoration:none;
		line-height:58px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-ent {
		width:400px;
		height:65px;
		left:-400px;
		top:0px;
		background-color:#D35400;		/* LD-red01 */
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.ent-btn:hover .eff-ent  {
		left:0;top:0;
	}
	.ent-btn:hover a{
		color:#fff;
	}

	@media only screen and (max-width:768px) {

		.ent-btn {
			width:80%;
			height:40px;
			background-position:  left 0px  top 13px;
		}
		.ent-btn  a{
			font-size:12px;
			line-height:32px;
		}
		.eff-ent {
			width:80%;
			height:40px;
			left:-80%;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.ent-btn {
			width:300px;
			height:50px;
			background-position:  left -2px  top 18px;
		}
		.ent-btn  a{
			font-size:13px;
			line-height:42px;
		}
		.eff-ent {
			width:300px;
			height:50px;
			left:-300px;
			top:0px;
		}
	}

/* ■ 申し込み enter Button  */

	/* Button :hover ■ → □  */

	.ent-btn02 {
		width:400px;
		height:65px;
		border:3px solid #D35400;		/* LD-red01 */
		float:left;
		text-align:center;
		cursor:pointer;
		position:relative;
		box-sizing:border-box;
		overflow:hidden;
		margin:0 0 40px 0;
		background-color:#FFF;
		background	: url("../images/icon/btn-arrow01.png") no-repeat;
		background-size:29px 8px;
		background-position:  left -4px  top 22px;
		background-color:#D35400;		/* LD-red01 */
	}
	.ent-btn02  a{
		font-size:18px;
		font-family: "NotoSansCJKjp-Medium";
		font-display: swap;
		color:#D35400;		/* LD-red01 */
		color:#FFF;
		text-decoration:none;
		line-height:58px;
		transition:all .5s ease;
		z-index:2;
		position:relative;
	}
	.eff-ent02 {
		width:400px;
		height:65px;
		left:-400px;
		top:0px;
		background-color:#D35400;		/* LD-red01 */
		background-color:rgba( 255,255,255,0.95 ); 	/*  White  透過95% */
		position:absolute;
		transition:all .5s ease;
		z-index:1;
	}
	.ent-btn02:hover .eff-ent02  {
		left:0;top:0;
	}
	.ent-btn02:hover a{
		color:#fff;
		color:#D35400;		/* LD-red01 */
	}

	@media only screen and (max-width:768px) {

		.ent-btn02 {
			width:80%;
			height:40px;
			background-position:  left 0px  top 13px;
		}
		.ent-btn02  a{
			font-size:12px;
			line-height:32px;
		}
		.eff-ent02 {
			width:80%;
			height:40px;
			left:-80%;
			top:0px;
		}
	}
	/* Tablet Layout ◇ */
	@media only screen and (min-width: 768px) and (max-width: 992px) {

		.ent-btn02 {
			width:300px;
			height:50px;
			background-position:  left -2px  top 18px;
		}
		.ent-btn02  a{
			font-size:13px;
			line-height:42px;
		}
		.eff-ent02 {
			width:300px;
			height:50px;
			left:-300px;
			top:0px;
		}
	}


/* ■ 伸縮系　animation  */
	/*
		<div class="extend-x">
			<div>AAAA</div>
			<div>BBBB</div>
			<div>CCCC</div>
			<div>DDDD</div>
		</div>
	*/

	.extend-y div{
		float: left;
		width: 40px;
		height: 100%;
		height: 300px;
		transform: scaleY(0);
		margin-bottom:50px;
	}
	.extend-y div:nth-child(2n){
		 transform-origin: top;
		 background-color: #d7d7fa;
	}
	.extend-y div:nth-child(2n-1){
		 transform-origin: bottom;
		 background-color: #d7fad7;
	}

	.extend-y div:nth-child(n){
	 	animation : extend-y 2.5s linear 0.0s infinite alternate none running;
	 	animation : extend-y 2.5s linear 0.0s infinite normal none running;
	}

	@keyframes extend-y{
		0%{
			transform: scaleY(0);
		}
		 100%{
			  transform: scaleY(1);
		 }
	}

	.extend-x div{
		width: 140px;
		height: 1px;
		height: 100%;
		transform: scaleX(0);
	}
	.extend-x div:nth-child(2n){
		 transform-origin: left;
		 background-color: #d7d7fa;
	}
	.extend-x div:nth-child(2n-1){
		 transform-origin: right;
		 background-color: #d7fad7;
	}

	.extend-x div:nth-child(n){
	 	animation : extend-x 1.5s linear 0.0s infinite normal none running;
	 	animation : extend-x 2.5s linear 0.0s infinite alternate none running;
	}

	@keyframes extend-x{
		0%{
			transform: scaleX(0);
		}
		 100%{
			  transform: scaleX(1);
		 }
	}

	.box0N .scrolldown a {	/* 縦 borderline 伸縮 animation　★ */
		display:block;
		position:absolute;
		bottom:20px;
		right:50px;
		margin: 0  20px 0 auto;
		width:130px;
		height: 60px;
		color: #1F518E; 	/* bf-blue01 */
		color: #555;
		font-size:13px;
		text-align:center;
		padding-top:0px; 
		border-right:1px solid #1F518E; 	/* bf-blue01 */
		border-right:1px solid #555;
		z-index:7;
		transform: scaleY(0);	
		transform-origin: top;
	 	animation : extend-yl 0.8s linear 0.0s infinite alternate none running;
	 	animation : extend-yl 1.5s linear 0.0s infinite normal none running;
	}
	@keyframes extend-yl{
		0%{
			transform: scaleY(0);
		}
		 100%{
			  transform: scaleY(1);
		 }
	}

/* ■ TEXT Effect　animation  */

/* TEXT effect #01 */