@charset "utf-8";

.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}

.black-font {color: #000;}
.gray-font {color: #898989;}
.red-font {color: #E60012;}

.font12-14 {font-size: clamp(12px,2vw,14px);}
.font14-16 {font-size: clamp(14px,2vw,16px);}

.flex-box {
	display: flex;
	justify-content: center;
}

.con2 {
	flex-basis: 48%;
}

.con3 {
	flex-basis: calc(100% / 3);
}

.position-r {position: relative;}
.position-a {position: absolute;}


/*---br管理--*/
/*---スマホ時改行--*/
@media screen and (max-width: 560px) {
.pc-br{display:none;}
.tb-br{display:none;}
.sp-br{display:block;}
}
/*---タブレット時改行--*/
@media screen and (min-width:561px) and (max-width: 768px) {
.pc-br{display:none;}
.tb-br{display:block;}
.sp-br{display:none;}
}
/*---PC時改行--*/
@media screen and (min-width:769px) {
.pc-br{display:block;}
.tb-br{display:none;}
.sp-br{display:none;}
}


.mt10{margin-top: 1rem;}
.mt30{margin-top: 3rem;}
.mt40{margin-top: 4rem;}
.mt60{margin-top: 6rem;}
.mb10{margin-bottom: 1rem;}
.mb20{margin-bottom: 2rem;}
.mb30{margin-bottom: 3rem;}
.mb40{margin-bottom: 4rem;}
.mb60{margin-bottom: 6rem;}

.mrl-auto {
	margin-left: auto;
	margin-right: auto;
}
.mb10-30 {margin-bottom: clamp(1rem,2vw,3rem);}
.mb20-40 {margin-bottom: clamp(2rem,3vw,4rem);}
.mb30-80 {margin-bottom: clamp(3rem,7vw,8rem);}
.mb40-80 {margin-bottom: clamp(4rem,5.5vw,8rem);}
.mb100-140 {margin-bottom: clamp(10rem,10.2vw,14rem);}

.prl10 {
	padding-left: 1rem;
	padding-right: 1rem;
}

.pb10 {padding-bottom: 1rem;}
.pb20 {padding-bottom: 2rem;}


.pt20-40 {padding-top: clamp(2rem,3vw,4rem);}
.pt40-80 {padding-top: clamp(4rem,5.5vw,8rem);}
.pt50-150 {padding-top: clamp(5rem,12vw,15rem);}
.pb10-30 {padding-bottom: clamp(1rem,2vw,3rem);}
.pb20-40 {padding-bottom: clamp(2rem,3vw,4rem);}
.pb40-80 {padding-bottom: clamp(4rem,5.5vw,8rem);}
.pb100-140 {padding-bottom: clamp(10rem,10.2vw,14rem);}

/* 画像切り替え */
.pc-view{display: block;}
.sp-view{display: none;}
@media screen and (max-width: 768px) {
.pc-view{display: none;}
.sp-view{display: block;}
}

.no-wrap{display: inline-block!important;}


@media screen and (max-width: 768px) {
	.flex-box.reverse-768 {
		flex-direction: column-reverse;
	}
}

@media screen and (max-width: 560px) {
	.flex-box {
		flex-direction: column;
	}
	
	.flex-box.reverse-560 {
		flex-direction: column-reverse;
	}
}