/* ================================================================
  curriculum
================================================================ */
:root {
	--size-xxl: 2rem;
	--size-xl: 1.5rem;
	--size-l: 1.25rem;
	--size-s: 0.875rem;
	--size-xs: 0.75rem;

	--color-base-bk: #333;
	--color-dgry: #707070;
	--color-gry: #ddd;
	--color-lgry: #f6f9fa;
	--color-bl: #1c72a2;
	--color-sbl: #a6d7df;
  --color-lsbl: #e9fafd;
	--color-rd: #e03e3e;
	--color-lye: #fffbf0;
	--color-or: #fe871f;
	--color-gd: #bc8416;

	--color-beginner: #349421;
	--color-beginner-l: #d7f5d4;
	--color-intermediate: #1369cc;
	--color-intermediate-l: #c1e5ff;
	--color-advanced: #b042b7;
	--color-advanced-l: #f1e2fa;
}

/* Reset
--------------------------------------------- */
* {
	box-sizing: border-box;
}
body {
	background: none;
}

ul, ol, p , dl, dt, dd {
	margin: 0;
}
ul, ol {
	list-style: none;
}


/* Layout
--------------------------------------------- */
.section__header__wrapper {
	& .section__header {
		margin: 0;
	}
	& p {
		margin-top: 1rem;
		color: var(--color-dgry);
		text-align: center;
	}
}

section.sec-c {
	& div[class^="l-inner--"] {
		margin: 0 auto;
	}
	& .l-inner--l {
		width: min(65rem, 100%);
	}
	& .l-inner--m {
		width: min(56rem, 100%);
	}
}
section.sec-c--in {
	border-top: 1px solid var(--color-gry);
}
.--wh {
	background: #fff;
}
.--gry {
	background: var(--color-lgry);
}
.--color {
	background: var(--color-theme-l);
}
section.sec-c.--cta {
	background: var(--color-sbl);
	& .m-heading--l {
		margin-bottom: 1rem;
	}
	& a[class^="btn-"] {
		height: 3.5em;
		& + a[class^="btn-"] {
			margin-top: 0.5rem;
		}
	}
}


/* Module
--------------------------------------------- */
.m-heading--l,
.m-heading--m,
.m-heading--s {
	line-height: 1.25;
}
.m-heading--l,
.m-heading--m {
	margin: 0 0 1em;
}
.m-heading--l {
	font-size: var(--size-xxl);
}
.m-heading--m {
	font-size: var(--size-xl);
}
.m-heading--s {
	margin: 0 0 1rem;
	font-size: var(--size-l);
}


/* State
--------------------------------------------- */
.s-round {
	padding: var(--size-xl);
	border-radius: 1rem;
	&:not(li) {
		margin: var(--size-xxl) 0;
	}
	&.--color {
		border: 1px solid var(--color-theme-m);
	}
	&.--wh {
		border: 1px solid var(--color-gry);
	}
}
.s-mt--m {
	margin-top: 4rem;
}
.s-fs--s {
	font-size: var(--size-s);
}


/* 汎用パーツ
--------------------------------------------- */
a[class^="btn-"] {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	line-height: 1.25;
	border-radius: 1rem;
	color: #fff;
	font-weight: 700;
	&::before {
		display: block;
		position: relative;
		top: -0.05em;
		margin-right: 0.8rem;
		font-size: 1.5em;
		font-weight: 500;
		font-family: "FontAwesome";
	}
}
.btn-contact {
	background: var(--color-or);
	&::before {
		content: "\f075";
		transform: scaleX(-1);
	}
}
.btn-back {
	background: var(--color-bl);
	&::before {
		content: "\f177";
	}
}

.ico {
	&::before {
		display: block;
		margin-bottom: 0.25rem;
		color: var(--color-theme-m);
		font-size: 2em;
		font-weight: 500;
		font-family: "FontAwesome";
	}
	&.--flag::before {
		content: "\f024";
	}
	&.--book::before {
		content: "\f02d";
	}
	&.--edit::before {
		content: "\f044";
	}
	&.--check::before {
		content: "\f046";
	}
}

*[class*="label-level"] {
	&.--line, &.--bg {
		border: 1px solid;
		&.--all {
			border-color: var(--color-dgry);
		}
		&.--beginner {
			border-color: var(--color-beginner);
		}
		&.--intermediate {
			border-color: var(--color-intermediate);
		}
		&.--advanced {
			border-color: var(--color-advanced);
		}
	}
	&.--line {
		&.--all {
			color: var(--color-dgry);
			background: var(--color-gry);
		}
		&.--beginner {
			color: var(--color-beginner);
			background: var(--color-beginner-l);
		}
		&.--intermediate {
			color: var(--color-intermediate);
			background: var(--color-intermediate-l);
		}
		&.--advanced {
			color: var(--color-advanced);
			background: var(--color-advanced-l);
		}
	}
	&.--bg {
		color: #fff;
		&.--all {
			background: var(--color-dgry);
		}
		&.--beginner {
			background: var(--color-beginner);
		}
		&.--intermediate {
			background: var(--color-intermediate);
		}
		&.--advanced {
			background: var(--color-advanced);
		}
	}
	

}

	
/* レスポンシブ
--------------------------------------------- */
@media only screen and (min-width: 769px) {
	.is-only--sp {
		display: none;
	}

	.section__header__wrapper {
		padding: 3rem 0;
		& .section__header {
			font-size: 2.5rem;
		}
	}
	section.sec-c--in {
		margin-top: 3rem;
		padding-top: 3rem;
	}
	section.sec-c {
		padding: 5rem 0;
	}
	.m-list__flex {
		display: flex;
		justify-content: space-between;
		& .__item02 {
			width: calc(50%- 0.5rem);
		}
		& .__item03 {
			width: calc(100% / 3 - 0.5rem);
		}
	}
}
@media only screen and (max-width: 768px) {
	.is-only--pc {
		display: none;
	}

	.section__header__wrapper {
		padding: var(--size-xxl) 1rem;
	}
	.section__header {
		font-size: var(--size-xl);
		text-align: center;
	}
	section.sec-c {
    padding: 3rem 1rem;
	}
	section.sec-c--in {
		margin-top: var(--size-xxl);
		padding-top: var(--size-xxl);
	}
	section.sec-c.--cta .l-inner--m {
		& div:first-of-type {
			text-align: center;
		}
		& div:last-of-type {
			width: 85%;
			margin: var(--size-xxl) auto 0;
		}
	}
	.m-list__flex li + li {
		margin-top: 0.5rem;
	}
}


/* ================================================================
  一覧ページ
================================================================ */
body.curriculum {
	& .sec-c:not(.--cta) .m-heading--l + p {
		margin: calc(var(--size-xl) * -1) 0 var(--size-xxl);
	}
	& .label-level {
		display: block;
		padding: 0.5rem;
		line-height: 1;
		font-size: var(--size-xs);
		text-align: center;
		border-radius: 2em;
	}
	& .wrap-table {
		margin-bottom: 1em;
		& + p {
			color: var(--color-dgry);
		}
	}
	& table {
		margin: 0;
		font-size: var(--size-s);
		border-spacing: 0;
		border-collapse: separate;
		table-layout: fixed;
		& thead {
			text-align: center;
		}
	}
	& .table--level {
		background: #fff;
		& th, & td {
			background: #fff;
			border-right: 1px solid var(--color-gry);
      border-bottom: 1px solid var(--color-gry);
		}
		& thead {
			& .ielts {
				color: var(--color-dgry);
				font-size: var(--size-xs);
			}
			& th {
				padding: 0.5rem 0;
			}
		}
		& tbody {
			& th {
				padding: 0.8rem;
				line-height: 1.4;
				text-align: left;
				& .target {
					display: block;
					margin-top: 0.25rem;
					line-height: 1;
					color: var(--color-dgry);
					font-size: var(--size-xs);
					font-weight: 500;
				}
			}
			& td {
				padding: 0.8rem 0;
			}
			& .label-level {
				margin: 0 0.5rem;
				color: #fff;
				font-weight: 700;
				&.--english-for-little-ones {
					width: calc(100% / 11 * 2 - 1rem);
					background: #f66272;
				}
				&.--smart-kids {
					width: calc(100% / 11 * 7 - 1rem);
					background: #2384e1;
				}
				&.--magic-phonics {
					width: calc(100% / 11 * 6 - 1rem);
					margin-left: calc(0.5rem + 100% / 11);
					background: #fb8a3b;
				}
				&.--time-to-talk {
					width: calc(100% / 11 * 7 - 1rem);
					margin-left: calc(0.5rem + 100% / 11 * 2);
					background: #2ab6a8;
				}
				&.--time-to-read {
					width: calc(100% / 11 * 5 - 1rem);
					margin-left: calc(0.5rem + 100% / 11 * 3);
					background: #8259e0;
				}
				&.--we-sing-we-learn {
					width: calc(100% / 11 * 2 - 1rem);
					margin-left: calc(0.5rem + 100% / 11);
					background: #f4649e;
				}
				&.--kids-reading {
					width: calc(100% / 11 * 5 - 1rem);
					background: #38b676;
				}
				&.--smart-juniors {
					margin-left: calc(0.5rem + 100% / 11 * 6);
					background: #5d4ae4;
				}
			}
		}
	}
	& .table--comparison {
		& th, & td {
			padding: 0.5rem;
		}
		& thead {
			& th {
				background: var(--color-lgry);
				&:not(.title) {
					width: 12%;
					&.description {
						width: 30%;
					}
					&.target {
						width: 4em;
					}
					&.cefr, &.ielts {
						width: 7em;
					}
				}
			}
		}
		& tbody {
			& th,
			& td:not(:nth-of-type(1)):not(:nth-of-type(4)) {
				text-align: center;
			}
			& tr {
				opacity: 1;
				transition: opacity 0.2s ease;
				&.is-hidden {
					opacity: 0;
				}
				& th, & td {
					border-bottom: 1px solid #e9e9e9;
				}
			}
			& figure {
				text-align: center;
				& img {
					display: block;
					margin: 0 auto 0.5rem;
					border-radius: 0.25rem;
				}
			}
			& a {
				display: inline-block;
				color: var(--color-base-bk);
				text-decoration: underline;
				&:hover {
					text-decoration: none;
				}
			}
			& .label-level {
				width: 6em;
				margin: 0 auto;
			}
		}
	}
	& .sort {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: calc(var(--size-xl) - 0.25rem);
		& li {
			margin-bottom: 0.5rem;
		}
		& button {
			width: 100%;
			font-size: var(--size-s);
			transition: color 0.2s, border 0.2s;
			&.--all:hover {
				background: var(--color-dgry);
			}
			&.--beginner:hover {
				background: var(--color-beginner);
			}
			&.--intermediate:hover {
				background: var(--color-intermediate);
			}
			&.--advanced:hover {
				background: var(--color-advanced);
			}
			&:hover {
				color: #fff !important;
				cursor: pointer;
			}
			&.--bg {
				pointer-events: none;
			}
		}
	}
}

/* レスポンシブ
--------------------------------------------- */
@media only screen and (min-width: 769px) {
	body.curriculum {
		& section.sec-c.--cta .l-inner--m {
			& div:first-of-type {
				text-align: center;
			}
			& div:last-of-type {
				width: 400px;
				margin: var(--size-xxl) auto 0;
			}
		}
		& .table--level thead th:first-of-type {
			width: 20%;
		}
		& .table--comparison {
			& thead .title {
				width: calc(100px + 1rem);
			}
			& tbody th figure img {
				width: 100px;
			}
		}
		& .sort li {
			width: 8em;
			margin-right: 0.5rem;
		}
	}
}

@media only screen and (max-width: 768px) {
	body.curriculum {
		& .wrap-table {
			overflow: scroll;
			width: 100%;
			max-height: 70svh;
			&::-webkit-scrollbar {
				width: 4px;
				height: 4px;
			}
			&::-webkit-scrollbar-thumb {
				background: var(--color-dgry);
				border-radius: 2px;
			}
			& table {
				width: 800px;
				& thead {
					& th {
						position: sticky;
						z-index: 1;
						&:first-of-type {
							z-index: 2;
							left: 0;
						}
					}
				}
				& tbody th:first-of-type {
					position: sticky;
					left: 0;
					background: #fff;
				}
				&.table--level {
					& thead th:first-of-type,
					& tbody th {
						border-left: 1px solid var(--color-gry);
					}
					& thead th:first-of-type {
						width: 16%;
					}
					& .level th {
						top: 0;
						border-top: 1px solid var(--color-gry);
					}
					& .ielts th {
						top: calc(var(--size-s) * 1.6 + 1rem + 1px);
						border-bottom: 1px solid var(--color-gry);
					}
				}
				&.table--comparison {
					& thead th {
						top: 0;
					}
					& thead .title {
						width: calc(80px + 1rem);
					}
					& tbody th figure img {
						width: 80px;
					}
				}
			}
		}
		& .sort {
			justify-content: space-between;
			& li {
				width: calc(50% - 0.25em);
			}
		}
	}
}


/* ================================================================
  個別ページ
================================================================ */
body.parent-curriculum {
	& .--main {
		background: var(--color-theme-l);
		border-bottom: 4px solid var(--color-theme-d);
		& .nav-path {
			margin-bottom: var(--size-xl);
			& ol {
				display: flex;
				font-size: var(--size-s);
				& a {
					color: var(--color-base-bk);
					text-decoration: underline;
					&:hover {
						text-decoration: none;
					}
				}
				& li + li {
					margin-left: 1em;
					&::before {
						content: "\f105";
						display: inline-block;
						margin-right: 1em;
						color: var(--color-gry);
						font-family: "FontAwesome";
					}
				}
			}
		}
		& .l-thumb {
			& .img {
				overflow: hidden;
				border-radius: 1rem;
				box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
				& img {
					display: block;
					width: 100%;
				}
			}
		}
		& .l-detail {
			& .label {
				display: flex;
				align-items: center;
				& span {
					display: block;
					margin-right: 0.5em;
					padding: 0.25em 1em;
					font-size: 0.8rem;
					border-radius: 2em;
					&.label-level {
						color: #fff;
						background: var(--color-theme-d);
					}
					&.label-target {
						background: #fff;
						border: 1px solid var(--color-gry);
					}
				}
			}
			& .name {
				margin: 0.5rem 0 0;
			}
			& .desc {
				margin: 1rem 0 var(--size-xxl);
			}
			& dl {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: -0.5rem;
				font-size: var(--size-s);
				& dt, & dd {
					margin-bottom: 0.5rem;
					background: #fff;
				}
				& dt {
					width: 13em;
					padding: 0.5rem 0 0.5em 1rem;
					border-radius: 0.25rem 0 0 0.25rem;
				}
				& dd {
					width: calc(100% - 13em);
					padding: 0.5rem 0 0.5em 0.5em;
					border-radius: 0 0.25rem 0.25rem 0;
				}
			}
		}
	}
	& .m-list--reason,
	& .m-list--course {
		counter-reset: number;
		& li {
			counter-increment: number;
			&::before {
				content: counter(number);
				display: flex;
				align-items: center;
				justify-content: center;
				width: 2em;
				height: 2em;
				color: #fff;
				font-size: var(--size-xl);
				font-weight: 700;
				background: var(--color-theme-d);
				border-radius: 50%;
			}
		}
	}
	& .m-list--reason {
		& li {
			&::before {
				margin-bottom: 0.5rem;
			}
		}
	}
	& .m-list--course {
		& li {
			position: relative;
			margin-bottom: 0.5rem;
			& .label {
				& span[class^="label-"] {
					display: block;
					width: 10em;
					padding: 0.25em 0;
					font-size: var(--size-xs);
					font-weight: 700;
					text-align: center;
					border-radius: 1rem;
				}
				& .label-level {
					color: var(--color-theme-d);
					background: var(--color-theme-l);
				}
				& .label-lesson {
					background: var(--color-lgry);
				}
			}
			& dl {
				margin-top: 0.5rem;
				color: var(--color-dgry);
				& dt {
					margin-right: 0.5em;
				}
			}
		}
	}
}

/* English for Little Ones
--------------------------------------------- */
body.english-for-little-ones {
	--color-theme-d: #f66272;
	--color-theme-m: #ffd0d0;
	--color-theme-l: #fdf0f0;
}
/* Smart Kids
--------------------------------------------- */
body.smart-kids {
	--color-theme-d: #2384e1;
	--color-theme-m: #b4cef6;
	--color-theme-l: #eff6ff;

	& .box-add--structure {
		& ol li {
			position: relative;
			padding: 0.25em 0;
			color: #fff;
			font-weight: 700;
			text-align: center;
			background: var(--color-theme-d);
			border-radius: 0.5rem;
			&:not(:last-of-type) {
				margin-bottom: var(--size-xxl);
				&::after {
					position: absolute;
					left: 0;
					bottom: calc(var(--size-xl) * -1);
					content: "↓ " attr(data) " ↓";
					width: 100%;
					color: var(--color-dgry);
					font-size: 0.75rem;
					font-weight: 400;
				}
			}
		}
		& .s-fs--s {
			color: var(--color-dgry);
		}
	}
}
/* EMagic Phonics
--------------------------------------------- */
body.magic-phonics {
	--color-theme-d: #fb8a3b;
	--color-theme-m: #ffd6ab;
	--color-theme-l: #fff3e5;
}
/* Time to Talk
--------------------------------------------- */
body.time-to-talk {
	--color-theme-d: #2ab6a8;
	--color-theme-m: #b0e3da;
	--color-theme-l: #e1fbf5;
}
/* Time to Read
--------------------------------------------- */
body.time-to-read {
	--color-theme-d: #9d6de0;
	--color-theme-m: #d2c6fb;
	--color-theme-l: #f6f3ff;
}
/* We Sing We Learn
--------------------------------------------- */
body.we-sing-we-learn {
	--color-theme-d: #f4649e;
	--color-theme-m: #fccee7;
	--color-theme-l: #fdf2f8;
}
/* Kids Reading
--------------------------------------------- */
body.kids-reading {
	--color-theme-d: #38b676;
	--color-theme-m: #afe5dd;
	--color-theme-l: #dff9f2;
}
/* Smart Juniors
--------------------------------------------- */
body.smart-juniors {
	--color-theme-d: #5d4ae4;
	--color-theme-m: #c2cbf5;
	--color-theme-l: #f0f3ff;
}

/* レスポンシブ
--------------------------------------------- */
@media only screen and (min-width: 769px) {
	body.parent-curriculum {
		& section.sec-c.--cta {
			& .l-inner--m {
				display: flex;
				align-items: center;
				justify-content: space-between;
				& > div {
					width: calc(50% - var(--size-xxl));
				}
			}
		}
		& .--main {
			& .l-inner--m {
				overflow: hidden;
				clear: both;
			}
			& .nav-path,
			& .l-detail {
				float: right;
				width: calc(100% - 220px - 3rem);
			}
			& .l-thumb {
				float: left;
				width: 220px;
				& .img {
					margin: 0;
				}
			}
			& .l-detail {
				& dl .--s {
					width: calc(50% - 13em - 0.25rem);
					& + dt {
						margin-left: auto;
					}
				}
			}
		}
		& .m-list--course {
			& li {
				padding-left: 6rem;
				&::before {
					position: absolute;
					top: var(--size-xl);
					left: var(--size-xl);
				}
				& .m-heading--s {
					margin-bottom: 0.15rem;
				}
				& .label {
					position: absolute;
					top: var(--size-xl);
					right: var(--size-xl);
					& span[class^="label-"] + span[class^="label-"] {
						margin-top: 0.25rem;
					}
				}
				& dl {
					display: flex;
				}
			}
		}
		
	}
	body.smart-kids {
		& .box-add--structure {
			clear: both;
			overflow: hidden;
			& .m-heading--s, & ol, & .s-fs--s {
				width: calc(50% - 1rem);
			}
			& .m-heading--s, & .s-fs--s {
				float: left;
			}
			& ol {
				float: right;
			}
		}
	}
}
@media only screen and (max-width: 768px) {
	body.parent-curriculum {
		& .--main {
			& .l-thumb {
				& .img {
					width: 200px;
					margin: 0 auto var(--size-xxl);
				}
			}
			& .l-detail {
				& dl {
					& dt:first-of-type,
					& dd:first-of-type {
						width: 100%;
					}
					& dt:first-of-type {
						margin-bottom: 0;
						padding-bottom: 0.25rem;
						border-radius: 0.25rem 0.25rem 0 0;
					}
					& dd:first-of-type {
						padding: 0 1rem 0.5rem;
						border-radius: 0 0 0.25rem 0.25rem;
					}
				}
			}
		}
		& .m-list--course {
			& li {
				&::before {
					margin-bottom: 0.5rem;
				}
				& .m-heading--s {
					margin: 0
				}
				& .label {
					display: flex;
					margin: 0.5rem 0 1rem;
					& span[class^="label-"] + span[class^="label-"] {
						margin-left: 0.25rem;
					}
				}
			}
		}
	}
	body.smart-kids {
		& .box-add--structure {
			& ol {
				width: 85%;
				margin: var(--size-xl) auto;
			}
		}
	}
}