@charset "utf-8";
main{
	padding:50px 0 0 0;
}

#content main section{
	width:100%;
	padding:0;
}
@media screen and (max-width: 980px) {
	main{
		padding:80px 0 100px 0;
	}
}
/*-------------------------------------


	事業紹介


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

#mainvisual{
	width: 100%;
	position: relative;
	line-height: 0;
}

#mainvisual img{
	width:100%;
	height: auto;
}

#mainvisual_photo{
	width:100%;
	height: auto;
	position: relative;
	z-index: 1;
}

#mainvisual .hogei_btn {
  width: 3.06vw;
	position: absolute;
  bottom: 43%;
  right: 28%;
	z-index: 2;
  /*animation: 2s fuwafuwa1 infinite;*/
	    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.5));
	cursor: pointer;
}

#mainvisual .chousa_btn{
	width: 3.06vw;
position: absolute;
  bottom: 23%;
  left: 20%;
	z-index: 2;
	/*animation: 2s fuwafuwa1 infinite;*/
	filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.5));
	cursor: pointer;
}

#people{
	display: inline-flex;
	justify-content: flex-end;
	position: absolute;
	bottom: 4.5%;
	right: 4.5%;
	gap:30px;
	z-index: 2;
}

#people li{
	width: 8vw;
	/*animation: fuwafuwa1 2s infinite;*/
	filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.5));
}

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

#info .text{
	flex:1;
}

#info .bana{
	width:min(100%,380px);
}

@keyframes fuwafuwa1 {
  0%, 100% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1);
  }
}

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

	レスポンシブ

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

@media screen and (min-width: 981px) {
	#mainvisual .hogei_btn,
	#mainvisual .chousa_btn{
		transition: 0.3s ease;
	}
	#mainvisual .hogei_btn:hover,
	#mainvisual .chousa_btn:hover{
		filter:none;
	}
	
	#mainvisual .hogei_btn img,
	#mainvisual .chousa_btn img{
		opacity: 1;
		transition: opacity 0.3s ease;
	}
	
	#mainvisual .hogei_btn:hover img,
	#mainvisual .chousa_btn:hover img{
		opacity: 0;
	}
	
	#mainvisual .hogei_btn::before,
	#mainvisual .chousa_btn::before{
		content:'';
		width:100%;
		height: 100%;
		display: block;
		background-image: url("../images/project/btn_hoge_hoveri.png");
		background-size: cover;
		position: absolute;
		top:0;
		left:0;
		z-index: 3;
		opacity: 0;
		transition: opacity 0.3s ease;
	}
	
	#mainvisual .chousa_btn:before{
		background-image: url("../images/project/btn_chousa_hover.png");
	}
	
	#mainvisual .hogei_btn:hover::before,
	#mainvisual .chousa_btn:hover::before{
		opacity: 1;
	}
	
	#people li{
		transition: all 0.3s ease;
	}
	
	#people li:hover{
		opacity: 0.7;
		filter:none;
	}
}

@media screen and (max-width: 980px) {
	#mainvisual .hogei_btn,
	#mainvisual .chousa_btn{
		 width: 6.8vw;
	}
	
	#mainvisual .hogei_btn{
		right: 5%;
	}
	
	#mainvisual .chousa_btn{
		 left: 8%;
    bottom: 24%;
	}
	
	#people{
		gap:5px;
	}
	
	#people li{
		width: 12.5vw;
	}
}

@media screen and (min-width: 431px) and (max-width: 980px) {
	#info{
		gap:3.0vw;
	}
	#info .bana{
		width:30.7vw
	}
}

@media screen and (max-width: 430px) {
	#info{
		flex-direction: column;
		gap:20px;
		justify-content: center;
		padding:30px 20px 0 20px;
	}
}

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


	所有船舶について


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

#content section#ship,
#content section#food{
	width:100%;
	padding:60px 0;
}

#ship h2,
#food h2{
	border-bottom:none;
	margin-bottom:0;
}

#ship{
	background-image: url("../images/project/kangeimaru02.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

#food{
	margin:2px auto 0 auto;
	background-image: url("../images/project/sec03-bg1.webp");
	background-size: 100% auto;
	background-repeat: no-repeat;
}

#ship .main,
#food .main{
	width:min(100%,1240px);
	margin:0 auto;
}

#ship .inner,
#food .inner{
	width:min(100%,470px);
	height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#ship .bana,
#food .bana{
	width:min(100%,380px);
	margin-top:20px;
}


#ship .photo,
#food .photo{
	display: none;
}

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

	レスポンシブ

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

@media screen and (min-width: 981px) {
	#ship .inner,
	#food .inner{
		color:#fff;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); 
	}
	
	#ship .inner h2 span.en,
	#food .inner h2 span.en{
		color:rgba(255,255,255,0.79);
	}
}
@media screen and (max-width: 980px) {
	#content section#ship,
	#content section#food{
		padding:80px 20px 0 20px;
	}
	
	#ship,
	#food{
		background-image: none;
	}
	
	#ship .inner,
	#food .inner{
		width:100%;
		height: auto;
	}
	#ship .photo,
	#food .photo{
		width:100%;
		line-height: 0;
		display: block;
		margin-bottom:20px;
	}
	
	#ship .photo img,
	#food .photo img{
		width:100%;
		border-radius: 5px;
	}
}

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


	モーダル


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

.modal{
	width:100%;
	height: 100dvh;
	position: fixed;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.80);
	z-index: 99999;
	/*display: none;*/
	display: none;
	opacity: 0;
	transition: opacity 1s ease;
	 cursor: pointer;
}

.modal.act{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 1;
}

.modal .inner{
	width:min(100%,420px);
	margin:0 auto;
	padding:30px 40px;
	position: relative;
	color:#fff;
	background-color:var(--blue02);
	border-radius: 10px;
	font-size:1.5rem;	
  box-shadow: 1px 3px 10px 0px rgba(0, 0, 0, 0.6);
	opacity: 0;
	  cursor: default;
}

.modal.act .inner{
	animation: fadein 0.3s ease 0.5s forwards;
}

.modal h3{
	font-size:2rem;
}

.modal .modal_photo{
	width:100%;
	margin:30px 0;
	line-height: 0;
}

.modal .modal_photo img{
	width:100%;
	height: auto;
	border-radius: 5px;
}

.modal a.link{
	margin-top:15px;
	display: inline-block;
	border-bottom:2px solid #fff;
	line-height: 1.4;
}

.modal .close{
	position: absolute;
	top:20px;
	right:20px;
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

@keyframes fadein {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

	レスポンシブ

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

@media screen and (min-width: 981px) {
	.modal a.link{
		opacity: 1;
		transition: opacity 1s ease;
	}
	
	.modal a.link:hover{
		opacity: 0.6;	
	}
}