@charset "utf-8";

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
	-webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
	border:none;
	width:100%;
	border-radius:0px;
	/*background-color:#f8f8f8;
	background-color:#ddd;*/
}
input[type="radio"],
input[type="checkbox"]{
	margin:0;
	padding:0;
	padding-block:0;
	padding-inline:0;
}

/* ------------------------------------ */
.contact.confirm .processingBox{
	display:none;
}
.contact.confirm .processingBox .innerBox{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100vw;
	height:100dvh;
	background-color:rgba(0, 0, 0, .8);
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:15;
}
/* ------------------------------------ */
.contact.confirm .processingBox .innerBox .spiner,
.contact.confirm .processingBox .innerBox .spiner:after{
	border-radius: 50%;
	width: 10em;
	height: 10em;
}
.contact.confirm .processingBox .innerBox .spiner{
	margin: 20px auto;
	font-size: 10px;
	position: relative;
	/*text-indent: -9999em;*/
	border-top: 1.1em solid rgba(255, 255, 255, 0.2);
	border-right: 1.1em solid rgba(255, 255, 255, 0.2);
	border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
	border-left: 1.1em solid #ffffff;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: load8 1.1s infinite linear;
	animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes load8 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.contact.confirm .processingBox .innerBox p{
	color:#fff;
}
/* ------------------------------------ */
input::placeholder{
	color:#bbbbbb;
	font-weight:300;
}
.formItemBox .items .errTxt{
	display:none;
	color:#e80000;
}
.confirmBtn:disabled{
	opacity:0.2;
	cursor:not-allowed !important;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For SmartPhone
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (max-width:767px){
	/*.pageTtlBox .jpTtlTxt{
		transform:translateX(-0.8vw);
	}*/
	/* ============================================ */
	.leadTxt{
		font-size:3.5vw;
		line-height:1.5;
	}
	/* ------------------------------------ */
	.tokenErr{
		display:flex;
		justify-content:center;
		margin:5% 5% 0;
		padding:3%;
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		font-weight:500;
		color:#e80000;
		border:2px solid #e80000;
		line-height:1.5;
	}
	/* ============================================ */
	.formItemBox{
		border-top:1px solid #333;
		padding:6% 3% 0 3%;
	}
	/* ------------------------------------ */
	.formItemBox .items{
		width:100%;
		margin-top:8%;
	}
	.formItemBox > .items:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.formItemBox .items .ttlBox{
		width:100%;
		position:relative;
	}
	.formItemBox .items.required .ttlBox::before{
		content:"必須";
		display:inline-block;
		padding:3px;
		color:#e80000;
		color:var(--clr-blue);
		font-size:clamp(0.8rem, 1.0vw, 1.0rem);
		border:1px solid #e80000;
		border:1px solid var(--clr-blue);
		position:absolute;
		top:50%;
		transform:translateY(-50%);
		right:0;
	}
	.formItemBox .items .bdyBox{
		width:100%;
		margin-top:3%;
	}
	.formItemBox .items .errTxt{
		font-size:3.5vw !important;
		margin-top:3%;
	}
	.formItemBox .items .inputNotes{
		margin-top:2%;
	}
	/* ------------------------------------ */
	.formItemBox .items .ttlBox p{
		font-size:3.75vw;
		font-weight:600;
	}
	.formItemBox .items .bdyBox *{
		font-size:4vw;
	}
	/* ============================================ */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea{
		font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
		padding:5px 7px;
		background-color:#f4f4f4;
	}
	input::placeholder{font-size:3.2vw;}
	input[type="radio"],
	input[type="checkbox"]{
		width:4.0vw;
		height:4.0vw;
		max-width:16px;
		max-height:16px;
		min-width:12px;
		min-height:12px;

		margin-right:1vw;
		transform:translateY(-0.5vw);
	}
	/* ============================================ */
	.formItemBox .items .bdyBox .innerBox{
		display:flex;
		width:100%;
		margin-top:3px;
	}
	.formItemBox .items .bdyBox > .innerBox:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.formItemBox .items.typeWrap .bdyBox label:nth-child(2){
		display:inline-block;
		margin-left:10%;
	}
	/* ------------------------------------ */
	.formItemBox .items.schoolWrap .bdyBox .innerBox{
		align-items:center;
	}
	.formItemBox .items.schoolWrap .bdyBox .innerBox > p{
		width:14vw;
		font-size:3.5vw;
	}
	.formItemBox .items.schoolWrap .bdyBox .innerBox > div{
		width:calc(100% - 14vw);
	}
	/* ------------------------------------ */
	.formItemBox .items .bdyBox textarea{
		height:6em;
	}
	/* ============================================ */
	.submitItemBox{
		margin-top:8%;
	}
	.submitItemBox > p{
		text-align:center;
		font-size:4.0vw;
	}
	.submitItemBox > p > a{
		display:inline-block;
		color:#333;
		font-size:3.5vw;
		/*text-decoration:underline;*/
		border-bottom:0.5px solid #333;
	}
	.submitItemBox > p > a:hover{
		border-bottom:0.5px solid #fff;
		transform:scale(1.03);
	}
	/* ------------------------------------ */
	.submitItemBox .agreeWrap{
		text-align:center;
		margin-top:4%;
	}
	.submitItemBox .agreeWrap label{
		font-size:4.5vw;
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox{
		display:flex;
		flex-direction:column-reverse;
		justify-content:center;
		margin:15px 0 0 0;
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox .confirmBtn,
	.submitItemBox .btnsBox .submitBtn{
		-webkit-appearance:none;
		appearance:none;
		display:flex;
		justify-content:center;
		align-items:center;
		width:80%;
		max-width:300px;
		height:45px;
		margin:0 auto 0;
		padding-block:0;
    padding-inline:0;
		border:1px solid #333;
		border-radius:0;
		background-image:none;
		background-color:#fff;
		cursor:pointer;
		transition:all 0.3s ease;
		transform:scale(1);
	}
	.submitItemBox .btnsBox .confirmBtn > p,
	.submitItemBox .btnsBox .submitBtn > p{
		width:100%;
		font-size:4vw;
		color:#333;
		position:relative;
	}
	.submitItemBox .btnsBox .confirmBtn > p::before,
	.submitItemBox .btnsBox .submitBtn > p::before{
		content:"→";
		display:flex;
		position:absolute;
		color:#333;
		top:50%;
		transform:translateY(-50%);
		right:0.7em;
		z-index:2;
	}

	/* ============================================ */
	/* ============================================ */
	.contact.confirm .processingBox p{
		font-size:6vw;
	}
	.contact.confirm .formItemBox .items{
		border-bottom:0.5px solid #333;
		padding:0 1% 0.5em 1%;
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox .returnBtn{
		display:flex;
		justify-content:center;
		align-items:center;
		width:75%;
		max-width:270px;
		height:40px;
		margin:3% auto 0;
		font-size:3.5vw;
		color:#333;
		border:1px solid #333;
		position:relative;
		transition:all 0.3s ease;
		transform:scale(1);
		opacity:1;
	}
	.submitItemBox .btnsBox .returnBtn::before{
		content:"←";
		display:flex;
		position:absolute;
		color:#333;
		top:50%;
		transform:translateY(-50%);
		left:0.7em;
		transition:all 0.3s ease;
	}
	.submitItemBox .btnsBox .returnBtn:hover{
		transform:scale(1.05);
		opacity:0.5;
	}
	.submitItemBox .btnsBox .returnBtn:hover::before{
		left:0.2em;
	}

	/* ============================================ */
	/* ============================================ */
	.contact.complete .thanksMsgBox{
		display:flex;
		justify-content:center;
		align-items:center;
		padding:5% 0;
	}
	.contact.complete .thanksMsgBox div > p{
		font-size:3.5vw;
		line-height:1.5;
	}

}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	For Desktop & Tablet
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* ///////////////////////////////////////////////////// */
/* ============================================ */
/* ------------------------------------ */

@media screen and (min-width:768px){
	/*.pageTtlBox .jpTtlTxt{
		transform:translateX(-10px);
	}*/
	/* ============================================ */
	.leadTxt{
		padding:0 20px;
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		line-height:1.5;
	}
	/* ------------------------------------ */
	.tokenErr{
		display:flex;
		justify-content:center;
		margin:50px 20px 0;
		padding:20px;
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		font-weight:500;
		color:#e80000;
		border:2px solid #e80000;
		line-height:1.5;
	}

	/* ============================================ */
	.formItemBox{
		border-top:1px solid #333;
		padding:50px 20px 0 20px;
	}
	/* ------------------------------------ */
	.formItemBox .items{
		display:flex;
		width:100%;
		margin-top:50px;
	}
	.formItemBox > .items:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.formItemBox .items .ttlBox{
		width:230px;
		padding-top:11px;
		position:relative;
		/*background:#fcc;*/
	}
	.formItemBox .items.required .ttlBox::before{
		content:"必須";
		display:inline-block;
		padding:3px;
		color:#e80000;
		color:var(--clr-blue);
		font-size:clamp(0.8rem, 1.0vw, 1.0rem);
		border:1px solid #e80000;
		border:1px solid var(--clr-blue);
		position:absolute;
		top:10px;
		/*right:clamp(60px, 2vw, 25px);*/
		right:13%;
	}
	.formItemBox .items .bdyBox{
		width:calc(100% - 230px);
		/*background:#cfc;*/
	}
	.formItemBox .items .errTxt{
		margin-top:10px;
	}
	.formItemBox .items .inputNotes{
		margin-top:7px;
	}
	/* ------------------------------------ */
	.formItemBox .items .ttlBox p{
		font-size:clamp(1rem, 1.2vw, 1.2rem);
		font-weight:400;
	}
	.formItemBox .items .bdyBox *{
		font-size:clamp(1rem, 1.2vw, 1.2rem);
	}
	/* ============================================ */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	textarea{
		font-family:'Zen Kaku Gothic New','Noto Sans JP',sans-serif;
		padding:7px 10px;
		border-bottom:0.5px solid #000;
	}
	input[type="radio"],
	input[type="checkbox"]{
		width:18px;
		height:18px;
		margin-right:5px;
		transform:translateY(-3px);
	}
	/* ============================================ */
	.formItemBox .items .bdyBox .innerBox{
		display:flex;
		width:100%;
		margin-top:3px;
	}
	.formItemBox .items .bdyBox > .innerBox:first-child{
		margin-top:0;
	}
	/* ------------------------------------ */
	.formItemBox .items.typeWrap .bdyBox{
		padding-top:11px;
	}
	.formItemBox .items.typeWrap .bdyBox label:nth-child(2){
		display:inline-block;
		margin-left:60px;
	}
	/* ------------------------------------ */
	.formItemBox .items.schoolWrap .ttlBox{
		padding-top:7px;
	}
	.formItemBox .items.schoolWrap .bdyBox .innerBox > p{
		width:3.7em;
		padding-top:7px;
	}
	.formItemBox .items.schoolWrap .bdyBox .innerBox > div{
		width:calc(100% - 3.7em);
	}
	/* ------------------------------------ */
	.formItemBox .items .bdyBox textarea{
		height:8em;
	}
	/* ============================================ */
	.submitItemBox{
		margin-top:50px;
	}
	.submitItemBox > p{
		text-align:center;
		font-size:clamp(0.9rem, 1.1vw, 1.1rem);
	}
	.submitItemBox > p > a{
		display:inline-block;
		color:#333;
		/*text-decoration:underline;*/
		border-bottom:0.5px solid #333;
		transition:all 0.2s ease-in-out;
		transform:scale(1);
	}
	.submitItemBox > p > a:hover{
		border-bottom:0.5px solid #fff;
		transform:scale(1.03);
	}
	/* ------------------------------------ */
	.submitItemBox .agreeWrap{
		text-align:center;
		margin-top:15px;
	}
	.submitItemBox .agreeWrap label{
		font-size:clamp(1.1rem, 1.4vw, 1.4rem);
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox{
		display:flex;
		justify-content:center;
		margin:15px 0 0 0;
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox .confirmBtn,
	.submitItemBox .btnsBox .submitBtn{
		-webkit-appearance:none;
		appearance:none;
		display:flex;
		justify-content:center;
		align-items:center;
		width:350px;
		height:60px;
		margin:0 auto 0;
		padding-block:0;
    padding-inline:0;
		border:1px solid #333;
		border-radius:0;
		background-image:none;
		background-color:#fff;
		cursor:pointer;
		transition:all 0.3s ease;
		transform:scale(1);
	}
	.submitItemBox .btnsBox .confirmBtn > p,
	.submitItemBox .btnsBox .submitBtn > p{
		width:100%;
		font-size:clamp(1.1rem, 1.4vw, 1.4rem);
		color:#333;
		position:relative;
		transition:all 0.3s ease;
	}
	.submitItemBox .btnsBox .confirmBtn > p::before,
	.submitItemBox .btnsBox .submitBtn > p::before{
		content:"→";
		display:flex;
		position:absolute;
		color:#333;
		top:50%;
		transform:translateY(-50%);
		right:0.7em;
		z-index:2;
		transition:all 0.3s ease;
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox .confirmBtn:hover,
	.submitItemBox .btnsBox .submitBtn:hover{
		background-color:var(--clr-blue);
		border:1px solid var(--clr-blue);
		color:#fff;
		/*border:1px solid var(--clr-blue);
		color:var(--clr-blue);*/
		transform:scale(1.05);
	}
	.submitItemBox .btnsBox .confirmBtn:hover > p,
	.submitItemBox .btnsBox .submitBtn:hover > p{
		color:#fff;
		/*color:var(--clr-blue);*/
	}
	.submitItemBox .btnsBox .confirmBtn:hover > p::before,
	.submitItemBox .btnsBox .submitBtn:hover > p::before{
		color:#fff;
		/*color:var(--clr-blue);*/
		right:0.2em;
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox .confirmBtn:disabled:hover{
		color:#333;
		background-color:#fff;
		border:1px solid #333;
		transform:scale(1);
	}
	.confirmBtn:disabled:hover > p{
		color:#333 !important;
	}
	.submitItemBox .btnsBox .confirmBtn:disabled > p::before{
		color:#333;
		right:0.7em;
	}

	/* ============================================ */
	/* ============================================ */
	.contact.confirm .formItemBox .items{
		padding-bottom:10px;
		border-bottom:1px solid #e5e5e5;
	}
	.contact.confirm .formItemBox .items .bdyBox,
	.contact.confirm .formItemBox .items .ttlBox{
		padding-top:0 !important;
	}
	.contact.confirm .formItemBox .items .bdyBox > p,
	.contact.confirm .formItemBox .items .ttlBox > p{
		line-height:1.4;
	}
	.contact.confirm .processingBox p{
		font-size:2rem;
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox .submitBtn{
		width:300px;
		margin:0 0 0 30px;
	}
	/* ------------------------------------ */
	.submitItemBox .btnsBox .returnBtn{
		display:flex;
		justify-content:center;
		align-items:center;
		width:300px;
		height:60px;

		font-size:1.3rem;
		color:#333;
		border:1px solid #333;
		position:relative;
		transition:all 0.3s ease;
		transform:scale(1);
		opacity:1;
	}
	.submitItemBox .btnsBox .returnBtn::before{
		content:"←";
		display:flex;
		position:absolute;
		color:#333;
		top:50%;
		transform:translateY(-50%);
		left:0.7em;
		transition:all 0.3s ease;
	}
	.submitItemBox .btnsBox .returnBtn:hover{
		transform:scale(1.05);
		opacity:0.5;
	}
	.submitItemBox .btnsBox .returnBtn:hover::before{
		left:0.2em;
	}

	/* ============================================ */
	/* ============================================ */
	.contact.complete .thanksMsgBox{
		display:flex;
		justify-content:center;
		align-items:center;
		padding:100px 0;
	}
	.contact.complete .thanksMsgBox div > p{
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		line-height:1.5;
	}
	

	/* ------------------------------------ */
}