body{
}

h2,
h3{
font-weight: 700;
}


header{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

header img{
width: 29.6rem;
min-width: 200px;
}

section h2{
margin: 20rem 0;
font-size: 5.8rem;
text-align: center;
}

section h2 span{
display: inline-block;
background: linear-gradient(90deg, var(--color-orange), var(--color-red) 15%, var(--color-purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


section:nth-of-type(1) h2{
margin-bottom:15rem;
}

section:nth-of-type(1) > p{
color: #000;
margin-bottom: 1em;
font-size: 3rem;
font-weight: 500;
text-align: center;
}

section:nth-of-type(1) > p:last-of-type{
margin-bottom: 15rem;
}

section:nth-of-type(1) div{
display: flex;
flex-direction: column;
justify-content: center;
background-image: url('../images/home/about-bg.webp');
background-size: cover;
height: 42rem;
}

section:nth-of-type(1) div p{
color: #fff;
text-shadow: 1px 3px 15px #000;
padding-top: 2em;
line-height: 1.4;
font-size:4.6rem;
font-weight: 700;
text-align: center;
}


article{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
margin-bottom: 15rem;
}

article:nth-of-type(odd){
flex-direction: row-reverse;
}

article > div:first-child{
background-color: #fff;
filter: drop-shadow(2rem 2rem 2rem rgba(0,0,0,0.2));
width: 31rem;
padding: 3rem 0 3rem 2rem;
margin-top: 10rem;
}

article:nth-of-type(odd) > div:first-child{
padding: 3rem 2rem 3rem 0;
}

article:nth-of-type(6) > div:first-child{
margin-top: 4rem;
}

article .thumb{
position: relative;
z-index: 2;
width: 44rem;
}

article:nth-of-type(odd) .thumb{
padding-left: 2em;
}

article:nth-of-type(even) .thumb{
padding-right: 2em;
}

article .thumb img{
filter: drop-shadow(2rem 2rem 2rem rgba(0,0,0,0.2));
}



article h3{
position: relative;
padding-bottom: 0.75rem;
margin-bottom: 1rem;
font-size: 2.4rem;
}

article h3::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
background: linear-gradient(to right, var(--color-orange), var(--color-red), var(--color-purple));
width: 100%;
height: 0.3rem;
}


article p{
font-size: 2rem;
text-align: justify;
}

article p a:link,
article p a:visited{
color: var(--color-orange);
font-weight: 700;
}

article p a:hover,
article p a:active{
color: var(--color-purple);
}

article dl{
margin-top: 1em;
font-size: 2rem;
}

article dd{
padding-right: 2rem;
text-align: justify;
}

article:nth-of-type(even) h3,
article:nth-of-type(even) p{
padding-right:2rem;
}

article:nth-of-type(odd) h3,
article:nth-of-type(odd) p{
padding-left:2rem;
}

article strong{
color:var(--color-purple);
font-weight: 700;
}


#follow img:last-child{
margin: -15rem 0 0 15rem;
}


#membership img:not(:first-child){
width: 24rem;
}

#membership img:nth-child(2){
margin:-6rem 0 0 -12rem;
}

#membership img:nth-child(3){
margin:-6rem 0 0 2.5rem;
}

#card{
margin-bottom: 6rem;
}

#card img:last-child{
margin: 6rem 0 0 15.5rem;
}

#japanese img:nth-child(2){
max-width: 34rem;
margin: -8rem 0 0 2rem;
}

#japanese img:nth-child(3){
position: absolute;
max-width: 34rem;
margin: -8rem 0 0 1rem;
}

#notification{
margin-bottom: 6rem;
}

#notification img:last-child{
margin: 6rem 0 0 -13rem;
}



footer{
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
}

footer img{
width: 29.6rem;
min-width: 200px;
}