@charset "UTF-8";

:root{
	--color-primary: #00b4f0;
	--color-primary-rgb: 0,180,240;
	--color-secondary: #f6e863;
	--color-secondary-rgb: 246,232,99;
	--color-tertiary: #f0f4b9;
	--color-tertiary-rgb: 240,244,185;
	--color-quaternary: #fde9ec;
	--color-quaternary-rgb: 253,233,236;
	--color-quinary: #85cbc0;
	--color-quinary-rgb: 133,203,192;
	--color-senary: #ffb4b4;
	--color-senary-rgb: 255,180,180;
	--color-septenary: #4e3169;
	--color-septenary-rgb: 78,49,105;
	--color-accent: #ff6e00;
	--color-accent-rgb: 255,110,0;
	--color-bg: #ffffdc;
	--color-bg-rgb: 255,255,220;
	--color-txt: #000;
	--color-txt-rgb: 0,0,0;
	--color-contrast: #fff;
	--color-contrast-rgb: 255,255,255;
	--transition-default: all 0.4s ease; 
}


/* !foundation */
/* --------------------------- */
html,body {
	-webkit-font-feature-settings: "kern" 1, "palt" 1;
	font-feature-settings: "kern" 1, "palt" 1;
	-webkit-font-variant-ligatures:none;
	font-variant-ligatures:none;
}
body {
	color: var(--color-txt);
	background-color: var(--color-contrast);
	text-align: center;
}
* {
	box-sizing: border-box;
}
a,
a img {
	color: var(--color-accent);
	transition: var(--transition-default);
}
a img {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
a:visited {
	color: rgba(var(--color-accent-rgb), .875);
}
a:hover {
	color: var(--color-accent);
	text-decoration: none;	
}
a:hover img {
	opacity: 0.6;
}
a.noborder {
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
hr {
	border: 0;
	height: 1px;
	background-image: linear-gradient(90deg, rgba(var(--color-accent-rgb),0) 0%, rgba(var(--color-accent-rgb),.5) 50%, rgba(var(--color-accent-rgb),0) 100%);
	margin: 5rem auto;
	clear: both;
}
.btn,
.btn:visited {
	width: fit-content;
	display: block;
	text-align: center;
	text-decoration: none;
	border: solid 2px var(--color-accent);
	box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), .5);
	padding: 0.5em 1.5em 0.625em;
	color: var(--color-accent);
	background: var(--color-contrast);
	margin: 1rem auto;
	border-radius: 100vmax;
}
.btn:hover {
	background: var(--color-accent);
	border-color:  var(--color-accent);
	color: var(--color-contrast);
}
label.btn {
	transition: var(--transition-default);
	cursor: pointer;
}
.btnWrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	
	.btn {
		width: 100%;
	}
}

/* material
--------------------------- */
.clearFloat {
	clear: both;
}
.alignleft {
	float: left;
	margin: 0.375em 1.75em 1.75em 0;
}
.alignright {
	float: right;
	margin: 0.375em 0 1.75em 1.75em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0.375em auto;
	text-align: center!important;
}
.sp, .checkEl, .toggle, .spNavBg {
	display: none;
}
.flexCont {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul[class],ol[class] {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.tate {
	-webkit-font-feature-settings: 'palt' 0;
	font-feature-settings: 'palt' 0;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
/* !font */
/* --------------------------- */
.wf-noto-r, body {
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.txtSdw {
	text-shadow: 0 0 40px rgba(var(--color-txt-rgb),.9),0 0 30px rgba(var(--color-txt-rgb),.9),0 0 20px rgba(var(--color-txt-rgb),.9),0 0 10px rgba(var(--color-txt-rgb),.9);
}
.txtSdwMin {
	text-shadow: 0 0 20px rgba(var(--color-txt-rgb),.9),0 0 15px rgba(var(--color-txt-rgb),.9),0 0 10px rgba(var(--color-txt-rgb),.9),0 0 5px rgba(var(--color-txt-rgb),.9);
}
.capsS {
	font-size: 0.8em;
}
.capsL {
	font-size: 1.5em;
}
.shadow {
	filter: drop-shadow(0 0 20px rgba(var(--color-txt-rgb), .875));
}
/* !header */
/* --------------------------- */
.gHeader {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	padding: 2rem 4.5rem 2rem 3rem;
	gap: 3rem;
	z-index: 1000;
}
.siteTitle {
	font-size: clamp(0.75rem, 1.375vw, 1.5625em);
	line-height: 1;
	font-weight: 400;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	margin: auto auto auto 0;
	white-space: nowrap;
}
.gNav {
	margin: auto 0 auto auto;
	position: relative;
}
ul.gNavList {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
.headerDonation {
	position: absolute;
	right: 4.5rem;
	top: min(8vw, 7.5rem);
	margin: 0;
	
	img {
		width: min(8.5vw, 143px);
	}
}
/* !footer */
/* --------------------------- */
.gFooter {
	background: var(--color-contrast);
	padding: 3rem 1.5rem 1.5rem;
}
ul.footerNavList {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin: 0 auto 2.5rem;
}
.copyright {
	margin: 0 auto;
	
	small {
		font-size: 0.75em;
		letter-spacing: 0.1em;
		text-indent: 0.1em;
	}
}
/* !main */
/* --------------------------- */
main {
	position: relative;
	
	.support & {
		background-color: #f6d7dc;
		padding-bottom: 1rem;
	}
	.contact & {
		background-color: #f6d7dc;
		padding-bottom: 4.5rem;
	}
	.donation & {
		background-color: #e2f1f2;
		padding-bottom: 4.5rem;
	}
}
.pageHeading {
	position: relative;
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 18.64vw 0 18.75vw;
	
	.home & {
		background-image: url('../imgs/top_heading_bg_pc.png');
	}
	.about & {
		background-image: url('../imgs/about_heading_bg_pc.png');
		padding-bottom: 12vw;
	}
	.pc-hardware & {
		background-size: 100% auto;
		background-image: url('../imgs/pc-hardware_heading_bg_pc.png');
		background-color: #fff69b;
		padding-bottom: 12vw;
	}
	.activities & {
		background-size: 100% auto;
		background-image: url('../imgs/activities_heading_bg_pc.png');
		background-color: #dced91;
		padding-bottom: 12vw;
	}
	.support &,
	.contact & {
		background-size: 100% auto;
		background-image: url('../imgs/support_heading_bg_pc.png');
		background-color: #f6d7dc;
		padding-bottom: 12vw;
	}
	.admission &,
	.donation & {
		background-size: 100% auto;
		background-image: url('../imgs/admission_heading_bg_pc.png');
		background-color: #e2f1f2;
		padding-bottom: 12vw;
	}
	.contact & {
		padding-bottom: 31.5vw;
	}
	.donation & {
		padding-bottom: 25vw;
	}
	
	&::after {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 500;
		backdrop-filter: blur(16px);
		pointer-events: none;
		transition: backdrop-filter 1.0s ease-out 0.2s;
	}
	
	.loaded &::after {
		backdrop-filter: blur(0);
	}
}
.pageTitle {
	line-height: 1;
	margin: 0 auto;
	
	.home & {
		max-width: 68.75vw;
		text-align: left;
		
		img {
			width: 28.22vw;
		}
	}
	
	opacity: 0;
	translate: 3rem 0;
	transition: opacity 0.6s ease-out 1.2s, translate 0.6s cubic-bezier(.21,1.82,.16,.67) 1.2s;
	
	.loaded & {
		opacity: 1;
		translate: 0;
	}
	
	.about &,
	.pc-hardware &,
	.activities & {
		margin-bottom: 57.5vw;
	}
	.support &,
	.admission & {
		margin-bottom: 37.5vw;
	}
}
.pageCatch {
	font-size: 2em;
	line-height: 1.75;
	text-align: left;
	font-weight: 700;
	margin: 0 auto 1.5em;
	width: min(960px, 90vw);
	
	translate: 1.5em 0;
	opacity: 0;
	transition: opacity 0.6s ease-out 0.2s, translate 0.6s cubic-bezier(.21,1.82,.16,.67) 0.2s;
	
	&.visible {
		translate: 0 0;
		opacity: 1;
	}
}
.pageHeadingWrap {
	width: min(960px, 90vw);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin: 0 auto;
	
	.activities & {
		align-items: center;
		margin-top: -5rem;
	}
}
.pageHeadingTxt {
	font-size: 1em;
	line-height: 1.75;
	text-align: left;
	font-weight: 500;
	margin: 0;
	white-space: nowrap;
	
	translate: 1.5em 0;
	opacity: 0;
	transition: opacity 0.6s ease-out 0.2s, translate 0.6s cubic-bezier(.21,1.82,.16,.67) 0.2s;
	
	&.visible {
		translate: 0 0;
		opacity: 1;
	}
}
.content {
	width: min(960px, 90vw);
	margin: 0 auto 12rem;
	
	translate: 1.5em 0;
	opacity: 0;
	transition: opacity 0.6s ease-out 0.2s, translate 0.6s cubic-bezier(.21,1.82,.16,.67) 0.2s;
	
	&:nth-of-type(even) {
		translate: -1.5em 0;
	}
	
	&.visible {
		translate: 0 0;
		opacity: 1;
	}
}
.contTitle {
	font-size: 1.5em;
	line-height: 1.375;
	margin: 0 auto 2em;
	
	.home & {
		font-size: 2em;
	}
}
.contCatch {
	font-size: 1.5em;
	line-height: 1.25;
	text-align: left;
	margin: 0 auto 1.5em;
}
.contTxt {
	font-size: 1em;
	line-height: 1.75;
	margin: 0 auto 1.5em;
}
.contentBodyWrap {
	display: grid;
	grid-template-columns: auto 26rem;
}
.pageTxt {
	font-size: 1em;
	line-height: 2.1875;
	text-align: left;
	font-weight: 500;
	margin: 0 auto 3em;
}
.btnMore,
.btnMore:visited {
	display: block;
	background-color: var(--color-accent);
	border-radius: 100vmax;
	padding: 2.5rem 0;
	
	&:hover img {
		translate: 0.5rem 0;
		opacity: 1;
	}
	
	.about & {
		margin: 7rem auto 0;
		width: min(400px, 90vw);
	}
	
	.pcHardwareIntro & {
		margin: 0 auto;
		width: min(400px, 80vw);
	}
}
.topIllust01 {
	max-width: 64vw;
	text-align: right;
	margin: 0 auto 14.6875vw;
	
	img {
		width: 42.8125vw;
	}
	
	opacity: 0;
	scale: 1.2;
	transition: opacity 0.6s ease-out 1.6s, scale 0.6s cubic-bezier(.21,1.82,.16,.67) 1.6s;
	
	.loaded & {
		opacity: 1;
		scale: 1;
	}
}
.topIllust02 {
	width: min(960px, 90vw);
	text-align: right;
	margin: 0 auto;
	
	opacity: 0;
	scale: 1.2;
	transition: opacity 0.6s ease-out 0.2s, scale 0.6s cubic-bezier(.21,1.82,.16,.67) 0.2s;
	
	&.visible {
		opacity: 1;
		scale: 1;
	}
}
.aboutTitle {
	font-size: 1.5em;
	line-height: 1.25;
	text-align: left;
	margin: 0 0 2.25em;
	padding-bottom: 0.25em;
	border-bottom: solid 1px var(--color-txt);
}
.aboutTxt {
	font-size: 1.25em;
	line-height: 1.95;
	text-align: left;
	font-weight: 500;
	margin: 0 0 2.25em;
}
ol.aboutList {
	font-size: 1.25em;
	line-height: 1.5;
	text-align: left;
	font-weight: 500;
	margin: 0 0 3em;
	counter-reset: aboutNum;
	
	li {
		counter-increment: aboutNum;
		margin: 0 0 0.5em;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		
		&::before {
			content: counter(aboutNum);
			flex-shrink: 0;
			font-size: 0.875em;
			width: 1.2em;
			height: 1.2em;
			display: flex;
			justify-content: center;
			align-items: center;
			border: solid 1px var(--color-txt);
			border-radius: 50%;
			margin-right: 0.375em;
		}
	}
}
.aboutGallery {
	display: grid;
	grid-template-columns: repeat(3,1fr);
}
.pcHardwareIntro {
	position: relative;
	background-color: #fff69b;
	padding-bottom: 20vw;
	
	&::before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 1920 / 232;
		background: url('../imgs/bg_divide_circle.svg') center bottom no-repeat;
		background-size: 100% auto;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 10;
	}
	
	& > * {
		position: relative;
		z-index: 100;
	}
}
ol.pcRecycleFlow {
	font-size: 1.25em;
	line-height: 1.6;
	font-weight: 700;
	margin: 0 auto 10rem;
	width: min(960px, 90vw);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8%;
	
	li {
		position: relative;
		display: flex;
		flex-direction: colmn;
		justify-content: center;
		align-items: center;
		background-color: var(--color-accent);
		color: var(--color-contrast);
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		
		&:not(:last-of-type)::after {
			content: "";
			display: block;
			width: 17.777%;
			aspect-ratio: 32 / 38;
			clip-path: polygon(100% 50%, 0 0, 0 100%);
			background-color: var(--color-accent);
			position: absolute;
			top: 50%;
			right: 0;
			translate: 175% -50%;
		}
	}
}
ol.pcRecycleSteps {
	width: fit-content;
	margin: 0 auto;
	font-size: 1em;
	line-height: 2.4375;
	text-align: left;
	font-weight: 500;
	
	li {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 6.625rem;
		margin-bottom: 8rem;
		
		&:nth-of-type(2) {
			line-height: 1.875;
		}
	}
	.stepsNum {
		flex-shrink: 0;
		width: 106px;
		text-align: center;
	}
}
.pcOthers {
	width: min(800px, 90vw);
	margin: 2rem auto 6.75rem;
	background: var(--color-contrast);
	border-radius: 1.875rem;
	padding: 1.25rem 3.375rem;
	display: flex;
	justify-content: flex-start;
	gap: 5rem;
	font-size: 1.25em;
	line-height: 1.5;
	text-align: left;
	font-weight: 500;
	
	dt {
		margin: 0;
		padding: 0.25em 0;
		position: relative;
		white-space: nowrap;
		
		&::after {
			content: "";
			width: 2px;
			height: 100%;
			background-color: var(--color-txt);
			display: block;
			position: absolute;
			top: 0;
			right: -2.5rem;
		}
	}
	dd {
		margin: 0;
		padding: 0.25em 0;
	}
}
.content.pcPlace {
	margin-bottom: 4rem;
}
.pcPlaceName {
	font-size: 1.5em;
	line-height: 1;
	text-align: left;
	font-weight: 500;
	margin: 0 0 1.25em;
}
.pcPlaceWrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem 4.875rem;
	border-bottom: solid 1px var(--color-txt);
	padding-bottom: 4rem;
	align-items: flex-start;
	
	iframe {
		max-width: 100%;
	}
}
.pcPlaceDetail {
	display: grid;
	grid-template-columns: 3.5em 1fr;
	font-size: 1.25em;
	line-height: 1.375;
	text-align: left;
	font-weight: 500;
	margin: 0;
	
	dt {
		letter-spacing: 0.25em;
	}
	
	dt, dd {
		margin: 0;
		padding: 1em 0;
		border-bottom: solid 1px var(--color-txt);
	}
}
.activitiesIntro {
	background: #dced91;
	padding-bottom: 1px;
	margin-bottom: 7.75rem;
}
.activitiesDetail {
	display: grid;
	grid-template-columns: 1fr 41.666%;
	gap: 6.75rem;
	margin-bottom: 10.75rem;
}
.activitiesDetailTitle {
	font-size: 1.5em;
	line-height: 1.25;
	margin: 0 auto 1.5em;
	color: #009600;
	background-color: var(--color-contrast);
	padding: 0.5em 0 0.625em;
	border-radius: 100vmax;
}
.activitiesDetailImg {
	display: grid;
	gap: 3rem;
	figure {
		margin: 0;
	}
	figcaption {
		font-size: 1em;
		line-height: 1.25;
		text-align: left;
		margin: 0.375em 0 0;
	}
}
.workplaceIntro {
	& > .pcPlaceName {
		font-weight: 700;
	}
	.contTitle {
		font-size: 1.25em;
		font-weight: 500;
	}
	.pageTxt {
		line-height: 1.75;
	}
}
.workplaceListWrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	margin-bottom: 3.375rem;
}
.workplaceListItem {
	
	.pcPlaceName {
		font-size: 1.25em;
		margin: 0 0 0.625em;
	}
	.pcPlaceDetail {
		font-size: 1em;
		margin-bottom: 2.25rem;
		border-top: solid 1px var(--color-txt);
		
		dt, dd {
			padding: 0.5em 0;
		}
	}
}
.supportMemberWrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin: 0 auto 1.5rem;
}
.supportMember {
	background-color: var(--color-contrast);
	padding: 1.75rem 1.125rem 0.25rem;
}
.supportMemberTitle {
	font-size: 1.5em;
	line-height: 1.25;
	margin: 0 auto 1.25em;
	min-height: 2.5em;
}
.supportMemberFee {
	font-size: 1em;
	line-height: 1;
	font-weight: 500;
	margin: 0 auto 1.25em;
	padding-top: 2em;
	border-top: solid 1px var(--color-txt);
	
	dt {
		margin: 0 auto 1.5em;
	}
	dd {
		font-weight: 700;
		margin: 0 0 2.5em;
		
		.capsL {
			font-size: 1.875em;
		}
	}
}
.supportMemberNotice {
	font-size: 1em;
	line-height: 1.75;
	text-align: left;
	margin: 0;
}
.supportContactWrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5.5rem;
}
.supportContact {
	margin: 0;
	text-align: left;
	
	dt {
		font-size: 1.25em;
		line-height: 1;
		font-weight: 700;
		margin: 0 0 1.5em;
	}
	dd {
		font-size: 1em;
		line-height: 1.75;
		margin: 0;
		position: relative;
		padding-bottom: 1.5rem;
		height: 100%;
	}
	.btnContact,
	.btnContact:visited {
		width: 100%;
		padding: 1em;
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		text-align: center;
		text-decoration: none;
		background-color: var(--color-accent);
		color: var(--color-contrast);
		
		&:hover {
			opacity: 0.7;
		}
	}
}
.admissionDetailWrap {
	background: #e2f1f2;
	padding: 1px 0 5rem;
	margin: 0 auto 5.75rem;
}
.admissionDetail {
	margin: 0 auto;
	width: min(960px, 90vw);
	
	dt {
		background: var(--color-contrast);
		font-size: 1.5em;
		line-height: 1;
		font-weight: bold;
		margin: 0 auto 1.5em;
		padding: 0.5em 0 0.625em;
		border-radius: 100vmax;
	}
	dd {
		width: fit-content;
		max-width: 26em;
		font-size: 1em;
		line-height: 1.75;
		text-align: left;
		margin: 0 auto 5.5em;
	}
}
.admissionFlowWrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.875rem 5.5rem;
	margin: 0 auto;
	
	.admissionFlow {
		margin: 0 auto;
		
		dt {
			margin: 0 auto 1.2em;
			padding: 1.25em 0.8em;
			background: var(--color-accent);
			color: var(--color-contrast);
			font-size: 1.25em;
			line-height: 1;
			text-align: left;
			font-weight: 700;
			border-radius: 1em;
		}
		dd {
			font-size: 1em;
			line-height: 1.75;
			text-align: left;
			margin: 0;
		}
	}
}
ul.admissionContact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 auto;
	
	a, a:visited {
		display: block;
		text-decoration: none;
		color: var(--color-txt);
		background-color: #00c9f0;
		padding: 2rem 0 2rem;
		border-radius: 1.875rem 0 0 1.875rem;
		height: 100%;
		
		&:hover {
			opacity: 0.7;
		}
	}
	li:last-of-type a {
		background-color: #ffb4b4;
		border-radius: 0 1.875rem 1.875rem 0;
	}
	dl {
		margin: 0;
	}
	dt {
		line-height: 1;
		width: 58.333%;
		height: 3.125rem;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto 1.5rem;
		border: solid 1px var(--color-txt);
		border-radius: 100vmax;
		img {
			width: 61.4%;
		}
	}
	dd {
		margin: 0;
		font-size: 1em;
		line-height: 1;
		font-weight: 700;
		b {
			font-size: 2em;
			min-height: 2em;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 0.75em;
			margin-bottom: 0.5em;
		}
		span {
			font-size: 1em;
		}
	}
}
.formCont {
	width: min(640px, 90vw);
	margin: 0 auto 0;
}
.formBody {
	display: grid;
	grid-template-columns: 11em 1fr;
	gap: 1em;
	align-items: flex-start;
	font-size: 1.125em;
	line-height: 1.375;
	
	dt {
		margin: 0.25em 0 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 700;
		
		.required {
			font-size: 0.75em;
			line-height: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 3em;
			height: 1.5em;
			background-color: var(--color-accent);
			color: var(--color-contrast);
			border-radius: 100vmax;
		}
	}
	dd {
		margin: 0;
		text-align: left;
		
		input[type="text"],input[type="tel"],input[type="email"],textarea {
			padding: 0.5em 0.75em;
			border: none;
			border-radius: 1.5em;
			width: 100%;
			
			&:focus {
				outline: none;
				background-color: rgba(var(--color-contrast-rgb), .75);
				box-shadow: 0 0 0 3px var(--color-primary);
				transition: all 0.4s ease;
			}
			&.p-postal-code {
				max-width: 10em;
			}
			&.pc {
				max-width: 4em;
			}
		}
		
		label {
			display: block;
			label + & {
				margin-top: 0.5em;
			}
		}
		.pcType {
			display: inline-block;
			width: 6.5em;
		}
	}
	.formNotice {
		font-size: 0.75em;
		line-height: 1.25;
		margin: 0.375em 0 0;
	}
}
.formAttention {
	font-size: 1em;
	line-height: 1.5;
	margin: 0 auto 2em;
	
	dt {
		background-color: rgba(var(--color-primary-rgb), .5);
		font-size: 1.125em;
		line-height: 1;
		font-weight: 700;
		margin: 0;
		border-radius: 1rem 1rem 0 0;
		padding: 0.5em 0 0.75em;
		border-bottom: solid 1px rgba(var(--color-contrast-rgb), .5);
	}
	dd {
		font-size: 0.875em;
		line-height: 1.75;
		text-align: left;
		margin: 0;
		padding: 0.5em 1.5em 0.75em 0;
		background-color: rgba(var(--color-primary-rgb), .25);
		border-radius: 0 0 1rem 1rem;
		
		li {
			margin-bottom: 0.25em;
		}
	}
}
.formButtons .btn {
	cursor: pointer;
	transition: all 0.4s ease;
	width: 10em;
}
.wpcf7-response-output {
	border: none;
	font-size: 1.125em;
	border-radius: 100vmax;
	background: var(--color-contrast);
	padding: 0.5em;
}

/* !sp */
/* --------------------------- */
@media screen and (max-width:767px) {
	/* !sp common */
	/* --------------------------- */
	.floatLeft,
	.floatRight,
	.alignleft,
	.alignright {
		display: block;
		text-align: center;
		float: none;
		margin: 16px auto;
	}
	.nosp {
		display: none;
	}
	.sp {
		display: block;
	}
	.flexCont {
		display: block;
	}
	.btnWrap {
		grid-template-columns: 1fr;
		margin-top: 1rem;
		
		.btn {
			margin: 0 auto;
			max-width: 90%;
		}
	}
	/* !sp layout */
	/* --------------------------- */
	html {
		font-size: 3.5vw;
	}
	/* !sp header */
	/* --------------------------- */
	.gHeader {
		height: 3.5rem;
		padding: 0 1.375rem 0 1rem;
	}
	.siteTitle {
		font-size: 0.75rem;
		flex-direction: column;
		align-items: flex-start;
		max-width: 25%;
		gap: 0.25rem;
	}
	.gNav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		translate: 100% 0;
		transition: translate 0.3s ease;
		background-color: var(--color-bg);
		pointer-events: none;
		z-index: 1000;
		padding-top: 4rem;
		
		#menu:checked ~ .gHeader & {
			translate: 0 0;
			pointer-events: auto;
		}
	}
	.navTitle {
		font-size: 1rem;
		line-height: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 0.5rem;
		width: 43%;
		margin: 0 auto 1.5rem 2.5rem;
	}
	ul.gNavList {
		padding: 0 2.5rem 2.5rem;
		width: 100%;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 1.25rem;
		text-align: left;
		
		li {
			width: 100%;
			
			&:last-of-type {
				display: none;
			}
			
			a {
				width: 100%;
			}
		}
	}
	.toggle {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 1.375vw;
		width: 6vw;
		height: 6vw;
		z-index: 2000;
		
		.bar {
			display: block;
			width: 100%;
			height: 3px;
			background-color: var(--color-txt);
			transition: scale 0.3s ease, rotate 0.3s ease, translate 0.3s ease;
			
			#menu:checked ~ .gHeader & {
				scale: 0 1;
			}
			#menu:checked ~ .gHeader &:first-of-type {
				rotate: 45deg;
				scale: 1.1;
				translate: 0 2.125vw;
			}
			#menu:checked ~ .gHeader &:last-of-type {
				rotate: -45deg;
				scale: 1.1;
				translate: 0 -2.125vw;
			}
		}
		
		&::after {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 1.25vw;
			background: url('../imgs/nav_menu.svg') center center no-repeat;
			background-size: auto 100%;
			bottom: 0;
			left: 0;
			translate: 0 166%;
		}
		
		#menu:checked ~ .gHeader &::after {
			background-image: url('../imgs/nav_close.svg');
		}
	}
	.spNavBg {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100lvh;
		background-color: rgba(var(--color-txt-rgb), 0);
		z-index: 500;
		pointer-events: none;
		transition: background-color 0.4s ease;
		
		#menu:checked ~ & {
			background-color: rgba(var(--color-txt-rgb), .75);
			pointer-events: auto;
		}
	}
	.headerDonation {
		right: 18vw;
		top: 0.5rem;
		
		img {
			width: 25vw;
		}
	}
	ul.spContact {
		margin: 0 auto;
		a, a:visited {
			display: block;
			text-decoration: none;
			color: var(--color-txt);
			background-color: #00c9f0;
			padding: 1.5rem 0;
		}
		li:last-of-type a {
			background-color: #ffb4b4;
		}
		dl {
			margin: 0;
		}
		dt {
			line-height: 1;
			width: 46.666%;
			height: 2rem;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto 1rem;
			border: solid 1px var(--color-txt);
			border-radius: 100vmax;
			img {
				width: 66%;
			}
		}
		dd {
			margin: 0;
			font-size: 1rem;
			line-height: 1;
			font-weight: 700;
			b {
				min-height: 2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 0.75rem;
				margin-bottom: 0.5rem;
			}
			span {
				font-size: 0.75em;
			}
		}
	}
	/* !sp footer */
	/* --------------------------- */
	.gFooter {
		padding: 0.5rem 1rem 0.75rem;
	}
	ul.footerNavList {
		display: none;
	}
	/* !sp top */
	/* --------------------------- */
	.pageHeading {
		max-width: 100vw;
		overflow-x: hidden;
		background-size: 100% auto;
		padding: 46.666vw 0 18.75vw;
		
		.home & {
			background-image: url('../imgs/top_heading_bg_sp.png');
		}
		.about & {
			background-image: url('../imgs/about_heading_bg_sp.png');
			padding-bottom: 15vw;
			margin-bottom: 5rem;
		}
		.pc-hardware & {
			background-image: url('../imgs/pc-hardware_heading_bg_sp.png');
		}
		.activities & {
			background-image: url('../imgs/activities_heading_bg_sp.png');
		}
		.support &,
		.contact & {
			background-image: url('../imgs/support_heading_bg_sp.png');
		}
		.admission &,
		.donation & {
			background-image: url('../imgs/admission_heading_bg_sp.png');
		}
	}
	.pageTitle {
		
		.home & {
			max-width: 58.666vw;
			text-align: left;
			margin-bottom: 46vw;
			
			img {
				width: 100%;
			}
		}
		
		.about & {
			max-width: 59.333vw;
			margin-bottom: 77.5vw;
		}
		
		.pc-hardware & {
			max-width: 49.2vw;
			margin-bottom: 77.5vw;
		}
		
		.activities & {
			max-width: 67.466vw;
			margin-bottom: 77.5vw;
		}
		
		.support & {
			max-width: 57.733vw;
			margin-bottom: 77.5vw;
		}
		
		.admission & {
			max-width: 74.666vw;
			margin-bottom: 77.5vw;
		}
		
		.contact &, .donation & {
			max-width: 66vw;
			margin-bottom: 25vw;
		}
		
		img {
			width: 100%;
		}
	}
	.pageCatch {
		width: fit-content;
		font-size: 1.5em;
		margin-bottom: 4.5em;
		
		.about & {
			margin-bottom: 3rem;
		}
	}
	.topIllust01 {
		max-width: 86.4vw;
		
		img {
			width: 100%;
		}
	}
	.topIllust02 {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1.5rem;
		margin-bottom: 6rem;
		
		img {
			width: 30%;
		}
		
		.about & {
			margin-bottom: 3rem;
		}
		
		.pc-hardware & {
			margin-bottom: 3rem;
			
			img {
				width: 47.5vw;
			}
		}
		
		.activities & {
			margin-top: 6rem;
			margin-bottom: 3rem;
			gap: 0;
			
			img {
				width: auto;
				height: 40vw;
			}
		}
		
		.support & {
			gap: 0;
			
			img {
				width: auto;
				height: 40vw;
			}
		}
		
		.admission & {
			margin-bottom: 3rem;
			gap: 1rem;
			
			img {
				width: 40%;
				translate: -1rem 0;
			}
		}
	}
	.pageHeadingWrap {
		flex-direction: column-reverse;
		max-width: 80vw;
	}
	.pageHeadingTxt {
		font-size: 1.125em;
		margin: 0 auto;
		white-space: normal;
	}
	.content {
		width: 80%;
	}
	.contentBodyWrap {
		display: grid;
		grid-template-columns: 1fr;
		gap: 4rem;
		
		img {
			max-width: 80%;
			margin: 0 auto;
		}
	}
	.contTitle,
	.home .contTitle {
		font-size: 1.5em;
	}
	.contCatch {
		text-align: center;
	}
	.pageTxt {
		font-size: 1.125em;
		line-height: 1.875;
	}
	.contIllust {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		
		img {
			width: 40%;
		}
	}
	.btnMore,
	.btnMore:visited {
		width: min(70vw, 100%);
		padding: 1.5rem 0;
		margin-inline: auto;
		
		.about & {
			margin: 3rem auto 0;
			width: 83.333%;
			
			img {
				max-width: 84%;
			}
		}
		
		.pcHardwareIntro & img {
			max-width: 84%;
		}
	}
	.aboutTitle {
		font-size: 1.25em;
	}
	ol.aboutList {
		font-size: 1.125em;
		
		li {
			align-items: flex-start;
			&::before {
				margin-top: 0.2em;
			}
		}
	}
	.aboutTxt {
		font-size: 1.125em;
		line-height: 1.575;
	}
	.aboutGallery {
		grid-template-columns: repeat(2,1fr);
		gap: 1.25rem;
	}
	ol.pcRecycleFlow {
		width: 58.666vw;
		font-size: 1em;
		line-height: 1.6;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem 2.875rem;
	}
	ol.pcRecycleSteps {
		font-size: 1.125em;
		line-height: 1.575;
		width: 80%;
		
		li {
			flex-direction: column;
			gap: 2rem;
			margin-bottom: 4rem;
		}
		.stepsNum img {
			width: auto;
			height: 10vw;
		}
	}
	.pcOthersIllust {
		max-width: 80%;
	}
	.pcOthers {
		max-width: 80%;
		flex-direction: column;
		gap: 0;
		padding: 0.75rem 1.5rem;
		margin: 2.5rem auto 4rem;
		border-radius: 0.875rem;
		
		dt {
			text-align: center;
			
			&::after {
				width: 100%;
				height: 1px;
				position: relative;
				top: auto;
				right: auto;
				margin-top: 0.75rem;
			}
		}
	}
	.pcPlaceWrap {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		border-bottom: none;
	}
	.pcPlaceDetail {
		grid-template-columns: 5em 1fr;
		
		dt:first-of-type,
		dd:first-of-type {
			padding-top: 0;
		}
	}
	.workplaceListWrap {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.activitiesDetail {
		grid-template-columns: 1fr;
		gap: 2rem;
		margin-bottom: 4rem;
		
		.pageTxt {
			margin-bottom: 0;
		}
	}
	.activitiesDetailImg figcaption {
		text-align: center;
	}
	.workplaceIntro {
		& > .pcPlaceName {
			font-size: 1.125em;
			text-align: center;
		}
	}
	.workplaceListItem {
		
		.pcPlaceName {
			font-size: 1.125em;
			padding-left: 0.5rem;
		}
		.pcPlaceDetail {
			font-size: 1.125em;
			
			dt, dd {
				padding: 0.5rem 0.5rem;
			}
		}
	}
	.supportMemberWrap {
		gap: 0.5rem;
	}
	.supportMember {
		padding: 0.5rem 0.625rem 0.25rem;
	}
	.supportMemberTitle {
		font-size: 1em;
		margin-bottom: 0.5em;
	}
	.supportMemberFee {
		font-size: 0.875em;
		padding-top: 0.75em;
		
		dt {
			margin: 0 auto 0.625em;
		}
		dd {
			margin: 0 0 1em;
			
			.capsL {
				font-size: 1.5em;
			}
		}
	}
	.supportMemberNotice {
		font-size: 0.75em;
	}
	.supportContactWrap {
		grid-template-columns: 1fr;
		gap: 7.5rem;
	}
	.supportContact {
		dt {
			text-align: center;
		}
		dd {
			font-size: 1.125em;
			padding-bottom: 2.5rem;
		}
		.btnContact {
			padding: 0.75em 0;
			width: 80%;
			left: 50%;
			translate: -50% 0;
		}
	}
	.admissionDetail {
		width: 80vw;
		
		dt {
			font-size: 1.25em;
			padding: 0.75em 0 0.875em;
			margin-bottom: 1em;
		}
		dd {
			margin-bottom: 3rem;
			font-size: 1.25em;
		}
	}
	.admissionFlowWrap {
		grid-template-columns: 1fr;
		gap: 2rem;
		
		.admissionFlow {
			dt {
				margin-bottom: 0.75em;
				border-radius: 0.75em;
			}
		}
	}
	ul.admissionContact {
		grid-template-columns: 1fr;
		
		a, a:visited {
			border-radius: 1rem 1rem 0 0;
		}
		li:last-of-type a {
			border-radius: 0 0 1rem 1rem;
		}
		dt {
			width: 80%;
		}
		dd {
			font-size: 0.875em;
			b {
				font-size: 1.75em;
			}
		}
		li:last-of-type dd img {
			width: 3.5rem;
		}
	}
	.formBody {
		grid-template-columns: 1fr;
		gap: 0.5em;
		
		dt {
			flex-direction: row-reverse;
			justify-content: flex-end;
			gap: 0.5em;
		}
		dd {
			margin-bottom: 0.75em;
		}
	}
}