@charset "utf-8";
/*----------------------------
	main contents
-----------------------------*/
body {
	background-color: var(--base-color);
}
.main__title__outer {
	max-width: max-content;
	margin: 8rem auto;
	padding: 0 4.4375rem;
	position: relative;
}
.main__title__outer::before,
.main__title__outer::after {
	content: "";
	width: 2rem;
	height: 2rem;
	position: absolute;
}
.main__title__outer::before {
	top: 0;
	left: 0;
	border-top: 3px solid var(--main-color);
	border-left: 3px solid var(--main-color);
}
.main__title__outer::after {
	bottom: 0;
	right: 0;
	border-bottom: 3px solid var(--main-color);
	border-right: 3px solid var(--main-color);
}
.main__title {
	color: var(--main-color);
	font-size: var(--fs-24);
	font-weight: bold;
	text-align: center;
}
.main__title::before {
	margin: 0 auto .5rem;
}
.sec {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-right: 3.75rem;
}
.sec + .sec {
	margin-top: 8rem;
}
.title__outer {
	width: 31.044%;
	background-color: #fff;
	border-radius: 0 1.25rem 1.25rem 0;
	padding: 2rem 1.5rem 2rem 9.459vw;
}
.sec__title {
	color: var(--main-color);
	font-size: var(--fs-18);
	font-weight: bold;
	margin-bottom: .5rem;
}
.list--tag {
	display: flex;
	color: #fff;
	font-size: var(--fs-12);
	font-weight: bold;
	letter-spacing: .06em;
	gap: .25rem;
	margin-bottom: 1.5rem;
}
.list--tag__item {
	padding: 0 .5rem;
}
.sec__text {
	font-family: var(--yugothic);
}
.sec__text p + p {
	margin-top: 1rem;
}
.codepen__outer {
	width: 58.88%;
}
.codepen__outer .list {
	line-height: 1.75;
	margin-top: 2rem;
	font-family: var(--yugothic);
	counter-reset: number 0; 
}
.codepen__outer .list__item {
	padding-left: 1rem;
	position: relative;
}
.codepen__outer .list__item + .list__item {
	margin-top: 1rem;
}
.codepen__outer .list__item::before {
	counter-increment: number 1;
	content: counter(number) ".";
	position: absolute;
	top: 0;
	left: 0;
}
iframe[src*="codepen.io"] {
	height: 400px !important;
}

/*----------------------------
	contents
-----------------------------*/
.tbl {
	font-family: var(--noto-sans-jp);
	line-height: 1.75;
}
.tbl tr {
	border-bottom: 1px solid var(--main-color);
}
.tbl__head {
	width: 4.375rem;
	padding: 1px;
}
.tbl__data {
	padding: 1px .5rem;
}
.tbl__data.bg--light-gray {
	width: 8.4375rem;
	text-align: center;
}
.banner {
	max-width: 300px;
	margin: 3.75rem auto 0;
}

/*----------------------------
	media query
-----------------------------*/
@media screen and (max-width: 768px){


}