@charset "utf-8";
@media screen and (min-height: 1000px) {
	.mainviual{
		height: 40vh !important;
	}
}
@media screen and (min-width: 850px) {
  /* ここに850px以上の画面幅で適用するCSSを書く */
	.pc{
		display: block;
	}
	.mainviual{
		height: 350px;
		overflow: hidden;
	}
	.mainviual img{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.wrapper{
		font-size: 1rem;
	}
	#overview .flex-box{
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		margin-top: 10px;
		gap: 50px;
	}
	#overview .flex-box .photo_01{
		width: 50%;
		height: auto;
		position: relative;
		overflow: hidden;
	}
	#overview .flex-box .photo_01 img{
		display: block;
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		object-fit: cover;
	}
	#overview .flex-box p{
		width: 50%;
	}
	#service-overview .flex-box{
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		gap: 50px;
		margin-bottom: 20px;
	}
	#service-overview .flex-box .photo_01{
		width: 50%;
		height: auto;
		position: relative;
		overflow: hidden;
	}
	#service-overview .flex-box .photo_01 img{
		display: block;
		width: auto;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
	#service-overview .flex-box .text_box{
		width: 50%;
	}
	#service-overview .flex{
		flex-direction: row;
	}
	#service-overview .sub-text{
		margin-bottom: 0;
	}
	#service-overview article{
		margin: 0 0 10px;
	}
	#service-overview article:nth-child(2){
		margin: 0 20px 10px;
	}
	#examples ul{
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 30px;
	}
	#examples ul div{
		height: 100%;
	}
	#case-studies .flex{
		display: flex;
		justify-content: space-between;
	}
	#case-studies .card{
		width: calc(95% / 3);
	}
	#case-studies .card ul{
		height: 100%;
	}
	#reason ul{
		width: 90%;
		margin: 0 auto;
	}
	#reason ul li{
		width: 45%;
		padding: 20px;
		text-align: center;
	}
}