@charset "UTF-8";
/*worksDetail*/

#worksDetail{
	width: 325px;
	margin: 0 auto;
}

@media screen and (min-width:768px){
	#worksDetail{
		width: 728px;
		padding-bottom: 50px;
	}
}

@media screen and (min-width:1100px){
	#worksDetail{
		width: 1100px;
		padding-bottom: 100px;
	}
}

#worksDetail h2{
	font-size: 36px;
	margin: 45px 0 25px;
}

@media screen and (min-width:1100px){
	#worksDetail h2{
		font-size: 72px;
		margin: 80px 0 71px;
	}
}

#worksDetail h2.h2_jp{
	font-size: 28px;
}

@media screen and (min-width:768px){
	#worksDetail h2.h2_jp{
		font-size: 45px;
	}
}

@media screen and (min-width:1100px){
	#worksDetail h2.h2_jp{
		font-size: 60px;
	}
}

.r{
	font-size: 8px;
}

@media screen and (min-width:768px){
	.r{
		font-size: 12px;
	}
}

.r1{
	font-size: 12px;
}

@media screen and (min-width:768px){
	.r1{
		font-size: 20px;
	}
}

dl#worksTitle{
	padding: 30px 0 15px;
}

dt.worksSub{
	width: 82px;
	float: left;
	clear: left;
	font-size: 15px;
	font-weight: 600;
	line-height: 30px;
	text-align: left;
	padding-right: 30px;
}

@media screen and (min-width:768px){
	dt.worksSub{
		font-size: 16px;
		line-height: 40px;
		padding-right: 30px;
	}
}

@media screen and (min-width:1100px){
	dt.worksSub{
		font-size: 18px;
		font-weight: 600;
		line-height: 60px;
		padding-right: 30px;
	}
}

dd.workscontent{
	font-size: 15px;
	font-weight: 400;
	line-height: 30px;
	text-align: left;
}

@media screen and (min-width:768px){
	dd.workscontent{
		font-size: 16px;
		line-height: 40px;
	}
}

@media screen and (min-width:1100px){
	dd.workscontent{
		font-size: 18px;
		line-height: 60px;
	}
}

p.left{
	font-family: 'Poppins', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 13px;
	line-height: 28px;
	font-weight: 400;
	text-align: justify;
	margin-bottom: 50px;
}

@media screen and (min-width:768px){
	p.left{
		font-size: 14px;
		line-height: 30px;
	}
}

#mainPhoto{
	margin:  0 auto;
	width: 325px;
	padding-bottom: 20px;
}

@media screen and (min-width:768px){
	#mainPhoto{
		width: 740px;
		margin-bottom: 62px;
	}
}

@media screen and (min-width:1100px){
	#mainPhoto{
		width: 1012px;
		margin-bottom: 72px;
	}
}

#detail{
	font-size: 36px;
	font-weight: 800;
	line-height: 26px;
	color: #34bafe;
	mix-blend-mode:color-dodge;
	-ms-mix-blend-mode:color-dodge;
	-moz-mix-blend-mode:color-dodge;
	-webkit-mix-blend-mode:color-dodge;
}

@media screen and (min-width:768px){
	#detail{
		font-size: 72px;
		line-height: 36px;
	}
}

#border{
	width: 325px;
	border-bottom: 13px #1c1c1c solid;
	margin: 0 auto;
	margin-top: -14px;
}

@media screen and (min-width:768px){
	#border{
		width: 728px;
		border-bottom: 20px #1c1c1c solid;
		margin-top: -13px;
	}
}

@media screen and (min-width:1100px){
	#border{
		width: 1100px;
		border-bottom: 20px #1c1c1c solid;
		margin-top: -13px;
	}
}

@media screen and (min-width:768px){
	#clients{
		display: -webkit-flex;
		display: -ms-flex;
		display: -moz-flex;
		display: flex;
	}
}

#worksTitle{
	width:  325px;
	margin: 0 auto;
}

@media screen and (min-width:768px){
	#worksTitle{
		width:  520px;
		margin: 0;
		text-align: left;
	}
}

#url{
	font-size: 12px;
}

@media screen and (min-width:768px){
	#url{
		font-size: 14px;
	}
}

@media screen and (min-width:768px){
	#clients .left{
		margin-top: 30px;
		width: 582px;
	}
}

@media screen and (min-width:1100px){
	#clients .left{
		margin-top: 40px;
		width: 582px;
	}
}

#worksPhotos{
	margin: 0 auto;
	width: 325px;
	display: -webkit-flex;
	display: -ms-flex;
	display: -moz-flex;
	display: flex;
	flex-direction: -webkit-column;
	flex-direction: -ms-column;
	flex-direction: -moz-column;
	flex-direction: column;
	text-align: center;
}

@media screen and (min-width:768px){
	#worksPhotos{
		margin: 0 auto;
		text-align: center;
		width: 728px;
		padding-bottom: 80px;
	}
}

@media screen and (min-width:1100px){
	#worksPhotos{
		width: 1100px;
		flex-direction: -webkit-row;
		flex-direction: -ms-row;
		flex-direction: -moz-row;
		flex-direction: row;
		justify-content: -webkit-space-between;
		justify-content: -ms-space-between;
		justify-content: -moz-space-between;
		justify-content: space-between;
		flex-wrap: -webkit-wrap;
		flex-wrap: -ms-wrap;
		flex-wrap: -moz-wrap;
		flex-wrap: wrap;
		padding-bottom: 116px;
	}
}

#worksPhotos2{
	margin: 0 auto;
	width: 325px;
	display: -webkit-flex;
	display: -ms-flex;
	display: -moz-flex;
	display: flex;
	flex-direction: -webkit-column;
	flex-direction: -ms-column;
	flex-direction: -moz-column;
	flex-direction: column;
	text-align: center;
}

@media screen and (min-width:768px){
	#worksPhotos2{
		margin: 0 auto;
		text-align: center;
		width: 728px;
		padding-bottom: 80px;
	}
}

@media screen and (min-width:1100px){
	#worksPhotos2{
		width: 1100px;
		padding-bottom: 116px;
	}
}

.worksPhoto{
	display: block;
	width: 100%;
	margin-bottom: 30px;
	border: 1px solid #eee;
}

@media screen and (min-width:768px){
	.worksPhoto{
		width: 520px;
		height: 735px;
		margin: 0 auto;
		padding-bottom: 50px;
	}
}

@media screen and (min-width:1100px){
	.worksPhoto{
		width: 520px;
		height: 735px;
		margin: 0 0 80px 0;
		padding-bottom: 0;
	}
}

.worksPhoto2{
	display: block;
	width: 100%;
	margin-bottom: 10px;
	border: 1px solid #eee;
}

@media screen and (min-width:768px){
	.worksPhoto2{
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
		padding-bottom: 0;
	}
}

@media screen and (min-width:1100px){
	.worksPhoto2{
		width: 100%;
		max-width: 1100px;
		margin: 0 0 20px 0;
		padding-bottom: 0;
	}
}

.worksSection{
	padding-bottom: 90px;
}

.worksSection p.rale{
	font-size: 42px;
}

@media screen and (min-width:768px){
	.worksSection p.rale{
		font-size: 72px;
	}
}

#contactSection{
	margin-top: 70px;
}

@media screen and (min-width:768px){
	#contactSection{
		margin-top: 98px;
	}
}