@charset "utf-8";
/* -------------------------------- *\
    リユースアカデミー
\* -------------------------------- */
.academy-index {
	position: relative;
}
.academy-index__image {
	z-index: -1;
	position: relative;
	margin-top: 20px;
	margin-bottom: -30px;
	padding-bottom: 40px;
	text-align: center;
}
.academy-index__image::before {
	z-index: -1;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30vw;
	background: url(../images/sustainability/academy_bg-x.svg) repeat-x center top / contain;
	content: "";
}
.academy-index__title {
	text-align: center;
}
.academy-index__title .title {
	display: inline-block;
	z-index: 1;
	position: relative;
	max-width: 80%;
	padding-bottom: 30px;
}
.academy-index__title .title::before {
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 8px;
	height: 40px;
	transform: translateX(-4px);
	border-radius: 5px;
	background: #023887;
	content: "";
}
.academy-index__title .title::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 16px;
	height: 16px;
	transform: translate(-8px, 50%);
	border: 4px solid #023887;
	border-radius: 50%;
	background: #fff;
	content: "";
}
.academy-index__title .desc {
	position: relative;
	padding-top: 30px;
	line-height: 1.5;
	text-align: left;
}
.academy-index__title .desc::before {
	display: block;
	position: absolute;
	top: -4px;
	left: 0;
	width: 100%;
	height: 8px;
	border-radius: 5px;
	background: #023887;
	content: "";
}
.academy-index__content a:hover {
	opacity: .7;
}
.academy-index__heading {
	width: 80%;
	margin: 0 auto 16px;
	text-align: center;
}
.academy-index__content--quiz {
	margin-top: 50px;
	padding: 20px;
	border-radius: 30px;
	background: #a9cb04 url(../images/sustainability/quiz_bg-prize.svg?v2) repeat center center;
	font-weight: bold;
}
.academy-index__content--quiz .academy-index__heading {
	margin-top: -25px;
}
.academy-index__yomuyomu {
	text-align: center;
}
.academy-index__btn {
	display: block;
	position: relative;
	width: 80%;
	max-width: 467px;
	margin: 0 auto;
	border: 8px solid #033988;
	border-radius: 70px;
	background: #efea3a;
}
.academy-index__btn::after {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 9px;
	height: 9px;
	transform: translateY(-50%) rotate(45deg);
	border-top: 2px solid #033988;
	border-right: 2px solid #033988;
	content: "";
}
.academy-index__btn:hover {
	background: #fff;
	opacity: 1 !important;
}

/* -------------------------------- *\
    リユースアカデミーコンテンツ
\* -------------------------------- */
.academy-section {
	margin-top: -30px;
	padding-top: 80px;
}
.academy-block {
	position: relative;
	padding: 30px 15px;
	border: 8px solid #1a1a1a;
	border-radius: 25px;
	background: #fff;
	font-weight: bold;
	font-size: 1.5rem;
}
.academy-block::before {
	-o-border-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSIxMzYiIHZpZXdCb3g9IjAgMCA0MCAxMzYiPjxkZWZzPjxzdHlsZT4uYXtmaWxsOiMxYTFhMWE7fS5ie2ZpbGw6bm9uZTtzdHJva2U6IzFhMWExYTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjcuNnB4O308L3N0eWxlPjwvZGVmcz48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iMzAuOCIgY3k9Ijg1IiByPSI3Ii8+PGxpbmUgY2xhc3M9ImIiIHgxPSIzLjgiIHkxPSI4NSIgeDI9IjMwLjgiIHkyPSI4NSIvPjxjaXJjbGUgY2xhc3M9ImEiIGN4PSIzMC44IiBjeT0iMTE5IiByPSI3Ii8+PGxpbmUgY2xhc3M9ImIiIHgxPSIzLjgiIHkxPSIxMTkiIHgyPSIzMC44IiB5Mj0iMTE5Ii8+PGNpcmNsZSBjbGFzcz0iYSIgY3g9IjMwLjgiIGN5PSIxNyIgcj0iNyIvPjxsaW5lIGNsYXNzPSJiIiB4MT0iMy44IiB5MT0iMTciIHgyPSIzMC44IiB5Mj0iMTciLz48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iMzAuOCIgY3k9IjUxIiByPSI3Ii8+PGxpbmUgY2xhc3M9ImIiIHgxPSIzLjgiIHkxPSI1MSIgeDI9IjMwLjgiIHkyPSI1MSIvPjwvc3ZnPg==);
	position: absolute;
	top: 68px;
	bottom: 68px;
	left: -20px;
	width: 0;
	border-left: 40px solid;
	border-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSIxMzYiIHZpZXdCb3g9IjAgMCA0MCAxMzYiPjxkZWZzPjxzdHlsZT4uYXtmaWxsOiMxYTFhMWE7fS5ie2ZpbGw6bm9uZTtzdHJva2U6IzFhMWExYTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjcuNnB4O308L3N0eWxlPjwvZGVmcz48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iMzAuOCIgY3k9Ijg1IiByPSI3Ii8+PGxpbmUgY2xhc3M9ImIiIHgxPSIzLjgiIHkxPSI4NSIgeDI9IjMwLjgiIHkyPSI4NSIvPjxjaXJjbGUgY2xhc3M9ImEiIGN4PSIzMC44IiBjeT0iMTE5IiByPSI3Ii8+PGxpbmUgY2xhc3M9ImIiIHgxPSIzLjgiIHkxPSIxMTkiIHgyPSIzMC44IiB5Mj0iMTE5Ii8+PGNpcmNsZSBjbGFzcz0iYSIgY3g9IjMwLjgiIGN5PSIxNyIgcj0iNyIvPjxsaW5lIGNsYXNzPSJiIiB4MT0iMy44IiB5MT0iMTciIHgyPSIzMC44IiB5Mj0iMTciLz48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iMzAuOCIgY3k9IjUxIiByPSI3Ii8+PGxpbmUgY2xhc3M9ImIiIHgxPSIzLjgiIHkxPSI1MSIgeDI9IjMwLjgiIHkyPSI1MSIvPjwvc3ZnPg==);
	border-image-repeat: round;
	border-image-slice: 0 0 0 40;
	content: "";
}
.academy-block[data-id="1"] {
	background: #3fa7f3;
	color: #fff;
}
.academy-block[data-id="2"] {
	background: #8599a4;
	color: #fff;
}
.academy-block[data-id="3"] {
	background: #ff911e;
	color: #fff;
}
.academy-block[data-id="4"] {
	background: #7ac743;
	color: #fff;
}
.academy-block[data-id="5"] {
	background: #ff7baa;
	color: #fff;
}
.academy-block__inner {
	padding-left: 5%;
}
.academy-block__inner p {
	margin-bottom: 1em;
}
.academy-block__inner > :last-child {
	margin-bottom: 0 !important;
}
.academy-block__title {
	margin-bottom: 1em;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 1.4;
}
.academy-block__title::after {
	display: block;
	height: 5px;
	margin-top: 16px;
	border-radius: 5px;
	background: #1a1a1a;
	content: "";
}
.academy-label {
	display: block;
	margin-bottom: .5em;
	padding: 0 1em;
	border-radius: 30px;
	background: #fff;
	color: #163357;
	font-size: .9em;
	text-align: center;
}
.academy-popup {
	display: block;
	position: relative;
	text-decoration: none !important;
}
.academy-popup__label {
	display: inline-flex;
	align-items: center;
	height: 3em;
	padding: 0 1em;
	border: 3px solid;
	border-radius: 1.5em;
	background: #fff;
	color: #163357;
	font-weight: bold;
	font-size: 1.4rem;
	transition: all .2s;
}
.academy-popup__label::before {
	display: inline-block;
	margin-right: 8px;
	content: "\e90b";
	font-weight: normal;
	font-size: 1.2em;
	font-family: "icomoon";
	text-align: center;
}

.popup-block {
	position: relative;
	width: 90%;
	max-width: 1000px;
	margin: 20px auto;
	padding: 20px;
	background: #fff;
}
.popup-block__close {
	position: absolute;
	top: 10px;
	right: 10px;
}
.popup-block__close a {
	font-size: 3.2rem;
	text-decoration: none;
}

/* -------------------------------- *\
    リユースクイズ
\* -------------------------------- */
.quiz {
	padding: 60px 0 100px;
	background: #a9cb04;
}
.quiz-title {
	z-index: 0;
	position: relative;
	text-align: center;
}
.quiz-title .title {
	width: 80%;
	margin: 0 auto;
}
.quiz-title .desc {
	padding: 15px;
}
.quiz-title .image {
	z-index: -1;
	position: relative;
	margin-top: -40px;
}

.quiz-block {
	-webkit-backface-visibility: hidden;
	position: relative;
	margin-top: 40px;
	padding: 70px 10px;
	backface-visibility: hidden;
	background: #fff;
}
.quiz-block::before,
.quiz-block::after {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 35px;
	background: url(../images/sustainability/quiz_bg-top.svg) repeat-x left top;
	content: "";
}
.quiz-block::before {
	top: 0;
}
.quiz-block::after {
	bottom: 0;
	transform: scale(1, -1);
}
.quiz-block--summary {
	background: #f2f2f2 url(../images/sustainability/quiz_bg-prize.svg) repeat left top;
}
.quiz-block__inner {
	max-width: 1100px;
	margin: 0 auto;
}
.quiz-block__choces {
	width: 82%;
	margin: 30px auto 0;
}
.quiz-block__answer {
	margin-top: 30px;
}
.quiz-question,
.quiz-answer {
	z-index: 0;
	position: relative;
	border: 8px solid;
	border-radius: 25px;
	font-weight: bold;
}
.quiz-question {
	padding: 20px;
	background: #efea3a;
	color: #023887;
}
.quiz-answer {
	padding: 10px 20px 20px;
	background: #3fa7f3;
	color: #023887;
}

.quiz-question__heading {
	width: 60%;
	max-width: 350px;
	margin: 0 auto 20px;
	padding: 4px;
	border: 5px solid #023887;
	border-radius: 60px;
	background: #fff;
	font-size: 2rem;
	text-align: center;
}
.quiz-question__ill,
.quiz-answer__ill {
	z-index: -1;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 90px;
	pointer-events: none;
}
.quiz-question__text {
	font-size: 1.8rem;
}
.quiz-answer__header {
	margin-bottom: 20px;
}
.quiz-answer__heading {
	font-size: 2.2rem;
	text-align: center;
}
.quiz-answer__heading b {
	display: inline-block;
	font-size: 1.5em;
	line-height: 1.2;
}
.answer-judge {
	display: block;
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background-size: contain;
}
.answer-judge.is-correct {
	background-image: url(../images/sustainability/quiz_ill-correct.svg);
}
.answer-judge.is-incorrect {
	background-image: url(../images/sustainability/quiz_ill-incorrect.svg);
}
.number {
	display: inline-block;
	width: 30px;
	height: 30px;
	padding-top: 30px;
	overflow: hidden;
	background-image: url(../images/sustainability/quiz_number.svg);
	background-position: left top;
	background-size: 90px 60px;
	background-repeat: no-repeat;
}
.number[data-num="1"] {
	background-position: left bottom;
}
.number[data-num="2"] {
	background-position: center bottom;
}
.number[data-num="3"] {
	background-position: right bottom;
}
.quiz-btn .number[data-num="1"] {
	background-position: left top;
}
.quiz-btn .number[data-num="2"] {
	background-position: center top;
}
.quiz-btn .number[data-num="3"] {
	background-position: right top;
}
.number {
	position: relative;
	top: -.1em;
	margin-right: .2em;
	vertical-align: middle;
}
.quiz-answer__explanation {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #efea3a;
}
.quiz-answer__explanation .smaller {
	display: inline-block;
	margin-top: .5em;
	font-size: .88em;
}
.quiz-answer__explanation a {
	color: inherit;
}
.quiz-answer__next {
	margin-top: 30px;
}
.quiz-btn {
	display: block;
	position: relative;
	width: 100%;
	margin: 10px 0;
	padding: 16px 16px 16px 32px;
	border: none;
	border-radius: 15px;
	background: #3fa7f3;
	color: #fff;
	font-weight: bold;
	font-size: 2.2rem;
	font-family: inherit;
	text-align: center;
	cursor: pointer;
}
.quiz-btn span {
	z-index: 1;
	position: relative;
}
.quiz-btn .number {
	position: absolute;
	top: 50%;
	left: 15px;
	margin-top: -15px;
}
.quiz-btn[disabled] {
	cursor: default;
	pointer-events: none;
}
.quiz-btn[disabled]:not(.is-active) {
	opacity: .25;
}
.quiz-btn::before {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%) scale(1.5);
	background-size: contain;
	content: "";
	opacity: 0;
	pointer-events: none;
}
.quiz-btn[data-answer="true"]::before {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTIiIGhlaWdodD0iMTEyIiB2aWV3Qm94PSIwIDAgMTEyIDExMiI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6I2VmZWEzYTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEwcHg7fTwvc3R5bGU+PC9kZWZzPjxjaXJjbGUgY2xhc3M9ImEiIGN4PSI1NiIgY3k9IjU2IiByPSI1MSIvPjwvc3ZnPg==);
}
.quiz-btn[data-answer="false"]::before {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTIiIGhlaWdodD0iMTEyIiB2aWV3Qm94PSIwIDAgMTEyIDExMiI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6I2VmZWEzYTtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEwcHg7fTwvc3R5bGU+PC9kZWZzPjxsaW5lIGNsYXNzPSJhIiB4MT0iODkuNTYiIHkxPSI4OS41OSIgeDI9IjIyLjM5IiB5Mj0iMjIuNDEiLz48bGluZSBjbGFzcz0iYSIgeDE9IjIyLjM5IiB5MT0iODkuNTkiIHgyPSI4OS41NiIgeTI9IjIyLjQxIi8+PC9zdmc+);
}
.quiz-btn.is-active {
	background: #023887;
	transition: all .2s;
}
.quiz-btn.is-active::before {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
}
.next-btn,
.retry-btn {
	display: block;
	margin: 0 auto;
	padding: 0;
	border: 5px solid #023887;
	border-radius: 60px;
	background: #fff;
	cursor: pointer;
}
.next-btn img, .retry-btn img {
	display: block;
}
.next-btn:hover, .retry-btn:hover {
	background: #efea3a;
}
.retry-btn {
	width: 380px;
	max-width: 90%;
}

.quiz-summary {
	z-index: 0;
	position: relative;
	width: 96%;
	max-width: 1070px;
	margin: 60px auto 0;
	padding: 10px 20px;
	border-radius: 20px;
	background: #874664;
	text-align: center;
}
.quiz-summary__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20px;
	border-radius: 20px;
	background: #fff;
}
.quiz-summary__heading {
	flex: 1 0 26%;
	max-width: 26%;
}
.quiz-summary__body {
	flex: 1 0 71.5%;
	max-width: 71.5%;
}
.quiz-summary__btn {
	flex: 1 0 100%;
	width: 100%;
	margin-top: 20px;
}
.quiz-retry {
	text-align: center;
}
@media (min-width: 45.001em){
	.academy-block__title {
		font-size: 2.6rem;
		text-align: center;
	}
	.academy-popup__label {
		font-size: 1.6rem;
	}
	.quiz-block {
		margin-top: 60px;
		padding-right: 30px;
		padding-left: 30px;
	}
	.quiz-question__text,
	.quiz-answer__explanation {
		padding: 0 3%;
	}
}
@media (min-width: 60.001em){
	.academy-index__image {
		margin-top: -40px;
		margin-bottom: -70px;
		padding-bottom: 60px;
	}
	.academy-index__image::before {
		height: 324px;
	}
	.academy-index__title {
		display: flex;
		align-items: center;
		max-width: 1100px;
		margin: 0 auto;
	}
	.academy-index__title .title {
		position: static;
		flex: 1 0 50%;
		max-width: 50%;
		padding-right: 50px;
		padding-bottom: 0;
	}
	.academy-index__title .title::before {
		right: 50%;
		bottom: 50%;
		left: auto;
		width: 70px;
		height: 10px;
		transform: translateY(5px);
	}
	.academy-index__title .title::after {
		top: 50%;
		left: 50%;
		width: 21px;
		height: 21px;
		transform: translate(-50%, -50%);
		border-width: 5px;
	}
	.academy-index__title .desc {
		position: static;
		flex: 1 0 50%;
		padding-top: 0;
		padding-left: 50px;
		font-size: 1.8rem;
	}
	.academy-index__title .desc::before {
		left: 50%;
		width: 10px;
		height: 100%;
		margin-left: -5px;
	}
	.academy-index__content--quiz {
		margin-top: 100px;
		padding-bottom: 30px;
		border-width: 20px;
		border-radius: 40px;
		font-size: 2rem;
	}
	.academy-index__content--quiz .academy-index__heading {
		margin-top: -50px;
	}
	.academy-index__yomuyomu {
		position: relative;
		margin-bottom: -40px;
		text-align: center;
	}
	.academy-index__btn {
		border-width: 10px;
	}
	.academy-section {
		margin-top: -50px;
		padding-top: 130px;
	}
	.academy-block {
		padding: 50px 40px 40px;
		font-size: 2.2rem;
	}
	.academy-block::before {
		top: 102px;
		bottom: 102px;
		left: -26px;
		border-left: 60px solid;
		border-image-repeat: round;
		border-image-slice: 0 0 0 60;
	}
	.academy-block__title {
		font-size: 3.6rem;
	}
	.academy-block__title::after {
		margin-top: 30px;
	}
	.academy-popup:hover .academy-popup__label,
	.academy-popup__label:hover {
		background-color: #efea3a;
	}
	.quiz-title {
		max-width: 1100px;
		margin: 0 auto;
		text-align: left;
	}
	.quiz-title .title {
		width: 51%;
		margin: 0;
	}
	.quiz-title .desc {
		width: 51%;
		padding: 15px;
	}
	.quiz-title .image {
		position: absolute;
		right: -3%;
		bottom: 0;
		width: 50%;
		margin-top: 0;
	}
	.quiz-container {
		max-width: 1240px;
		margin: 0 auto;
	}
	.quiz-block {
		margin-top: 60px;
		padding: 30px;
		border: 35px solid transparent;
		border-image-repeat: round;
		border-image-slice: 35;
		border-image-source: url(../images/sustainability/quiz_border.svg);
	}
	.quiz-block::before,
	.quiz-block::after {
		display: none;
	}
	.quiz-block__choces {
		margin-top: 50px;
	}
	.quiz-block__answer {
		margin-top: 40px;
	}
	.quiz-question,
	.quiz-answer {
		border-width: 10px;
	}
	.quiz-question {
		min-height: 300px;
		padding: 40px;
		font-size: 3rem;
	}
	.quiz-answer {
		min-height: 400px;
		padding: 10px 30px 30px;
	}
	.quiz-question__heading,
	.quiz-question__text {
		font-size: 3rem;
	}
	.quiz-question__ill,
	.quiz-answer__ill {
		display: block;
		position: absolute;
		top: auto;
		bottom: -11px;
		left: 30px;
		width: 250px;
	}
	.quiz-question__text {
		padding-right: 10%;
		padding-left: 33%;
	}
	.quiz-answer__header {
		display: flex;
		align-items: center;
		margin-bottom: 0;
	}
	.quiz-answer__judge {
		flex: 1 0 140px;
		max-width: 140px;
	}
	.quiz-answer__heading {
		flex: 1 0 auto;
		padding-right: 140px;
		font-size: 4rem;
	}
	.quiz-answer__explanation {
		margin-top: 24px;
		font-size: 2.5rem;
	}
	.quiz-answer__explanation.buffer {
		padding-left: 28%;
	}
	.answer-judge {
		display: block;
		width: 140px;
		height: 140px;
		margin: 0;
	}
	.number {
		width: 50px;
		height: 50px;
		padding-top: 50px;
		background-size: 150px 100px;
	}
	.quiz-btn {
		margin: 20px 0;
		border-radius: 20px;
		font-size: 4rem;
	}
	.quiz-btn:hover {
		opacity: .8;
	}
	.quiz-btn .number {
		left: 5%;
		margin-top: -25px;
	}
	.quiz-btn::before {
		width: 112px;
		height: 112px;
	}
	.quiz-summary {
		padding: 14px 40px;
		border-radius: 20px;
	}
	.quiz-summary__inner {
		padding: 40px;
	}
	.quiz-summary__btn {
		flex: 1 0 71.5%;
		max-width: 71.5%;
		margin-left: auto;
	}
}
/*# sourceMappingURL=maps/kids.css.map */