@charset "utf-8";

#crumb{
	margin-bottom: 60px;
}

#sec_useful ul li.js-fadein{
	opacity: 1;
	transform: translateY(0);
}

#keyVisual{
	aspect-ratio: 1920/380;
	background: url("/themes/site/strength/img/keyvisual_pc.jpg") no-repeat center;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 380px;
}

#keyVisual .pageTtl{
	max-width: 1100px;
	width: calc(100% - 36px);
	text-align: left;
	margin: 0 auto;
}
#contentsBlock section{
	position: relative;
	padding: 100px 0;
}

#contentsBlock section .contents{
	width: calc(100% - 66px);
}

#contentsBlock .flexBox{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#contentsBlock .flexBox figure{
	max-width: 643px;
	overflow: hidden;
}

#contentsBlock .flexBox .txtBox{
	text-align: left;
	max-width: 514px;
	width: 48%;
}

#contentsBlock .txtBox .ttl{
	font-size: 3.2rem;
	color: #032E83;
}
#contentsBlock .txtBox .ttl img{
	display: inline-block;
	margin-top: 9px;
}

#contentsBlock .txtBox .lead{
	font-size: 3.2rem;
	font-weight: 700;
	letter-spacing: -0.05em;
	margin-top: 15px;
}

#contentsBlock .txtBox .txt{
	font-weight: 500;
	margin-top: 20px;
	line-height: 1.75;
}

#contentsBlock .listBox{
	margin-top: 50px;
}
#contentsBlock .listBox li{
	background: #F1F1F1;
	color: #032E83;
	font-size: 4.2rem;
	font-weight: 900;
	line-height: 1;
	border-radius: 10px;
	width: calc(100% / 3 - 16px);
	padding: 0 10px 11px;
	letter-spacing: 0.01em;
}
#contentsBlock .listBox li span{
	display: inline-block;
	line-height: 1;
}
#contentsBlock .listBox li .min {
	font-size: 2rem;
	font-weight: 700;
}
#contentsBlock .listBox li .min-more{
	font-size: 1.2rem;
	font-weight: 700;
}
#contentsBlock .listBox li .num{
	font-family: "Montserrat", serif;
	font-size: 8rem;
	font-weight: 600;
	letter-spacing: 0;
}

@media screen and (max-width: 1280px){
	#keyVisual{
		background-position: 68% center;
	}
}
@media screen and (max-width: 1279px){
	#contentsBlock .flexBox figure{
		width: 52%;
	}
	#contentsBlock .listBox li{
		font-size: 2.8rem;
		width: calc(100% / 3 - 10px);
	}
	#contentsBlock .listBox li .min{
		font-size: 1.6rem;
	}
	#contentsBlock .listBox li .num{
		font-size: 5.2rem;
	}
}
@media screen and (max-width: 800px){
	#contentsBlock .flexBox .txtBox{
		width: 100%;
		max-width: inherit;
	}
	#contentsBlock .flexBox figure{
		width: 100%;
	}
	#contentsBlock .listBox{
		margin-top: 19px;
	}
}


@media screen and (max-width: 767px){
	#crumb{
		margin-bottom: 40px;
	}
	#keyVisual{
		aspect-ratio: 750/342;
		background: url("/themes/site/strength/img/keyvisual_sp.jpg") no-repeat center / cover;
		height: auto;
		min-height: 171px;
	}
	#keyVisual{
		aspect-ratio: 750/342;
		height: auto;
		min-height: 171px;
	}
	#keyVisual .pageTtl{
		text-align: center;
		padding-top: 10%;
	}
	#keyVisual .pageTtl img{
		max-width: 330px;
		width: 100%;
	}
	
	#contentsBlock section{
		padding: 60px 0;
	}
	
	#contentsBlock .txtBox .ttl{
		font-size: 2rem;
	}
	
	#contentsBlock .txtBox .lead{
		margin-top: 12px;
		font-size: 2.2rem;
		line-height: 1.455;
	}
	#contentsBlock .txtBox .txt{
		margin-top: 19px;
		font-weight: 700;
	}
	
	#contentsBlock .listBox{
		display: block;
	}
	#contentsBlock .listBox li{
		font-size: 3.6rem;
		padding-bottom: 15px;
		width: 100%;
	}
	#contentsBlock .listBox li + li{
		margin-top: 9px;
	}
	#contentsBlock .listBox li .num{
		font-size: 6.9rem;
	}
	#contentsBlock .listBox li .min-more{
		font-size: 1rem;
	}
	
	
}


/* ------------------------------------------------------------------------ */

/*  #sec_binsoku

/* ------------------------------------------------------------------------ */
#contentsBlock #sec_binsoku{
	padding-top: 0;
}
#sec_binsoku .flexBox .txtBox{
	margin-right: 76px;
}
#sec_binsoku .flexBox figure{
	margin-right: -67px;
}
#sec_binsoku .listBox li .num{
	margin: 0 5px;
}

@media screen and (max-width: 1279px){
	#sec_binsoku .flexBox figure{
		margin-right: -18px;
	}
	#sec_binsoku .flexBox .txtBox{
		margin-right: 36px;
	}
}
@media screen and (max-width: 800px){
	#sec_binsoku .flexBox{
		display: block;
	}
	#sec_binsoku .flexBox .txtBox{
		margin-right: 0;
	}
	#sec_binsoku .flexBox figure{
		margin: 7px -16px 0;
		max-width: inherit;
		width: calc(100% + 32px);
	}
}

/* ------------------------------------------------------------------------ */

/*  #sec_binwan

/* ------------------------------------------------------------------------ */

#sec_binwan{
	background: #F1F1F1;
}

#sec_binwan .flexBox figure{
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	margin-left: -133px;
}

#sec_binwan .flexBox .txtBox{
	margin-left: 76px;
}

#sec_binwan .listBox li{
	background: #fff;
	position: relative;
	padding-bottom: 24px;
}

#sec_binwan .listBox li .num{
	margin-right: 5px;
}

@media screen and (max-width: 1279px){
	#sec_binwan .flexBox figure{
		margin-left: -33px;
	}
	#sec_binwan .flexBox .txtBox{
		margin-left: 36px;
	}
}
@media screen and (max-width: 800px){
	#sec_binwan .flexBox{
		flex-direction: column-reverse;
	}
	#sec_binwan .flexBox .txtBox{
		margin: 0 auto;
	}
	#sec_binwan .flexBox figure{
		margin-top: 24px;
		text-align: left;
		margin-right: auto;
		width: calc(100% - -49px);
	}
	
	#sec_binwan .listBox{
		margin-top: 25px;
	}
}
@media screen and (max-width: 767px){
	#sec_binwan .listBox li:first-child{
		padding-bottom: 15px;
	}
}
@media screen and (max-width: 370px){
	#sec_binwan .listBox li{
		font-size: 3rem;
	}
	#contentsBlock .listBox li .num{
		font-size: 6rem;
	}
}

/* ------------------------------------------------------------------------ */

/*  #sec_binkan

/* ------------------------------------------------------------------------ */

#sec_binkan .flexBox figure{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	margin-right: -133px;
}

#sec_binkan .flexBox .txtBox{
	margin-right: 76px;
}


@media screen and (max-width: 1279px){
	#sec_binkan .flexBox figure{
		margin-right: -33px;
	}
	#sec_binkan .flexBox .txtBox{
		margin-right: 36px;
	}
}

@media screen and (max-width: 1024px){
	#sec_binkan .listBox li .spStyle{
		display: inherit;
	}
}
@media screen and (max-width: 800px){
	#sec_binkan .flexBox{
		flex-direction: column;
	}
	#sec_binkan .flexBox .txtBox{
		margin: 0 auto;
	}
	#sec_binkan .flexBox figure{
		margin-top: 24px;
		text-align: right;
		margin-left: auto;
		width: calc(100% + 65px);
	}
	
	#sec_binkan .listBox{
		margin-top: 25px;
	}
}
@media screen and (max-width: 767px){
	#sec_binkan .listBox li .spStyle{
		display: none;
	}
}
@media screen and (max-width: 600px){
	#sec_binkan .flexBox figure{
		margin-right: 0;
		margin-left: 15px;
		width: calc(100% + 48px);
	}
}
