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


/**kv
===================================*/
header #kv div{ background-image:url(../img/bar/key.jpg);}

.key_tl{
	position: absolute;
	bottom: 75px;
	left: 610px;
}

/**lead
===================================*/
#lead{ width:100%; min-height:660px; background:url(../img/bar/lead_bg.jpg) no-repeat center top; background-size:cover; padding-top:120px;}

#lead > div{ width:558px; float:right; margin-right:15%; background-color:hsla(0,0%,0%,0.51); position:relative; padding:16px;}
#lead > div .fukidashi{ position:absolute; top:-50px; right:-50px;}
#lead > div > div{ width:450px; margin-right:15%;padding:53px; border:1px hsla(0,0%,100%,0.40) solid;}
#lead > div > div .lead_t{ text-align:center; margin-bottom:15px;}
#lead > div > div p{ color:#FFF; margin-bottom:0.9em;}
#lead > div > div p strong{ color:#fdc75e; text-decoration:underline;}

/**sec2
===================================*/
#sec2{ width:100%; min-height:930px; background:url(../img/bar/sec2_bg.jpg) no-repeat center top; background-size:cover; margin-bottom:40px;}
#sec2 > div{ width:1000px; margin:auto; position:relative; height:930px;}

#sec2 .sec2_tl1{ position:absolute; top:30px; left:0; z-index:1;}
#sec2 .sec2_txt1{
	position: absolute;
	top: 150px;
	left: 0;
	width: 487px;
	z-index: 10;
	color: #FFF;
}
#sec2 .sec2_photo1{ position:absolute; top:40px; right:0;z-index:0;}
#sec2 .sec2_tl2{ position:absolute; top:452px; right:0; z-index:1;}
#sec2 .sec2_txt2{
	position: absolute;
	top: 567px;
	right: 36px;
	width: 578px;
	z-index: 10;
	color: #FFF;
}
#sec2 .sec2_photo2{ position:absolute; top:323px;left:10px;z-index:0;}
#sec2 .sec2_txt1 p,#sec2 .sec2_txt2 p{ margin-bottom:0.8em;}
#sec2 .sec3img1{ position:absolute; bottom:-100px; left:-50px; z-index:100;}


/**sec3
===================================*/
#sec3{ width:100%; padding:30px 0;}
#sec3 > div{ width:1000px; padding:100px; background:url(../img/bar/sec3_bg.jpg) repeat; position:relative; margin:auto;}
#sec3 > div .sec3_tl{ width:1000px; position:absolute; top:-30px; text-align:center;}
#sec3 > div .wrap{ width:1000px;}
#sec3 > div .wrap .l{ width:480px; float:left;}
#sec3 > div .wrap .r{ width:480px; float:right;}

#sec3 > div .wrap .box{ width:480px; margin-bottom:30px; position:relative;}
#sec3 > div .wrap .box h3{ margin:0.7em;}
#sec3 > div .wrap .box dl{ padding-bottom:3px; border-bottom:1px #352B23 dotted; margin:0.6em;}
#sec3 > div .wrap .box dl dt{ float:left; font-size:15px;}
#sec3 > div .wrap .box dl dd{ float:right; width:6em; color:#9e0808; font-size:15px; text-align:right;}
#sec3 > div .wrap .box .bigprice{
	position: absolute;
	top: 25px;
	right: 0;
	font-size: 20px;
	color: #9e0808;
	font-weight: bold;
}
#sec3 > div .wrap .box h4{
	font-size:20px;
	font-weight:bold;
	margin-top:0.6em;
	margin-bottom:0.3em;
}




/**sec4
===================================*/
#sec4 { padding:80px 0; text-align:center;}


/* 画面外にいる状態 */
.bug01{
    opacity : 0;
    transition : all 300ms ease-out 0.3s;
	transform : translate(0, -500px);
	transform-origin:center center;    }


.fukidashi{
    opacity : 0;
    transition : all 300ms ease-out 0.3s;
	transform : scale(0.5);
	transform-origin:center center;    }


/* 画面内に入った状態 */
.bug01.scrollin,.fukidashi.scrollin{
    opacity : 1;
	  transform : translate(0, 0);
	  transform : scale(1.0);
    }