@charset "utf-8";

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

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

	/* ------------------------------------ */
	.pageTtlBox .txtBox .stepNav{
		display:flex;
		width:fit-content;
		margin-top:3%;
		padding:2.5% 6%;
		background-color:#fff;
		border-radius:10px;
	}
	.pageTtlBox .txtBox .stepNav li{
		margin-right:8vw;
		position:relative;
	}
	.pageTtlBox .txtBox .stepNav li::after{
		content:"\ea50";
		font-family:"Material Symbols Outlined";
		font-size:5vw;
		position:absolute;
		top:50%;
		right:-6.5vw;
		transform:translateY(-45%);
	  font-variation-settings:'wght' 500;
		color:#cccccc;
	}
	.pageTtlBox .txtBox .stepNav li:last-child::after{
		display:none;
	}
	.pageTtlBox .txtBox .stepNav li:last-child{
		margin-right:0;
	}
	.pageTtlBox .txtBox .stepNav li p{
		font-size:3.5vw;
		font-weight:800;
		color:#cccccc;
	}
	/* ------------------------------------ */
	.pageTtlBox .txtBox .stepNav li.current::after{
		color:var(--themeColorBlue);
	}
	.pageTtlBox .txtBox .stepNav li.current p{
		color:var(--themeColorBlue);
	}

	/* ============================================ */
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox{
		padding-bottom:4%;
		margin-bottom:4%;
		border-bottom:1px solid #ccc;
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p{
		margin-top:2%;
		font-size:3.5vw;
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p span{
		display:inline-block;
		font-size:inherit;
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p span.redFnt{
		padding-inline:0.1em;
		color:var(--themeColorRed);
		font-weight:600;
		font-size:4vw;
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p:first-child{
		margin-top:0;
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p.msgTxt{
		font-size:4vw;
		font-style:italic;
		font-weight:600;
		line-height:1.3;
	}
}

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

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

@media screen and (min-width:768px){
	.pageTtlBox .txtBox{
		/*flex-direction:row !important;*/
		justify-content:center;
	}
	.pageTtlBox .txtBox h1{
		height:fit-content;
		top:0 !important;
	}
	/* ------------------------------------ */
	.pageTtlBox .txtBox .stepNav{
		display:flex;
		height:fit-content;
		margin-top:30px;
		padding:15px 40px;
		background-color:#fff;
		border-radius:10px;
	}
	.pageTtlBox .txtBox .stepNav li{
		margin-right:50px;
		position:relative;
	}
	.pageTtlBox .txtBox .stepNav li::after{
		content:"\ea50";
		font-family:"Material Symbols Outlined";
		font-size:clamp(1.6rem, 2.2vw, 2.2rem);
		position:absolute;
		top:50%;
		right:-1.2em;
		transform:translateY(-45%);
	  font-variation-settings:'wght' 600;
		color:#cccccc;
	}
	.pageTtlBox .txtBox .stepNav li:last-child::after{
		display:none;
	}
	.pageTtlBox .txtBox .stepNav li:last-child{
		margin-right:0;
	}
	.pageTtlBox .txtBox .stepNav li p{
		font-size:clamp(1.4rem, 1.8vw, 1.8rem);
		font-weight:800;
		color:#cccccc;
	}
	/* ------------------------------------ */
	.pageTtlBox .txtBox .stepNav li.current::after{
		color:var(--themeColorBlue);
	}
	.pageTtlBox .txtBox .stepNav li.current p{
		color:var(--themeColorBlue);
	}
	/* ============================================ */
	.block.first .blockContainer{
		padding-block:0;
	}
	.block.first .blockContainer .blockInner .blockLeadTxt{
		margin-top:0;
	}

	/* ============================================ */
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox{
		padding-bottom:10px;
		margin-bottom:10px;
		border-bottom:1px solid #ccc;
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p{
		margin-top:10px;
		font-size:clamp(0.9rem, 1.2vw, 1.2rem);
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p span{
		display:inline-block;
		font-size:inherit;
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p span.redFnt{
		padding-inline:0.1em;
		color:var(--themeColorRed);
		font-weight:600;
		font-size:clamp(1.1rem, 1.4vw, 1.4rem);
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p:first-child{
		margin-top:0;
	}
	.formZone > .items.recommendCategoryBox > .bdyBox .notesBox > p.msgTxt{
		font-size:clamp(1.1rem, 1.4vw, 1.4rem);
		font-style:italic;
		font-weight:600;
	}

}