@charset 'utf-8';

/* common
------------------------------------------------ */
.community-supporters > .wrap { max-width: 800px; }

@media only screen and (max-width: 768px) {
	.community-supporters .wrap { padding: 0 20px; }
}

/* category
------------------------------------------------ */
.community-supporters-category { display: grid; gap: 20px; margin-bottom: 40px; }
.community-supporters-category__lists { display: grid; gap: 20px; grid-template-columns: repeat(2, calc(50% - (20px / 2))); }
.community-supporters-category__lists__item { text-align: center; font-size: 1.4rem; font-weight: 700; line-height: 1.4; }
.community-supporters-category__lists__item > a { display: flex; justify-content: center; align-items: center; padding: 14px 10px; width: 100%; height: 100%; border: 1px solid #002D6A; text-decoration: none; color: #002D6A; }
.community-supporters-category__lists__item.is-active > a { background-color: #002D6A; color: #fff; }

@media only screen and (min-width: 769px) {
	.community-supporters-category { gap: 20px; margin-bottom: 60px; }
	.community-supporters-category__lists { gap: 20px; grid-template-columns: repeat(3, calc((100% / 3) - (20px / (3 / 2)))); }
	.community-supporters-category__lists__item { font-size: 1.6rem; }
	.community-supporters-category__lists__item > a { padding: 14px 10px; }
}

/* lists
------------------------------------------------ */
.community-supporters-lists { display: grid; row-gap: 10px; }
.community-supporters-lists__item { font-size: 1.6rem; line-height: 1.2; }
.community-supporters-lists__item > a { display: inline-block; position: relative; padding-left: 16px; text-decoration: none; vertical-align: top; color: #000; }
.community-supporters-lists__item > a::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 12px; background: url(../../img/icon/arrow2.png) no-repeat center center; background-size: 100% 100%; }

@media only screen and (min-width: 769px) {
	.community-supporters-lists { row-gap: 30px; column-gap: 20px; grid-template-columns: repeat(2, calc(50% - (20px / 2))); }
	.community-supporters-lists__item { font-size: 1.8rem; }
}

/* none
------------------------------------------------ */
.community-supporters-none { font-size: 1.6rem; line-height: 1.2; text-align: center; }

@media only screen and (min-width: 769px) {
	.community-supporters-none { font-size: 1.8rem; }
}