@charset "UTF-8";
/* CSS Document */
#pageWrap {
    padding: 0;
}
.f-In.zOut {
	transform: scale(1.1);
	transition: transform 5s ,opacity 1s !important;
}
.f-In.zOut.active {
	transform: scale(1.0);
}
.sec {
	position: relative;
	container-type: inline-size;
	overflow: hidden;
}
.sec .engTxt {
	position: absolute;
	top: 1em;
	right: 2em;
	color: #fff;
	font-size: clamp(13px, 1.7cqw, 24px);
	
}
#sec01 {
	.h2Box {
		position: absolute;
		right: 55%;
		width: 35%;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		h2 {
			text-align: left;
			font-weight: 400;
			letter-spacing: 0.3em;
			font-size: clamp(16px, 2.8cqw, 24px);
			padding-bottom: 1em;
		}
		.lead {
			text-align: left;
			font-size: clamp(12px, 1.0cqw, 15px);
			line-height: 2.8;
		}
	}
}
#sec02 {
	.engTxt {
	right: auto;
	left: 2em;
	
	}
	.minBox {
		background-image: url("../images/bg-fig.jpg");
		background-size: cover;
		position: absolute;
		width: 14%;
		left: 28%;
		top: 22%;
		&::after{
			content: "";
			position: absolute;
			left: 50%;
			top:100%;
			width: 2px;
			height: 140%;
			background-color: #05514f;
		}
	}
}
#sec03 {
	padding: 7% 0 3%;
	background-image: url("../images/bg-03.jpg");
	background-size: cover;
	color: #fff;
	.flex {
		.leftBox {
			width: 59.3%;
			position: relative;
			.engTxt {
				top: auto;
				right: auto;
				left: 2em;
				bottom: 0;
			}
		}
		.rightBox {
			width: 40.7%;
			position: relative;
			.engTxt {
				top: auto;
				right: 2em;
				bottom: 0;
			}
		}
	}
	.flex02 {
		margin-top: 50px;
		align-items: center;
		dl {
			width: 40%;
			color: #fff;
			dt{
				font-size: 24px;
				border-bottom: #fff solid 1px;
			}
			dd{
				font-size: 14px;
				padding-top: 1em;
				line-height: 2;
			}
		}
		.flex03 {
			width: 56%;
			.itemBox {
				width: 31%;
				max-width: 208px;
				
			}
		}
		
	}
	p.caption {
		width: 100%;
		text-align: right;
			font-size: 10px;
		padding-top: 1em;
	}
}


#sec04 {
	margin-bottom: 30px;
	.engTxt {
		top: auto;
		left: 2em;
		right: auto;
		bottom: 0;
	}
}

@media screen and (max-width: 959px) {
	#sec01 {
		.h2Box {
			right: 52%;
			width: 45%;
			h2 {
				font-size: clamp(16px, 3cqw, 24px);
			}
			.lead {
				font-size: clamp(12px, 1.0cqw, 15px);
			}
		}
	}
	#sec03 .flex02 dl dt {
		font-size: clamp(16px, 2cqw, 24px);
	}
	#sec03 .flex02 dl dd {
		font-size: clamp(12px, 1.0cqw, 15px);
	}
}
	
@media screen and (max-width: 599px) {
	#sec01 .h2Box {
	right: 5%;
  width: 90%;
  top: 4%;
  transform: translateY(0%);
		h2 {
			text-align: center;
			font-weight: 400;
			letter-spacing: 0.3em;
			font-size: clamp(13px, 5cqw, 124px);
			padding-bottom: 0.5em;
		}
		.lead {
			text-align: center;
			font-size: clamp(3px, 3.5cqw, 124px);
			line-height: 2;
		}
	}
	#sec01 .engTxt {
    top: 48%;
}
	#sec02 {
    .minBox {
			width: 20%;
      left: 22%;
      top: 22%;
			&::after {
				height: 80%;
      }
    }
	}
	#sec03 {
	padding: 50px 0 30px;
	.flex {
		width: 90%;
		margin: 0 auto;
		gap:20px; 
		.leftBox {
			width: 100%;
		}
		.rightBox {
			width: 100%;
		}
	}
	.flex02 {
		margin-top: 50px;
		align-items: center;
		dl {
			width: 90%;
			margin: 0 auto;
			dt{
				font-size: clamp(3px, 4.5cqw, 24px);
			}
			dd{
				font-size: clamp(3px, 3.5cqw, 24px);
				padding-top: 1em;
				line-height: 2;
			}
		}
		.flex03 {
			width: 90%;
			max-width: 350px;
			margin: 30px auto 0;
			.itemBox {
				width: 48%;
				max-width: 240px;
				
			}
		}
		
	}
	p.caption {
		width: 100%;
		text-align: right;
			font-size: 10px;
		padding-top: 1em;
	}
}
	
}