@charset "utf-8";
#content #mainphoto img{
		object-position: left top;
}

@media screen and (max-width: 980px) {
	#content #mainphoto img{
		object-position: center;
	}
}

main{
	padding:50px 0 0 0;
}

#content h2{
	margin-bottom:120px;
}

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

		レスポンシブ

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

@media screen and (max-width: 430px) {
	#content h2{
		margin-bottom:50px;
	}
}
/*-------------------------------


		コメント


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

#content main section#coment{
	line-height: 2;
	padding:100px 20px 0 20px;
}

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


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

	レスポンシブ

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

@media screen and (max-width: 430px) {
	#content section#coment{
		padding:60px 20px 0 20px;
	}
}


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


		クジラの種類


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

#content #kind h2{
	margin-bottom:100px;
}
#kind_inner{
	width:100%;
	display: flex;
	gap:30px;
	align-items: stretch;
	justify-content: center;
}

#kind_inner article{
	flex:1;
	text-align: center;
}

#kind_inner .title{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap:10px;
	width:200px;
	height: 200px;
	background: #02245D;
	border-radius: 100%/100%;
	color:#fff;
	font-weight: bold;
	text-align: center;
	margin-bottom:20px;
	margin:0 auto 30px auto;
}

#kind_inner h3{
	font-size:24px;
	padding-bottom:0;
	border-bottom:none;
}

#kind_inner table{
	width:auto;
	border-collapse:separate;
	border-spacing:5;
	margin:0 auto;
}

#kind_inner .text{
	display: inline-block;
	font-size:1.45rem;
	/*text-align: left;*/
}

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

		レスポンシブ

-------------------------------*/
@media screen and (max-width: 430px) {
	#content #kind h2{
		margin-bottom:50px;
	}
	#kind_inner{
		flex-direction: column;
		justify-content: center;
		gap:30px;
	}
}

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


		部位


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

#part_inner{
	width:100%;
	display: flex;
	gap:20px;
	align-items: stretch; 
}

#part_inner .p_item{
	flex:1;
}

#part_inner .p_item .image{
	width:100%;
	line-height: 0;
}

#part_inner .p_item .image img{
	width:100%;
	height: auto;
}
#part_inner dl{
	flex:1;
	margin-top:50px;
	width:100%;
	max-width:100%;
}

#part_inner dt{
	margin-bottom:20px;
	padding-left: 5px;
	border-radius: 5px;
	display: flex;
	align-items:stretch;
	align-items: center;
	cursor: pointer;
}

#part_inner dt::after{
	 font-family: "Noto Sans JP", sans-serif;
	content:"＋";
	width:auto;
	height: 40px;
	line-height: 1;
	padding-right:3px;
	aspect-ratio:1/1;
	color:#fff;
	font-size:20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	text-align: right;
	background-color: rgba(255,255,255,0.3);
	margin-left:5px;
}

#part_inner dt.act::after{
	content:"ー";
	font-size:18px;
}

#part_inner dt .no{
	font-family: "Roboto", sans-serif;
  font-weight: 800;
	width:34px;
	height: 34px;
	line-height: 34px;
	font-size:23px;
	background-color: #fff;
	border-radius: 50%/50%;
	text-align: center;
	letter-spacing: -0.05em;
}

#part_inner dt .text{
	flex:1;
	font-size:20px;
	line-height: 1;
	margin-left:10px;
	color:#fff;

}

#part_inner dt  .syousai{
	background-color: rgba(255,255,255,1);
	border-radius:5px;
	font-size:14px;
	line-height: normal;
	margin-right:5px;
	padding:0 8px;
}
#part_A dt,
#part_B dt.p_a{
	background-color:#76b7cd;
}

#part_A dt .no,
#part_B dt.p_a .no{
	color:#76b7cd;
}

#part_B dt{
	background-color:#ee8b9a;
}

#part_B dt .no{
	color:#ee8b9a;
}

#part_inner #part_B  dt  .syousai{
	color:#ee8b9a;
}

#part_inner #part_A dt  .syousai,
#part_inner #part_B dt.p_a  .syousai {
	color:#2E8EAF;
}
#part dd{
	padding:0 5px 20px 5px;
	display: none;
}

#part dd .photo{
	width: min(95%,200px);
	line-height: 0;
	margin:0 auto 20px auto;
}

#part dd .photo img{
	width:100%;
	height: auto;
}

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

		レスポンシブ

-------------------------------*/
@media screen and (max-width: 930px) {
	#part_inner{
		width:min(100%,600px);
		display: block;
		margin:0 auto;
		margin-top:50px;
	}
	
	#part_inner dt::after{
		aspect-ratio:auto;
	}
	#part_inner .p_item .image{
		width:min(100%,600px);
		margin:0 auto;
	}
	
	#part_B{
		margin-top:50px;
	}
}

@media screen and (max-width: 430px) {
	#part .l-content{
		padding:0;
	}	
}

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


		メリット


-------------------------------*/
#content section#merit {
	padding:100px 20px 170px 20px;
}
#merit .zu{
	width:min(100%,980px);
	line-height: 0;
	margin:0 auto 100px auto;
}

#merit .zu img{
	width:100%;
	height: auto;
}

#merit li{
	display: flex;
	align-items: center;
	padding:30px 20px 30px 50px;
	background-color: var(--gray);
	margin-bottom:10px;
	border-radius: 3px;
}

#merit li .ico{
	font-weight: 700;
	width:130px;
	height: 130px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 50% / 50%;
	font-size:25px;
	color:#fff;
	background-color: #01abc2;
	line-height: 1.2;
	padding:0 0 10px 0;
}

#merit li .ico strong{
	font-size:40px;
	font-weight: 700!important;
}


#merit li:nth-child(2) .ico{
	background-color: #4eb8ae;
}


#merit li:nth-child(3) .ico{
	background-color: #66bb6a;
}


#merit li:nth-child(4) .ico{
	background-color: #bfcb39;
}


#merit li:nth-child(5) .ico{
	background-color: #fca032;
}


#merit li:nth-child(6) .ico{
	background-color: #fc9474;
}

#merit li .text{
	flex:1;
	margin-left:50px;
	font-weight: 700;
}

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

		レスポンシブ

-------------------------------*/
@media screen and (max-width: 430px) {
	#content section#merit {
		padding:70px 20px 70px 20px;
	}
	#merit li{
		display: block;
		padding:30px 15px;
	}
	
	#merit li .ico{
		width:100px;
		height: 100px;
		margin:0 auto 20px auto;
		font-size:20px;
	}
	
	#merit li .ico strong{
		font-size:30px;
	}
	
	#merit li .text{
		margin-left:0;
	}
}


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


		レストラン


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

#content main section#king{
	width:100%;
	height: 450px;
	padding:100px 20px 0 20px;
	background-image: url("../images/service/service_back.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: right bottom -30px;
	margin-top:50px;
}

#king .inner{
	max-width:1200px;
	margin:0 auto;
	/*font-size:18px;*/
	display: flex;
	flex-direction: column;
	gap:20px;
	/*justify-content: center;*/
}


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

		レスポンシブ

-------------------------------*/
@media screen and (max-width: 430px) {
	#content main section#king{
			hegiht:auto;
			background-image: url("../images/service/service_back_sp.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center bottom;
			padding:80px 0 100px 0;
			display: block;
	}
	
	#king .inner{
		padding:0 20px!important;
	}
}


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


		リンク


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

section#bana ul{
	width:min(100%,1200px);
	display: flex;
	justify-content: center;
	gap:20px;
}

section#bana li{
	flex:1;
	max-width:360px;
	line-height: 0;
}

section#bana li img{
	width:100%;
	height: auto;
	transition: ease-in-out 0.3s;
}

section#bana li a:hover img {
	opacity: 0.5;
}


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

		レスポンシブ

-------------------------------*/
@media screen and (max-width: 430px) {
	section#bana ul{
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding:0 20px;
	}
	
	section#bana li{
		width:100%;
		flex:none;
	}
}