/* ver 1.1.1 (2013/2/4) */
@charset "utf-8";
@import url(reset.css);

body {
	font-size:87%;
	line-height:1.4;
	color:#333333;
/* base size
12px 	75%
13px 	82%
14px 	88%

*/

}
/*
(14px：87%時)
10px	72%
11px	79%
12px	86%
13px	93%
14px	100%
15px	108%
16px	115%
17px	122%
18px	129%
19px	136%
20px	143%
21px	150%
22px	158%
23px	165%
24px	172%
25px	179%
26px	186%


 */

/* link style */
a:link{
	color: #333333;
	text-decoration: none;
}
a:visited{
	color: #333333;
	text-decoration: none;
}
a:hover{
	color: #333333;
	text-decoration: underline;
}



/* *************************************************************************************** */


/* note */
.note_01 li {
	text-indent: -1em;
	padding-left: 1em;
}

/* layout styles END */

/* *************************************************************************************** */

/* input styles START */

/* radio & checkbox btn */
.sel_btn_01 {
	vertical-align: middle;
	margin-right: 5px;
}
* html .sel_btn_01 {
	vertical-align: middle;
	margin-right: 0;
}
*:first-child+html .sel_btn_01 {
	vertical-align: middle;
	margin-right: 0;
}

/* input styles END */

/* *************************************************************************************** */

/* clearfix */
.clearfix:after {
	content: " ";
	display: block;
	clear: both;
	font-size:0.1em;
	line-height:0;
	height: 0;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
	/*overflow: hidden;*/
	/* 上記のoverflow: hidden;はDreamweaver上でレイアウトを正しく表示させるためのCSSです。
	   Dreamweaverで編集する際にコメントアウトを外して使用してください。
	   また、編集が完了した際にはコメントアウトしておいてください。 */
}
/* exlude MacIE5 \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}


html,body{
	height:100%;
}

/* end MacIE5 */

/* *************************************************************************************** */

/*container
*************************************************************************************** */
#container{
    width: 100%;
    position: relative;
    height: auto !important;
    min-height: 100%;
	min-width: 1016px;
}
#container #container_box{
	/*padding-bottom:304px;*/
	padding-bottom:334px;
}

/*header
 *************************************************************************************** */
#header {
	background:#f8f7f2;
	padding:22px 0 23px 0;
}
#header .h_inner_area{
	width:960px;
	margin:0 auto;
}
#header .logo_area{
	width:587px;
	float:left;
	margin-top:-3px;
}
#header .r_logo{
	padding-left:10px;
}
#header .right_area{
	/* width:300px; */
	float:right;
	padding:10px 0 0 0;
}
#header .right_area .ic_box{
	width:122px;
	/*width:200px;*/
	/*width:80px;*/
	float:right;
}
#header .right_area .ic_box li{
	border-left:1px solid #9c9b98;
	float:left;
	width:39px;
	text-align:center;
	position:relative;
}
#header .right_area .ic_box .tool_tip{
	position:absolute;
	z-index:10;
	background:url(../../img/common/ic_tool_tip.gif) no-repeat center top;
	padding-top:7px;
	height:100%;
	top:31px;
	font-size:86%;
	color: #fff;
	display:none;
}
#header .right_area .ic_box .tool_tip .tool_tip_inner{
	background:#5b5b5b;
	border:2px solid #5b5b5b;
	border-radius:5px;
	padding:3px 3px 3px 3px;
}
#header .right_area .ic_box .ic01 .tool_tip{
	width:150%;
	right:-28%;
}
#header .right_area .ic_box .ic02 .tool_tip{
	width:321%;
	right:-108%;
}
#header .right_area .ic_box .ic03 .tool_tip{
	width:339%;
	right:-122%;
}
#header .right_area .ic_box .ic04 .tool_tip{
	width:339%;
	right:-122%;
}
#header .right_area .ic_box .ic05 .tool_tip{
	width:275%;
	text-align:left;
	left:-89%;
}
#header .right_area .ic_box .ic05 .tool_tip .tool_tip_inner{
	padding:3px 15px 3px;
}



#header .right_area .login_area{
	display:inline-block;
	float:right;
	position:relative;
}
#header .right_area .login_before a{
	width:90px;
	display:block;
	color:#fff;
	padding: 6px 0 6px 10px;
	font-size:86%;
	background:url(../../img/common/ic_person.gif) no-repeat 12px 6px #eb5902;
}
#header .right_area .login_before a:hover{
	text-decoration:none;
}

#header .right_area .login_before a span{
	padding-left:25px;
}
#header .right_area .login_after {
	border-left:1px solid #9c9b98;
	height:29px;
	cursor:pointer;
	padding-right:4px;
}
#header .right_area .login_after p{
	display:block;
	padding:0px 17px 0 12px;
	background:url(../../img/common/ic_arrow.gif) no-repeat right 10px;
}
#header .right_area .login_after p span{
	background:url(../../img/common/ic_person_02.gif) no-repeat left 6px;
	display:block;
	font-size:86%;
	padding:7px 0 0 25px;
}
#header .right_area #open_list{
	position:absolute;
	right:0;
	top:0;
	display:none;
}
#header .right_area .login_after.open {
	border-left:none;
	height:29px;
	padding-right:4px;
	background: #eb5902;
}
#header .right_area .login_after.open p{
	display:block;
	padding:0px 17px 0 13px;
	height:29px;
	background:url(../../img/common/ic_arrow_02.png) no-repeat right 10px #eb5902;
}
#header .right_area .login_after.open p span{
	color:#fff;
	padding:7px 0 0 25px;
	background:url(../../img/common/ic_person.gif) no-repeat  left 6px #eb5902;
	display:block;
	font-size:86%;
}
#header .right_area #open_list{
	position:absolute;
	right:0;
	top:29px;
	z-index:2;
	padding:7px 0 10px;
	background:#eb5902;
}
#header .right_area #open_list li{
	background:#eb5902;
	width:148px;
	text-align:left;
	font-size:86%;
	padding:5px 0 5px 12px;
}
#header .right_area #open_list li a{
	color:#fff;
	text-decoration:underline;
	background:#eb5902;
}
#header .right_area #open_list li a:hover{
	text-decoration:none;
}




/*footer
*************************************************************************************** */
#footer{
	/*height:304px;*/
	height:334px;
	position:absolute;
	z-index:1;
	width:100%;
	bottom:0px;
	background:#fff;
}
/* #footer #f_news{
	background:#ecebe5;
	height:51px;
}
#footer #f_news .f_news_inner_area{
	width:960px;
	margin:0 auto;
	padding-top:17px;
}
#footer #f_news .f_news_inner_area .left_title{
	font-size:86%;
	color:#eb5902;
	font-weight:bold;
	display:inline-block;
	padding-right:10px;
} */
.f_area01{
	background:#f8f7f2;
	/*height:178px;*/
	height:208px;
}
.f_area01 .f_area01_inner_area{
	width:960px;
	margin:0 auto;
	padding-top:28px;
	/*height:150px;*/
	height:180px;
	background:url(../../img/common/f_logo.gif) no-repeat right bottom;
}
.f_area01 .f_area01_inner_area .box{
	width:305px;
	/*width:203px;*/
	float:left;
	font-size:93%;
}
.f_area01 .f_area01_inner_area .f_btn_box{
	width:180px;
	float:right;
}
.f_area01 .f_area01_inner_area .f_btn_box a{
	display:block;
	color:#fff;
	background:#20201e;
	text-align:center;
	font-size:86%;
	padding:8px 0 7px;
}
.f_area01 .f_area01_inner_area .f_btn_box a:hover{
	text-decoration:none;
}
.f_area01 .f_area01_inner_area .box.first{
	width:115px;
}
.f_area01 .f_area01_inner_area .box .box_txt{
	font-weight:bold;
	padding:7px 0;
}
.f_area01 .f_area01_inner_area .box .box_txt a{
	color:#252523;
}
.f_area01 .f_area01_inner_area .box ul{
	padding-left:15px;
}
.f_area01 .f_area01_inner_area .box ul li{
	padding-bottom:7px;
}
.f_area01 .f_area01_inner_area .box ul li a{
	color:#484745;
}
.f_area01 .f_area01_inner_area .box ol{
	padding:2px 15px 0 0;
}
.f_area01 .f_area01_inner_area .box ol li{
	margin-top:5px;
}

.f_area02{
	background:#22221f;
	height:38px;
}
.f_area02 .f_area02_inner_area{
	width:960px;
	margin:0 auto;
}
.f_area02 .f_area02_inner_area .left_box{
	color:#fff;
	width:395px;
	float:left;
	font-size:86%;
	padding-top:11px;
}
.f_area02 .f_area02_inner_area .left_box a{
	color:#fff;
}
.f_area02 .f_area02_inner_area .right_box{
	color:#e3e3e0;
	width:350px;
	float:right;
	font-size:79%;
	text-align:right;
	padding-top:8px;
	color:#e3e3e0;
}
.f_area02 .f_area02_inner_area .right_box span{
	display:inline-block;
}
.f_area02 .f_area02_inner_area .right_box img{
	vertical-align:middle;
}
#footer .copy_right_area{
	height:27px;
	text-align:center;
	padding:10px 0 0 0;
	color:#4f4f4c;
	font-size:86%;
}


/*contents
*************************************************************************************** */
#contents{
	background:#fff;
}
/*top用*/

/*セカンドページ用*/
.second_title{
	background:#000;
	color:#fff;
}
.second_title h1{
	width:960px;
	margin:0 auto;
	font-size:143%;
	padding:18px 0 15px;
}
#second_inner_area{
	width:960px;
	margin:0 auto;
}

/*透過処理
*************************************************************************************** */
.hover:hover{
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/*placeholder clor
*************************************************************************************** */
/*for Webkit*/
input::-webkit-input-placeholder {
    color: #c9c9c9;
}
/*for Firefox*/
input::-moz-placeholder {
    color: #gray;
}
input:-ms-input-placeholder {
	color: #c9c9c9
}