@charset 'UTF-8';

@media screen and (max-width:768px) {
	.spOnly {
		display: block;
	}

	.pcOnly {
		display: none;
	}
	body.body-index
	{
		width: 100%;
		height: 100%;
		min-width: 100%;
	}
	body.body-index .title_point {
		color: #144576;
		font-size: 24px;
		padding-top: 0px;
	}

	body.body-index .top-menu {
		display: none !important;
	}
	#main_nav {
		display: none !important;
	}
	body.body-index .main_nav {
		display: none !important;
	}
	#main_nav.fixed {
		display: none !important;
	}
	body.body-index header {
		border-bottom: 1px solid #fff;
		z-index: 98;
		position: fixed !important;
		top: 0;
		z-index: 5000;
		width: 100%;
		background-color: #fff;
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		-webkit-transition: -webkit-transform .6s cubic-bezier(.25, .46, .45, .94), -webkit-filter .3s linear;
		transition: -webkit-transform .6s cubic-bezier(.25, .46, .45, .94), -webkit-filter .3s linear;
		-o-transition: transform .6s cubic-bezier(.25, .46, .45, .94), filter .3s linear;
		transition: transform .6s cubic-bezier(.25, .46, .45, .94), filter .3s linear;
		transition: transform .6s cubic-bezier(.25, .46, .45, .94), filter .3s linear, -webkit-transform .6s cubic-bezier(.25, .46, .45, .94), -webkit-filter .3s linear
	}

	body.body-index header .header {
		padding: 0 20px;
		height: 72px;
		display: block;
	}

	body.body-index header .header a h1 {
		padding-top: 0 !important;
		margin: 23px 0px;
	}

	body.body-index header .h-contact {
		display: none;
	}

	body.body-index header .header .h-logo {
		margin: 6px 0px;
	}

	.header__menuButton{
		padding:16px;
		float:right;
		padding-right: 0;
		margin-left: auto !important;
		margin: 6px 0px;
	}
	.header__menuButton__link{
		position:relative;
		display:block;
		width:33px;
		height:28px
	}
	.header__menuButton__link.is-active .header__menuButton__link__icon{
		background-color:transparent
	}
	.header__menuButton__link.is-active .header__menuButton__link__icon:before,.header__menuButton__link.is-active .header__menuButton__link__icon:after{
		margin-top:-1px
	}
	.header__menuButton__link.is-active .header__menuButton__link__icon:before{
		-webkit-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		transform:rotate(-45deg)
	}
	.header__menuButton__link.is-active .header__menuButton__link__icon:after{
		-webkit-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		transform:rotate(45deg)
	}
	.header__menuButton__link__icon{
		display:block;
		position:absolute;
		top:50%;
		left:50%;
		-webkit-transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
		width:33px;
		height:2px;
		border-radius:2px;
		background:#FFCB40;
		-webkit-transition:.2s;
		-o-transition:.2s;
		transition:.2s
	}
	.header__menuButton__link__icon:before,.header__menuButton__link__icon:after{
		content:"";
		display:block;
		position:absolute;
		top:50%;
		left:0;
		width:33px;
		height:2px;
		background:#FFCB40;
		-webkit-transition:.3s;
		-o-transition:.3s;
		transition:.3s
	}
	.header__menuButton__link__icon:before{
		margin-top:-10px
	}
	.header__menuButton__link__icon:after{
		margin-top:8px
	}

	.headerMenu{
		padding-top:72px;
		position:fixed;
		top:0;
		left:100%;
		z-index:4500;
		width:100vw;
		height:100vh;
		overflow-y:scroll;
		background-color:#000000a6;
		-webkit-transition:.5s;
		-o-transition:.5s;
		transition:.5s;
	}

	.headerMenu__content {
		position:fixed;
		/*padding-top:72px;
		top:0;*/
		width: 100vw;
		height:100vh;
		background-color: white;
		-webkit-transition:.5s;
		-o-transition:.5s;
		transition:.5s;

	}
	.headerMenu__content.is-active {
		right: 0;
	}
	.headerMenu.is-active{
		left:0
	}
	.headerMenu__list{
		padding:10px 20px 0
	}
	.headerMenu__list__item{
		border-bottom:1px solid #d9dbe2;
		text-align: center;
	}
	.headerMenu__list__item__link{
		padding:18px 10px;
		display:block;
		position:relative;
		font-size:13px;
		font-weight:500;
		line-height:1
	}
	.headerMenu__list__item__link i{
		position:absolute;
		top:50%;
		right:0;
		-webkit-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		transform:translateY(-50%);
		color:#707276;
		font-size:12px
	}
	.headerMenu__button{
		margin-top:25px;
		padding:0 20px 50px
	}
	.headerMenu__button a{
		margin:auto;
		position:relative;
		display:block;
		font-weight:500;
		padding-right:10px;
		width:100%;
		color:#363636;
		background-color:#fff;
		font-size:13px;
		line-height:44px;
		text-align:center;
		border-radius:22px;
		-webkit-box-shadow:0 3px 1px 0 rgba(13,4,8,.15);
		box-shadow:0 3px 1px 0 rgba(13,4,8,.15);
		max-width:330px
	}

	body.body-index .top-header {
		display: none;
	}
	body.body-index .top-header-sp {
		background-image: url("../images/sp/img-photo-top@2x.png");
		height: auto !important;
		width: 100%;
		background-size: 100% 100%;
		padding-top: 72px;
		display: flex;
	}

	.bg_top {
		background-image: url("../images/sp/img-photo-top@2x.png");
		height: 100% !important;
		width: 100%;
		background-size: 100% 100%;
	}

	.bg_offshore {
		background-image: url("../images/sp/img-photo-offshore@2x.png") !important;
		background-size: 100% auto;
		height: auto !important;
	}

	.cover {
		background-size: 100% 260px;
		text-align: center;
		height: 260px;
		width: 100%;
	}

	.cover .title {
		font-weight: bold;
		color: white;
		font-size: 24px;
		padding-top: 20px;
	}

	.cover .title2 {
		font-weight: bold;
		color: white;
		font-size: 24px;
	}

	body.body-index .top-header-sp .menu-header{
		justify-content: center;
		align-items: center;
		display: flex;
		width: 100%;
		height: 260px;
		bottom: 0;
		position: absolute;
		padding-top: 260px;
	}

	body.body-index .top-header-sp .menu-header .row-menu {
		width: 100%;
		height:120px;
	}

	body.body-index .top-header-sp .menu-header .item-menu-header {
		background-color: white;
		height: 110px;
		margin: 10px 10px;
		border-radius: 20px;
		box-shadow: 0px 1px 6px -2px grey
	}



	body.body-index .top-header-sp .menu-header .item-menu-header .text-menu-header {
		height: 90px;
		justify-content: center;
		align-items: center;
		display: flex;
		font-size: 16px;
		color: #3A3A3A;
		text-align: center;
	}

	body.body-index .top-header-sp .menu-header .item-menu-header .selected-menu-header {
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	body.body-index .top-header-sp .menu-header .item-menu-header:hover ~.selected-menu-header{
		filter: invert(1);
	}


	body.body-index .offshore_vn {
		margin: auto;
		width: 100%;
		margin-top: 140px;
		padding-bottom: 10px;
	}

	body.body-index .offshore_vn .title_point {
		padding-top: 72px;
	}

	body.body-index .offshore_vn .offshore_meaning {
		padding-top: 20px;
		padding-bottom: 20px;
		height: 400px;
	}

	body.body-index .offshore_vn .offshore_meaning .item_meaning_left {
		width: 100%;
		padding: 0px 20px;
	}

	body.body-index .offshore_vn .offshore_meaning .item_meaning_right {
		width: 100%;
		padding: 0px 20px;
	}

	body.body-index .offshore_vn .offshore_meaning .image_meaning{
		height: 253px;
		/*float: right; */
		width: 100%;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	body.body-index .offshore_vn .offshore_meaning .text_meaning{
		padding-top: 20px;
		padding-bottom: 10px;
		width: 100%;
		align-items: center;
		display: flex;
		font-size: 20px;
		justify-content: center;
	}

	body.body-index .select_gcode_sp {
		margin: auto;
		width: 100%;
		padding: 0px 10px 10px 10px;
		display: block !important;
	}

	body.body-index .select_gcode_sp .select_gcode_sp_content {
		padding: 10px 10px;
		background-color: #fff;
		margin: 10px;
	}

	body.body-index .select_gcode_sp .select_gcode_sp_content .title{
		text-align: center;
		font-weight: bold;
		padding: 10px 0px;
		border-bottom: 1px solid #010F7E;
		font-size: 20px;
	}

	body.body-index .gcode_committed {
		margin: auto;
		width: 100%;
	}

	body.body-index .gcode_committed .h_gcode_committed .union{
		background-image: url("../images/Union_sp.png");
		text-align: center;
		height: 100%;
		width: 326px;
	}

	body.body-index .gcode_committed .skill_content {
		display: block;
	}

	body.body-index .gcode_committed .skill_content .skill_item1 {
		width: 100%;
		padding: 10px 20px;
		margin:0;
	}

	body.body-index .gcode_committed .skill_content .skill_item2 {
		width: 100%;
		padding: 10px 20px;
		margin:0;
	}

	body.body-index .gcode_committed .skill_content .skill_item3 {
		width: 100%;
		padding: 10px 20px;
		margin:0;
	}

	body.body-index .gcode_committed .skill_content2 {
		display: block;
		padding-top: 0px;
	}

	body.body-index .gcode_committed .skill_content2 .skill_item4 {
		width: 100%;
		padding: 10px 20px;
		margin:0;
	}

	body.body-index .gcode_committed .skill_content2 .skill_item5 {
		width: 100%;
		padding: 10px 20px;
		margin:0;
	}

	body.body-index .gcode_coremember {
		width: 100%;
		margin: auto;
		padding: 0px 20px;
	}

	body.body-index .gcode_coremember .img_member {
		padding-top: 10px;
	}

	body.body-index .gcode_coremember .img_member img {
		/*width: 100%;
        height: 100%;*/
		width: 125px;
		height: 125px;
		border-radius: 70px;
	}

	body.body-index .gcode_coremember .title_chairman {
		padding-top: 30px;
		width: 100%;
	}

	body.body-index .gcode_coremember .content_chairman {
		text-align: left;
		padding-top: 30px;
		width: 100%;
		margin: auto;
		color: #656A6F
	}

	body.body-index .gcode_coremember .main_member {
		border-top: 1px solid #010F7E;
		padding: 40px 0px;
		display: block !important;
	}

	body.body-index #gcode_exp {
		background-color: #F6F8F9;
	}
	body.body-index .gcode_exp {
		width: 100%;
		padding: 10px 20px;
	}

	body.body-index .gcode_exp .field_exp_title {
		margin-right: 20px;
		margin-left: 20px;
	}

	body.body-index .gcode_exp .field_exp {
		margin: 20px 20px;
		display: block;
	}

	body.body-index .gcode_exp .field_exp .exp2{
		margin-left: 0px;
	}

	body.body-index .gcode_exp .field_exp div {
		width: 100% !important;
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 16px !important;
	}

	body.body-index .gcode_exp .special_exp {
		margin-right: 20px !important;
		margin-left: 20px !important ;
	}

	body.body-index .gcode_exp .note_exp {
		height: auto;
	}
	body.body-index .sys_dev {
		margin: auto;
		width: 100%;
		padding: 10px 20px;
	}

	body.body-index .gcode_service {
		margin: auto;
		width: 100%;
		padding: 10px 20px;
	}

	body.body-index .gcode_service .item_service .title_service {
		width: 100%;
	}

	body.body-index .gcode_performance {
		margin: auto;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 50px;
	}

	body.body-index .gcode_performance .sample_prj{
		padding-top: 0px !important;
		display: block;
		padding-right: 20px;
		padding-left: 20px;
	}

	body.body-index .gcode_performance .desc_performance {
		padding: 20px 20px;
	}

	body.body-index .gcode_performance .sample_prj_img {
		width: 100%;
		height: auto;
		padding-bottom: 20px;
	}

	body.body-index .gcode_performance .demo1 {
		height: auto;
		width: 100%;
	}

	body.body-index .gcode_performance .demo2 {
		height: auto;
		width: 100%;
	}

	body.body-index .gcode_performance .demo3 {
		height: auto;
		width: 100%;
	}

	.bg_flowinquiry {
		background-image: url("../images/sp/img-photo-inquality-after@2x.png") !important;
		height: auto !important;
	}

	body.body-index .flowinquiry {
		width: 100%;
		padding-top: 10px;
		padding-bottom: 20px;
	}

	body.body-index .flowinquiry .content_flow{
		width: 100%;
		align-items: center;
		justify-content: center;
		display: grid;
		padding-top: 35px;
	}

	body.body-index .flowinquiry .content_flow .area_flow{
		width: 100%;
		padding: 0px 20px;
	}

	.bg_qa {
		background-image: url("../images/sp/img-photo-faq@2x.png") !important;
		height: auto !important;
	}

	body.body-index .gcode_qa {
		width: 100%;
		padding: 10px 20px 20px 20px;
	}

	body.body-index .gcode_qa .item_service .title_service {
		width: 100%;
	}

	.bg_contact {
		background-image: url("../images/sp/img-photo-inquality@2x.png") !important;
		height: auto;
	}
	body.body-index .gcode_contact {
		width: 100%;
		padding: 10px 20px 20px 20px;
	}

	body.body-index .gcode_error {
		width: 100%;
		padding: 10px 20px 20px 20px;
		padding-top: 86px !important;
	}

	body.body-index .co-wrapper .formArea dl dd {
		width: 580px;
	}

	body.body-index .co-wrapper .formArea textarea {
		width: 580px;
	}

	body.body-index .co-wrapper
	{
		width: 100%;
		margin: 0 auto;
	}

	footer {
		margin-left: 0px;
		margin-right: 0px;
	}
	.area_social {
		display:flex;
		width: 100%;
		padding-top: 10px;
		justify-content: center;
	}
	footer .footer-image
	{
		width: 186px;
		height: auto;
		margin: 0;
	}
	footer .footer
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		padding: 40px 20px 0;
	}
	footer .footer .f-info
	{
		float: none;

		margin: 20px 0 0;
		padding-left: 75px;
	}
	footer .footer .f-info li
	{
		line-height: 18px;

		margin-top: 13px;

		letter-spacing: .08em;
	}
	footer .footer .f-info li br
	{
		display: inline;
	}
	footer .footer .m-btn_footer
	{
		float: none;

		width: 180px;
		margin: 25px auto 0;
	}
	footer .footer .m-btn_footer p a
	{
		line-height: 40px;

		letter-spacing: 0;
	}
	footer .footer .m-btn_footer p a:after
	{
		top: 9px;
		right: 8px;
	}
	footer .copy
	{
		font-size: 12px;
		line-height: 16px;

		margin-top: 35px;
	}
	footer .copy br
	{
		display: inline;
	}

	footer .footer .leftfooter {
		width:100%;
	}

	footer .footer .rightfooter {
		width:100%;
		justify-content: center;
		align-items: center;
		display: flex;
		padding-top: 20px;
	}

	footer .footer .rightfooter .footermap {
		width:100% !important;
		height: 220px !important;
		justify-content: center;
		align-items: center;
		display: flex;
		margin-right: 0px;
	}
}

@media screen and (max-width: 640px) {

	body.body-index .title_point {
		font-size: 20px;
		padding-bottom: 0px !important;
	}
	body.body-index .sys_dev .img_work_flow_pc {
		display: none;
	}

	body.body-index .sys_dev .img_work_flow_sp {
		display: block;
		height: auto;
		width: 100%;
		padding: 40px 0px
	}

	body.body-index .gcode_service .item_service {
		display: block;
	}

	body.body-index .gcode_service .number_service {
		background-image: url("../images/sp/img-flag@2x.png");
		background-size: 60px 30px;
		width: 60px;
		height: 30px;
		justify-content: center;
		align-items: center;
		display: flex;
		color: white;
		font-size: 22px;
		font-weight: bold;
	}
	body.body-index .gcode_service .content_service {
		padding: 20px 20px;

	}

	body.body-index .gcode_service .content_service .detail_service {
		padding: 20px 20px;

	}


	body.body-index .gcode_service .item_service .title_service {
		width: 100%;
		display: block;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 20px;
		padding-bottom: 20px;
		padding-top: 20px;
		border-bottom: 1px solid #010F7E;
		margin-left: 0px !important;
		text-align: center;
	}

	body.body-index .gcode_service .item_service .title_service_text {
		padding-bottom: 20px;
		text-align: center;
		display: block;
		font-size: 20px;
		font-weight: bold;
		border-bottom: 1px solid #010F7E;
	}

	body.body-index .gcode_qa .number_service {
		background-image: url("../images/sp/img-flag@2x.png");
		background-size: 60px 30px;
		width: 60px;
		height: 30px;
		justify-content: center;
		align-items: center;
		display: flex;
		color: white;
		font-size: 22px;
		font-weight: bold;
	}

	body.body-index .gcode_qa {
		padding: 20px 20px;
	}

	body.body-index .gcode_qa .content_service {
		padding: 20px 20px;
		margin-top: 0px !important;
	}

	body.body-index .gcode_qa .content_service .rep_qa {
		padding: 10px 10px 10px 10px;
	}

	body.body-index .gcode_qa .item_service {
		display: block;
	}

	body.body-index .gcode_qa .item_service .title_service {
		margin-left: 0px;
		width: 100%;
		display: block;
		align-items: center;
		font-weight: bold;
		font-size: 20px;
		padding-left: 0px;
		text-align: center;
	}

	body.body-index .gcode_contact .select_file {
		display: block;
		padding-left: 0px !important;
	}

	body.body-index .gcode_contact .select_file .radio05 {
		padding-left: 0px !important;
		margin-top: 0px !important;
	}

	body.body-index .co-wrapper .formArea dl dd {
		width: 100%;
	}

	body.body-index .co-wrapper .formArea textarea {
		width: 100%;
	}

}