@charset "utf-8";

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea{
	-webkit-appearance:none;
	appearance:none;
	border:none;
}
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea{
	width:100%;
	padding:0.3em 0.7em;
	font-family:'Zen Kaku Gothic New',sans-serif;
}

.block .wrapper > .inner .btnsWrap .confirmBtn:disabled{
	opacity:0.2;
	cursor:not-allowed;
}
::placeholder{
	color:#afafaf;
	font-weight:200;
}
.ppBlock{
	visibility:hidden;
	opacity:0;
	transition: all 0.3s ease;
}
.ppBlock.open{
	visibility:visible;
	opacity:1;
}


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

@media screen and (max-width:767px){
	/* ///////////////////////////////////////////////////// */
	/* ============================================ */
	.block .wrapper > .inner .formWrap{
		margin:12% auto 0;
	}

	/* ============================================ */
	.block .wrapper > .inner .formWrap .item{
		margin-top:6%;
	}
	.block .wrapper > .inner .formWrap > div:first-child{
		margin-right:0;
	}
 
	/* ============================================ */
	.block .wrapper > .inner .formWrap .item .itemInner{}

	/* ------------------------------------ */
	.block .wrapper > .inner .formWrap .item .itemInner .ttlTxt{
		font-size:1.1rem;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .formWrap .item .itemInner .inputBox{
		margin-top:2%;
	}
	form input[type="text"],
	form input[type="email"],
	form input[type="tel"],
	form textarea{
		font-size:1.1rem;
	}
	form input[type="checkbox"]{
		width:17px;
		height:17px;
		transform:translate(0,-17%);
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .formWrap .item .itemInner .inputBox textarea{
		height:8em;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .ppBox{
		width:100%;
		display:flex;
		flex-direction:column;
		align-items:center;

		margin-top:10%;
		padding-top:3%;
		border-top:1px solid #aaa;
	}
	.block .wrapper > .inner .ppBox .ppClickTxt{
		display:flex;
		justify-content:center;
		align-items:center;
		font-size:1.1rem;
		cursor:pointer;
	}
	.block .wrapper > .inner .ppBox .ppClickTxt .icon_da{
		font-size:0.8rem;
		font-weight:100;
		position:relative;
		top:1.5px;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .ppBox .ppCheck{
		display:block;
		margin-top:2%;
		font-size:1.2rem;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .btnsWrap{
		display:flex;
		justify-content:center;
		margin:15px 0 0 0;
	}
	.block .wrapper > .inner .btnsWrap .confirmBtn{
		-webkit-appearance:none;
		appearance:none;
		clip-path: polygon(95% 0, 100% 25%, 100% 100%, 0 100%, 0 0);

		display:inline-block;
		width:70%;
		max-width:300px;
		padding:20px 0;
		color:#ffffff;
		line-height:1;
		font-size:1.2rem;
		border:none;
		border-radius:0;
		background-image:none;
		background-color:var(--accentColor);

		transition: all 0.2s ease;
	}
	.block .wrapper > .inner .btnsWrap .confirmBtn:active{
		transform: scale(90%);
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .formWrap .item .errMsg{
		margin-top:2%;
		color:#ff0000;
		font-size:1.0rem;
	}


	/* ///////////////////////////////////////////////////// */
	/* ///////////////////////////////////////////////////// */
	/* ============================================ */
	/* ------------------------------------ */
	.confirmPage .block .wrapper > .inner .formWrap .item{
		padding:0 2% 2% 2%;
		border-bottom:1px solid #000000;
	}
	.confirmPage .block .wrapper > .inner .formWrap .item .itemInner .inputBox{
		margin-top:3%;
	}
	.confirmPage .block .wrapper > .inner .formWrap .item .itemInner .inputBox p{
		font-size:1.0rem;
	}

	/* ============================================ */
	.confirmPage .block .wrapper > .inner .btnsWrap{
		flex-direction:column;
		align-items:center;
		margin-top:8%;
	}
	.confirmPage .block .wrapper > .inner .btnsWrap .returnBtn{
		display:inline-block;
		width:63%;
		max-width:280px;
		padding:15px 0;
		font-size:1.3rem;
		color:#ffffff;
		line-height:1;
		text-align:center;
		background-color:#aaa;
		clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 25%);

		transition: all 0.2s ease;
	}
	.confirmPage .block .wrapper > .inner .btnsWrap .submitBtn{
		-webkit-appearance:none;
		appearance:none;
		clip-path: polygon(95% 0, 100% 25%, 100% 100%, 0 100%, 0 0);

		display:inline-block;
		width:70%;
		max-width:300px;
		margin-top:3%;
		padding:20px 0;
		color:#ffffff;
		line-height:1;
		font-size:1.3rem;
		border:none;
		border-radius:0;
		background-image:none;
		background-color:var(--accentColor);

		cursor:pointer;
		transition: all 0.2s ease;
	}

}

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

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

@media screen and (min-width:768px){
	/* ============================================ */
	.block .wrapper > .inner .formWrap{
		display:flex;
		flex-wrap:wrap;
		width:95%;
		margin:60px auto 0;
	}

	/* ============================================ */
	.block .wrapper > .inner .formWrap .item{
		width:48%;
		margin-top:35px;
	}
	.block .wrapper > .inner .formWrap > div:nth-child(odd){
		margin-right:4%;
	}
	.block .wrapper > .inner .formWrap .item:nth-child(-n+2){
		margin-top:0;
	}
	.block .wrapper > .inner .formWrap .item.w100{
		width:100%;
		margin-right:0;
	}

	/* ============================================ */
	.block .wrapper > .inner .formWrap .item .itemInner{}

	/* ------------------------------------ */
	.block .wrapper > .inner .formWrap .item .itemInner .ttlTxt{
		font-size:1.2rem;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .formWrap .item .itemInner .inputBox{
		margin-top:10px;
	}
	form input[type="text"],
	form input[type="email"],
	form input[type="tel"],
	form textarea{
		font-size:1.2rem;
	}
	form input[type="checkbox"]{
		width:17px;
		height:17px;
		transform:translate(0,-20%);
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .formWrap .item .itemInner .inputBox textarea{
		height:8em;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .ppBox{
		width:100%;
		display:flex;
		flex-direction:column;
		align-items:center;

		margin-top:60px;
		padding-top:20px;
		border-top:1px solid #aaa;
	}
	.block .wrapper > .inner .ppBox .ppClickTxt{
		display:flex;
		justify-content:center;
		align-items:center;
		font-size:1.1rem;
		cursor:pointer;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .ppBox .ppClickTxt .icon_da{
		font-size:0.8rem;
		font-weight:100;
		position:relative;
		top:1.5px;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .ppBox .ppCheck{
		display:block;
		margin-top:10px;
		font-size:1.2rem;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .btnsWrap{
		display:flex;
		justify-content:center;
		margin:15px 0 0 0;
	}
	.block .wrapper > .inner .btnsWrap .confirmBtn{
		-webkit-appearance:none;
		appearance:none;
		clip-path: polygon(95% 0, 100% 25%, 100% 100%, 0 100%, 0 0);

		display:inline-block;
		width:60%;
		max-width:350px;
		padding:20px 0;
		color:#ffffff;
		line-height:1;
		font-size:1.3rem;
		border:none;
		border-radius:0;
		background-image:none;
		background-color:var(--accentColor);

		transition: all 0.2s ease;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .formWrap .item .errMsg{
		margin-top:7px;
		color:#ff0000;
		font-size:1.1rem;
	}


	/* ///////////////////////////////////////////////////// */
	/* ///////////////////////////////////////////////////// */
	/* ============================================ */
	/* ------------------------------------ */
	.confirmPage .block .wrapper > .inner .formWrap .item{
		padding:0 10px 10px 10px;
		border-bottom:1px solid #000000;
	}
	.confirmPage .block .wrapper > .inner .formWrap .item .itemInner .inputBox{
		margin-top:15px;
	}
	.confirmPage .block .wrapper > .inner .formWrap .item .itemInner .inputBox p{
		font-size:1.0rem;
	}

	/* ============================================ */
	.confirmPage .block .wrapper > .inner .btnsWrap{
		margin-top:40px;
	}
	.confirmPage .block .wrapper > .inner .btnsWrap .returnBtn{
		display:inline-block;
		width:40%;
		max-width:300px;
		margin-right:5%;
		padding:20px 0;
		font-size:1.3rem;
		color:#ffffff;
		line-height:1;
		text-align:center;
		background-color:#aaa;
		clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 25%);

		transition: all 0.2s ease;
	}
	.confirmPage .block .wrapper > .inner .btnsWrap .submitBtn{
		-webkit-appearance:none;
		appearance:none;
		clip-path: polygon(95% 0, 100% 25%, 100% 100%, 0 100%, 0 0);

		display:inline-block;
		width:40%;
		max-width:300px;
		padding:20px 0;
		color:#ffffff;
		line-height:1;
		font-size:1.3rem;
		border:none;
		border-radius:0;
		background-image:none;
		background-color:var(--accentColor);

		cursor:pointer;
		transition: all 0.2s ease;
	}

	/* ------------------------------------ */
	.block .wrapper > .inner .btnsWrap .confirmBtn:hover,
	.confirmPage .block .wrapper > .inner .btnsWrap .returnBtn:hover,
	.confirmPage .block .wrapper > .inner .btnsWrap .submitBtn:hover{
		transform: scale(105%);
	}
	.block .wrapper > .inner .btnsWrap .confirmBtn:active,
	.confirmPage .block .wrapper > .inner .btnsWrap .returnBtn:active,
	.confirmPage .block .wrapper > .inner .btnsWrap .submitBtn:active{
		transform: scale(100%);
	}
	.block .wrapper > .inner .btnsWrap .confirmBtn:disabled:hover{
		transform: scale(100%);
	}


}