@charset "utf-8";

/* webfont weight
 * Thin			100	normal
 * Light			200	normal
 * DemiLight	300	normal
 * Regular		400	normal
 * Medium	500	normal
 * Bold			700	normal
 * Black		900	normal
 * 決定カラー（通常時含む）は「#170c66」で、
 * 決定前は「#dddbe8」でお願いします。
 */

em, 
strong,
i
{
	text-decoration:none;
	font-style:normal;
}

*, *::before, *::after 
{
  box-sizing: border-box;
}

#primary {
    width: 100%;
    background: #ebebeb;
    padding: 0 0 60px;
}

#content{
font-family: noto-sans-cjk-jp, sans-serif;
font-style: normal;
}

#content-1
{
	padding-top: 32px;
	font-size: 1.6rem;
}

#content-2
{
	margin-bottom: 88px;
	padding-top: 32px;
	font-size: 1.6rem;
}

#primary  section>.inner,
#content-1 .inner,
#content-2 .inner
{
    max-width: 620px;
    padding: 0 25px;
}

#content-1>.inner>h2{
	margin-bottom: 36px;
	font-size: 1.8rem;
	font-weight: 700;
}

/* #content-1>.inner>p{
	margin-bottom: 36px;
}
 */
 
#simulation .baseForm li.agreement label span.mwform-checkbox-field label{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-content: center;
	align-items: center;
	
}
 
 .mw_wp_form .boxHidden{
	height: 0;
	overflow: hidden;
	transition: all .6s ease-out;
 }
 
.boxHidden{
	margin-top: 0;
}

.baseForm{
	height: 0;
	overflow: hidden;
	transition: all .6s ease-out;
}

.boxHidden>li,
.baseForm>li{
	margin-bottom: 24px;
}

.boxHidden>li>em,
.baseForm>li>em{
	display: inline-block;
	margin-bottom: 12px;
}

.boxHidden>li>input,
.baseForm>li>input,
.boxHidden>li .input input,
.baseForm>li .input input
{
	padding: 12px 16px;
	width: 100%;
	font-size: 1.6rem;
	font-weight: 400;
	height: 44px;
	color: #1E1D1D;
	background: #F5F5F5;
	border: none;
}

ul>li input[type="text"],
ul>li input[type="email"]
{
	width: 100%;
	font-size: 1.6rem;
	padding: 7px 15px;
	color: #666;
	background: #f5f5f5;
	border: none;
	border-radius: 0;
	outline: none;
}

ul>li input[type="text"]:focus,
ul>li input[type="email"]:focus
{
	color: #111;
}

.baseForm>li>em .required{
	color: #f00;
}

.baseForm>li.agreement{
	margin-bottom: 48px;
}

.baseForm>li.agreement>em{
	display: block;
}

.baseForm>li.agreement>label{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-content: center;
	align-items: center;
	margin-bottom: 24px;
}

.baseForm>li.agreement span.checkbox{
	background: #F5F5F5;
}

.baseForm input[type="checkbox"]{
	appearance: none;
	position: absolute;
	z-index: -1;/**/
}

span.mwform-checkbox-field-text{
	flex: 0 0 42px;
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-right: 16px;
	width: 42px;
	height: 42px;
	background: #f5f5f5;
	text-indent: -99999px;
}

.baseForm>li.agreement input:checked+span.mwform-checkbox-field-text:after,
.baseForm>li.agreement input:checked+span.checkbox:after{
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -6px;
	display: inline-block;
	width: 12px;
	height: 10px;
	border: #ADADAD solid;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}

.baseForm>li.agreement p{
	padding-left: 58px;
}

.baseForm>li.agreement p a{
	text-decoration: underline;
}

.baseForm>li.attention{
	margin-bottom: 32px;
}

.baseForm>li.attention div {
	padding: 15px 20px 5px;
	background: #f1f1f1;
}

.baseForm>li.attention div p{
	margin-bottom: 15px;
	color: #666;
	font-size: 1.3rem;
	line-height: 1.7;
}

.baseForm>li.attention div p .call.tel{
	display: block;
	color: #231815;
	font-size: 2.4rem;
	font-weight: 300;
}

.baseForm>li .submit input{
padding: 0;
width: 100%;
height: 58px;
color: #fff;
font-size: 2.0rem;
line-height: 1;
font-weight: 200;
background: #170C66;
border: none;
border-radius: 0;
box-shadow: none;
text-shadow: none;
outline: none;

transition: all 0.2s ease;
}

.baseForm>li .submit input:hover{
	opacity: .7;
}

#simulation .box1{
	margin-bottom: 32px;
}

#simulation .box1>li
{
	height: auto;
	overflow: hidden;
	transition: all .6s ease-out;
}

/* シミュレータのフォーム表示用 */

#simulation .box1>li:nth-child(2),
#simulation .box1>li:nth-child(3),
#simulation .box1>li:nth-child(4),
#simulation .box1>li:nth-child(5)
{
	height: 0;
}

/*#simulation.on>.box1>li {
	height: auto !important;
}*/

.selectBox{
	margin-bottom: 26px;
	font-size: 1.6rem;
	background: #F5F5F5;
}

.box2{
	padding: 20px;
}

.selectBox svg{
	margin-right: 16px;
	width: 83px;
	height: auto;
}

.selectBox>em{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-content: start;
	align-items: center;
	line-height: 2.2rem;
}

.selectBox input[type="radio"]{
	appearance: none;
	position: absolute;
	z-index: -1;/**/
}

.selectBox .box2{
		display: flex;
		flex-flow: row wrap;
		justify-content: start;
		align-content: space-between;
		align-items: center;
}

.selectBox input:checked+span.checkbox:after{
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -6px;
	display: inline-block;
	width: 12px;
	height: 10px;
	border: #ADADAD solid;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}


span.checkbox{
	flex: 0 0 42px;
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-right: 16px;
	width: 42px;
	height: 42px;
	background: #fff;
}

.selectBox label{
	display: flex;
	flex-flow: row nowrap;
	justify-content: start;
	align-content: space-between;
	align-items: center;
	
	padding-right: 40px;
	padding-bottom: 20px;
}

.estimate{
	position: relative;
	z-index: 1;
	font-size: 1.6rem;
	
	background: #f5f5f5;
}

.estimate:before{
	content: '';
	position: absolute;
	z-index: 2;
	top: 32px;
	left: 0;
	display: inline-block;
	width: 10px;
	height: 2px;
	background: #707070;
}

.estimate em{
	display: block;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 24px 20px 4px;
}

.estimate .box2 li p{
	margin-bottom: 12px;
}

.estimate .box2 li:first-child{
	margin-bottom: 24px;
}

.estimate p.cost input{
	margin-right: 12px;
	padding-right: 12px;
	width: 80%;
	max-width: 310px;
	height: 45px;
	color: #4d4d4d;
	font-size: 2rem;
	text-align: right;
	background: #EBEBEB;
}

.estimate p.cost{
	position: relative;
	z-index: 1;
}

.estimate p.cost:before{
	position: absolute;
	left: 16px;
	top: 4px;
	z-index: 2;
	content: '￥';
	font-size: 2rem;
	color: #a4a4a4;
}

.estimate p.fee{
	position: relative;
	z-index: 1;
}

.estimate p.fee:before{
	position: absolute;
	left: 16px;
	top: 2px;
	z-index: 2;
	content: '￥';
	font-size: 2.8rem;
	color: #fff;
}

.estimate p.fee input{
	margin-right: 12px;
	padding-right: 18px;
	width: 80%;
	max-width: 400px;
	height: 54px;
	font-size: 2.8rem;
	text-align: right;
	color: #fff;
	background: #8682A0;
}

.estimate p.credit{
	font-size: 1.4rem;
	line-height: 1.7rem;
}

.estimate ul.box2 li p.cost span,
.estimate ul.box2 li p.fee span{
	word-break: keep-all;
	display: inline-block;
}

.estimate .calc{
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	
	height: 60px;
	font-size: 1.8rem;
	text-align: center;
	color: #fff;
	cursor: pointer;
	background: #170C66;
}

.estimate .calc:hover{
	opacity: .7;
}

.selectBox rect{
	fill: #dddbe8 !important;
}

.selectBox.done rect{
	fill: #170c66 !important;
}

/* レスポンス時の微調整 */
.selectBox.step1 li:last-child label,
.selectBox.step2 li:last-child label
{
	padding-right: 0;
}
/* 12*10 #ADADAD*/
/* icon: 83*42*/
/* radioBtn: 42*16*/

@media only screen and (max-width: 820px){

	
}

@media only screen and (max-width: 414px){

	.estimate p.cost input,
	.estimate p.fee input{
		width: 72%;
	}
	.estimate{
		font-size: 1.4rem;
	}
	
}

@media only screen and (max-width: 374px){

	.estimate .box2 li p{
		margin-bottom: 20px;
	}

	.selectBox label{
		justify-content: start;
		align-content: space-between;
		align-items: start;
		
		padding-right: 20px;
		padding-bottom: 20px;
	}

	.selectBox>em{
		align-items: start;
		padding-right: 8px;
		
	}
		
	.estimate p.cost:before,
	.estimate p.fee:before{
		left: 8px;
	}

	.estimate p.cost input,
	.estimate p.fee input{
		width: 100%;
		margin-right: 0;
		padding-right: 8px;
	}

}