@charset "UTF-8";

#overseas .mainImage {
	background-image: url(../images/overseas/main-image.jpg);
	letter-spacing: 10px;
	text-align: center;
}

.contentsEn .contentsTitle {
	font-size: 1.8rem;
	line-height: 1.5;
	letter-spacing: 2px;
}

.contentsEn .inner {
	padding-top: 0!important;
	padding-bottom: 0!important;
}

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

	.contentsEn .contentsTitle {
		font-size: 1.4rem;
		line-height: 1.5;
		letter-spacing: 2px;
	}

}

/*========================================
overseasBox
========================================*/

.overseasBox {
  box-sizing: border-box;
  display: flex;
  margin: 0 auto 90px;
  width: 100%;
}

.overseasBoxL .img {
 	order: 2;  width: 50%;
}

.overseasBoxL .info {
	order: 1;  width: 50%;
	padding: 0 50px 0 20px;
	box-sizing: border-box;
}

.overseasBoxR .img {
 	order: 1;  width: 50%;
}

.overseasBoxR .info {
	order: 2;  width: 50%;
	padding: 0 20px 0 50px;
	box-sizing: border-box;
}

.overseasBox .title {
	font-size: 1.8rem;
	margin-bottom: 30px;
}

@media screen and (max-width: 1024px) {
	.overseasBox {
		margin: 0 auto 45px;
		flex-wrap: wrap;
	}

	.overseasBoxL .img {
	 	order: 1!important;  
	 	width: 100%;
	}

	.overseasBoxL .info {
	 	order: 2!important;  
	 	width: 100%;
	 	padding: 20px 0 0px!important;
	}

	.overseasBoxR .img {
	 	order: 1!important;  
	 	width: 100%;
	}

	.overseasBoxR .info {
	 	order: 2!important;  
	 	width: 100%;
	 	padding: 20px 0 0px!important;
	}
	
	.overseasBox .title {
		font-size: 1.2rem;
		margin-bottom: 10px;
	}
}

/*========================================
overseasIntrodution
========================================*/

#overseasIntrodution {
	padding: 120px 0;
}

.overseasIntrodutionFv {
	display: flex;
	width: 100%;
	overflow: hidden;
	margin-bottom: 90px;
}

.overseasIntrodutionFv img {
	width: 100%;
}


@media screen and (min-width: 1025px) {
	#overseasIntrodution .inner {
		padding: 120px 20px;
		  max-width: 100%;
	}
	#overseasIntrodution .overseasBox .img img {
		width: 100%;
	}
	#overseasIntrodution .overseasBoxL .infoInner {
		max-width: 590px;
		float: right;
		padding: 0 50px 0 20px;
	}
	#overseasIntrodution .overseasBoxR .infoInner {
		max-width: 590px;
		float: left;
		padding: 0 20px 0 50px;
	}
}

@media screen and (max-width: 1024px) {
	#overseasIntrodution {
		padding: 60px 0;
	}

	.overseasIntrodutionFv {
		margin-bottom: 45px;
	}
}

/*========================================
kindsOfFish
========================================*/

#kindsOfFish {	
	padding: 120px 0;
}

#kindsOfFish .kindsList li  {
	padding: 20px;
}

#kindsOfFish .kindsList li .title {
	font-size: 1.4rem;
	margin-bottom: 20px;
}

#kindsOfFish .kindsList li .flex {
	display: flex;
}

#kindsOfFish .kindsList li .img {
	width: 400px;
}

#kindsOfFish .kindsList li .info {
	width: calc(100% - 420px);
	margin-left: 20px;
}

#kindsOfFish .kindsList li th {
	font-size: 1.1rem;
	white-space: nowrap;
	padding: 10px;
}
#kindsOfFish .kindsList li td {
	padding: 10px;
}

#kindsOfFish .kindsList li table tr:first-child th,
#kindsOfFish .kindsList li table tr:first-child td {
	border-bottom: 1px solid #3a3a3a;
}

@media screen and (max-width: 1024px) {
	#kindsOfFish {
		padding: 60px 0;
	}

	#kindsOfFish .kindsList li  {
		padding: 10px;
	}

	#kindsOfFish .kindsList li .title {
		font-size: 1.2rem;
		margin-bottom: 10px;
	}

	#kindsOfFish .kindsList li .flex {
		display: block;
	}

	#kindsOfFish .kindsList li .img {
		width: 100%;
	}
	
	#kindsOfFish .kindsList li .img img {
		width: 100%;	
	}

	#kindsOfFish .kindsList li .info {
		width: 100%;
		margin: 10px 0 0;
	}

	#kindsOfFish .kindsList li th {
		font-size: 1rem;
		display: block;
		padding: 0 0 5px;
		
	}
	#kindsOfFish .kindsList li td {
		display: block;
		padding: 5px 0 10px 10px;
	}

	#kindsOfFish .kindsList li table th,
	#kindsOfFish .kindsList li table tr:first-child td {
		border-bottom: 1px solid #3a3a3a;
	}
	
}

/*========================================
commitment
========================================*/

#commitment {
	padding: 120px 0;
}

@media screen and (max-width: 1024px) {
	#commitment {
		padding: 60px 0;
	}
	#commitment .contentsTitle {
		padding: 0 20px;
		font-size: 1.3rem;
	}
}

/*========================================
nachikatsuura
========================================*/

#nachikatsuura {
	padding: 120px 0;
}

#nachikatsuura .banner {
	padding: 50px 50px 0;
}

@media screen and (max-width: 1024px) {
	#nachikatsuura {
		padding: 60px 0;
	}	
	#nachikatsuura .contentsTitle {
		padding: 0 20px;
		font-size: 1.3rem;
	}
	#nachikatsuura .banner {
		padding: 30px 0 0;
	}
}

/*========================================
experience
========================================*/

#experience {
	padding: 120px 0;
}

.experienceAddress {
	background: #1d1d1d;
	padding: 30px;
}

.experienceAddress .map {
	margin-bottom: 10px;
}

.experienceAddress .map iframe {
	width: 100%;
	height: 300px;
}

@media screen and (max-width: 1024px) {
	#experience {
		padding: 60px 0;
	}	
	#experience .contentsTitle {
		padding: 0 20px;
		font-size: 1.3rem;
	}
	.experienceAddress {
		padding: 10px;
	}

	.experienceAddress .map iframe {
		width: 100%;
		height: 400px;
	}
}