main {
margin-top: 150px;
}

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

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





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

.button {
display: flex;
align-items: center;
justify-content: center;
margin:30px auto;
width: 160px;
height: 40px;
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;
}


/*  ::::: パンくずリスト :::::　*/

.pkl_container {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #f5f5f5;
z-index: 10;
}

#pkl {
display: flex;
align-items: center;
width: 100%;
max-width: 1200px;
padding: 0 5%;
height: 30px;
font-size: 0.875rem;
}


/* ーーーーー outline page ーーーーー */

/*  ::::: outline :::::　*/

.back_05 {
display: flex;
justify-content: center;
width: 100%;
height: 550px;
background-image: url(../img/base/back_05.jpg);
background-repeat: no-repeat;
background-position: center; 
background-size: cover;
}

#outline_title {
display: flex;
flex-direction: column;
width: 1000px;
max-width: 1000px;
margin: 130px 5% 5% 5%;
color: #ffffff;
}

#outline_title 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;
}

#outline_title 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; 
}

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

#outline_title h3 {
margin-bottom: 20px;
font-size: 1.5rem;
font-weight: bold;
}

#outline_title b {
display: block;
font-size: 1.25rem;
margin-top: 10px;
margin-bottom: 10px;
}

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

@media (max-width: 768px) {

.back_05 {
height: 650px;
}

#outline_title {
margin: 70px 5% 5% 5%;
}

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

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

#outline_title h3 {
margin-bottom: 10px;
font-size: 1.25rem;
}

#outline_title p {
font-size: 0.875rem;
line-height: 1.8;
}

#outline_title b {
font-size: 1rem;
margin-top: 5px;
margin-bottom: 5px;
}

.en #outline_title {
margin: 80px 5% 5% 5%;
}
}

@media (max-width: 480px) {
.back_05 {
height: 700px;
}
}

/*  ::::: stage :::::　*/

#stage_container {
display: flex;
align-items: center;
justify-content: center;
height: auto;
margin-bottom: 85px;
}

#stage_list {
display: flex;
flex-direction: column;
justify-content: center;
width: 1000px;
max-width: 1000px;
margin-top: 150px;
gap: 50px;
}

.stage_no {
display: flex;
height: 80px;
flex-shrink: 0;
}

.stage_no p {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
font-size: 2.5rem;
line-height: 0.8;
color: #ffffff;
border-radius: 50%; 
font-family: "Anton" , "Oswald" !important;
font-weight: 400;
font-style: normal;
}

.no01 p {
background-color: #008ECF;
}

.no02 p {
background-color: #0AAF8E;
}

.no03 p {
background-color: #99D62D;
}

.no04 p {
background-color: #E1B400;
}

.stage_no span {
display: flex;
justify-content: center;
width: 60px;
margin-top: 6px;
padding-top: 8px;
font-size: 0.75rem;
letter-spacing: 0.02rem;
line-height: 0.8;
color: #ffffff;
border-top: 1px solid #ffffff;
font-family: "Anton", sans-serif !important;
font-weight: 400;
font-style: normal;
}

.stage h3 {
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;
font-size: 2rem;
font-weight: bold;
color: #666464;
}

.stage_text {
margin-left: 100px;
}

.stage_text b {
display: block;
width: 100%;
max-width: 550px;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 1.125rem;
color: #666464;
border-bottom: 1px dashed #707070;
}

#overview {
display: flex;
justify-content: center;
align-items: center;
max-width: 1000px;
margin:0 auto;
margin-bottom: 50px;
}


@media (max-width: 768px) {

#stage_list {
margin-top: 80px;
}

.stage_no {
display: flex;
}

.stage_no p {
width: 65px;
height: 65px;
min-width: 65px;
min-height: 65px;
font-size: 1.875rem;
line-height: 0.7;
}

.stage_no span {
width: 40px;
margin-top: 6px;
padding-top: 6px;
font-size: 0.5rem;
letter-spacing: 0.01rem;
line-height: 0.7;
}

.stage_no h3 {
margin-left: 20px;
font-size: 1.5rem;
}

.stage_text {
margin-left: 15px;
margin-top: 10px;
}

.stage_text p {
font-size: 0.875rem;
line-height: 1.8;
}

#overview {
margin-bottom: 50px;
}
}


/*  ::::: target :::::　*/

.wave_05 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 750px;
background-image: url(../img/base/wave_05.png);
background-repeat: no-repeat;
background-position: center; 
background-size: cover;
}


@media (min-width: 1921px) {

.wave_05 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 1100px;
background-image: url(../img/base/wave_05.png);
background-repeat: no-repeat;
background-position: center;
background-size:100% auto;
}
}

#target_container {
display: flex;
justify-content: center;
align-items: center;
width: 1000px;
max-width: 1000px;
}

#target_text {
width: 100%;
}

#target_text h3 {
margin-bottom: 30px;
font-size: 2rem;
font-weight: bold;
color: #ffffff;
}

#target_text p {
font-size: 1.125rem;
color: #ffffff;
}


@media (max-width: 768px) {

#target_container {
flex-direction: column;
}

#target_text h3 {
margin-bottom: 20px;
text-align: center;
font-size: 1.5rem;
}

#target_text p {
font-size: 0.875rem;
line-height: 1.8;
}

}


/* ーーーーー news page ーーーーー */

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

.back_07 {
display: flex;
justify-content: center;
width: 100%;
height: auto;
min-height: 1000px;
background-color: #E1B400;
}

#news_container {
display: flex;
flex-direction: column;
width: 1000px;
max-width: 1000px;
min-height: 900px;
padding-top: 130px;
padding-bottom: 100px;
color: #ffffff;
}

#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;
margin-bottom:50px;
gap: 20px;
list-style: none;
padding: 0;
}

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

.newsbox a {
display:flex;
flex-direction:column;
width:100%;
height:100%;
padding: 10px;
text-decoration: none;
color: #000000;
}

.newsbox img {
width: 100%;
margin-bottom: 10px;
border-radius: 5px
}


.date {
display: flex;
width: 100%;
justify-content: space-between;
margin-bottom: 10px;
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;
}

.newsbox p {
display: -webkit-box;
height: 4.5em;    /* 1.5 × 3行 = 4.5em */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 行数を指定 */
overflow: hidden;
font-size: 0.875rem;
}

#news_pager {
display:flex;
justify-content:center;
margin-top:auto;   /* これ重要 */
gap:40px;
}

#news_pager button {
padding:8px 16px;
border-radius: 5px;
background:#fff;
cursor:pointer;
font-size:16px;
}

#news_pager button:hover{
background:#666464;
color:#fff;
transition:0.5s;
}


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

.hide{
display:none;
}

.empty{
visibility:hidden;
}

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

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

@media (max-width: 768px) {

.back_07 {
min-height: 300px;
}

#news_container {
min-height:auto;
padding-top: 70px;
}

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

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

.newsbox {
width: calc((100% - 20px) / 2);
}

#news_pager{
margin-top:0;
}
}

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

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

#news_list {
gap: 10px;
}
}



/*  ::::: newspage :::::　*/


.frame {
width: 1000px;
height: auto;
min-height: 900px;
padding: 50px 5%;
border-radius: 5px;
background-color: #fcfcfc;
}

.news_title {
}

.news_title h3{
position: relative;
color: #000000;
font-size: 1.4rem;
margin-bottom: 30px;
padding-left: 20px;
}

.news_title h3::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background-color: #000000; 
}
 
.newspage .date {
display: flex;
justify-content: flex-end;
gap: 20px;
}

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

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

.newspage p {
color: #000000;
margin-bottom: 50px;
}

.news_img img {
border: #bfbfbf 1px solid;
}