@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
	font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}

a{
	color: #1a0dab;
	}
a:hover{
	text-decoration: none;
	}
.text-center{
	text-align: center;
	}
input[type="number"] {
	-moz-appearance:textfield; 
	} 
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
	-webkit-appearance: none; 
	}
select{
	-webkit-appearance: none;
	appearance: none;
	}

.centered {
	margin: auto;
	width: fit-content;
}

.contents .underTitle{
	margin: 0;
	padding: .8rem 1rem;
	background: #e71a1f;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1.15;
	}
@media only screen and (max-width: 780px) {
	.complete_contents .underTitle {
		font-size: 19.3px;
		line-height: 1.4767;
	}
}
.contentsArea{
	margin: 1rem;
	font-size: .8rem;
	}
.contents .note{
	text-align: center;
	font-weight: bold;
	font-size: .8rem;
	line-height: 1.4;
	}
	.contents .note > i{
		margin-bottom: .5rem;
		color: #fc0;
		font-size: 1.5rem;
		}
.contentsArea h2{
	margin-top: 2rem;
	padding-left: .4rem;
	border-left: 8px solid #e71a1f;
	color: #e71a1f;
	font-size: 1.1rem;
	line-height: .8em;
	}
.contentsArea table{
	width: 100%;
	margin-bottom: 2rem;
	border-collapse: collapse;
	}
.contentsArea table th{
	text-align: left;
	font-size: .9rem;
	}
	.contentsArea table th > small{
		font-weight: normal;
		}
.contentsArea table td{
	padding: .5rem 0 1rem;
	font-size: .9rem;
	}
	.contentsArea table td > p{
		color: #333;
		font-size: .7rem;
		}
.contentsArea input,
.contentsArea select{
	border: none;
	border-radius: 4px;
	outline:none;
	box-shadow: 0px 0px 5px 0.3px rgba(0, 0, 0, 0.15);
	border: 1px solid #ccc;
	font-size: 1rem;
	}
.contentsArea input,
.contentsArea select{
	box-sizing: border-box;
	width: 100%;
	height: 60px;
	text-indent: .5rem;
	}
.ERR{
	color:#e71a1f;
	font-weight:bold;
	}
.required-focus{
	background: #fce2e2 !important;
	border-color: #e71a1f !important;
	}

.contentsArea .agree_area{
	display: flex;
	justify-content: center;
	margin: 0 0 30px;
}

.contentsArea #agreement{
	height: auto;
	width: auto;
	margin: 0 10px 0 0;
}

@media only screen and (min-width: 781px) {
.contents .underTitle{
	text-align: center;
	}
.contentsArea{
	max-width: 700px;
	margin: 1rem auto 2rem;
	}
.contentsArea table th{
	width: 16rem;
	vertical-align: top;
	}
.contentsArea.entry table th{
	padding-top: 1.7rem;
	}
}
@media only screen and (max-width: 780px) {
.contentsArea table{
	margin: 1rem 0;
	}
.contentsArea table th,
.contentsArea table td{
	display: block;
	width: 100%;
	}
}
span.optional,
span.essential,
span.required{
	display: inline-block;
	margin-right: .5rem;
	padding: .2rem .4rem;
	border-radius: 4px;
	font-size: .7rem;
	color: #fff;
	font-weight: normal;
	}
span.optional{
	background: #555;
	}
span.essential,
span.required{
	background: #c60000;
	}
.red,
.ERR{
	font-weight: normal !important;
	color: #c60000 !important;
	font-size: 0.8em;
	}

 /* TOPへ戻るボタン
---------------------------------------- */
.back-top{
	margin-top: 1rem;
	text-align: center;
	}
.contentsArea a.back{
	box-sizing: border-box;
	width: 100%;
	box-shadow: 0px 0px 5px 0.3px rgba(0, 0, 0, 0.15);
	border: 1px solid #ccc;
	color: #000;
	line-height: 70px;
	text-decoration: none;
	text-align:center;
	}

/* 確認画面への遷移ボタン
---------------------------------------- */
.contentsArea .submit,
.contentsArea .back{
	cursor: pointer;
	display: inline-block;
	height: 70px;
	font-size: 1.2rem;
	border-radius: 6px;
	font-weight: bold;
	text-indent: 0;
	}
.contentsArea .submit{
	background-image: linear-gradient( #f00 0%, #e80000 40%, #b70000 100%);
	color: #fff;
	}
	.contentsArea .back{
		background: #eee;
		color: #000;
		}
.contentsArea .submit:not[disabled]{
	box-shadow: 2px 3px 7px 0px rgba(116, 29, 0, 0.5);
	}
.submit:hover,
.back:hover{
	opacity: .6;
	}
.submit[disabled]{
	cursor: auto;
	background: #ccc;
	overflow: visible;
	}
.submit[disabled]:hover{
	opacity: 1;
	}
.submit-wrap,
.back-wrap{
	position: relative;
	}
	.submit-wrap::after,
	.back-wrap::after{
		position: absolute;
		display: inline-block;
		width: 16px;
		height: 16px;
		line-height: 16px;
		top: 50%;
		margin-top: -.5rem;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		font-weight: bold;
		background: #fff;
		font-size: .8rem;
		text-align: center;
		}
	.submit-wrap::after{
		right: 1.4rem;
		color: #e40000;
		font-family: "Font Awesome 5 Free";
		content: "\f054";
		}
	.back-wrap::after{
		left: 1.4rem;
		color: #666;
		font-family: "Font Awesome 5 Free";
		content: "\f053";
		}
@media only screen and (min-width: 781px) {
	.submit-wrap,
	.back-wrap{
		display: inline-block;
		width: 300px;
		}
	.button-wrap div{
		margin: 0 .5rem;
		}
}
@media only screen and (max-width: 780px) {
	.back-wrap{
		margin-top: 1rem;
		}
 }

/* 確認画面
---------------------------------------- */
@media only screen and (max-width: 780px) {
	.contentsArea.confirm table th{
		padding-bottom: .5rem;
		border-bottom: 1px solid #ccc;
		}
}
@media only screen and (min-width: 781px) {
	.contentsArea.confirm table th,
	.contentsArea.confirm table td{
		padding-top: 2rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid #ccc;
		}
	.confirm .button-wrap{
		display:flex;
		justify-content: center;
		text-align: center;
		}
	.confirm .submit-wrap{
		order: 2;
		}
	.confirm .back-wrap{
		order: 1;
		}
}

/* 完了画面
---------------------------------------- */
.complete .caution img{
	width: 59px;
	height: 53px;
	margin: auto;
	display: block;
}

.complete .caution p{
	font-size: 30px;
	text-align: center;
	font-weight: bold;
	margin: 0.5rem 0;
	line-height: 1.3em;
}

.complete .caution p:after {
	content: '▼';
	display: block;
	color: #e71a1f;
}

.complete .caution span{
	background: linear-gradient(transparent 60%, #ffd200 60%, #ffd200 80%, transparent 80%);
}

.complete-wrap {
	padding: 1rem;
	border: 6px solid #e71a1f;
	border-radius: 6px;
	text-align: center;
	font-size: .9rem;
	}
.complete-text{
	padding-bottom: 1em;
	}

	.complete-text{
	}

	.complete-text.note p{
		font-size: 16px;
		font-weight: bold;
		letter-spacing: -.3px;
		margin: 0;
		text-align: left;
	}

	.complete-text i {
		font-size: 1.8rem !important;
	}

.complete-tel-number {
	margin: .5rem 0 1rem;
	}
	.complete-tel-number img {
		max-width: 50px;
		vertical-align: -2px;
		}
	.complete-tel-number span {
		font-weight: bold;
		color: #f7313b;
		font-size: 42px;
		line-height: 1;
		letter-spacing: -1px;
		}
.complete-back {
	margin-top: 12px;
	text-indent: -.5em;
	font-size: .9rem;
	}
	.complete-back span {
		color: #f7313b;
		font-weight: bold;
		}
.complete-note{
	font-size: .9rem;
	}
	.complete-note p:nth-child(1) {
		margin: 2rem 0;
		font-weight: bold;
		font-size: .8rem;
		}

.nolink{
	pointer-events: none;
	color: #3c3c3c;
}

.nolink.text-red{
	pointer-events: none;
	color: #e71a20;
}

.complete .num.nolink{
	color: #fff;
}

@media only screen and (min-width: 781px) {
	.complete-back span {
		display: block;
	}
}

@media only screen and (max-width: 780px) {
.complete-text span > br{
	display: none;
	}
.complete-tel-number span {
	font-size: 32px;
	}
}
