@charset "utf-8";
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/*Cover*/
.cover {
	margin-top: 100px;
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
}

.cover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cover .title{
	position: absolute;
	left: 28px;
	bottom: 22px;
	color: #FFFFFF;
	margin: 0 120px;
}

.cover .title h1{
	margin:0;
	font-family: "Poppins", sans-serif;
	font-size: 64px;
	font-weight: 700;
	line-height: 67px;
}

.cover .title p{
	margin:0 0 15px;
	font-family: "Open Sans", sans-serif;
	font-size: 40px;
	font-weight: 400;
}

/*Information*/
.about {
	margin: 18px 120px 0;
	padding: 0 18px;
	color: #000000;
	font-family: "Noto Sans", sans-serif;
	font-size: 20px;
	font-weight: 200;
	text-align: justify;
}

.index-box {
	width: 640px;
	margin: 22px auto 50px;
	padding: 18px 16px;
	border: 1px dashed #375A10;
	text-align: center;
}

.index-box h3{
	margin: 0 0 10px;
	color: #274001;
	font-family: "Noto Sans", sans-serif;
	font-size: 32px;
	font-weight: 700;
	position: relative;
	display: inline-block;
	padding-bottom: 10px;
}

.index-box h3::after{
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 500px;
	height: 2px;
	background: #274001;
}

.index-box ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	column-gap: 10px;
}

.index-box a{
	color: #AFBF36;
	font-family: "Noto Sans", sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 65px;
	text-decoration: none;
}

.index-box a:hover{
	text-decoration: underline;
	color: #274001;
}

.section1 {
	background-color: #F0F2BB;
}

.section2{
	background-color: #FFFFFF;
}

.section3 {
	background-color: #375A10;
	padding: 56px 5%;
}

.section1, .section2 {
	padding: 56px 5%;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 42px;
}

.section1 > div, .section2 > img{
	margin-left: 120px;
}

.section2 > div, .section1 > img{
	margin-right: 120px;
}

.section3> div{
	margin: 0 120px;
}

.section1 h2, .section2 h2, .section3 h2, .section4 h2{
	margin: 0 0 14px;
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-size: 48px;
}

.section1 p, .section2 p, .section3 p, .section4 p{
	margin: 0 0 12px;
	font-family: "Noto Sans", sans-serif;
	font-weight: 200;
	font-size: 20px;
	text-align: justify;
}

.section1 h2, .section2 h2, .section4 h2{
	color: #274001;
}

.section1 p, .section2 p, .section4 p{
	color: #000000;
}

.section3 h2, .section3 p{
	color: #F0F2BB;
}

.section1 > img, .section2 > img{
	width: 320px;
	max-width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 32px;
	display: block;
}

#history > img{
	width: 320px;
	height: 660px;
}

.section2 {
	flex-direction: row-reverse;
}

.dir h3, .get h3, .section4 h3{
	margin: 0 0 12px;
	font-family: "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 24px;
	color: #000000;
}

.dir li, .get li{
	margin: 0 0 12px;
	font-family: "Noto Sans", sans-serif;
	font-weight: 200;
	font-size: 20px;
	text-align: justify;
	color: #000000;
}

.section4 {
	margin: 50px 180px;
}

.dir, .get{ 
	margin: 50px 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	column-gap: 42px;
	padding: 0;
}

.dir .text, .get .text{ 
	flex: 1; 
}

.dir img, .get img{
	width: 400px;
	height: 500px;
	object-fit: cover;
	border-radius: 32px;
	display: block;
	flex: 0 0 320px;
}

.dir ol, .get ol{
	width: 100%;
	max-width: 720px;
}

.get {
	flex-direction: row-reverse;
}

.section4 iframe{
	width: 100%;
	height: 400px;
	border: none;
	border-radius: 10px;
	display: block;
}

@media (max-width: 1024px){
	.cover .title{ margin: 0 48px; }

	.about{ margin: 18px 48px 0; }

	.section1 > div, .section2 > img{ margin-left: 48px; }
	.section2 > div, .section1 > img{ margin-right: 48px; }
	.section3 > div{ margin: 0 48px; }

	.section4{ margin: 40px 48px; }

	.index-box{ width: min(640px, 90%); }
	.index-box h3::after{ width: 80vw; }
}

@media (max-width: 768px){
	.cover{ height: 420px; }
	
	.cover .title{ 
		margin: 0 20px;
		left: 16px; bottom: 16px; 
	}
	
	.cover .title h1{ 
		font-size: 40px; 
		line-height: 44px; 
	}
	
	.cover .title p{ font-size: 22px; }

	.about{ margin: 16px 20px 0; font-size: 16px; }

	.index-box{ width: 92%; }
	.index-box h3{ font-size: 24px; }
	.index-box a{ font-size: 18px; line-height: 44px; }
	.index-box h3::after{ width: 70vw; }

	.section1, .section2{
    flex-direction: column;
    row-gap: 18px;
	}
	
	.section1 > div, .section2 > img,
	.section2 > div, .section1 > img{
		margin: 0;
	}
	.section3 > div{ margin: 0; }

	.section1 h2, .section2 h2, .section3 h2, .section4 h2{
		font-size: 32px;
	}

	.section1 p, .section2 p, .section3 p, .section4 p{
    	font-size: 16px;
	}

	.section1 > img, .section2 > img,
	#history > img{
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	  #history > img{ aspect-ratio: 3 / 4; }

	.dir, .get{
		flex-direction: column;
		row-gap: 18px;
	}
	
	.dir img, .get img{
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 5;
		flex: none;
	}

	.section4 iframe{ height: 320px; }
}

@media (max-width: 480px){
	.cover{ height: 360px; }
	.cover .title h1{ font-size: 34px; line-height: 38px; }
	.cover .title p{ font-size: 20px; }
}