@charset "utf-8";

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

@media screen and (max-width:767px){
	.blockDescBox{
		padding:0 2%;
	}
	.blockDescBox > p:first-child{
		font-size:4vw;
		padding-bottom:2%;
	}
	.blockDescBox > p:not(:first-child){
		font-size:3.5vw;
		margin-top:1%;
		padding-left:1em;
		text-indent:-1em;
		line-height:1.3;
	}
	/* ------------------------------------ */
	.bnrBox{
		padding:8% 2% 0 2%;
		margin-top:5%;
		border-top:1px solid #aaa;
	}

	.bnrBox > a{
		display:flex;
		flex-direction:column;
		width:100%;
		margin-top:8%;
		transition:all 0.2s ease-in-out;
		transform:scale(1);
		opacity:1;
	}
	.bnrBox > a:hover{
		transform:scale(1.03);
		opacity:0.8;
	}
	.bnrBox > a:first-child{
		margin-top:0;
	}
	.bnrBox > a .imgBox{
		display:flex;
		justify-content:center;
		align-items:center;
		background-color:#f3f3f3;
	}
	.bnrBox > a .imgBox > div{
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		color:#fff;
		font-size:4vw;
		background-color:#333;
	}
	/*.bnrBox > a:nth-child(1) .imgBox > div{
		height:35vw;
	}
	.bnrBox > a:nth-child(2) .imgBox > div{
		height:55vw;
	}
	.bnrBox > a:nth-child(3) .imgBox > div{
		height:70vw;
	}*/
	.bnrBox > a > p{
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		padding:10px 0;
		color:#fff;
		font-size:3.5vw;
		position:relative;
		background-color:var(--themeColorGreen);
		border-radius:0 0 7px 7px;
	}
	.bnrBox > a > p::before{
		content:"\e315";
		font-family:"Material Symbols Outlined";
		font-size:5vw;
		display:block;
		position:absolute;
		right:-0.1em;
		top:50%;
		transform:translateY(-46%);
		font-variation-settings:'wght' 200;
	}

	/* ============================================ */
	.block.second .blockContainer .blockInner > .blockTtl{
		text-align:center;
	}
	.block.second .blockContainer .blockInner > p{
		margin-top:5%;
		font-size:4.0vw;
		text-align:center;
		line-height:1.4;
	}
	.block.second .blockContainer .blockInner > p span{
		font-size:4.5vw;
		font-weight:500;
	}

}

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

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

@media screen and (min-width:768px){
	.blockDescBox{
		padding:0 15px;
	}
	.blockDescBox > p:first-child{
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		padding-bottom:5px;
	}
	.blockDescBox > p:not(:first-child){
		font-size:clamp(0.8rem, 1.2vw, 1.2rem);
		margin-top:5px;
		padding-left:1em;
		text-indent:-1em;
		line-height:1.3;
	}
	/* ------------------------------------ */
	.bnrBox{
		display:flex;
		flex-wrap:wrap;
		padding:20px 15px 0 15px;
		margin-top:20px;
		border-top:1px solid #aaa;
	}
	.bnrBox > a{
		display:flex;
		flex-direction:column;
		width:31%;
		margin-left:3.5%;
		transition:all 0.2s ease-in-out;
		transform:scale(1);
		opacity:1;
	}
	.bnrBox > a:hover{
		transform:scale(1.03);
		opacity:0.8;
	}
	.bnrBox > a:first-child{
		margin-left:0;
	}
	.bnrBox > a .imgBox{
		display:flex;
		justify-content:center;
		align-items:center;
		background-color:#f3f3f3;
		position:relative;
	}
	.bnrBox > a .imgBox::before{
		content:"";
    display:block;
    padding-top:100%;
	}
	.bnrBox > a .imgBox > div{
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		color:#fff;
		font-size:4vw;
		background-color:#333;
	}
	/*.bnrBox > a:nth-child(1) .imgBox > div{
		height:55%;
	}
	.bnrBox > a:nth-child(2) .imgBox > div{
		height:80%;
	}
	.bnrBox > a:nth-child(3) .imgBox > div{
		height:100%;
	}*/
	.bnrBox > a > p{
		display:flex;
		justify-content:center;
		align-items:center;
		width:100%;
		padding:10px 0;
		color:#fff;
		font-size:clamp(0.8rem, 1.2vw, 1.2rem);
		position:relative;
		background-color:var(--themeColorGreen);
		border-radius:0 0 7px 7px;
	}
	.bnrBox > a > p::before{
		content:"\e315";
		font-family:"Material Symbols Outlined";
		font-size:clamp(1.0rem, 1.4vw, 1.4rem);
		display:block;
		position:absolute;
		right:-0.15em;
		top:50%;
		transform:translateY(-46%);
		font-variation-settings:'wght' 300;
	}

	/* ============================================ */
	.block.second .blockContainer .blockInner > .blockTtl{
		text-align:center;
	}
	.block.second .blockContainer .blockInner > p{
		margin-top:30px;
		font-size:clamp(1.0rem, 1.5vw, 1.5rem);
		text-align:center;
	}
	.block.second .blockContainer .blockInner > p span{
		font-size:clamp(1.3rem, 1.8vw, 1.8rem);
		font-weight:500;
		line-height:1.6;
	}
}