@charset "utf-8";

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

/*--各ページヘッダー---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

#header_title > div {width: 75%; height: 20rem; margin:0 auto; }

#header_title h1{width:100%; margin:0 auto 1em auto; padding-top:0.5em; text-shadow: 2px 2px 0.5em #000000; color: #FFF; font-weight: bold; position: relative; z-index: 1; }

/*--カナダ--*/
.canada{ background: URL(../img/canada_img.webp); background-size:cover; background-position:50%; position: relative; }
.canada::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--中国--*/
.china{ background: URL(../img/china_img.webp); background-size:cover; background-position:50% 60%; position: relative; }
.china::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--フランス--*/
.france{ background: URL(../img/france_img.webp); background-size:cover; background-position:50% 60%; position: relative; }
.france::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--ドイツ--*/
.germany{ background: URL(../img/germany_img.webp); background-size:cover; background-position:50%; position: relative; }
.germany::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--イタリア--*/
.italy{ background: URL(../img/italy_img.webp); background-size:cover; background-position:50%; position: relative; }
.italy::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--オランダ--*/
.nederland{ background: URL(../img/nederland_img2.webp); background-size:cover; background-position:50% 45%; position: relative; }
.nederland::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--フィリピン--*/
.philippines{ background: URL(../img/philippines_img.webp); background-size:cover; background-position:50% 80%; position: relative; }
.philippines::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--スペイン--*/
.spain{ background: URL(../img/spain_img.webp); background-size:cover; background-position:50%; position: relative; }
.spain::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--イギリス--*/
.uk{ background: URL(../img/uk_img.webp); background-size:cover; background-position:50%; position: relative; }
.uk::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--アメリカ--*/
.usa{ background: URL(../img/usa_img2.webp); background-size:cover; background-position:50%; position: relative; }
.usa::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--ヨーロッパEU--*/
.eu{ background: URL(../img/eu_img2.jpg); background-size:cover; background-position:50% 50%; position: relative; }
.eu::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--CAR 車　バイク--*/
.car{ background: URL(../img/car_img.jpg); background-size:cover; background-position:50% 50%; position: relative; }
.car::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
/*--ebay--*/
.ebay{ background: URL(../img/ebay_img.webp); background-size:cover; background-position:50% 60%; position: relative; }
.ebay::after { content: ''; background-color: rgba(0,0,0,.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }




/*--ヘッダー下のサービス内容ー---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.service { background-color:#e2e5e9; padding:3em 0 1em 0;}
.service section {background-color:#ffffff; padding:2em 2em;}

.service h2{
  border-bottom: solid 0.4em #e9e9e9;
  position: relative;
  margin-bottom:1em;
}

.service h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 0.4em #112249;
  bottom: -0.4em;
  width: 20%;
}
.service h3 { font-weight: normal; margin-bottom:1em;}
.service h4 { font-weight: normal; margin-bottom:1em;}
.service li { margin-bottom:1em; }

div.contactlink { text-align:right; margin:3em 0 1em 0;}
div.contactlink a {
	background-color:#8E6F5C;
	padding:1em 3em;
	color:#ffffff;
	font-size:1.2em;
	font-weight:bold;
}

/*- おすすめサイトリンク 画像キャプション ----------------------------------------------------*/

.recommendlink figcaption { text-align:right;}
.recommendlink i { font-size:0.8em; margin-left:0.5em;}



/*--実績ー---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.achieve {  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  gap: 5em 5em;
  grid-auto-flow: row;
}

.achieve > div { text-align:center; width:100%; height:auto;}
.achieve > div > img { width:80%; height:450px; object-fit: cover; }
.achieve > div > span { display:block; font-size:1.2em;  text-align:left; }






/*--タブレット対応--ここに横幅が768px-960pxの時に発動するスタイルを記述-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width:768px) and (max-width: 1368px) {

/*--各ページヘッダー---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#header_title > div {width: 90%; height: 18rem; }
#header_title h1 {font-size:-1;}	

/*--ヘッダー下のサービス内容ー---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.service section {background-color:#ffffff; padding:1.5em 1.5em;}

}


/*--スマホ対応--ここに横幅が767px以下の時に発動するスタイルを記述-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

/*--各ページヘッダー---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#header_title > div {width: 90%; height: 18rem; }
#header_title h1 { font-size:-2;}	

/*--ヘッダー下のポイントー---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.service section {background-color:#ffffff; padding:1.5em 1em;}
div.contactlink { text-align:center; margin-bottom:2em;}
div.contactlink a { font-size:1em; }

/*--実績ー---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.achieve { grid-template-columns: 1fr; gap: 3em 1em; }
.achieve > div > img { width:90%; height:250px; object-fit: cover; }
.achieve > div > span { font-size:1em; line-height:1.4em;}

/*- おすすめサイトリンク 画像キャプション ----------------------------------------------------*/





}