/* signup css */
@charset "UTF-8";

/* main
----------------------------------------------------------------------*/
#main{ flex:1; }

/* pankuzu
----------------------------------------------- */
#pankuzu{ margin-top:0;}

/* signup
-----------------------------------------------  */

.underTxt{
	font-weight:bold;
	text-align:center;
	margin-bottom:30px;
	font-size: 14px;
}

.iframeCover {
	height:280px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	border:1px solid #ccc;
	max-width:970px;
	margin:0px auto 30px auto;
}

.iframeCover iframe {
	width:100%;
	height:100%;
	border:none;
	display:block;
}

/* input
-----------------------------------------------  */

.inputArea{
	max-width:750px;
	margin: 0 auto;
}

.inputArea .inputBox{
	display: table;
	margin-bottom: 30px;
}

.inputArea .inputBox .inptTtl{
	width: 270px;
	vertical-align: middle;
	display: table-cell;
	position: relative;
	font-size: 15px;
}

.inputArea .inputBox .inptTtl .required{
	background-color: #FF4D4D;
	color: #fff;
	padding: 5px 18px;
	position: absolute;
	margin-right: 38px;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	font-size: 11px;
}

/* ie11 */
*::-ms-backdrop, .inputArea .inputBox .inptTtl > p{ display:inline-block; }
*::-ms-backdrop, .inputArea .inputBox .inptTtl .required{ 
	display:inline-block;
	position:static;
	float:right;
	transform: translateY(0);
	-webkit-transform: translateY(0);
}
.inputArea .inputBox .inputBody{
	width: 480px;
	display: table-cell;
	font-size: 15px;
	position: relative;
}

.inputArea .inputBox .autoInputArea{
}

.inputArea .inputBox .autoInputArea span#Add{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.inputArea .inputBox .autoInputArea span.addInput{
	display:block;
	padding-left: 10px;
}

.inputArea .inputBox .autoInputArea input{
	width: 100%;
}

.inputArea .inputBox .inputBody.nameArea input{
	width:180px;
}

.inputArea .inputBox .inputBody .infoTxt{
	font-size:12px;
	margin-top:5px;
	line-height:1.5;
}

.inputArea .inputBox .inputBody.nameArea input:nth-child(1){
	margin-right:15px;
}

.inputArea .inputBox .inputBody.typeArea label:nth-child(1){
	margin-left:10px;
	margin-right:25px;
}

.inputArea .inputBox .inputBody.birAria .selectBox{
	position:  relative;
	float: left;
	width: 22%;
	padding-left: 10%;
}
.inputArea .inputBox .inputBody.birAria .selectBox span{
	position: absolute;
	top: 50%;
	right: -30px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.inputArea .inputBox .inputBody.birAria .selectBox:nth-child(1){
	width: 30%;
	padding-left: 0;
}

.inputBody .hintsTxt{
	display: block;
	width: 100%;
	clear: both;
	font-size: 12px;
	margin-top: 64px;
}

.inputBody .hintsTxt_c{
	display: block;
	width: 100%;
	clear: both;
	font-size: 12px;
	margin-top: 10px;
	font-weight: normal !important;
}

.inputBody .autoArea{
	background-color: #f0f0f0;
	padding: 15px;	
	color: #aaa;
}
.inputArea .inputBox .inputBody.addArea input{
	width: 180px;
}

.inputArea .inputBox .inputBody.addArea a{
	display:  block;
	position: absolute;
	top: 0;
	left: 195px;
	color: #fff;
	background: #1e8dfd;
	border-color: #1e8dfd;
	text-decoration: none;
	padding: 15px 0px;
	font-size: 12px;
	/* transform: translateY(-50%); */
	/* -webkit-transform: translateY(-50%); */
	border-radius: 5px;
	text-align: center;
	min-width: 140px;
}
.inputArea .inputBox .inputBody.addArea .addArea-text-small {
	font-size: 12px;
	margin-top: 10px;
}
.inputArea .inputBox .inputBody.addArea .addArea-text-small a {
	position: static;
	font-size: 12px;
	display: inline;
	padding: 0;
	background-color: inherit;
	color: inherit;
}

.inputArea .inputBox .inputBody.addArea .errorTxt{
    display: block;
}

.inputArea .inputBox .inputBody.prefectureArea .selectBox{
	width:200px;
}

.inputArea .inputSection {
	margin-top: 65px;
}

.inputArea.confirm .inputSection{
	margin-top:65px;
}

.inputArea .inputBox.magBox .inptTtl{
	vertical-align: top;
	padding-top: 15px;
}

.inputArea .inputBox.magBox .inputBody p{
	margin-bottom:15px;
	font-size:14px;
}

.inputArea .inputBox .inputBody.typeArea label{
	margin-left:10px;
	margin-right:25px;
}
.inputArea .inputBox.magBox .inputBody p{
	font-size:13px;
	margin-bottom:20px;
}

.inputArea .telArea input{
	width:130px;
}

.inputArea .telArea span{
	display:inline-block;
	margin:0 10px;
}

.confirm .underTxt{
	margin-top:80px;
}

.confirm .inputBox .inputBody p{
	font-weight:bold;
}

.comp .underTxt{
	padding-top:80px;
	width: 560px;
	margin:0 auto;
	text-align: left;
}

.message{
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content: center;
	justify-content: center;
	line-height:1;
	font-size:100px;
	color:#1E8EFF;
	-webkit-text-shadow:7px 5px 0px #ccc;
	text-shadow:7px 5px 0px #ccc;
}
.message span {
	opacity:0;
	padding:0 4px;
	-webkit-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-animation: lettering .65s forwards ease-out;
	animation: lettering .65s forwards ease-out;
}
.message span:nth-child(1) { -webkit-animation-delay: 0.55s; animation-delay: 0.55s; }
.message span:nth-child(2) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.message span:nth-child(3) { -webkit-animation-delay: 0.65s; animation-delay: 0.65s; }
.message span:nth-child(4) { -webkit-animation-delay: 0.70s; animation-delay: 0.70s; }
.message span:nth-child(5) { -webkit-animation-delay: 0.75s; animation-delay: 0.75s; }
.message span:nth-child(6) { -webkit-animation-delay: 0.80s; animation-delay: 0.80s; }
.message span:nth-child(7) { -webkit-animation-delay: 0.85s; animation-delay: 0.85s; }
.message span:nth-child(8) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
.message span:nth-child(9) { -webkit-animation-delay: 0.95s; animation-delay: 0.95s; }
.message span:nth-child(10) { -webkit-animation-delay: 1.00s; animation-delay: 1.00s; }
.message span:nth-child(11) { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; }

@-webkit-keyframes lettering {
	0%{ opacity:0; -webkit-transform: translate3d(10px, 80%, 0); }
	30% { opacity:1; }
	50% { opacity:1; -webkit-transform: translate3d(0, -15px, 0); }
	100% { opacity:1; -webkit-transform: translateY3d(0, 0, 0); }
}
@keyframes lettering {
	0%{ opacity:0; transform: translate3d(10px, 80%, 0); }
	30% { opacity:1; }
	50% { opacity:1; transform: translate3d(0, -15px, 0); }
	100% { opacity:1; transform: translate3d(0, 0, 0); }
}

@media all and (max-width: 640px) { 
	.message{
		font-size:45px;
		-webkit-text-shadow:2px 3px 0px #ccc;
		text-shadow:2px 3px 0px #ccc;
	}
	.message span{
		padding:0 1px;
	}
}
@media all and (max-width: 370px) { 
	.message{
		font-size:38px;
	}
}

@media all and (max-width: 640px) {
	.underTxt{
		text-align:left;
	}
	.comp .underTxt{
		width: 100% !important;
	}

	.inputArea .inputBox{
		display: block;
		margin-bottom: 10px;
	}
	
	.inputArea .inputBox .inptTtl{
		display: block;
		width: 100%;
		margin-bottom: 0;
		font-weight: bold;
	}
	
	.inputArea .inputBox .inptTtl .required{
		margin-right:  0;
		padding: 5px 10px;
	}
	
	.inputArea .inputBox .inputBody{
		padding: 14px 0;
		width: 100%;
		display: block;
	}
	
	.inputArea.confirm .inputBox .inputBody{
		background: #f0f0f0;
		padding: 14px;
		line-height: 1.5;
		box-sizing: border-box;
		margin-top: 10px;
	}
	.inputArea .inputBox .inputBody.nameArea{
		letter-spacing:-.4em;
	}
	.inputArea .inputBox .inputBody.nameArea input,
	.inputArea .inputBox .inputBody.nameArea p{
		letter-spacing:normal;
	}
	.inputArea .inputBox .inputBody.nameArea input{
		width: 49%;
	}
	.inputArea .inputBox .inputBody.nameArea input:nth-child(1){
		margin-right:2%;
	}
	.inputArea .inputBox .inputBody.typArea{
	
	}
	.inputArea .inputBox .inputBody.birAria .selectBox{
	
	}
	.inputArea .inputBox .inputBody.birAria .selectBox span{
		right: -18%;
	}
	.inputArea .inputBox .inputBody.birAria .selectBox:nth-child(1){
	
	}
	.inputArea .inputBox .inputBody.addArea input{
	
		width: 58%;
		margin-right:2%;
	}
	
	.inputArea .inputBox .inputBody.addArea a{
		width: 40%;
		right: 0;
		left: inherit;
		box-sizing: border-box;
		font-size: 10px;
		min-width: inherit;
        top: 14px;
	}
	.inputArea .inputBox .inputBody.prefectureArea .selectBox{
		width:100%;
	}
	.inputArea .inputBox .inputBody.typeArea label{
		margin-left:10px;
		margin-right:25px;
	}
	.inputArea .inputBox.magBox .inputBody p{
		font-size:13px;
		margin-bottom:20px;
	}
	.confirm .underTxt{
		margin-top:60px;
	}
}

/* modalOverlay */
.modalOverlay{
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(34,34,34,.5);
	z-index: 1;
}
.open .modalOverlay{
	display:block;
}
/*-- modalWin --*/
.modalWin{
	position:absolute;
	left:calc(50% - 375px);
	top:calc(50% - 250px);
	width:750px;
	max-height:500px;
	padding:15px 30px 30px;
	background:#fff;

	-webkit-border-radius:15px;
	border-radius:15px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	opacity:0;
	pointer-events: none;
	-webkit-transition: 0s;
	transition: 0s;
	z-index: 1;
}
.modalWin.open{
	opacity:1;
	pointer-events: initial;
	-webkit-transition: .5s;
	transition: .5s;
}
.modalWin .heading{
	padding:30px 0 20px;
}
.modalWin .head{
	color:#666;
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
.modalWin .head span{
	display:block;
	font-size:13px;
	margin-top:10px;
	font-weight:normal;
}
.modalWin .closeIcon{
	position: absolute;
	right: 35px;
	top: 35px;
	width: 25px;
	height: 25px;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	cursor:pointer;
}
.modalWin .closeIcon:before,
.modalWin .closeIcon:after{
	content:'';
	position:absolute;
	left:-4px;
	top:11px;
	display:block;
	width:33px;
	height:1px;
	background:#666;
	-webkit-transition:.5s .3s;
	transition:.5s .3s;
}
.modalWin.open .closeIcon:before{ -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.modalWin.open .closeIcon:after{ -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }

.modalWin .modalBody{
	max-height: 346px;
	padding:25px 50px 0;
	font-size:15px;
	overflow-y:auto;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.modalWin .btnBox{
	text-align:center;
}

ul.adds_list {
	text-align: left;
	padding: 0px 0 15px 0;
	font-size: 14px;
}

ul.adds_list li {
	margin-bottom: 10px;
	padding: 0 0 3px 0;
	width: 100%;
	position: relative;
	padding-left:  60px;
	box-sizing: border-box;
	padding-top: 4px;
}

ul.adds_list a.btn_a {
	background: #1e8dfd;
	padding: 5px 10px;
	display: inline-block;
	color: #FFFFFF;
	text-decoration: none;
	margin-right: 10px;
	border-radius: 3px;
	position: absolute;
	top: 0;
	left: 0;
}

@media all and (max-width: 640px) { 
	/* modalWin
	----------------------------------------------- */
	.open .modalOverlay{
		opacity:0;
	}
	.modalWin{
		position:fixed;
		left:0;
		top:0;
		width:100%;
		height:100%;
		max-height:unset;
		padding:0;
		z-index: 1003;
		background:#fff;
		overflow-y:scroll;
		-webkit-transform: translateY(150%);
		transform: translateY(150%);
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: .3s;
		transition: .3s;
		-webkit-border-radius:0;
		border-radius:0;
	}
	.modalWin.open{
		margin-top:0 !important;
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	}
	.modalWin .heading{
		width:100%;
		padding:25px;
		font-size:15px;
		color:#666;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		background:#fff;
		z-index: 1;
	}
	.modalWin .head{
		font-size:15px;
	}
	.modalWin .closeIcon{
		position:absolute;
		right:25px;
		top:25px;
		width:25px;
		height:25px;
		line-height:0;
		font-size:0;
		overflow:hidden;
	}
	.modalWin .modalBody{
		max-height:unset;
		padding:25px;
		font-size:12px;
	}
	.modalWin .btnBox{
		display:-webkit-flex;
		display:flex;
		-webkit-justify-content:space-between;
		justify-content:space-between;
		padding:0 18px;
	}
	.modalWin .btnBox .btn{
		display:inline-block;
		width: 48%;
	}
	.modalWin .btnBox .btn a{
		height:50px;
		line-height:50px;
	}
	.inputArea .telArea input{
		width:75px;
	}

	.inputArea .telArea span{
		display:inline-block;
		margin:0 5px;
	}
	.inputArea .inputBox .autoInputArea{
	}

	.inputArea .inputBox .autoInputArea span#Add{
		position: static;
		margin-bottom: 15px;
		display: block;
		transform:  none;
		-webkit-transform:none;
	}

	.inputArea .inputBox .autoInputArea span.addInput{
		margin-left:  0 !important;
		padding-left:  0 !important;
	}

	.inputArea .inputBox .autoInputArea input{
	}
}
@media all and (max-width: 320px) {
	.inputArea .telArea span{
		margin: 0 4px;
	}
}

.unchecked{
	opacity:0.5;
	cursor: default;
	pointer-events:none;
}
.kiyakuBox .typeArea label{line-height:1.7;}
.kiyakuBox .typeArea input#check{
	width:17px;
	height:17px;
	float:left;
	margin:3px 0 0 0;
}
.kiyakuBox .typeArea .linkBox{margin-top:15px;}