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


/* ----------------------------------------------
	シブヤだからできること
------------------------------------------------- */
#strengths {}
#strengths::after {
	/*background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), url("../images/img_main.jpg");*/
	background-image: url("../images/img_main.jpg");
}
#strengths .stageWrap {
	display: grid;
	grid-template-rows: repeat(2,auto);
	gap: 50px;
	place-items: center;
}
#strengths .stageWrap h2 {
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	line-height: 1em;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#strengths .stageWrap h2::after {
	content: "";
	background-color: #016f9c;
	display: block;
	height: 5px;
	width: 1.5em;
	margin: 10px auto 0;
	border-radius: 5px;
}
#strengths .stageWrap > p {
	position: absolute;
	z-index: 10;
	color: #fff;
	font-weight: bold;
	font-family: "Vollkorn", serif;
	text-stroke: 1px #F8F8F8;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 4px #083b50;
}
#strengths .stageWrap ol {
	counter-reset: listnum;
}
#strengths .stageWrap ol li {
	margin: 10px 0;
	font-size: 30px;
	font-weight: bold;
}
#strengths .stageWrap ol li::before{
	counter-increment: listnum;
	content: counter(listnum);
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	background: linear-gradient(90deg, rgba(3,112,154,1) 0%, rgba(97,219,241,1) 100%);
	border-radius: 50%;
	margin-right: 0.5em;
	text-align:center;
	color: #fff;
	font-weight: bold;
	line-height: 1.5em;
}

.linearGrad {
	display: none;
}


/* ----------------------------------------------
	シブヤAI搭載外観検査システム
------------------------------------------------- */
#contents .stageWrap h3 {
	background-color: #e4f7f3;
	border-left: solid 5px #016f9c;
	border-right: solid 5px #016f9c;
	padding: 10px;
	text-align: center;
	color: #016f9c;
	font-weight: bold;
	font-size: 20px;
}
#contents .contents_in {}
#contents .contents_in h4 {
	text-align: center;
	color: #016f9c;
	font-weight: bold;
	font-size: 24px;
	margin: 40px 0;
}
#contents .contents_in h4 span {
	display: block;
	font-size: 18px;
}


/* ----------------------------------------------
	仕様詳細
------------------------------------------------- */
#s_contents1,
#s_contents2,
#s_contents3 {
	position: relative;
}
#s_contents1::after,
#s_contents2::after,
#s_contents3::after {
	content: "";
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
#s_contents3::after {
	background-position: right;
}
#s_contents1::after {
	left: 0;
	background-image: url("../images/img_01.jpg");
}
#s_contents2::after {
	right: 0;
	background-image: url("../images/img_02.jpg");
}
#s_contents3::after {
	left: 0;
	background-image: url("../images/img_03.jpg");
}
#s_contents1 .stageWrap,
#s_contents2 .stageWrap,
#s_contents3 .stageWrap {
	display: grid;
	grid-template-rows: 1fr repeat(2,auto) 1fr;
	gap: 20px;
}
#s_contents1 .stageWrap h3 ,
#s_contents2 .stageWrap h3 ,
#s_contents3 .stageWrap h3 {
	border-left: solid 5px;
	border-bottom: solid 1px;
	border-image: linear-gradient(to bottom, rgba(97,219,241,1), rgba(3,112,154,1)) 1;
	padding: 10px;
	font-size: 20px;
	font-weight: bold;
	width: 100%;
	position: relative;
}
.stageWrap h3 span {
	color: #61dbf1;
	opacity: 0.4;
	display: inline-block;
	position: absolute;
	bottom: -0.1em;
	font-family: "Vollkorn", serif;
}
#s_contents1 .p_new_in,
#s_contents2 .p_agp_in,
#s_contents3 .p_fas_in {
	s_contents1: grid;
	grid-template-rows: repeat(2,auto);
	gap: 50px;
	place-items: center;
}
.contents_in {}
.contents_in ul {
	display: grid;
	gap: 10px;
	list-style: disc;
	padding-left: 2em;
	font-size: 14px;
}
.contents_in ul li {}
.contents_in ul li::before {
}


/* ----------------------------------------------
	動画
------------------------------------------------- */
#moves {
	background-color: #e4f7f3;
}
#moves .stageWrap #move {
	background-color: #000;
	height: auto;
	margin: auto;
	filter: drop-shadow(0 0 5px rgb(0, 0, 0, 0.8));
}
#moves .stageWrap #move a {
	position: relative;
	display: grid;
	height: 100%;
	color: #fff;
	font-size: 14px;
	text-align: center;
	align-items: center;
/*	padding-bottom: 1em;*/
}
#moves .stageWrap #move a:before,
#moves .stageWrap #move a:after {
	position: absolute;
	/*content: "";*/
	display: block;
	top: 50%;
	left: 50%;
	filter: drop-shadow(0px 0px 2px #000);
}
#moves .stageWrap #move a:before {
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 3px solid #fff;
	width: 60px;
	height: 60px;
}
#moves .stageWrap #move a:after {
	transform: translate(-40%, -50%);
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	border-width: 20px 0 20px 30px;
	width: 30px;
	height: 30px;
}
#moves .stageWrap #move a img {
	width: 100%;
	height: auto;
}


/*-
	PC版（821px以上）ここから
------------------------------------------------- */
@media screen and (min-width:821px), print{
	
	/* ----------------------------------------------
		シブヤだからできること
	------------------------------------------------- */
	#strengths {}
	#strengths .p_category_in {
		width: 800px;
	}
	#strengths .stageWrap > p {
		/*top: calc(200px - 3em);
		left: calc(50% - 1100px / 2 + 170px);*/
		top: 150px;
		font-size: 50px;
	}
	#strengths .stageWrap ol li {
		font-size: 30px;
	}
	
	
	/* ----------------------------------------------
		シブヤAI搭載外観検査システム
	------------------------------------------------- */
	#contents .stageWrap {
		width: 800px;
		margin: auto;
	}
	
	
	/* ----------------------------------------------
		仕様詳細
	------------------------------------------------- */
	#s_contents1,
	#s_contents2,
	#s_contents3 {
		margin: 100px 0;
	}
	#s_contents1::after,
	#s_contents2::after,
	#s_contents3::after {
		/*width:  calc(50% - 1100px / 2);*/
		height: 100%;
		top: 0;
	}
	#s_contents1::after {
		border-radius: 0 400px 400px 0;
		width: max(450px, 40%);
	}
	#s_contents2::after {
		border-radius: 400px 0 0 400px;
		width: 40%;
	}
	#s_contents3::after {
		border-radius: 0 400px 400px 0;
		width: max(450px, 40%);
	}
	#s_contents1 .stageWrap,
	#s_contents2 .stageWrap,
	#s_contents3 .stageWrap {
		/*width: calc(55%);*/
		width: max(600px, 55%);
		height: 18em;
		padding: 0;
		grid-template-rows: 1fr repeat(2,auto) 1fr;
	}
	#s_contents1 .stageWrap {
		margin-left: max(500px, 45%);
	}
	#s_contents2 .stageWrap {
		/*margin-left: calc(50% - 1000px / 2);*/
		margin-left: max(100px, calc(50% - 1000px / 2));
	}
	#s_contents3 .stageWrap {
		margin-left: max(500px, 45%);
	}
	#s_contents1 .stageWrap::before,
	#s_contents1 .stageWrap::after,
	#s_contents2 .stageWrap::before,
	#s_contents2 .stageWrap::after,
	#s_contents3 .stageWrap::before,
	#s_contents3 .stageWrap::after {
		content: "";
		display: block;
	}
	
	#s_contents1 .contents_in,
	#s_contents2 .contents_in,
	#s_contents3 .contents_in {
		width: calc(1000px / 2);
	}
	.stageWrap h3 span {
		margin-left: 30px;
		font-size: 65px;
	}
	
	
	/* ----------------------------------------------
	動画
------------------------------------------------- */
	#moves .stageWrap #move {
		background-color: #000;
		width: 800px;
	}
	
	
	
}


/*-
	SP版（820px以下）ここから
------------------------------------------------- */
@media screen and (max-width: 820px) {
	
	/* ----------------------------------------------
		シブヤだからできること
	------------------------------------------------- */
	#strengths {}
	#strengths .p_category_in {
		width: 100%;
	}
	#strengths .stageWrap p {
		top: calc(150px - 3em);
		font-size: 24px;
		text-align: center;
		display: block;
		width: calc(100% - 30px);
		margin: auto;
	}
	#strengths .stageWrap ol li {
		font-size: 16px;
	}
	
	
	/* ----------------------------------------------
		シブヤAI搭載外観検査システム
	------------------------------------------------- */
	
	
	/* ----------------------------------------------
		仕様詳細
	------------------------------------------------- */
	#s_contents1,
	#s_contents2,
	#s_contents3 {
		padding-top: 250px;
	}
	#s_contents1::after,
	#s_contents2::after,
	#s_contents3::after {
		width: calc(100vw - 10%);
		height: 200px;
		top: 0;
	}
	#s_contents1::after {
		border-radius: 0 50px 50px 0;
	}
	#s_contents2::after {
		border-radius: 50px 0 0 50px;
	}
	#s_contents3::after {
		border-radius: 0 50px 50px 0;
	}
	#s_contents1 .stageWrap,
	#s_contents2 .stageWrap,
	#s_contents3 .stageWrap {
		grid-template-rows: repeat(2,auto);
	}
	.stageWrap h3 span {
		margin-left: 20px;
		font-size: 50px;
		left: 0;
		bottom: 0;
		z-index: -1;
	}
}