@charset "utf-8";

#content main section{
	width:100%;
	padding:0;
}

@media screen and (max-width: 980px) {
	main{
		padding:50px 0;
	}
}

#content h2{
	margin-bottom:20px;
	border-bottom:none;
}

/*-------------------------------------



	ページメニュー



-------------------------------------*/

#page_nav{
	width:100%;
	border-top:1px solid #DBDBDB;
	padding:20px 0;
}

#page_nav ul{
	width:min(100%,1240px);
	padding:0 20px;
	display: flex;
	gap:50px;
	margin:0 auto;
}

#page_nav li{
	display: inline-block;
	font-size:2rem;
}

#page_nav li.act{
	border-bottom:3px solid var(--blue);
}

/*---------------------------------------

	レスポンシブ

---------------------------------------*/

@media screen and (min-width: 981px) {
	#page_nav li:not(.act){
		cursor: pointer;
		transition: 0.3s;
	}
	
	
	#page_nav li:not(.act):hover{
		color:var(--gray_text);
	}
}

/*-------------------------------------



	共通部分



-------------------------------------*/


section .main_photo{
	width:100%;
	line-height: 0;
	paddng:0;
}

section .main_photo img{
	width:100%;
	height: auto;
	object-fit: cover;
}

section .coment{
	width:min(100%,1240px);
	margin:0 auto;
	padding:80px 20px;
}

section .coment p{
	width:min(100%,790px);
}

/*---------------------------------------

	レスポンシブ

---------------------------------------*/

@media screen and (max-width: 430px) {
	section .coment{
		padding:50px 20px;
	}
}

/*-------------------------------------



	捕鯨事業



-------------------------------------*/

#hogei{
	margin-bottom:160px;
}
#hogei .inner{
	width:min(100%,1240px);
	margin:0 auto;
	padding:0 20px;
	display: grid;
	 grid-template-columns: repeat(2, 1fr);
	justify-content: space-between;
	gap:100px 50px;
}

#hogei .inner article h2{
	/*font-size:2.4rem;*/
	letter-spacing: 10px;
}

#hogei .inner article .photo{
	width:100%;
	margin-bottom:30px;
}

#hogei .inner article .photo img{
	width:100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 8px;
}


/*---------------------------------------

	レスポンシブ

---------------------------------------*/

@media screen and (max-width: 430px) {
	#hogei{
		margin-bottom:50px;
	}
	#hogei .inner{
		display: flex;
		flex-direction: column;
		gap:50px;
	}
	
	#hogei .inner article{
		width:100%;
	}
}
/*-------------------------------------



	人々



-------------------------------------*/

#content main section#people{
	width:min(100%,1240px);
	margin:0 auto;
	padding:170px 20px 70px 20px;
}

#people ul{
	width:100%;
	margin:0 auto;
	display: grid;
	 grid-template-columns: repeat(3, 1fr);
	justify-content: space-between;
	column-gap:100px;
}

#people li a{
	width:100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap:30px;
	background-color: var(--blue02);
	color:#fff;
	border-radius: 10px;
	padding: 10px 30px;
	font-size:1.5rem;
}

#people li a h3{
	font-size:2rem;
	text-align: center;
}

#people li a .icon{
	text-align: center;
	line-height: 0;
}

#people li a .icon img{
	height: 100px;
	width:auto;
}
/*---------------------------------------

	レスポンシブ

---------------------------------------*/

@media screen and (min-width: 981px) {
	#people li a img{
		opacity: 1;
		transition: 0.3s;
	}
	
	#people li a:hover img{
		opacity: 0.7;
	}
}

@media screen and (min-width:431px) and (max-width: 1100px) {
	#people ul{
		column-gap:2vw;
	}
	
	#people li a{
		gap:1.5vw;
		padding: 10px 2vw;
	}
	
}

@media screen and (min-width:431px) and (max-width: 980px) {
	#people li a .icon img{
		height: 7vw;
	}
}

@media screen and (max-width: 430px) {
	#content main section#people{
		padding:70px 20px 0 20px;
	}
	
	#people ul{
		display: flex;
		flex-direction: column;
		gap:30px;
	}
	
	#people li a{
		gap:15px;
		padding: 20px 15px;
	}
	
	#people li a .icon img{
		height: 70px;
	}
}



/*-------------------------------------



	切り替え



-------------------------------------*/

section#sarchi{
	display: none;
}