@charset "utf-8";

/* top
----------------------------------------- */
#mainVisual {
	margin-bottom: 30px;
	text-align: center;
}
#mainVisual img {
	width: 100%;
	max-width: 480px;
	height: auto;
}
#mainVisual .pc {
	display: none;
}
#mainVisual .sp {
	display: block;
}

/* sevice */
#sevice {
	margin-bottom: 60px;
	padding: 0 30px;
}
#sevice section {
	margin-bottom: 40px;
}
#sevice section.last {
	margin-bottom: 0;
}
#sevice section .icon {
	margin-bottom: 20px;
	text-align: center;
}
#sevice section .icon img {
	width: 49px;
	height: 51px;
}

/* works */
#works {
	margin-bottom: 70px;
	padding: 0 20px;
}
#works li {
	margin-bottom: 40px;
	text-align: center;
}
#works li:last-child {
	margin-bottom: 0;
}
#works li img{
	width: 90%;
}

#works .p .text {
	margin-bottom: 20px;
	text-align: center;
	font-size: 22px;
}


/* blog */
#blog {
	margin-bottom: 30px;
	padding: 0 30px;
}
#blog li {
	margin-bottom: 40px;
	text-align: right;
}
#blog li:last-child {
	margin-bottom: 0;
}
#blog .photo {
	margin-bottom: 30px;
	text-align: center;
}
#blog .photo img {
	width: 280px;
	height: 260px;
}
#blog .cont {
	margin-bottom: 20px;
	text-align: left;
}
#blog .detail {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	padding: 8px 12px;
	background-color: #eee;
	letter-spacing: 0.1em;
}




/* タブレット向け：760px～960px */
@media only screen and (min-width: 760px) {

/* mainVisual */
#mainVisual {
	margin-bottom: 80px;
	background-color: #ecebeb;
	text-align: center;
}
#mainVisual img {
	max-width: 960px;
	height: auto;
}

/* top */
#mainVisual .pc {
	display: block;
}
#mainVisual .sp {
	display: none;
}

/* sevice */
#sevice {
	max-width: 920px;
	margin: 0 5% 130px 5%;
	padding: 0;
}
#sevice section {
	float: left;
	width: 30%;
	height: auto;
	margin-right: 5%;
}
#sevice section.last {
	margin-right: 0;
}
#sevice section .icon {
	margin-bottom: 40px;
	text-align: center;
}
#sevice section .icon img {
	width: 98px;
	height: 102px;
}
#sevice section {
	margin-bottom: 0;
}
#sevice section.last {
	margin-bottom: 0;
}
#main h2.ttl {
}
#main h3.ttl {
	margin-bottom: 16px;
	font-size: 25px;
}
#main p.ttl {
	margin-bottom: 45px;
	font-size: 12px;
	letter-spacing: 0.1em;
}

/* works */
#works {
	max-width: 920px;
	margin: 0 5% 150px 3%;
	padding: 0;
}
#works li{
	box-sizing: border-box;
	display: inline-block;
	width: 30%;
	margin-right: 5%;
	margin-bottom: 60px;
	border: 1px solid #e0e0e0;
	vertical-align: top;
}
#works li:nth-child(3n){
	margin-right: 0;
}
#works li img{
	width: 90%;
	height: auto;
}


/* blog */
#blog {
	max-width: 920px;
	margin: 0 5% 50px 5%;
	padding: 0;
}
#blog li {
	display: inline-block;
	width: 30%;
	margin-right: 5%;
	margin-bottom: 60px;
	vertical-align: top;
}
#blog  li:nth-child(3n){
	margin-right: 0;
}
#blog .photo {
}
#blog .photo img {
	width: 100%;
	height: auto;
}
#blog .cont {
	margin-bottom: 20px;
}
#blog .detail {
	padding: 8px 12px;
	background-color: #eee;
}
.toTop a {
	display: block;
	width: 24px;
	margin: 0 auto 20px auto;
	padding: 8px 20px;
}

} /* タブレット向け */




/* PC向けレイアウトの指定：961px～ */
@media only screen and (min-width: 961px) {
	
/* sevice */
#sevice {
	width: 920px;
	margin: 0 auto 130px auto;
	padding: 0;
}
#sevice section {
	float: left;
	width: 280px;
	height: auto;
	margin-right: 40px;
}
#main h2.ttl {
	margin-bottom: 65px;
	font-size: 50px;
}
#main h3.ttl {
	font-size: 25px;
}
#main p.ttl {
	font-size: 14px;
}

/* works */
#works {
	width: 920px;
	margin: 0 auto 150px auto;
	padding: 0;
}
#works li{
	width: 280px;
	margin-right: 40px;
}

/* blog */
#blog {
	width: 920px;
	margin: 0 auto 50px auto;
	padding: 0;
}
#blog li {
	width: 280px;
	margin-right: 40px;
}

} /* PC向け */