@charset "utf-8";
/*
Theme Name: Greenpeace Japan
*/

/* Base Style
================================================== */
body {
	background-color: #fff;
	color: #333;
	font-size: var(--font-size16);
	font-family: fot-udkakugo-large-pr6n, sans-serif;
	font-weight: 500;
	line-height: 1.5;
	overflow-x: hidden;
	position: relative;
	-webkit-text-size-adjust: 100%;
}

:focus-visible {
	outline: 2px solid var(--textImportant);
}

a,
button span,
input {
	transition: color .3s ease, background-color .3s ease;
}

img,
svg {
	max-width: 100%;
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}

input, select, textarea {
	color: #000;
	font-family: inherit;
	font-size: 100%;
}

input[type="submit"],
input[type="button"] {
	-webkit-appearance: none;
	-moz-appearance: none;
}

::-webkit-input-placeholder {
	padding-top: 2px;
}

.srOnly {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
}

@media screen and (min-width: 768px) {
	.sp {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	.pc {
		display: none !important;
	}
}

.external {
	display: inline-block;
	height: .8em;
	margin: 0 .25em;
	vertical-align: middle !important;
}

.brCtrl span {
	display: inline-block;
}

.page-home {
	text-transform: uppercase;
}

#commonHeader p,
#commonFooter p {
	margin-bottom: 0;
	line-height: 1.5;
}

#commonHeader ul,
#commonFooter ul,
#breadcrumb ol {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.5;
}

#commonHeader ul li,
#commonFooter ul li {
	padding-left: 0;
	background: none;
}

#commonHeader a,
#commonFooter a {
	text-decoration: none;
}

/* Layout
================================================== */
.inner {
	max-width: 1200px;
	margin: 0 auto;
}

.narrow {
	max-width: 792px;
	margin: 0 auto;
}

@media screen and (max-width: 1280px) {
	.inner {
		margin: 0 40px;
	}
	
	.inner.narrow {
		margin-right: auto;
		margin-left: auto;
	}
}

@media screen and (max-width: 872px) {
	.inner.narrow {
		margin-right: 40px;
		margin-left: 40px;
	}
}

@media screen and (max-width: 767px) {
	.inner,
	.inner.narrow {
		margin-right: 20px;
		margin-left: 20px;
	}
}

.wide,
#pageTitle {
	width: 100vw;
	margin-right: calc(-50vw - -50%);
	margin-left: calc(-50vw - -50%);
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%);
}
	
.wide {
	padding-top: 80px;
	padding-bottom: 80px;
}

.wide > h2:first-child {
	margin-top: -8px;
}

.contentBody {
	margin-bottom: 160px;
}

body.article .contentBody {
	margin-bottom: 72px;
	word-break: break-all;
}

body.article .contentBody > * {
	word-break: normal;
}

body.article .contentBody::after {
	content: "";
	display: block;
	clear: both;
}

.contentBody section {
	margin-top: 72px;
	margin-bottom: 72px;
}

.contentBody section.wide:has(+ section.wide) {
	margin-bottom: 0;
}

.contentBody section.wide + section.wide {
	margin-top: 0;
}

.contentBody:has(section.wide:last-child):has(+ #breadcrumb) {
	margin-bottom: 0;
}

.contentBody:has(+ #breadcrumb) > section.wide:last-child {
	margin-bottom: 0;
	padding-bottom: 160px;
}

.archives {
	margin-top: 72px;
	padding-bottom: 120px;
}

@media screen and (max-width: 767px) {
	.wide {
		padding-top: 48px;
		padding-bottom: 56px;
	}
	
	.contentBody {
		margin-bottom: 180px;
	}
	
	.contentBody:has(+ aside) {
		margin-bottom: 120px;
	}

	.contentBody section {
		margin-top: 56px;
		margin-bottom: 56px;
	}
	
	.contentBody:has(+ #breadcrumb) > section.wide:last-child {
		padding-bottom: 180px;
	}
}

#home #main > *:last-child,
#main > aside:has(+ #breadcrumb) {
	padding-bottom: 180px !important;
}


.wide.bgGreen {
	border-top: 1px solid var(--bgLgreen);
}

.wide.bgGray {
	border-top: 1px solid var(--bgLgray);
}

.wide.bgGreen + .wide.bgGreen,
.wide.bgGray + .wide.bgGray {
	padding-top: 0;
}

img[src$='no_image.png'] {
	border: 1px solid var(--borderLgray);
}

/* header
================================================== */
.skip {
	margin: 0;
}

.skip a {
	display: block;
	width: fit-content;
	height: 0;
	overflow: hidden;
	line-height: 1;
	text-decoration: none;
}

.skip a:focus {
	margin: 12px 20px 0;
	height: auto;
}

#commonHeader .inner {
	max-width: none;
	min-height: 60px;
	display: flex;
	gap: 32px;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}

#commonHeader .logo {
	width: 203px;
	margin: 16px 24px;
	display: flex;
	align-items: stretch;
	position: relative;
	z-index: 99;
}

body.menuOpen #commonHeader .logo {
	position: fixed;
}

@media screen and (max-width: 1280px) {
	#commonHeader .inner {
		margin: 0 auto;
	}
}

#commonHeader .logo img {
	vertical-align: middle;
}

#metaNav {
	display: flex;
	min-height: 80px;
	position: relative;
	font-weight: 700;
}

#metaNav ul {
	display: flex;
}

#metaNav li {
	display: flex;
	align-items: center;
}

#metaNav .mypageNav li {
	margin-left: 1px;
	position: relative;
}

#metaNav .mypageNav li::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -1px;
	transform: translateY(-50%);
	height: 2em;
	border-left: 1px solid var(--borderBlack20);
}

#metaNav #searchBtn button,
#metaNav .mypageNav li a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 14px 15px 0;
	background-repeat: no-repeat;
	background-position: 50% calc(50% - 15px);
	background-size: 16px;
	color: var(--textHeadline);
	white-space: nowrap;
	position: relative;
}

#metaNav #searchBtn button {
	background-image: url(images/ico_search.svg);
}

#metaNav li.mypage a {
	background-image: url(images/ico_mypage.svg);
}

#metaNav li.login a {
	background-image: url(images/ico_login.svg);
}

#metaNav li.logout a {
	background-image: url(images/ico_logout.svg);
}

#metaNav #searchBtn button:hover,
#metaNav .mypageNav li a:hover {
	background-color: var(--bgLgreen50);
}

#metaNav .guideNav {
	flex-wrap: wrap;
	margin: 8px 0;
}

#metaNav .guideNav li a {
	display: inline-block;
	margin-left: 16px;
	padding-left: 18px;
	background: url(images/ico_arrow1.svg) no-repeat 0 50%;
	color: var(--textHeadline);
	font-size: var(--font-size14);
}

.searchForm {
	margin: 40px 0;
	width: 100%;
	border: 1px solid var(--borderGray);
	background-color: #fff;
	position: relative;
}

.searchForm input[type="search"] {
	min-height: 64px;
	padding: 3px 64px 3px 12px;
	border: 0;
}

.searchForm button {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 64px;
	height: 100%;
	background: url(images/ico_search.svg) no-repeat 50% 50% / 16px;
}
	
.searchForm button span {
	display: inline-block;
	width: 0;
	overflow: hidden;
}

#searchBox {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	visibility: hidden;
}

body.searchOpen #searchBox {
	visibility: visible;
	padding: 12px 8px 12px 24px;
	border: 1px solid var(--darkGreen);
	background-color: var(--darkGreen);
	display: flex;
	align-items: center;
	justify-content: center;
}

#searchBox .searchForm {
	margin: 0;
	width: 350px;
}

#searchBox .searchForm input[type="search"] {
	min-height: auto;
	font-size: var(--font-size14);
}

#searchBox .searchForm button {
	padding-left: 24px;
	background-position: 8px 50%;
	background-size: 12px;
	font-size: var(--font-size12);
}

#searchBox .searchForm button span {
	width: auto;
	overflow: visible;
}

#searchBox .searchClose {
	margin-left: 8px;
	padding-top: 14px;
	background: url(images/ico_close_w.svg) no-repeat 50% 0;
	color: #fff;
	font-size: var(--font-size12);
}

body.searchOpen #metaNav #searchBtn button {
	background-color: var(--darkGreen);
	background-image: url(images/ico_search_w.svg);
	color: #fff;
}

#commonHeader #metaNav .donate {
	width: auto;
	margin: 16px;
}

#commonHeader .donate a {
	min-width: 186px;
	min-height: 52px;
	padding: 5px 24px;
	border: 1px solid var(--orange);
	background-position: calc(100% - 12px) 50%;
	background-size: 12px;
}

@media screen and (max-width: 1080px) and (min-width: 768px) {
	#commonHeader .inner {
		gap: 16px;
	}
	
	#commonHeader .logo {
		width: 130px;
		min-width: 130px;
		margin: 8px 16px;
	}
	
	#metaNav {
		min-height: 60px;
	}
	
	#metaNav #searchBtn button,
	#metaNav .mypageNav li a {
		padding-top: 20px;
		background-position: 50% calc(50% - 9px);
		background-size: 12px;
	}
		
	#metaNav #searchBtn button,
	#metaNav .mypageNav li a,
	#metaNav .guideNav li a {
		font-size: var(--font-size12);
	}
	
	#metaNav .guideNav li a {
		margin-left: 13px;
		padding-left: 15px;
	}
	
	#commonHeader #metaNav .donate {
		margin: 8px;
	}
	
	#commonHeader #metaNav .donate a {
		min-width: 122px;
		min-height: 44px;
		padding-left: 10px;
		font-size: var(--font-size14);
	}
}

@media screen and (max-width: 820px) and (min-width: 768px) {
	#metaNav #searchBtn button,
	#metaNav .mypageNav li a {
		padding-right: 6px;
		padding-left: 6px;
	}
}

@media screen and (max-width: 767px) {
	#commonHeader .logo {
		width: 159px;
		max-width: calc(100% - 60px);
		margin: 6px 16px;
	}
	
	#metaNav {
		display: none;
	}
	
	body.article #commonHeader {
		border-bottom: 1px solid var(--borderLgray);
	}
}

/* Fixed header
-------------------------------------------------- */
@media screen and (min-width: 768px) {
	body:not(#donate) #commonHeader {
		position: fixed;
		width: 100%;
		background-color: #fff;
		z-index: 90;
	}
	
	body:not(#donate) #main {
		margin-top: 142px;
	}
	
	@media screen and (max-width: 1080px) {
		body:not(#donate) #main {
			margin-top: 118px;
		}
	}
}

/* Menu button
-------------------------------------------------- */
#menuBtn {
	position: fixed;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	background-color: #fff;
	z-index: 90;
}

#menuBtn button {
	width: 100%;
	height: 100%;
	vertical-align: top;
	position: relative;
}

#menuBtn::after,
#menuBtn button::before,
#menuBtn button::after {
	content: '';
	position: absolute;
	width: 30px;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: 2px solid #666;
	cursor: pointer;
	transition: top .3s .3s, transform .3s;
}

#menuBtn::after {
	top: calc(50% - 1px);
}

#menuBtn button::before {
	top: 30%;
}

#menuBtn button::after {
	top: calc(70% - 2px);
}

body.menuOpen #menuBtn::after {
	width: 0;
}

body.menuOpen #menuBtn button::before,
body.menuOpen #menuBtn button::after {
	top: calc(50% - 1px);
	transition: top .3s, transform .3s .3s;
}

body.menuOpen #menuBtn button::before {
	transform: translateX(-50%) rotate(45deg);
}

body.menuOpen #menuBtn button::after {
	transform: translateX(-50%) rotate(-45deg);
}

body.menuOpen #menuBtn::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 100vw;
	background-color: #fff;
}

/* Global Nav
-------------------------------------------------- */
#globalNav a,
#globalNav span {
	color: var(--textHeadline);
	font-weight: 700;
}

#globalNav .page-home,
#globalNav .page-question,
#globalNav .page-world {
	display: none;
}

@media screen and (min-width: 768px) {
	#globalNav {
		border-top: 1px solid var(--logoGreen);
		border-bottom: 1px solid var(--logoGreen);
	}
	
	#globalNav > ul {
		display: flex;
		align-items: center;
		gap: 1px;
		background-color: var(--logoGreen);
	}
	
	#globalNav > ul > li {
		width: 25%;
		height: 100%;
		position: relative;
	}
	
	#globalNav > ul > li:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 50%;
		right: -1px;
		transform: translateY(-50%);
		height: 1.25em;
		border-right: 1px solid rgba(255,255,255,.75);
	}
	
	#globalNav > ul > li > span,
	#globalNav > ul > li > a {
		margin: -1px 0;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 58px;
		color: var(--textHeadline);
		font-weight: 700;
		text-align: center;
	}
	
	#globalNav > ul > li > span::before,
		#globalNav > ul > li > a::before {
		content: '';
		display: inline-block;
		width: 11px;
		height: 11px;
		margin-right: 10px;
		background: url(images/ico_arrow3.svg) no-repeat 0 50% / 100%;
	}
		
	#globalNav > ul > li:hover > a,
	#globalNav > ul > li:hover > span {
		background-color: var(--darkGreen);
		color: #fff;
	}
	
	#globalNav > ul > li:hover > a::before,
	#globalNav > ul > li:hover > a::before {
		background-image: url(images/ico_arrow3_w.svg);
	}
	
	#globalNav > ul > li > ul.sub-menu {
		position: absolute;
		top: calc(100% + 1px);
		right: 0;
		width: 100%;
		background-color: #fff;
		z-index: 50;
		padding: 0 20px;
		transform: scaleY(0);
		transform-origin: center top;
		transition: all .2s ease;
	}
	
	#globalNav > ul > li:hover > ul.sub-menu,
	#globalNav > ul > li.focus > ul.sub-menu {
		border: 1px solid #fff;
		border-top-color: 0;
		transform: scaleY(1);
	}
	
	#globalNav > ul > li > ul.sub-menu li {
		border-top: 1px solid var(--borderLgray);
	}
	
	#globalNav > ul > li > ul.sub-menu > li:first-child {
		border-top: 0;
	}
	
	#globalNav > ul > li:last-child > ul.sub-menu {
		width: 200%;
		column-count: 2;
		gap: 40px;
	}
	
	#globalNav > ul > li:last-child > ul.sub-menu > li:nth-child(5) {
		break-before: column;
		border-top: 0;
	}
	
	#globalNav > ul > li > ul.sub-menu a {
		display: block;
		margin: 0 -20px;
		padding: 16px 56px 16px 20px;
		background: url(images/ico_arrow1.svg) no-repeat calc(100% - 20px) 50%;
	}
	
	#globalNav > ul > li > ul.sub-menu ul a {
		padding: 12px 56px 12px 30px;
		font-size: var(--font-size14);
	}
	
	#globalNav > ul > li > ul.sub-menu a:hover,
	#globalNav > ul > li > ul.sub-menu a:active {
		background-color: var(--bgLgreen50);
	}
	
	@media screen and (max-width: 1024px) {
		#globalNav > ul > li > a {
			font-size: var(--font-size12);
		}
	}
}

@media screen and (max-width: 767px) {
	#globalNav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		padding: 0 20px 40px;
		overflow-y: auto;
		overflow-x: hidden;
		z-index: 90;
		visibility: hidden;
		background-color: #fff;
		transition: height .3s ease;
	}
	
	body.menuOpen #globalNav {
		height: calc(100vh - 60px);
		height: calc(100dvh - 60px);
		margin-top: 60px;
		visibility: visible;
	}
	
	#globalNav > ul {
		margin: 0 -20px;
		border-bottom: 1px solid var(--borderLgray);
	}
	
	#globalNav > ul > li > ul.sub-menu {
		background-color: var(--bgLgreen);
		display: none;
	}
	
	#globalNav > ul li {
		border-top: 1px solid var(--borderLgray);
		position: relative;
	}
	
	#globalNav > ul a,
	#globalNav > ul span {
		padding: 19px 56px 19px 20px;
		display: flex;
		align-items: center;
		position: relative;
	}
	
	#globalNav > ul > li > ul.sub-menu a {
		padding: 18px 56px 18px 30px;
		background: url(images/ico_arrow1.svg) no-repeat calc(100% - 22px) 50%;
	}
	
	#globalNav > ul > li > ul.sub-menu ul {
		margin-left: 30px;
	}
	
	#globalNav > ul > li > ul.sub-menu ul a {
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: var(--font-size14);
	}
	
	#globalNav .toggle {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
		
	#globalNav .toggle::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 20px;
		width: 15px;
		border-bottom: 1px solid var(--darkGreen);
	}
		
	#globalNav .toggle::after {
		content: '';
		position: absolute;
		top: calc(50% - 7px);
		right: 27px;
		height: 15px;
		border-right: 1px solid var(--darkGreen);
		transition: all .3s ease;
	}
	
	#globalNav .open .toggle::after {
		transform: rotate(90deg);
	}
	
	#globalNav .sp {
		width: 100%;
		max-width: 384px;
		margin: 0 auto;
	}
	
	#globalNav .donate a {
		height: 72px;
		margin: 0 auto;
	}
	
	#globalNav .sp ul {
		margin-top: 40px;
		display: flex;
		flex-wrap: wrap;
		gap: 32px 48px;
		justify-content: center;
	}
	
	#globalNav .sp ul li a {
		display: block;
		width: calc(6.625em + 20px);
		max-width: 100%;
		padding-right: 20px;
		background: url(images/ico_arrow1.svg) no-repeat 100% 50%;
	}
		
	#globalNav .sp ul li.pressrelease a {
		width: calc(10em + 20px);
	}
	
	#globalNav li.mypage a,
	#globalNav li.login a,
	#globalNav li.logout a {
		padding-left: 20px;
		position: relative;
	}
	
	#globalNav li.mypage a::before,
	#globalNav li.login a::before,
	#globalNav li.logout a::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 100%;
	}
	
	#globalNav li.mypage a::before {
		background: url(images/ico_mypage.svg) no-repeat 0 50%;
	}
	
	#globalNav li.login a::before {
		background: url(images/ico_login.svg) no-repeat 0 50%;
	}
	
	#globalNav li.logout a::before {
		background: url(images/ico_logout.svg) no-repeat 0 50%;
	}
	
	body.menuOpen {
		overflow: hidden;
	}
	
	.focusTrap {
		display: none;
	}
	
	body.menuOpen .focusTrap {
		display: block;
	}
}

/* Splide
================================================== */
.splide {
	padding-bottom: 16px;
}

.splide:has(.splide__pagination) {
	padding-bottom: 38px;
}

.splide:has(.splide__toggle) {
	padding-bottom: 58px;
}

.splide__track {
	padding-right: 1px !important;
	padding-left: 1px !important;
}

.splide__list.listCol {
	gap: normal;
}

.splide__slide img:not(.external) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.splide__arrow {
	width: 33px;
	height: 33px;
	position: absolute;
	top: calc(50% - 19px);
	transform: translateY(-50%);
	z-index: 1;
	border: 1px solid var(--borderBlack20);
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
}

.splide__arrow svg {
	display: none;
}

.splide__arrow::before {
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(images/ico_arrow1.svg) no-repeat 50% 50% / 9px;
}

.splide__arrow--prev::before {
	transform: rotate(180deg);
}

.splide__arrow--prev {
	left: -57px;
}

.splide__arrow--next {
	right: -57px;
}

.splide__arrow:disabled {
	display: none;
}

.splide__toggle {
	position: absolute;
	right: calc(50vw - 600px);
	bottom: 0;
	width: 36px;
	height: 36px;
	border: 1px solid #ccc;
	border-radius: 50%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.splide__toggle svg {
	vertical-align: baseline;
	fill: var(--darkGreen);
}

.splide__toggle svg.splide__toggle__play {
	margin: 0 -1px 0 1px;
}

.splide__pagination {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1200px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.splide:has(.splide__toggle) .splide__pagination {
	bottom: 11px;
	padding-right: 48px;
}

.splide__pagination li:not(:first-child) {
	margin-left: 12px;
}

.splide__pagination__page {
	display: inline-block;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 1px solid #ccc;
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
	position: relative;
}

.splide__pagination__page.is-active::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 3px solid var(--darkGreen);
	border-radius: 50%;
}

@media (hover: hover) {
	.splide__arrow:hover {
		background-color: var(--bgLgreen50);
	}
	
	.splide__pagination__page:hover {
		background-color: var(--bgLgreen50);
	}
	
	.splide__toggle:hover {
		background-color: var(--bgLgreen50);
	}
}

@media screen and (max-width: 1362px) {
	.splide__arrow--prev {
		left: calc(-50vw - -50% + 24px);
	}
	
	.splide__arrow--next {
		right: calc(-50vw - -50% + 24px);
	}
}

@media screen and (max-width: 1280px) {
	.splide__toggle {
		right: 40px;
	}
	
	.splide:has(.splide__toggle) .splide__pagination {
		max-width: calc(100% - 80px);
	}
}

@media screen and (max-width: 767px) {
	.splide {
		margin-right: -20px;
		margin-left: -20px;
		padding-bottom: 26px;
	}
	
	.splide:has(.splide__toggle) {
		padding-bottom: 50px;
	}

	.splide__arrow {
		width: 33px;
		height: 33px;
		top: calc(50% - 19px);
	}
	
	.splide__arrow--prev {
		left: 5px;
	}
	
	.splide__arrow--next {
		right: 5px;
	}
	
	.splide .splide__track {
		padding: 0 20px !important;
	}
	
	.splide__toggle {
		right: 20px;
	}
	
	.splide__pagination,
	.splide:has(.splide__toggle) .splide__pagination {
		max-width: calc(100% - 40px);
	}
}


@media screen and (min-width: 768px) {
	.splide.img .splide__arrow--prev {
		left: 16px;
	}
	
	.splide.img .splide__arrow--next {
		right: 16px;
	}
}

@media screen and (max-width: 767px) {
	.splide.img,
	.splide.withCaption {
		margin-right: -20px !important;
		margin-left: -20px !important;
	}
	
	.box .splide.img,
	.box .splide.withCaption {
		margin-right: -19px !important;
		margin-left: -19px !important;
	}
}

.splide figure:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 1362px) and (min-width: 955px) {
	.splide.narrow .splide__arrow--prev {
		left: -57px;
	}
	
	.splide.narrow .splide__arrow--next {
		right: -57px;
	}
}

@media screen and (max-width: 1066px) and (min-width: 985px) {
	.box .splide.narrow .splide__arrow--prev {
		left: calc(-50vw - -50% + 80px);
	}
	
	.box .splide.narrow .splide__arrow--next {
		right: calc(-50vw - -50% + 80px);
	}
}

@media screen and (max-width: 984px) and (min-width: 768px) {
	.box .splide.narrow .splide__arrow--prev {
		left: -16px;
	}
	
	.box .splide.narrow .splide__arrow--next {
		right: -16px;
	}
}

/* Home
================================================== */
#home .contentBody section {
	margin-top: 96px;
	margin-bottom: 96px;
}

@media screen and (max-width: 767px) {
	#home .contentBody section {
		margin-top: 80px;
		margin-bottom: 80px;
	}
}

#home .contentBody:has(+ #supportWithDonation) > .bgGray:last-child {
	padding-bottom: 96px;
}

#home .contentBody:has(> .bgGray:last-child) + #supportWithDonation::before {
	background-color: transparent;
}

#home .contentBody + #supportWithDonation {
	margin-top: calc(792px * .4545 / 2 + 96px);
}

@media screen and (max-width: 767px) {
	#home .contentBody:has(+ #supportWithDonation) > .bgGray:last-child {
		padding-bottom: 60px;
	}
	
	#home .contentBody + #supportWithDonation {
		margin-top: calc((100vw - 40px) * .56 / 2 + 60px);
	}
}

/* keyvisual
-------------------------------------------------- */
#keyvisual {
	width: 100vw;
	margin-right: calc(-50vw - -50%);
	margin-left: calc(-50vw - -50%);
}

#keyvisual .splide__track {
	width: 100%;
	height: 600px;
	overflow: hidden;
	padding: 0 !important;
}

#keyvisual .splide__list {
	display: flex;
}

#keyvisual .splide__slide {
	width: 100%;
}

#keyvisual .splide__slide .top img {
	object-position: 50% 0;
}

#keyvisual .splide__slide .bottom img {
	object-position: 50% 100%;
}

#keyvisual .slideImg {
	height: 100%;
	overflow: hidden;
	position: relative;
}

#keyvisual .slideText {
	position: absolute;
	top: 50%;
	right: 12%;
	transform: translateY(-50%);
	max-width: 468px;
	width: 50%;
	max-height: 90%;
	margin: 0 auto;
	overflow: auto;
}
	
#keyvisual .slideText h2 {
	margin-bottom: 16px;
	color: #fff;
	font-size: var(--font-size40);
	font-weight: 700;
	line-height: 1.4;
}
	
#keyvisual .slideText p {
	margin-bottom: 0;
	color: #fff;
	font-size: var(--font-size18);
	line-height: 2.0;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
}

#keyvisual .slideText　p::after {
	content: '…';
	position: absolute;
	right: 20px;
	bottom: 0;
}

#keyvisual .slideText .btns {
	margin-top: 26px;
}

#keyvisual .slideText .btn {
	max-width: 330px;
}

#keyvisual .splide__arrow {
	width: 40px;
	height: 40px;
	top: calc(50% - 29px);
}

#keyvisual .splide__arrow::before {
	background-size: 11px;
}

#keyvisual .splide__arrow--prev {
	left: 20px;
}

#keyvisual .splide__arrow--next {
	right: 20px;
}

@media screen and (max-width: 1024px) {
	#keyvisual .slideText {
		right: 85px;
	}
}

#keyvisual .slideImg::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.42);
}

@media screen and (max-width: 767px) {
	#keyvisual .splide {
		margin: 0;
	}
	
	#keyvisual .splide__track {
		height: 165.5vw;
	}
	
	#keyvisual .splide__list {
		align-items: flex-start;
	}
	
	#keyvisual .slideImg {
		height: 165.5vw;
	}
	
	#keyvisual .slideText {
		top: auto;
		right: auto;
		bottom: 16px;
		transform: none;
		width: 100%;
		height: 248px;
		max-width: none;
		padding: 0 20px;
	}
	
	#keyvisual .slideText h2 {
		margin-bottom: 6px;
		font-size: var(--font-size28);
		line-height: 1.5;
	}
	
	#keyvisual .slideText p {
		font-size: var(--font-size16);
		line-height: 1.8;
	}
	
	#keyvisual .slideText .btns {
		margin-top: 10px;
	}
	
	#keyvisual .slideText .btn {
		max-width: 384px;
	}
	
	#keyvisual .slideText .btn a {
		min-height: 59px;
		font-size: var(--font-size14);
	}
	
	#keyvisual .splide__arrow {
		width: 33px;
		height: 33px;
		top: calc((100% - 288px) / 2);
	}
	
	#keyvisual .splide__arrow--prev {
		left: 10px;
	}
	
	#keyvisual .splide__arrow--next {
		right: 10px;
	}
}

/* What's New
-------------------------------------------------- */
#home .contentBody .news {
	margin-bottom: -10px;
}

#home .news .tablist .tab {
	min-height: calc(1.5em + 45px);
	border-bottom: 1px solid var(--borderLgray);
}

#home .news .tablist .tab.active {
	margin-top: 0;
	font-size: var(--font-size16);
}

#home .news .tabpanel {
	padding: 39px 0 0;
	border: 0;
	background-color: transparent;
}

#home .news .postMeta {
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

@media screen and (max-width: 767px) {
	#home .news .tablist {
		flex-wrap: wrap;
		gap: 8px;
	}
	
	#home .news .tablist .tab {
		flex: auto;
		width: calc((100% - 8px) / 2);
	}
}

/* Page Title
================================================== */
#pageTitle {
	margin-bottom: 72px;
	border-bottom: 1px solid var(--bgLgreen);
	background-color: var(--bgLgreen);
}

#pageTitle .inner {
	min-height: 109px;
	padding-top: 6px;
	padding-bottom: 5px;
	display: flex;
	align-items: center;
}

#pageTitle.withImg {
	margin-bottom: 88px;
	background-color: transparent;
	border-bottom: 0;
	position: relative;
}

#pageTitle.withImg .titleWrap {
	border-bottom: 1px solid var(--darkGreen);
	background-color: var(--darkGreen);
	position: absolute;
	width: 100%;
	max-height: 100%;
}

#pageTitle.withImg .titleWrap .inner {
	padding: 64px 0;
	min-height: 256px;
	align-items: flex-start;
}

#pageTitle.withImg h1 {
	margin-left: -20px;
	padding: 15px 35px;
	border: 1px solid #fff;
	background-color: #fff;
	color: var(--darkGreen);
	line-height: 1.4;
	letter-spacing: .04em;
	position: relative;
	z-index: 2;
}

#pageTitle.withImg h1:has(.subtitle) {
	max-width: calc(10.5em + 72px);
}

#pageTitle.withImg h1 .subtitle {
	display: block;
	margin-top: 12px;
	color: var(--textHeadline);
	font-size: var(--font-size18);
	font-weight: 600;
	line-height: 2.0;
}

#pageTitle.withImg .imgWrap {
	margin-left: calc(50vw - 600px + 204px);
	position: relative;
	z-index: 1;
}

#pageTitle.withImg .img {
	aspect-ratio: 1116 / 385;
	overflow: hidden;
}

#pageTitle.withImg .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 1280px) and (min-width: 768px) {
	#pageTitle.withImg .imgWrap {
		margin-left: calc(100% - 1036px);
	}
	
	#pageTitle.withImg .img {
		aspect-ratio: auto;
		height: 357px;
	}

	@media screen and (max-width: 1177px) {
		#pageTitle.withImg .imgWrap {
			margin-left: 12%;
		}
	}
}
	
@media screen and (max-width: 767px) {
	#pageTitle {
		margin-bottom: 56px;
	}

	#pageTitle .inner {
		min-height: 103px;
	}
	
	#pageTitle.withImg {
		margin-bottom: 48px;
	}
	
	#pageTitle.withImg .titleWrap {
		border-top: 1px solid var(--darkGreen);
		border-bottom: 0;
		background-color: transparent;
		position: relative;
	}
	
	#pageTitle.withImg .titleWrap .inner {
		min-height: auto;
		margin: 0;
		padding: 0;
	}
	
	#pageTitle.withImg h1 {
		margin-top: 0;
		margin-left: 0;
		padding: 10px 12px 6px;
	}
	
	#pageTitle.withImg h1:has(.subtitle) {
		max-width: none;
	}
	
	#pageTitle.withImg h1 .subtitle br {
		display: none;
	}
		
	#pageTitle.withImg .imgWrap {
		margin: 0 20px;
	}
	
	#pageTitle.withImg .imgWrap::before {
		content: '';
		position: absolute;
		top: 0;
		left: -20px;
		width: calc(100% + 40px);
		height: 50%;
		background-color: var(--darkGreen);
	}
	
	#pageTitle.withImg .img {
		width: 100%;
		aspect-ratio: 25 / 14;
		position: relative;
		z-index: 1;
	}
}

/* Parts
================================================== */
/* Succsess List
-------------------------------------------------- */
#main .success .splide {
	margin-top: 56px;
}

#main .success .listCol li {
	padding-top: 26px;
	padding-bottom: 32px;
}

#main .success .listCol li h3 {
	margin-bottom: 18px;
	font-size: var(--font-size24);
}

#main .success .listCol li h3 .corporation {
	display: block;
	font-size: var(--font-size16);
}

@media screen and (max-width: 767px) {
	#main .success .listCol li {
		padding-top: 26px;
		padding-bottom: 32px;
		font-size: var(--font-size14);
	}
	
	#main .success .listCol .btn a  {
		min-height: 59px;
	}
}

/* Process List
-------------------------------------------------- */
#main .process .listCol li {
	padding: 26px 18px 32px;
	background: none;
	font-size: var(--font-size14);
}

#main .process .listCol li h3 {
	display: flex;
	align-items: center;
	margin: -8px 0 8px;
	column-gap: .5em;
	font-size: var(--font-size20);
}

#main .process .listCol li h3 .number {
	color: #6c0;
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
}

@media screen and (max-width: 980px) and (min-width: 768px) {
	#main .process .listCol h3 {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Table of Contents with Accordion
-------------------------------------------------- */
#toc.accordion {
	max-width: 996px;
	margin: 64px auto;
}

#toc.accordion h2 {
	padding: 0;
	background-color: #fff;
	color: var(--textHeadline);
}

#toc.accordion button {
	padding: 12px 56px 12px 20px;
}

#toc.accordion button::before {
	content: none;
}

#toc.accordion button::after {
	right: 20px;
	width: 16px;
	height: 16px;
	border: 0;
	background: url(images/ico_menu.svg) no-repeat 50% 50% / 16px;
}

#toc.accordion button[aria-expanded="true"]::after {
	transform: none;
	background-image: url(images/ico_close.svg);
}

#toc.accordion ul {
	margin: 0;
	border-top: 1px solid var(--borderLgray);
	background-color: var(--bgLgray);
	font-weight: 400;
	display: none;
}

#toc.accordion li a {
	padding-right: 20px;
	padding-left: 42px;
	background-position: 20px calc(11px + .25em);
}

@media screen and (max-width: 767px) {
	#toc.accordion {
		margin-top: 32px;
	}
}

/* Table of Contents Sticky
-------------------------------------------------- */
#toc.sticky {
	transition: max-width .3s ease;
}

#toc.fixed {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: none;
	z-index: 80;
	margin-top: 0;
}

#toc.fixed li a.toc-active {
	background-color: var(--bgLgreen);
	color: var(--textHeadline);
	font-weight: 700;
}

@media screen and (min-width: 768px) {
	#toc.fixed button {
		padding-right: 40px;
		padding-left: 40px;
	}
	
	#toc.fixed button::after {
		right: 40px;
	}
	
	#toc.fixed li a {
		padding-right: 40px;
		padding-left: 62px;
		background-position: 40px calc(11px + .25em);
	}
}

@media screen and (min-width: 1280px) {
	#toc.fixed button {
		padding-right: calc(50vw - 600px);
		padding-left: calc(50vw - 600px);
	}
	
	#toc.fixed button::after {
		right: calc(50vw - 600px);
	}
	
	#toc.fixed li a {
		padding-right: calc(50vw - 600px);
		padding-left: calc(50vw - 600px + 22px);
		background-position: calc(50vw - 600px) calc(11px + .25em);
	}
}

/* modal
-------------------------------------------------- */
.modal_trigger {
	position: relative;
}

.modal_trigger::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 37px;
	height: 37px;
	border: 1px solid var(--borderBlack20);
	background: #fff url(images/ico_zoom.svg) no-repeat 50% 50%;
}

.modal_wrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
}

.modal_layer {
	height: 100%;
	background: rgba(0,0,0,.85);
	cursor: pointer;
}

.modal_container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	padding: 48px 48px 32px;
	background-color: #fff;
	text-align: center;
}

.modal_content {
	margin-bottom: 24px;
}

.modal_content img {
	width: auto;
	height: auto;
	max-width: calc(100vw - 176px);
	max-height: calc(100vh - 208px);
}

@media screen and (max-width: 767px) {
	.modal_container {
		padding: 24px;
	}
	
	.modal_content img {
		max-width: calc(100vw - 88px);
		max-height: calc(100vh - 184px);
	}
}

/* accordion
-------------------------------------------------- */
.accordion dd {
	display: none;
}

/* Archives
================================================== */
.newsList {
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
	list-style: none;
}

.newsList > li:not(:first-child) {
	padding-top: 24px;
}

.newsList > li:not(:last-child) {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--borderLgray);
}

.newsList > li,
.newsList > li .text {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	text-decoration: none;
}

.newsList > li .postMeta {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.newsList > li .postDate {
	margin-right: 16px;
	color: var(--textCaption);
}

.newsList > li .thumb {
	width: 144px;
	aspect-ratio: 144/80;
	overflow: hidden;
}

.newsList > li .thumb.pc {
	width: 176px;
	aspect-ratio: 176/100;
}

.newsList > li .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.newsList > li .title {
	flex: 1;
	text-decoration: underline;
}

.newsList > li:hover .title {
	text-decoration: none;
}

@media screen and (min-width: 768px) {
	.newsList > li .text {
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
	}
}

@media screen and (max-width: 767px) {
	.newsList > li,
	.newsList > li .text {
		column-gap: 16px;
	}
	
	.newsList > li .text {
		align-items: flex-start;
	}
	
	.newsList > li .thumb.sp {
		margin-top: .5em;
	}
}

.activityReport .newsList li .thumb.pc {
	width: 176px;
}

.activityReport .newsList li .text {
	flex: 1;
}

/* Category / Tag
-------------------------------------------------- */
.catList {
	margin: 80px 0;
	padding: 26px 32px 32px;
	border: 1px solid var(--borderLgray);
}

.catList h2 {
	margin-bottom: 24px;
	font-size: var(--font-size26);
}

.catList h3 {
	margin: 16px 0 6px;
	font-size: var(--font-size20);
}

@media screen and (max-width: 767px) {
	.catList {
		margin: 64px 0;
		padding: 18px 20px 20px;
	}
}

/* recommend
-------------------------------------------------- */
.recommend {
	margin-top: 64px;
}

/* Pagination
-------------------------------------------------- */
.pagination {
	margin-top: 48px;
}

.pagination ul {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.pagination a,
.pagination span.current {
	width: 2.5em;
	height: 2.5em;
	border: 1px solid var(--borderGray);
	background-color: #fff;
	color: var(--darkGreen);
	font-weight: 700;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pagination a:hover {
	background-color: var(--bgLgreen50);
}

.pagination span.current,
.pagination .current a {
	border-color: var(--darkGreen);
	background-color: var(--darkGreen);
	color: #fff;
	cursor: default;
}

.pagination a.next,
.pagination a.prev,
.pagination .next a,
.pagination .prev a {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 12px;
}

.pagination a.next,
.pagination .next a {
	background-image: url(images/ico_arrow1.svg);
}

.pagination a.prev,
.pagination .prev a {
	background-image: url(images/ico_arrow5.svg);
}

.pagination .disabled {
	display: none;
}

.pagination li.page {
	display: none;
}

.pagination li.current,
.pagination li.current + li.page,
.pagination li.current + li + li.page,
.pagination li.prev + li.current + li + li + li.page,
.pagination li.page:has(+ li.current),
.pagination li.page:has(+ li + li.current),
.pagination li.page:has(+ li + li + li.current + li.next) {
	display: block;
}

@media screen and (min-width: 768px) {
	.pagination .dots {
		font-size: var(--font-size24);
	}
}

/* Pickup
-------------------------------------------------- */
body.archive .pickup h2 {
	margin-bottom: 0;
	padding-top: 152px;
	padding-bottom: 60px;
	background: var(--darkGreen) url(images/ico_pickup.svg) no-repeat 50% 80px;
	color: #fff;
	font-family: 'Work Sans', sans-serif;
	font-size: 2.0625em;
	text-align: center;
	text-transform: uppercase;
}

body.archive .pickup:first-child h2 {
	margin-top: -72px;
}

body.archive .pickup .splide {
	margin-top: -48px;
}

body.archive .pickup .listCol .thumb {
	width: 56%;
}

body.archive .pickup .listCol .text {
	width: calc(44% - 40px);
}

@media screen and (max-width: 767px) {
	body.archive .pickup h2 {
		padding-top: 128px;
		padding-bottom: 32px;
		background-position: 50% 56px;
	}
	
	body.archive .pickup:first-child h2 {
		margin-top: -56px;
	}
	
	body.archive .pickup .splide {
		margin-top: -20px;
	}
	
	body.archive .pickup .listCol .thumb,
	body.archive .pickup .listCol .text {
		width: 100%;
	}
}

/* Recent Post
-------------------------------------------------- */
body.archive .recentInCat h2 {
	margin-top: 72px;
	text-align: center;
}

body.archive .recentInCat > h3 {
	margin-top: 48px;
	margin-bottom: 0;
	padding-top: 48px;
	padding-bottom: 64px;
	text-align: center;
}
	
body.archive .recentInCat > h3 {
	margin-top: 82px;
	position: relative;
}

body.archive .recentInCat > h3::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border: 4px solid var(--bgLgreen);
	border-radius: 50%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 64px;
}

body.archive .recentInCat > h3.climate-change::before {
	background-image: url(images/ico_climate.svg);
}

body.archive .recentInCat > h3.plastic::before {
	background-image: url(images/ico_plastic.svg);
}

body.archive .recentInCat > h3.ocean::before {
	background-image: url(images/ico_ocean.svg);
}

body.archive .recentInCat > h3.ecosystem::before,
body.archive .recentInCat > h3.biodiversity::before {
	background-image: url(images/ico_ecosystem.svg);
}

body.nuclear .recentInCat > h3::before {
	content: none;
}

body.archive .recentInCat .splide {
	margin-top: -24px;
}

body.archive .recentInCat > h4 {
	margin-top: 24px;
	text-align: center;
}

body.archive .recentInCat > h4 + .btns {
	margin-top: 24px;
}

@media screen and (max-width: 767px) {
	body.archive .recentInCat h2 {
		margin-top: 56px;
	}
	
	body.archive .recentInCat > h3 {
		margin-top: 74px;
	}
	
	body#report.archive .recentInCat > h3 {
		margin-top: 74px;
	}
}

/* Result top
-------------------------------------------------- */
#result .recentResult h2 {
	margin-bottom: 32px;
}

#result .recentResult > h3 {
	display: flex;
	gap: 16px;
	align-items: center;
	position: relative;
}

#result .recentResult > h3::before {
	content: '';
	width: 72px;
	height: 72px;
	min-width: 72px;
	background-color: var(--bgLgreen);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	border-radius: 50%;
}

#result .recentResult > h3.approach::before {
	background-image: url(images/ico_megaphone.svg);
}

#result .recentResult > h3.enactment::before {
	background-image: url(images/ico_cooperation.svg);
}

#result .recentResult > h3.citizens::before {
	background-image: url(images/ico_citizens.svg);
}

@media screen and (max-width: 767px) {
	#result .recentResult > h3::before {
		width: 64px;
		height: 64px;
		min-width: 64px;
	}
}

/* Article
================================================== */
#articleHeader {
	padding-top: 52px;
	margin-bottom: 72px;
}

#articleHeader h1 {
	margin-bottom: 26px;
	color: var(--darkGreen);
	font-size: var(--font-size40);
	line-height: 1.4;
}

#articleHeader .cats {
	margin-bottom: 24px;
}

#articleHeader .eyecatch {
	margin-bottom: 24px;
	/*
	aspect-ratio: 790/444;
	overflow: hidden;
	*/
}

#articleHeader .eyecatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#articleHeader .postMeta {
	display: flex;
	column-gap: 24px;
	font-size: var(--font-size14);
}

#articleHeader .postMeta .authorImg {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
}

#articleHeader .postMeta .metaText {
	flex: 1;
}

#articleHeader .postMeta .metaText > div {
	margin-bottom: 6px;
}

#articleHeader .postDate {
	color: var(--textCaption);
}

@media screen and (max-width: 767px) {
	#articleHeader {
		padding-top: 32px;
		margin-bottom: 56px;
	}
	
	#articleHeader h1 {
		font-size: var(--font-size30);
	}
	
	#articleHeader .eyecatch {
		margin-right: -20px;
		margin-left: -20px;
	}
}

.eyecatch + .lead {
	margin-top: 64px;
}

@media screen and (max-width: 767px) {
	.eyecatch + .lead {
		margin-top: 48px;
	}
}

.recruitingClosed {
	margin-bottom: 56px;
	padding: 17px 19px;
	border: 1px solid var(--borderArert);
	color: var(--textAlert);
	text-align: center;
}

@media screen and (max-width: 767px) {
	.recruitingClosed {
		margin-bottom: 32px;
	}
}

/* Post Footer
-------------------------------------------------- */
.postFooter {
	margin-bottom: 160px;
}

.postFooter aside {
	padding: 64px 0;
}

.postFooter aside:last-child {
	padding-bottom: 0;
}

.postFooter aside:not(:last-child) {
	border-bottom: 1px solid var(--borderLgray);
}

.postFooter h2 {
	color: var(--textHeadline);
	font-size: var(--font-size26);
	text-align: center;
}

.postFooter h2 .icon {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
}

.postFooter .continueRead ul {
	margin-bottom: 0;
}

.postFooter .continueRead li {
	padding-left: 0;
	background: none;
}

.postFooter .continueRead li:not(:first-child) {
	padding-top: 16px;
	border-top: 1px solid var(--borderLgray);
}

.postFooter .continueRead li:not(:last-child) {
	padding-bottom: 16px;
}

.postFooter .share .sns {
	display: flex;
	column-gap: 40px;
	justify-content: center
}

.postFooter .share .sns .external {
	position: absolute;
	width: 0;
	overflow: hidden;
}

.postFooter .writer .author {
	display: flex;
	gap: 24px 40px;
}

.postFooter .writer .authorImg {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	overflow: hidden;
}

.postFooter .writer .authorText {
	flex: 1;
}

.postFooter .writer .authorName {
	margin-bottom: 20px;
	font-size: var(--font-size18);
	font-weight: 700;
}

.postFooter .writer .authorText p {
	margin-bottom: 0;
}

@media screen and (max-width: 767px) {
	.postFooter {
		margin-bottom: 120px;
	}
	
	.postFooter aside {
		padding: 56px 0;
	}
	
	.postFooter .writer .author {
		flex-direction: column;
		align-items: center;
	}
	
	.postFooter .writer .authorImg {
		width: 200px;
		height: 200px;
	}
	
	.postFooter .writer .authorName {
		text-align: center;
	}
}

/* Event
-------------------------------------------------- */
dl.eventSummary {
	margin-bottom: 80px;
}

@media screen and (min-width: 768px) {
	dl.eventSummary .date br {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	dl.eventSummary dt {
		width: 35%;
	}
}

/* Pages common style
================================================== */
/* result-report/annual-report
-------------------------------------------------- */
.reportDocument .img {
	padding: 24px;
	border: 1px solid var(--borderLgray);
	background-color: #fff;
}

@media screen and (min-width: 768px) {
	.reportDocument .floatL {
		width: 37.2%;
	}
	
	.reportDocument .floatR {
		width: 57.5%;
	}
	
	.reportDocument .img {
		display: flex;
		justify-content: space-between;
	}
	
	.reportDocument .img img:first-child {
		width: 32.4%;
	}
	
	.reportDocument .img img:last-child {
		width: 64.8%;
	}
}

@media screen and (min-width: 768px) and (max-width: 900px) {
	.reportDocument .floatL,
	.reportDocument .floatR {
		width: 47.35%;
	}

	.reportDocument .img img:first-child {
		width: 100%;
	}

	.reportDocument .img img:last-child {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.reportDocument .img {
		max-width: 400px;
		margin: 0 auto 24px;
	}
	
	.reportDocument img {
		width: 100%;
	}
}

@media screen and (min-width: 768px) {
	.annual-report .data .breakdown {
		margin: 32px 0 64px;
	}

	.annual-report .data .breakdown .floatL {
		width: calc(42.5% - 48px);
	}

	.annual-report .data .breakdown .floatR {
		width: 57.5%;
	}
	
	.annual-report .data .column:has(.dataBox) {
		flex-wrap: wrap;
		justify-content: center;
	}

	.annual-report .data .dataBox {
		width: calc((100% - 48px) / 3);
		min-width: 332px;
	}
}

.annual-report .data .breakdown .img {
	margin-bottom: 24px;
	padding: 31px;
	border: 1px solid #fff;
	background-color: #fff;
	text-align: center;
}

.annual-report .data .breakdown .img img {
	width: revert-layer;
}
.annual-report .data .column:has(.dataBox) + .comment {
	margin-bottom: 0;
}

.annual-report .activityReport {
	margin-top: 72px;
}

.annual-report .activityReport .splide {
	margin-top: 32px;
}

.annual-report .activityReport .listCol h3 {
	font-size: var(--font-size18);
}

.annual-report .pastReport li {
	padding-left: 0;
	background: none;
}

.annual-report .pastReport li ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 48px;
}
	
.annual-report .pastReport li ul li {
	margin-left: 18px;
	text-indent: -18px;
	width: 262px;
}

.annual-report .pastReport h3 {
	margin-top: 50px;
}


.annual-report .pastReport li a {
	padding-left: 18px;
	background: url(images/ico_arrow1.svg) no-repeat 0 calc(.45em - 6px) / 11px;
	text-decoration: none;
}

.annual-report .pastReport li a:hover,
.annual-report .pastReport li a:active {
	text-decoration: underline;
}

.annual-report .pastReport .btns {
	margin-top: 60px;
}

@media screen and (max-width: 767px) {
	.annual-report .data .breakdown .img {
		padding: 11px;
	}
	
	.annual-report .activityReport {
		margin-top: 60px;
	}
	
	.annual-report .pastReport li ul li {
		width: 100%;
	}
}

/* act/work
-------------------------------------------------- */
#act.work .recruiting .listCol li {
	padding: 19px;
}

#act.work .recruiting h3 {
	font-size: var(--font-size18);
}

#act.work .recruiting h3 span {
	display: block;
	margin-bottom: 8px;
	color: var(--darkGreen);
	font-size: var(--font-size16);
}

#act.work .otherWays .column + .column {
	margin-top: 64px;
}

#act.work .closed {
	margin-top: 52px;
}

#act.work .closed h3 {
	font-size: var(--font-size26) !important;
}

#act.work .closed .newsList li {
	padding-bottom: 0;
	border-bottom: 0;
}

@media screen and (max-width: 767px) {
	#act.work .closed h3 {
		font-size: var(--font-size24) !important;
	}
	
	#act.work .closed .newsList li {
		align-items: flex-start;
	}
}

/* compornent
-------------------------------------------------- */
#component .contentBody > div:not([class^="wp-block"]),
#component #activities,
#component aside {
	margin-top: 72px;
}

@media screen and (max-width: 767px) {
	#component .contentBody > div:not([class^="wp-block"]),
	#component #activities,
	#component aside {
		margin-top: 56px;
	}
}

/* 404
-------------------------------------------------- */
#error .contentBody .search {
	margin-top: 64px;
}

#error .contentBody .search p {
	margin-bottom: .5em;
}

#error .contentBody .searchForm {
	margin: 0;
	width: 600px;
	max-width: 100%;
}

/* Breadcrumb
================================================== */
#breadcrumb {
	padding: 18px 0;
	border-top: 1px solid var(--borderLgray);
}

#breadcrumb ol {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size14);
}

#breadcrumb li:not(:first-child) {
	margin-left: .75em;
	padding-left: 1em;
	background: url(images/ico_arrow2.svg) no-repeat 0 .45em / .5em;
}

#breadcrumb li.home {
	text-transform: uppercase;
}

#breadcrumb li a:not([href]) {
	color: var(--textBlack);
	text-decoration: none;
}

/* Donate Btn / Page top
================================================== */
#fixedElement {
	right: 10px;
	z-index: 60;
	display: none;
	gap: 24px 34px;
	align-items: flex-end;
	justify-content: flex-end;
}

#fixedElement .donate {
	width: 384px;
	max-width: calc(100vw - 40px);
	position: relative;
}

#fixedElement .donate a {
	min-height: 68px;
	font-size: var(--font-size18);
	padding-right: 30px;
	background-position: calc(100% - 14px) 50%;
}

@media screen and (max-width: 480px) {
	#fixedElement {
		right: 20px;
		flex-direction: column-reverse;
		align-items: flex-end;
	}
}

#fixedElement .donate .close {
	position: absolute;
	top: -13px;
	right: -13px;
	width: 33px;
	height: 33px;
	border: 1px solid var(--borderBlack20);
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (hover: hover) {
	#fixedElement .donate .close:hover {
		background-color: var(--bgLgreen50);
	}
}

.pageTop a {
	display: block;
	width: 48px;
	height: 48px;
	border: 1px solid var(--borderBlack20);
	border-radius: 50%;
	background-color: #fff;
	position: relative;
}

.pageTop a::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(images/ico_arrow1.svg) no-repeat 50% 50% / 15px;
	transform: rotate(-90deg);
}

@media (hover: hover) {
	.pageTop a:hover {
		background-color: var(--bgLgreen50);
	}
}

/* Footer
================================================== */
#commonFooter {
	padding-top: 58px;
	border-top: 1px solid var(--darkGreen);
	background-color: var(--darkGreen);
	color: #fff;
}

#donate #commonFooter {
	padding-top: 0;
}

#commonFooter > .inner:first-child {
	display: flex;
	flex-direction: row-reverse;
	gap: 56px;
	justify-content: space-between;
}

@media screen and (max-width: 767px) {
	#commonFooter {
		padding-top: 60px;
	}
	
	#commonFooter > .inner:first-child {
		flex-direction: column;
		gap: 40px;
	}
}

#commonFooter .membersSection {
	width: 282px;
}

#commonFooter .mailmag {
	margin: 20px 0 30px;
	border: 2px solid #fff;
	background: url(images/img_mailmag.jpg) no-repeat 50% 50% / cover;
}

#commonFooter .mailmag a {
	display: block;
	padding: 12px;
	background-color: rgba(0,0,0,.40);
}

#commonFooter .mailmag p:first-child {
	padding-top: 100px;
	background: url(images/ico_mail-o_w.svg) no-repeat 50% 20px / 64px;
	color: #fff;
	font-size: var(--font-size18);
	font-weight: 600;
	text-align: center;
}

#commonFooter .mailmag .brCtrl span {
	display: block;
}

#commonFooter .mailmag .btns {
	margin-top: 22px;
}

#commonFooter .mailmag .btn span {
	min-height: 52px;
}

@media (hover: hover) {
	#commonFooter .mailmag a:hover {
		background-color: rgba(0,0,0,.55);
	}

	#commonFooter .mailmag a:hover .btn span {
		background-color: #f28900;
	}
}

#commonFooter .mypage {
	gap: 16px;
}

#commonFooter .mypage .btn {
	margin-top: 0;
}

@media screen and (max-width: 767px) {
	#commonFooter .membersSection {
		width: auto;
	}
	
	#commonFooter .mailmag {
		margin: 0 0 36px;
	}
	
	#commonFooter .mailmag .btn span {
		min-height: 62px;
	}
	
	#commonFooter .mypage {
		flex-direction: row;
		flex-wrap: nowrap;
	}
}

#commonFooter .sns {
	margin-top: 24px;
	text-align: center;
}

#commonFooter .sns p {
	font-size: var(--font-size18);
	font-weight: 600;
}

#commonFooter .sns ul {
	max-width: 248px;
	margin: 16px auto 0;
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 767px) {
	#commonFooter .sns {
		padding-bottom: 24px;
		border-bottom: 1px solid #336f33;
	}
}

#footNav {
	flex: 1;
}

#footNav > ul {
	columns: 2;
	gap: 38px;
	font-size: var(--font-size16);
	font-weight: 600;
}

#footNav li {
	margin-top: 12px;
}

#footNav > ul > li {
	margin-top: 20px;
}

#footNav > ul > li:not(:last-child):not(:nth-child(3)) {
	padding-bottom: 20px;
	border-bottom: 1px solid #336f33;
}

#footNav > ul > li:nth-child(3) {
	break-after: column;
}

#footNav > ul > li > ul.sub-menu {
	margin-top: 14px;
	margin-left: 8px;
	font-size: var(--font-size14);
	font-weight: 400;
}

#footNav > ul > li > ul.sub-menu li ul {
	margin-left: 12px;
}

#footNav li a,
#footNav li span {
	color: #fff;
}

#footNav li a[href] {
	display: inline-block;
	padding-left: 16px;
	background: url(images/ico_arrow4.svg) no-repeat 0 calc(.75em - 6px);
}

#footNav > ul > li > ul.sub-menu a {
	background-position: 0 calc(.75em - 5px);
	background-size: 8px;
	color: #ccdbcc;
}

#footNav li a[href]:hover {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	#footNav > ul {
		gap: 16px;
		font-size: var(--font-size14);
	}
	
	#footNav > ul > li > ul.sub-menu {
		font-size: var(--font-size12);
	}
}

#siteNav ul {
	margin: 82px 0 4px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-size: var(--font-size14);
	line-height: 1;
}

#siteNav li {
	margin-bottom: 24px;
}
	
#siteNav li:not(:last-child) {
	border-right: 1px solid #336f33;
}

#siteNav li a {
	display: inline-block;
	padding: 0 24px;
	color: #fff;
}

#siteNav li a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	#siteNav ul {
		margin: 60px -20px 0;
		justify-content: space-between;
		border-top: 1px solid #336f33;
	}
	
	 #siteNav li {
		width: 50%;
		margin-bottom: 0;
	}
		
	#siteNav li:not(:last-child) {
		border-right: 0;
		border-bottom: 1px solid #336f33;
	}
	
	#siteNav li:nth-child(odd) {
		border-right: 1px solid #336f33;
	}
	
	#siteNav li a {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;
		line-height: 1.5;
	}
}

#commonFooter .copyright {
	padding: 20px 0;
	border-top: 1px solid #003c00;
	background-color: #003c00;
	color: #fff;
	text-align: center;
	letter-spacing: .04em;
}

#commonFooter .copyright p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 24px;
}

#commonFooter .copyright svg {
	width: 1em;
	height: 1em;
	margin-right: .25em;
	vertical-align: middle;
}

#commonFooter .copyright small {
	font-size: var(--font-size14);
}

#commonFooter .copyright p > span {
	display: inline-block;
	color: #ccdbcc;
	font-size: var(--font-size12);
}

#commonFooter .copyright a {
	color: #ccdbcc;
	text-decoration: underline;
}

#commonFooter .copyright a:hover,
#commonFooter .copyright a:active {
	text-decoration: none;
}

/* Animation
================================================== */
.fadeRight {
	transform: translate(20px, 0);
	opacity: 0;
}

.fadeLeft {
	transform: translate(-20px, 0);
	opacity: 0;
}

.fadeUp {
	transform: translate(0, 20px);
	opacity: 0;
}

.fadeRight.show,
.fadeLeft.show,
.fadeUp.show {
	transform: translate(0);
	opacity: 1;
	transition-property: transform, opacity;
	transition-duration: 1s;
	transition-delay: .5s;
	transition-timing-function: ease-in-out;
}

@media screen and (max-width: 767px) {
	.fadeRight,
	.fadeLeft {
		transform: translate(0, 20px);
	}
}

@media screen and (min-width: 768px) {
	.fadeUpOrder > * {
		transform: translate(0, 20px);
		opacity: 0;
	}
	
	.fadeUpOrder.show > * {
		transform: translate(0);
		opacity: 1;
		transition-property: transform, opacity;
		transition-duration: 1s;
		transition-delay: .5s;
		transition-timing-function: ease-in-out;
	}
	
	.fadeUpOrder.show > *:nth-child(2) {
		transition-delay: .75s;
	}
	
	.fadeUpOrder.show > *:nth-child(3) {
		transition-delay: 1s;
	}
	
	.fadeUpOrder.show > *:nth-child(4) {
		transition-delay: 1.25s;
	}
	
	.fadeUpOrder.show > *:nth-child(5) {
		transition-delay: 1.5s;
	}
	
	.fadeUpOrder.show > *:nth-child(6) {
		transition-delay: 1.75s;
	}
}


/* Form
================================================== */
/* Form List
-------------------------------------------------- */
legend,
form > dl > dt,
dl.confirm > dt {
	width: 100%;
	font-size: var(--font-size22);
	font-weight: 700;
}

fieldset:not(:first-of-type) legend,
form > dl:not(:first-of-type),
form fieldset + dl,
form dl + fieldset legend,
dl.confirm > dt:not(:first-of-type) {
	padding-top: 30px;
	border-top: 1px solid var(--borderLgray);
}

form > dl,
dl.confirm {
	margin-bottom: 0;
}

fieldset:not(:last-child),
form > dl:not(:last-child) {
	padding-bottom: 40px;
}

fieldset:has(+ .submit),
fieldset:has(+ .btns),
form > dl:has(+ .submit),
form > dl:has(+ .btns) {
	padding-bottom: 0 !important;
}

fieldset:not(:first-child) legend {
	padding-top: 34px;
}

fieldset dl,
fieldset fieldset {
	margin: 18px 0 0;
}

fieldset + dl,
dl.confirm {
	margin-top: 0;
}

fieldset .alongside dd,
fieldset dd:last-child {
	margin-bottom: 0;
}

legend:has(+ input) {
	margin-bottom: 20px;
}

form dd {
	margin-top: 8px;
}

form dl:not(.alongside) > div:not(:first-child),
form dl:not(.alongside) > dt:not(:first-child) {
	margin-top: 20px;
}

dl.confirm > dt:not(:first-child) {
	margin-top: 32px !important;
}

form .confirm dd {
	margin-bottom: 0;
}

dl.confirm > dd,
dl.confirm > dd dt {
	margin-top: 18px;
}

form dl.alongside {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 24px;
}

form dl.alongside > div {
	width: calc((100% - 24px) / 2);
}

form .confirm dl.alongside:not(.equality) > div {
	width: auto;
}

form .confirm dl.alongside dt {
	margin-top: 0;
}

form .widthHalf dt,
form .widthHalf dd,
form dd.widthHalf {
	width: calc((100% - 24px) / 2);
}

form .widthQuarter dt,
form .widthQuarter dd,
form dd.widthQuarter {
	width: 180px;
}

form dt label:has(.required) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

form .required {
	padding: 3px 5px;
	background-color: var(--textAlert);
	color: #fff;
	font-size: var(--font-size12);
	line-height: 1;
}

@media screen and (max-width: 767px) {
	legend,
	form > dl > dt,
	dl.confirm > dt {
		font-size: var(--font-size20);
	}
	
	fieldset:not(:first-of-type) legend,
	form > dl:not(:first-of-type),
	form fieldset + dl,
	form dl + fieldset legend,
	dl.confirm > dt:not(:first-of-type) {
		padding-top: 22px;
	}
	
	fieldset:not(:last-child),
	form > dl:not(:last-child) {
		padding-bottom: 32px;
	}
	
	fieldset:not(:first-child) legend {
		padding-top: 26px;
	}
	
	dl.confirm > dt:not(:first-child) {
		margin-top: 22px !important;
	}
	
	dl.confirm > dd {
		margin-top: 10px;
	}
	
	form dl.alongside:not(.equality) > div {
		width: 100%;
	}
	
	form .widthHalf dt,
	form .widthHalf dd {
		width: 100%;
	}
	
	form .widthQuarter dt,
	form .widthQuarter dd {
		width: 180px;
	}
	
	.box:has(form),
	.box:has(.confirm) {
		padding: 24px 20px 32px;
	}
	
	form .btns {
		margin-top: 32px;
	}
}

form label em {
	font-size: var(--font-size24);
	font-style: normal;
}

form .note {
	margin: 12px 0;
	color: var(--textCaption);
	font-size: var(--font-size14);
}

form .note:last-child {
	margin-bottom: 0;
}

form label .note {
	width: 100%;
	margin: -2px 0 0;
	display: block;
	font-weight: 400;
}

.radioBtn,
.checkboxBtn {
	display: flex;
	gap: 24px 16px;
}

.radioBtn.vertical,
.checkboxBtn.vertical {
	flex-direction: column;
}

.radioBtn.wrap,
.checkboxBtn.wrap {
	flex-wrap: wrap;
}

.radioBtn.wrap > div,
.checkboxBtn.wrap > div {
	width: calc((100% - 16px) / 2);
}

.radioBtn label,
.checkboxBtn label {
	flex: 1;
}

@media screen and (max-width: 767px) {
	.radioBtn,
	.checkboxBtn {
		flex-direction: column;
	}
	
	.radioBtn.row,
	.checkboxBtn.row {
		flex-direction: row;
	}
	
	.radioBtn.wrap > div,
	.checkboxBtn.wrap > div {
		width: 100%;
	}
}

.radioGroup > div,
.checkboxGroup > div {
	margin-top: 8px;
}

input[value="other_price"] + label {
	display: none !important;
}

.errorMsg {
	color: var(--textAlert);
}

span.errorMsg {
	display: block;
	margin-top: 8px;
	font-size: var(--font-size14);
}

.otherPrice {
	margin-top: 12px;
	display: flex;
	align-items: center;
}

.otherPrice input[type="text"] {
	width: calc(100% - 4em);
	max-width: 364px;
	margin-right: .5em;
}

.submit {
	flex-direction: row-reverse;
	gap: 24px;
}

.submit .btn {
	margin: 0;
	max-width: calc((100% - 24px) / 2);
}

@media screen and (max-width: 767px) {
	.submit {
		flex-direction: column;
	}
	
	.submit .btn {
		margin: 0 auto;
		max-width: 384px;
	}
}

/* Form Control
-------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
	max-width: 100%;
	padding: 11px 15px;
	border: 1px solid var(--borderGray);
	background-color: #fff;
	font-size: var(--font-size16);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
textarea {
	width: 100%;
}

textarea {
	height: 8em;
}

input[type="checkbox"],
input[type="radio"] {
	position: absolute;
	white-space: nowrap;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	margin: -1px;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
	display: inline-block;
	padding-left: 30px;
	position: relative;
	cursor: pointer;
}

input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
	content: '';
	position: absolute;
	left: 0px;
	height: 20px;
	width: 20px;
	border: 1px solid var(--borderGray);
	background-color: #fff;
}

input[type="checkbox"] + label::before {
	top: calc(50% - 10px);
	border-radius: 4px;
}

input[type="radio"] + label::before {
	top: calc(50% - 10px);
	border-radius: 50%;
}

input[type="checkbox"]:focus-visible + label::before,
input[type="radio"]:focus-visible + label::before {
	border: 1px solid var(--borderArert);
}

input[type="checkbox"]:checked + label::before,
input[type="radio"]:checked + label::before {
	border-color: var(--darkGreen);
}

input[type="checkbox"]:checked + label::after,
input[type="radio"]:checked + label::after {
	content: '';
	position: absolute;
}

input[type="checkbox"]:checked + label::after {
	top: calc(50% - 5px);
	left: 4.5px;
	height: 7px;
	width: 11px;
	border: 3px solid var(--darkGreen);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}

input[type="radio"]:checked + label::after {
	top: calc(50% - 4px);
	left: 6px;
	height: 8px;
	width: 8px;
	border: 4px solid var(--darkGreen);
	border-radius: 50%;
}

.radioBtn input[type="radio"] + label,
.checkboxBtn input[type="checkbox"] + label {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 52px;
	padding: 11px 15px 11px 48px;
	border: 1px solid var(--borderGray);
	background-color: var(--white);
	transition: all .2s ease;
}

.radioBtn input[type="radio"]:focus-visible + label,
.checkboxBtn input[type="checkbox"]:focus-visible + label {
	margin: -1px;
	border-width: 2px;
	border-color: var(--textImportant) !important;
}

.radioBtn input[type="radio"] + label:before,
.checkboxBtn input[type="checkbox"] + label:before {
	top: calc(11px + .9em - 10px);
	left: 16px;
}

.radioBtn input[type="radio"]:checked + label,
.checkboxBtn input[type="checkbox"]:checked + label {
	border-color: var(--darkGreen);
	background-color: var(--darkGreen);
	color: #fff;
}

.radioBtn input[type="radio"]:checked + label::after {
	top: calc(11px + .9em - 4px);
	left: 22px;
}

.checkboxBtn input[type="checkbox"]:checked + label::after {
	top: calc(11px + .9em - 5px);
	left: 21px;
}

span:has(select) {
	display: inline-block;
	width: 100%;
	position: relative;
	background-color: #fff;
}

span:has(select)::after {
	content: '';
	position: absolute;
	top: calc(50% - 3px);
	right: 16px;
	width: 12px;
	height: 12px;
	border: 6px solid transparent;
	border-top-color: var(--textCaption);
	z-index: 1;
}

@media (-ms-high-contrast:active) {
	span:has(select)::after {
		content: '\25BC';
		transform: scaleY(.625);
		top: calc(50% - .625em);
		border: 0;
	}
}

span:has(select) select {
	width: 100%;
	padding-right: 42px;
	position: relative;
	background-color: transparent;
	z-index: 2;
}

input::placeholder,
textarea::placeholder {
	color: #aaa;
}

input:disabled,
select:disabled,
textarea:disabled {
	background-color: #ededed;
	color: #6a6a6a;
}

input[type="radio"]:disabled + sapn::before,
input[type="checkbox"]:disabled + span::before {
	background-color: #ededed;
}

input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span {
	cursor: default;
}

::placeholder {
	color: #767676;
}

:disabled::placeholder,
.error::placeholder {
	color: #6a6a6a;
}

input.error,
select.error,
textarea.error {
	border-width: 2px;
	border-color: var(--textAlert);
}

@media (-ms-high-contrast:active) {
	input.error,
	select.error,
	textarea.error,
	input.wpcf7-not-valid,
	select.wpcf7-not-valid,
	textarea.wpcf7-not-valid {
		border-width: 2px;
	}
}

.error input[type="radio"] + span::before,
.error input[type="checkbox"] + span::before,
.wpcf7-not-valid input[type="radio"] + span::before,
.wpcf7-not-valid input[type="checkbox"] + span::before {
	border-color: var(--textAlert);
}

/* Donate Form
-------------------------------------------------- */
form.donateForm fieldset {
	padding-bottom: 0;
}

form.donateForm .donateCourse {
	margin-top: 26px;
}

form.donateForm .radioBtn {
	gap: 12px 16px;
}

form.donateForm .radioBtn input[type="radio"] + label {
	min-height: 72px;
	border-color: var(--darkGreen);
	color: var(--darkGreen);
	font-weight: 700;
}

form.donateForm .radioBtn input[name="optType"] + label {
	min-height: 84px;
}

form.donateForm .radioBtn input[type="radio"]:checked + label {
	color: #fff;
}

form.donateForm .radioBtn input[type="radio"] + label:before {
	top: calc(50% - 10px);
}

form.donateForm .radioBtn input[type="radio"]:checked + label::after {
	top: calc(50% - 4px);
}

form.donateForm .otherPrice input {
	padding-top: 17px;
	padding-bottom: 17px;
}

form.donateForm .btns {
	margin-top: 32px;
}

@media screen and (max-width: 767px) {
	form.donateForm label em {
		font-size: var(--font-size22);
	}
	
	#donateForm form.donateForm .radioBtn input[type="radio"] + label {
		padding-right: 11px;
	}
	
	#donateForm form.donateForm label em {
		font-size: var(--font-size20);
	}
}

/* My Page
================================================== */
/* mypage all
-------------------------------------------------- */
#mypage .contentBody {
	margin-bottom: 160px;
}

#mypage .contentBody:has(+ .mypageMenu) {
	margin-bottom: 80px;
}

#mypage .contentBody:not(.narrow) {
	margin-bottom: 0;
}

#mypage .mypageMessage:has(+ section) {
	margin-bottom: 0;
}

#mypage section {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 80px;
	padding-bottom: 80px;
}

#mypage .mypageMessage + section {
	padding-top: 66px;
}

#mypage section h2 {
	margin-top: -8px;
}

@media screen and (max-width: 767px) {
	#mypage .contentBody {
		margin-bottom: 64px;
	}
	
	#mypage .contentBody:has(+ #breadcrumb) {
		margin-bottom: 80px;
	}
	
	#mypage section {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	
	#mypage .mypageMessage + section {
		padding-top: 52px;
	}
}

#mypage table tbody tr:nth-child(2n) {
	background-color: var(--bgLgray);
}

@media screen and (max-width: 767px) {
	#mypage .titleLeft table {
		table-layout: fixed;
	}
}

#mypage #main .mypageMenu:not(.registration) {
	padding-bottom: 136px;
}

#mypage .mypageMenu .btns {
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0;
}

#mypage .mypageMenu .btns li {
	padding-left: 0;
	background: none;
	flex: none;
	width: calc((100% - 48px) / 3);
}
	
#mypage .mypageMenu .btns a {
	min-height: 72px;
	padding-top: 10px ;
	padding-bottom: 10px;
}

#mypage .mypageMenu .redistInfo a,
#mypage .mypageMenu .donateHistory a,
#mypage .mypageMenu .creditCard a {
	padding-left: calc(8% + 48px);
	position: relative;
}

#mypage .mypageMenu .redistInfo a::before,
#mypage .mypageMenu .donateHistory a::before,
#mypage .mypageMenu .creditCard a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 8%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}

#mypage .mypageMenu .redistInfo a::before {
	background-image: url(images/ico_info.svg);
}

#mypage .mypageMenu .donateHistory a::before {
	background-image: url(images/ico_gift.svg);
}

#mypage .mypageMenu .creditCard a::before {
	background-image: url(images/ico_card.svg);
}
	
@media screen and (max-width: 767px) {
	#mypage #main .mypageMenu {
		padding-bottom: 72px;
	}
	
	#mypage #main .mypageMenu:not(.registration) {
		padding-bottom: 72px;
	}

	#mypage .mypageMenu .btns li {
		width: 384px;
	}
	
	#mypage .mypageMenu .redistInfo a,
	#mypage .mypageMenu .donateHistory a,
	#mypage .mypageMenu .creditCard a {
		padding-left: 63px;
	}
	
	#mypage .mypageMenu .redistInfo a::before,
	#mypage .mypageMenu .donateHistory a::before,
	#mypage .mypageMenu .creditCard a::before {
		left: 15px;
	}
}

#mypage form .showPass {
	margin-top: 12px;
}

/* login
-------------------------------------------------- */
@media screen and (min-width: 464px) {
	#mypage .login,
	#mypage .reset {
		padding-right: calc((100% - 384px) / 2);
		padding-left: calc((100% - 384px) / 2);
	}
}

#mypage .login form dl,
#mypage .reset form dl {
	margin: 0;
	padding-bottom: 0;
}

#mypage .login form dt,
#mypage .reset form dt {
	font-size: var(--font-size16);
}

#mypage .login form dt:not(:first-child),
#mypage .reset form dt:not(:first-child) {
	margin-top: 28px;
}

#mypage .login form ul.forget {
	margin-top: 24px;
}

#mypage .login form ul.forget li {
	padding-left: 0;
	background: none;
	margin-bottom: 4px;
	margin-left: 20px;
	text-indent: -20px;
}

#mypage .login form ul.forget a {
	padding-left: 20px;
	background: url(images/ico_arrow1.svg) no-repeat 0 50%;
	text-decoration: none;
}

#mypage .login form .btns,
#mypage .reset form .btns {
	margin-top: 32px;
}

/* top
-------------------------------------------------- */
#mypage .welcom {
	margin: 0 0 -10px;
}

#mypage .registration .btns a {
	min-height: 77px;
	font-size: var(--font-size18);
}

#mypage .cando .box h3 {
	margin-bottom: 18px;
	font-size: var(--font-size18);
}

#mypage .volunteerParticipation {
	margin-top: 40px;
	padding: 40px 0;
	border-top: 1px solid var(--borderLgray);
	display: flex;
	gap: 24px 32px;
	justify-content: center;
	align-items: center;
}

#mypage .volunteerParticipation h3 {
	margin: 0;
	min-height: 64px;
	display: flex;
	align-items: center;
	padding-left: 88px;
	position: relative;
}
	
#mypage .volunteerParticipation h3::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 68px;
	height: 68px;
	border: 2px solid var(--darkGreen);
	border-radius: 50%;
	background: url(images/ico_volunteer.svg) no-repeat 50% 50%;
}

#mypage .volunteerParticipation .btns {
	margin: 0;
}

@media screen and (max-width: 767px) {
	#mypage .volunteerParticipation {
		padding: 0;
		border-top: 0;
		flex-direction: column;
	}
	
	#mypage .volunteerParticipation h3 {
		padding-left: 0;
		padding-top: 80px;
		background-position: 50% 0;
	}
	
	#mypage .volunteerParticipation h3::before {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* donate info
-------------------------------------------------- */
#mypage .ontimeDonate td:last-child {
	text-align: right;
}

#mypage .ontimeDonate .total {
	margin-top: 20px;
}

#mypage .ontimeDonate .total th {
	background-color: var(--bgLgreen);
}

#mypage .ontimeDonate .total td {
	font-size: var(--font-size18);
	font-weight: 700;
}

@media screen and (max-width: 767px) {
	#mypage .ontimeDonate tfoot th,
	#mypage .ontimeDonate tfoot td {
		font-size: var(--font-size16);
	}
}

/* activity info
-------------------------------------------------- */
#mypage .event table .date {
	color: var(--textCaption);
	font-size: var(--font-size14);
}

#mypage .event table li {
	padding-left: 0;
	background: none;
	margin-left: 18px;
	text-indent: -18px;
}

#mypage .event table li a {
	padding-left: 18px;
	background: url(images/ico_arrow1.svg) no-repeat 0 calc(.45em - 6px) / 11px;
	text-decoration: none;
}

#mypage .event table li a:hover,
#mypage .event table li a:active {
	text-decoration: underline;
}

/* Donate
================================================== */
#donate  #pageTitle {
	margin-bottom: 80px;
}

#donate .contentBody {
	margin-bottom: 80px;
}

@media screen and (max-width: 767px) {
	#donate  #pageTitle {
		margin-bottom: 20px;
	}
	
	#donate .contentBody {
		margin-bottom: 64px;
	}
}

#donate .progress ol {
	padding-left: 0;
	list-style: none;
	margin: 0 0 56px;
	display: flex;
	gap: 30px;
	justify-content: space-between;
	counter-reset: num;
}

#donate .progress li {
	flex: 1;
	padding: 7px 12px 12px;
	border: 1px solid var(--darkGreen);
	background-color: #fff;
	color: var(--textHeadline);
	font-size: var(--font-size18);
	font-weight: 700;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
}

#donate .progress li::before {
	counter-increment: num;
	content: '0' counter(num);
	color: var(--darkGreen);
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	font-size: var(--font-size24);
}

#donate .progress li.current {
	background-color: var(--darkGreen);
	color: #fff;
}

#donate .progress li.current::before {
	color: #fff;
}

#donate .progress li:not(:last-child)::after {
	content: '';
	position: absolute;
	top: calc(50% - 6px);
	left: calc(100% + 14px);
	border: 6px solid transparent;
	border-left-color: var(--darkGreen);
}

@media screen and (max-width: 767px) {
	#donate .progress ol {
		margin-bottom: 46px;
		gap: 22px;
	}
	
	#donate .progress li {
		padding: 0 12px 5px;
		font-size: var(--font-size14);
	}
	
	#donate .progress li::before {
		font-size: var(--font-size20);
	}
	
	#donate .progress li:not(:last-child)::after {
		left: calc(100% + 10px);
	}
}

#donate h2 .step {
	color: var(--darkGreen);
	font-size: var(--font-size26);
}
	
#donate h2 .step em {
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	font-size: var(--font-size32);
	font-style: normal;
}

#donate .submit input {
	min-height: 72px;
}

/* input
-------------------------------------------------- */
#donate .selectType {
	gap: 16px;
}

#donate .selectType .btn a {
	min-height: 120px;
	padding-left: 40px;
	font-size: var(--font-size22);
	justify-content: flex-start;
	gap: 30px;
}

#donate .selectType .btn a::before {
	content: '';
	min-width: 72px;
	height: 72px;
	border: 1px solid #fff;
	border-radius: 50%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#donate .selectType .btn.optType1 a::before {
	background-image: url(images/ico_monthly.svg);
}

#donate .selectType .btn.optType2 a::before {
	background-image: url(images/ico_once.svg);
}

#donate .document {
	margin-top: 64px;
	padding: 32px 32px 40px;
}

#donate .document h3 {
	margin-bottom: 12px;
}

#donate .document .btns {
	margin-top: 16px;
}

#donate .document .btns a {
	min-height: 59px;
	font-size: var(--font-size14);
}

@media screen and (max-width: 767px) {
	#donate .selectType {
		margin-top: 30px;
	}
	
	#donate .selectType .btn a {
		font-size: var(--font-size20);
	}
	
	#donate .document {
		padding: 20px 20px 24px;
	}
}

@media screen and (max-width: 390px) {
	#donate .selectType .btn a {
		padding-left: 16px;
		gap: 16px;
	}
}

/* once / monthly
-------------------------------------------------- */
#donate .donateUnit {
	padding-bottom: 0;
}

#donate .donateUnit .unit {
	margin-bottom: 24px;
	padding: 20px 16px;
	border: 1px solid var(--darkGreen);
	display: flex;
	gap: 0 16px;
	justify-content: space-between;
	color: var(--darkGreen);
	transition: color .3s ease, background .3s ease;
}

#donate .donateUnit .unit:has(input:checked) {
	background-color: var(--darkGreen);
	color: #fff;
}
	
#donate .donateUnit .unit label {
	margin-top: -0.5em;
	font-weight: 700;
}

#donate .donateUnit .unit label em {
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	font-size: var(--font-size32);
}

#donate .donateUnit .unit .text {
	flex: 1;
}

#donate .donateUnit .unit .img {
	width: 265px;
	aspect-ratio: 265/149;
	overflow: hidden;
}

#donate .donateUnit .unit .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#donate .otherPrice {
	margin-top: 0;
}
	
#donate .otherPrice input {
	min-height: 60px;
	width: 13em;
}

@media screen and (max-width: 767px) {
	#donate .donateUnit .unit {
		margin-bottom: 16px;
		flex-direction: column;
	}
	
	#donate .donateUnit .unit .img {
		width: 100%;
		aspect-ratio: 318/127;
	}
		
	#donate .once .otherPrice input {
		width: calc(100% - 4.5em);
	}
		
	#donate .monthly .otherPrice input {
		width: calc(100% - 3.75em);
	}
}

/* data
-------------------------------------------------- */
#donate a.mypageLogin {
	padding-left: 20px;
	background: url(images/ico_arrow1.svg) no-repeat 0 50%;
	text-decoration: none;
}

#donate a.mypageLogin:hover,
#donate a.mypageLogin:active {
	text-decoration: underline;
}

#donate .data .birthday {
	width: fit-content;
}

#donate .data .birthday dd {
	display: flex;
	gap: 12px;
}

#donate .data .birthday dd .select,
#donate .data .birthday dd input {
	width: calc(100% - 1.5em);
}

/* payment
-------------------------------------------------- */
#donate .selectedAmount {
	margin-bottom: 32px;
	padding: 16px;
	border: 1px solid var(--bgLgray);
	background-color: var(--bgLgray);
}

#donate .selectedAmount dt {
	font-size: var(--font-size22);
}

#donate .selectedAmount dl dt {
	font-size: var(--font-size14);
}

#donate .selectedAmount dl dd {
	margin-top: 0;
}


#donate .payment .radioBtn {
	row-gap: 0;
}

#donate .payment .radioBtn > label:not(:first-of-type) {
	margin-top: 24px;
}

#donate .payment .radioBtn > label {
	position: relative;
}

#donate .payment .radioBtn > label .toggle::before,
#donate .payment .radioBtn > label .toggle::after {
	content: '';
	position: absolute;
}

#donate .payment .radioBtn > label .toggle::before {
	top: calc(50%);
	right: 16px;
	width: 13px;
	border-bottom: 1px solid var(--darkGreen);
}

#donate .payment .radioBtn > label .toggle::after {
	top: calc(50% - 6px);
	right: 22px;
	height: 13px;
	border-right: 1px solid var(--darkGreen);
	transition: transform .3s ease;
}

#donate .payment .radioBtn > :checked + label .toggle::before {
	border-bottom-color: #fff;
}

#donate .payment .radioBtn > :checked + label .toggle::after {
	border-right-color: #fff;
	transform: rotate(90deg);
}

#donate .payment .subItem {
	border: 1px solid var(--borderGray);
	background-color: var(--bgLgreen);
}

#donate .payment .subItem input[type="radio"] + label {
	border: 0;
	background-color: transparent;
	color: var(--textBody);
}

#donate .payment .subItem input[type="radio"] + label:not(:first-of-type) {
	border-top: 1px solid var(--borderGray);
}

#donate .payment .subItem p {
	font-size: var(--font-size14);
	margin: 11px 15px;
}

#donate .payment .subItem label + p {
	margin-top: -6px;
}

#donate .payment .radioBtn > :checked + label + .subItem,
#donate .payment .payment3 > :checked + label + p {
	display: block !important;
}

#donate .cardInfo {
	padding: 36px 48px;
	border-bottom: 1px solid var(--borderGray);
	background-color: var(--bgLgray);
}

#donate .cardInfo dl {
	margin-top: 0;
}

#donate .expirationDate {
	display: flex;
	gap: 13px;
	align-items: center;
}
	
#donate .expirationDate .select + label {
	font-weight: 700;
}

#donate .expirationDate .select:not(:first-child) {
	margin-left: 3px;
}

#donate input#cvv {
	width: 148px;
}

@media screen and (max-width: 767px) {
	#donate .cardInfo {
		padding: 16px 16px 24px;
	}
}

#donate .payment .submit {
	flex-direction: row;
	justify-content: flex-end;
}

@media screen and (min-width: 768px) {
	#donate .payment .submit .back {
		order: 1;
	}
	
	#donate .payment .submit .btn:nth-child(1) {
		order: 2;
	}
	
	#donate .payment .submit .btn:nth-child(2) {
		order: 3;
	}
}

#donate .thanks h3 {
	margin-top: 64px;
	padding-left: 96px;
	font-size: var(--font-size20);
	position: relative;
}

#donate .thanks h3::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--bgLgreen) url(images/ico_earth.svg) no-repeat 50% 50%;
}

@media screen and (max-width: 767px) {
	#donate .thanks h3 {
		margin-top: 52px;
	}
}

/* paymentinfo
-------------------------------------------------- */
#donate .paymentinfo .cardInfo {
	padding: 0;
	border-bottom: 0;
	display: flex;
	gap: 16px 40px;
}

#donate .paymentinfo .cardInfo h3 {
	margin-bottom: 0;
	font-size: var(--font-size22);
	flex: 1;
}

#donate .paymentinfo .cardInfo dl {
	width: 456px;
	max-width: 68%;
	margin: 0;
}

@media screen and (max-width: 767px) {
	#donate .paymentinfo .cardInfo {
		flex-direction: column;
	}
	
	#donate .paymentinfo .cardInfo dl {
		width: 100%;
		max-width: none;
	}
}

/* confirm
-------------------------------------------------- */
#donate dl.confirm dl dt {
	font-size: var(--font-size14);
}

#donate dl.confirm dl dd {
	margin-top: 0;
}

/* complete
-------------------------------------------------- */
#donate .complete {
	gap: 32px;
	margin-bottom: 64px;
}

#donate .complete > * {
	flex: 1;
}

#donate .complete h3 {
	margin-bottom: 14px;
	font-size: var(--font-size24);
}

#donate .share {
	margin-top: 56px;
}

#donate .share h2 {
	margin-bottom: 18px;
}

#donate .share p {
	font-size: var(--font-size18);
	font-weight: 700;
	line-height: 1.5;
}

#donate .share .sns {
	display: flex;
	column-gap: 56px;
	justify-content: center;
	margin-top: 58px;
}

#donate .share .sns li {
	padding-left: 0;
	background: none;
}

@media screen and (max-width: 767px) {
	#donate .complete {
		margin-bottom: 48px;
	}
	
	#donate .complete h3 {
		text-align: center;
	}
	
	#donate .share .sns {
		column-gap: 40px;
	}
	
	#donate .share .sns li {
		width: 32px;
		height: 32px;
	}
}

/* privacy
-------------------------------------------------- */
#donate .privacy {
	padding: 26px 0 40px;
	border-top: 1px solid var(--borderLgray);
}

#donate .privacy > p {
	margin-bottom: 8px;
	color: var(--textAlert);
	font-size: var(--font-size14);
}

#donate .privacy .box {
	margin: 0 0 16px;
	padding: 5px 1px;
	background-color: #fff;
}

#donate .privacy .scrollInner {
	padding: 5px 15px;
	height: 240px;
	overflow: auto;
	scrollbar-color: var(--borderLgray) transparent;
}

#donate .privacy strong {
	color: var(--textBody);
}

#donate .privacy ol {
	margin-top: 0;
}

#donate .privacy ol > li {
	margin-top: .5em;
}

#donate .privacy ol > li ul {
	margin-top: 0;
}

#donate .privacy ol > li ul li {
	background-image: url(images/marker3.svg);
}

/* Adminbar
================================================== */
#wpadminbar {
	height: 6px !important;
	overflow: hidden;
	opacity: 0.1;
	transition: all 0.3s ease-in-out;
}

#wpadminbar:hover {
	height: auto !important;
	filter: alpha(opacity=100);
	opacity: 1;
}