/*----------------------------------*/

body{
	margin: 0;
	padding: 0;
	border: 0 none;
	font-size:14px;
	color: #000;
	background: url(../images/back.jpg) 50% 0% no-repeat;
	background-color: #fee7ea;
	background-size:1300px;
	font-family: "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "メイリオ", Meiryo, Helvetica, sans-serif;
	line-height:1.5em;
	min-width: 990px;
}

.clearfix:after { 
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;
	/*\*//*/ /*MAC IE5*/
	height: auto;
	overflow: hidden;
	/**/
}
.text-left {
	text-align:left;
}
.text-center {
	text-align:center;
}
.text-right {
	text-align:right;
}
.text-ss {
	font-size:0.6em;
}
.text-s {
	font-size:0.8em;
}
.text-l {
	font-size:1.2em;
}
.text-ll {
	font-size:1.6em;
}
.text-xl {
	font-size:2em;
}

.mt-s {
	margin-top:20px;
}
.mt-m {
	margin-top:40px;
}
.mt-l {
	margin-top:60px;
}

img {vertical-align:top;}

a img {
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;
}

a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
}

/*footer
-------------------------------*/
#footer {
	background:#FFFFFF;
	width:100%;
}
#footer div:after { display:block; clear:both; height:0px; visibility:hidden; content:".";}
#footer p.pr {
	text-align:center;
	color:#000;
	height:35px;
	line-height:30px;
	width:990px;
	font-weight:bold;
	font-size:14px;
	margin:0 auto;
}


/*wrap
-------------------------------*/

#wrap {
	width:990px;
	margin:0px auto;
}
#wrap h1 {margin:0px auto 5px; padding: 0;}

#wrap .mainBox {z-index: 10; margin:0px auto; position: relative;}
#wrap .leftBox {margin-left: -5px; width: 697px; float: left;}
#wrap .leftBox li {width: 336px; height: 240px; margin-left: 5px; margin-bottom: 5px; float: left; position: relative; font-size: 13px; line-height:150%; overflow:visible; }
#wrap .leftBox li .text { width: 354px;}
#wrap .leftBox li .fiximg {position: absolute; left: 0px; bottom: 0px;}
#wrap .leftBox li .fixtext {position: absolute; left: 145px; bottom: 0px; width: 180px;}
#wrap .leftBox li.textBox { height: auto;}

#wrap .rightBox {float: right; width: 292px;}

#wrap .mainBox .fixillust {position: absolute; z-index:1; right: 0px; bottom: 30px;}
#wrap .mainBox .fixcaption {position: absolute; z-index:1; right: 0px; bottom: 0px;}

#wrap .mainBox .leftBox02 {width:336px; vertical-align: bottom; position: absolute; left: 0px; bottom: 0px;}
#wrap .mainBox .leftBox02 .illust {position: absolute; left: 0px; bottom:306px;}
#wrap .mainBox .leftBox02 .fixbtm {position: absolute; bottom: 0px; left: 0px; font-size: 13px;}
#wrap .mainBox .leftBox02 .fixbtm p.text { margin-bottom: 3px; }
#wrap .mainBox .rightBox02 {width:650px; position: absolute; right: 0px; bottom: 0px; vertical-align: bottom;}
#wrap .mainBox .rightBox02 .rb02list {margin-left: -5px;}
#wrap .mainBox .rightBox02 .rb02list li {margin-left: 5px; float: left; margin-bottom: 5px;}
#wrap .mainBox .rightBox02 .caption {font-size: 13px; margin-bottom: 5px;}
#wrap .mainBox .rightBox02 .bigimg {position: relative;}
#wrap .mainBox .rightBox02 .bigimg p {position: absolute; bottom: 10px; right: 10px; color: #fff; text-align: right;}
#wrap #mb2 {margin-top: -30px; height: 580px;}

#wrap .planBox {margin: 30px auto 0px;}
#wrap .planBox h2 {text-align: center;}
#wrap .planBox ul {margin-left: -15px; padding-bottom: 30px;}
#wrap .planBox li {float: left; width: 320px; position: relative; margin-top: 30px; margin-left:15px; }
#wrap .planBox li .corcle {position: absolute; right: 5px; top: -15px; width:132px; height: 97px; text-align: center; padding-top: 35px; line-height: 140%; z-index: 10;}
#wrap .planBox li .corcle.c01 {background: url(../images/plan01.png) top left no-repeat;}
#wrap .planBox li .corcle.c02 {background: url(../images/plan02.png) top left no-repeat;}
#wrap .planBox li .corcle.c03 {background: url(../images/plan03.png) top left no-repeat;}
#wrap .planBox li .corcle.c04 {background: url(../images/plan04.png) top left no-repeat;}
#wrap .planBox li .corcle.c05 {background: url(../images/plan05.png) top left no-repeat;}
#wrap .planBox li .corcle.c06 {background: url(../images/plan06.png) top left no-repeat;}
#wrap .planBox li .text {width: 230px; margin-top: 5px; font-size: 12px; line-height: 17px;}
#wrap .planBox li .text.tx6 {letter-spacing: -1px;}
#wrap .planBox li a {display: block; position: relative; padding-bottom: 30px; text-decoration: none; color: #000; }/*min-height: 90px;}*/
#wrap .planBox #planlist li a { min-height: 100px; padding-bottom: 40px; }
#wrap .planBox li .btn {position: absolute; bottom: 0px; left: 0px;}
#wrap .planBox li a:hover .btn {padding-left: 5px;}
#wrap .planBox li a:hover img {opacity: 1; filter: alpha(opacity=100);}
#wrap .planBox li .hr {border-bottom:1px solid #fff; width: 220px; padding-top: 10px; margin-bottom: 10px;}
#wrap .planBox li .btnTx {width: 160px; height: 30px; position: absolute; bottom: 0px; left: 0px; background: url(../images/btn02_off.jpg) no-repeat bottom left; text-indent: -1000px; overflow: hidden;
	-webkit-transition: 0.3s ease-in-out;
	   -moz-transition: 0.3s ease-in-out;
	     -o-transition: 0.3s ease-in-out;
	        transition: 0.3s ease-in-out;}
#wrap .planBox li a:hover .btnTx { background: url(../images/btn02_on.jpg) no-repeat bottom left; left: 5px;}

#wrap .btn.action {animation:btnanime 1s ease; opacity: 1;}
#wrap .flip.action {animation:fadein 2s ease; opacity: 1;}
#wrap .btnD1.action {animation-delay: 0.3s;}
#wrap .btnD2.action {animation-delay: 0.6s;}
#wrap .btnD3.action {animation-delay: 0.9s;}

#wrap .btn.action:hover {opacity: 0.6; filter: alpha(opacity=60);}

#wrap .wait {opacity: 0;}

#wrap .caption2 {width: 100%; margin: 20px auto 0px;}

@keyframes btnanime {
	0% {transform: rotateY(180deg);}
	60% {opacity: 0.4;}
	100% {transform: rotateY(0deg); opacity: 1;}
	/*0%,50%,100%{margin-top: 0px;}
	25%,75%{margin-top: 2px;}*/
}
@keyframes fadein {
	0%{margin-bottom: -20px; opacity: 0;}
	100%{margin-bottom: 0px; opacity: 1;}
}

@media screen and (max-width: 990px)  {
	body{background-image:none;}
	#wrap .planBox {background: #DA958F;}
}