@charset "utf-8";

h3,
h3 span {
	color: var(--red);
	font-size: min(3.4vw, 63px);
	font-weight: 600;
}
h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
h3 span {
	white-space: nowrap;
}
h3:before {
	content: "";
	display: inline-block;
	height: min(4vw, 75px);
	width: .2em;
	background: var(--red);
	position: absolute;
}
h3 span {
	padding-left: .5em;
}
h3 picture {
	width: auto;
	height: min(3.7vw, 58px);
}

section, section * {
	position: relative;
	z-index: 99;
}
section:not(#business) {
	margin-top: min(19.84%, 381px);	
}

/* wave */
.wave_ext {
	height: min(41vw, 591px);
}

/* title explain */
.title_explain .contents {
	width: 61%;
	max-width: 645px;
}
@media screen and (max-width: 750px) {
	.title_explain .contents {
		width: 90%;
	}
}

.contents {
	margin-top: -1px;
}

.left:after,
.right:after {
	content: "";
	display: inline-block;
	background: var(--gray);
	width: 70%;
	height: 101%;
	position: absolute;
	z-index: 0
}
.left:after {
	left: 0;
}
.right:after {
	right: 0;
}

.left .inner,
.right .inner {
	display: grid;
	grid-template-rows: auto 1fr;
	align-items: baseline;
	column-gap: 4.4vw;
	row-gap: 5.5vw;
	width: 100%;
	max-width: 100%;
 }
 .left .inner {
 	grid-template-areas:
	"item1 item3" 
	"item2 item3";
	grid-template-columns: auto 50vw;
	padding-left: 14%;
 }
.right .inner {
	grid-template-areas:
	"item1 item2" 
	"item1 item3";
	grid-template-columns: 50vw auto;
	padding-right: 14%;
}
.left picture:nth-child(1),
.right picture:nth-child(1) {
	position: absolute;
}
.left picture *,
.right picture * {
	object-fit: contain;
	object-position: bottom left;
	width: 100%;
	height: 100%;
}

.heading {
	display: flex;
	flex-direction: column;
}
.heading P {
	font-size: min(1.25vw, 21px);
	font-weight: 400;
	line-height: 1.9em;
	margin-top: 3vw;
}
.heading picture * {
	object-position: bottom right;
}

/* deck department */
section#deck_department {
	margin-top: 4.84%;
}
#deck_department:after {
	top: 4.8vw;
}
#deck_department picture:nth-child(1) {
	grid-area: item1;
}
#deck_department picture:nth-child(2) {
	grid-area: item3;
}
#deck_department .heading {
	grid-area: item2;
	padding-top: 8vw;
}

/* engine_department */
#engine_department:after {
	top: -4.8vw;
	height: calc(101% + 8vw);
}
#engine_department picture:nth-child(1) {
	grid-area: item3;
	padding-top: 8vw;
}
#engine_department picture:nth-child(2) {
	grid-area: item1;
}
#engine_department .heading {
	grid-area: item2;
}

/* administrative_department */
#administrative_department:after {
	top: -4.3vw;
	height: calc(101% + 8vw);
}
#administrative_department picture:nth-child(1) {
	grid-area: item1;
	padding-top: 8vw;
}
#administrative_department picture:nth-child(2) {
	grid-area: item2;
}
#administrative_department .heading {
	grid-area: item3;
	
}

/* ship_management */
section#ship_management {
	margin-bottom: min(16.88vw, 324px);
}
#ship_management:after {
	top: 4.8vw;
}
#ship_management picture:nth-child(1) {
	grid-area: item3;
	width: 100%;
}
#ship_management picture:nth-child(2) {
	grid-area: item2;
}
#ship_management .heading {
	grid-area: item1;
	padding-top: 8vw;
}

@media screen and (max-width:750px) {
	h3,
	h3 span,
	.heading {
		font-size: 27px;
	}
	h3{
		justify-content: flex-start;
		align-items: baseline;
		gap: 14px;
	}
	h3:before {
		height: 31px;
		margin-top: 5px;
	}
	h3 picture {
		height: 11px;
		padding: 0 !important;
		margin-top: 0 !important;
	}
	
	section:not(#business) {
		margin-top: min(15.33%, 115px);
	}
	
	.wave_ext {
		height: min(69.67vw, 520px);
	}
	
	.left .inner,
	.right .inner {
		display: block;
		padding: 0;
		aspect-ratio: none;
	}
	.left:after,
	.right:after {
		display: none;
	}
	.left picture:nth-child(1),
	.right picture:nth-child(1) {
		position: relative;
		padding-top: 0 !important;
	}
	.left picture:nth-child(2),
	.right picture:nth-child(2) {
		margin-top: 20px;
	}
	.left picture:nth-child(2) {
		padding-right: 24.27%;
	}
	.right picture:nth-child(2) {
		padding-left: 24.27%;
	}

	.heading {
		padding: 1em 6.93% 0 6.93% !important;
	}
	.heading P {
		font-size: 14px;
		margin: 1.8em 0 0;
	}

	/* deck department */
	section#deck_department {
		margin-top: 8.6%;
	}

	/* ship_management */
	section#ship_management {
		margin-bottom: 83px;
	}
}