@charset "utf-8";

/* ==================================================================
	Site Name: ハローローン
	Version: 0.1

	import.css		読み込みCSS
	font.css		文字サイズの指定CSS	
	defalut.css		基準値の指定CSS
	color.css		色の指定CSS
	common.css		サイト全体に共通するCSS
	component.css	CSSの部品	
	modules.css		個別指定用CSS	
	print.css		印刷用CSS
	
	* 細かくなりそうな場合は別にCSSを作成
	
   ■CSS適用箇所
   　商品内容について
	
=================================================================== */

/* --------------------------------
   ◇ pagenavi
-------------------------------- */
.prepare ul.pagenavi{
	width:480px;
	margin:33px 0 25px 0;
}

html > .prepare ul.pagenavi{
	width:480px;
	margin:33px auto 25px auto;
}

.prepare ul.pagenavi li{
	float:left;
	width:220px;
	text-align:left;
	display:inline;
	margin-left:10px;
	padding-bottom:15px;
	text-align:center;
}

.prepare ul.pagenavi li img{
	margin:0 0 10px 7px;
}

.prepare ul.pagenavi li.selected{
	width:252px;
	margin-left:-10px;
	position:relative;
}

.prepare ul.pagenavi li.selected img{
	margin:0 0 6px 7px;
}


#simulation1 ul.pagenavi,
#simulation2 ul.pagenavi{
	margin-bottom:0px;
}


#simulation1 ul.pagenavi li,
#simulation2 ul.pagenavi li{
	padding-bottom:0px;

}

/* --------------------------------
   ◇ frame
-------------------------------- */

.prepare #main .frame-header{
	background:url(../../images/simulation/frame-header.gif) 0 0 no-repeat;
	width:517px;
	height:25px;
	margin:0 auto;
}

.prepare #main .frame-body{
	background-image:url(../../images/simulation/frame-body.gif);
	padding:8px 16px 0 16px;

}

html > .prepare #main .frame-body{
	width:485px;

}

.prepare #main .frame-footer{
	background-image:url(../../images/simulation/frame-footer.gif);
	height:25px;
}

/*
.prepare #main h2{
    padding-top:12px;
}
*/

.prepare #main h3{
    padding-top:29px;
}


/* --------------------------------
   ◇ title
-------------------------------- */

.prepare #main h4{
	font-size:114%;
	font-weight:700;
	margin-bottom:8px;
}

.prepare #main h4 span{
    color:#358E02;
}

#simulation #main h4{
	margin-top:18px;
}

/* --------------------------------
   ◇ text
-------------------------------- */
#simulation #main ul.mark{
	margin-bottom:0.8em;
}

#simulation #main .btn{
	margin-top:-20px;
	width:469px;
	height:93px;
	background:url(../../images/commodity/card/img1.gif) 73px 0 no-repeat;
	text-align:right;
}


.prepare #main #flash-area{
	margin-bottom:29px;
}

.prepare #main #flash-area p{
	margin-left:25px;
}

.prepare ul.pagenavi{
	margin-bottom:25px;
	width:480px;
	margin-top:33px;
}

.prepare ul.indent li{
	padding-left:1.5em;
	text-indent:-1.5em;
}


#simulation2 #main .contents-box {
	text-align:center;
}

#simulation2 #main p.image{
	margin-top:15px;
	text-align:center;
}
#simulation2 #main p.image img{
	margin:0 auto;
}


#simulation2 #main .column-box {
	text-align:center;

}

#simulation2 #main .column-box .sub-contents{
	float:left;
	display:inline;
}

#simulation2 #main .column-box .box-col1{
	width:213px;
}

#simulation2 #main .column-box .box-col1 p{
	margin-left:17px;
}
#simulation2 #main .column-box .box-col1 p.remarks{
	margin-left:0px;
}

#simulation2 #main .column-box .box-col2{
	width:265px;
	float:right;
}

#simulation2 #main  h3{
	margin-bottom:5px;
}


#simulation2 #main .in-frame-body p{
	margin-bottom:0;
}

#simulation2 #main .in-frame-body p.left img{
	margin-right:10px;
}

/* in-frame */
#simulation2 #main .in-frame-header,
#simulation2 #main .in-frame-body,
#simulation2 #main .in-frame-footer{
	width:501px;

	background:0 0 no-repeat;
}

#simulation2 #main .in-frame-header{
	background-image:url(../../images/use/green-header.gif);
	height:6px;
}

#simulation2 #main .in-frame-body{
	background-color:#F4F8E1;
	padding:3px 5px;
	margin-bottom:0;
}

html > #simulation2 #main .in-frame-body{
	width:491px;
}


#simulation2 #main .in-frame-footer{
	background-image:url(../../images/use/green-footer.gif);
	height:4px;
}

#simulation2 #main p.button{
	margin:1em 10px 1em 0;
	text-align:right;
}

#simulation1 #menu-box ul.menu li.menu1{ margin-left:0; left:-2px; position:relative;}