@charset "utf-8";


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

@media screen and (max-width:767px){
	.block.first .blockContainer{
		padding-block:0;
	}

	.formZone > .items{
		margin-top:5%;
	}
	.formZone > .items .ttlBox{
		padding:0;
	}
	/* ============================================ */
	.formZone .errorBox{
		display:flex;
		flex-direction:column;
		align-items:center;
		max-width:100%;
		margin:8% auto 0;
	}
	.formZone .errorBox div > p{
		font-size: clamp(0.9rem, 1.2vw, 1.2rem);
		color:var(--themeColorRed);
		padding-left:1em;
		text-indent:-1em;
	}
	.formZone > .formBtmBox{
		margin-top:8%;
	}
	/* ============================================ */
	.formZone > .formBtmBox .btnWrap .submitBox .toConfirmBtn{
		background-color:var(--themeColorOrange);
		padding:0;
	}
	/* ============================================ */
	.passRiminder{
		text-align:center;
		margin-top:6%;
	}
	.passRiminder a{
		font-size:4vw;
		text-decoration:underline;
		color:var(--themeColorBlue);
	}

}

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

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

@media screen and (min-width:768px){
	.block.first .blockContainer{
		padding-block:0;
	}
	/* ============================================ */
	.formZone{
		max-width:750px;
		margin:0 auto 0;
	}
	.formZone > .items{
		margin-top:20px;
		padding:0 1.5em;
	}
	.formZone > .items:first-child{
		margin-top:0;
	}
	.loginPage .formZone > .items .ttlBox{
		padding:0;
		max-width:200px;
		min-width:150px;
	}
	.passRiminderPage .formZone > .items .ttlBox{
		padding:0;
		width:20vw;
		min-width:170px;
		max-width:230px;
	}
	.passRiminderPage .formZone > .items .ttlBox p{
		padding-top:0.7em;
	}

	/* ============================================ */
	.formZone .errorBox{
		display:flex;
		flex-direction:column;
		align-items:center;
		max-width:90%;
		margin:40px auto 0;
	}
	.formZone .errorBox div > p{
		font-size: clamp(0.9rem, 1.2vw, 1.2rem);
		color:var(--themeColorRed);
		padding-left:1em;
		text-indent:-1em;
	}
	/* ============================================ */
	.formZone > .formBtmBox .btnWrap .submitBox{
		min-width:auto;
		width:50%;
	}
	.formZone > .formBtmBox .btnWrap .submitBox::before{
    padding-top:15%;
	}
	.formZone > .formBtmBox .btnWrap .submitBox .toConfirmBtn{
		background-color:var(--themeColorOrange);
		padding:0;
	}
	/* ============================================ */
	.passRiminder{
		text-align:center;
		margin-top:20px;
	}
	.passRiminder a{
		font-size:clamp(0.9rem, 1.2vw, 1.2rem);
		color:var(--themeColorBlue);
		text-decoration:underline;

		transition:all 0.2s ease-in-out;
		opacity:1;
		transform:scale(1);
	}
	.passRiminder a:hover{
		display:block;
		opacity:0.7;
		transform:scale(1.04);
	}
	/* ============================================ */
	.passRiminderPage .formZone.complete{
		max-width:none;
	}

}