<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "UTF-8";
/* ==================================================================================================================
PCLPページ 団地妻これくしょん
=====================================================================================================================*/

/* ページ構成
---------------------------------------------------------- */
#app263_04{
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
	background: url(../../../img/contents_pc/lp/app263/app263_04_background.jpg) no-repeat center fixed;
}

#contentsWrap01{
	background: #1b0d00;
}

div[class^="dantiBox0"]{
	position: relative;
	left: 50%;
	margin-left: -512px;
	width: 1124px;
	vertical-align: bottom;
}

/* dantiBox_01（上段）
---------------------------------------------------------- */
/* ロゴ位置調整 */
#app263_04 div.dantiBox01 p.logo{
	position: absolute;
	top: 530px;
	margin-left: 115px;
	z-index: 100;
}

p.campaign {
    z-index: 100;
    position: absolute;
    left: 50%;
    margin-left: -160px;
    top: 510px;
}
p.background_02 {
    position: absolute;
    top: -17px;
    margin-left: -25%;
    z-index: 0;
}

.dantiBox01 {
    top: 17px;
}

/* dantiBox_02（中段）
---------------------------------------------------------- */

.dantiBox02{margin-top: 60px;}
/* dantiBox_03（下段）
---------------------------------------------------------- */

/* dantiBox_04（最下段）
---------------------------------------------------------- */

/* ボタン
---------------------------------------------------------- */
#app263_04 .largeBtn{
	position: absolute;
	width: 220px;
	height: 220px;
	left: 50%;
	z-index: 30;
}

/* ボタン アニメーション */
#app263_04 div.dantiBox01 a,
#app263_04 div.dantiBox02 a,
#app263_04 div.dantiBox03 a,
#app263_04 div.dantiBox04 a{
-webkit-animation: flipInX 4s ease 0.4s infinite both;
-webkit-backface-visibility: visible !important;
-moz-animation: flipInX 4s ease 0.4s infinite both;
-moz-backface-visibility: visible !important; 
-ms-animation: flipInX 4s ease 0.4s infinite both;
-ms-backface-visibility: visible !important; 
-o-animation: flipInX 4s ease 0.4s infinite both;
-o-backface-visibility: visible !important;  
animation: flipInX 4s ease 0.4s infinite both;
backface-visibility: visible !important; 
}
@-webkit-keyframes flipInX { 
    0%  { -webkit-transform: perspective(400px) rotateX(1080deg);} 
    10% { -webkit-transform: perspective(400px) rotateX(0deg);} 
    30% { -webkit-transform: perspective(400px) rotateX(0deg);} 
    60% { -webkit-transform: perspective(400px) rotateX(0deg);} 
    100%{ -webkit-transform: perspective(400px) rotateX(0deg);} 
}
@-moz-keyframes flipInX { 
    0%  { -moz-transform: perspective(400px) rotateX(1080deg);} 
    10% { -moz-transform: perspective(400px) rotateX(0deg);} 
    30% { -moz-transform: perspective(400px) rotateX(0deg);} 
    60% { -moz-transform: perspective(400px) rotateX(0deg);} 
    100%{ -moz-transform: perspective(400px) rotateX(0deg);} 
} 
@-ms-keyframes flipInX { 
    0%  { -ms-transform: perspective(400px) rotateX(1080deg);} 
    10% { -ms-transform: perspective(400px) rotateX(0deg);} 
    30% { -ms-transform: perspective(400px) rotateX(0deg);} 
    60% { -ms-transform: perspective(400px) rotateX(0deg);} 
    100%{ -ms-transform: perspective(400px) rotateX(0deg);} 
} 
@-o-keyframes flipInX { 
    0%  { -o-transform: perspective(400px) rotateX(1080deg);} 
    10% { -o-transform: perspective(400px) rotateX(0deg);} 
    30% { -o-transform: perspective(400px) rotateX(0deg);} 
    60% { -o-transform: perspective(400px) rotateX(0deg);} 
    100%{ -o-transform: perspective(400px) rotateX(0deg);} 
}  
@keyframes flipInX { 
    0%  { transform: perspective(400px) rotateX(1080deg);} 
    10% { transform: perspective(400px) rotateX(0deg);} 
    30% { transform: perspective(400px) rotateX(0deg);} 
    60% { transform: perspective(400px) rotateX(0deg);} 
    100%{ transform: perspective(400px) rotateX(0deg);} 
} 



/* box0のボタン位置調整 */
#app263_04 .dantiBox01 .largeBtn{top: 480px;margin-left: 190px;}
#app263_04 .dantiBox02 .largeBtn{top: 381px;margin-left: 120px;}
#app263_04 .dantiBox03 .largeBtn{top: 350px;margin-left: 250px;}
#app263_04 .dantiBox04 .largeBtn{top: 520px;margin-left: 290px;}


#app263_04 .largeBtn a{
	position:relative;
	display: block;
	width: 220px;
	height: 0;
	padding-top: 220px;
	overflow: hidden;
	z-index:30;
	background: url(../../../img/contents_pc/lp/app263/app263_04_btn.png) no-repeat 0 0;
}

#app263_04 .largeBtn a:hover{background-position: 0 -220px;}


/* 非会員時に出る「無料登録」表示 */
#app263_04  a.login:after{
	content: "";
	position: absolute;
	width: 160px;
	height: 50px;
	background: url(../../../img/contents_pc/lp/app263/app263_04_btn_over01.png) no-repeat 0 0;
	top: 160px;
	left: 50%;
	margin: 0 0 0 -80px;
	z-index: 100;
}



/* box_02アニメ 
----------------------------------------------------------------*/
#app263_04 .pic_2nd{

width: 990px;
height: 730px;
top: 0;
position: absolute;
background: url(../../../img/contents_pc/lp/app263/app263_04_mainpic01.png) no-repeat;
-webkit-background-size: contain;    background-size: contain;
z-index: 2;
}

#app263_04 .pic_3rd{
	/* text-align: center; */
	width: 540px;
	height: 170px;
	top: 90px;
	left: 50%;
	margin-left: -320px;
	position: absolute;
	background: url(../../../img/contents_pc/lp/app263/app263_04_balloon.png) no-repeat 0 0;
	-webkit-background-size: cover;
	background-size: cover;
	z-index: 2;
/* IE用CSSハック */
	display: none\9;
	}

/* IE用CSSハック */
#app263_04 .pic_3rd:not(:target){
display: none\9;
}


#app263_04 .pic_4th{width: 520px;height: 180px;top: 90px;left: 50%;margin-left: -320px;position: absolute;background: url(../../../img/contents_pc/lp/app263/app263_04_balloon.png) no-repeat 0 bottom;-webkit-background-size: cover;background-size: cover;z-index: 2;
/* IE用CSSハック */display: none\9;}
/* IE用CSSハック */
#app263_04 .pic_4th:not(:target){
display: none\9/;
}


/* pic_2ndアニメーション */
#app263_04 .pic_2nd{
-webkit-animation:pic_2nd 10s ease 0s infinite both;
-moz-animation:pic_2nd 10s ease 0s infinite both;
-o-animation:pic_2nd 10s ease 0s infinite both;
animation:pic_2nd 10s ease 0s infinite both;
}

@-webkit-keyframes pic_2nd{
0%,25%	{opacity:0;}
35%,90%	{opacity:1;}
100%	{opacity:0;}
}

@-moz-keyframes pic_2nd{
0%,25%	{opacity:0;}
35%,90%	{opacity:1;}
100%	{opacity:0;}
}

@-o-keyframes pic_2nd{
0%,25%	{opacity:0;}
35%,90%	{opacity:1;}
100%	{opacity:0;}
}

@keyframes pic_2nd{
0%,25%	{opacity:0;}
35%,90%	{opacity:1;}
100%	{opacity:0;}
}

/* pic_3rdアニメーション */
#app263_04 .pic_3rd{
-webkit-animation:pic_3rd 10s ease 0s infinite both;
-moz-animation:pic_3rd 10s ease 0s infinite both;
-o-animation:pic_3rd 10s ease 0s infinite both;
animation:pic_3rd 10s ease 0s infinite both;
}

@-webkit-keyframes pic_3rd{
0%,10%	{opacity:0; -webkit-transform: translateY(0px);}
20%,25%	{opacity:1; -webkit-transform: translateY(-30px);}
25%,100%	{opacity:0;}
}

@-moz-keyframes pic_3rd{
0%,10%	{opacity:0; transform: translateY(0px);} 
20%,25%	{opacity:1; transform: translateY(-30px);} 
25%,100%	{opacity:0;}
}

@-o-keyframes pic_3rd{
0%,10%	{opacity:0; transform: translateY(0px);} 
20%,25%	{opacity:1; transform: translateY(-30px);} 
25%,100%	{opacity:0;}
}


@keyframes pic_3rd{
0%,10%	{opacity:0; transform: translateY(0px);} 
20%,25%	{opacity:1; transform: translateY(-30px);} 
25%,100%	{opacity:0;}
}

/* pic_4thアニメーション */
#app263_04 .pic_4th{
-webkit-animation:pic_4th 10s ease 0s infinite both;
-moz-animation:pic_4th 10s ease 0s infinite both;
-o-animation:pic_4th 10s ease 0s infinite both;
animation:pic_4th 10s ease 0s infinite both;
}

@-webkit-keyframes pic_4th{
0%,30%	{opacity:0; -webkit-transform: translateY(-50px);}
40%,60%	{opacity:1; -webkit-transform: translateY(-100px);}
60%,100%	{opacity:0;}
}

@-moz-keyframes pic_4th{
0%,30%	{opacity:0; transform: translateY(-50px);} 
40%,60%	{opacity:1; transform: translateY(-100px);} 
60%,100%	{opacity:0;}
}

@-o-keyframes pic_4th{
0%,30%	{opacity:0; transform: translateY(-50px);} 
40%,60%	{opacity:1; transform: translateY(-100px);} 
60%,100%	{opacity:0;}
}

@keyframes pic_4th{
0%,30%	{opacity:0; transform: translateY(-50px);} 
40%,60%	{opacity:1; transform: translateY(-100px);} 
60%,100%	{opacity:0;}
}



/* キャンペーン注意文言 */

div.dantiBox04 div.attention {
  position: relative;
  width: 850px;
  bottom: 26px;
  left: 50%;
  margin-left: -445px;
  color: #fff;
  font-size: 14px;
  background: rgba(82, 2, 128, 0.63);
  border-radius: 10px;
  padding: 20px;
}
div.dantiBox04 div.attention h2 {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin: -6px 0 10px 0;
}

div.dantiBox04 div.attention ul{
  margin-left: 16px;
}

div.dantiBox04 div.attention li{
  list-style-type: disc;
}</pre></body></html>