@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; }



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

.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 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;
}




/*--タブレット対応--ここに横幅が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; }


}