@charset "utf-8";


section, section * {
	position: relative;
	z-index: 99;
}

.heading {
	display: flex;
	flex-direction: column;
	align-items: end;
	width: 33%;
	position: absolute;
	bottom: 38%;
	right: 12.5%;
}
.heading P {
	font-size: min(1.3vw, 21px);
	font-weight: 400;
	line-height: 1.9em;
	margin: 3vw 0 5.5vw;
}

/* wave */
.wave_ext {
	height: min(48.34vw, 730px);
}
@media screen and (max-width: 750px) {
	.wave_ext {
		height: min(77vw, 569px);
	}
}

/* title explain */
.title_explain .contents {
	width: 57%;
	max-width: 572px;
}
@media screen and (max-width: 750px) {
	.title_explain .contents {
		width: 79%;
	}
}

/* inner */
.ships_inner {
	width: 98%;
	margin: 0 auto;
}

.ships_info {
	width: 1630px;
	max-width: 98%;
	margin: 0 auto;
	padding: 0px 0 5.73%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.ships_info .img {
	width: 28%;
	height: 240px;
}
.ships_info .img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.ships_info.ships_info02 .img {
	width: 39%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
.ships_info.ships_info02 .img picture {
	width: 48%;
	height: auto;
}

.ships_info .ships_table {
	width: 67%;
}
.ships_info.ships_info02 .ships_table {
	width: 58%;
}
.ships_info .ships_table table {
	width: 100%;
	border-collapse: collapse;
}
.ships_info .ships_table table th,
.ships_info .ships_table table th *,
.ships_info .ships_table table td {
	font-size: min(1.24vw, 20px);
	font-weight: 400;
	letter-spacing: .12em;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
}
.ships_info .ships_table table th,
.ships_info .ships_table table th * {
	color: #fff;
}
.ships_info .ships_table table th,
.ships_info .ships_table table td {
	padding: 0px 5px;
	box-sizing: border-box;
	background-clip: padding-box;
	width: calc(100% / 7);
	vertical-align: middle;
}
.ships_info .ships_table table th {
	background-color: #537580;
	border-right: 1px solid #fff;
	height: 4.3em;
}
.ships_info .ships_table table th:first-child {
	background: #28326e;
}
.ships_info .ships_table table th:last-child {
	border-right: none;
}
.ships_info .ships_table table td {
	color: #000;
	border-right: 1px solid #000;
	border-bottom:1px solid #000;
	height: 5.2em;
}
.ships_info .ships_table table td:last-child {
	border-right: none;
}
.ships_info .ships_table table td:first-child {
	color: #28326e;
}
.ships_info .ships_table table td:nth-child(2n) {
    background-color: #d2d0ce;
}
.ships_info .ships_table table td:nth-child(2n-1) {
    background-color: #fff;
}
.ships_info .ships_table table tr:last-child td {
	border-bottom: none;
}

/* ships pattern 01 */
.ships_container {  
	display: grid;
	grid-template-columns: 60% auto;
	grid-template-areas:
	"image01 image02"
	"image01 image03";
	margin: 0 0 7.03%;
	gap: 3% 2.4%;
}

.ships_container .image01 { 
	grid-area: image01; 
}

.ships_container .image02 { 
	grid-area: image02;
	padding-right: 22%;
}

.ships_container .image03 { 
	grid-area: image03; 
	padding-left: 23%;
	position: absolute;
}
.ships_container .image01 img,
.ships_container .image02 img,
.ships_container .image03 img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/*ships pattern 02*/
.ships_container_second {  
	display: grid; 
	grid-template-columns: auto 60%; 
	grid-template-areas: 
    "image01 image03"
    "image02 image03"; 
	margin: 0 0 7.03%;
	gap: 3% 2.4%;
}

.ships_container_second .image01 { 
	grid-area: image01;
	padding-right: 22%;
}

.ships_container_second .image02 { 
	grid-area: image02;
	padding-left: 23%;
	
}

.ships_container_second .image03 { 
	grid-area: image03;
	position: absolute;
}
.ships_container_second .image01 img,
.ships_container_second .image02 img,
.ships_container_second .image03 img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* title */
h3 {
	text-align: center;
	color: var(--blue);
	font-size:  min(68px, 4.9vw);
	padding: 9.33% 0 1.103em;
}

/* read */
p.read {
	text-align: center;
	font-size: min(20px, 1.45vw);
	letter-spacing: 0.12em;
	margin: 0 0 5em;
	color: var(--blue);
	line-height: 2;
}
@media screen and (max-width:1359px) {
	.ships_info .ships_table {
		overflow-x:auto;
		height: auto;
		padding-bottom: 13px;
		-webkit-overflow-scrolling:touch;
		overflow-scrolling:touch;
	}
	
}
@media screen and (max-width:750px) {
	.bg_gray {
		background: var(--white);
	}

	/* inner */
	.ships_info {
		padding: 0px 0 13.33%;
		max-width: 100%;
	}
	section:last-of-type .ships_info {
		padding-bottom: 65px;
	}
	.ships_info .img {
		width: calc(100% - 14.4%);
		margin: 0 auto 25px;
		height: auto;
	}
	.ships_info .img img {
		width: 100%;
		height: auto;
	}
	.ships_info.ships_info02 .img {
		width: calc(100% - 14.4%);
		margin: 0 auto 20px;
		height: auto;
		gap: 2.4vw 0;
	}
	.ships_info.ships_info02 .img picture {
		width: 100%;
	}
	
	.ships_info .ships_table {
		width: 100%;
		height: auto;
		margin: 0 0 0 7.2%;
	}
	.ships_info.ships_info02 .ships_table {
		width: 100%;
		height: auto;
		scrollbar-width: thin;
		scrollbar-color: #AEAEAE #E9E7E6;
	}
	
	.ships_info .ships_table::-webkit-scrollbar {
	  width: 10px;
	  width: 10px;
	}
	.ships_info .ships_table::-webkit-scrollbar-track {
	  border-radius: 10px;
	  background-color: #E9E7E6;
	}
	.ships_info .ships_table::-webkit-scrollbar-track-piece{
		background-color: #E9E7E6;
	}
	
	.ships_info .ships_table::-webkit-scrollbar-thumb {
	  border-radius: 10px;
	  background-color: #AEAEAE;
	}
	.ships_info .ships_table table th,
	.ships_info .ships_table table th *,
	.ships_info .ships_table table td {
		font-size: 14px;
	}
	.ships_info .ships_table table th,
	.ships_info .ships_table table td {
		padding: 0 1em;
	}
	.ships_info .ships_table table th {
		height: 4em;		
	}
	.ships_info .ships_table table td {
		height: 4.9em;
	}

	.right:after {
		display: none;
	}
	.heading {
		position: relative;
		bottom: auto;
		right: auto;
		width: 100%;
		align-items: baseline;
	}
	
	/* ships pattern 01 */
	.ships_container {  
		display: flex;
		gap: 2.4vw 0px;
		margin: 0 0 2.4vw;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.ships_container .image01 {
		position: relative;
		width: 100%;
	}
	.ships_container .image02 { 
		width: calc(50% - 1.2vw);
		padding-right: 0%;
	}
	.ships_container .image03 {
		position: relative;
		width: calc(50% - 1.2vw); 
		padding-left: 0%;
	}
	.ships_container .image01 img,
	.ships_container .image02 img,
	.ships_container .image03 img{
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	/*ships pattern 02*/
	.ships_container_second {  
		display: flex; 
		gap: 2.4vw 0px; 
		margin: 0 0 2.4vw;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.ships_container_second .image01 { 
		padding: 0;
		width: calc(50% - 1.2vw);
		align-self: auto;
		order: 2;
	}
	.ships_container_second .image02 { 
		padding: 0;
		width: calc(50% - 1.2vw);
		align-self: auto;
		order: 3;
	}
	.ships_container_second .image03 { 
		position: relative;
		 order: 1;
	}
	.ships_container_second .image01 img,
	.ships_container_second .image02 img,
	.ships_container_second .image03 img {
		width: 100%;
		height: auto;
		object-fit: contain;
		aspect-ratio: 370/266;
	}

	/* title */
	h3 {
		font-size:  28px;
	}
	
	/* read */
	p.read {
		font-size: 14px;
		letter-spacing: .02em;
		margin: 0 0 20px;
		line-height: 1.8;
		padding: 0 5%;
	}
	
	/* line */
	hr.ship_line {
		width: 95%;
		border: none;
		border-top: 1px dashed #28326e;
		margin: 0 auto;
	}

}