@charset "utf-8";



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

@media screen and (max-width:767px){

	/* ///////////////////////////////////////////////////////////// */
	/* =================================================== */
	/* ------------------------------------------ */
	.block.first{
		padding:10% 0;
	}
	.block.first > .inner .pageTtlBox{
		padding:0;
		border-bottom:2px solid #aaaaaa;
	}
	.block.first > .inner .pageTtlBox h1{
		display:inline-block;
		padding:0 0 10% 0;
		font-size:clamp(1.4rem, 6vw, 2.8rem);
		border-bottom:2px solid var(--mainColor);
		position:relative;
		top:2px;
	}

	/* =================================================== */
	.block.first > .inner .ecBox .items{
		display:flex;
		flex-direction:column;
		align-items:center;
		margin-top:12%;
	}
	.block.first > .inner .ecBox .items .logoBox{
		display:flex;
		align-items:center;
		justify-content:center;
		width:60%;
		margin:0 auto 0;
		border:1px solid #eee;
	}
	.block.first > .inner .ecBox .items .logoBox img{
		width:90%;
	}
	.block.first > .inner .ecBox .items .txtBox{}
	.block.first > .inner .ecBox .items .txtBox h2{
		font-weight:400;
		font-size:7vw;
		text-align:center;
		margin-top:5%;
	}
	.block.first > .inner .ecBox .items .txtBox .urlTxt{
		margin-top:2%;
		font-size:3.4vw;
		text-align:center
	}
	.block.first > .inner .ecBox .items .txtBox .descTxt{
		margin-top:5%;
		font-size:4vw;
		line-height:1.3;
	}
	.block.first > .inner .ecBox .items .txtBox a{
		display:flex;
		justify-content:center;
		position:relative;
		width:80%;
		padding:17px 0;
		margin:6% auto 0;
		font-size:4.5vw;
		color:#fff;
		border-radius:10px;
		background:var(--blueGradation);

		transition:all 0.3s ease-in-out;
		transform:scale(1);
		opacity:1;
	}
	.block.first > .inner .ecBox .items .txtBox a::before{
		content:"\e89e";
		font-family:"Material Symbols Outlined";
		display:block;
		font-size:4.5vw;
		font-weight:300;
		position:absolute;
		right:0.4em;
		top:50%;
		transform:translateY(-45%);
	}
}

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

@media screen and (min-width:768px){

	/* ///////////////////////////////////////////////////////////// */
	/* =================================================== */
	/* ------------------------------------------ */
	.block.first{
		padding:0 0 100px 0;
	}
	.block.first > .inner .pageTtlBox{
		padding:0 0;
		border-bottom:3px solid #aaaaaa;
	}
	.block.first > .inner .pageTtlBox h1{
		display:inline-block;
		/*align-items:center;
		width:auto;*/
		padding:100px 0 100px 0;
		font-size:clamp(1.5rem, 4.5vw, 2.8rem);
		border-bottom:3px solid var(--mainColor);
		position:relative;
		top:3px;
	}

	/* =================================================== */
	.block.first > .inner .ecBox .items{
		display:flex;
		align-items:center;
		margin-top:70px;
	}
	.block.first > .inner .ecBox .items .logoBox{
		display:flex;
		align-items:center;
		justify-content:center;
		width:320px;
		border:1px solid #eee;
	}
	.block.first > .inner .ecBox .items .logoBox img{
		width:90%;
	}
	.block.first > .inner .ecBox .items .txtBox{
		width:calc(100% - 320px);
		padding-left:50px;
	}

	.block.first > .inner .ecBox .items .txtBox h2{
		font-weight:400;
		font-size:clamp(1.7rem, 2.5vw, 2.5rem);
	}
	.block.first > .inner .ecBox .items .txtBox .urlTxt{
		margin-top:10px;
		font-size:clamp(0.9rem, 1.2vw, 1.2rem);
	}
	.block.first > .inner .ecBox .items .txtBox .descTxt{
		margin-top:20px;
		font-size:clamp(1.2rem, 1.6vw, 1.6rem);
		line-height:1.3;
	}
	.block.first > .inner .ecBox .items .txtBox a{
		display:flex;
		justify-content:center;
		position:relative;
		width:400px;
		padding:20px 0;
		margin-top:20px;
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		color:#fff;
		border-radius:10px;
		background:var(--blueGradation);

		transition:all 0.3s ease-in-out;
		transform:scale(1);
		opacity:1;
	}
	.block.first > .inner .ecBox .items .txtBox a::before{
		content:"\e89e";
		font-family:"Material Symbols Outlined";
		display:block;
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		font-weight:300;
		position:absolute;
		right:0.4em;
		top:50%;
		transform:translateY(-45%);
	}
	.block.first > .inner .ecBox .items .txtBox a:hover{
		transform:scale(1.03);
		opacity:0.6;
	}
}