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

main{
	width: 90%;
	margin: 0 auto;
}

.sub-title-group{
	margin: 100px auto 30px;
}

.sier{
	font-size: 100px;
	color: #9EC1FF;
}

h1.sub-title{
	font-size: 28px;
	text-align: left;
}

/*sp screenまでvw指定*/
@media(max-width: 599px){
.sier{
	font-size: 23vw;
	color: #9EC1FF;
}

h1.sub-title{
	font-size: 6vw;
	text-align: left;
}
}

.sub-text{
	color: #D9D9D9;
	font-size: 20px;
	font-weight: bold;
	margin: 4px auto;
}

.desc{
	line-height: 2;
	margin: 30px auto;
}

section.container{
	margin: 100px auto;
}

.summary{
	font-size: 20px;
	line-height: 1.4;
	background: #F1F1F1;
	border-left: 6px solid #9EC1FF;
	padding: 15px 20px 15px 20px;
	letter-spacing: 0.08em;
	margin-bottom: 10px;
}

.client{
	font-size: 13px;
}

.page-url{
	font-size: 13px;
}

.sector{
	color: #AAAAAA;
	font-weight: 500;
	font-size: 13px;
}

.tag{
	display: inline-block;
	font-size: 12px;
	background: #EBEBEB;
	font-weight: 500;
	padding: 10px 14px;
	border-radius: 20px;
	margin-bottom: 8px;
}

.tag-box{
	margin: 30px 0px;
	
}

.summary.deve{
	border-left: 6px solid #EF845D;
}

.sier.deve{
	color: #FFA483;
}

/*youtube埋め込みのレスポンシブ*/
@media(max-width: 1000px){
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
	
	.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	}
}

/*1000px screen*/
@media(max-width: 1199px){
	img{
	width: 100%;
	height: auto;
}
}

/*1000px screen*/
@media(min-width: 1200px){
	
	main{
		width: 1200px;
		margin: 0 auto;
	}
	
	main > img{
		width: auto;
		height: auto;
	}
	
	.img-box{
		display: flex;
	}
	
}