@charset "utf-8";
:root {
	--text-color: #231815;
	--text-color-b: #1F5F92;
	/* --colorB1: #ec69b0; */
	--colorB1: #F26138;
	/*--colorB2: #1F5F92;*/
	font-size: 100%;
}
body {
	color: var(--text-color);
}
br.pc {
	display: none;
	@media screen and (min-width: 768px) {
		display: block;
	}
}
.note {
	font-size: 75%;
}
header {
	padding: 0 5% 10px;
	display: grid;
	grid-template-columns: 30% 70%;
	gap: 10px;
	grid-template-rows: 1fr 0.8fr 1fr;
	@media screen and (min-width: 768px) {
		padding: 150px 0 50px;
		margin: 0 auto;
		max-width: 1000px;
		width: 100%;
		gap: 20px;
		grid-template-rows: 1fr 1.3fr 1fr;
		overflow: hidden;
	}
	& div {
		grid-column: 1;
		grid-row: 1 / 4;
		position: relative;
		& img {
			width: 100%;
			height: auto;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	& p.logo {
		display: grid;
		align-items: end;
		& img {
			width: 60%;
			height: auto;
			@media screen and (min-width: 768px) {
				width: 45%;
			}
		}
	}
	& h1 {
    	font-weight: bold;
    	font-size: 6.5vw;
		line-height: 1.2;
		letter-spacing: -2px;
		white-space: nowrap;
		@media screen and (min-width: 1000px) {
			/* font-size: 350%; */
			font-size: 300%;
		}
		& + p {
			font-size: 5.333vw;
			& a {
				color: #ffffff !important;
				text-decoration: none !important;
				font-weight: bold;
				background-color: var(--colorB1);
				display: inline-block;
				padding: 2px 1.5em;
				border-radius: 30px;
				width: fit-content;
				height: fit-content;
				transition: 0.4s;
				&:hover {
					opacity: 0.7;
				}
			}
			&>span {
				font-size: 3.467vw;
				line-height: 1.0;
				padding-left: 0.5em;
				@media screen and (min-width: 768px) {
					padding-left: 1em;
					margin-top: 8px;
					display: block;
					font-size: 18px;
				}
			}
			@media screen and (min-width: 768px) {
				font-size: 150%;
			}
		}
	}
}
header + p {
	&.false {
		margin: 0 4vw 30px;
		padding: 10px 15px;
		pointer-events: none;
		color: var(--colorB1) !important;
		background-color: #FFF;
		border: solid 4px var(--colorB1);
		border-radius: 15px;
		line-height: 1.4;
		font-size: 4vw;
		font-weight: bold;
		width: fit-content;
		height: fit-content;
		@media screen and (min-width: 768px) {
			margin-inline: auto;
			margin-bottom: 80px;
			font-size: 24px;
			text-align: center;
		}
	}
}
section.intro {
	background-color: var(--colorB1);
	color: #ffffff;
	padding: 50px 5%;
	@media screen and (min-width: 768px) {
		padding: 100px 0;
	}
	& > p {
		font-weight: bold;
		font-size: 4.267vw;
		@media screen and (min-width: 768px) {
			max-width: 1200px;
			margin: 0 auto;
			text-align: center;
			font-size: 20px;
		}
		& + p {
			font-weight: normal;
			/* font-size: 87.5%; */
			margin-top: 1em;
			& a {
				font-weight: bold;
				color: #ffffff !important;
			}
		}
	}
}
section + section {
	background-color: #f9f3e5;
	padding: 0 5% 50px;
	@media screen and (min-width: 768px) {
		padding: 0 0 100px;
	}
	&:nth-child(3) {
		padding: 50px 5%;
		@media screen and (min-width: 768px) {
			padding: 100px 0;
		}
	}
	& h2 {
		font-weight: bold;
		text-align: center;
		font-size: 5vw;
		margin-bottom: 30px;
		@media screen and (min-width: 768px) {
			font-size: 100%;
		}
		&::before {
			content: "TIME TABLE";
			color: var(--colorB1);
			font-size: 10vw;
			display: block;
		}
	}
	& p.note {
		&::before {
			content: "※";
			color: var(--colorB1);
		}
		& + ul {
			display: grid;
			grid-template-columns: repeat(6, 50px);
			gap: 10px;
			justify-content: center;
			margin-top: 10px;
		}
	}
	& h3 {
		background-color: var(--colorB1);
		color: #ffffff;
		text-align: center;
		margin-top: 40px;
		font-weight: bold;
		padding: 10px;
		border-radius: 25px;
		@media screen and (min-width: 768px) {
			max-width: 800px;
			margin: 70px auto 0;
		}
	}
}
#main section {
	&:nth-child(3) {
		&>h2 {
			&::before {
				content: "Overview";
				text-transform: uppercase;
				color: var(--colorB1);
				font-size: 10vw;
				display: block;
				@media screen and (min-width: 768px) {
					font-size: 300%;
				}
			}
		}
	}
	&:nth-child(4) {
		&>h2 {
			&::before {
				content: "Profile";
				text-transform: uppercase;
				color: var(--colorB1);
				font-size: 10vw;
				display: block;
				@media screen and (min-width: 768px) {
					font-size: 300%;
				}
			}
		}
	}
	&>table {
		margin-inline: auto;
		border: 0;
		max-width: 800px;
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		border: solid 3px var(--colorB1);
		border-radius: 4vw;
		overflow: hidden;
		font-size: 4.267vw;
		@media screen and (min-width: 768px) {
			border-radius: 30px;
			font-size: 18px;
		}
		& th {
			display: block;
			color: #FFF;
			background-color: var(--colorB1);
			padding: 2.667vw;
			font-weight: bold;
			text-align: center;
			@media screen and (min-width: 768px) {
				display: table-cell;
				padding: 20px;
				white-space: nowrap;
				vertical-align: top;
				text-align: left;
			}
		}
		& td {
			display: block;
			padding: 4vw;
			background-color: #FFF;
			&>p {
				line-height: 1.4;
			}
			@media screen and (min-width: 768px) {
				display: table-cell;
				padding: 20px;		
				vertical-align: top;
			}
			& span {
				margin-top: 0.8em;
				display: block;
				font-size: 85%;
			}
		}
		& tr:not(:last-child) {
			&>th {
				border-bottom: solid 3px #FFF;
			}
			&>td {
				border-bottom: solid 3px var(--colorB1);
			}
		}
	}
	&.timetable {
		& h2 {
		font-weight: bold;
		text-align: center;
		font-size: 5vw;
		margin-bottom: 30px;
		@media screen and (min-width: 768px) {
			font-size: 100%;
		}
		
		&::before {
			content: "TIME TABLE";
			color: var(--colorB1);
			font-size: 10vw;
			display: block;
		}
		@media screen and (min-width: 768px) {
			&::before {
				font-size: 300%;
			}
		}
	}
	}
	&.profile {
		&>div.contents {
			margin-inline: auto;
			width: 100%;
			max-width: 800px;
			& dl {
				&>dt {
					margin-bottom: 0.3em;
					font-weight: bold;
					font-size: 4.267vw;
					@media screen and (min-width: 768px) {
						font-size: 18px;
					}
				}
				&>dd {
					&+dt {
						margin-top: 0.8em;
					}
				}
			}
			&>div {
				background-color: #FFF;
				padding: 5.333vw;
				border-radius: 4vw;
				font-size: 4vw;
				@media screen and (min-width: 768px) {
					border-radius: 20px;
					font-size: 16px;
					padding: 30px;
				}
				&:first-child {
					margin-bottom: 30px;
					@media screen and (min-width: 768px) {
						display: flex;
						gap: 40px;
					}
					&>dl {
						@media screen and (min-width: 768px) {
							width: calc( 100% - 212px );
						}
					}
				}
				&>p.photo {
					margin-bottom: 1em;
					text-align: center;
					@media screen and (min-width: 768px) {
						width: 172px;
					}
					&>img {
						max-width: 172px;
						width: 100%;
						height: auto;
						border-radius: 4vw;
						@media screen and (min-width: 768px) {
							border-radius: 20px;
						}
					}
				}
			}
		}
	}
	&.contact {
		&>div {
			margin-inline: auto;
			padding: 20px;
			border-radius: 10px;
			box-sizing: border-box;
			max-width: 800px;
			width: 100%;
			background-color: #FFF;
			&>h2 {
				margin-bottom: 0.8em;
				&::before {
					display: none;
				}
			}
			&>p {
				font-size: 3.2vw;
				text-align: left;
				@media screen and (min-width: 768px) {
					font-size: 14px;
					text-align: center;
				}
			}
		}
	}
}

@media screen and (min-width: 768px) {
	section + section h2::before {
		font-size: 300%;
	}
	section + section h2 + p {
		text-align: center;
	}
}
section > article {
	background-color: #ffffff;
	margin-top: 20px;
	border-radius: 20px;
	padding: 20px;
	@media screen and (min-width: 768px) {
		max-width: 800px;
		margin: 20px auto 0;
		padding: 30px;
	}
	& div {
		display: grid;
		grid-template-columns: 50px 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 0 10px;
		margin-bottom: 10px;
		& img {
			grid-row: 1 /3;
		}
		& h4 {
			font-weight: bold;
			line-height: 1.2;
			@media screen and (min-width: 768px) {
				font-size: 125%;
			}
		}
		& time {
			font-weight: bold;
			font-size: 87.5%;
			@media screen and (min-width: 768px) {
				font-size: 112.5%;
			}
		}
	}
	& dl {
		margin-top: 5px;
		display: flex;
		align-items: baseline;
		font-size: 87.5%;
		@media screen and (min-width: 768px) {
			margin-left: 60px;
		}
		& dt {
			color:  #ffffff;
			border-radius: 15px;
			padding: 3px 1em;
			margin-right: 0.5em;
			white-space: nowrap;
		}
		& dd span {
			font-size: 75%;
			color: var(--colorB1);
		}
	}
	& > ul {
		font-size: 87.5%;
		@media screen and (min-width: 768px) {
			margin-left: 60px;
		}
		& li::before {
			content: "● ";
			font-size: 87.5%;
		}
	}
	& p {
		font-size: 87.5%;
		line-height: 1.5;
		@media screen and (min-width: 768px) {
			margin-left: 60px;
		}
	}
}
section > article:nth-of-type(1) {
	border: 3px solid #896859;
	& ul li::before {
		color:  #896859;
	}
	& dl dt {
		background-color:  #896859;
	}
}
section > article:nth-of-type(2) {
	border: 3px solid #83c757;
	& ul li::before {
		color:  #83c757;
	}
	& dl dt {
		background-color:  #83c757;
	}
}
section > article:nth-of-type(3) {
	border: 3px solid #fe705c;
	& ul li::before {
		color:  #fe705c;
	}
	& dl dt {
		background-color:  #fe705c;
	}
}
section > article:nth-of-type(4) {
	border: 3px solid #6b75ac;
	& ul li::before {
		color:  #6b75ac;
	}
	& dl dt {
		background-color:  #6b75ac;
	}
}
section > article:nth-of-type(5) {
	border: 3px solid #f4b340;
	& ul li::before {
		color:  #f4b340;
	}
	& dl dt {
		background-color:  #f4b340;
	}
}
section > article:nth-of-type(6) {
	border: 3px solid #A8CD37;
	& ul li::before {
		color:  #A8CD37;
	}
	& dl dt {
		background-color:  #A8CD37;
	}
}
section > p.entry {
	text-align: center;
	margin-top: 40px;
	@media screen and (min-width: 768px) {
		max-width: 600px;
		margin: 60px auto 0;
	}
	& a {
		background-color:  var(--colorB1);
		color: #ffffff !important;
		font-weight: bold;
		display: block;
		text-decoration: none !important;
		padding: 1.5em;
		border-radius: 20px;
		transition: 0.4s;
		@media screen and (min-width: 768px) {
			font-size: 150%;
		}
		&::after {
			margin-left: 0.5em;
			content: url(../images/scienceagora2024/ico-tab.svg);
			width: 1em;
			display: inline-block;
		}
		&:hover {
			opacity: 0.7;
		}
	}
	&>span {
		font-size: 4vw;
		@media screen and (min-width: 768px) {
			font-size: 15px;
		}
	}
}