
@media(min-width:1024px){
	.childPageHeader:before{
		position:absolute;
		content:"";
		background:right / cover no-repeat url(../img/titlebg.png);
		width:100%;
		height:100%;
		right:0;
		top:0;
		bottom:0;
	}
}

.contactIndex{
	padding:48px 15px;
	width:96%;
	max-width:1050px;
	margin:0 auto;
}

.inner{
	position:relative;
}

.contactBtn{
	max-width: 440px;
	  margin: 0 auto;
	  font-family:'Noto Sans JP',"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	}
	
	.contactBtn input#submit_button,.contactBtn button#submit_button {
		color: #fff;
	  text-decoration: none;
	  background: #00a2e5;
	  background: linear-gradient(90deg,#28BBF8,#0E69E2);
	  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a2e5', endColorstr='#0549a3',GradientType=1 );
	  border-radius: 4px;
	  padding: 20px;
	  font-size:1.6rem;
		
	}
	
	.contactBtn input#submit_button,.contactBtn button#submit_button {
	  position: relative;
	  display: block;
	  padding: 11px 24px;
	  border-radius:100px;
	  border: 1px solid #ddd;
	  cursor:pointer;
	  width:100%;
	  max-width: 300px;
	  margin:0 auto;
	}
	/* .contactBtn input#submit_button:before {
	  content: "";
	  display: block;
	  position: absolute;
	  left: 15px;
	  top: 50%;
	  width: 14px;
	  height: 14px;
	  margin-top: -8px;
	  border-right: 2px solid #fff;
	  border-top: 2px solid #fff;
	  transform: scale(0.8, 1) rotate(45deg);
	} */
	
	/* .contactBtn{
	max-width: 100%;
	  margin: 0 auto;
	  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
	  padding: 10px;
	  box-sizing: border-box;
	} */
	
	input.btn_entry{
	width: 100%;
	height: 46px;
	padding: 10px;
	}
	
	
	
	input[type="text" i],input[type="email" i],input[type="tel" i],input[type="submit" i],textarea{
		padding:10px;
		width:100%;
		box-sizing: border-box;
		border:1px solid #DBDBDB;
		background:#f3f3f3;
	}

	input[type="text" i]:focus,input[type="email" i]:focus,input[type="tel" i]:focus,input[type="submit" i]:focus,textarea:focus{
		background:#fff;
	}
	
	.pageHeadder.contact{
		padding:0 0 0;
	}
	
	.pageHeadder.contact>.pageTtl{
		padding:0;
	}
	
	.pageSec.contact{
		width:96%;
		margin:0 auto;
		text-align:left;
	}
	
	.pageSec.contact>form{
		margin-top:30px;
	}
	
	.formCaution{
		margin-bottom:20px;
	}
	
	.formCaution p{
		margin-bottom:20px;
	}
	
	.formCaution a{
		display:block;
	}
	
	.require{
		background:#D44242;
		color:#fff;
		padding:4px 10px;
		border-radius:2px;
		margin-right:10px;
	}
	
	.formContainer{
		margin:16px 0;
	}
	
	.fcTop{
		margin-bottom:10px;
	}
	
	.fcTop>p{
		line-height:2;
	}

	.fcTop p span:nth-of-type(2),.fcTop p span:nth-of-type(2) *{
		font-size:1.1rem;
	}
	
	.fcBottom.formServices{
		display:flex;
		justify-content: flex-start;
		align-items:flex-start;
		flex-wrap:wrap;
	}
	
	.fcBottom.formServices>span{
		width:48%;
		margin:10px 1%;
		text-align:center;
		transition-duration:.3s;
	}
	.fcBottom.formServices>span>label{
		display:block;
		padding:10px;
		background:#fff;
		border:solid 1px #f2f2f2;
		border-radius:4px;
		transition-duration:.3s;
	}
	
	.fcBottom.formServices>span>label>p{
		margin-top:8px;
	}
	
	.fcBottom.formServices>span>input[type="radio"]{
		display:none;
	}
	
	.ppCaution{
		margin-bottom:20px;
	}
	
	.pageSec.contact .contactBtn{
		width:80%;
		margin:0 auto;
	}
	
	.pageSec.contact .contactBtn input#submit_button{
		font-size:18px;
	}

	textarea{
		resize: vertical;
	}
	
	@media(min-width:768px){
		.formCaution{
			text-align:center;
		}
		.formCaution a{
			display:inline-block;
			margin:0 10px;
		}
		.formCaution a:first-of-type{
			border-right:1px solid #3f3f3f;
			padding-right:10px;
			margin-right:0;
		}
		.fcBottom.formServices>span{
			width:30%;
			margin:16px 2.5%;
			/*padding:16px;*/
		}
		.fcBottom.formServices>span>label{
			padding:16px;
		}
		.ppCaution{
			text-align:center;
		}
		.pageSec.contact .contactBtn{
			max-width:400px;
		}
		.pageSec.contact .contactBtn input#submit_button,.pageSec.contact .contactBtn button#submit_button{
			padding:16px;
		}
		.fcBottom.formServices>span:nth-of-type(1),.fcBottom.formServices>span:nth-of-type(4),.fcBottom.formServices>span:nth-of-type(7){
			margin-left:0;
		}
		.fcBottom.formServices>span:nth-of-type(3),.fcBottom.formServices>span:nth-of-type(6),.fcBottom.formServices>span:nth-of-type(9){
			margin-right:0;
		}
	}
	@media(min-width:1024px){
		input,textarea{
			padding:16px;
		}
		.pageSec.contact{
			max-width:880px;
		}
		.pageHeadder.contact>.pageTtl{
			padding-bottom:1em;
		}
		.formCaution{
			padding-bottom:40px;
		}
		.require{
			padding:4px 18px;
		}
		.fcBottom.formServices>span{
			min-height:116px;
		}
		#otherSelect{
		   padding:34px 0;
		}
		.pageSec.contact .contactBtn{
			margin-top:60px;
		}
		.fcTop p span:nth-of-type(2),.fcTop p span:nth-of-type(2) *{
			font-size:1.3rem;
		}
		.fcTop p br{
			display:none;
		}
	}
	
	/*animation*/
	.fcBottom.formServices>span{
		cursor: pointer;
	}
	.fcBottom.formServices>span>label{
		cursor: pointer;
	}
	.fcBottom.formServices>span>label:hover{
		background:#F3F3F3;
	}
	
	.fcBottom.formServices>span>input[type="radio"]:checked + label{
		background: linear-gradient(90deg,#28BBF8,#0E69E2);
	}
	
	.fcBottom.formServices>span>input[type="radio"]:checked + label>p{
		color:#fff;
	}
	
	.fcBottom.formServices>span>input[type="radio"]:checked:hover{
		background:inherit;
	}
	
	.fcBottom.formServices.confirm>span{
		background:#fff;
		cursor: default !important;
	}
	
	.fcBottom.formServices.confirm>span>label:hover{
		background:#fff;
		cursor: default !important;
	}

	.cautionMessage{
		padding: 12px;
		color: #fff;
		background: #ff385b;
	}


	/* 20220525 added. */
	@media(min-width:480px){
		.col2Input{
			display:flex;
			justify-content: space-between;
		}
		.col2Input > .formContainer{
			width:49%;
			margin-bottom:0;
		}
	}


	/* 20220704 added. */
	.fcBottom select{
		width: 100%;
		height: 46px;
		border: 1px solid #DBDBDB;
	}


	@media(min-width:480px){
		.col2Input{
			display:flex;
			justify-content: space-between;
		}
		.col2Input > .formContainer{
			width:49%;
		}
	}


	p.form-invalid {
        color: #ff4848;
        background: #ffe3e8;
        border-radius: 4px;
        padding: 6px 12px;
        margin-top: 8px;
        position: relative;
    }

    p.form-invalid:before{
        position:absolute;
        content:"";
        top:-8px;
        left:0;
        right:0;
        margin:auto;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 5px 8.7px 5px;
        border-color: transparent transparent #ffe3e8 transparent;
    }
    p.submitError.form-invalid{
        width:100%;
        text-align:center;
    }
    p.submitError.form-invalid:before{
        display:none;
    }