body {
background: #ffffff;
}

main {
margin-top: 150px;
}

@media (max-width: 768px) {
main {
margin-top: 100px;
}
}

.slider_container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 100%;
height: auto;
padding: 10px 0 10px 0;
background-color: #008ECF;
}

.slider_layout {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.col_c {
display: flex;
flex-direction: column;
gap: 10px;
}

.swiper {
border-radius: 10px;
}

.swiper1 , .swiper2 , .swiper5 {
width: 730px;
height: 450px;
}

.swiper3 , .swiper4 {
width: 300px;
height: 220px;
}


@media (max-width: 750px) {

.col_a , .col_c , .col_d {
display: none;
}

.slider_container {
padding: 2% 0 2% 0;
}

.slider_layout {
width: 100%;
max-width: 100%;
}

.col_b {
width: 100%;
height: auto;
}


.swiper2 {
width: 100%;
max-width: 100%;
height: auto;
}

.swiper {
border-radius: 0;
}
}

section {
padding: 0 5% 0 5%;
}

.back_01 {
height: 100%;
background-image: url(../img/base/back_01.jpg);
background-repeat: no-repeat;
background-position: center -300px; 
background-size: cover;
}

#main_container {
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 2%;
animation-delay:0.3s;
}

#main_copy {
position: relative;
display: flex;
justify-content: center;
width: 100%;
opacity: 0;
transform: translateY(30px);
animation-delay: 0.5s;
}

#main_copy p {
margin-top: 5%;
margin-bottom: 2%;
font-size: 2.75rem;
font-weight: 600;
color: #008ECF;
text-align: center;
}

#earth_container {
position: absolute;
top: -30%;
width: 25%;
z-index: 1;
}

.earth {
width: 100%;
max-width: 330px;     /* 元サイズまで */
aspect-ratio: 1 / 1;  /* 正円キープ */
}

.earth img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.en #earth_container {
top: -25%;
}

.text_container {
display: flex;
justify-content: center;
align-items: center;
}

#main_text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1000px;
margin: 0 5% 0 5%;
}

#main_text p {
margin: 0 auto;
text-align: left;
line-height: 2.5;
color: #666464;
}

.en #main_copy p {
font-size: 2.25rem;
}

.en #deco_01 {
position: absolute;
right: 2%;
bottom: 100px;
}

@media (max-width: 1024px) {

/*
#main_text {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 10% 0 10%;
text-align: center;
}
*/

#main_copy p {
font-size: 2.5rem;
}

.en #main_copy p {
margin-top: 8%;
font-size: 2rem;
}

.en #deco_01 {
bottom: 50px;
}
}

@media (max-width: 768px) {
#main_copy p {
margin-top: 10%;
font-size: 1.875rem;
}

/*
#main_text {
padding: 0 15% 0 15%;
text-align: center;
}
*/

#main_text p {
line-height: 1.8;
}

.sp_br {
display: none;
}

.en #main_copy p {
margin-top: 10%;
font-size: 1.5rem;
}
}


@media (max-width: 480px) {
#earth_container {
top: -25%;
width: 30%;
}

#main_copy p {
font-size: 1.625rem;
margin-top: 20%;
}

#main_text p {
line-height: 1.8;
}

.en #earth_container {
top: -18%;
}

.en #main_copy p {
margin-top: 20%;
}

.en #main_text p {
line-height: 1.6;
}
}

.deco_container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 0;
}

.deco {
position:absolute;
top:-80px;
animation: flower_fall 20s linear infinite;
pointer-events:none;
}

.deco img {
width:60px;
animation: flower_sway 6s ease-in-out infinite;
}

.deco_02 {
left:15vw;
animation-duration:15s;
animation-delay:0s;
}

.deco_03 {
left:7vw;
animation-duration:13s;
animation-delay:5s;
}

.deco_04 {
right:8vw;
animation-duration:5s;
animation-delay:2s;
}

.deco_05 {
right:22vw;
animation-duration:8s;
animation-delay:8s;
}

.deco_06 {
left:25vw;
animation-duration:7s;
animation-delay:10s;
}

.deco_07 {
right:16vw;
animation-duration:8s;
}


@keyframes flower_fall {

0%{
transform: translateY(-10px);
opacity:0;
}

20%{
opacity:0;
}

35%{
opacity:0.28;
}

40%{
opacity:0.32;
}

50%{
opacity:0.32;
}

75%{
opacity:0.32;
}

85%{
opacity:0.1;
}

95%{
opacity:0;
}

100%{
transform: translateY(300px);
opacity:0;
}
}

@media (max-width: 768px) {

@keyframes flower_fall {

0%{
transform: translateY(-10px);
opacity:0;
}

20%{
opacity:0;
}

35%{
opacity:0.28;
}

40%{
opacity:0.32;
}

70%{
opacity:0.1;
}

85%{
opacity:0;
}

100%{
transform: translateY(450px);
opacity:0.1;
}
}
}


@keyframes flower_sway {

0%{
transform: translateX(-3vw);
}

50%{
transform: translateX(3vw);
}

100%{
transform: translateX(-3vw);
}

}


@media (max-width: 768px) {

.deco img {
width:40px;
animation: flower_sway 6s ease-in-out infinite;
}
}

.back_02 {
position: relative;
min-height: 830px;
}

.wave {
position: absolute;
left: 0;
width: 100%;
height: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
transform: translateY(150px);
opacity: 0;
}

.wave_01 {
bottom: 0;
height: 830px;
background-image: url("../img/base/wave_01.png");
}

.wave_02 {
bottom: 0;
height: 799px;
background-image: url("../img/base/wave_02.png");
}

.wave_03 {
bottom: 0;
height: 742px;
background-image: url("../img/base/wave_03.png");
}

.wave_04 {
bottom: 0;
height: 574px;
background-image: url("../img/base/wave_04.png");
}

/* アニメーション */
.back_02.show .wave {
animation: waveUp 0.8s ease forwards;
}

.back_02.show .wave_02 {
animation-delay: 0.2s;
}

.back_02.show .wave_03 {
animation-delay: 0.4s;
}

.back_02.show .wave_04 {
animation-delay: 0.6s;
}

@keyframes waveUp {
to {
transform: translateY(0);
opacity: 1;
}
}

@media (min-width: 1921px) {

.back_02 {
position: relative;
min-height: 1100px;
}

.wave{
position:absolute;
left:0;
bottom:0;
width:100%;
height:100%;
background-repeat:no-repeat;
background-position:bottom center;
background-size:100% auto;
z-index:1;
transform: translateY(150px);
opacity:0;
}
}

/*  ::::: program ooutline :::::　*/

#pg_container {
position: relative;
top: 450px;
display: flex;
flex-direction: column;
max-width: 1000px;
margin: 0 auto;
color: #ffffff;
opacity: 0;
transform: translateY(50px);
transition: 1s;
z-index: 2;
}

#pg_container.show{
opacity: 1;
transform: translateY(0);
}

#pg_container h2 {
position: relative;   
max-width: 500px;
padding: 0 0 15px 50px;
margin-bottom: 20px;
font-size: 2rem;
font-weight: bold;
border-bottom: 1px dashed #ffffff;
}

#pg_container h2::before {
content: '';
position: absolute;
left: 0;
top: 40%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 16px 0 16px 25px;
border-color: transparent transparent transparent #EFC424; 
}

#pg_container h2 span {
border-left: 1px solid #ffffff;
margin-left: 30px;
padding-left: 30px;
font-size: 1rem;
}

#pg_container h3 {
margin-bottom: 10px;
font-size: 1.125rem;
font-weight: bold;
}

#pg_container p {
line-height: 30px;
}

.en #pg_container h2 span {
display: none;
}

.en #pg_container {
top: 400px;
}


@media (max-width: 768px) {

#pg_container {
top:350px;
}

#pg_container h2 {
font-size: 1.5rem;
}

#pg_container h2::before {
top: 35%;
border-width: 12px 0 12px 18px;
}   

.en #pg_container {
top: 320px;
}

}

@media (max-width: 480px) {
#pg_container p {
line-height: 25px;
}
}

@media (min-width: 1921px) {

#pg_container {
top: 600px;
}

.en #pg_container {
top: 600px;
}

}


/*  ::::: news :::::　*/

.back_03 {
width: 100%;
height: auto;
padding-top: 100px;
padding-bottom: 100px;
background-color: #EFC424;
}

#news_container {
display: flex;
flex-direction: column;
max-width: 1000px;
margin: 0 auto;
color: #ffffff;
opacity: 0;
transform: translateY(50px);
transition: 1s;
z-index: 2;
}

#news_container.show{
opacity: 1;
transform: translateY(0);
}

#news_container h2 {
position: relative;   
max-width: 500px;
padding: 0 0 15px 50px;
margin-bottom: 30px;
font-size: 2rem;
font-weight: bold;
border-bottom: 1px dashed #ffffff;
}

#news_container h2::before {
content: '';
position: absolute;
left: 0;
top: 40%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 16px 0 16px 25px;
border-color: transparent transparent transparent #EB6663; 
}

#news_container h2 span {
border-left: 1px solid #ffffff;
margin-left: 30px;
padding-left: 30px;
font-size: 1rem;
}

#news_list {
display: flex;
flex-wrap: wrap;
gap: 20px;
list-style: none;
padding: 0;
}

.news , .events {
display: flex;
flex-direction: column;
align-items: center;
width: calc((100% - 60px) / 4);
height: auto;
background-color: #ffffff;
border-radius: 5px;
color: #333333;
}

.news a , .events a {
display: block;
width: 100%;
height: 100%;
padding: 10px;
text-decoration: none;
color: #000000;
}

.news img , .events img {
width: 100%;
background-color: #dedede;
margin-bottom: 15px;
border-radius: 5px;
}


.date {
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 20px;
font-size: 0.875rem;
color: #707070;
}

li.news .date::before {
content: "NEWS ";
width: 60px;
height: 25px;
font-size: 0.875rem;
text-align: center;
color: #ffffff;
background-color: #008ECF;
}

li.events .date::before {
content: "EVENTS ";
width: 60px;
height: 25px;
font-size: 0.875rem;
text-align: center;
color: #ffffff;
background-color: #EB6663;
}

.news p , .events p {
width: 100%;
height: 4.5em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
font-size: 0.875rem;
}

.news:hover,
.events:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.15);
transition:0.3s;
}

.en #news_container h2 span {
display: none;
}

@media (max-width: 1024px) {
.news , .events {
width: calc((100% - 40px) / 3);
}
}

@media (max-width: 768px) {
.news , .events {
width: calc((100% - 20px) / 2);
}

#news_container h2 {
font-size: 1.5rem;
}

#news_container h2::before {
top: 35%;
border-width: 12px 0 12px 18px;
}   
}

@media (max-width: 480px) {
/*
.news , .events {
width: calc((100%) / 1);
}
*/

.news , .events {
width: calc((100% - 10px) / 2);
}

#news_list {
gap: 10px;
}


}


/*  ::::: button :::::　*/

.button {
display: flex;
align-items: center;
justify-content: center;
margin:30px 0 30px auto;
width: 180px;
height: 35px;
background-color: #ffffff;
}

.button a {
text-decoration: none;
text-align: center;
letter-spacing: 0.1rem;
color: #707070;
}


.button:hover {
background-color: #cacaca;
transform: scale(1.1);
transition: 0.3s;

}