@charset "utf-8";
/* ==================================================
		
		works PC

================================================== */
@media screen and (min-width:751px) {
 
/* --------------------------------------------------
		#contents
-------------------------------------------------- */
#contents {
 margin-top: 72px;
} 
 
/* --------------------------------------------------
		.works
-------------------------------------------------- */
.works li {
 width: 535px;
} 
.works li a {
 display: block;
} 
.works li a img {
 width: 100%;
} 
 
/* --------------------------------------------------
		#detail
-------------------------------------------------- */
/*	.client
-------------------------------------------------- */ 
#detail .client .name {
 font-weight: 400;
 padding-left: 20px;
 width: 70%;
}
#detail .client .plan {
 margin-top: 1px;
 white-space:nowrap;
 }
#detail .client .plan strong {
 font-size: 12px;
 font-weight: 400;
 letter-spacing: 2px;
 background: #faf9f9;
 padding: 6px 19px 9px 20px;
}
 
/*	.intro
-------------------------------------------------- */ 
#detail .intro {
 padding: 0 20px;
}
#detail .intro h2 {
 font-size: 22px;
 font-weight: 600;
 letter-spacing: 4.3px;
}
#detail .intro .txt {
 font-weight: 400;
 letter-spacing: 2.1px;
 line-height: 2.1;
}
 
/*	.photo
-------------------------------------------------- */ 
#detail .photo .txt {
 font-weight: 400;
 letter-spacing: 2.1px;
 line-height: 2.1;
 padding: 0 20px;
}
 
/* --------------------------------------------------
		.btn-return
-------------------------------------------------- */
#detail .btn-return .prev {
 margin-left: -7px;
}
#detail .btn-return .prev img {
 transform: rotate( -90deg );
}
 
}


/* ==================================================
		
		works SP

================================================== */
@media screen and (max-width:750px) {
 
/* --------------------------------------------------
		#contents
-------------------------------------------------- */
#contents {
 margin-top: 80px;
} 
 
/* --------------------------------------------------
		.works
-------------------------------------------------- */
.works li {
 width: 100%;
}

/* --------------------------------------------------
		#detail
-------------------------------------------------- */
/*	.client
-------------------------------------------------- */ 
#detail .client {
 padding: 0 25px;
}
#detail .client .name {
 font-size: 13px;
 font-weight: 400;
 width: 70%;
}
#detail .client .plan {
 font-size: 10px;
 font-weight: 400;
 letter-spacing: 1.5px;
 background: #faf9f9;
 padding: 5px 13px 7px;
 margin-left: 10px;
 white-space:nowrap
}
 
/*	.intro
-------------------------------------------------- */ 
#detail .intro {
 padding: 0 25px;
}
#detail .intro h2 {
 font-size: 17px;
 font-weight: 600;
 line-height: 1.5;
 letter-spacing: 2px;
}
#detail .intro .txt {
 font-size: 13px;
 font-weight: 400;
 letter-spacing: 1px;
 line-height: 1.9;
}
 
/*	.photo
-------------------------------------------------- */ 
#detail .photo .txt {
 font-size: 13px;
 font-weight: 400;
 letter-spacing: 1px;
 line-height: 1.9;
 padding: 0 25px;
}
 
/* --------------------------------------------------
		.btn-return
-------------------------------------------------- */
#detail .btn-return p {
 padding-left: 10px;
 }
#detail .btn-return p a {
 display: block;
 width: 15px;
}
#detail .btn-return p a img {
 transform: rotate( -90deg );
}
 
}