@charset "UTF-8";
@import url("reset.css");
@import url("global.css");

/*基本設定*/
body{
	width:1202px;
	max-width:1202px;
	min-width:1202px;
	margin:0 auto 0;
}
header{
	width:100%;
	height:81px;
	margin:0 auto 0;
	padding:0;
	font-size:1.9rem;
	letter-spacing:0.2rem;
	text-align:center;
	line-height:81px;
	background-color:#d3ddcd;
}
section{
	width:78%;
	margin:0 auto 250px;
}
section h3{
	width:100%;
	font-size:2rem;
	letter-spacing: .2rem;
	text-align:center;
	padding-bottom:9px;
	border-bottom:5px solid #000;
}
.contents_area{
	width:100%;
	margin:0 auto 0;
	padding:0;
}

/*heading*/
#heading{
	width:100%;
	margin:180px auto 90px;
	border-bottom:1px solid #fff;
}
.heading_item{
	width:78%;
	margin:0 auto 90px;
	text-align:center;
}
.heading_num{
	width:50px;
	height:50px;
	margin:0 auto 0;
	color:#fff;
	font-size:2rem;
	text-align:center;
	line-height:50px;
	border-radius: 50%;
	background-color:#408c86;
}
.heading_item h4{
	width:100%;
	margin:10px auto 10px;
	color:#408c86;
	font-size:2rem;
}
.heading_item p span{
	padding-bottom:1px;
	border-bottom:2px solid #408c86;
	display:inline-block;
}

/*vietnam*/
#vietnam .contents_area p{
	width:100%;
	margin:55px auto 90px;
	text-align:center;
}
#vietnam .contents_area img{
	width:680px;
	margin:0 auto 0;
	display:block;
}

/*offshore_menu*/
#offshore_menu .contents_area{
	width:100%;
	margin:58px auto 0;
	display: flex;
	justify-content: space-around;
}
#offshore_menu .contents_area .menu_item{
	width:30%;
}
#offshore_menu .contents_area .menu_item ul li{
	margin-bottom:3px;
	font-family: fot-cezanne-pron, sans-serif;
	font-weight: 500;
	font-style: normal;
}
#offshore_menu .contents_area .menu_item ul li:before{
	font-family:fot-tsukuardgothic-std,"メイリオ",sans-serif,"Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
	content:"■";
}
#offshore_menu .contents_area .menu_item img{
	width:226px;
	margin:0 auto 0;
	display:block;
}
#offshore_menu .contents_area .menu_item p{
	width:100%;
	text-align:center;
}

/*コンテンツ　システム・アプリ開発*/
#appli_development{
}
.inquiry_area{
	width:100%;
	margin:0 auto 0;
	padding-top:58px;
	padding-bottom:58px;
	background-color:#ededed;
}
.inquiry_title{
	width:calc(800 / 934 *100%);
	height:49px;
	margin:0 auto 20px;
	color:#fff;
	font-size:1.25rem;
	text-align:center;
	line-height:49px;
	background-color:#000;
}
.inquiry_caption{
	width:calc(523 / 934 *100%);
	/*height:4.5rem;*/
	margin:0 auto 0;
	padding:0.8rem 0;
	text-align:center;
	line-height:1.5rem;
	background-color:#fff;
}
.inquiry_illust{
	width:calc(523 / 934 *100%);
	margin:0 auto 0;
	display:block;
}
.inquiry_area form{
	width:800px;
	margin:0 auto 20px;
}
.inquiry_area form .formlist{
	width:100%;
}
.inquiry_area form .formlist dd select{
	width: 175px;
	margin-bottom:10px;
	padding-left:10px;
	height:26px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent url(../images/select_arrow.png) no-repeat center right 10px/8px 15px;
	border: none;
	border-radius: 0;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight:600;
	line-height:26px;
	background-color:#c7c7bd;
	display:block;
}
.inquiry_area form .formlist dd textarea{
	width:100%;
	margin-bottom:16px;
	padding: 0.4em 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 0;
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	background: #fff url(../images/textarea_corner.png) no-repeat bottom right /16px 16px;
	resize: none;
}
.inquiry_area form .formlist dd textarea:focus {
	border: 1px solid rgba(0, 0, 0, 0.32);
	box-shadow: none;
	outline: none;
}
.form_email{
	width:100%;
	height:74px;
	margin-top:10px;
	font-size:1.2rem;
}
.formbtn{
	width:100%;
	margin-top:52px;
	text-align:center;
}
.btn_send{
	-webkit-appearance: none;
	background-color: rgba(0, 0, 0, 0.32);
	background-image: none;
	border: none;
	border-radius: 8px;
	color: #000;
	cursor: pointer;
	font-size:1.8rem;
	padding: 0;
	text-decoration: none;
	width:470px;
	height:56px;
	margin:0 auto 0;
	font-family: inherit;
	font-size:1.8rem;
	font-weight:600;
	line-height:56px;
	background-color:#a3ccd2;
	text-align:center;
	display:block;
}
.formprivacy{
	width:100%;
	margin-top:22px;
	text-align:center;
}

/*offshore_explanation*/
#offshore_explanation .contents_area{
	width:100%;
	margin:58px auto 0;
	display: flex;
	justify-content: space-between;
}
.explanation_item{
	width:45%;
}
.explanation_item h4{
	width:100%;
	height:3rem;
	line-height:3rem;
	letter-spacing: .2rem;
	text-align:center;
}
.item_left h4{
	background-color:#f4f3e2;
}
.item_right h4{
	background-color:#dce8e7;
}
.explanation_item h5{
	margin:35px auto 30px;
	color:#019581;
}
.explanation_item p{
	line-height:1.6rem;
}
.explanation_item_border{
	width:100%;
	height:2px;
	margin:35px auto 35px;
	background-color:#000;
}
.explanation_item img{
	width:100%;
	margin:35px auto 35px;
	display:block;
}
.item_right img{
	margin-top:140px;
}
.explanation_item img.arrow{
	width:30px;
	margin:0 auto 0;
}
.explanation_item h6{
	margin:35px auto 18px;
	color:#019581;
}
#offshore_explanation .contents_area .explanation_item ul li{
	margin-bottom:3px;
	font-family: fot-cezanne-pron, sans-serif;
	font-weight: 500;
	font-style: normal;
}
#offshore_explanation .contents_area .explanation_item ul li:before{
	font-family:fot-tsukuardgothic-std,"メイリオ",sans-serif,"Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
	content:"○ ";
}

/*usage_guide*/
#usage_guide .contents_area{
	width:100%;
	margin:58px auto 0;
	display: flex;
	justify-content: space-between;
}
.usage_guide_item{
	width:45%;
}
.usage_guide_item img{
	width:100%;
}

/*development_results*/
#development_results p{
	width:100%;
	margin:55px auto 35px;
}
#development_results ul{
	width:100%;
	margin:100px auto 0;
}
#development_results ul li{
	margin-bottom:10px;
	font-size:1rem;
	line-height:1.5em;
	display: flex;
	justify-content: space-between;
}
.results_date{
	width:12%;
	text-align:center;
}
.results_txt{
	width:88%;
}

/*sendmail.php*/
#send_mail{
	width:80%;
	margin:8rem auto 0;
}
#send_mail h2{
	width:60%;
	margin:0 auto 0;
	font-size:1.8rem;
	line-height:2.4em;
	text-align:center;
	border-bottom:4px solid #000;
}
#send_mail p{
	width:60%;
	margin:3rem auto 4rem;
	font-size:1.2rem;
}






/*タブレット・スマホ用*/
@media screen and (min-width: 901px) {
	.sp {
		display: none !important;
	}
}
@media only screen and (max-width:900px) {
	.pc {
		display: none !important;
	}
	
	/*基本設定*/
	body{
		width:100%;
		max-width:none;
		min-width:auto;
		margin:0 auto 0;
		
	}
	section{
		width:84%;
		margin:0 auto 150px;
	}
	section h3{
		width:100%;
		font-size:2rem;
		line-height:2.5rem;
	}
	
	/*vietnam*/
	#vietnam .contents_area p{
		width:100%;
		margin:55px auto 30px;
		text-align:center;
	}
	#vietnam .contents_area img{
		width:100%;
	}
	
	/*offshore_menu*/
	#offshore_menu .contents_area{
		width:100%;
		margin:58px auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}
	#offshore_menu .contents_area .menu_item{
		width:100%;
		margin-bottom:30px;
	}
	
	/*コンテンツ　システム・アプリ開発*/
	#appli_development{
	}
	.inquiry_caption{
		width:86%;
	}
	.inquiry_illust{
		width:90%;
		margin:0 auto 40px;
		display:block;
	}
	.inquiry_area form{
		width:90%;
		margin:0 auto 20px;
	}
	.form_email{
		width:90%;
		height:34px;
		margin-top:10px;
		font-size:1.2rem;
	}
	.btn_send{
		width:90%;
		height:56px;
	}
	
	/*offshore_explanation*/
	#offshore_explanation h3{
		font-size:1.8rem;
	}
	#offshore_explanation .contents_area{
		width:100%;
		margin:58px auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.explanation_item{
		width:100%;
		margin-bottom:30px;
	}
	.sp_explanation_item_border{
		width:100%;
		height:2px;
		margin:30px auto 60px;
		background-color:#dad9d9;
	}
	.explanation_item img.arrow{
		width:30px;
		margin:30px auto 30px;
		display:block;
	}
	img.img_right{
		margin-top:30px;
	}
	
	/*usage_guide*/
	#usage_guide .contents_area{
		width:100%;
		margin:58px auto 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.usage_guide_item{
		width:100%;
		margin-bottom:30px;
	}
	.usage_guide_item img{
		width:100%;
	}
	
	/*development_results*/
	#development_results p{
		width:100%;
		margin:55px auto 35px;
	}
	#development_results ul{
		width:100%;
		margin:100px auto 0;
	}
	#development_results ul li{
		margin-bottom:10px;
		font-size:1rem;
		line-height:1.5em;
		display: flex;
		justify-content: space-between;
	}
	.results_date{
		width:12%;
		text-align:center;
	}
	.results_txt{
		width:84%;
	}

}