@charset "UTF-8";

:root {
	--bgblue: #E4EBF4;
	--white: #ffffff;
	--footergray: #484C50;
	--yellow1: #F8E358;
	--yellow2: #FFE329;
	--black: #333333;
	--gray: #666666;
	--gray-dd: #DDDDDD;
}

html {}
body {
	background-color: var(--bgblue);
	font-family: "Noto Sans JP", serif;
	font-optical-sizing: auto;
	font-style: normal;
	color: var(--black);
}
@media (max-width: 767px) {
	body {
		font-size: 14px;
	}
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	line-height: 1.4;
	font-weight: 700;
}
.en {
	font-family: "Outfit", serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.1em;
}
.container {
	max-width: 1100px;
	padding-left: 50px;
	padding-right: 50px;
}
.container-fluid {
	padding-left: 50px;
	padding-right: 50px;
}
.row-40 {
	margin-right: -20px;
	margin-left: -20px;
}
.row-40 > * {
	padding-right: 20px;
	padding-left: 20px;
}
.row-60 {
	margin-right: -30px;
	margin-left: -30px;
}
.row-60 > * {
	padding-right: 30px;
	padding-left: 30px;
}

@media (max-width: 991px) {
	.row-40 {
		margin-right: -15px;
		margin-left: -15px;
	}
	.row-40 > * {
		padding-right: 15px;
		padding-left: 15px;
	}
	.row-60 {
		margin-right: -20px;
		margin-left: -20px;
	}
	.row-60 > * {
		padding-right: 20px;
		padding-left: 20px;
	}
}
@media (max-width: 767px) {
	.container {
		max-width: 575px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.container-fluid {
		padding-left: 20px;
		padding-right: 20px;
	}
	.row-40 {
		margin-right: -15px;
		margin-left: -15px;
	}
	.row-40 > * {
		padding-right: 15px;
		padding-left: 15px;
	}
	.row-60 {
		margin-right: -15px;
		margin-left: -15px;
	}
	.row-60 > * {
		padding-right: 15px;
		padding-left: 15px;
	}
}
.img-blue {
	position: relative;
}
.img-blue::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #031D33;
	opacity: 0.1;
	z-index: 1;
}
.mask1 img {
	width: 100%;
	mask: url(../img/common/mask1.svg) center 100%/100%;
	aspect-ratio: 5/4;
	object-fit: cover;
}
.mask1.img-blue::after {
	aspect-ratio: 5/4;
	mask: url(../img/common/mask1.svg) center 100%/100%;
}
.mask2 img {
	width: 100%;
	mask: url(../img/common/mask2.svg) center 100%/100%;
	aspect-ratio: 3/2;
	object-fit: cover;
}
.mask2.img-blue::after {
	aspect-ratio: 3/2;
	mask: url(../img/common/mask2.svg) center 100%/100%;
}
.medium-title {
	font-size: 32px;
	line-height: 1.4;
	margin-top: 2em;
	margin-bottom: 40px;
}
.medium-title:first-child {
	margin-top: 0;
}
.medium-title span {
	position: relative;
	display: inline-block;
	z-index: 1;
}
.medium-title span::after {
	content: "";
	position: absolute;
	top: -10px;
	right: -20px;
	background-color: var(--yellow1);
	width: 50px;
	height: 50px;
	border-radius: 50px;
	z-index: -1;
}
@media (max-width: 767px) {
	.medium-title {
		font-size: 28px;
		margin-bottom: 30px;
	}
	.medium-title span::after {
		top: -10px;
		right: -10px;
		width: 40px;
		height: 40px;
	}
}
.yellow-shadow {
	position: relative;
	margin-bottom: 55px;
}
@media (max-width: 767px) {
	.yellow-shadow {
		margin-bottom: 85px;
	}
}
.yellow-shadow::before {
	content: "";
	position: absolute;
	top: 23%;
	left: 54%;
	background-color: var(--yellow1);
	display: block;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.mask1.yellow-shadow::before {
	mask: url(../img/common/mask1.svg) center 100%/100%;
	aspect-ratio: 5/4;
	height: auto;
}
.mask2.yellow-shadow::before {
	mask: url(../img/common/mask2.svg) center 100%/100%;
	aspect-ratio: 3/2;
	height: auto;
}
.max65 {
	max-width: 65%;
}
@media (max-width: 767px) {
	.max65 {}
}
.img-copyright {
	margin-bottom: 1rem;
}
.img-copyright::after {
	position: relative;
	content: "©Kei Sato / Dialogue for People";
	display: block;
	text-align: center;
	font-size: 10px;
	font-weight: 400;
	margin-top: 0.5em;
	z-index: 1;
}
figure.img-copyright,
figure .img-copyright {
	position: relative;
}
figure.img-copyright::after,
figure .img-copyright::after {
	position: absolute;
	top: 100%;
	width: 100%;
	transform: translateY(1em);
}
.img-copyright figure {
	margin-bottom: 0;
}
.img-copyright.img-copyright-on {
	position: relative
}
.img-copyright.img-copyright-on::after {
	position: absolute;
	bottom: 6%;
	width: 100%;
	color: var(--white);
	z-index: 1;
}
p {
	line-height: 2;
}
p:last-child {
	margin-bottom: 0;
}
.bold {
	font-weight: 700;
}
.fs20 {
	font-size: 20px;
}
.fs18 {
	font-size: 18px;
}
.fs15 {
	font-size: 15px;
}
.annotation {
	font-size: 14px;
	padding-left: 1em;
	text-indent: -1em;
}
@media (max-width: 767px) {
	p {}
	.fs20 {
		font-size: 18px;
	}
	.fs18 {
		font-size: 16px;
	}
	.fs15 {
		font-size: 13px;
	}
}

.btn {
	position: relative;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	text-align: left;
	padding: 15px 70px 15px 35px;
	font-weight: 700;
	width: 240px;
	height: 70px;
	border-radius: 70px;
	background-color: var(--white);
	text-decoration: none;
	max-width: 100%;
}
.btn::after {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translate(0%,-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	width: 40px;
	height: 40px;
	border-radius: 40px;
	background-color: var(--yellow2);
	font-family: "Material Symbols Sharp";
	content: "\e5c8";
	font-weight: 400;
	line-height: 1;
}
@media (min-width: 768px) {
	.btn {
		transition: opacity 0.3s;
	}
	.btn:hover {
		opacity: 0.6;
	}
}
@media (max-width: 767px) {
	.btn {
		font-size: 14px;
		height: 60px;
	}
	.btn::after {
		right: 14px;
		font-size: 20px;
		width: 30px;
		height: 30px;
	}
}

/* .btn-contact-yellow */
.btn-contact-yellow {
	width: 320px;
	background-color: var(--yellow2);
}
.btn-contact-yellow::before {
	font-family: "Material Symbols Sharp";
	content: "\e158";
	font-weight: 400;
	line-height: 1;
	font-size: 1.3em;
	margin-right: 0.5em;
}
.btn-contact-yellow::after {
	background-color: var(--white);
}
@media (max-width: 767px) {
	.btn-contact-yellow {
		width: 260px;
	}
}


/* .btn-wide */
.btn-wide {
	width: 480px;
}
.btn-wide::after {
}
/* .btn-bgblue */
.btn-bgblue {
	width: 480px;
	background-color: var(--bgblue);
}
.btn-bgblue::after {
	background-color: var(--yellow2);
}
@media (min-width: 768px) {
	.btn-bgblue {
		padding-left: 45px;
	}
}

/* .btn-small */
.btn-small {
	background-color: var(--bgblue);
	font-size: 14px;
	font-weight: 500;
	color: var(--black);
	width: auto;
	height: 50px;
	text-align: left;
	padding: 15px 35px 15px 25px;
	border-radius: 20px;
}
.btn-small::after {
	content: "\e5e1";
	font-size: 7px;
	width: 14px;
	height: 14px;
	border-radius: 14px;
}

/* .btn-tolist */
.btn-tolist {
	
}


/*----------------------------------------*/
/* .header */
/*----------------------------------------*/

.header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	padding: 40px 20px 15px 50px;
	background-color: var(--bgblue);
	z-index: 100;
	box-shadow: 0 20px 20px rgba(0,0,0,0);
	transition: padding-top 0.3s, padding-bottom 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.header a {
	text-decoration: none;
}
.header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
@media (max-width: 991px) {
	.header::before {
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: var(--white);
		z-index: 99;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
	}
}

/* .site-logo */
.header .site-logo {
	top: 40px;
	left: 50px;
	margin: 0;
	line-height: 1;
	z-index: 100;
	transition: top 0.3s;
}
.header .site-logo a {
	display: inline-block;
}
.header .site-logo img {
	width: 240px;
	transition: width 0.3s;
}
@media (max-width: 991px) {
	.header {
		padding: 20px 30px 10px;
	}
	.header .site-logo {
		top: 20px;
		left: 30px;
	}
	.header .site-logo img{
		width: 200px;
	}
}
@media (max-width: 767px) {
	.header {
		padding: 20px 20px 10px;
	}
	.header .site-logo {
		left: 20px;
	}
	.header .site-logo img{
		width: 130px;
	}
}

/* .pc-nav */
.header .pc-nav {
	top: 45px;
	right: 20px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	transition: top 0.3s;
}
.header .pc-nav > ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-weight: 500;
	font-size: 15px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.header .pc-nav > ul > li {
	padding: 0 1.2em;
}
.header .pc-nav > ul > li > a {
	color: var(--black);
}
.header .pc-nav > ul > li > a > span {}
.header .pc-nav .mail-magazine {
	margin-left: 20px;
}
.header .pc-nav .mail-magazine > a {
	color: var(--black);
	font-size: 14px;
	font-weight: 700;
}
.header .pc-nav .mail-magazine > a > dl {
	text-align: center;
	line-height: 1;
	height: 70px;
	width: 120px;
	padding: 12px 10px;
	margin: 0;
	background-image: url(../img/common/mail-magazine-bg.svg);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.header .pc-nav .mail-magazine > a > dl > dt {
	margin: 0 0 2px;
	font-size: 20px;
}
.header .pc-nav .mail-magazine > a > dl > dt::before {
	font-family: "Material Symbols Sharp";
	content: "\e158";
	font-weight: 400;
	line-height: 1;
}
.header .pc-nav .mail-magazine > a > dl > dd {}
@media (min-width: 768px) {
	.header a {
		transition: opacity 0.3s;
	}
	.header a:hover {
		opacity: 0.6;
	}
}
@media (max-width: 991px) {
	.header .pc-nav {
		display: none;
	}
}

/* #sp-nav */
#sp-nav {
	z-index: 99;
}
@media (min-width: 992px) {
	#sp-nav {
		display: none;
	}
}
@media (max-width: 991px) {
	#sp-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 100px 20px 20px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
		overflow: auto;
	}
	#sp-nav > ul {
		list-style: none;
		padding: 0;
		margin: 0;
		font-size: 14px;
	}
	#sp-nav > ul >li {
		margin: 0;
		padding: 0;
		border-top: solid 1px var(--gray-dd);
	}
	#sp-nav > ul >li:last-child {
		border-bottom: solid 1px var(--gray-dd);
	}
	#sp-nav > ul >li > a {
		position: relative;
		display: block;
		color: var(--black);
		padding: 14px 0;
		text-decoration: none;
	}
	#sp-nav > ul >li > a::after {
		content: "\e5e1";
		position: absolute;
		top: 50%;
		right: 10px;
		transform: translate(0%,-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: "Material Symbols Sharp";
		font-weight: 400;
		font-size: 7px;
		line-height: 1;
		width: 14px;
		height: 14px;
		border-radius: 14px;
		background-color: var(--yellow2);
	}
	#sp-nav .mail-magazine {
		margin-top: 30px;
	}
	#sp-nav .mail-magazine > a {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: var(--bgblue);
		max-width: 800px;
		padding: 15px;
		margin: 0 auto;
		color: var(--black);
		text-decoration: none;
	}
	#sp-nav .mail-magazine .left-text {
		text-align: center;
		margin: 0 15px 0 0;
		font-size: 18px;
		font-weight: 700;
	}
	#sp-nav .mail-magazine dl.mail-magazine-yellow {
		font-size: 15px;
		font-weight: 700;
		text-align: center;
		line-height: 1;
		height: 70px;
		width: 120px;
		padding: 12px 10px;
		margin: 0;
		background-image: url(../img/common/mail-magazine-yellow-bg.svg);
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	}
	#sp-nav .mail-magazine dl.mail-magazine-yellow > dt {
		margin: 0 0 2px;
		font-size: 20px;
	}
	#sp-nav .mail-magazine dl.mail-magazine-yellow > dt::before {
		font-family: "Material Symbols Sharp";
		content: "\e158";
		font-weight: 400;
		line-height: 1;
	}
}
@media (max-width: 767px) {
	#sp-nav {
		padding-top: 80px;
	}
}

/* #hamburger-menu */
#hamburger-menu {
	position: relative;
	z-index: 100;
}
@media (min-width: 992px) {
	#hamburger-menu {
		display: none;
	}
}

/* ハンバーガー */
#hamburger {
	display: none;
}

@media (max-width: 991px) {
	.close-box {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #000000;
		opacity: 0;
		visibility: hidden;
		z-index: 140;
		transition: opacity 0.3s, visibility 0.3s;
	}
	#hamburger {
		position: relative;
		display: block;
		width: 40px;
		height: 40px;
		border: solid 1px var(--white);
		border-radius: 45px;
		background-color: var(--white);
		cursor: pointer;
		transition: transform 0.4s, background-color 0.4s, top 0.3s;
	}
	#hamburger span {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		border-top: solid 2px var(--black);
		transition: border-top 0.4s;
	}
	#hamburger span:nth-child(1) {
		transition: transform 0.4s, opacity 0.4s;
		transform: translate(-50%, -50%);
	}
	#hamburger span:nth-child(2) {
		transition: transform 0.4s;
		transform: translate(-50%, calc(-50% - 7px));
	}
	#hamburger span:nth-child(3) {
		transition: transform 0.4s;
		transform: translate(-50%, calc(-50% + 7px));
	}
	
}

/* ナビオープン */
@media (max-width: 991px) {
	.nav-open {
		overflow: hidden;
		position: fixed;
		width: 100%;
		height: 100%;
	}
	.nav-open .header {
		background-color: rgba(255, 255, 255, 1);
	}
	.nav-open .header::before {
		opacity: 1;
		visibility: visible;
	}
	.nav-open .close-box {
		opacity: 0.5;
		visibility: visible;
	}
	.nav-open #hamburger {
		transform: rotate(90deg);
		background-color: var(--white);
	}
	.nav-open #hamburger span {
	}
	.nav-open #hamburger span:nth-child(1) {
		transform: translate(-50%, -50%) rotate(90deg);
		opacity: 0;
	}
	.nav-open #hamburger span:nth-child(2) {
		transform: translate(-50%, -50%) rotate(45deg);
	}
	.nav-open #hamburger span:nth-child(3) {
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	.nav-open #sp-nav {
		opacity: 1;
		visibility: visible;
	}
}


/* .header.narrow */
.header.narrow {
	padding-top: 15px;
	padding-bottom: 10px;
	background-color: var(--white);
	box-shadow: 0 20px 20px rgba(0,0,0,0.1);
}
.header.narrow .site-logo img {
	width: 200px;
}
@media (max-width: 767px) {
	.header.narrow {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.header.narrow .site-logo img {
		width: 130px;
	}
}

/*----------------------------------------*/
/* .page-wrapper */
/*----------------------------------------*/

.page-wrapper {
	min-height: calc(100vh - 400px);
	padding: 170px 0 0;
}
@media (max-width: 991px) {
	.page-wrapper {
		padding-top: 100px;
	}
}
@media (max-width: 767px) {
	.page-wrapper {
		padding-top: 85px;
	}
}

.bg-white {
	background-color: var(--white);
}
section {
	padding: 100px 0;
}
@media (max-width: 767px) {
	section {
		padding: 65px 0;
	}
}
.sec-decoration,
.sec-decoration-top,
.sec-decoration-bottom {
	position: relative;
	background-color: var(--white);
}
.sec-decoration,
.sec-decoration-top {
	margin-top: calc(11.5vw + 80px);
}
.sec-decoration::before,
.sec-decoration-top::before {
	content: "";
	position: absolute;
	background-image: url(../img/common/sec-decoration-top.svg);
	background-size: 100%;
	background-position: top;
	aspect-ratio: 8/1;
	width: 100%;
	display: block;
	top: -11.5vw;
	z-index: -1;
}
.sec-decoration,
.sec-decoration-bottom {
	margin-bottom: calc(11.5vw + 100px);
}
.sec-decoration::after,
.sec-decoration-bottom::after {
	content: "";
	position: absolute;
	background-image: url(../img/common/sec-decoration-bottom.svg);
	background-size: 100%;
	background-position: bottom;
	aspect-ratio: 8/1;
	width: 100%;
	display: block;
	bottom: calc(-11.5vw + 10px);
	z-index: -1;
}
.sec-decoration {
	padding-top: 0;
	padding-bottom: 0;
}
.sec-decoration-top {
	padding-top: 0;
}
.sec-decoration-bottom {
	padding-bottom: 0;
}
@media (max-width: 767px) {
	.sec-decoration, .sec-decoration-top {
		margin-top: calc(11.5vw + 60px);
		padding-top: 60px;
	}
	.sec-decoration, .sec-decoration-bottom {
		margin-bottom: calc(11.5vw + 45px);
	}
	.sec-decoration {
		padding-bottom: 55px;
	}
}

.link-list {}
.link-list a {
	text-decoration: none;
	color: var(--black);
}
.link-list dl {}
.link-list dl dt {}
.link-list dl dt figure {
	margin-bottom: 35px;
}
.link-list dl dt figure img {}
.link-list dl dd {
	margin: 0;
}
.link-list dl dd .list-title {
	font-size: 20px;
	line-height: 1.45;
	margin-bottom: 0.75em;
}
.link-list dl dd p {}
.link-list dl dd .btn-wrap {
	margin-top: 40px;
}
.link-list dl dd .btn-wrap .btn {}
@media (min-width: 768px) {
	.link-list a {
		transition: opacity 0.3s;
	}
	.link-list a:hover {
		opacity: 0.6;
	}
}

/*----------------------------------------*/
/* .contact-sec */
/*----------------------------------------*/

.contact-sec {
}


/*----------------------------------------*/
/* #footer */
/*----------------------------------------*/

#footer {
	padding: 100px 0 0;
	background-color: var(--footergray);
	color: var(--white);
}
#footer a {
	color: var(--white);
	text-decoration: none;
}
#footer .top-row {
	margin-bottom: 40px;
}
#footer .bottom-row {
	align-items: center;
}
#footer .col-site-logo {}
#footer .col-nav {}
#footer .col-nav .footer-nav {
	max-width: 525px;
	margin-left: auto;
}
#footer .col-nav .footer-nav > .row > * {}
#footer .col-nav ul.footer-nav-ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
}
#footer .col-nav ul.footer-nav-ul > li {
	padding: 0;
	margin: 0 0 1.35em;
}
#footer .col-nav ul.footer-nav-ul > li > a {
	display: flex;
	align-items: baseline;
}
#footer .col-nav ul.footer-nav-ul > li > a::before {
	content: "";
	display: block;
	flex-shrink: 0;
	background-color: var(--yellow2);
	width: 10px;
	height: 10px;
	border-radius: 10px;
	margin-right: 0.25em;
}
#footer .col-nav ul.footer-nav-ul > li > a > span {}
#footer .col-sns {}
#footer .col-sns .sns-nav {}
#footer .col-sns .sns-nav > ul {
	display: flex;
	justify-content: flex-end;
	list-style: none;
	padding: 0;
	margin: 0 -10px;
}
#footer .col-sns .sns-nav > ul > li {
	padding: 0 10px;
}
#footer .col-sns .sns-nav > ul > li > a {}
#footer .col-sns .sns-nav > ul > li > a > img {}
#footer .col-copyright {}
#footer .col-copyright .copyright-text {
	font-size: 12px;
}
@media (min-width: 768px) {
	#footer a {
		transition: opacity 0.3s;
	}
	#footer a:hover {
		opacity: 0.6;
	}
}
@media (max-width: 767px) {
	#footer .container {
		padding-left: 40px;
		padding-right: 30px;
	}
	#footer .top-row {
		margin-bottom: 60px;
	}
	#footer .col-site-logo {
		text-align: center;
		margin-bottom: 55px;
	}
	#footer .col-nav ul.footer-nav-ul {}
	#footer .col-nav ul.footer-nav-ul > li {
		margin: 0;
		padding: 0;
		border-top: solid 1px rgba(255,255,255,0.3);
	}
	#footer .col-nav ul.footer-nav-ul > li > a {
		padding: 14px 0;
	}
	#footer .col-nav ul.footer-nav-ul > li > a::before {
		margin-right: 0.75em;
	}
	#footer .col-nav .footer-nav .row > *:last-child ul.footer-nav-ul > li:last-child {
		border-bottom: solid 1px rgba(255,255,255,0.3);
	}
	#footer .col-sns .sns-nav {
		margin-bottom: 40px;
	}
	#footer .col-sns .sns-nav > ul {
		justify-content: center;
	}
	#footer .col-copyright .copyright-text {
		text-align: center;
	}
}

/* #to-top */
#to-top {
	padding-top: 70px;
}
#to-top a {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	font-weight: 700;
	width: 200px;
	height: 40px;
	border-radius: 30px 30px 0 0;
	margin: 0 auto;
	padding: 5px 20px 0px;
	background-color: var(--white);
	color: var(--black);
}
#to-top a::before {
	font-family: "Material Symbols Sharp";
	content: "\e5d8";
	font-weight: 400;
	line-height: 1;
	margin-right: 0.5em;
	transform: scale(1.3);
}
@media (max-width: 767px) {
	#to-top {
		padding-top: 50px;
	}
}


/*----------------------------------------*/
/* #common-contact-sec */
/*----------------------------------------*/
#common-contact-sec {
	margin-top: calc(11.5vw + 70px);
}
#common-contact-sec .medium-title {
	line-height: 1.4;
	margin-top: 0;
	margin-bottom: 40px;
}
#common-contact-sec p {}
#common-contact-sec  .btn-wrap {
	margin-top: 40px;
}
@media (min-width: 768px) {
	#common-contact-sec::before {
		top: -10vw;
	}
}
@media (max-width: 767px) {
	#common-contact-sec {
		margin-top: calc(11.5vw + 55px);
		padding-top: 55px;
		padding-bottom: 80px;
	}
	#common-contact-sec .btn-wrap {
		margin-top: 30px;
	}
}


/*----------------------------------------*/
/* #donate-btn */
/*----------------------------------------*/
#donate-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--black);
	width: 90px;
	height: 90px;
	padding: 0 0 5px;
	border-radius: 90px;
	background-color: var(--yellow2);
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
	text-decoration: none;
}
#donate-btn:focus {
	outline-offset: 1px;
}
#donate-btn dl {
	display: block;
	text-align: center;
	margin: 0;
}
#donate-btn dl dt {
	font-size: 34px;
	line-height: 1;
}
#donate-btn dl dt::before {
	font-family: "Material Symbols Sharp";
	content: "\ea70";
	font-weight: 400;
	line-height: 1;]
	margin: 0;
}
#donate-btn dl dd {
	font-size: 14px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}
@media (min-width: 768px) {
	#donate-btn {
		transition: opacity 0.3s;
	}
	#donate-btn:hover {
		opacity: 0.6;
	}
}
@media (max-width: 767px) {
	#donate-btn {
		right: 10px;
		bottom: 10px;
		width: 70px;
		height: 70px;
	}
	#donate-btn dl dt {
		font-size: 22px;
		margin-bottom: 4px;
	}
	#donate-btn dl dd {
		font-size: 12px;
	}
}