@charset "UTF-8";


/* -------------------------------------
with-smile
------------------------------------- */
#with-smile .maincap {
	margin-bottom:45px;
}
#with-smile h3 {
	font-size:2.4em;
	line-height:53px;
	color:#1d5aa4;
	text-align:center;
	padding-left:45px;
	margin-bottom:20px;
	box-sizing:border-box;
}
#with-smile h3.small {
	font-size:1.5em;
	line-height:26px;
}
#with-smile h3.small span {
	display:inline-block;
	vertical-align:middle;
}

#with-smile h3.small img {
	vertical-align:middle;
}
#with-smile h3 img {
	display:inline-block;
	margin-right:15px;
}

/*magazine*/
#with-smile #magazine {
	margin-bottom:60px;
}
#with-smile #magazine ul {
	font-size:0;
}
#with-smile #magazine ul li {
	font-size:12px;
	display:inline-block;
	vertical-align:top;
	float:none;
	width:calc((100% - 90px)/4);
	margin:0 30px 50px 0;
}
#with-smile #magazine ul li:nth-child(4n) {
	margin-right:0;
}
#with-smile #magazine ul li a {
	display:block;
	position:relative;
}

#with-smile #magazine ul li img {
	width:100%;
	height:auto;
	margin-bottom:5px;
}
#with-smile #magazine ul li.bdr img {
	border:1px solid #ccc;
}
#with-smile #magazine ul li.new a:before {
	content:"";
	display:block;
	width:23%;
	max-width:49px;
	height:23px;
	background:url(../imgs/with-smile/icon_new.svg) 0 0 no-repeat;
	background-size:contain;
	position:absolute;
	left:1px;
	top:1px;
	z-index:1;
}

#with-smile #magazine ul li p span {
	font-size:80%;
	display:block;
	line-height:1.3;
}

@media screen and (max-width:1000px) {
	#with-smile h3 {
		font-size:2.2em;
		line-height:48px;
		padding-left:40px;
		margin-bottom:15px;
	}
	#with-smile h3 img {
		width:auto;
		height:48px;
	}
	

}
@media screen and (max-width:768px) {
	#with-smile h3 {
		font-size:2.0em;
		line-height:44px;
		padding-left:35px;
		margin-bottom:15px;
	}
	#with-smile h3 img {
		width:auto;
		height:44px;
	}

	/*magazine*/
	#with-smile #magazine ul {
		text-align:left;
		padding:0;
	}
	
}
@media screen and (max-width:640px) {
	#with-smile h3 {
		font-size:1.9em;
		line-height:1.4;
		padding-left:0px;
		margin-bottom:10px;
	}
	#with-smile h3 img {
		width:auto;
		height:38px;
		display:block;
		margin:0 auto 8px auto;
	}

	/*magazine*/
	#with-smile #magazine ul {
	}
	#with-smile #magazine ul li {
		font-size:11px;
		width:calc((100% - 40px)/3);
		margin:0 20px 40px 0;
	}
	#with-smile #magazine ul li:nth-child(4n) {
		margin-right:20px;
	}
	#with-smile #magazine ul li:nth-child(3n) {
		margin-right:0;
	}


}
@media screen and (max-width:480px) {
	/*magazine*/
	#with-smile #magazine ul li {
		font-size:10px;
	}
}
@media screen and (max-width:320px) {
	/*magazine*/
	#with-smile #magazine ul li {
		width:calc((100% - 20px)/2);
		margin:0 20px 30px 0;
	}
	#with-smile #magazine ul li:nth-child(3n) {
		margin-right:20px;
	}
	#with-smile #magazine ul li:nth-child(2n) {
		margin-right:0;
	}
	
}