@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
.donationbtn {
display: none; }
.donation-main {
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
background: #F4FEFF;
line-height: 0;
box-shadow: 0 4px 4px #ddd;
overflow: hidden; }
.donation-main h1 {
order: 2;
flex: 0 0 40%;
padding: 3rem;
max-width: 700px; }
.donation-main .kv-img1 {
order: 1; }
.donation-main .kv-img2 {
order: 3; }
.donation-main .kv-img {
flex: 1;
scale: 1.05; }
.donation-main .dnkv1,
.donation-main .dnkv2 {
width: 99%;
aspect-ratio: 387 / 379;
line-height: 0; }
.donation-main path {
left: 0; }
.donation-main image {
line-height: 0; }
.donation-lead {
padding: 4rem 0;
text-align: center; }
.donation-lead h2 {
font-size: clamp(1em, 5vw, 2em);
margin-bottom: 2rem; }
.donation-lead p {
line-height: 2; }
.donation-lead figure {
width: 600px;
max-width: 100%;
margin: 2rem auto 0; }
.donation-content {
padding: 4rem 0; }
.donation-content h3 {
text-align: center;
position: relative;
margin-bottom: 3rem; }
.donation-content h3 b {
display: inline-block;
padding: 0 8px;
background: #fff;
font-size: clamp(1em, 6vw, 2.4em);
position: relative;
z-index: 2; }
.donation-content h3::after {
content: "";
position: absolute;
left: 0;
top: 50%;
height: 1px;
width: 100%;
z-index: 1;
background: #888; }
.donation-cando {
display: flex;
justify-content: space-between;
flex-wrap: wrap; }
.cando {
flex: 0 0 30%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 2rem; }
.cando h4 {
background: url(//hokkaido-saiseikai.com/_assets/images/donation/fk.svg) no-repeat 0 0/cover;
display: inline-flex;
justify-content: center;
align-items: center;
min-width: 90%;
aspect-ratio: 267 / 154;
margin: auto;
padding-bottom: 1.5rem;
padding-left: 0.5rem;
text-align: center;
font-weight: 500; }
.cando figure {
padding: 4px 0; }
.cando figure img {
border-radius: 8px;
border: 1px solid #ddd; }
.cando .cando-tx {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between; }
.cando h5 {
text-align: center;
padding-bottom: 1rem; }
.cando p {
font-weight: 400;
font-size: 0.85em;
text-align: justify;
padding-bottom: 1rem; }
.cando-2 h4 {
background-image: url(/_assets/images/donation/fk2.svg); }
.cando-3 h4 {
background-image: url(/_assets/images/donation/fk3.svg); }
.btn-donation {
text-align: center; }
.btn-donation a {
display: inline-block;
position: relative;
background: linear-gradient(#71CF99 15%, #1AB285 100%);
color: #fff;
padding: 1rem 3rem 1.2rem 2rem;
border-radius: 8px;
text-shadow: 0 1px 1px #777, 0 -1px 1px #777;
font-size: 1.2em;
font-weight: 600;
border: 1px solid #ccc;
transition-duration: 0.8s; }
.btn-donation a::before, .btn-donation a::after {
content: "";
position: absolute;
z-index: 2;
right: 1rem;
top: 50%;
transition-duration: 0.3s; }
.btn-donation a::before {
border-radius: 50%;
width: 1em;
height: 1em;
background: #fff;
transform: translateY(-50%);
box-shadow: inset 0 1px 1px #aaa; }
.btn-donation a::after {
width: 8px;
height: 8px;
background: #85DCD6;
clip-path: polygon(0 0, 100% 50%, 0 100%);
transform: translate(-50%, -50%); }
.btn-donation a:hover {
background: linear-gradient(#1AB285 15%, #1AB285 100%); }
.btn-donation a:hover::before, .btn-donation a:hover::after {
right: 0.8rem; }
.donation-howto {
display: flex;
justify-content: space-between; }
.howto {
flex: 0 0 31%;
position: relative;
background: #2E4893;
border-radius: 8px;
padding: 8px;
display: flex; }
.howto::after {
content: "";
position: absolute;
left: 101%;
top: 16%;
width: 2rem;
height: 2rem;
background: url(/_assets/images/donation/right.svg) no-repeat right center/contain; }
.howto .container {
background: #fff;
border-radius: 5px;
width: auto;
max-width: 100%;
padding: 2rem 1rem 1rem; }
.howto i {
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
height: 4rem;
width: 4rem;
border-radius: 50%;
background: #2E4893;
border: 5px solid #fff;
color: #fff;
font-family: "Righteous", serif;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
line-height: 1; }
.howto h4 {
text-align: center;
font-size: 0.9em;
min-height: 4em;
display: flex;
align-items: center;
justify-content: center; }
.howto figure {
padding-bottom: 1rem; }
.howto p {
padding-bottom: 0.5rem;
font-size: 0.85em;
text-indent: -1em;
padding-left: 1em;
font-weight: 400; }
.howto a {
text-decoration: underline; }
.howto-3::after {
content: none; }
.donation-tax {
text-align: center; }
.donation-tax h4 {
padding-bottom: 2rem;
font-size: clamp(1em, 4vw, 1.4em); }
.donation-tax p {
text-align: left;
width: 700px;
max-width: 100%;
margin: auto;
padding-bottom: 2rem; }
.donation-tax .tax-flow {
background: #fffeee;
padding: 2rem;
width: 700px;
max-width: 100%;
margin: auto;
border: 1px solid #ddd;
border-radius: 5px; }
.donation-tax .tax-flow h5 {
padding-bottom: 1rem; }
.donation-tax .tax-flow p {
text-indent: -1em;
padding-left: 1em;
padding-bottom: 1rem; }
.donation-announcement {
width: 800px;
max-width: 100%;
margin: 0 auto;
text-align: center; }
.donation-announcement h4 {
line-height: 2;
font-size: 1.2em;
padding-bottom: 2rem; }
.donation-announcement p {
padding-bottom: 1rem; }
.donation-announcement figure {
padding-bottom: 1rem; }
.donation-announcement .flex {
justify-content: space-around;
text-align: left; }
.donation-announcement dl {
line-height: 2;
border: 1px solid #888;
padding: 1rem; }
.donation-announcement dt {
font-weight: 600;
font-size: 1.1em;
padding-bottom: 8px; }
.donation-announcement dd {
font-weight: 500;
padding-left: 1em; }
.donation-banner {
background: #D2F9FF; }
.donation-banner h3::after {
display: none; }
.donation-banner h3 b {
background: #D2F9FF; }
.donation-banner .container {
background: #fff;
padding: 3rem;
border-radius: 8px;
box-shadow: inset 0 1px 4px #aaa; }
.donation-banner .banner {
display: flex;
justify-content: center;
flex-wrap: wrap; }
.donation-banner .banner li {
padding: 8px; }
.donation-banner .banner li a {
display: block; }
.donation-banner .banner li img {
aspect-ratio: 8 / 3;
width: 100%;
object-fit: cover;
border: 1px solid #ddd; }
.donation-banner .banner-large li {
flex: 0 0 33.33%; }
.donation-banner .banner-small li {
flex: 0 0 16.66%; }
@media screen and (max-width: 1100px) {
.cando h4 {
width: 110%;
font-size: 0.9em; } }
@media screen and (max-width: 768px) {
.donation-main .kv-img1 {
display: none; }
.donation-main h1 {
flex: 0 0 50%; }
.donation-lead p {
text-align: left; }
.donation-cando {
display: block; }
.cando {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
flex-direction: row;
padding: 1rem 0;
border-bottom: 1px dashed #888; }
.cando:last-of-type {
border-bottom: 0; }
.cando .cando-im {
flex: 0 0 44%; }
.cando h4 {
width: auto; }
.cando figure {
padding: 0; }
.cando .cando-tx {
flex: 0 0 50%; }
.donation-howto {
flex-direction: column; }
.howto {
margin-bottom: 4rem; }
.howto .container {
width: 100%; }
.howto figure {
text-align: center; }
.howto-3 {
margin-bottom: 0; }
.howto::after {
background-image: url(/_assets/images/donation/down.svg);
left: 50%;
top: 100%;
transform: translate(-50%, 0); } }
@media screen and (max-width: 540px) {
.donation-main h1 {
padding: 1rem; }
.donation-lead {
padding: 2rem 0; }
.donation-content {
padding: 2rem 0; }
.donation-content h3 {
margin-bottom: 2rem; }
.cando {
display: block; }
.cando .cando-im {
text-align: center; }
.cando h4 {
max-width: 320px;
min-width: 0;
width: 88%;
margin: auto; }
.donation-tax .tax-flow {
padding: 1rem; }
.donation-announcement h4 {
font-size: 1em; }
.donation-banner .container {
padding: 1rem; }
.donation-banner .banner-large li {
flex: 0 0 100%; }
.donation-banner .banner-small li {
flex: 0 0 50%; } }