@import url("common.css");
@import url('https://fonts.googleapis.com/css2?family=League+Gothic&display=swap');

/*--------------- RIBBON ---------------*/
.ribbon {
	display: inline-block;
	position: absolute;
	top: 120px;
	padding: 6px 12px;
	color: #FFF;
	text-align: center;
	background: #680000;
}
	.ribbon:before {
		position: absolute;
		content: '';
		top: 100%;
		right: 0;
		border: none;
		border-bottom: solid 5px transparent;
		border-left: solid 10px #9f9f9f;
	}
.ribbon span {
	font-size: 0.8rem;
}


/*--------------------------- COMMON ---------------------------*/
img {
	width: 100%;
}
ul {
	list-style: none;
}
	ul.disc {
		list-style: disc;
	}

a {
	text-decoration: none;
}
	a:hover {
		color: #AAA;
	}
	a:link, a:visited, a:active {
		color: inherit;
	}

/*--------------------------- BUTTON ---------------------------*/
.buttonList {
	display: flex;
	flex-wrap: wrap;
}
	.buttonList > .commonBtn {
		flex: 1 1 0;
		margin-left: 12px;
		margin-right: 12px;
	}

.commonBtn {
	margin: 36px auto 4px;
	padding: 8px;
	width: 60%;
	color: #FFF;
	text-align: center;
	line-height: 1.6rem;
	border-radius: 16px;
	cursor: pointer;
	transition: 0.5s;
}
	.commonBtn.orange {
		border: 2px solid #FFF;
		box-shadow: 0 0 0 2px #ff8100;
		background: #ff8100;
	}
		.commonBtn.orange:hover {
			color: #ff8100;
			background: #FFF;
		}

	.commonBtn.gray {
		border: 2px solid #FFF;
		box-shadow: 0 0 0 2px #AAA;
		background: #AAA;
	}
		.commonBtn.gray:hover {
			color: #AAA;
			background: #FFF;
		}

/*--- SCHOOL ENTRY ---*/
.school_entryBtn {
	position: fixed;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	padding: 12px 16px;
	width: 50%;
	max-width: 320px;
	color: #006838;
	font-weight: bold;
	text-align: center;
	border: 2px solid #006838;
	border-radius: 32px;
	background: #FFF;
	box-shadow: 0px 0px 0px 2px #fff, 0 2px 6px 0px rgb(0 0 0 / 100%);
	cursor: pointer;
}


/*--------------------------- LAYOUT ---------------------------*/
#wrapper {
	width: 100%;
	height: auto;
	z-index: -1;
	overflow: unset;
}

.content {
	padding: 60px 24px 120px 24px;
	text-align: justify;
}

.block {
	font-size: 16px;
	line-height: 2.1rem;
}


/*--- FOOTER ---*/
#footer {
	position: relative;
	height: 25vh;
	background: #555;
	z-index: 1;
}
	#footer .block {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
		#footer .block p {
			margin-top: 16px;
			padding: 8px;
			width: 85px;
		}
			#footer .block img {
				width: 100%;
			}

		#footer ul {
			padding: 16px;
		}
		#footer li {
			padding: 8px 0;
			color: #AAA;
			font-size: 0.9rem;
			font-weight: bold;
			line-height: 1rem;
		}
		#footer li a {
			color: #CCC;
			font-weight: normal;
		}
	#footer #copyright {
		position: absolute;
		bottom: 0;
		padding: 36px 0 12px 0;
		width: 100%;
		color: #999;
		text-align: center;
		font-weight: bold;
	}



/*--------------------------- HEADER ---------------------------*/
#logo {
	position: absolute;
	top: -400px;
	left: 15%;
	transition: 1s;
}
	#logo img {
		width: 0px;
	}

#emblem {
	position: absolute;
	top: 12px;
	left: 50%;
	width: 100px;
	transform: translateX(-50%);
	z-index: 200;
	transition: 1s;
}

/*--------------------------- H1 / H2 / H3 ---------------------------*/
.content h2 {
	position: relative;
	padding: 0 0 60px 0;
	font-size: 1.8rem;
	text-align: left;
	line-height: 3rem;
}
	.content h2::after {
		content: "";
		position: absolute;
		bottom: 36px;
		left: 0;
		width: 60px;
		border-bottom: 4px solid #006838;
	}
.content h2.eng_title {
	font-size: 6.4rem;
	font-family: "League Gothic";
	text-align: right;
	color: #CCC;
	font-weight: normal;
	letter-spacing: 0.4rem;
}
	.content h2.eng_title::after {
		border-bottom: none;
	}
.content h3 {
	margin: 36px 0;
}

/*--------------------------- TEXT DECORATION ---------------------------*/
.underline_green {
	background: linear-gradient(transparent 70%, #BBDDBB 30%);
}

/*--------------------------- BACKGROUND ---------------------------*/
/*--- FIXED ---*/
.fixed_bg_A,
.fixed_bg_B {
	display: block;
	position: sticky;
	top: 0;
	z-index: -1;
	height: 0;
	max-height: 0;
	overflow: visible;
}
.fixed_bg_A::after,
.fixed_bg_B::after {
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100vh;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-background-size: contain;
		background-size: cover;
	}
.fixed_bg_A::after {
	background-image: url("../img/site/site_01.jpg");
	background-position: left;
}
.fixed_bg_B::after {
	margin-top: -10.5vw;
	height: calc(100vh + 10.5vw);
	background-image: url("../img/site/site_02.jpg");
}


/*--- COLOR ---*/
.bg_theme {
	color: #FFF;
}
	.bg_theme::after {
		background-color: #006838;
	}
		.bg_theme h2::after {
			border-bottom: 4px solid #FFF;
		}
.bg_white {
	background-color: #FFF;
}
	.bg_white::after {
		background-color: #FFF;
	}
.bg_gray {
	background-color: #F5F5F5;
}
	.bg_gray::after {
		background-color: #F5F5F5;
	}

/*--------------------------- FORM ---------------------------*/
form {
	font-size: 16px;
	text-align: left;
}
	form h3 {
		margin: 36px 0 8px 0;
	}
	form div > span {
		display: block;
		margin: 16px 0px -2px 0px;
		color: #AAA;
		font-size: 1rem;
	}
	::placeholder {
		color: #DDD;
	}
	input,
	textarea {
		padding: 6px;
		width: auto;
		font-family: "Sawarabi Gothic";
		font-size: 1.6rem;
		border: none;
		border-bottom: 2px solid #AAA;
		outline: none;
	}
		input:focus {
			border-bottom-color: #F00;
		}
	textarea {
		width: 100%;
		height: 185px;
		resize: vertical;
	}

	.inputList {
		display: flex;
		flex-wrap: wrap;
	}
		.inputList > * {
			margin-right: 12px;
			padding: 8px 16px;
			border: 2px solid #AAA;
			border-radius: 16px;
			background: #FFF;
		}

	.input_inline {
		display: flex;
		align-items: flex-end;
	}

	input[type=text],
	input[type=mail],
	input[type=tel] {
		width: 100%;
	}
	input[readonly],
	textarea[readonly] {
		font-size: 1.3rem;
		border: none;
		background: transparent;
	}

/*--- VARIDATION ---*/
.required {
	position: relative;
}
	.required:after {
		content: "必須";
		position: absolute;
		display: inline;
		top: 0;
		right: 0;
		padding: 12px 8px 10px 8px;
		color: #FFF;
		font-size: 12px;
		line-height: 0;
		border-radius: 4px 4px 0 0;
		background: #C00;
	}
.required_check {
	background: #FAA;
}

.optional {
	position: relative;
}
	.optional:after {
		content: "任意";
		position: absolute;
		display: inline;
		top: 0;
		right: 0;
		padding: 12px 8px 10px 8px;
		color: #FFF;
		font-size: 12px;
		line-height: 0;
		border-radius: 4px 4px 0 0;
		background: #CCC;
	}

/*--------------------------- MODAL ---------------------------*/
.modal_open {
}

.modalArea {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	padding: 20px 20px 120px 20px;
	width: 100vw;
	height: 100vh;
	font-size: 1.1rem;
	text-align: justify;
	line-height: 1.8rem;
	background: #EEE;
	overflow-y: scroll;
	z-index: 500;
	transition: 0.5s;
}
	.modalArea h2 {
		margin-bottom: 20px;
		text-align: center;
	}
	.modalArea p {
		margin: 8px 0;
	}
	.modalArea .modal_close {
		position: fixed;
		left: calc(50% - 28px);
		bottom: 20px;
		padding: 12px 8px;
		width: auto;
		color: rgba(0,0,0,0.3);
		font-size: 4rem;
		border: 4px solid rgba(0,0,0,0.3);
		border-radius: 60px;
		transition: 0.5s;
		cursor: pointer;
	}
		.modalArea .modal_close:hover {
			color: rgba(0,0,0,0.8);
			border-color: rgba(0,0,0,0.8);
		}

	.modalArea ul {
		margin-left: 12px;
		padding: 16px 0 16px 8px;
	}
		.modalArea ul.stepList li {
			padding: 8px 0;
		}
			.modalArea ul.stepList .step {
				display: inline;
				padding: 4px;
				font-weight: bold;
				background: linear-gradient(transparent 50%, #BBDDBB 50%);
			}
				.modalArea ul.stepList .step span {
					font-size: 1.8rem;
				}


/*--------------------------- AREA ---------------------------*/
/*--- KEY VISUAL ---*/
.kv {
	position: relative;
	height: 100vh;
}

	.kv h2 {
		position: absolute;
		left: 5%;
		bottom: 50%;
		font-style: italic;
		font-weight: normal;
		font-size: 3rem;
		letter-spacing: -0.5rem;
		text-align: left;
		color: #006838;
	}

/*--- IMAGE AREA ---*/

.blank_img {
	color: #FFF;
}
/*
		
*/

	.blank_img h3 {
		font-size: 1.6rem;
		font-style: italic;
		font-weight: normal;
		letter-spacing: -0.1rem;
		line-height: 4rem;
		text-align: center;
	}

/*--- LIST AREA ---*/
.listArea {
	text-align: left;
}
		.listArea > div {
			padding-top: 8px;
		}
		.listArea > div span {
			color: #AAA;
		}
		.listArea > div p {
			font-size: 1.6rem;
		}

/*--- SCHEDULE AREA ---*/
.scheduleArea {
}
	.scheduleArea .thumbList {
		padding-top: 0;
	}
	.scheduleArea h3 {
		margin: 48px 0 20px 0;
		font-size: 1.7rem;
		background: linear-gradient(transparent 70%, #BBDDBB 30%);
	}
	.scheduleArea h4 {
		margin: 36px 0 0px 0;
		font-size: 1.6rem;
	}
	.scheduleArea div p span {
		display: block;
		margin-top: 12px;
		color: #AAA;
		font-size: 0.9rem;
	}

	/* 直近のスケジュール */
	.schedule_recent {
	}
		.schedule_recent .loading,
		.schedule_recent_select .loading {
			color: #AAA;
			margin: 0 auto;
			padding: 36px 0;
			text-align: center;
		}
			.schedule_recent .loading img,
			.schedule_recent_select .loading img {
				display: block;
				margin: 0 auto;
				width: 80px;
			}
		.schedule_recent > div {
			position: relative;
			margin-top: 40px;
			padding: 12px;
			border: 1px solid #006838;
		}
			.schedule_recent span {
				display: block;
				color: #AAA;
				font-size: 0.9rem;
				font-weight: normal;
			}
			.schedule_recent .title {
				position: absolute;
				top: -16px;
				left: -16px;
				padding: 0px 8px;
				color: #FFF;
				font-size: 0.9rem;
				background: #006838;
			}
			.schedule_recent .datetime {
				padding: 8px 0;
				font-size: 1.6rem;
			}
			.schedule_recent .location {
				
			}
				.schedule_recent .location a {
					font-size: 1rem;
				}
				.schedule_recent .location img,
				.schedule_recent_select .location img,
				.listArea .location img {
					display: inline;
					position: relative;
					left: 8px;
					top: 4px;
					width: 24px;
				}

	/* 直近のスケジュール 選択*/
	.schedule_recent_select  {
		display: flex;
		flex-wrap: wrap;
	}
	.schedule_recent_select > div {
		position: relative;
		padding: 12px;
	}
	.schedule_recent_select input[type=radio] {
		margin-right: 6px;
	}
	.schedule_recent_select input[type=radio]:checked:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #BBDDBB;
		z-index: -1;
	}

/*--- JOIN AREA ---*/
.joinArea {
}
	.joinArea h2.eng_title {
		color: #BBDDBB;
	}
	.joinArea p > span {
		display: block;
		margin-top: 12px;
		padding: 4px 8px;
		background: #BBDDBB;
	}

/*--- COMMENT AREA ---*/
.commentArea {
	color: #999;
	font-size: 0.8rem;
	line-height: 1.4rem;
}

/*--- THUNB LIST ---*/
.thumbList {
	display: flex;
	flex-wrap: wrap;
	padding-top: 40px;
}
	.thumbList.col_2 > * {
		padding: 1%;
		width: 50%;
	}

/*-staffList-*/
	.staffList .thumbList > div  {
		padding: 2%;
	}
	.staffList .thumbList > div p {
		padding-bottom: 16px;
	}
	.staffList .thumbList h3 {
		margin: 0;
		padding-bottom: 16px;
	}
	.staffList span {
		display: block;
		color: #999;
		font-size: 1rem;
		font-weight: normal;
	}
	.staffList img {
		width: 80%;
	}

.directorArea {
	margin: 0 auto;
	max-width: 400px;
}
	.directorArea img {
		display: block;
		margin: 0 auto 20px auto;
		width: 80%;
	}
	.directorArea h3 {
		margin: 0;
		padding-bottom: 16px;
	}
	.directorArea > div p {
		padding-bottom: 16px;
	}

.adviserArea {
	margin: 80px auto;
	padding-top: 80px;
	width: 240px;
	border-top: 1px dashed #999;
}

	.directorArea span,
	.adviserArea span {
		display: block;
		color: #999;
		font-size: 1rem;
		font-weight: normal;
	}
	.adviserArea img {
		display: block;
		margin: 0 auto;
		width: 50%;
		border-radius: 200px;
	}

.missionList h3 {
	padding: 6px 0;
	text-indent: 12px;
	border-left: 4px solid #000;
}

/*--- RIGHT UP ---*/
.box_rightup {
	position: relative;
	z-index: 0;
}
	.box_rightup::after {
		content: "";
		position: absolute;
		left:0;
		top: 0;
		transform: skewY(-6deg);
		transform-origin: top left;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

/*--- CONCEPT AREA ---*/
.conceptArea {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60px;
}
	.conceptArea p {
		padding: 12px 0;
		width: 30%;
		font-size: 1.2rem;
		text-align: center;
		line-height: 2rem;
		border: 2px solid #333;
		border-radius: 30vw;
	}
	.conceptArea span {
		font-size: 40px;
	}

/*--------------------------- TABLE ---------------------------*/
/*--- FEE TABLE ---*/
.feeTable {
	width: 100%;
	font-size: 1.4rem;
}
	.feeTable th,
	.feeTable td {
		padding: 12px;
		text-align: center;
		font-weight: normal;
		line-height: 1.6rem;
		border-right: 1px solid #555;
		border-bottom: 1px solid #555;
	}
	.feeTable span {
		font-size: 1.1rem;
	}

/*--------------------------- タブレット ---------------------------*/
@media only screen and (min-width: 600px) {
	.content {
	}
	.ribbon {
		left: unset;
		right: 0;
		padding: 12px 24px;
	}
	.staffList {
		display: flex;
		flex-wrap: wrap;
	}
		.staffList > * {
			width: 50%;
		}
	.missionList {
		display: flex;
		flex-wrap: wrap;
	}
		.missionList > * {
			padding: 0 12px;
			width: 50%;
		}
	.thumbList.col_3 > * {
		padding: 1%;
		width: 33%;
	}
	.staffList .thumbList > div {
		padding-right: 6%;
	}
	.schedule_recent {
		display: flex;
		flex-wrap: wrap;
	}
		.schedule_recent > div {
			width: 46%;
			margin-right: 4%;
		}
}

/*--------------------------- PC ---------------------------*/
@media only screen and (min-width: 1025px) {
	.pc {
		display: block;
	}
	#logo {
		top: 50px;
	}
		#logo img {
			width: 480px;
		}

	#emblem {
		left: 10%;
		width: 135px;
	}

	.content {
	}
	.box_rightup::after {
		transform: skewY(-3deg);
	}
	.modalArea > *,
	.block {
		margin: 0 auto;
		width: 1024px;
	}
	.sp {
		display: none;
	}
	.blank_img h3 {
		font-size: 2.4rem;
	}
		.missionList > * {
			width: 25%;
		}

		.schedule_recent > div {
			width: 20%;
			margin-right: 5%;
		}
			.schedule_recent .datetime label {
				display: block;
				font-size: 2rem;
				font-weight: bold;
				line-height: 2.4rem;
			}

}