/********************
LAYOUT
********************/
body{	color: #333;}
body::before {
	content			: "";
	display			: block;
	position			: fixed;
	top				: 0;
	left				: 0;
	z-index			: -1;
	width				: 100%;
	height			: 100vh;
	background		: url(./image/BG-renga.jpg) center/cover no-repeat;
	-webkit-background-size:cover;/*Android4*/
}

.pan{	color: #333;}

.form_bt{
	font-size: 0;
	line-height: 0;
	margin: 0 0 10px 0;
}
.form_bt img{
	width: 50%;
	height: auto;
}


/********************
TITLE
********************/
.title_r{
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	color: #fff;
	padding: 13px 5px;
	text-shadow: 1px 1px 0px #033baa;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	box-shadow:0px 1px 0px 0px #87a7e8 inset,0px -1px 0px 0px #87a7e8 inset;
	-moz-box-shadow:0px 1px 0px 0px #87a7e8 inset,0px -1px 0px 0px #87a7e8 inset;
	-webkit-box-shadow:0px 1px 0px 0px #87a7e8 inset,0px -1px 0px 0px #87a7e8 inset;
	background: -webkit-linear-gradient(90deg, #033baa 0%, #033baa 50%, #0f4fd0 50%, #0f4fd0 100%);
	background: -moz-linear-gradient(90deg, #033baa 0%, #033baa 50%, #0f4fd0 50%, #0f4fd0 100%);
	background: -o-linear-gradient(90deg, #033baa 0%, #033baa 50%, #0f4fd0 50%, #0f4fd0 100%);
	background: -ms-linear-gradient(90deg, #033baa 0%, #033baa 50%, #0f4fd0 50%, #0f4fd0 100%);
	background: linear-gradient(0deg, #033baa 0%, #033baa 50%, #0f4fd0 50%, #0f4fd0 100%);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.s_title_1{
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	color: #333;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	padding: 13px 5px;
	background-color:  rgba(255, 255, 255, 0.5);
	box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.title_r,
.s_title_1,
.work h4,
.rec3_title,
.min{
	font-family:"Roboto Slab" , Garamond , "Times New Roman" , "Yu Mincho" , "YuMincho" ,"Hiragino Mincho Pro" , "HiraMinProN-W3" , "MS PMincho" , serif;
}


/********************
COMMON
********************/
.img100{
	font-size: 0;
	line-height: 0;
	text-align: center;
}
.img100 img{
	width: 100%;
	height: auto;
}

.mb{	margin-bottom: 10px;}



/** rec1 **/

#rec1 p{
	font-size: 13px;
	line-height: 20px;
	margin: 0 0 10px 0;
	padding: 0 10px;
}
#rec1 p:first-of-type{	padding-top: 10px;}


/** rec2 **/

#rec2{
	padding: 10px 0 0 0;
}

#rec2 h3{
	height: 40px;
	font-size: 16px;
	font-weight: bold;
	line-height: 16px;
	text-align: center;
	color: #413597;
	margin: 0 10px;
	padding-top: 12px;
	background: #fff;
	border-top: 1px solid #404b96;
	border-right: 1px solid #404b96;
	border-left: 1px solid #404b96;
	border-radius: 10px 10px 0 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#rec2 h3:nth-of-type(2),
#rec2 h3:nth-of-type(4),
#rec2 h3:nth-of-type(5){
	padding-top: 5px;
}
#rec2 h3 span{
	display: inline-block;
	font-size: 12px;
	line-height: 14px;
	color: #333;
}

#rec2 div{
	font-size: 0;
	line-height: 0;
	text-align: center;
	margin-bottom: 10px;
}


/** rec3 WORK **/

.work{}

.rec3_1{	margin-top: 10px;}

.work h4{
	font-size: 20px;
	font-weight: bold;
	line-height: 24px;
	text-align: left;
	padding: 15px;
	box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
}
.rec3_1 h4{	background: rgba(119, 154, 255, 0.5);}
.rec3_2 h4{	background: rgba(255, 151, 224, 0.5);}
.rec3_3 h4{	background: rgba(114, 234, 98, 0.5);}

.work p{
	font-size: 13px;
	line-height: 20px;
	padding: 10px;
}

.work table{
	width: 100%;
	font-size: 20px;
	line-height: 24px;
	border-top: 1px dotted #999;
}

.work tr{
	vertical-align: middle;
}

.work th{
	font-weight: bold;
	text-align: left;
	padding: 10px 0 10px 10px;
	border-bottom: 1px dotted #999;
}

.work td{
	width: 100px;
	font-weight: bold;
	text-align: right;
	padding: 10px 10px 0 10px;
	border-bottom: 1px dotted #999;
}

.work .min{
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	padding: 12px 0 0 0;
}
.work .min2{
	font-size: 24px;
	line-height: 24px;
	padding: 0 0 10px 0;
	text-decoration: underline;
}

.work .wtxt{
	font-size: 15px;
	line-height: 20px;
	text-align: left;
	background: #fff;
	border: 1px solid #333;
	border-radius: 5px;
	margin: 0 10px 10px 10px;
	padding: 10px;
}

.rec3_title{
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	text-align: center;
	padding: 20px 5px;
	background: #a6e7ff;
	border-top: 2px dotted #fff;
	border-bottom: 2px dotted #fff;
	box-shadow:0px 2px 0px 0px #a6e7ff,0px -2px 0px 0px #a6e7ff;
	-moz-box-shadow:0px 2px 0px 0px #a6e7ff,0px -2px 0px 0px #a6e7ff;
	-webkit-box-shadow:0px 2px 0px 0px #a6e7ff,0px -2px 0px 0px #a6e7ff;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.rec3_3 .form_bt{	margin-bottom: 0;}


/** rec4 FLOW **/

#rec4{}

#rec4 .step{
	display: table;
	width: 100%;
	font-size: 0;
	line-height: 0;
	margin: 0 0 10px 0;
}
#rec4 .step:first-of-type{	margin-top: 10px;}

#rec4 .step_l,
#rec4 .step_r{
	display: table-cell;
	vertical-align: top;
}

#rec4 .step_l{
	width: 80px;
	text-align: center;
}

#rec4 .step_l img{
	width: 60px;
	height: auto;
}

#rec4 .step_r{}

#rec4 .step_r h4{
	width: 100%;
	display: table;
	margin: 0 0 10px 0;
}

#rec4 .step_r h4 span{
	height: 50px;
	display: table-cell;
	vertical-align: middle;
	font-size: 20px;
	font-weight: bold;
	line-height: 20px;
	padding: 0 8px;
	border-radius: 10px 0 0 10px;
	background: rgba(251, 255, 138, 0.5);
	box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#rec4 .step_r p{
	font-size: 13px;
	line-height: 20px;
	padding: 0 10px 0 0;
}


/** rec5 QA **/

#rec5{	padding: 10px 0 0 0;}

#rec5 .qa1,
#rec5 .qa2{
	display: table;
	width: calc(100% - 20px);
	font-size: 0;
	line-height: 0;
	margin: 0 10px 10px 10px;
}

#rec5 .qa1_l,
#rec5 .qa1_r,
#rec5 .qa2_l,
#rec5 .qa2_r{
	display: table-cell;
	vertical-align: top;
}

#rec5 .qa1_l,
#rec5 .qa2_r{
	width: 60px;
}
#rec5 .qa1_l{	text-align: left;}
#rec5 .qa2_r{	text-align: right;}
#rec5 .qa1_l img,
#rec5 .qa2_r img{
	width: 50px;
	height: auto;
}

#rec5 .qa1_r{
	position: relative;
	font-size: 22px;
	font-weight: bold;
	line-height: 24px;
	text-align: left;
	border-radius: 10px;
	background: rgba(157, 244, 131, 0.7);
	padding: 10px;
}
#rec5 .qa1_r span{	color: #ff0000;}
#rec5 .qa1_r:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 8px 8px 0;
	border-color: transparent rgba(157, 244, 131, 0.7) transparent transparent;
	position: absolute;
	top: 17px;
	left: -8px;
}

#rec5 .qa2_l{
	position: relative;
	font-size: 13px;
	line-height: 20px;
	text-align: left;
	border-radius: 10px;
	background: rgba(204, 204, 204, 0.7);
	padding: 10px;
}
#rec5 .qa2_l:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 8px;
	border-color: transparent transparent transparent rgba(204, 204, 204, 0.7);
	position: absolute;
	top: 17px;
	right: -8px;
}


/** rec6 POINT **/

#rec6{	padding: 10px 0 0 0;}

.point{
	display: table;
	width: calc(100% - 20px);
	font-size: 0;
	line-height: 0;
	margin: 0 10px 10px 10px;
}

.point_l,
.point_r{
	display: table-cell;
	vertical-align: middle;
}

.point_l{
	width: 80px;
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	color: #fff;
	text-align: center;
	border-radius: 10px 0 0 10px;
}
.point:nth-of-type(1) .point_l{	background: #71a0ff;}
.point:nth-of-type(2) .point_l{	background: #e27fff;}
.point:nth-of-type(3) .point_l{	background: #70c462;}
.point:nth-of-type(4) .point_l{	background: #ceb13f;}

.point_r{
	font-size: 13px;
	line-height: 20px;
	text-align: left;
	padding: 10px;
	background: rgba(255, 255, 255, 0.7);
}


/** rec7 VOICE **/

#rec7{	padding: 10px 10px 0 10px;}

#rec7 h4{
	display: inline-block;
	width: 120px;
	font-size: 18px;
	font-weight: bold;
	line-height: 20px;
	color: #fff;
	text-align: center;
	padding: 7px 0;
}
#rec7 h4:nth-of-type(1),
#rec7 h4:nth-of-type(2),
#rec7 h4:nth-of-type(3){	background: #033baa;}
#rec7 h4:nth-of-type(4),
#rec7 h4:nth-of-type(5),
#rec7 h4:nth-of-type(6){	background: #ea639c;}

#rec7 .vbox{
	background: #fff;
	border-width: 3px;
	border-style: solid;
	margin: 0 0 10px 0;
	padding: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
#rec7 .vbox.v1{	border-color: #033baa;}
#rec7 .vbox.v2{	border-color: #ea639c;}

#rec7 .prof{
	display: table;
	width: 100%;
	font-size: 0;
	line-height: 0;
	margin: 0 0 10px 0;
}

#rec7 .prof_l,
#rec7 .prof_r{
	display: table-cell;
	vertical-align: top;
}

#rec7 .prof_l{
	width: 110px;
}
#rec7 .prof_l img{
	width: 100px;
	height: auto;
}

#rec7 .prof_r{}

#rec7 .prof_r p{
	font-size: 15px;
	font-weight: bold;
	line-height: 16px;
	border-bottom: 1px solid #ccc;
	padding: 7px 0;
}

#rec7 .prof_r p:first-of-type{	color: #0066ff;}
#rec7 .prof_r p span{	color: #ff0000;}
#rec7 .prof_r p em{	color: #a1815b;}

#rec7 .vtxt{
	font-size: 13px;
	line-height: 20px;
}


/** rec8 INFO **/

#rec8{	padding: 10px 0 0 0;}

#rec8 .line{
	display: table;
	width: calc(100% - 20px);
	font-size: 0;
	line-height: 0;
	border: 2px solid #31ae36;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	margin: 0 10px 10px 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#rec8 .line_l,
#rec8 .line_r{
	display: table-cell;
	vertical-align: middle;
}

#rec8 .line_l{
	width: 66px;
	text-align: center;
	padding: 3px 0;
}
#rec8 .line_l img{
	width: 60px;
	height: auto;
}

#rec8 .line_r{
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	color: #16851b;
	padding: 0 5px 0 3px;
}

#rec8 .mail{
	display: table;
	width: calc(100% - 20px);
	font-size: 0;
	line-height: 0;
	border-top: 1px solid #0317aa;
	border-right: 1px solid #0317aa;
	border-left: 1px solid #0317aa;
	background: rgba(255, 255, 255, 0.5);
	margin: 0 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#rec8 .mail_l,
#rec8 .mail_r{
	display: table-cell;
	vertical-align: middle;
}

#rec8 .mail_l{
	width: 78px;
	text-align: center;
	padding: 10px 0;
}
#rec8 .mail_l img{
	width: 60px;
	height: auto;
}

#rec8 .mail_r{
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	color: #0317aa;
	padding: 0 5px 0 0;
}


/** form **/

.form{
	width: calc(100% - 20px);
	border: 1px solid #0317aa;
	background: rgba(255, 255, 255, 0.5);
	margin: 10px;
	padding: 10px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

#rec8+form .form{	margin-top: 0;}

.form dt{
	font-size: 16px;
	font-weight: bold;
	line-height: 18px;
	padding: 10px 0 5px 0;
}
.form dt span{
	font-size		: 14px;
	color: #ff6666;
}
.form dd{
	font-size: 14px;
	line-height: 18px;
	border-bottom: 1px solid #d4d4d4;
	padding: 0 0 10px 0;
}


/** form item **/

input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"]
{
	font-family: Meiryo,"MS PGothic",Osaka,sans-serif;
	padding: 10px 5px;
	font-size: 14px;
	line-height: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

select{
	font-family: Meiryo,"MS PGothic",Osaka,sans-serif;
	padding: 5px 2px;
	font-size: 14px;
	line-height: 20px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 5px;
}

input[type="radio"],
input[type="checkbox"]{
	padding:0;
	margin:0;
	border-color: #ccc;
}

.w1{	width: 50% !important;}
.w2{	width: 100% !important;}
.w3{	width: 60px !important; margin: 0 3px;}
.w4{	width: calc(100% - 40px) !important; margin: 0 3px 0 0;}
.ddd{
	display: inline-block;
	padding-top: 10px;
}

.form dd input[type="radio"]+label:nth-of-type(1){	margin-right: 30%;}

.form textarea{
	font-family: Meiryo,"MS PGothic",Osaka,sans-serif;
	width: 100%;
	height: 120px;
	padding: 10px 5px;
	font-size: 14px;
	line-height: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.bt_bg{
	padding: 10px 0 0 0;
	text-align: center;
}

.bt_bg input[type="submit"]{
	display: block;
	width: 100%;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
	color: #fff;
	background: #ff000a;
	border: none;
	border-radius: 5px;
	padding: 20px 0;
	box-shadow: 0px 2px 0px 0px #cc0000;
	-webkit-appearance: none;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.error{
	font-size: 12px;
	line-height: 16px;
}
.error span{
	color: #ff0000;
}

.over{
	font-size: 12px;
	line-height: 16px;
	text-align: center;
	margin: 0 0 30px 0;
	padding: 30px 0 0 0;
}

.pagetop{
	font-size: 14px;
	font-weight: bold;
	line-height: 18px;
	text-align: right;
	color: #333;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	margin: 0 0 10px 0;
	padding: 10px;
	background-color:  rgba(255, 255, 255, 0.5);
	box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

.pagetop a{
	color: #333;
	text-decoration: underline;
}