@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html {
	font-family: "Roboto", "Noto Sans JP", sans-serif;
	font-size: 62.5%;
	color: #222222;
	line-height: 1.5;
}
ul, ol, dl {
	list-style: none;
	margin: 0;
	padding: 0;
}

header {
	position: fixed;
	width: 100%;
	background-color: #FFFFFF;
	z-index: 10;
}
header .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	height: min(6.667vw, 80px);
	margin: 0 auto;
	padding: 0 0.833%;
}
.header_logo {
	width: 27.12%;
	height: auto;
}
.header_nav {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 72.88%;
}
.header_nav a {
	margin-left: 4.65%;
	transition: opacity 0.2s ease-out;
}
.header_nav a:nth-of-type(2) {
	margin-left: 4.884%;
}
.header_nav a:hover {
	opacity: 0.6;
}
.hd_logo01 {
	width: 16.28%;
}
.hd_logo02 {
	width: 13.953%;
}
.hd_logo03 {
	width: 12.209%;
}
.hd_logo04 {
	width: 16.86%;
}
.hr {
	width: 100%;
	height: 0;
	padding-top: min(0.833%, 10px);
	background: linear-gradient(to right, #00458e, #1c96d5, #228f74);
}

.program {
	max-width: 1200px;
	margin: 0 auto;
	padding: min(7.917%, 95px) 0.833% 0;
}

.prog-header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.667% 0 0.833%;
}
.prog-header img {
	width: 22.5%;
	margin-right: 5%;
}
.prog-header h1 {
	width: 65%;
	font-size: min(3.8vw, 4.2rem);
	font-weight: 800;
	line-height: 1;
}

.day {
	margin-top: 0.833%;
}
h2 {
	text-align: center;
	font-size: min(2.5vw, 2.6rem);
	color: #FFFFFF;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.05em;
	background-color: #20509E;
	border-radius: min(0.667vw, 8px);
	margin-bottom: 0.833%;
	padding: 1.5% 0;
}
h2 span {
	font-size: 0.9em;
	font-weight: 700;
}
.rows {
	display: flex;
	flex-direction: column;
	gap: min(0.833vw, 10px);
}
.row {
	display: grid;
	grid-template-columns: min(14%, 168px) 1fr;
	gap: min(0.833vw, 10px);
	align-items: stretch;
}
.time {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: min(1.6vw, 19px);
	font-weight: 800;
	letter-spacing: 0.03em;
	white-space: nowrap;
	background-color: #EEF2F7;
	border: 1px solid #C9D6E6;
	border-radius: min(0.5vw, 6px);
}
.cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	position: relative;
	background-color: #EEF2F7;
	border: 1px solid #C9D6E6;
	border-radius: min(0.5vw, 6px);
	padding: min(1.5vw, 18px) min(1.667vw, 20px);
}
.prog-name {
	font-size: min(1.8vw, 2.0rem);
	font-weight: 800;
	text-wrap: balance;
	margin: 0;
}
.prog-sub {
	color: #2C3743;
	font-size: min(1.2vw, 1.45rem);
	font-weight: 500;
	line-height: 1.55;
	margin: min(0.5vw, 6px) 0 0;
}
.prog-sub2 {
	color: #1D2733;
	font-size: min(1.4vw, 1.6rem);
	font-weight: 700;
	line-height: 1.55;
	margin: min(0.833vw, 10px) 0 0;
}
.prog-sub2 span {
	color: #2C3743;
	font-size: min(1.2vw, 1.45rem);
	font-weight: 500;
}

.tag {
	position: absolute;
	top: min(0.667vw, 8px);
	right: min(0.833vw, 10px);
	font-size: min(1.1vw, 1.1rem);
	font-weight: 700;
	line-height: 1.4;
	background: #FFFFFF;
	border-radius: min(0.333vw, 4px);
	padding: min(0.333vw, 4px) min(0.667vw, 8px) min(0.167vw, 2px);
}
.tag--en {
	color: #D2202B;
	border: 1px solid #D2202B;
}
.tag--jp {
	color: #20509E;
	border: 1px solid #20509E;
}
.tag--en_color {
	color: #D2202B;
}

.row--full .cell {
	background: transparent;
	border: none;
	padding: 0;
}
.myaku-full {
	width: 100%;
	text-align: center;
	color: #FFFFFF;
	font-size: min(1.8vw, 2.0rem);
	font-weight: 800;
	letter-spacing: 0.025em;
	background: linear-gradient(90deg, #20509E 0%, #20509E 28%, #D2202B 60%, #D2202B 100%);
	border-radius: min(0.5vw, 6px);
	padding: min(1.333vw, 16px) min(1.667vw, 20px);
}

.cell--split {
	display: grid;
	grid-template-columns: 1fr min(26.667%, 320px);
	gap: min(0.833vw, 10px);
	text-align: center;
	background: transparent;
	border: none;
	padding: 0;
}
.cell-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #EEF2F7;
	border: 1px solid #C9D6E6;
	border-radius: min(0.5vw, 6px);
	padding: min(1.5vw, 18px) min(1.667vw, 20px);
	position: relative;
}

.myaku-box {
	display: flex;
	flex-direction: column;
	text-align: center;
	background: linear-gradient(90deg, #20509E 0%, #20509E 10%, #D2202B 85%, #D2202B 100%);
	border-radius: min(0.5vw, 6px);
	overflow: hidden;
}
.myaku-box__time {
	display: inline-block;
	width: max-content;
	color: #FFFFFF;
	font-size: min(1.4vw, 1.4rem);
	font-weight: 700;
	border-radius: 50px;
	border: 1px solid #FFFFFF;
	margin: min(1.0vw, 12px) auto 0;
	padding: min(0.333vw, 4px) min(1.25vw, 15px) min(0.167vw, 2px);
}
.myaku-box__body {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: min(1.8vw, 2.0rem);
	font-weight: 800;
	line-height: 1.5;
	padding: min(0.833vw, 10px) min(1.0vw, 12px) min(1.167vw, 14px);
}

.prog-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background-color: #EEF2F7;
	border: 1px solid #C9D6E6;
	border-radius: min(0.5vw, 6px);
	padding: min(0.833vw, 10px) min(1.0vw, 12px) min(1.167vw, 14px);
	position: relative;
}
.prog-box__time {
	display: inline-block;
	width: max-content;
	color: #FFFFFF;
	font-size: min(1.4vw, 1.4rem);
	font-weight: 700;
	border-radius: 50px;
	background-color: #20509E;
	margin: 0 auto min(0.667vw, 8px);
	padding: min(0.333vw, 4px) min(1.25vw, 15px) min(0.167vw, 2px);
}

.back {
	margin: min(3.333%, 40px) 0;
}
.back a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(33.333%, 400px);
	height: min(5.0vw, 60px);
	color: #FFFFFF;
	font-size: min(1.667vw, 2.0rem);
	text-decoration: none;
	border-radius: min(1.0vw, 12px);
	background-color: #00458E;
	margin: 0 auto;
	transition: opacity 0.2s ease-out;
}
.back a:hover {
	opacity: 0.75;
}

.register3 {
	opacity: 0;
	visibility: hidden;
	transform: translate(50%, 20px);
	transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
	background-color: rgba(255,255,255,0.5);
	padding: min(2.5vw, 30px);
	position: fixed;
	bottom: min(9.167vw, 110px);
	right: min(11.667vw, 140px);
	z-index: 99;
}
.register3.is-show {
	opacity: 1;
	visibility: visible;
	transform: translate(50%, 0);
}
.register3 a {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	width: min(11.5vw, 138px);
	color: #FFFFFF;
	font-size: min(1.667vw, 2.0rem);
	line-height: 1.6;
	text-decoration: none;
	background-color: #F08300;
	border: min(0.333vw, 4px) solid #F6AD49;
	box-shadow: min(0.333vw, 4px) min(0.333vw, 4px) min(0.5vw, 6px) 0 rgba(0,0,0,0.2);
	border-radius: min(0.667vw, 8px);
	padding: 25.362% 10.87%;
	transition: background-color 0.2s ease-out;
}
.register3 a:hover {
	background-color: #EA5506;
}

footer {
	display: flex;
	justify-content: center;
	width: 100%;
	background: linear-gradient(to right, #00458e, #1c96d5, #228f74);
	padding: min(2.5%, 30px) 0;
}
.ft-logo {
	width: min(23.333%, 280px);
	height: auto;
}

.pagetop {
	display: none;
	position: fixed;
	width: min(4.167vw, 50px);
	height: min(4.167vw, 50px);
	bottom: min(2.5vw, 30px);
	right: min(11.667vw, 140px);
	transform: translateX(50%);
}
.pagetop a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: min(2.833vw, 3.4rem);
	color: #FFFFFF;
	text-decoration: none;
	background-color: #444444;
	border-radius: min(0.333vw, 4px);
	opacity: 0.75;
	transition: opacity 0.2s ease-out;
}
.pagetop a:hover {
	opacity: 0.5;
}

br.sp {
	display: none;
}

/* ====================================================================================================================
 * RESPONSIVE - 767px breakpoint
 * ====================================================================================================================*/
@media screen and (max-width: 767px) {
	/* Header */
	header {
		position: relative;
	}
	header .inner {
		flex-direction: column;
		height: auto;
		padding: 4vw 3vw 2vw;
	}
	.header_logo {
		width: 75%;
		margin-bottom: 3vw;
	}
	.header_nav {
		width: 100%;
		justify-content: space-between;
	}
	.header_nav a {
		margin-left: 0;
	}
	.header_nav a:nth-of-type(2) {
		margin-left: 0;
	}
	.hd_logo01 {
		width: 22vw;
	}
	.hd_logo02 {
		width: 18.8vw;
	}
	.hd_logo03 {
		width: 16.5vw;
	}
	.hd_logo04 {
		width: 22.8vw;
	}
	.hr {
		padding-top: min(1.5%, 10px);
	}

	.program {
		padding: 3.0vw 1.0vw 0;
	}

	.prog-header {
		flex-direction: column;
		padding: 1.0vw 0 0;
	}
	.prog-header img {
		width: 35vw;
		margin: 0 0 2.0vw;
	}
	.prog-header h1 {
		width: 100%;
		text-align: center;
		font-size: 5.2vw;
	}
	.program.en .prog-header h1 {
		font-size: 5.8vw
	}

	.day {
		margin-top: 3.0vw;
	}
	h2 {
		font-size: 4.0vw;
		border-radius: 1.5vw;
		padding: 1.5vw 0;
	}
	.rows {
		gap: 1.5vw;
	}
	.row {
		grid-template-columns: 1fr;
		gap: 0;
		border: 1px solid #C9D6E6;
		border-radius: 1.5vw;
		overflow: hidden;
	}
	.time {
		font-size: 3.8vw;
		border: none;
		border-radius: 0;
		border-bottom: 1px solid #C9D6E6;
		background-color: #DDE6F1;
		padding: 1.0vw 0 0.75vw;
	}
	.cell {
		border: none;
		border-radius: 0;
		padding: 8.5vw 0 2.0vw;
	}
	.row--full .time {
		border-bottom: none;
		border-radius: 1.5vw 1.5vw 0 0;
	}
	.myaku-full {
		font-size: 3.5vw;
		background: linear-gradient(90deg, #20509E 0%, #20509E 10%, #D2202B 85%, #D2202B 100%);
		border-radius: 0 0 1.5vw 1.5vw;
		padding: 2.5vw 1.5vw;
	}
	.cell.cell--split {
		padding: 0;
	}
	.cell--split {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.cell-main {
		border: none;
		border-radius: 0;
	}
	.cell--split .cell-main {
		padding: 8.5vw 0 2.0vw;
	}
	.cell-main.sp {
		padding-top: 3.0vw;
	}
	.myaku-box {
		border-radius: 0;
	}
	.myaku-box__time {
		font-size: 3.0vw;
		margin-top: 3.0vw;
		padding: 0.5vw 3.0vw 0;
	}
	.myaku-box__body {
		font-size: 3.5vw;
		padding: 1.5vw 0 3.0vw;
	}
	.prog-box {
		border: none;
		border-top: 1px solid #C9D6E6;
		border-radius: 0;
		padding: 9.0vw 0 2.5vw;
	}
	.prog-box__time {
		font-size: 3.0vw;
		margin-bottom: 2.0vw;
		padding: 0.5vw 3.0vw 0;
	}
	.prog-name {
		font-size: 3.8vw;
	}
	.prog-sub, .prog-sub2 span {
		font-size: 2.8vw;
	}
	.prog-sub2 {
		font-size: 3.2vw;
	}
	.prog-sub, .prog-sub2 {
		margin: 1.0vw 0 0;
	}
	.cell-main.sp .prog-name {
	}
	.cell-main.sp .prog-sub2 {
		line-height: 1.4;
		margin-bottom: 1.0vw
	}

	.tag {
		top: 2.0vw;
		right: 50%;
		transform: translateX(50%);
		font-size: 2.6vw;
		border-radius: 0.75vw;
		padding: 0.75vw 1.5vw 0.25vw;
	}

	.back {
		margin: 5.0vw 0;
	}
	.back a {
		width: 50vw;
		height: 10vw;
		font-size: 3.5vw;
		border-radius: 2.0vw;
	}

	.register3 {
		transform: none;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 18vw;
		background-color: rgba(255,255,255,1.00);
		padding: 0 0 0 5vw;
		bottom: 0;
		right: 0;
	}
	.register3.is-show {
		transform: none;
	}
	.register3 a {
		align-items: center;
		width: 75.5vw;
		height: auto;
		font-size: min(4.0vw, 2.7rem);
		border-width: max(0.75vw, 3px);
		border-radius: min(3vw, 18px);
		box-shadow: max(0.5vw, 2px) max(0.5vw, 2px) min(1vw, 6px) 0 rgba(0,0,0,0.2);
		padding: 2.0vw 0;
	}
	.register3 a br {
		display: none;
	}

	/* Pagetop Button */
	.pagetop {
		width: 10vw;
		height: 10vw;
		bottom: 4.0vw;
		right: 5vw;
		transform: none;
		z-index: 99;
	}
	.pagetop a {
		font-size: 6.5vw;
		border-radius: 0.75vw;
	}

	/* Footer */
	footer {
		padding: 5vw 0 23vw;
	}
	.ft-logo {
		width: min(50vw, 320px);
	}
	
	br.sp {
		display: inline-block;
	}
	br.pc {
		display: none;
	}
}