@charset "UTF-8";
:root {
	--clr_glec: #009245;
	--clr_sub_glec: #F8FAED;
	--clr_cream: #FFFBE3;
	--clr_red: #ED1C24;
	--clr_yellow: #FFEF24;
	--clr_border: #707070;
	--clr_qa_blue: #065AC8;
	--clr_qa_gray: #959595;
}
html {
	font-size: 16px;
}
.GLE.renewal202607 {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic W6 JIS2004","Hiragino Kaku Gothic ProN W6","ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic Pro W6","ヒラギノ角ゴ Pro W6","ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-size: 100%;
	.font-A1 {
		font-family: "Noto Sans JP", "Hiragino Kaku Gothic W6 JIS2004","Hiragino Kaku Gothic ProN W6","ヒラギノ角ゴ ProN W6","Hiragino Kaku Gothic Pro W6","ヒラギノ角ゴ Pro W6","ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	}

	/* ========== パーツ ========== */
	.content-main {
		h2 {
			background-image: url(../images/bg-bdr-dot.svg);
			background-position: left bottom;
			background-repeat: repeat-x;
			background-size: auto 2px;
			border-bottom: none;
			font-size: 1.4375rem;
			padding-bottom: 2px;
			@media (max-width: 640px) {
				font-size: 1.25rem;
			}
		}
		h3 {
			padding-top: .5rem;
		}
	}

	/* ========== MV ========== */
	.gle-main {
		background: none;
		position: relative;
		@media (max-width:640px) {
			padding-top: 0;
		}
		h1 {
			position: absolute;
			z-index: 2;
			@media (max-width:640px) {
				padding-top: 1rem;
			}
			span {
				background-color: #fff;
				color: var(--clr_glec);
				display: inline-block;
				font-size: 2.125rem;
				padding-inline: .5em;
				@media (max-width:640px) {
					font-size: 0.875rem;
				}
			}
			em {
				background-color: #fff;
				color: var(--clr_glec);
				display: inline-block;
				font-size: 2.875rem;
				margin-top: .2em;
				padding-inline: .5em;
				@media (max-width:640px) {
					font-size: 1.0625rem;
				}
			}
		}
		.main-photo {
			z-index: 1;
			li.main-teaching {
				left: 3.2%;
				top: 27.095%;
				@media (max-width:640px) {
					left: 0;
				}
			}
			li.main-coaching {
				right: 1.2%;
				top: 28.7425%;
				@media (max-width:640px) {
					right: 0;
				}
			}
			@media (max-width:640px) {
				li {
					b {
						border-bottom: none;
						padding-bottom: 0;
					}
					strong {
						padding-bottom: 3%;
					}
				}
			}
		}
	}
	/* ========== about ========== */
	.gle-about {
		background-color: var(--clr_cream);
		.about-main {
			padding-top: 0;
			.about-main-txt {
				background-size: 100% 155%;
				padding: 32px 8.5% 0;
				position: static;
			}
		}
		.about-wrap {
			.about-lead {
				padding-bottom: 0;
				.about-lead-txt {
					color: var(--clr_glec);
					font-size: 1.125rem;
					font-weight: bold;
					line-height: 2;
					text-align: center;
					@media (max-width: 640px) {
						font-size: 0.875rem;
						line-height: 1.6;
					}
				}
			}
			.about-kakomi {
				margin-top: 3rem;
				width: 640px;
				p {
					padding: 1.5rem 1rem;
					img {
						height: auto;
						width: 75%;
					}
					em {
						color: #000;
						font-size: 0.875rem;
						font-weight: bold;
					}
				}
				.kakomi-1 {
					border-right: none;
				}
				@media (max-width: 640px) {
					h6 {
						font-size: 0.875rem;
					}
					p {
						em {
							font-size: 0.8125rem;
						}
					}
				}
			}
		}
		@media (max-width: 640px) {
			.about-main {
				h3 {
					font-size: 0.6875rem;
				}
				.about-main-txt {
					background: none;
					background-image: url(../images/bg-about-sp.webp);
					background-position: center top;
					background-repeat: no-repeat;
					background-size: 100% auto;
				}
			}
		}
	}
	/* ========== concept ========== */
	.gle-concept {
		background: #fff;
	}
	.concept-main {
		position: relative;
		padding-bottom: 124px;
		@media (max-width: 640px) {
			padding-bottom: 50.66dvw;
		}
		.concept-main-txt {
			width: 100%;
			left: 0;
			bottom: 0;
			background: url("../images/bg-concept.webp") no-repeat center top;
			background-size: cover;
			padding: 80px 8% 40px;
			position: absolute;
			@media (max-width: 640px) {
				background-image: url(../images/bg-concept-sp.webp);
				min-height: 74.8dvw;
        padding: 25dvw 24px 0;
			}
		}
	}
	.concept-wrap {
		margin-inline: auto;
		max-width: 800px;
		.concept-lead {
			color: var(--clr_glec);
			font-size: 1.125rem;
			font-weight: bold;
			margin-block: 16px 40px;
			text-align: center;
			@media (max-width: 640px) {
				font-size: 0.875rem;
			}
		}
		@media (max-width: 640px) {
			figure {
				padding: 0 24px 12px;
			}
		}
	}
	.concept-detail {
		background-color: var(--clr_cream);
		padding-block: 24px 80px;
		@media (max-width: 640px) {
			padding-inline: 24px;
		}
		.concept-detail-catch {
			align-items: center;
			background-color: var(--clr_red);
			border-radius: 100dvw;
			column-gap: 1em;
			color: #fff;
			display: flex;
			font-size: 0.875rem;
			justify-content: center;
			margin-inline: auto;
			max-width: 75%;
			padding: .2em 3em;
			@media (max-width: 640px) {
				font-size: 0.625rem;
				flex-direction: column;
				margin-bottom: 1lh;
				max-width: calc(100% - 48px);
				position: relative;
				>span:last-child {
					bottom: 0;
					color: #9A9A9A;
					position: absolute;
					transform: translateY(100%);
				}
			}
		}
		.hdg-concept-detail {
			color: var(--clr_glec);
			font-size: 2rem;
			letter-spacing: .1ex;
			margin-top: 1rem;
			text-align: center;
			span {
				background-image: linear-gradient(to top, var(--clr_yellow) 0%, var(--clr_yellow) 20%, transparent 20%);
				color: var(--clr_red);
			}
			@media (max-width: 640px) {
				font-size: 1.5625rem;
			}
		}
		.dst-concept-feature {
			background-color: #fff;
			border-radius: 4px;
			margin: 3rem auto 0;
			max-width: 860px;
			.concept-feature-ttl {
				background-color: var(--clr_yellow);
				border-radius: 4px;
				color: var(--clr_glec);
				font-size: 1.625rem;
				font-weight: bold;
				margin-bottom: 24px;
				padding: 1rem;
				position: relative;
				text-align: center;
				&::after {
					background-color: var(--clr_yellow);
					clip-path: polygon(0 0, 100% 0, 50% 100%);
					content: "";
					display: block;
					height: 24px;
					inset: auto 0 0 0;
					margin-inline: auto;
					position: absolute;
					transform: translateY(100%);
					width: 70px;
				}
			}
			.concept-feature-cnt {
				padding-block: 1rem 3rem;
			}
			@media (max-width: 640px) {
				max-width: none;
				.concept-feature-ttl {
					font-size: 1.125rem;
					&::after {
						height: 16px;
						width: 44px;
					}
				}
			}
		}
		.dst-lesson {
			color: var(--clr_glec);
			display: grid;
			font-weight: bold;
			gap: 0 3.5rem;
			grid-template-columns: 300px 300px;
			justify-content: center;
			text-align: center;
			.lesson-ttl {
				font-size: 1.125rem;
			}
			.lesson-txt {
				font-size: 0.75rem;
				margin-block: 1rem; 
			}
			.lesson-img {
				picture {
					display: block;
					img {
						border-radius: 10px;
						overflow: hidden;
					}
				}
			}
			@media (max-width: 640px) {
				grid-template-columns: 1fr;
				.lesson-item {
					padding-inline: 16px;
					+ .lesson-item {
						margin-top: 32px;
					}
				}
			}
		}
		.cycle-img {
			text-align: center;
			@media (max-width: 640px) {
				padding-inline: 12px;
			}
		}
		.cycle-txt {
			font-size: 1.25rem;
			font-weight: bold;
			margin-block: 1rem 6rem;
			text-align: center;
			@media (max-width: 640px) {
				font-size: 0.875rem;
				margin-bottom: -1rem;
			}
		}
		.lesson-8 {
			margin-top: 3rem;
			max-width: 650px;
			width: auto;
			h4 {
				border-width: 4px 0;
				border-color: var(--clr_glec);
				color: var(--clr_glec);
				em {
					font-size: 1.75rem;
					@media (max-width: 640px) {
						font-size: 1.375rem;
					}
				}
			}
			p {
				color: var(--clr_glec);
				font-size: 1.125rem;
				font-weight: bold;
				@media (max-width: 640px) {
					margin-inline: 5%;
					font-size: 0.75rem;
				}
			}
		}
		.box-btn-modal-class {
			margin-top: 2rem;
			text-align: center;
			.btn-modal-class {
				align-items: center;
				background-color: var(--clr_red);
				border-radius: 100dvw;
				color: #fff;
				display: inline-flex;
				font-size: 1.5rem;
				font-weight: bold;
				justify-content: center;
				padding: .5rem 2rem;
				@media (max-width: 640px) {
					font-size: 0.875rem;
				}
			}
		}
		.lesson-flow {
			border-radius: 20px;
			margin-inline: auto;
			max-width: 860px;
			padding-inline: 102px 60px;
			width: auto;
			@media (max-width: 640px) {
				padding: 2rem;
			}
			h3 {
				font-size: 1.75rem;
			}
			dl {
				display: grid;
				column-gap: 3.5rem;
				grid-template-columns: 320px 1fr;
				max-width: none;
				width: auto;
				@media (max-width: 640px) {
					display: block;
				}
				dt {
					padding: 0;
					@media (max-width: 640px) {
						text-align: left;
						img {
							margin-right: -5%;
							max-width: none;
							width: 105%;
						}
					}
				}
				dd {
					padding: 0;
					h4 {
						color: var(--clr_glec);
						display: flex;
						column-gap: .5rem;
						span {
							font-size: 1.0625rem;
							font-weight: bold;
						}
						@media (max-width: 640px) {
							flex-wrap: wrap;
							margin-top: 1.5rem;
							span {
								font-size: 1.0625rem;
							}
						}
					}
					p {
						color: #000;
						font-size: 1rem;
						font-weight: bold;
					}
				}
				+ abbr {
					@media (min-width:641px) {
						padding-left: 16%;
					}
					@media (max-width:640px) {
						margin-block: 1.5rem 0;
					}
					
				}
			}
		}
		.lesson-points {
			h3 {
				padding-bottom: 0;
				text-align: center;
				span {
					align-items: center;
					background-color: var(--clr_red);
					border-radius: 6px;
					color: #fff;
					display: inline-block;
					font-size: 1.375rem;
					font-weight: bold;
					justify-content: center;
					min-width: 336px;
					padding: .2rem 1rem;
					position: relative;
					@media (max-width: 640px) {
						font-size: 1.25rem;
					}
					&::after {
						background-color: var(--clr_red);
						content: "";
						clip-path: polygon(0 0 , 100% 0, 50% 100%);
						display: block;
						height: 18px;
						inset: 0 0 -16px 0;
						margin: auto auto 0;
						position: absolute;
						width: 20px;
					}
				}
			}
			h4 {
				color: var(--clr_glec);
				font-size: 1.125rem;
				margin-top: 3rem;
				@media (max-width:640px) {
					font-size: 0.75rem;
					margin: 2rem 1rem 0;
					text-align: left;
				}
			}
			ol {
				li {
					background-image: none;
					background-color: var(--clr_glec);
					border-radius: 100dvw;
					font-size: 1.125rem;
					margin-bottom: 38px;
					max-width: 600px;
					width: auto;
					@media (max-width:640px) {
						font-size: 1.0625rem;
						paddign-block: .2em;
						white-space: unset;
					}
					&::after {
						background-image: none;
						background-color: var(--clr_red);
						inset: auto 0 -27px 0;
						clip-path: polygon(0 0, 100% 0, 50% 100%);
						content: "";
						height: 15px;
						margin-inline: auto;
						width: 30px;
					}
				}
			}
			ul {
				margin-inline: auto;
				max-width: 850px;
				width: auto;
				@media (max-width: 640px) {
					margin-inline: 1rem;
				}
				li {
					margin-bottom: .5em;
					@media (max-width: 640px) {
						font-size: 0.75rem;
					}
				}
			}
		}
	}
	/* ========== concept ========== */
	.gle-teacher {
		padding-bottom: 13rem;
		@media (max-width: 640px) {
			padding-bottom: 3rem;
		}
	}
	.teacher-main {
		container-type: inline-size;
		@media (max-width: 640px) {
			padding-bottom: 42dvw;
		}
		.teacher-main-txt {
			background-image: url(../images/bg-teacher.svg);
			background-size: 100% auto;
			min-height: 25.6cqw;
			padding: 6.3% 8% 0;
			@media (max-width: 640px) {
				background-image: url(../images/bg-teacher-sp.svg);
				min-height: 68.26dvw;
				padding-block: 13.5dvw 0;
				padding-right: 12%;
			}
			h3 {
        white-space: normal;
			}
		}
	}
	.teacher-feature {
		background-color: #fff;
		border-radius: 20px;
		margin: 3rem auto 0;
		max-width: 860px;
		padding-block: 3rem 4rem;
		@media (max-width: 640px) {
			margin-inline: 24px;
			padding-block: 2rem;
		}
		.hdg-teacher-feature {
			color: #000;
			font-size: 2.3125rem;
			text-align: center;
			@media (max-width: 640px) {
				font-size: 1.5625rem;
			}
			em {
				color: var(--clr_glec);
			}
			strong {
				background-image: linear-gradient(to top, transparent 5%, var(--clr_yellow) 5%, var(--clr_yellow) 25%, transparent 25%);
				font-weight: bold;
			}
		}
		.dst-teacher-feature {
			column-gap: 3.5rem;
			display: grid;
			grid-template-columns: 300px 300px;
			grid-template-rows: auto auto 1fr;
			justify-content: center;
			margin-top: 3rem;
			@media (max-width: 640px) {
				display: block;
				margin-top: 0;
				padding-inline: 2rem;
			}
			>.item {
				display: grid;
				grid-template-rows: subgrid;
				grid-row: 1 / 4;
				@media (max-width: 640px) {
					margin-top: 2rem;
				}
			}
			.ttl {
				align-items: center;
				display: flex;
				flex-direction: column;
				em {
					align-items: center;
					background-color: var(--clr_glec);
					border-radius: 100dvw;
					color: #fff;
					display: inline-flex;
					font-size: 1.0625rem;
					font-weight: bold;
					justify-content: center;
					padding: .2rem 1rem;
					min-width: 220px;
					@media (max-width: 640px) {
						font-size: 0.875rem;
					}
				}
				span {
					align-items: center;
					border-color: var(--clr_glec);
					border-style: solid;
					border-width: 4px 0;
					color: var(--clr_glec);
					display: flex;
					font-size: 1.375rem;
					font-weight: bold;
					justify-content: center;
					margin-top: .5rem;
					width: 100%;
					@media (max-width: 640px) {
						font-size: 1.1875rem;
					}
				}
			}
			.img {
				position: relative;
			}
			.cnt {
				background-color: #fff;
				border: 2px solid var(--clr_glec);
				border-radius: 10px;
				margin-top: -20px;
				padding: 0 2rem 1rem;
				position: relative;
				@media (max-width: 640px) {
					padding-inline: 1rem;
				}
				.teacher-feature-point {
					background-color: var(--clr_red);
					border-radius: 6px;
					color: #fff;
					font-size: 1.0625rem;
					font-weight: bold;
					margin-inline: auto;
					padding: .1rem 1rem .2rem;
					text-align: center;
					transform: translateY(-50%);
					width: 90%;
				}
				.lst-checkmark {
					color: var(--clr_glec);
					display: grid;
					gap: .2em;
					grid-template-columns: auto 1fr;
					font-size: 0.75rem;
					font-weight: bold;
					>.item {
						display: grid;
						grid-column: 1 / 3;
						grid-template-columns: subgrid;
					}
				}
			}
		}
	}

	/* ========== newness ========== */
	.hdg-newness {
		align-items: stretch;
		border-bottom: 2px solid var(--clr_glec);
		display: flex;
		flex-direction: column;
		margin-inline: 42.5% 4.75%;
		padding-bottom: 1rem;
		.logo {
			line-height: 1;
		}
		@media (max-width: 640px) {
			margin-top: 1rem;
			margin-inline: 24px;
			justify-content: flex-end;
			.logo {
				img {
					width: 80dvw;
				}
			}
		}
		.txt {
			color: #000;
			font-size: 1.4375rem;
			font-weight: bold;
			text-align: right;
			@media (max-width: 640px) {
				font-size: 1.25rem;
			}
		}
	}
	.lead-newness {
		color: #000;
		font-size: 1rem;
		font-weight: bold;
		line-height: 1.5;
		margin: .5rem 4.75% 0 42.5%;
		@media (max-width: 640px) {
			font-size: 3.6vw;
			margin-inline:24px;
		}
		em {
			color: var(--clr_glec);
		}
	}
	.newness-system {
		background-color: var(--clr_cream);
		margin-top: 30%;
		padding-top: 1rem;
		position: relative;
		&::before {
			aspect-ratio: 10 / 3;
			background-color: var(--clr_cream);
			clip-path: polygon(0 0, 100% 100%, 0 100%);
			content: "";
			display: block;
			inset: 0 auto auto 0;
			position: absolute;
			transform: translateY(-100%);
			width: 100%;
			@media (max-width: 640px) {
				aspect-ratio: 10 / 2;
			}
		}
		.hdg-newness-system {
			color: var(--clr_glec);
			font-size: 1.375rem;
			font-weight: bold;
			text-align: center;
			@media (max-width: 640px) {
				font-size: 1rem;
			}
		}
		.dst-system {
			display: grid;
			gap: 1rem 0;
			grid-template-columns: auto 1fr;
			margin: 3rem auto 0;
			max-width: 860px;
			@media (max-width: 640px) {
				display: block;
				margin: 0 24px;
			}
			>.item {
				align-items: stretch;
				background-color: #fff;
				border-radius: 10px;
				display: grid;
				grid-column: 1 / 3;
				grid-template-columns: subgrid;
				padding: 1.5rem;
				@media (max-width: 640px) {
					margin-top: 2rem;
					padding: 1rem 2rem 1.5rem;
				}
				.ttl {
					align-items: center;
					border-right: 2px solid var(--clr_glec);
					color: var(--clr_glec);
					display: flex;
					font-size: 1.625rem;
					font-weight: bold;
					justify-content: center;
					min-height: 2.6em;
					padding-inline: 3rem;
					@media (max-width: 640px) {
						border-bottom: 2px solid var(--clr_glec);
						border-right: none;
						font-size: 1.25rem;
						min-height: auto;
						padding: 0 0 1rem;
					}
				}
				.cnt {
					align-self: center;
					color: #000;
					font-size: 0.9375rem;
					font-weight: bold;
					padding-inline: 3rem;
					span {
						color: var(--clr_glec);
					}
					@media (max-width: 640px) {
						font-size: 3.6vw;
						padding: 1rem .2rem 0;
					}
				}
			}
		}
	}
	.newness-compare {
		background-color: var(--clr_cream);
		padding-block: 5rem;
		@media (max-width: 640px) {
			padding-inline: 24px;
		}
		.hdg-newness-compare {
			color: var(--clr_glec);
			font-size: 1.375rem;
			font-weight: bold;
			text-align: center;
			@media (max-width: 640px) {
				font-size: 0.875rem;
			}
		}
		.box-tbl-compare {
			background-color: #fff;;
			border: 4px solid var(--clr_glec);
			border-radius: 20px;
			margin: 2rem auto 0;
			max-width: 860px;
			overflow: hidden;
		}
		.tbl-compare {
			border-collapse: collapse;
			width: 100%;
			@media (min-width: 641px) {
				tr {
					>*:nth-child(2) {
						background-color: var(--clr_sub_glec);
						font-weight: bold;
						em {
							color: var(--clr_glec);
						}
					}
					>*:not(:first-child) {
						border-left: 1px solid var(--clr_border);
					}
				}
				thead {
					tr {
						th {
							color: #000;
							padding-block: 1.5rem;
							text-align: center;
							vertical-align: center;
						}
					}
				}
				tbody {
					tr {
						>*{
							border-top: 1px solid var(--clr_border);
							vertical-align: center;
						}
						th {
							background-color: var(--clr_glec);
							color: #fff;
							font-size: 1.125rem;
							padding: .5rem 1.5rem;
						}
						td {
							div {
								align-items: center;
								color: #000;
								display: grid;
								grid-template-columns: 1fr;
								grid-template-rows: auto 1fr auto;
								height: 100%;
								justify-content: center;
								padding-block: 2rem;
								row-gap: 10px;
								img {
									margin-inline: auto;
								}
								em {
									font-size: 1.0625rem;
									text-align: center;
								}
								span {
									font-size: 0.9375rem;
									text-align: center;
								}
							}
						}
						&:nth-child(2) {
							td {
								div {
									em {
										align-items: center;
										display: flex;
										flex-direction: column;
										justify-content: center;
										min-height: 3em;
									}
								}
							}
						}
					}
				}
			}
			@media (max-width: 640px) {
				tr {
					>*:not(:first-child) {
						border-left: 1px solid var(--clr_border);
					}
				}
				thead {
					tr {
						th {
							background-color: var(--clr_glec);
							color: #fff;
							font-size: 1.125rem;
							padding-block: 1rem .8rem;
							text-align: center;
							img {
								height: 1.8em;
								margin-right: .6em;
								vertical-align: middle;
								width: auto;
							}
						}
					}
				}
				tbody {
					tr {
						>*{
							border-top: 1px solid var(--clr_border);
							vertical-align: center;
						}
						&:nth-child(1) {
							>th,
							>td {
								background-color: var(--clr_sub_glec);
								font-weight: bold;
								em {
									color: var(--clr_glec);
								}
							}
						}
						th {
							color: #000;
							font-size: 0.6875rem;
							letter-spacing: -.1ex;
							padding: .5rem .2rem;
						}
						td {
							padding: .5rem .2rem;
							div {
								align-items: center;
								color: #000;
								display: grid;
								column-gap: .2rem;
								grid-template-columns: auto 1fr;
								grid-template-rows: auto 1fr;
								height: 100%;
								justify-content: center;
								img {
									margin-inline: auto;
									grid-column: 1 / 2;
									grid-row: 1 / 3;
									width: 2rem;
								}
								em {
									font-size: 0.84375rem;
									grid-column: 2 / 3;
									grid-row: 1 / 2;
									letter-spacing: -.1ex;
									text-align: left;
								}
								span {
									font-size: 0.625rem;
									grid-column: 2 / 3;
									grid-row: 2 / 3;
									text-align: left;
								}
							}
						}
					}
				}
			}
		}
	}

	/* ========== voice ========== */
	.gle-voice {
		padding-bottom: 5rem;
		&::after {
			content: none;
		}
		@media (max-width: 640px) {
			padding-bottom: 3rem;
		}
	}
	.voice-main {
		container-type: inline-size;
		@media (max-width: 640px) {
			padding-bottom: 45dvw;
		}
		.voice-main-txt {
			background-image: url(../images/bg-voice.svg);
			background-size: 100% auto;
			min-height: 25.6cqw;
			padding-left: 8%;
			@media (max-width: 640px) {
				background-image: url(../images/bg-voice-sp.svg);
				min-height: 68.26dvw;
			}
		}
	}
	.voice-wrap {
		margin-top: 3rem;
		@media (max-width: 640px) {
			top: 0;
		}
		h2 {
			font-size: 1.375rem;
			@media (max-width: 640px) {
				font-size: 1rem;
				margin-inline: -1em;
			}
		}
		.voice-list {
			font-weight: bold;
			@media (max-width: 640px) {
				padding-bottom: 2rem;
			}
			p {
				span {
					font-family: unset;
					font-weight: bold;
				}
				@media (max-width: 640px) {
					margin-top: 1.5rem;
					padding-block: 0;
				}
			}
		}
	}

	/* ========== faq ========== */
	.gle-faq {
		background-color: #F9F9F9;
		margin-bottom: 10%;
		padding-block: 4rem 5rem;
		position: relative;
		@media (max-width: 640px) {
			padding-block: 3rem;
		}
		&::after {
			aspect-ratio: 10 / 1;
			background-color: #F9F9F9;
			bottom: 0;
			clip-path: polygon(0 0, 100% 0, 100% 100%);
			content: "";
			display: block;
			position: absolute;
			transform: translateY(100%);
			width: 100%;
		}
		.hdg-faq {
			align-items: center;
			color: #000;
			column-gap: 1rem;
			display: flex;
			justify-content: center;
			font-size: 2.25rem;
			font-weight: bold;
			@media (max-width: 640px) {
				font-size: 1.25rem;
			}
			em {
				color: var(--clr_qa_blue);
				font-size: 2.8125rem;
				@media (max-width: 640px) {
					font-size: 1.5625rem;
				}
			}
		}
		.dst-faq {
			margin: 4rem auto 0;
			max-width: 860px;
			@media (max-width: 640px) {
				margin: 3rem 24px 0;
			}
			>.item {
				background-color: #fff;
				border-radius: 10px;
				box-shadow: 0 0 10px rgba(0,0,0,.16);
				column-gap: 1.5rem;
				display: grid;
				grid-template-columns: auto 1fr;
				margin-top: 2rem;
				padding: 1rem 2rem 1.5rem;
				@media (max-width: 640px) {
					column-gap: 1rem;
					margin-top: 1rem;
					padding: 1rem;
				}
				>.ttl,
				>.cnt {
					align-items: baseline;
					display: grid;
					grid-column: 1 / 3;
					grid-template-columns: subgrid;
					.ico {
						align-items: center;
						aspect-ratio: 1 /1;
						border-radius: 6px;
						color: #fff;
						display: flex;
						font-size: 1.625rem;
						font-weight: bold;
						justify-content: center;
						line-height: 1;
						width: 2em;
						@media (max-width: 640px) {
							font-size: 1rem;
							font-weight: 800;
							padding-bottom: .2em;
							width: 1.8em;
						}
					}
					.txt {
						font-size: 1rem;
						font-weight: bold;
						@media (max-width: 640px) {
							font-size: 0.875rem;
						}
					}
				}
				>.ttl {
					.ico {
						background-color: var(--clr_qa_blue);
					}
					.txt {
						color: var(--clr_qa_blue);
					}
				}
				>.cnt {
					border-top: 1px solid var(--clr_qa_gray);
					margin-top: 1rem;
					padding-top: 1rem;
					.ico {
						background-color: var(--clr_qa_gray);
					}
					.txt {
						color: #000;
					}
				}
			}
		}
		.faq-note {
			color: var(--clr_qa_gray);
			font-size: 1rem;
			font-weight: bold;
			margin-top: 3rem;
			text-align: center;
			@media (max-width: 640px) {
				font-size: 0.75rem;
			}
		}
	}

	/* ========== 知っていますか ========== */
	.youknow {
		h2 {
			align-items: flex-end;
			background-image: none;
			column-gap: .5em;
			font-size: 2.25rem;
			display: flex;
			justify-content: center;
			@media (max-width: 640px) {
				font-size: 1.5rem;
			}
			&::before,
			&::after {
				background-color: currentColor;
				border-radius: 100dvw;
				content: "";
				height: 1.2lh;
				transform-origin: center bottom;
				transform: rotate(-30deg);
				width: 3px;
			}
			&::after {
				transform: rotate(30deg);
			}
		}
		h3 {
			color: #000;
			font-size: 1.6875rem;
			margin-top: 2rem;
			padding: 0;
			@media (max-width: 640px) {
				font-size: 1.125rem;
			}
			+ p {
				color: var(--clr_qa_gray);
				margin-top: 1rem;
			}
		}
		p {
			color: #000;
			font-size: 1.125rem;
			margin-top: 2rem;
			padding: 0;
			@media (max-width: 640px) {
				font-size: 1rem;
			}
		}
		h4 {
			color: #000;
			font-size: 1.5625rem;
			margin-top: 2rem;
			padding: 0 0 0 .2em;
		}
	}
	.gle-location {
		h2 {
			background-image: none;
			background-color: var(--clr_glec);
			font-size: 2.25rem;
			padding: .2em 0 .3em;
		}
	}
	@media (max-width: 640px) {
		.gle-foot {
			padding-inline: 24px;
			h2 {
			 margin-inline: -24px;
			}
		}		
	}
}