:root {
	--black: #070731;
	--primary: var(--black);
	--primary-hover: linear-gradient(90deg, #2e66e8 , #004094 100%);
	--secondary: #2e66e8;
	--white: #ffffff;
	--bg-primary: var(--white);
	--bg-primary-opaque: rgb(255 255 255 / .8);
	--bg-secondary-opaque: rgb(0 63 145 / .8);
	--bg-secondary: #faf8f6;
	--link-hover: #2e66e8;
	--shadow-sp: 0 2px 8px 0 rgb(7 7 49 / .2);
	--shadow-PC: 0 4px 24px 0 rgb(7 7 49 / .2);
	--transition: ease-in-out .2s;
	--font-jp: "YuMincho", serif;
	--font-en: "EB Garamond", serif;
}

abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
	margin: 0;
	padding: 0;
	outline: inherit;
	font-size: inherit;
	line-height: inherit;
}

html {
	font-size: 16px;
	font-family: var(--font-jp);
	font-weight: 600;
	color: var(--primary);
	background-image: url("../img/bg.webp");
	background-size: 100%;
	background-attachment: fixed;
	scroll-behavior: smooth;
	scroll-padding-top: 76px;
	font-feature-settings: "palt";
}

body {
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	letter-spacing: 0.05em;
	min-width: auto !important;
	background-image: url("../img/kv.webp");
	background-size: 106%;
	background-position: -14vw 400px;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
ol, ul {
	list-style: none;
}

em {
	font-style: normal;
}
a {
	&:hover {
		color: var(--link-hover);
	}
}

img {
	width: 100%;
	display: block;
}

.visually-hidden {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 4px !important;
	height: 4px !important;
	opacity: 0 !important;
	overflow: hidden !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	visibility: visible !important;
}

.only_pc_inline {
	display: none;
}

.section-title {
	font-size: 28px;
	line-height: 1.4;
}


.icon_arrow {
	display: inline-block;
	width:16px;
	height: 16px;
	margin-right: 4px;
}

[class*=cta_] {
	background-color: var(--primary);
	padding: 8px 16px;
	height: 36px;
	color: var(--white);
	border-radius: 18px;
	box-sizing: border-box;
	text-decoration: none;
	font-size: 12px;
	line-height: 1.25;
	display: grid;
	place-items: center;
	border: 1px solid transparent;
	transition: var(--transition);
	&:hover {
		background-color: transparent;
		background-image: var(--primary-hover);
		border-color: var(--bg-primary);
		color: var(--bg-primary);
		box-shadow: var(--shadow-sp);
	}
}
.cta_main {
	margin: 40px auto 0;
	padding: 16px 0;
	font-size: 18px;
	height: 55px;
	border-radius: 30px;
	width: 247px;
}

.header {
	.extraheader {
		position: fixed;
		z-index: 2;
		display: flex;
		gap: 16px;
		justify-content: space-between;
		align-items: center;
		height: 76px;
		width: 100%;
		box-sizing: border-box;
		padding: 16px 10px;
		background-color: transparent;
		transition: background-color var(--transition);
		&.is-scrolled {
			background-color: var(--bg-primary);
		}
	}
	.header-title {
		a {
			display: block;
			width: 160px;
			padding: 10px;
		}
	}
	.cta_extraheader {
		margin-left: auto;
	}
	.extraheader-navbutton {
		width: 44px;
		height: 44px;
		border: none;
		background-color: transparent;
		padding: 14px 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&::before, &::after {
			transition: transform, var(--transition);
			display: block;
			content: "";
			width: 24px;
			height: 2px;
			background-color: var(--primary);
		}
		&::before {
			box-shadow: 0 7px 0 0 var(--primary);
		}
		&[aria-expanded=true] {
			justify-content: center;
			&::before {
				box-shadow: none;
				transform: rotate(45deg) translate(1px, 1px);
			}
			&::after {
				transform: rotate(-45deg) translate(1px, -1px);
			}
		}
	}
	.visual {
		padding: 100px 20px 0;
		height: 667px;
		box-sizing: border-box;
	}
	.visual-day {
		margin-top: 32px;
		display: flex;
		align-items: center;
		font-family: var(--font-en);
		font-size: 57px;
		font-weight: 700;
		line-height: 1;
	}
	.visual-week {
		font-family: var(--font-jp);
		font-size: 21px;
		color: var(--white);
		background-color: var(--primary);
		width: 41px;
		height: 41px;
		box-sizing: border-box;
		padding: 10px;
		border-radius: 22px;
		margin-top: 4px;
		margin-left: 4px;
		line-height: 1;
	}
	.visual-schedule {
		margin-top: 8px;
		display: grid;
		grid-template-columns: 154px 1fr;
		gap: 0 16px;
		dt {
			font-family: var(--font-en);
			font-size: 27px;
			line-height: 1.4;
			font-weight: 700;
		}
		dd {
			font-size: 24px;
			line-height: 1.6;
			font-weight: 800;
		}
	}
	.cta_main {
		display: none;
	}
}
.theme{
	margin-top: 16px;
	padding: 0 20px;
	.theme-text {
		margin-top: 16px;
		display: flex;
		gap: 8px;
		flex-direction: column;
		align-items: flex-start;
		font-size: 32px;
		font-weight: 800;
		line-height: 1.4;
		span {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 8px 0;
		}
		strong {
			background-color: var(--bg-primary);
			padding: 0 8px;
			display: inline-block;
		}
	}
}
.purpose{
	margin-top: 56px;
	padding: 0 20px;
	.purpose-text {
		p {
			margin-top: 16px;
			font-weight: 800;
			line-height: 2;
		}
	}
	.purpose-image {
		margin-top: 24px;
	}
}
.overview{
	margin-top: 64px;
	border-radius: 50px 50px 0 0;
	background-color: var(--bg-primary-opaque);
	padding: 64px 20px;
	
	.overview-list {
		margin-top: 24px;
		border-top: 1px dashed var(--primary);
	}
	.overview-listterm {
		padding-top: 20px;
		font-weight: 800;
	}
	.overview-listdesc {
		border-bottom: 1px dashed var(--primary);
		margin-top: 12px;
		padding-bottom: 20px;
		padding-left: 20px;
	}
	.overview-list2term {
		font-weight: 800;
	}
	.overview-list2desc {
		margin-top: 12px;
		display: grid;
		gap: 8px;
		&:not(:last-of-type) {
			border-bottom: 1px dashed var(--primary);
			padding-bottom: 12px;
			margin-bottom: 12px;
		}
	}
	.overview-list3 {
		display: grid;
		grid-template-columns: 120px 1fr;
		gap: 8px 16px;
	}
	.overview-list3term {
		font-weight: 800;
	}
}

.program {
	padding: 56px 20px;
	background-color: var(--bg-secondary-opaque);
	color: var(--bg-primary);
	.program-list {
		margin-top: 24px;
		border-top: 1px dashed var(--bg-primary);
	}
	.program-listterm {
		padding-top: 20px;
		font-weight: 800;
	}
	.program-listdesc {
		border-bottom: 1px dashed var(--bg-primary);
		margin-top: 12px;
		padding-bottom: 20px;
		padding-left: 20px;
		display: grid;
		gap: 12px;
	}
}

.extrafooter {
	margin: 64px 20px;
	.extrafooter-list {
		background-color: var(--bg-primary);
		border-radius: 50px;
		padding: 48px 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.extrafooter-listterm {
		font-size: 20px;
		font-weight: 800;
		padding-bottom: 8px;
		border-bottom: 2px solid var(--secondary);
		&:last-of-type {
			margin-top: 24px;
		}
	}
	.extrafooter-listdesc {
		text-align: center;
		
		&:not(:last-child) {
			margin-bottom: 24px;
		}
		.extrafooter-imagelist {
			display: flex;
			gap: 12px;
			margin-bottom: 12px;
			li {
				width: 142px;
			}
		}
		.extrafooter-textlist {
			display: grid;
			gap: 12px;
			margin-top: 20px;
			margin-bottom: 12px;
			width: 263px;
		}
	}
}
.mainfooter {
	background-color: var(--bg-secondary);
	display: grid;
	place-items: center;
	gap: 32px;
	padding: 32px 20px 20px;
	ul {
		display: grid;
		grid-template-columns: 138px 170px;
		place-items: center;
		margin: 0 auto;
		li {
			display: grid;
			height: 50px;
			place-items: center;
			a {
				display: block;
			}
			&:nth-child(1) {
				padding-right: 13px;
				border-right: 1px solid var(--primary);
			}
			&:nth-child(2) {
				padding-left: 13px;
			}
		}
	}
	div {
		display: grid;
		place-items: center;
		gap: 32px;
		> a {
			display: flex;
			justify-content: center;
			text-decoration: none;
			color: var(--primary);
			text-align: center;
			line-height: 1;
			&:hover {
				color: var(--link-hover);
			}
		}
	}
	p {
		text-align: center;
		line-height: 1.25;
		font-family: sans-serif;
		font-weight: normal;
		small {
			font-size: 12px;
		}
	}
}

@media (min-width:768px) {
	body {
		background-image: url("../img/kv.webp");
		background-size: 1012px 617px;
		background-position: -146px 136px;
	}
	.visual > *,
	.theme > *,
	.purpose > *,
	.overview > *,
	.program > *,
	.extrafooter > * {
		max-width: 600px;
		margin-right: auto;
		margin-left: auto;
	}
}

@media (max-width:1079px) {
	.nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		padding: 76px 32px 72px;
		border-radius: 0 0 0 50px;
		box-sizing: border-box;
		transition: transform var(--transition);
		background-color: var(--bg-primary);
		transform: translateX(100%);
		&.is-open {
			transform: translateX(0);
		}
	}
	.nav-title {
		width: 279px;
		margin: 0 auto;
	}
	.nav-list {
		margin-top: 32px;
		font-size: 20px;
		border-top: 1px dashed var(--primary);
	}
	.nav-listlink {
		padding: 16px;
		display: block;
		border-bottom: 1px dashed var(--primary);
		text-align: center;
		text-decoration: none;
		color: var(--primary);
	}
	.cta_nav {
		margin: 32px 32px 0;
		font-size: 20px;
		height: 58px;
		border-radius: 30px;
	}
}
@media (min-width:1080px) {
	html {
		scroll-padding-top: 107px;
	}
	.theme > *,
	.purpose > *,
	.overview > *,
	.program > *,
	.extrafooter > * {
		max-width: 960px;
		padding: 0;
	}
	.only_sp_inline {
		display: none;
	}
	.only_pc_inline {
		display: inline;
	}
	.icon_arrow {
		width:16px;
		height: 16px;
		margin-right: 4px;
	}
	.section-title {
		font-size: 40px;
	}
	[class*=cta_] {
		&:hover {
			box-shadow: var(--shadow-pc);
		}
	}
	.cta_main {
		margin: 24px auto 0;
		font-size: 20px;
		border-radius: 36px;
		height: 70px;
		width: 261px;
	}

	.header {
		.extraheader {
			height: 107px;
			padding: 24px 40px;
			gap: 32px;
		}
		.header-title {
			a {
				width: 340px;
				padding: 0;
			}
		}
		.nav {
			margin-left: auto;
		}
		.nav-title {
			display: none;
		}
		.nav-list {
			display: flex;
			gap: 32px;
		}
		.nav-listlink {
			font-size: 18px;
			text-decoration: none;
			color: var(--primary);
			&:hover {
				color: var(--link-hover);
			}
		}
		.cta_nav {
			display: none;
		}
		.cta_extraheader {
			margin-left: 0;
			font-size: 18px;
			padding: 8px 20px;
			height: 40px;
			border-radius: 21px;
		}
		.extraheader-navbutton {
			display: none;
		}
		.visual {
			display: flex;
			flex-direction: column;
			padding: 144px 76px 0;
			height: 810px;
		}
		.visual-text {
			display: flex;
			flex-direction: column;
			margin-right: 0;
			width: 576px;
		}
		.visual-day {
			margin-top: 40px;
			font-size: 76px;
		}
		.visual-week {
			font-size: 28px;
			width: 48px;
			height: 48px;
			border-radius: 25px;
			margin-top: 4px;
			margin-left: 4px;
		}
		.visual-schedule {
			margin-top: 10px;
			grid-template-columns: 203px 1fr;
			gap: 0 16px;
			dt {
				font-size: 36px;
			}
			dd {
				width: 100%;
				font-size: 32px;
			}
		}
		.cta_main {
			display: grid;
			margin-left: 0;
		}
	}
	.theme{
		margin-top: 160px;
		.theme-text {
			margin-top: 32px;
			font-size: 64px;
			strong {
				padding: 0 16px;
			}
			span {
				flex-direction: row;
				strong:nth-child(1) {
					padding-right: 0;
				}
				strong:nth-child(2) {
					padding-left: 0;
				}
			}

		}
	}
	.purpose{
		overflow: hidden;
		margin-top: 80px;
		.purpose-contents {
			display: flex;
			width: 1200px;
			gap: 24px;
		}
		.purpose-text {
			width: 632px;
			flex-shrink: 0;
			p {
				margin-top: 8px;
				font-size: 18px;
				&:first-of-type {
					margin-top: 32px;
				}
			}
		}
		.purpose-image {
			flex-shrink: 0;
			margin-top: 77px;
			width: 544px;
		}
	}
	.overview{
		margin-top: 112px;
		border-radius: 100px 100px 0 0;
		padding: 112px 0;
		.overview-list {
			font-size: 18px;
			margin-top: 48px;
			display: grid;
			grid-template-columns: 82px 1fr;
		}
		.overview-listterm {
			padding-top: 32px;
			padding-right: 24px;
			box-sizing: border-box;
			font-weight: 800;
			border-bottom: 1px dashed var(--primary);
		}
		.overview-listdesc {
			border-bottom: 1px dashed var(--primary);
			margin-top: 32px;
			padding-bottom: 32px;
			padding-left: 0;
		}
		.overview-list2 {
			display: grid;
			grid-template-columns: 220px 1fr;
			gap: 0;
		}
		.overview-list2term {
			font-weight: 800;
			padding-top: 32px;
			&:not(:last-child) {
				padding-top: 0;
			}
			&:not(:first-child) {
				padding-top: 32px;
			}
			&:not(:last-of-type) {
				border-bottom: 1px dashed var(--primary);
				padding-top: 0;
			}
		}
		.overview-list2desc {
			margin-top: 0;
			&:not(:last-child) {
				border-bottom: 1px dashed var(--primary);
				padding-bottom: 32px;
			}
			&:not(:last-of-type) {
				margin-bottom: 0;
			}
			.overview-list3 {
				margin-top: 0;
				grid-template-columns: 135px 1fr;
				gap: 8px 16px;
			}
		}
		.overview-list2desc {
			&:last-of-type:not(:first-of-type) {
				margin-top: 32px;
			}
		}
		.overview-list3 {
			margin-top: 0;
			grid-template-columns: 220px 1fr;
			gap: 8px 0;
		}
		.overview-list3term {
			width: 220px;
		}
		.cta_main {
			margin: 80px auto 0;
		}
	}
	.program {
		padding: 112px 0;
		.program-list {
			font-size: 18px;
			margin-top: 48px;
			display: grid;
			grid-template-columns: 244px 1fr;
		}
		.program-listterm {
			padding-top: 32px;
			padding-right: 24px;
			box-sizing: border-box;
			font-weight: 800;
			border-bottom: 1px dashed var(--bg-primary);
		}
		.program-listdesc {
			border-bottom: 1px dashed var(--bg-primary);
			margin-top: 32px;
			padding-bottom: 32px;
			padding-left: 0;
		}
		.cta_main {
			margin: 80px auto 0;
		}
	}
	.extrafooter {
		margin: 112px 20px;
		.extrafooter-list {
			border-radius: 100px;
			padding: 112px 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.extrafooter-listterm {
			font-size: 20px;
			font-weight: 800;
			padding-bottom: 8px;
			border-bottom: 2px solid var(--secondary);
			&:last-of-type {
				margin-top: 24px;
			}
		}
		.extrafooter-listdesc {
			text-align: center;
			font-size: 18px;
			&:not(:last-child) {
				margin-bottom: 32px;
			}
			.extrafooter-imagelist {
				gap: 24px;
				margin-bottom: 12px;
				li {
					width: 304px;
				}
			}
			.extrafooter-textlist {
				width: 800px;
			}
		}
	}
	.mainfooter {
		background-color: var(--bg-secondary);
		display: grid;
		gap: 32px;
		padding: 32px 20px 20px;
		div {
			display: flex;
			gap: 64px;
		}
		ul {
			display: grid;
			grid-template-columns: 188px 224px;
			li {
				display: grid;
				height: 50px;
				place-items: center;
				&:nth-child(1) {
					width: 168px;
					padding-right: 20px;
					border-right: 1px solid var(--primary);
				}
				&:nth-child(2) {
					width: 204px;
					padding-left: 20px;
				}
			}
		}
		a {
			display: flex;
			justify-content: center;
			text-decoration: none;
			color: var(--primary);
			text-align: center;
			line-height: 1;
		}
		p {
			text-align: center;
			line-height: 1.25;
			font-family: sans-serif;
			font-weight: normal;
			small {
				font-size: 12px;
			}
		}
	}
}
@media (min-width:1440px) {
	.header {
		.visual {
			padding-right: calc((100% - 1288px) / 2);
			padding-left: calc((100% - 1288px) / 2);
		}
	}
}