@charset "utf-8";

/* --------------------------------------------------------------------------------------
 基本設定
--------------------------------------------------------------------------------------- */

/* 基本フォント ------------------------------ */

body {
	color: #000;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	font-size: 75%;
	line-height: 1.5;
}

html:not(:target) body {
	font-size: 12px;
}

input,textarea,select {
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	font-size: 100%;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}

/*\*/
* html table {
	font-size: 100%;
	line-height: 1.5;
}
/**/


/* 基本タグ ------------------------------ */

body,div,
h1,h2,h3,h4,h5,h6,
dl,dt,dd,ul,ol,li,
p,blockquote,pre,cite,code,caption,
form,fieldset,legend,input,textarea,select,option,label {
	margin: 0;
	padding: 0;
}

body {
	background: #f1f1f1;
	text-align: center;
}

img,table {
	border: none;
}

table {
	border-collapse: collapse;
}

ul {
	list-style: none;
}

li img,
dt img {
	vertical-align: bottom;
}

address,em,cite {
	font-style: normal;
}


/* --------------------------------------------------------------------------------------
 float解除
--------------------------------------------------------------------------------------- */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;font-size: .1em;}
.clearfix { display:inline-block; }
/*\*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/**/


/* --------------------------------------------------------------------------------------
 form_area
--------------------------------------------------------------------------------------- */

/* 共通横幅 ------------------------------ */

.form_area .w10 {width: 10%;}
.form_area .w20 {width: 20%;}
.form_area .w30 {width: 30%;}
.form_area .w40 {width: 40%;}
.form_area .w50 {width: 50%;}
.form_area .w60 {width: 60%;}
.form_area .w70 {width: 70%;}
.form_area .w80 {width: 80%;}
.form_area .w90 {width: 90%;}
.form_area .w100 {width: 100%;}
.form_area .h100 { height: 100px}


/* 共通フォントサイズ ------------------------------ */

.form_area .size10 {	font-size: 10px !important;}
.form_area .size11 {	font-size: 11px !important;}
.form_area .size12 {	font-size: 12px !important;}
.form_area .size13 {	font-size: 13px !important;}
.form_area .size14 {	font-size: 14px !important;}
.form_area .size15 {	font-size: 15px !important;}


/* 共通見出し ------------------------------ */

.form_area .ttl_box {
	padding: 16px 0 8px 0;
	text-align: center;
	font-size: 34px;
}

.form_area .ttl {
	padding: 16px 0 8px 0;
	text-align: left;
	font-size: 18px;
}


/* 共通装飾 ------------------------------ */

.form_area .bg_pink {
	background: #ffeeee;
}

.form_area .line_red {
	border: 1px #ee6262 solid;
}
.form_area .line_blue {
	border: 1px #3597D4 solid;
}
.form_area .line_gray {
	border: 1px #ccc solid;
}

.form_area .txt_red{
	color: #ee6262;
}

.form_area .btn_submit{
	width: 100%;
	text-align: center;
}
.form_area .btn_submit.middle{
	margin-bottom: 3%;
}

.form_area .btn_submit input{
	width: 30%;
	margin: 5% 0;
	padding: 2% 0;
	border: 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background: #323232;
	color: #fff;
	font-size: 18px;
}


/* 共通カラム ------------------------------ */

.form_area .line2 p {
	margin: 0 0 8px 0;
}

.form_area .line3 p {
	display: inline;
}

/* 共通STEPナビ ------------------------------ */

div.step{
    position: relative;
				display: inline-block;
    width: 33%;
    height: 50px;
    background: #f9f9f9;
    text-align: center;
    border-left: 2px solid #f1f1f1; /* 間隔になる */
				font-size: 14px
}
div.step br{
	display: none;
}
div.step_start{
    background: #f9f9f9;
    text-align: center;
    border-left: 2px solid #f1f1f1; /* 間隔になる */
}
/* 右のでっぱり三角 */
div.step:after{
    content: "";
    position: absolute;
    left: 100%;     /* div.step#width + div.step#padding-left = 80px */
    top: 0;
    width: 0;
    border-top: 25px solid transparent;   /* div.step#heightの半分 */
    border-bottom: 25px solid transparent; /* div.step#heightの半分 */
    border-left: 10px solid #f9f9f9;    /* とんがり具合　*/
				z-index: 99;
}
div.step_start:after{
    content: "";
    position: absolute;
    left: 100%;     /* div.step#width + div.step#padding-left = 80px */
    top: 0;
    width: 0;
    border-left: 10px solid #fff;
				z-index: 99;
}
div.step_end:after{
    content: "";
    position: absolute;
    left: 100%;     /* div.step#width + div.step#padding-left = 80px */
    top: 0;
    width: 0;
    border-top: 0 solid transparent;   /* div.step#heightの半分 */
    border-bottom: 0 solid transparent; /* div.step#heightの半分 */
    border-left: 0 solid #666666;    /* とんがり具合　*/
				z-index: 99;
}
/* 左のひっこみ三角 */
div.step:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 10px solid #f1f1f1;
}  
div.step_start:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 0 solid #f1f1f1 !important;
}  
div.step span{
    line-height: 50px;
    padding-left: 0;
    padding-right: 0;
}
 
div.done{
    background: #0055AA;
}
div.done:after{
    border-left: 10px solid #0055AA;
}
div.current{
    background: #d0d0d0;
}
div.current:after{
    border-left: 10px solid #d0d0d0;
}
 
 
div.step_navi{
    margin: 16px auto 32px auto;
				font-size: 0;
				text-align: center;
}

/* calendar_area ------------------------------ */

.calendar_area h3{
	margin: 0 0 14px 0;
}

.calendar_area .calendar_box {
	padding: 16px 14px;
}

.calendar_area .calendar_box .left_box{
	display: inline;
	float: left;
	width: 60%;
}

.calendar_area .calendar_box .right_box{
	display: inline;
	float: right;
	width: 36%;
}

/* check_box_list ------------------------------ */

.form_area .check_box_list li{
	float: left;
	width: 50%;
	margin: 0 0 2px 0;
}

.form_area .check_box_list li input{
	margin: 0 4px 0 0;
	line-height: 1.5;
	vertical-align: middle;
}

.form_area .check_box_list li.check_other .other_field{
	width: 92%;
	padding: 2px 6px;
}


/* radio_list ------------------------------ */

.form_area .radio_list li{
	float: left;
	width: 50%;
	margin: 0 0 2px 0;
}

.form_area .radio_list li input{
	margin: 0 4px 0 0;
	line-height: 1.5;
	vertical-align: middle;
}

.form_area .radio_list li.radio_other .other_field{
	width: 92%;
	padding: 2px 0;
}


/* form_area ------------------------------ */

.form_area {
	width: 800px;
	margin: 20px auto 20px auto;
	text-align: left;
}

.form_area .inner{
	padding: 3%;
	background: #fff;
}

.form_area dl{
	margin: 0 0 3% 0;
	padding: 0 0 3% 0;
	border-top: none;
	border-bottom: 1px #cccccc solid;
	font-size: 0;
}

.form_area dl dt{
	display: inline-block;
	width: 26%;
	margin: 0 3% 0 0;
	font-size: 14px;
	vertical-align: top;
}

.form_area dl dt.last{
	padding: 3% 0 1% 0;
	border-bottom: none;
}

.form_area dl dt em{
	display: block;
	padding: 0 0 0 3%;
	border-left: 4px #323232 solid;
}

.form_area dl dt.bg_red{
	background: #ffcccc;
}

.form_area dl dd{
	display: inline-block;
	width: 68%;
	font-size: 14px;
	vertical-align: top;
}

.form_area dl.last{
	border-bottom: none;
}

.form_area dl dd .field{
	padding: 2px 0;
}

.form_area dl dd .radio{
	margin: 0 4px 0 0;
	line-height: 1.5;
	vertical-align: middle;
}

.form_area dl dd .check_box{
	margin: 0 4px 0 0;
	line-height: 1.5;
	vertical-align: middle;
}