@charset "utf-8";
/* CSS Document */
#contents{
	overflow: hidden;
	position: relative;
}
#cmnMv.bgBlue{
	background-color: #17cdc7;
}

#cmnMv.bgBlue .pageTtl{
	color: #fff;
}

.inner.narrow{
	max-width: 960px;
	padding: 0 10px 120px;
}
.inner.top{
	max-width: 740px;
  padding: 100px 10px 0px;
}

.inner.narrow>.btm15{
	font-size: 18px;
	font-size: 1.8rem;
}

.inner.narrow>.btm15>span{
	font-size: 1.5em;
	color: #0fb2ad;
}	

.step{
	display: table;
	width: 100%;
	text-align: center;
	margin-bottom: 120px;
	padding-right: 16px;
}

.step li{
	display: table-cell;
	width: 33.3%;
	font-size: 20px;
	font-size: 2rem;
	text-align: center;
	font-weight: bold;
	line-height: 1.25;
	background-color: transparent;
	border: solid 2px #0fb2ad;
	border-left: none;
	color: #0fb2ad;
	position: relative;
}

.step.yellow li{
	border: solid 2px #fdee32;
	color: #000;
}

.step li:first-of-type{
	border-left: solid 2px #0fb2ad;
}

.step.yellow li:first-of-type{
	border-left: solid 2px #fdee32;
}

.step li::before{
	content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-left: 16px solid #fff;
    border-bottom: 30px solid transparent;
    position: absolute;
    z-index: 1;
    right: -16px;
    top: -1px;
}

.step li::after{
	content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-left: 16px solid #0fb2ad;
    border-bottom: 30px solid transparent;
    position: absolute;
    right: -18px;
    top: -1px;
}

.step.yellow li::after{
	border-top: 30px solid transparent;
    border-left: 16px solid #fdee32;
    border-bottom: 30px solid transparent;
}

.step li.now{
	color: #fff;
	background-color: #0fb2ad;
}

.step.yellow li.now{
	color: #000;
	background-color: #fdee32;
}

.step li.now::before{
	border-left: 16px solid #0fb2ad;
}

.step.yellow li.now::before{
	border-left: 16px solid #fdee32;
}

.step li .en{
	display: block;
	font-size: 0.7em;
	font-style: italic;
	
}

#formArea table{
	width: 100%;
	margin-bottom: 70px;
}

#formArea table tr{
	border-bottom: dotted 1px #000;
	
}

#formArea table tr th{
	width: 18%;
	padding: 30px 0 30px 15px;
	text-align: left;
}

#formArea table tr th span{
	display: inline-block;
}

#formArea table tr th span:first-of-type{
	width: 46%;
}

#formArea table tr th .attention{
	display: inline-block;
	padding: 0 3px;
	color: #fff;
	text-align: center;
	background-color: #e60012;
	border-radius: 3px;
}

#formArea table tr th,
#formArea table tr td{
	vertical-align: middle;
}

#formArea table tr td{
	width: 82%;
	padding: 30px 0;
	font-weight: bold;
}

#formArea table tr td label{
	font-weight: bold;
}

#formArea table tr td input[type="text"]{
	height: 35px;
	border-radius: 3px;
	border: solid 1px #b5b5b5;
	padding-left: 10px;
}

#formArea table tr.row_note th span {
	display: block;
	font-weight: normal;
}

#formArea table tr.row_note td p {
	font-weight: normal;
}

#formArea table tr td textarea{
	border-radius: 3px;
	border: solid 1px #b5b5b5;
	padding-left: 10px;
}

#formArea table tr td select{
	height: 35px;
	border: solid 1px #b5b5b5;
	border-radius: 3px;
	margin: 0px 8px;
}

#formArea table tr td span.serviceConf{
	display: none;
}

#formArea table tr td span.serviceConf#scout,
#formArea table tr td span.serviceConf#support,
#formArea table tr td span.serviceConf#none{
	display: block;
}

#formArea table tr.center{
	border-bottom: none;
}

#formArea table tr.center td span{
	display: inline-block;
	position: relative;
}

#formArea table tr.center td span:first-of-type::after{
	display: block;
	content: "\f0d9";
	font-family: "fontawesome";
	font-size: 15px;
	color: #fff;
	position: absolute;
	top: 13px;
	left: 80px;
}

#formArea table tr.center td span:last-of-type::after{
	display: block;
	content: "\f0da";
	font-family: "fontawesome";
	font-size: 15px;
	color: #fff;
	position: absolute;
	top: 13px;
	right: 80px;
}

.entry #formArea table tr.center td span:first-of-type::after,
.entry #formArea table tr.center td span:last-of-type::after {
	display: none;
}

#formArea table tr td input.back,
#formArea table tr td input.send{
	display: inline-block;
	width: 300px;
	color: #fff;
	margin: 0 10px;
	text-align: center;
	padding: 15px;
	border: none;
	font-weight: bold;
	box-shadow: 0px 4px 11px -1px #ccc;
}

#formArea table tr td input.back{
	background-color: #8F8F8F;
}

#formArea table tr td input.send{
	background-color: #17cdc7; 
}

#formArea table tr td input.error,
#formArea table tr td select.error,
#formArea table tr td textarea.error{
	background-color: #f9e8e5 !important
}

#formArea table tr span.errorWrd{
	display: block;
	font-weight: bold;
	color: #E23435;
}

/*--- 入力部分の幅のスタイル ---*/
input.range100,
textarea.range100{
	max-width: 430px;
	width: 100%;
}

input.rangeWide,
textarea.rangeWide{
	max-width: 560px;
	width: 100%;
}

textarea[name="address"].rangeWide{
	max-width: 630px;
	height: 35px;
	resize: none;
	padding-top: 6px;
}

input.rangeHalf,
textarea.rangeHalf{
	max-width: 210px;
	width: 100%;
	margin-right: 15px;
}

/*--- チェックボックス・ラジオボタンのスタイル ---*/

#formArea table tr td label.radio input,
#formArea table tr td label.check input{
	display: none;
}

#formArea table tr td label.radio span::before{
	display: inline-block;
	content: "";
	border: solid 1px #b5b5b5;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	vertical-align: middle;
	position: relative;
    top: -1px;
}

#formArea table tr td label.radio input:checked + span::after{
	display: block;
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #222;
	position: absolute;
	top: 4px;
	left: 4px;
}

#formArea table tr td label.radio span,
#formArea table tr td label.check span{
	position: relative;
}

#formArea table tr td label.check span::before{
	display: inline-block;
	content: "";
	border: solid 1px #b5b5b5;
	border-radius: 3px;
	width: 15px;
	height: 15px;
	margin-right: 10px;
	vertical-align: middle;
	position: relative;
    top: -1px;
}

#formArea table tr td label.check input:checked + span::after{
	display: block;
	content: "";
	width: 5px;
	height: 9px;
	border-right: solid 3px #222;
	border-bottom: solid 3px #222;
	-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	top: 2px;
	left: 5px;
}


/*------*/

/*--- 利用規約同意箇所 ---*/
.policy{
	/*border: solid 5px #e5e5e5;*/
	/*padding: 25px;*/
	text-align: center;
}

.policy .submitBtn{
	display: block;
	position: relative;
	max-width: 300px;
	width: 100%;
	margin: auto;
}

.submitBtn input[type="submit"]{
	display: block;
	max-width: 300px;
	width: 100%;
	margin: 25px auto 0;
	padding: 15px;
	color: #fff;
	background-color: #17cdc7;
	text-align: center;
	position: relative;
	font-weight: bold;
	border: none;
	box-shadow:0px 4px 11px -1px #ccc;
	transition: .2s;
}
.submitBtn a {
}
.submitBtn img{
	width:100%;
}

.submitBtn input[type="submit"]:hover{
	box-shadow: none;
}

.submitBtn::after{
	display: block;
/*	content: "\f0da";
	font-family: "fontawesome";*/
	font-size: 15px;
	color: #fff;
	position: absolute;
	top: 13px;
	right: 80px;
	
}
#prefectures_id,
#municipalities_id,
#occupations{
	width: 250px;
}

.agreement{
	margin-bottom: 20px;
}

.btn-set img{
		width:300px;
	}

@media only screen and (max-width: 760px){
	input.range100,
	textarea.range100,
	input.rangeWide,
	textarea.rangeWide,
	input.rangeHalf,
	textarea.rangeHalf{
	max-width: unset;
	width: 100%;
}
	input.rangeHalf{
		margin-bottom: 10px;
	}
	textarea[name="address"].rangeWide{
		height: 70px;
	}

}
@media only screen and (max-width: 960px){
	.inner.narrow{
		padding-bottom: 60px;
	}
	.inner.top{
		padding-top: 50px;
		padding-right: 15px;
		padding-left: 15px;
	}
}

@media only screen and (max-width: 414px){
	
	.step{
		margin-bottom: 40px;
	}
	
	.step li{
		font-size: 16px;
		font-size: 1.6rem;
	}
	
	.step li::before{
		border-top: 24px solid transparent;
		border-left: 16px solid #fff;
    	border-bottom: 24px solid transparent;
	}
	
	.step li::after{
		border-top: 24px solid transparent;
    	border-left: 16px solid #0fb2ad;
    	border-bottom: 24px solid transparent;
	}
	
	.step.yellow li::before{
		border-top: 24px solid transparent;
		border-left: 16px solid #fff;
    	border-bottom: 24px solid transparent;
	}
	
	.step.yellow li::after{
		border-top: 24px solid transparent;
    	border-left: 16px solid #fdee32;
    	border-bottom: 24px solid transparent;
	}
	
	#formArea table,
	#formArea tbody,
	#formArea table tr,
	#formArea table tr th,
	#formArea table tr td{
		vertical-align: middle;
/*		display: block;
		width: 100%;*/
	}
	
	#formArea table{
		margin-bottom: 25px;
	}
	
	#formArea table tr th span:first-of-type{
		width: auto;
	}
	
	#formArea table tr.row_email th {
		position: relative;
	}

	#formArea table tr.row_email th span {
		white-space: nowrap;
		position: absolute;
		top: 5px;
	}
	#formArea table tr.row_email th span.attention {
		top: 30px;
	}

	#formArea table tr.row_email td {
		padding: 30px 0 10px;
	}

	#formArea table tr th{
		padding: 10px 0;
	}
	
	#formArea table tr td{
		padding: 10px 0;
		font-size: 12px;
	}
	
	#formArea table tr.center td{
		padding-top: 20px;
	}
	
	input.rangeHalf, textarea.rangeHalf{
		margin-right: 0;
	}
	
	#formArea table tr td input.back{
		margin-bottom: 20px;
	}
	
	.policy{
		/*padding: 20px;*/
	}

	#formArea table tr td select.birthday {
		/* width:60px; */
		width: 32%;
		margin: 0;
	}

	#formArea table tr td select {
		margin: 0 2px;
	}

	#prefectures_id,
	#municipalities_id{
		/* width: 50px; */
		width: 30%;
		font-size: 11px;
	}
	#formArea table tr td option{
		font-size: 11px;

	}

	textarea.rangeWide {
		height: 70px;
	}

	.policy .submitBtn{
		max-width: 300px;
	}
	#formArea table tr td.btn-set{
		padding:20px 0;
	}
	#formArea table tr td.btn-set span {
		padding:0 20px;
	}
	.btn-set img{
		width:100%;
	}

}

@media only screen and (max-width: 374px){
	#formArea table tr td select#prefectures_id,
	#formArea table tr td select#municipalities_id {
		margin: 0;
		width: 28%;
	}

}

/* 離脱確認モーダル
----------------------------------------- */
.historyBackModal {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	z-index: 10000;
	display: none;
}
.historyBackModal > div {
	background: #fff;
	width: 350px;
	border-radius: 10px;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 2px 2px 5px 2px rgba(0,0,0,0.13);
}
.historyBackModal .txt {
	color: #5dcac6;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.4;
	padding-left: 62px;
	position: relative;
}
.historyBackModal .txt::after {
	content: "";
	width: 50px;
	height: 54px;
	background: url(/cmn/cmn_img/icon_attention.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 0;
	left: 0;
}
.historyBackModal .stay {
	background: #ffee30;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 600;
	border-radius: 10px;
	padding: 10px 0;
	letter-spacing: 0.08em;
	margin-top: 14px;
	cursor: pointer;
	transition: 0.2s ease-out;
}
.historyBackModal .stay:hover {
	background: #f7e303;
}
.historyBackModal .back a {
	background: #e0e0e0;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 600;
	border-radius: 10px;
	padding: 7px 0;
	letter-spacing: 0.08em;
	display: block;
	color: #000;
	text-decoration: none;
	margin-top: 17px;
	transition: 0.2s ease-out;
}
.historyBackModal .back a:hover {
	background: #d1d1d1;
}
@media only screen and (max-width: 760px) {
	.historyBackModal > div {
    width: 90%;
	}
}
.form-kv{
	width: 100%;
}
.form-kv img{
	width: 100%;
}
.form-num{
	margin-bottom: 0 !important;
	padding-top: 50px !important;
}
.form-num__wrapper{

}
.form-num__wrapper + .form-num__wrapper{
	margin-top: 50px;
}
.form-num__ttl{
	font-size: 31px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	width: 100%;
	height: 136px;
  line-height: 162px;
	background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
}
.form-num__ttl--01{
	background-image: url('/cmn/uniq/other/images/img_ttl_bg_01.png');
}
.form-num__ttl--02{
	background-image: url('/cmn/uniq/other/images/img_ttl_bg_02.png');
}
.form-num__ttl--03{
	background-image: url('/cmn/uniq/other/images/img_ttl_bg_03.png');
}
.form-num__contents{
	display: flex;
	margin-top: 50px;
}
.form-num__txt{
	font-size: 18px;
	color: #000;
	line-height: 2 !important;
}
.form-num__img img{
	width: 100%;
}
.form-num__contents--01 .form-num__txt{
	width: 50%;
}
.form-num__contents--01 .form-num__img{
	width: 50%;
}
.form-num__contents--02{
	flex-direction: column;
}
.form-num__contents--02 .form-num__txt{
	width: 100%;
}
.form-num__txt + .form-num__txt{
	margin-top: 50px;
}
.form-num__contents--02 .form-num__img{
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}
.form-num__contents--02 .form-num__img > *:first-child{
	width: 56%;
}
.form-num__contents--02 .form-num__imgBox{
	width: 37%;
	display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.form-num__contents--03{
	justify-content: space-around;
}
.form-num__contents--03 .form-num__txtBox{
	width: 68%;
}
.form-num__contents--03 .form-num__img{
	width: 26%;
}
.form-price{
	padding-top: 50px !important;
}
.form-price img{
	width: 100%;
}
.form-ttl{
	font-size: 33px;
	color: #000;
	text-align: center;
	background-color: #ffff54;
	width: 100vw;
	height: 70px;
	line-height: 70px;
	margin: 0 calc(50% - 50vw) 46px;
}
.spDisp-other{
	display: none;
}
.spHideInline{
	display: inline;
}

@media screen and (max-width: 862px) {
	.form-num__ttl{
		font-size: 22px;
		line-height: 35px;
		height: 135px;
		background-position: left;
		background-size: auto;
		width: 100vw;
		padding-top: 35px;
		margin: 0 calc(50% - 50vw);
	}
	.form-num__ttl--01{
		background-image: url('/cmn/uniq/other/images/img_ttl_bg_01_sp.png');
	}
	.form-num__ttl--02{
		background-image: url('/cmn/uniq/other/images/img_ttl_bg_02_sp.png');
	}
	.form-num__ttl--03{
		background-image: url('/cmn/uniq/other/images/img_ttl_bg_03_sp.png');
	}
	.form-num__txt{
		font-size: 18px;
	}
	.form-ttl{
		font-size: 22px;
		line-height: 40px;
		height: 100px;
		padding-top: 11px;
		margin-top: 0;
	}
	.form-price{
		padding: 0 13px !important;
	}
	.spDisp-other{
		display: block;
	}
	.spHideInline{
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.form-num__contents{
		flex-direction: column;
		padding-right: 13px;
		padding-left: 13px;
		margin-top: 19px;
	}
	.form-num__txt{
		font-size: 14px;
		letter-spacing: 1.4px;
	}
	.form-num__txt + .form-num__txt{
		margin-top: 38px;
	}
	.form-num__contents--01 .form-num__txt{
		width: 100%;
	}
	.form-num__contents--01 .form-num__img{
		width: 100%;
		margin-top: 20px;
	}
	.form-num__contents--02 .form-num__img{
		flex-direction: column;
	}
	.form-num__contents--02 .form-num__img > *:first-child{
		width: 100%;
	}
	.form-num__contents--02 .form-num__imgBox{
		width: 100%;
		margin-top: 23px;
	}
	.form-num__contents--02 .form-num__imgBox picture + picture{
		margin-top: 23px;
	}
	.form-num__contents--03 .form-num__txtBox{
		width: 100%;
	}
	.form-num__contents--03 .form-num__img{
		width: 100%;
		padding-left: 72px;
		padding-right: 70px;
		margin-top: 25px;
	}
}
@media screen and (max-width: 400px) {
	.form-num__ttl{
		background-position: -15px;
	}
}