/* 
30px
font-size: 1.875em;
26px
font-size: 1.625em;
22px
font-size: 1.375em;
18px
font-size: 1.125em;

font-size: min(1vw, 16px);
*/

/* @media screen and (max-width: 768px) {}
@media (00px < width < 768px) {} */

/* || ------------------------------ title */

.title-dot {
  display: flex;
  align-items: baseline;
  font-family: "Zen Old Mincho", serif;
  font-weight: 900;
  font-size: 1.875em;
  margin: 0 0 20px 0;
}
.english .title-dot {
  font-family: "Libertinus Serif", serif;
  font-weight: 600;
	overflow-wrap: anywhere;
}
.title-dot::before {
  content: '';
  width: 12px;
  height: 12px;
  background: linear-gradient(0deg, #00485e 0%, #009fc9 100%);
  border-radius: 50px;
  margin: 0 16px 0 0;
  transform: translateY(-4px);
}
@media screen and (max-width: 930px) {
  .title-dot {
    font-size: min(3.13vw, 1.875em);
  }
}
@media screen and (max-width: 768px) {
  .title-dot {
    font-size: 1.5em;
  }
}

/* || ------------------------------ about */
div.about {
	position: relative;
	background-color: #E4EBF2;
	padding: 100px 0 80px 0;
}
div.about::before,
div.about::after {
	content: '';
	position: absolute;
	top: 0;

	width: 50%;
	max-width: 560px;
	height: 100%;
	background: url(../images/bg-metal.png) repeat-y;
	background-size: contain;
	mix-blend-mode: color-burn;
}
div.about::before {
	left: 0;
}
div.about::after {
	right: 0;
	transform: scale(-1, 1);
}

@media screen and (max-width: 930px) {
	div.about {
		padding: 118px 0 80px 0;
	}
}

/* || ---- catch-copy */
div.catch-copy {
	position: absolute;
	left: 7%;
	top: 360px;
	
	width: 100%;
	max-width: 820px;
	color: #FFFFFF;
	z-index: 10;
}
div.catch-copy h2::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -20px;
	width: calc(100% + 30%);
	height: 2px;
	background-color: #FFFFFF;
}
div.catch-copy h2 {
	position: relative;
	font-family: "Zen Old Mincho", serif;
	font-size: 3.75em;
	font-weight: 900;
	text-shadow: 0px 0px 6px #00485E;
	
	width: fit-content;
	margin: 0 0 40px 0;
}
.english div.catch-copy h2 {
  font-family: "Libertinus Serif", serif;
  font-weight: 600;
}
div.catch-copy p {
	font-size: 1.125em;
	font-weight: 700;
	text-shadow: 0px 0px 2px #00485E, 0px 0px 6px #00485E;

	width: 100%;
	max-width: 420px;
	margin: 0 0 0 0;
}
figure.mv {
	position: relative;
	width: 90%;
	max-width: 1700px;
	margin: 0 0 80px auto;
	z-index: 5;
}
figure.mv img {
	object-fit: cover;
	object-position: 58% 50%;
	width: 100%;
	height: 700px;
}
figure.mv::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;

	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, #000000 0%, transparent 100%);
}

/* || ---- company */
div.company {
	text-align: center;
	z-index: 10;
	padding: 0 20px 0 20px;
}
div.company::before {
	content: '';
	position: absolute;
	right: 4%;
	bottom: 44px;

	background: url('../images/deco-logo.png') no-repeat;
	background-size: contain;
	width: 510px;
	height: 510px;
	transform: rotate(15deg);
	opacity: 0.06;
	
	z-index: 0;
}
div.company h2 {
	position: relative;
	font-family: "Zen Old Mincho", serif;
	font-size: 1.875em;
	font-weight: 900;
	line-height: 1.6;

	width: fit-content;
	margin: 0 auto 30px auto;
	z-index: 5;
}
.english div.company h2 {
  font-family: "Libertinus Serif", serif;
  font-weight: 600;
	overflow-wrap: anywhere;
}
div.company p {
	position: relative;
	width: 100%;
	max-width: 630px;
	margin: 0 auto 40px auto;
	z-index: 5;
}
div.company a.btn-blue {
	margin: 0 auto 0 auto;
}

@media screen and (max-width: 930px) {
	div.catch-copy h2 {
		font-size: min(5.99vw, 3.75em);
	}
	div.company h2 {
		font-size: min(3.13vw, 1.875em);
	}
}
@media screen and (max-width: 768px) {
	div.about {
		padding: 118px 0 60px 0;
	}
	figure.mv {
		margin: 0 0 60px auto;
	}
	.english figure.mv {
		margin-bottom: 80px;
	}

	div.catch-copy {
		top: 330px;
		left: 20px;
		width: fit-content;
		margin: 0 20px 0 0;
	}
	.english 	div.catch-copy {
		top: 280px;
	}
	div.catch-copy h2 {
		width: 100%;
		font-size: min(8vw, 1.875em);
	}
	div.catch-copy p {
		font-size: 1em;
	}
	div.catch-copy h2 br,
	div.catch-copy p br {
		display: none;
	}
	figure.mv img {
		height: 400px;
	}

	div.company::before {
		width: 250px;
		height: 250px;
		bottom: 220px;
		right: -30px;
	}
	div.company h2 {
		font-size: 1.5em;
		margin: 0 auto 16px auto;
	}
	div.company p {
		max-width: 628px;
		text-align: left;
	}
	div.company p br.sp-none {
		display: none;
	}
}
@media screen and (max-width: 425px) {
	div.company h2 {
		text-align: left;
	}
}

/* || ------------------------------ business */
section.business {
	display: flex;
	align-items: center;

	width: 100%;
	background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
}
section.business div.detail {
	width: 50%;
	max-width: 570px;
	padding: 0 30px 0 30px;
	margin: 0 auto 0 auto;
}
section.business div.detail p {
	margin: 0 0 40px 0;
}
section.business ul {
	display: flex;
	align-items: stretch;
	width: 50%;
}
section.business ul li {
	width: 50%;
}
section.business ul li:first-child {
	background-color: #00485E;
}
section.business ul li:nth-child(2) {
	background-color: #007498;
}
section.business ul li figure {
	width: 100%;
	background-color: #d2dbe5;
	background: linear-gradient(60deg, #edf0f5 0, #ffffff 100%);
}
section.business ul li:nth-child(2) figure {
	background-color: #e7edf3;
}
section.business ul li figure img {
	object-fit: contain;
	min-height: 200px;
}
section.business ul li h3 {
	text-align: center;
	font-size: 1.375em;
	color: #FFFFFF;
	padding: 30px 30px 0 30px;
	margin: 0 0 10px 0;
}
section.business ul li p {
	width: 100%;
	max-width: 400px;
	color: #FFFFFF;
	padding: 0 30px 50px 30px;
	margin: 0 auto 0 auto;
}

@media screen and (max-width: 930px) {
	section.business div.detail {
		width: 34%;
	}
	section.business ul {
		width: 66%;
	}
}
@media screen and (max-width: 768px) {
	section.business {
		flex-wrap: wrap;
	}
	section.business div.detail {
		width: 100%;
		margin: 50px auto 50px auto;
		order: 2;
	}
	section.business ul {
		width: 100%;
	}
	section.business ul li h3 {
		font-size: 1.25em;
		padding: 20px 20px 0 20px;
	}
	section.business ul li p {
		padding: 0 20px 30px 20px;
	}
	section.business div.detail p br {
		display: none;
	}
}
@media screen and (max-width: 510px) {
	section.business ul {
		flex-direction: column;
	}
	section.business ul li {
		width: 100%;
	}
	section.business ul li figure {
		padding: 30px 30px 0 30px;
	}
}

/* || ------------------------------ equipment */

section.equipment {
	display: flex;
	align-items: center;

	width: 100%;
	background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
	margin: 0 0 150px 0;
}
section.equipment figure {
	width: 50%;
}
section.equipment figure img {
	object-fit: cover;
	width: 100%;
	min-height: 420px;
}
section.equipment div.detail {
	width: 50%;
	max-width: 570px;
	padding: 0 30px 0 30px;
	margin: 0 auto 0 auto;
}
section.equipment div.detail p {
	margin: 0 0 40px 0;
}

.english section.equipment {
	margin: 0 0 0 0;
}

@media screen and (max-width: 768px) {
	section.equipment {
		flex-wrap: wrap;
		margin: 0 0 160px;
	}
	section.equipment div.detail {
		width: 100%;
		padding: 0 20px 0 20px;
		margin: 50px auto 50px auto;
	}
	section.equipment figure {
		width: 100%;
	}
	section.equipment figure img {
		min-height: 300px;
	}
}

/* || ------------------------------ recruit */

section.recruit {
	width: 100%;
	padding: 0 20px 0 20px;
	margin: 0 0 100px 0;
}
section.recruit div.inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	width: 100%;
	max-width: 1600px;
	background: linear-gradient(90deg, #005065 0%, #009fc9 100%);
	padding: 50px 50px 50px 50px;
	margin: 0 auto 0 auto;
}
section.recruit div.detail {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	
	width: 50%;
	max-width: 580px;
	padding: 0 50px 0 0;
	margin: 0 auto 0 auto;
}
section.recruit div.detail h2 {
	width: 100%;
	color: #FFFFFF;
}
section.recruit div.detail p {
	width: 100%;
	color: #FFFFFF;
	margin: 0 0 40px 0;
}
section.recruit div.detail a {
	width: 49%;
}
section.recruit div.detail a.btn-blue::after {
	background: #009FC9;
}
section.recruit figure {
	width: 50%;
	max-width: 750px;
	margin: -100px 0 auto 0;
}
section.recruit figure img {
	object-fit: cover;
	width: 100%;
	height: 500px;
}
@media screen and (max-width: 1100px) {
	section.recruit div.inner {
		padding: 50px 30px 50px 30px;
	}
	section.recruit figure img {
		height: 460px;
	}
	section.recruit div.detail {
		padding: 0 30px 0 0;
	}
	section.recruit div.detail a {
		width: 100%;
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 768px) {
	section.recruit {
		margin: 0 0 50px 0;
	}
	section.recruit div.inner {
		flex-direction: column-reverse;
		padding: 0 20px 40px 20px;
	}
	section.recruit div.detail {
		width: 100%;
		justify-content: center;
		padding: 0 0 0 0;
	}
	section.recruit figure {
		width: 100%;
		max-width: 600px;
		margin: -60px 0 30px 0;
	}
	section.recruit figure img {
		height: 240px;
	}
	section.recruit div.detail a {
		max-width: 300px;
		margin: 0 5px 10px 5px;
	}
}