@charset "UTF-8";
/*
 * service.css
 */
/* ==========================================================
!service common
========================================================== */

/* ==========================================================
!mainimg
========================================================== */
.mainimg01 {
	padding: 21% 0 21% 0;
}

.mainimg_top {
	background: url(/common/img/service/mainimg_top.jpg)no-repeat center top;
	background-size: cover;
}

.mainimg01.main_foreign {
	background: url(/common/img/service/mainimg_foreign.jpg)no-repeat center top;
	background-size: cover;
}

.mainimg01.main_parts {
	background: url(/common/img/service/mainimg_parts.jpg)no-repeat center top;
	background-size: cover;
}

.mainimg01.main_food {
	background: url(/common/img/service/mainimg_food.jpg)no-repeat center top;
	background-size: cover;
}

.mainimg01.main_wine {
	background: url(/common/img/service/mainimg_wine.jpg)no-repeat center top;
	background-size: cover;
}

.mainimg01.main_medical {
	background: url(/common/img/service/mainimg_medical.jpg)no-repeat center top;
	background-size: cover;
}

.mainimg01.main_car {
	background: url(/common/img/service/mainimg_car.jpg)no-repeat center top;
	background-size: cover;
}

.mainimg01.main_transport {
	background: url(/common/img/service/mainimg_transport.jpg)no-repeat center top;
	background-size: cover;
}

@media only screen and (min-width: 768px) {
	.mainimg01 {
		padding: 11.5% 0 11.5% 0;
	}
}

/* ==========================================================
!Text
========================================================== */
.txt_basic02.bg01 {
	background-image: url(/common/img/service/img_car01.jpg);
	background-position: left top;
}

.txt_basic02.bg02 {
	background-image: url(/common/img/service/img_food01.jpg);
	background-position: left top;
}

.txt_basic02.bg03 {
	background-image: url(/common/img/service/img_food03.jpg);
	background-position: right top;
}

.txt_basic02.bg04 {
	background-image: url(/common/img/service/img_food05.jpg);
	background-position: left top;
}

.txt_basic02.bg05 {
	background-image: url(/common/img/service/img_food07.jpg);
	background-position: right top;
}

.txt_basic02.bg06 {
	background-image: url(/common/img/service/img_foreign.jpg);
	background-position: left top;
}

.txt_basic02.bg07 {
	background-image: url(/common/img/service/img_medical01.jpg);
	background-position: left top;
}

.txt_basic02.bg08 {
	background-image: url(/common/img/service/img_parts01.jpg);
	background-position: left top;
}

.txt_basic02.bg09 {
	background-image: url(/common/img/service/img_wine01.jpg);
	background-position: left top;
}

.txt_basic02.bg10 {
	background-image: url(/common/img/service/img_transport01.jpg);
	background-position: left top;
}

@media only screen and (min-width: 768px) {
	.txt_basic02.bg01 {
		padding: 3% 0 3% 0;
	}
	.txt_basic02.bg07,
	.txt_basic02.bg10 {
		padding: 2% 0 2% 0;
	}
	.txt_basic02.bg09 {
		padding: 1% 0 1% 0;
	}
}

  /*
| txt_basic03
*/
.txt_basic03{
	margin: 0 auto 30px;
  }
  
  .txt_basic03 .right,
  .txt_basic03 .left{
	padding: 10px 4%;
	font-size: 14px;
  }
  
  .txt_basic03 .txtarea{
	padding: 20px 4%;
	font-size: 14px;
  }
  
  .txt_basic03 .txtarea dt{
	margin: 0 0 30px;
	padding: 0 0 10px;
	font-size: 24px;
	border-bottom: 1px solid #292929;
  }
  
  .txt_basic03 .txtarea dt h3{
	letter-spacing: 0.5px;
  }
  
  @media only screen and (min-width: 768px) {
  
	.txt_basic03_inner{
	  display: flex;
	  align-items: stretch;
	  justify-content: space-between;
	}
  
	.txt_basic03 figure{
	  -ms-flex: 0 0 50%;
	  flex: 0 0 50%;
	  max-width: 50%;
	}
  
	.txt_basic03 .txtarea{
	  -ms-flex: 0 0 50%;
	  flex: 0 0 50%;
	  max-width: 50%;
	}
  
	.txt_basic03.txt_left .txt_basic03_inner{
	  flex-direction: row-reverse;
	}
	
  }
  
  @media only screen and (min-width: 992px) {
  
	.txt_basic03{
	  margin: 0 auto 48px;
	}
  
	.txt_basic03_inner{
	  display: flex;
	  align-items: stretch;
	  justify-content: space-between;
	  margin: 0 auto;
	  max-width: 1080px;
	}
  
  
  
	.txt_basic03 figure{
	  -ms-flex: 0 0 50%;
	  flex: 0 0 50%;
	  max-width: 50%;
	}
  
  	.txt_basic03 .txtarea{
	  -ms-flex: 0 0 50%;
	  flex: 0 0 50%;
	  max-width: 50%;
	}
  
	
  
  }
  
  @media only screen and (min-width: 1400px) {
  
	.txt_basic03 figure{
	  position: relative;
	}
  .txt_basic03 .txtarea{
	  -ms-flex: 0 0 50%;
	  flex: 0 0 50%;
	  max-width: 50%;
	  display: flex;
	  align-items: center;
	  position: relative;
	}
  
	.txt_basic03 .txtarea dl{
	  padding: 40px 40px 60px 50px;
	  width: 127%;
	  background-color: rgba(255, 255, 255, 0.9);
	  position: absolute;
	  right: 0;
    top: 50%;
    transform: translateY(-50%);

	}
  
  
	.txt_basic03 .txtarea dd{
	  font-size: 15px;
	}
  
  
	.txt_basic03.txt_left .txtarea dl{
	  padding: 20px 50px 20px 0;
	  left: 0;
	}
  
	.txt_basic03 figure img{
	  width: 128%;
	  max-width: 128%;
	  display: block;
	  margin-left: -28%;
	  position: relative;
	  right: 0;
	  top: 0;
	}
  
	.txt_basic03.txt_left figure img{
	  left: 0;
	  margin: 0;
	  margin-right: -28%;
	}
  
  }


  /*
  | txt_basic04
  */
  .txt_basic04{
	background: #6695ce;
	padding: 3% 3% 3% 3%;
	text-align: center;
  }

  .txt_basic04 p {
	color: #ffffff;
	font-size: 18px;
	letter-spacing: 0;
  }

  @media only screen and (min-width: 1400px) {

	.txt_basic04{
	  padding: 20px;
	}

	.txt_basic04 p {
	  font-size: 20px;
	}

  }

	/* ==========================================================
	foreign_area
	========================================================== */
	.foreign_area {
		margin-top: 50px;
	}
	.foreign_area_title{
		color: #fff;
		font-size: 18px;
		background-color: #004fad;
		padding: 20px 12px;
	}
	.foreign_area_title_sub{
		font-size: 14px;
	}
	.foreign_area_content{
		margin-top: 20px;
	}
	.foreign_area_info {
		margin-top: 20px;
	}
	.foreign_area_info th, .foreign_area_info td{
		vertical-align: top;
		padding-bottom: 10px;
		display: block;
	}
	.foreign_area_info th{
		padding-bottom: 0;
		font-weight: bold;
	}
	.foreign_area_info td{
		font-size: 14px;
	}
	@media only screen and (min-width: 768px) {
		.foreign_area_content{
			display: table;
			width: 100%;
		}
		.foreign_area_image, .foreign_area_info {
			display: table-cell;
			vertical-align: top;
		}
		.foreign_area_image {
			width: 36%;
		}
		.foreign_area_info th, .foreign_area_info td{
			display: table-cell;
			padding-bottom: 15px;
		}
		.foreign_area_info {
			margin-top: 0;
			padding-left: 30px;
		}
		.foreign_area_info th{
			width: 128px;
			padding-right: 42px;
		}
	}

	/* ==========================================================
	foreign map
	========================================================== */
	.map_outer{
		text-align: center;
		margin-top: 38px;
	}
	[name="foreign_map"] area {
		cursor: pointer;
	}