@charset "utf-8";

/* --------------
#ct_knowhow
---------------  */
.sub#ct_knowhow #maincont{background: #fff;}
@media only screen and (max-width:750px) {
/* sp */
	#ct_knowhow #maincont .inner{
	background:url('../img/knowhow/cont_bg01_sp.jpg') center top no-repeat;
	background-size: cover;
	padding-top: 30px;
	padding-bottom: 60px;
	}
	#ct_knowhow.knowhowIndex .h1ttl{font-size: 3.2rem;}
}

@media only screen and (min-width: 751px) {
/* PC */
	#ct_knowhow #maincont .inner{
	background:url('../img/knowhow/cont_bg01_pc.jpg') center top no-repeat;
	background-size: cover;
	padding-bottom: 230px;
	}
	#ct_knowhow.knowhowIndex .h1ttl{font-size: 3.6rem;padding-top: 160px;/*padding-bottom: 50;*/}
}

/* -------------- headding  ---------------  */
#ct_knowhow #maincont .inner p.h1txt{color: #e60012;}







/* --------------
.knowhowIndex
---------------  */

/* -- pagingArea  --  */
.knowhowIndex .borderB {border-bottom: 1px solid #e60012;}
		
@media only screen and (max-width:750px) {
/* sp */
	.knowhowIndex .pagingArea {
	justify-content: space-around;
	margin: 20px auto;
	}
	.knowhowIndex .borderB {padding: 5px;}
	.knowhowIndex .paging {width: 100%;padding-top: 10px;}
}

@media only screen and (max-width:330px) {
/* sp-320 */
	.knowhowIndex .paging {font-size: 1.2rem;}
}

@media only screen and (min-width: 751px) {
/* PC */
	.knowhowIndex .borderB {padding: 15px;}
	.knowhowIndex .pagingArea {
	margin: 20px auto 50px;
	}
}


/*  knowhowBox  */
.knowhowBox{
margin-bottom: 20px;
border-top: 8px solid #e60012;
background: #f9f9f9;
letter-spacing: 0.08rem;
}
.knowhowBox .update{color: #e60012;margin-left: auto;}
.knowhowBox .boxttl{margin-bottom: 1.0rem;}
a .knowhowBox .boxttl,
a .knowhowBox .boxtxt{color: #000;}
a .knowhowBox:hover { opacity: 0.6;}

@media only screen and (max-width:750px) {
/* sp */
	.knowhowBox{display: block;}
	.knowhowBox .boxcont{padding: 0 20px 20px;}
	.knowhowBox p img{width: 100%; margin-bottom: 10px;}
    .knowhowBox .boxttl{font-size: 1.5rem;}
	.knowhowBox .boxtxt{margin-bottom: 10px;font-size: 1.4rem;line-height: 1.4;}
	.knowhowBox .update{font-size: 1.05rem;}
	.knowhowBox .tagarea p.tags{
	font-size: 1.1rem; letter-spacing: 0.06em;	}
}

@media only screen and (min-width: 751px) {
/* PC */
	.knowhowBox{margin-bottom: 40px;padding: 30px 25px 10px;}
	.knowhowBox p.boxImg{width: 320px;}
	.knowhowBox p img{width: 100%; margin-bottom: 10px;}
    .knowhowBox .boxttl{font-size: 1.7rem; font-weight: 300;}
	.knowhowBox .boxtxt{font-size: 1.4rem;line-height: 1.4;}
	.knowhowBox .boxcont{min-width: 400px; position: relative; padding-bottom: 60px; box-sizing: border-box;}
    .knowhowBox p.boxImg + .boxcont { width: 400px;}
	.knowhowBox .boxcont .tagarea { position: absolute; bottom: 20px;left: 0;}
	.knowhowBox .tagarea p.tags{font-size: 1.2rem; letter-spacing: 0.06em;}
}


/* -------------- paging  footpageArea ---------------  */
.footpageArea .paging{align-items: center;}
@media only screen and (max-width:750px) {
/* sp */
	.footpageArea .paging{
	margin-top: 30px;
	}
}
@media only screen and (max-width:335px) {
/* sp-320 */
	.footpageArea .paging .btn{}
	.footpageArea .paging .btn span{
	top: -3px;
  left: -5px;
	padding: 5px 8px;
	}
}
@media only screen and (min-width: 751px) {
/* PC */
	.footpageArea .paging{
	width: 60%;
	margin: 50px auto 0;
	}
	.footpageArea .paging .btn span{
	padding-left: 35px;
	padding-right: 30px;
	}
}



/* --------------
.knowhowDetail
---------------  */
.sub#ct_knowhow.knowhowDetail #maincont{background: #fff;}
.sub#ct_knowhow.knowhowDetail .h1ttl{padding-bottom: 1rem	;color: #000;text-align: left;}

/* SNS  */
ul.social {display: inline-block;text-align: right;}
ul.social li{width: 38px;display: inline-block;margin: 0 2px;}
ul.social li img{ width: 38px; height: auto; border-radius: 3px;}

.article .qText{color: #e60012;}
.article .aName1{color: #00b6ff;}

@media only screen and (max-width:750px) {
/* sp */
	#ct_knowhow.knowhowDetail .h1ttl{font-size: 1.8rem;}
	#ct_knowhow.knowhowDetail .h1txt{font-size: 1.4rem;}
	#ct_knowhow.knowhowDetail .tagarea{font-size: 1.0rem;}
	ul.social li,
	ul.social li img{ width: 24px;}
	.article{margin-top: 20px;font-size: 1.4rem;letter-spacing: 0.2rem;}
	.article .articleImg img{width: 100%;}
	.article .articleImg,
	.article .leadText,
	.article .qText,
	.article .aText{margin-bottom: 40px;}
}

@media only screen and (min-width: 751px) {
/* PC */
	#ct_knowhow.knowhowDetail .h1ttl{font-size:2.6rem;padding-top: 70px;}
	.article{margin-top: 20px;font-size: 1.8rem;letter-spacing: 0.2rem;}
	.article .articleImg{margin-bottom: 70px;}
	.article .leadText{margin-bottom: 40px;}
	.article .qText{margin-bottom: 50px;}
	.article .aText{margin-bottom: 50px;}
}