@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap');
/* ============================== */
/*  科学教育事業 */
/* ============================== */
/* ヒーロー、ページタイトル（野外教育事業、科学教室事業共通） */
.hero {
	position: relative;
}
.page-title {
	display: flex;
	align-items: center;
	color: #fff;
	background: #23c184;
	padding: 15px var(--x-margin);
}
.lead-copy {
	font-size: 100%;
}
.lead-copy + h2 {
	margin-top: 1em;
}
@media screen and (min-width: 768px), print {
	.hero {
		overflow-x: hidden;
	}
	.page-title {
		background: transparent;
		width: calc(var(--x-margin) + 380px);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		padding: 15px 10px 15px var(--x-margin);
	}
	.page-title::before {
		content: "";
		position: absolute;
		right: 80px;
		bottom: 0;
		width: calc(100% + 70px);
		height: 100%;
		background: #23c184;
		transform: skewX(-22deg);
		transform-origin: bottom right;
	}
	.page-title * {
		z-index: 4;
	}
}
@media screen and (min-width: 1232px), print {
	.hero {
		overflow-x: hidden;
	}
	.page-title {
		background: transparent;
		width: calc(var(--x-margin) + 440px);
		height: 358px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		padding: 15px 10px 15px var(--x-margin);
	}
	.page-title::before {
		content: "";
		position: absolute;
		right: 80px;
		bottom: 0;
		width: calc(100% + 70px);
		height: 100%;
		background: #23c184;
		transform: skewX(-22deg);
		transform-origin: bottom right;
	}
	.page-title * {
		z-index: 4;
	}
	.hero .image {
		margin-top: 115px;
		height: 500px;
		margin-left: calc(var(--x-margin) + 144px);
		position: relative;
		overflow-x: hidden;
	}
	.hero .image img {
		object-fit: cover;
		height: 100%;
	}
	.hero .image::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: -120px;
		width: 120px;
		height: 100%;
		transform: skewX(-22deg);
		background: #fff;
		transform-origin: bottom right;
		z-index: 2;
	}
	.hero .image::after {
		content: "";
		position: absolute;
		top: calc(358px - 115px);
		left: 0;
		width: calc(440px - 144px - 80px);
		height: 257px; /*500px + 115px - 358px*/
		background: #1c9966;
		transform: skewX(-65deg);
		transform-origin: top right;
		z-index: 1;
	}
	.lead-copy {
		font-size: 140%;
	}
}
@media screen and (min-width: 1392px) {
	.page-title {
		width: calc(var(--x-margin) + 440px - 90px);
		padding-left: calc(var(--x-margin) - 100px)
	}
	.page-title::before {
		width: calc(100% + 90px);
	}
	.hero .image {
		margin-left: calc(var(--x-margin) + 144px - 90px);
	}
}
.page-title .icon {
	width: 60px;
	margin-right: 10px;
}
.page-title h1 {
	margin: 0;
}
.page-title h1 .en {
	font-size: 12px;
	font-size: 75%;
	display: block;
	margin: 0 0 0.2em;
}
.page-title h1 .ja {
	font-size: 22px;
	display: block;
}
@media screen and (min-width: 768px), print {
	.page-title .icon {
		width: 93.75px;
		margin-right: 11.25px;
	}
	.page-title h1 .en {
		font-size: 12px;
		font-size: 75%;
	}
	.page-title h1 .ja {
		font-size: 27px;
	}
}
@media screen and (min-width: 1232px), print {
	.page-title .icon {
		width: 125px;
		margin-right: 15px;
	}
	.page-title h1 .en {
		font-size: 16px;
		font-size: 100%;
	}
	.page-title h1 .ja {
		font-size: 36px;
	}
}
h2 {
	font-size: 19px;
	font-size: 118.75%;
	color: #23c184;
}
h3 {
	font-size: 18px;
	font-size: 112.5%;
	color: #23c184;
}
@media screen and (min-width: 1232px), print {
	h2 {
		font-size: 26px;
	}
	h3 {
		font-size: 25px;
	}
}
/* 事業紹介コンテンツ */
.business-content {
	margin-top: var(--y-margin-l);
}
.business-content .business-section + .business-section {
	margin-top: var(--y-margin-l);
}
.business-section figure {
	margin-top: 15px;
	position: relative;
}
.business-section figure .icon {
	position: absolute;
	bottom: 15px;
	right: 15px;
	width: 44px;
}
.business-content h3 {
	margin-top: 15px;
}
.business-content .business-section .body-copy {
	color: #505050;
}
.business-content .business-section .notice {
	margin-top: 0.5em;
}
/* GREEN BUTTON */
.button-bar {
	background: #f5f5f5;
	padding: 15px 15px 20px;
	margin: var(--y-margin-l) 0;
}
@media screen and (min-width: 768px), print {
	.button-bar {
		padding: 25px 25px 25px;
	}
}
@media screen and (min-width: 1232px), print {
	.button-bar {
		padding: 55px 45px 55px;
	}
}
.button-science .button.green {
	font-size: 125%;
	height: 4.5em;
	border-radius: 10px;
	color: #fff;
	padding: 0.5em 1em;
	text-decoration: none;
	display: flex;
	align-items: center;
	line-height: 1.4;
	background: #23c184 url("../imgs/arr.svg") no-repeat right 10px center;
	background-size: 20px;
	padding-right: 30px;
	font-weight: 700;
}
.button-science .button.green .button-icon {
	width: 26px;
	display: block;
	flex: 0 0 auto;
	margin-right: 10px;
}
.button-science .button.green .button-text {
	display: block;
}
@media screen and (min-width: 768px), print {
	.button-science {
		width: 50%;
		max-width: 450px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (min-width: 1232px), print {
	.button-science {
		height: 6.5625em;
		padding: 0.5em 1em;
		padding-right: 40px;
		background-size: 30px;
	}
	.button-science .button-icon {
		width: 40px;
		margin-right: 15px;
	}
}
@media (any-hover: hover) {
	.button-science .button.green:hover {
		background-color: #1fa974;
	}
}
.business-section .movie-thumb {
	position: relative
}
@media (any-hover: hover) {
	.business-section .movie-thumb a:hover {
		opacity: 0.7;
	}
}
.course-images video {
	margin-top: 15px;
	width: 100%;
}
@media screen and (min-width: 768px), print {
	.course-images {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
		align-items: flex-start;
	}
	.course-images figure {
		width: 27%;
		margin-top: 0;
	}
	.course-images video {
		width: 68%;
		margin-top: 0;
	}
	.business-content h3 {
		margin-top: 20px;
	}
}
@media screen and (min-width: 1232px), print {
	.business-section .course-images {
		margin-top: 30px;
	}
}
/*
.heading-ribbon-a {
	font-size: 22px;
	margin: 0 auto 0.75em;
	padding: 0 0.25em 0.2em;
	border-bottom: 3px solid;
	color: #23c184;
	width: fit-content;
	background-color: #fff;
}
@media screen and (min-width: 768px), print {
	.heading-ribbon-a {
		font-size: 24px;
	}
}
@media screen and (min-width: 1232px), print {
	.heading-ribbon-a {
		font-size: 38px;
		border-bottom-width: 4px;
	}
}
*/
.lottery-result-section {
	background-color: #f0fdf7;
	padding: 70px var(--x-margin) var(--y-margin-xl);
	margin-inline: 0;
	margin-bottom: 0;
}
.heading-ribbon-a {
	--ribbon-color: #f76080;
	--ribbon-height: 1.9em;
	--ribbon-x-shift: 1.3em;
	--ribbon-y-shift: 0.4em;
	text-align: center;
	position: relative;
	width: fit-content;
	height: var(--ribbon-height);
	margin: 0 auto 1.75em;
	color: #ffff6f;
	font-size: 20px;
	line-height: 1;
}
@media screen and (min-width: 768px), print {
	.heading-ribbon-a {
		font-size: 28px;
	}
}
.heading-ribbon-a span {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 0 1.4em;
	background-color: var(--ribbon-color);
	z-index: 2;
	position: relative;
	padding-bottom: 0.08em;
}
.heading-ribbon-a span::before, .heading-ribbon-a span::after {
	content: "";
	box-sizing: content-box;
	position: absolute;
	width: 0;
	height: 0;
	bottom: calc(var(--ribbon-y-shift) * -1);
	border-top: var(--ribbon-y-shift) solid color-mix(in oklab, var(--ribbon-color), black 20%);
}
.heading-ribbon-a span::before {
	left: 0;
	border-left: 0.7em solid transparent;
}
.heading-ribbon-a span::after {
	right: 0;
	border-right: 0.7em solid transparent;
}
.heading-ribbon-a::before, .heading-ribbon-a::after {
	content: "";
	box-sizing: content-box;
	position: absolute;
	width: 0.8em;
	height: 0;
	bottom: calc(var(--ribbon-y-shift) * -1);
	border: solid var(--ribbon-color);
	border-width: calc(var(--ribbon-height) / 2) 0.6em;
	z-index: 1;
}
.heading-ribbon-a::before {
	left: calc(var(--ribbon-x-shift) * -1);
	border-left-color: transparent;
}
.heading-ribbon-a::after {
	right: calc(var(--ribbon-x-shift) * -1);
	border-right-color: transparent;
}
.lottery-lead {
	font-size: 120%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lottery-lead b {
	font-weight: 600;
	margin-bottom: 0.5em;
	display: block;
	color: #ed2812;
	font-style: italic;
	font-size: 110%;
}
.lottery-lead p.small {
	font-size: 0.75em;
	display: block;
	margin-top: 0.75em;
}
/* 講座カテゴリジャンプメニュー */
nav.category-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
nav.category-nav ul li {
	width: calc((100% - 10px) / 2);
}
@media screen and (min-width: 768px), print {
	nav.category-nav ul {
		gap: 15px;
	}
	nav.category-nav ul li:nth-child(n) {
		width: calc((100% - 15px * 3) / 4);
	}
}
@media (any-hover: hover) {
	nav.category-nav ul li a {
		transition: 200ms;
		display: block;
	}
	nav.category-nav ul li a:hover {
		transform: scale(1.15);
	}
}
/* 講座カテゴリタイトル */
h2.cat-title {
	background: no-repeat center left;
	background-size: 2.6em;
	padding-left: 3em;
	border-bottom: 2px solid #23c184;
	;
	line-height: 2.615384615384615em;
	color: #333;
	font-size: 22px;
	margin-bottom: 1.5em;
}
h2.cat-title#insects {
	background-image: url(../imgs/menu_1ico.png);
}
h2.cat-title#plants {
	background-image: url(../imgs/menu_2ico.png);
}
h2.cat-title#rocks {
	background-image: url(../imgs/menu_3ico.png);
}
h2.cat-title#sea {
	background-image: url(../imgs/menu_4ico.png);
}
h2.cat-title#industries {
	background-image: url(../imgs/menu_5ico.png);
}
h2.cat-title#programming {
	background-image: url(../imgs/menu_6ico.png);
}
h2.cat-title#experiment {
	background-image: url(../imgs/menu_7ico.png);
}
h2.cat-title#karakuri {
	background-image: url(../imgs/menu_8ico.png);
}
h2.cat-title#astronomy {
	background-image: url(../imgs/menu_9ico.png);
}
h2.cat-title#field {
	background-image: url("../imgs/menu_10ico.png");
}
@media screen and (min-width: 1232px), print {
	h2.cat-title {
		font-size: 28px;
	}
}
h2.cat-title2 {
	font-size: 22px;
	color: inherit;
	margin: 0 0 0.75em;
}
@media screen and (min-width: 1232px), print {
	h2.cat-title2 {
		font-size: 28px;
	}
}
.business-section {
	margin-top: 50px;
}
/* コースのリスト */
.course-list {
	--_box-shadow-width: 4px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
	gap: 15px;
	margin-right: var(--_box-shadow-width);
}
.course-list li {
	container-type: inline-size;
}
.course-list a {
	color: #333;
	font-size: 17px;
	font-size: 11.43cqi;
	aspect-ratio: 175 / 227;
	border: 3px solid currentColor;
	border-radius: 10px;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	font-style: normal;
	line-height: 1.2;
	text-decoration: none;
	font-feature-settings: 'palt';
	padding: 1em 0.3em 0.18em;
	box-shadow: var(--_box-shadow-width) var(--_box-shadow-width) 0 currentColor;
	transition: scale 300ms;
}
.course-list a::after {
	content: "";
	width: 4.75em;
	aspect-ratio: 190 / 154;
	background-size: 100%;
	background-repeat: no-repeat;
}
.course-list .title {
	text-align: center;
}
.course-list .num {
	font-size: 1.2em;
	line-height: 1;
	color: #ed2812;
	font-family: "Google Sans Flex", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	letter-spacing: 0;
	text-align: center;
}
.course-list .num::after {
	content: "";
	border-bottom: 1px solid;
	display: block;
	width: 0.9em;
	margin: 0.35em auto 0;
}
.course-list li.insect a {
	color: #b95b57;
}
.course-list li.insect a::after {
	background-image: url("../imgs/ci_insect.png");
}
.course-list li.flower a {
	color: #ef7893;
}
.course-list li.flower a::after {
	background-image: url("../imgs/ci_flower.png");
}
.course-list li.castle a {
	color: #b378bd;
}
.course-list li.castle a::after {
	background-image: url("../imgs/ci_castle.png");
}
.course-list li.rock a {
	color: #8699a6;
}
.course-list li.rock a::after {
	background-image: url("../imgs/ci_rock.png");
}
.course-list li.sea a {
	color: #30b9f3;
}
.course-list li.sea a::after {
	background-image: url("../imgs/ci_sea.png");
}
.course-list li.universe a {
	color: #6d74af;
}
.course-list li.universe a::after {
	background-image: url("../imgs/ci_universe.png");
}
.course-list li.experiment a {
	color: #f88610;
}
.course-list li.experiment a::after {
	background-image: url("../imgs/ci_experiment.png");
}
.course-list li.programming a {
	color: #24aeb6;
}
.course-list li.programming a::after {
	background-image: url("../imgs/ci_programming.png");
}
.course-list li.nature a {
	color: #71b562;
}
.course-list li.nature a::after {
	background-image: url("../imgs/ci_nature.png");
}
.course-list li.bonodori a {
	color: #f55141;
}
.course-list li.bonodori a::after {
	background-image: url("../imgs/ci_bonodori.png");
}
.course-list li.fossil a {
	color: #a7866c;
}
.course-list li.fossil a::after {
	background-image: url("../imgs/ci_fossil.png");
}
.course-list li.robot a {
	color: #cb9452;
}
.course-list li.robot a::after {
	background-image: url("../imgs/ci_robot.png");
}
.course-list li.radio a {
	color: #469fd5;
}
.course-list li.radio a::after {
	background-image: url("../imgs/ci_radio.png");
}
.course-list li.plane a {
	color: #629be3;
}
.course-list li.plane a::after {
	background-image: url("../imgs/ci_plane.png");
}
@media screen and (min-width: 768px), print {
	.course-list {
		gap: 22px;
	}
}
@media screen and (min-width: 1232px), print {
	.course-list {
		grid-template-columns: repeat(6, 1fr);
		gap: 27px;
	}
}
@media (any-hover: hover) {
	.course-list a:hover {
		scale: 1.1;
	}
}
/* 募集バナー */
.workshop-banner {
	margin: var(--y-margin-m) var(--x-margin) var(--y-margin-l);
}
.banner-foot-wrapper {
	background: #f5f5f5;
	padding: 15px 15px 20px;
}
@media screen and (min-width: 768px), print {
	.banner-foot-wrapper {
		padding: 25px 25px 25px;
	}
}
@media screen and (min-width: 1232px), print {
	.banner-foot-wrapper {
		padding: 55px 45px 55px;
	}
}
.banner-foot-1 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.application-button a, .guideline-button a {
	display: flex;
	border: 3px solid #23c184;
	background-color: #fff;
	text-decoration: none;
}
.application-button a {
	color: #23c184;
	padding: 2vw 0;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	position: relative;
	height: max(16vw, 74px);
}
.application-button a::after {
	content: "";
	position: absolute;
	right: -5vw;
	top: 50%;
	translate: 0 -50%;
	width: 43vw;
	aspect-ratio: 1;
	background-color: #23c184;
	border-radius: 50%;
	transition: 300ms;
}
.application-text {
	width: 57%;
	font-size: 3.6vw;
	display: block;
	position: relative;
	text-align: center;
	z-index: 1;
	padding-right: 1em;
	transition: 300ms;
}
.application-text::after {
	--_clip-triangle-right: polygon(0 0, 100% 50%, 0 100%);
	--_size: 0.55em;
	content: "";
	display: block;
	width: calc(var(--_size) / 2 * tan(60deg));
	height: var(--_size);
	clip-path: var(--_clip-triangle-right);
	background-color: #23c184;
	position: absolute;
	top: calc(calc(100% - var(--_size)) / 2);
	right: 1.5em;
	transition: 300ms;
}
.nagoya-online {
	width: 43%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.55em;
	color: #fff;
	position: relative;
	z-index: 1;
	font-size: 2.6vw;
	line-height: 1.3;
	transition: 300ms;
}
.nagoya-online::before {
	content: "";
	background: url("../imgs/sp.svg") no-repeat left center;
	width: 2.8em;
	aspect-ratio: 64 / 85;
	display: block;
}
.application-button .button-footnote {
	font-size: clamp(14px, 3.8vw, 19px);
	margin-top: 0.3em;
	font-feature-settings: 'palt';
	font-weight: 600;
	display: flex;
	justify-content: center;
	line-height: 1.4;
}
.application-button .button-footnote .title {
	font-size: 0.8em;
	font-weight: normal;
	width: 6.25em;
	flex: 0 0 auto;
	line-height: calc(1.25 * 1.4);
	display: block;
}
.application-button .button-footnote .title::before {
	content: "■";
	color: var(--red);
	padding-right: 0.25em;
}
.guideline-button {
	width: min(100%, 320px);
	margin-inline: auto;
}
.guideline-button a {
	color: #23c184;
	padding: 0.5em 1.3em;
	font-weight: 700;
	background: url("../imgs/arr_gr.svg") #fff no-repeat right 10px center;
	background-size: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	font-size: clamp(12px, 4vw, 17px);
	transition: 300ms;
}
.guideline-button a::before {
	content: "";
	width: 2em;
	aspect-ratio: 1 / 1.5;
	background: url("../imgs/ico_pdf2.svg") no-repeat center;
	display: block;
}
@media (any-hover: hover) {
	.application-button a:hover::after {
		scale: 1.25;
	}
	.application-button a:hover .application-text {
		padding-right: 3em;
	}
	.application-button a:hover .application-text::after {
		right: 0.5em;
		background-color: #fff;
	}
	.application-button a:hover .nagoya-online {
		scale: 1.15;
	}
	.guideline-button a:hover {
		color: #fff;
		background-color: #23c184;
		background-image: url("../imgs/arr.svg")
	}
}
@media screen and (min-width: 768px), print {
	.banner-foot-1 {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
	.application-button {
		width: calc(720 / 1110 * 100%);
		max-width: 700px;
	}
	.guideline-button {
		width: calc(380 / 1110 * 100%);
		max-width: 350px;
		margin-inline: 0;
	}
	.application-button a, .guideline-button a {
		height: 80px;
	}
	.application-button a {
		padding: 5px 0;
	}
	.application-button a::after {
		right: -2.857143%;
		width: 48%;
	}
	.application-text {
		font-size: 18px;
		padding-right: 1em;
	}
	.nagoya-online {
		width: 43%;
		font-size: 13px;
	}
	.application-button .button-footnote {}
	.guideline-button a {
		font-size: 15px;
	}
}
@media screen and (min-width: 1232px), print {
	.application-button a, .guideline-button a {
		height: 110px;
	}
	.application-button a:hover .application-text::after {
		right: 0;
	}
	.application-text {
		font-size: 26px;
	}
	.nagoya-online {
		font-size: 18px;
	}
	.application-button .button-footnote {
		font-size: 21px;
	}
	.guideline-button a {
		font-size: 20px;
	}
}
.banner-foot-2 {
	font-size: clamp(14px, 3.2vw, 17px);
	font-weight: 600;
}
.banner-foot-2 .heading {
	text-align: center;
	margin-bottom: 0.3em;
	font-feature-settings: "palt";
	font-size: 1.2em;
	color: var(--red);
}
.banner-foot-2 .announce {
	text-align: center;
	margin-bottom: 1em;
	font-size: inherit;
	color: #23c184;
}
.banner-foot-2 .guideline-button a {
	margin-inline: auto;
}
@media screen and (min-width: 768px), print {
	.banner-foot-2 {
		display: grid;
		grid-template-columns: 1fr clamp(280px, calc(380 / 1110 * 100%), 350px);
		gap: 0 20px;
		grid-template-areas:
			"heading heading"
			"announce button";
	}
	.banner-foot-2 .heading {
		grid-area: heading;
		margin-bottom: 0.5em;
		font-size: 1.25em;
	}
	.banner-foot-2 .announce {
		grid-area: announce;
		text-align: left;
	}
	.banner-foot-2 .guideline-button {
		grid-area: button;
		width: 100%;
	}
	.banner-foot-2 .guideline-button a {
		height: 76.5px;
	}
}
@media screen and (min-width: 1232px), print {
	.banner-foot-2 {
		font-size: 20px;
	}
	.banner-foot-2 .guideline-button a {
		height: 90px;
	}
}
.banner-foot-3 {
	display: flex;
	justify-content: center;
	align-items: center;
}
.banner-foot-3 .guideline-button {
	width: min(100%, 260px);
}
.banner-foot-3 .guideline-button a {
	height: 60px;
}
@media screen and (min-width: 1232px), print {
	.banner-foot-3 .guideline-button {
		width: 320px
	}
	.banner-foot-3 .guideline-button a {
		height: 75px;
	}
}
.course-detail-section {
	margin: var(--y-margin-l) var(--x-margin) var(--y-margin-xl);
}