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

ul.page_title li.text{
	background: url("../technology/images/page_title_bg.jpg") no-repeat;
	background-size: cover;
}

/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 769px){
	
	ul.page_title{
		margin-bottom: 0;
	}
	
	#pagetop {
		margin-top: 0;
	}
	
	div.special {
		width: 100%;
		height: 50vw;
		line-height: 0;
		display: block;
		position: relative;
		background: url("../technology/images/banner_bg.jpg") no-repeat;
		background-size: cover;
		margin-bottom: 60px;
	}
	
	div.special h2{
		width: 30.83vw;
		max-width: 370px;
		margin: 0 auto 3.3vw;
		padding-top: 2.8vw;
	}
	
	section {
		width: 82%;
		max-width: 985px;
		margin: 0 auto;
		color: #595757;
	}
	
	section h2{
		font-size: 24px;
		font-size: 2.4rem;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 1.4;
		text-align: center;
		margin-bottom: 40px;
	}
	
	section#s01 h2{
		font-size: 38px;
		font-size: 3.8rem;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 2;
		text-align: center;
		margin-bottom: 0;
	}
	
	section#s01 h3{
		font-size: 26px;
		font-size: 2.6rem;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 2;
		text-align: center;
		margin-bottom: 40px;
	}
	
	section#s01 p{
		font-size: 18px;
		font-size: 1.8rem;
		line-height: 2.5;
		text-align: center;
	}
	
	section#s02{
		width: 100%;
		max-width: 100%;
		height: 34.1vw;
		background: url("../technology/images/project_bg02.jpg") no-repeat;
		background-size: cover;
		margin: 15vw 0;
		position: relative;
	}
	
	section#s02 div.photo{
		width: 86vw;
		position: absolute;
		top: -10vw;
		left: 7.16vw;
	}
	
	div.wrapper {
		width: 100%;
		background: url("../technology/images/project_bg_pc.jpg") no-repeat;
		background-size: 100vw;
		padding-bottom: 65px;
	}
	
	section#s03{
		width: 100%;
		max-width: 100%;
	}
	
	section#s03 div.num{
		width: 60px;
		margin: 0 auto 24px;
		line-height: 0;
	}
	
	section#s03 div.photo01{
		width: 100%;
		max-width: 985px;
		margin: 0 auto 40px;
		line-height: 0;
	}
	
	section ul.layout01{
		width: 82%;
		max-width: 985px;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		margin: 0 auto 20px;
	}
	
	section ul.layout01 li.text{
		width: 72%;
	}
		
	section ul li.people{
		width: 94px;
		margin-right: 25px;
	}
	
	section ul li.people02{
		width: 192px;
		margin-right: 25px;
	}
	
	section ul li p{
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 2;
	}
	
	section div.layout02,
	section div.layout03,
	section div.layout04,
	section div.layout06{
		width: 100%;
		position: relative;
		margin-bottom: 50px;
	}
	
	section div.layout05{
		width: 100%;
		position: relative;
		margin-bottom: 150px;
	}
	
	section div.layout02 ul,
	section div.layout06 ul{
		width: 82%;
		max-width: 985px;
		margin: 0 auto 20px;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		position: relative;
	}
	
	section div.layout02 ul li.text{
		width: 100%;
		width: -webkit-calc(62% - 119px);
		width: -moz-calc(62% - 119px);
		width: calc(62% - 119px);
	}
	
	section div.layout02 ul li.text02{
		width: 100%;
		width: -webkit-calc(62% - 217px);
		width: -moz-calc(62% - 217px);
		width: calc(62% - 217px);
	}
	
	section div.layout02 div.photo02{
		width: 37.5vw;
		max-width: 450px;
		position: absolute;
		top: 0;
		right: 0;
		line-height: 0;
	}
	
	section div.layout03 ul,
	section div.layout04 ul,
	section div.layout05 ul{
		width: 82%;
		max-width: 985px;
		margin: 0 auto 20px;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-end;
		position: relative;
	}
	
	section div.layout03 ul li.text{
		width: 100%;
		width: -webkit-calc(55% - 119px);
		width: -moz-calc(55% - 119px);
		width: calc(55% - 119px);
	}
	
	section div.layout03 div.photo03{
		width: 42.5vw;
		max-width: 510px;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 0;
	}
	
	section div.photo04 {
		width: 642px;
		line-height: 0;
		margin: 120px auto 100px;
	}
	
	section div.layout04 ul li.text{
		width: 100%;
		width: -webkit-calc(55% - 119px);
		width: -moz-calc(55% - 119px);
		width: calc(55% - 119px);
	}
	
	section div.layout04 div.photo04{
		width: 41.6vw;
		max-width: 500px;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 0;
		margin: 0;
	}
	
	section div.layout05 ul li.text{
		width: 100%;
		width: -webkit-calc(55% - 119px);
		width: -moz-calc(55% - 119px);
		width: calc(55% - 119px);
	}
	
	section div.layout05 div.photo05{
		width: 41.6vw;
		max-width: 500px;
		position: absolute;
		top: 0;
		left: 0;
		line-height: 0;
		margin: 0;
	}
	
	section div.layout06 ul li.text{
		width: 100%;
		width: -webkit-calc(55% - 119px);
		width: -moz-calc(55% - 119px);
		width: calc(55% - 119px);
	}
	
	section div.layout06 div.photo06{
		width: 34vw;
		max-width: 408px;
		position: absolute;
		top: 0;
		right: 0;
		line-height: 0;
		margin: 0;
	}
	
	section ul.layout07{
		width: 82%;
		max-width: 985px;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-end;
		margin: 0 auto 20px;
	}
	
	section ul.layout07 li.text{
		width: 77%;
	}
	
	p.cap {
		width: 95%;
		max-width: 985px;
		margin: 0 auto;
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1.3;
		margin-bottom: 10px;
		text-indent: -1em;
		padding-left: 1em;
		letter-spacing: -0.02em;
	}
	
}

/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

@media screen and (max-width: 768px){
	
	ul.page_title{
		margin-bottom: 0;
	}
	
	#pagetop {
		margin-top: 0;
	}
	
	div.special {
		width: 100%;
		height: 50vw;
		line-height: 0;
		display: block;
		position: relative;
		background: url("../technology/images/banner_bg.jpg") no-repeat;
		background-size: cover;
		margin-bottom: 30px;
	}
	
	div.special h2{
		width: 30.83vw;
		max-width: 370px;
		margin: 0 auto 3.3vw;
		padding-top: 2.8vw;
	}
	
	section {
		width: 92.5%;
		margin: 0 auto;
		color: #595757;
	}
	
	section h2{
		font-size: 21px;
		font-size: 2.1rem;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 1.4;
		text-align: center;
		margin-bottom: 30px;
	}
	
	section#s01 h2{
		font-size: 20px;
		font-size: 2.0rem;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 2;
		text-align: center;
		margin-bottom: 0;
	}
	
	section#s01 h3{
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: bold;
		letter-spacing: 0.1em;
		line-height: 2;
		text-align: center;
		margin-bottom: 30px;
	}
	
	section#s01 p{
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 2;
		text-align: left;
	}
	
	section#s02{
		width: 100%;
		max-width: 100%;
		height: 34.1vw;
		background: url("../technology/images/project_bg02.jpg") no-repeat;
		background-size: cover;
		margin: 15vw 0;
		position: relative;
	}
	
	section#s02 div.photo{
		width: 86vw;
		position: absolute;
		top: -10vw;
		left: 7.16vw;
	}
	
	div.wrapper {
		width: 100%;
		background: url("../technology/images/project_bg_sp.jpg") no-repeat;
		background-size: 100vw;
		padding-bottom: 65px;
	}
	
	section#s03{
		width: 95.25%;
		margin: 0 auto;
	}
	
	section#s03 div.num{
		width: 60px;
		margin: 0 auto 24px;
		line-height: 0;
	}
	
	section#s03 div.photo01{
		width: 100%;
		max-width: 985px;
		margin: 0 auto 40px;
		line-height: 0;
	}
	
	section ul.layout01{
		width: 100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		margin: 0 auto 20px;
	}
	
	section ul.layout01 li.text{
		width: -webkit-calc(100% - 80px);
		width: -moz-calc(100% - 80px);
		width: calc(100% - 80px);
	}
		
	section ul li.people{
		width: 65px;
		margin-right: 15px;
	}
	
	section ul li.people02{
		width: 132px;
		margin-right: 15px;
	}
	
	section ul li p{
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 2;
	}
	
	section div.layout02,
	section div.layout03,
	section div.layout04,
	section div.layout06{
		width: 100%;
		position: relative;
		margin-bottom: 50px;
	}
	
	section div.layout05{
		width: 100%;
		position: relative;
		margin-bottom: 50px;
	}
	
	section div.layout02 ul,
	section div.layout06 ul{
		width: 100%;
		margin: 0 auto 20px;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		position: relative;
	}
	
	section div.layout02 ul li.text{
		width: -webkit-calc(100% - 80px);
		width: -moz-calc(100% - 80px);
		width: calc(100% - 80px);
	}
	
	section div.layout02 ul li.text02{
		width: 100%;
		width: -webkit-calc(100% - 147px);
		width: -moz-calc(100% - 147px);
		width: calc(100% - 147px);
	}
	
	section div.layout02 div.photo02{
		width: 60vw;
		max-width: 450px;
		margin: 0 auto;
		line-height: 0;
	}
	
	section div.layout03 ul,
	section div.layout04 ul,
	section div.layout05 ul{
		width: 100%;
		margin: 0 auto 20px;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		position: relative;
	}
	
	section div.layout03 ul li.text{
		width: -webkit-calc(100% - 80px);
		width: -moz-calc(100% - 80px);
		width: calc(100% - 80px);
	}
	
	section div.layout03 div.photo03{
		width: 60vw;
		margin: 0 auto;
		line-height: 0;
	}
	
	section div.photo04 {
		width: 60vw;
		line-height: 0;
		margin: 30px auto 50px;
	}
	
	section div.layout04 ul li.text{
		width: 100%;
		width: -webkit-calc(100% - 80px);
		width: -moz-calc(100% - 80px);
		width: calc(100% - 80px);
	}
	
	section div.layout04 div.photo04{
		width: 60vw;
		line-height: 0;
		margin: 0 auto;
	}
	
	section div.layout05 ul li.text{
		width: -webkit-calc(100% - 80px);
		width: -moz-calc(100% - 80px);
		width: calc(100% - 80px);
	}
	
	section div.layout05 div.photo05{
		width: 60vw;
		margin: 0 auto;
	}
	
	section div.layout06 ul li.text{
		width: -webkit-calc(100% - 80px);
		width: -moz-calc(100% - 80px);
		width: calc(100% - 80px);
	}
	
	section div.layout06 div.photo06{
		width: 60vw;
		line-height: 0;
		margin: 0 auto;
	}
	
	section ul.layout07{
		width: 100%;
		display: flex;
		flex-wrap:wrap;
		justify-content: flex-start;
		margin: 0 auto 20px;
	}
	
	section ul.layout07 li.text{
		width: 77%;
	}
	
	p.cap {
		width: 100%;
		max-width: 985px;
		margin: -10px auto 20px;
		font-size: 12px;
		font-size: 1.2rem;
		line-height: 1.3;
		text-indent: -1em;
		padding-left: 1em;
		letter-spacing: -0.02em;
	}

}