/* viewport change - display none
----------------------------------------------- */
.u-spNone {display: block;
	visibility: visible;}

.u-pcNone {display: none;
	visibility: hidden;}

.u-black{
	color: var(--color-black) !important;}

.u-w1100{
	max-width: 1100px;
	margin: 0 auto;
}

.u-fontS{
	font-size: clamp(12px, 13 / 1440* 100vw, 13px);
}
.u-db{
	display: block;
}

.u-w80{
	width: 80%;
}
.u-w50{
	width: 50%;
}

.u-img{
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.u-disp{
	display: block;
}


/* =====SP===== */
@media screen and (max-width: 992px) {
	.u-spNone {	
		display: none;
		visibility: hidden;
	}
	.u-pcNone {	
		display: block;
		visibility: visible;
	}
	.u-spDisp{
		display: block !important;
	}
	.u-spInline{
		display: inline !important;
	}
}

.u-colorBlue{
	color: var(--color-blue);
}
.u-colorGreen{
	color: var(--color-green) !important;
}
.u-colorWhite{
	color: #fff !important;
}

/* Spacing
----------------------------------------------- */
:root {
	--spacing-block-00: clamp(0px, 0 / 1440 * 100vw, 0px);
	--spacing-block-05: clamp(5px, 5 / 1440 * 100vw, 5px);
	--spacing-block-10: clamp(10px, 10 / 1440 * 100vw, 10px);
	--spacing-block-15: clamp(10px, 15 / 1440 * 100vw, 15px);
	--spacing-block-20: clamp(20px, 20 / 1440 * 100vw, 20px);
	--spacing-block-30: clamp(30px, 30 / 1440 * 100vw, 30px);
	--spacing-block-40: clamp(32px, 40 / 1440 * 100vw, 40px);
	--spacing-block-50: clamp(40px, 50 / 1440 * 100vw, 50px);
	--spacing-block-60: clamp(50px, 60 / 1440 * 100vw, 60px);
	--spacing-block-70: clamp(60px, 70 / 1440 * 100vw, 70px);
	--spacing-block-80: clamp(70px, 80 / 1440 * 100vw, 80px);
	--spacing-block-90: clamp(70px, 90 / 1440 * 100vw, 90px);
	--spacing-block-100: clamp(80px, 100 / 1440 * 100vw, 100px);
	--spacing-block-110: clamp(80px, 110 / 1440 * 100vw, 110px);
	--spacing-block-120: clamp(80px, 120 / 1440 * 100vw, 120px);
	--spacing-block-140: clamp(80px, 140 / 1440 * 100vw, 140px);
	--spacing-block-220: clamp(80px, 220 / 1440 * 100vw, 220px);}

/* =====padding-top===== */
.u-pt10 {padding-top: var(--spacing-block-10) !important;}
.u-pt20 {padding-top: var(--spacing-block-20) !important;}
.u-pt30 {padding-top: var(--spacing-block-30) !important;}
.u-pt40 {padding-top: var(--spacing-block-40) !important;}
.u-pt50 {padding-top: var(--spacing-block-50) !important;}
.u-pt60 {padding-top: var(--spacing-block-60) !important;}
.u-pt70 {padding-top: var(--spacing-block-70) !important;}
.u-pt80 {padding-top: var(--spacing-block-80) !important;}
.u-pt90 {padding-top: var(--spacing-block-90) !important;}
.u-pt100 {padding-top: var(--spacing-block-100) !important;}
.u-pt110 {padding-top: var(--spacing-block-110) !important;}
.u-pt220 {padding-top: var(--spacing-block-220) !important;}

/* =====padding-bottom===== */

.u-pb10 {padding-bottom: var(--spacing-block-10) !important;}
.u-pb15 {padding-bottom: var(--spacing-block-15) !important;}
.u-pb20 {padding-bottom: var(--spacing-block-20) !important;}
.u-pb30 {padding-bottom: var(--spacing-block-30) !important;}
.u-pb40 {padding-bottom: var(--spacing-block-40) !important;}
.u-pb50 {padding-bottom: var(--spacing-block-50) !important;}
.u-pb60 {padding-bottom: var(--spacing-block-60) !important;}
.u-pb70 {padding-bottom: var(--spacing-block-70) !important;}
.u-pb80 {padding-bottom: var(--spacing-block-80) !important;}
.u-pb90 {padding-bottom: var(--spacing-block-90) !important;}
.u-pb100 {padding-bottom: var(--spacing-block-100) !important;}
.u-pb110 {padding-bottom: var(--spacing-block-110) !important;}
.u-pb120 {padding-bottom: var(--spacing-block-120) !important;}
.u-pb140 {padding-bottom: var(--spacing-block-140) !important;}
.u-pb220 {padding-bottom: var(--spacing-block-220) !important;}

.u-pl10 {padding-left: var(--spacing-block-10) !important;}
.u-pl20 {padding-left: var(--spacing-block-20) !important;}

.u-pr10 {padding-right: var(--spacing-block-10) !important;}
.u-pr20 {padding-right: var(--spacing-block-20) !important;}


/* =====margin-top===== */

.u-mt00 {margin-top: var(--spacing-block-00) !important;}
.u-mt10 {margin-top: var(--spacing-block-10) !important;}
.u-mt20 {margin-top: var(--spacing-block-20) !important;}
.u-mt30 {margin-top: var(--spacing-block-30) !important;}
.u-mt40 {margin-top: var(--spacing-block-40) !important;}
.u-mt50 {margin-top: var(--spacing-block-50) !important;}
.u-mt60 {margin-top: var(--spacing-block-60) !important;}
.u-mt70 {margin-top: var(--spacing-block-70) !important;}
.u-mt80 {margin-top: var(--spacing-block-80) !important;}
.u-mt90 {margin-top: var(--spacing-block-90) !important;}
.u-mt100 {margin-top: var(--spacing-block-100) !important;}
.u-mt110 {margin-top: var(--spacing-block-110) !important;}
.u-mt220 {margin-top: var(--spacing-block-220) !important;}

/* =====margin-bottom===== */

.u-mb00 {margin-bottom: var(--spacing-block-00) !important;}
.u-mb10 {margin-bottom: var(--spacing-block-10) !important;}
.u-mb20 {margin-bottom: var(--spacing-block-20) !important;}
.u-mb30 {margin-bottom: var(--spacing-block-30) !important;}
.u-mb40 {margin-bottom: var(--spacing-block-40) !important;}
.u-mb50 {margin-bottom: var(--spacing-block-50) !important;}
.u-mb60 {margin-bottom: var(--spacing-block-60) !important;}
.u-mb70 {margin-bottom: var(--spacing-block-70) !important;}
.u-mb80 {margin-bottom: var(--spacing-block-80) !important;}
.u-mb90 {margin-bottom: var(--spacing-block-90) !important;}
.u-mb100 {margin-bottom: var(--spacing-block-100) !important;}
.u-mb110 {margin-bottom: var(--spacing-block-110) !important;}
.u-mb220 {margin-bottom: var(--spacing-block-220) !important;}


/* =====margin-bottom===== */

.u-ml10 {margin-left: var(--spacing-block-10) !important;}
.u-ml20 {margin-left: var(--spacing-block-20) !important;}


.u-gap20{gap:var(--spacing-block-20)}
.u-gap40{gap:var(--spacing-block-40)}
.u-gap60{gap:var(--spacing-block-60)}

.u-txtCenter{
	text-align: center;
	display: block;
    width: 100%;
}
.u-txtRight{
	text-align: right;}

.u-strong{
	font-weight: bold;}


.u-free::after{
	content:"";
	display: block;
	top:-20px;
	background: url(../img/icon-free.png) no-repeat;
	width: 60px;
	right: 10%;
	height: 60px;
	position: absolute;
	background-size: 100% auto;
}

.u-btlr{
	border-top-left-radius:10px;
}
.u-btrr{
	border-top-right-radius:10px;
}

.u-hover{
	transition-duration: 0.5s;
}

.u-hover:hover{
	opacity: 0.8;
}

/*====================================================================================================
SP
====================================================================================================*/

@media screen and (max-width: 992px) {
	
	.u-sp-mb20 {margin-bottom: var(--spacing-block-20) !important;}
	.u-sp-mb40 {margin-bottom: var(--spacing-block-40) !important;}

	.u-sp-pb00 {padding-bottom: var(--spacing-block-00) !important;}
	.u-sp-pb20 {padding-bottom: var(--spacing-block-20) !important;}
	.u-sp-pb40 {padding-bottom: var(--spacing-block-40) !important;}

	.u-sp-gap20{gap:var(--spacing-block-20)}
	.u-sp-gap40{gap:var(--spacing-block-40)}
	.u-sp-gap60{gap:var(--spacing-block-60)}


	.u-sp-w80{
		width: 80%;
	}
	.u-sp-w5Img{
		width:5%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		padding: 10px 0 10px;
	}

	.u-sp-w50Img{
		width: 50%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		height: auto;
	}
	
	.u-sp-img{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

	.u-sp-txtLeft{
		text-align: left !important;
		display: block;
		width: 100%;
	}

	.u-sp-font18{
		font-size: 18px;
		letter-spacing: 0em;
	}

	.u-sp-font20{
		font-size: 20px;
		letter-spacing: 0em;
	}


}

/*====================================================================================================
strengths SP
====================================================================================================*/

@media screen and (max-width: 992px) {
	.u-btlr{
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	}
	.u-btrr{
		border-top-right-radius:10px;
		border-top-left-radius:10px;
	}

}