@charset "utf-8";
/* CSS Document */

@media all and (min-width:641px) {
	section.webworkContent{
		width: 875px;
		margin: 0 auto;
	}
	#web_work {
		width: 875px;
		height: 38px;
		margin-top: 15px;
		background: url(../portfolio/img/webwork_title.gif) no-repeat top center;
		font-size: 14px;
		color: #4d4d4d;
		font-weight: bold;
		line-height: 38px;
		text-align: right;
		margin-bottom: 25px;
		padding-right: 25px;
	}
	#web_work_contents{
		width: 875px;
		margin: 0 auto 15px;
		position: relative;
	}
	#web_description {
		width: 450px;
		float: right;
		height: 425px;
	}
	#web_description a{
		font-size: 12px;
		font-weight: bold;
		color: #4d4d4d;
		text-decoration: none;
	}
	#web_description a:hover{
		color: #4d4d4d;
		text-decoration: underline;
	}
	#web_description a:active{
		text-decoration: none;
		color: #009;
	}

	#web_small_thumbs {
		width: 450px;
		height: 83px;
		float: right;
		overflow: hidden;
	}
	#web_small_thumbs img{
		margin-right: 7px;
	}
	#web_small_thumbs img a{ border: none; }
	#web_work_contents p{
		line-height: 1.8em;
		font-size: 12px;
		font-weight: normal;
		color: #4d4d4d;
		margin-bottom: 15px;
	}
	#web_site_img {
		width: 420px;
		float: left;
	}
	#web_site_img img{
		float: left;
		margin-bottom: 15px;
		margin-right: 15px;
		border: 1px solid #ccc;
	}
	/*photogallery用*/
	#gallery_title {
		width: 875px;
		height: 38px;
		margin-top: 15px;
		background: url(../portfolio/img/photography_title.gif) no-repeat top left;
		font-size: 14px;
		color: #4d4d4d;
		font-weight: bold;
		line-height: 38px;
		padding-right: 25px;
		text-align: right;
		margin-bottom: 25px;
	}
	#gallery_contents {
		width: 860px;
		padding-left: 15px;
		margin: 0 auto 15px;
	}
	#gallery_contents img{
		float: left;
		margin-right: 13px;
		margin-bottom: 13px;
		border: 1px solid #ccc;
	}
	#gallery_contents p{
		text-align: right;
		color: #4d4d4d;
		font-size: 10px;
	}
}
/* css for SP 開始*/
@media screen and (max-width: 640px){
	section.webworkContent{
		width: 96%;
		margin: 0 2%;
	}
	#web_work {
		width: 97%;
		height: 10%;
		margin-top: 10%;
		background: url(../portfolio/img/webwork_title.gif) no-repeat bottom left;
		background-size: contain;
		font-size: 3.8vw;
		color: #4d4d4d;
		font-weight: bold;
		text-align: right;
		margin-bottom: 7%;
		padding-right: 3%;
	}
	#web_work_contents{
		width: 100%;
		margin: 0 auto 15px;
	}
	#web_description {
		width: 90%;
		height: auto;
		margin: 0 5%;
	}
	#web_description p{
		font-size: 3.2vw;
	}
	#web_description p br{
		display: none;
	}
	#web_description p.link br{
		display: inline;
	}
	#web_description a{
		font-size: 3.2vw;
		font-weight: bold;
		color: #4d4d4d;
		text-decoration: none;
	}
	#web_small_thumbs{
		width: 99%;
		height: auto;
		float: right;
		padding-left:1%
	}
	#web_small_thumbs a{
		pointer-events: none;
	}
	#web_small_thumbs img{
		width: 30%;
		margin-right: 2%;
	}
	#web_small_thumbs img a{
		border: none;
		pointer-events: none;
	}
	#web_work_contents p{
		line-height: 1.8em;
		font-size: 3.7vw;
		font-weight: normal;
		color: #4d4d4d;
		margin-bottom: 1em;
	}
	#web_site_img {
		width: 100%;
	}
	#web_site_img img{
		margin-bottom: 7%;
		border: 1px solid #ccc;
	}
	#web_site_img a{
		pointer-events: none;
	}
	/*photogallery用*/
	#gallery_title {
		width: 97%;
		height: 10%;
		margin-top: 10%;
		background: url(../portfolio/img/photography_title.gif) no-repeat bottom left;
		background-size: contain;
		font-size: 3.8vw;
		color: #4d4d4d;
		font-weight: bold;
		text-align: right;
		margin-bottom: 7%;
		padding-right: 3%;
	}
	#gallery_contents {
		width: 100%;
		margin: 0 auto 15px;
	}
	#gallery_contents img{
		width: 98%;
		margin-bottom: 3%;
		border: 1px solid #ccc;
	}
	#gallery_contents p{
		text-align: right;
		color: #4d4d4d;
		font-size: 10px;
	}
}