body {
font-family: 'Noto Sans JP', sans-serif;
overflow: hidden auto;
}

/* main.................................. */

main {
display: block;
padding-top: 140px;
}

@media (max-width: 1024px) {
main {
padding-top: 100px;
}
}

#main_container {
width: 100%;
}

#main_img img {
display: block;
width: 100%;
height: auto;
}


/* h2.................................. */
h2 {
display: block;
height: 150px;
font-family: "Libertinus Math", system-ui;
font-weight: 400;
font-style: normal;
font-size: 3.8rem;
color: #708090;
}

@media (max-width: 1024px) {
h2 {
font-size: 3rem;
height: 100px;
}
}

@media (max-width: 768px) {
h2 {
font-size: 2.5rem;
height: 80px;
}
}

#box1 span {
display: block;
font-family: "Noto Sans JP";
font-size: 1.2rem;
}

@media (max-width: 1024px) {
#box1 span {
font-size: 1rem;
}
}


/* p..................................
p{
font-family: "Noto+Sans+JP";
font-weight: 400;
font-style: normal;
}
*/

/* news.................................. */

#news_section {
background-color: #ffffff;
}

#news_container {
display: flex;
justify-content:space-between;
flex-wrap: wrap;
width: 90%;
max-width: 1200px;
padding: 100px 0px;
margin: 0 auto;
box-sizing: border-box;
text-align: left;
}

@media (max-width: 1024px) {
#news_container {
padding: 50px 0px;
}
}

@media (max-width: 768px) {
#news_container {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
width: 85%;
height: auto;
}
}

#box1{
width:25%;
overflow: hidden;
}

#box3 {
width: calc(100% - 25%);
}

@media (max-width: 1024px) {
#box3 {
width: calc(100% - 25%);
}
}

@media (max-width: 768px) {
#box1,#box3 {
width: 100%;
}
}

#menu_container {
display: block;
list-style: none;
box-sizing: border-box;
}

@media (max-width: 768px) {
#menu_container li {
display: none;
}
}

#menu_container li{
display: flex;
align-items: center;
justify-content: left;
position:relative;
width: 200px;
height: 50px;
margin: 15px 0px;
padding-left:20px;
border-radius: 30px;
text-decoration: none;
font-size: 1.125rem; 
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
color: #708090;
cursor:pointer;
}

@media (max-width: 1024px) {
#menu_container li{
width: 150px;
height: 35px;
margin: 10px 0px;
font-size: 1rem;
}
}    

@media (max-width: 768px) {
#menu_container li{
display: none;
}
}

#menu_container li::before{
content:"";
position:absolute;
top: 50%;
right: 8px;
display: flex;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
margin: 0px;
border-radius: 20px;
box-sizing: border-box;
background-color: #ffffff;
transform: translate(0, -50%);
color: #4682b4;
}

#menu_container li::after{
content: "";
position: absolute;
top: 50%;
right: 10px;
border: 8px solid transparent;
border-left: 10px solid rgba(255,255,255,1);
transform: translate(0, -50%);
}

@media (max-width: 1024px) {
#menu_container li::before{
width: 25px;
height: 25px;
}
#menu_container li::after{
right: 6px;
}
}

#menu_container li:hover,
#menu_container li.active{
color:#FFF;
}

#menu_container li#menu_all:hover,
#menu_container li#menu_all.active{background-color: #4682b4;}
#menu_container li#menu_news:hover,
#menu_container li#menu_news.active{background-color: #47AAB5;}
#menu_container li#menu_events:hover,
#menu_container li#menu_events.active{background-color: #A6A2CB;}
#menu_container li#menu_achievement:hover,
#menu_container li#menu_achievement.active{background-color: #77AED9;}
#menu_container li#menu_gallery:hover,
#menu_container li#menu_gallery.active{background-color: #D86F87;}

#menu_container li#menu_all::before{background-color:#4682b4;}
#menu_container li#menu_news::before{background-color: #47AAB5;}
#menu_container li#menu_events::before{background-color: #A6A2CB;}
#menu_container li#menu_achievement::before{background-color: #77AED9;}
#menu_container li#menu_gallery::before{background-color: #D86F87;}

#menu_container li:hover::before,
#menu_container li.active::before{background-color: #ffffff !important;}

#menu_container li#menu_all:hover::after,
#menu_container li#menu_all.active::after{border-left:10px solid #4682b4;}
#menu_container li#menu_news:hover::after,
#menu_container li#menu_news.active::after{border-left:10px solid #47AAB5;}
#menu_container li#menu_events:hover::after,
#menu_container li#menu_events.active::after{border-left:10px solid #A6A2CB;}
#menu_container li#menu_achievement:hover::after,
#menu_container li#menu_achievement.active::after{border-left:10px solid #77AED9;}
#menu_container li#menu_gallery:hover::after,
#menu_container li#menu_gallery.active::after{border-left:10px solid #D86F87;}

#news_list_container {
list-style: none;
margin: 0;
padding: 0;
}

#news_list_container li{
display: flex;
align-items: center;
position: relative;
width: 100%;
height: 100px;
padding: 10px 0px;
border-bottom: 0.15rem solid #4682b4;
}

@media (max-width: 1024px) {
#news_list_container li{
flex-wrap: wrap;
}
}

#news_list_container a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
position: absolute;
margin: -10px -0px;
padding: 10px 0px;
cursor: pointer;
}

#news_list_container a:hover {
transition:0.3s;
background-color: rgba(0, 0, 0, 0.05); 
cursor: pointer;
}

#news_list_container time {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 25px;
margin: 1%;
}

@media (max-width: 1024px) {
#news_list_container time {
justify-content: left;
width: 80px;
height: 20px;
font-size: 0.875rem;
}
}

#news_list_container span {
display: flex;
justify-content: center;
align-items: center;
width: 135px;
height: 25px;
margin: 1%;
color: #ffffff;
border-radius: 35px;
font-size: 0.875rem;
}

@media (max-width: 1024px) {
#news_list_container span {
width: 100px;
height: 20px;
}
}

.news_news { background-color: #47AAB5; }
.news_events { background-color: #A6A2CB; }
.news_achievement { background-color: #77AED9; }
.news_gallery { background-color: #D86F87; }

#news_list_container p {
display: flex;
justify-content: center;
align-items: center;
width: 73%;
margin: 1%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 表示したい行数 */
overflow: hidden;
text-overflow: ellipsis;
}

@media (max-width: 1024px) {
#news_list_container p {
width: 100%;
font-size: 0.875rem;
}
}

#next_page {
display: flex;
align-items: center;
justify-content: right;
width: 90%;
max-width: 200px;
height: 30px;
margin: 0 0 0 auto;
margin-top: 20px;
text-decoration: none;
border-radius: 5px;
}

#next_page a{
margin-right: 40px;
text-decoration: none;
color: #4682B4;
font-size: 1.125rem; 
}

#next_page a:hover {
opacity:0.3;
transition:0.3s;
}

#next_page::before{
content:"";
position:absolute;
display: flex;
justify-content: right;
align-items: center;
width: 26px;
height: 26px;
margin:26px 0 0;
border-radius: 20px;
box-sizing: border-box;
transform:translate(0, -50%);
color: #4682b4;
border: 2px solid #47AAB5;
}

#next_page::after{
content:"";
position:absolute;
margin:10.5px 0 0;
border:6px solid transparent;
border-left:11px solid #47AAB5;
transform:translate(0, -50%);
}

#next_page::before{background-color: #ffffff;}


/* about.................................. */

#about_section {
background-image: url(../images/top/about_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

#about_container {
display: flex;
justify-content:space-between;
flex-wrap: wrap;
width: 90%;
max-width: 1200px;
padding: 100px 0px;
margin: 0 auto;
box-sizing: border-box;
text-align: left;
}

@media (max-width: 768px) {
#about_container {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
width: 85%;
height: 100%;
min-height: 440px;
padding: 50px 0px;
}
}

#about_container h3 {
display: flex;
flex-direction: column;
width: 100%;
margin: 20px 0px;
font-size: 2rem;
font-weight: 600;
color: #778899;
box-sizing: border-box; 
}

@media (max-width: 1024px) {
#about_container h3 {
margin: 15px 0px;
font-size: 1.5rem;
}
}

@media (max-width: 1024px) {
#about_container h3 {
margin: 0px;
}
}

#about_container p {
font-size: 1.25rem;
}

@media (max-width: 1024px) {
#about_container p {
font-size: 0.875rem;
}
}