html {
overflow-y: scroll;
}

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

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

section {
width: 90%;
max-width: 1200px;
margin: 0 auto;
margin-top: 80px;
margin-bottom: 80px;
}

@media (max-width: 1024px) {
section {
width: 85%;
max-width: 1024px;
}
}

@media (max-width: 768px) {
section {
width: 85%;
max-width: 768px;
margin-top: 50px;
}
}

.section_title {
display: flex;
flex-direction: row-reverse;
justify-content: left;
border-bottom: 2px solid #4682b4;
margin-bottom: 20px;
}

.section_title img {
width: 40px;
margin-right: 5px;
}

@media (max-width: 1024px) {
.section_title img {
width: 30px;
}
}

h2 {
display: block;
font-family: "Libertinus Math", system-ui;
font-weight: 400;
font-style: bold;
font-size: 5rem;
color: #708090;
}

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

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

h2 span {
display: block;
margin-top: 15px;
font-family: "Libertinus Math", system-ui;
font-weight: 400;
font-style: bold;
font-size: 1.2rem;
color: #708090;
text-align: center;
}

@media (max-width: 768px) {
h2 span {
font-size: 1rem;
}
}

h3 {
font-size: 1.75rem;
color: #4682b4;
padding-left: 50px;
background-image: url(../images/base/headline_icon.png);
background-size: 42px;
background-repeat: no-repeat;
}

@media (max-width: 1024px) {
h3 {
font-size: 1.35rem;
padding-left: 35px;
background-size: 32px;
}
}

h4 {
display: flex;
align-items: center;
background-color: #ebf6f7;
margin-top: 20px;
font-size: 1.25rem;  
position: relative;
padding: 5px 20px;
margin-bottom: 10px;
}

@media (max-width: 1024px) {
h4 {
font-size: 1.15rem;
}
}

h4::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background-color: #77AED9; 
}

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

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

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

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

.contents {
margin-bottom: 30px;
}

.contents p {
margin-bottom: 15px;
}

.contents b {
display: inline-block;
line-height: 1.5;
background: linear-gradient(transparent 10%, #ffffe0 70%);
}


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

#page_title_news {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 300px;
background-image: url(../images/background/news_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}

@media (max-width: 768px) {
#page_title_news {
height: 180px;
}
}

#news_menu_container ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
gap: 0.5%;
margin: 0 auto;
text-align: left;
list-style: none;
border-bottom: 1px solid #4682b4;
}

#news_menu_container li {
width: 25%;
}

#news_menu_container li {
display: flex;
align-items: center;
justify-content: center;     
width: 100%;
height: 40px;
margin: 0 auto;
border-radius: 10px 10px 0px 0px;
text-decoration: none;
font-size: 1.125rem; 
box-sizing: border-box;
cursor: pointer;
background-color: #f8f8f8;
color: #4682b4;
transition: all 0.5s ease;
}

@media (max-width: 1024px) {
#news_menu_container li {
font-size: 0.85rem; 
}
}

@media (max-width: 768px) {
#news_menu_container li {
justify-content: center;    
font-size: 0.75rem; 
}
}

#news_menu_all {
background-color: #4682b4;
color: #ffffff;
}

#news_menu_container li.active {
background-color: #4682b4;
color: #ffffff;
}

#achievement_menu_container li.active { 
background-color: #4682b4;
color: #ffffff;
}

#achievement_menu_container li:not(.active):hover {
background-color: #4682b4;
color: #ffffff;
}

#news_list_container ul {
display: flex;
flex-direction: column;
list-style: none;
}

#news_list_container li {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
padding: 20px 10px;
border-bottom: 2px dotted #4682B4;
text-decoration: none;
color: #333333;
box-sizing: border-box;
}

#news_list_container time {
display: flex;
justify-content: left;
align-items: center;
width: 100px;
}

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

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

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

#news_list_container b {
display: flex;
width: 100%;
margin: 10px 0px;
color: #4682B4;
}

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

#news_list_container p {
display: flex;
width: 100%;
margin-bottom: 10px;
}

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

#news_list_container a {
display: flex;
justify-content: center;
align-items: center;
width: 250px;
height: 30px;
margin: 0 0 0 auto;
text-decoration: none;
color: #4682B4;
border-radius: 5px;
background-color: #ebf6f7;
}

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

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


/* research.................................. */

#page_title_research {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 300px;
background-image: url(../images/background/research_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}

@media (max-width: 768px) {
#page_title_research {
height: 180px;
}
}

.research_images {
display: flex;
justify-content: center;
gap: 2%;
font-size: 0.875rem;
}

@media (max-width: 1024px) {
.research_images {
flex-direction:column;
}
}

@media (max-width: 768px) {
.research_images {
font-size: 0.68rem;
}
}

.research_images figure {
display: flex;
flex-direction: column;
}

.research_1 {
width: 40%;
}

.research_1 img {
width: 60%;
min-width: 200px;
margin: 0 auto;
}

@media (max-width: 1024px) {
.research_1 {
width: 100%;
}

.research_1 img {
width: 50%;
max-width: 350px;
margin: 0 auto;
margin-bottom: 10%;
}
}

.research_2 {
width: 60%;
}

@media (max-width: 1024px) {
.research_2 {
width: 100%;
}
}

.research_images figcaption {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height:3.5rem;
background-color: #ebf6f7;
margin-bottom: 20px;
}

/* member.................................. */

#page_title_member {
display: flex;
justify-content: center;
align-items: end;
width: 100%;
height: 200px;
}

@media (max-width: 768px) {
#page_title_member {
height: 130px;
}
}

.member_top {
display: flex;
align-items: center;
justify-content: center;
margin: 50px 0px;
}

.member_top img {
width: 90%;
max-width: 1200px;
border-radius: 20px;
}

@media (max-width: 1024px) {
.member_top img {
width: 85%;
max-width: 1024px;
}
}

.member_plof {
display: flex;
justify-content: space-between;
gap: 5%;
margin-bottom: 50px;
}

@media (max-width: 480px) {
.member_plof {
flex-direction: column;
}
}

.member_plof_img {
width: 200px;
}

@media (max-width: 480px) {
.member_plof_img {
margin: 0 auto;
margin-bottom: 20px;
}
}

.member_plof_img img {
width: 100%;
border-radius: 20px;
}

.member_prof_detail {
width: 100%;
}

.member_prof_detail li {
display: flex;
list-style: none;
gap: 2%;
margin-bottom: 1%;
}

.member_prof_detail span {
display: flex;
align-items: center;
justify-content: center;
width: 20%;
max-width: 100px;
min-width: 80px;
height: 35px;
background-color:  #84b9cb;
color: #ffffff;
border-radius: 10px;
}

@media (max-width: 480px) {
.member_prof_detail span {
height: 25px;
border-radius: 8px;
}
}

.member_prof_detail p {
display: flex;
width: 100%;
align-items: center;
}

.member_prof_detail a {
align-items: center;
font-weight: bold;
color: #47AAB5;
text-decoration: underline;
}

.member_prof_detail a:hover {
opacity:0.3;
transition:0.3s;
}

.blank::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  background: url(../images/base/blank.png) no-repeat center center;
  background-size: contain;
  vertical-align: middle;
}

.member_student {
margin-bottom: 50px;
}

.member_student h4{
display: flex;
align-items: center;
height: 40px;
background-color: #ebf6f7;
}

.member_student ul{
display: flex;
}

@media (max-width: 1024px) {
.member_student ul{
flex-direction: column;
}
}

.member_student li {
list-style: none;
margin-right: 20px;
}

@media (max-width: 1024px) {
.member_student li {
margin-bottom: 1%;
}
}

.member_student li span {
margin-left: 20px;
}


/* assignment.................................. */

#page_title_assignment {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 300px;
background-image: url(../images/background/assignment_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}

@media (max-width: 768px) {
#page_title_assignment{
height: 180px;
}
}

.w_schedule {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 1200px;
padding: 20px;
gap: 10px;
background-color: #e8ecef;
box-sizing: border-box;
}

@media (max-width: 768px) {
.w_schedule {
flex-wrap: wrap;
gap: 0px;
padding: 10px;
}
}

.w_schedule div {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 30%;
padding: 10px;
gap: 10px;
border-radius: 10px;
background-color: #84b9cb;
color: #ffffff;
font-weight: bold;
text-align: center;
box-sizing: border-box;
}

@media (max-width: 1024px) {
.w_schedule div {
font-size: 0.85rem;
}
}

@media (max-width: 768px) {
.w_schedule div {
justify-content: start;
flex-direction: row;
width: 100%;
border-radius: 10px 10px 0px 0px;
text-align: left;
}
}

.w_schedule div span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80%;
padding: 5px;
border-radius: 5px;
font-weight: bold;
text-align: center;
background-color: #f7fdff;
color: #84b9cb;
}

@media (max-width: 768px) {
.w_schedule div span {
width: 80px;
height: 100%;
}
}

.w_schedule p {
display: flex;
align-items: center;
width: 70%;
padding: 5px 10px;
border-radius: 10px;
background-color: #ffffff;
box-sizing: border-box;
}

@media (max-width: 768px) {
.w_schedule p {
width: 100%;
padding: 10px;
border-radius: 0px 0px 10px 10px;
}
}

.m_schedule {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
max-width: 1200px;
padding: 20px;
background-color: #e8ecef;
box-sizing: border-box;
}

@media (max-width: 768px) {
.m_schedule {
flex-wrap: nowrap;
flex-direction: column;
width: 100%;
}
}

.m_schedule ul {
width: 48%;
list-style: none;
}

@media (max-width: 768px) {
.m_schedule ul {
width: 100%;
}
}

.m_schedule li {
display: flex;
gap: 5px;
margin-bottom: 10px;
}

.m_schedule span {
display: flex;
align-items: center;
justify-content: center;
width: 16%;
min-width: 60px;
height: 50px;
background-color: #84b9cb;
border-radius: 10px;
color: #ffffff;
font-weight: bold;
}

.m_schedule p {
display: flex;
align-items: center;
width: 84%;
height: 50px;
padding-left: 10px;
background-color: #ffffff;
border-radius: 10px;
}


/* achievement.................................. */

#page_title_achievement {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 300px;
background-image: url(../images/background/achievement_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}

@media (max-width: 768px) {
#page_title_achievement {
height: 180px;
}
}

#achievement_menu_container ul {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
gap: 0.5%;
margin: 0 auto;
list-style: none;
border-bottom: 1px solid #4682b4;
}

#achievement_menu_container li {
display: flex;
align-items: center;
justify-content: center;     
width: 50%;
height: 40px;
padding-left:20px;
margin: 0 auto;
border-radius: 10px 10px 0px 0px;
text-decoration: none;
box-sizing: border-box;
cursor: pointer;
background-color: #f8f8f8;
color: #4682b4;
transition: all 0.5s ease;
}

@media (max-width: 768px) {
#achievement_menu_container li {
justify-content: center;   
padding-left: 0px;  
font-size: 0.85rem; 
}
}

#achievement_menu_container li.active {
background-color: #4682b4;
color: white;
}

#achievement_menu_container li:not(.active):hover {
background-color: #4682b4;
color: white;
}

#achievement_box li {
line-height: 1.5;
padding: 15px 0px;
border-bottom: 2px dotted #4682B4;
list-style: none;
}
#achievement_box ul{
	margin:0 0 50px;
}

#achievement_box a {
text-decoration: none;
}

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

#achievement_box p:nth-child(1) {
color: #4682b4;
font-weight: bold;
}

#achievement_box p:nth-child(2) {
color: #333333;
}

#achievement_box p:nth-child(3) {
color: #708090;
}

#award_box li {
line-height: 1.5;
padding: 15px 0px;
border-bottom: 2px dotted #4682B4;
list-style: none;
}

#award_box li span {
display: block;
color: #4682B4;
font-weight: bold;
}

.content {
display: none;
margin-top: 20px;
}

.content.active {
display: block;
}


/* lecture.................................. */

#page_title_lecture {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 300px;
background-image: url(../images/background/lecture_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}

@media (max-width: 768px) {
#page_title_lecture{
height: 180px;
}
}

.lecture_name {
margin-top: 40px;
}

.lecture_schedule {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
max-width: 1200px;
padding: 20px;
margin-bottom: 30px;
background-color: #e8ecef;
box-sizing: border-box;
}

@media (max-width: 768px) {
.lecture_schedule {
padding: 10px;
}
}

.lecture_schedule li {
display: flex;
gap: 5px;
margin-bottom: 10px;
}

@media (max-width: 768px) {
.lecture_schedule li {
flex-direction: column;
gap: 0px;
}
}

.lecture_schedule span {
display: flex;
align-items: center;
justify-content: center;
width: 35%;
height: auto;
min-width: 60px;
min-height: 50px;
padding: 10px;
background-color: #84b9cb;
border-radius: 10px;
color: #ffffff;
font-weight: bold;
text-align: center;
}

@media (max-width: 768px) {
.lecture_schedule span {
width: 100%;
border-radius: 10px 10px 0px 0px;
}
}

.lecture_schedule li p {
display: flex;
align-items: center;
width: 65%;
height: auto;
min-height: 50px;
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}

@media (max-width: 768px) {
.lecture_schedule li p {
justify-content: center;
width: 100%;
border-radius: 0px 0px 10px 10px;
margin-bottom: 5px;
}
}


/* gallery.................................. */

#page_title_gallery {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 300px;
background-image: url(../images/background/gallery_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}

@media (max-width: 768px) {
#page_title_gallery {
height: 180px;
}
}

#gallery_box ul {
display: flex;
flex-direction: column;
padding: 10px 5px;
}

#gallery_box li {
list-style: none; 
margin-bottom: 5%;
}

.gallery time {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 35px;
font-weight: bold;
color: #ffffff;
border-radius: 10px 10px 0px 0px;
background-color: #4682B4;
box-sizing: border-box;
}

@media (max-width: 1024px) {
.gallery time {
font-size: 1rem;
}
}

.gallery_report {
display: block;
width: 100%;
height: auto;
padding: 30px;
padding-bottom: 100px;
background-color: #f0f3f6;
border-top: 3px solid #4682B4;
background-image: url("../images/background/gallery_report_line.png");
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100%;
}

@media (max-width: 1024px) {
.gallery_report {
border-top: 2px solid #4682B4;
}
}

@media (max-width: 768px) {
.gallery_report {
border-top: 1px solid #4682B4;
}
}

.gallery b {
display: flex;
padding: 5px 0px;
color: #4682B4;
}

.gallery p {
display: flex;
padding: 5px 0px;
}

.gallery img {
max-width: 100%;
border-radius: 10px;
margin-top: 20px;
}


/* contact.................................. */

#page_title_contact {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 300px;
background-image: url(../images/background/contact_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}

@media (max-width: 768px) {
#page_title_contact {
height: 180px;
}
}

#contact_address div {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
max-width: 1200px;
height: 100px;
margin: 20px 0px;
padding-left: 90px; 
border-radius:10px;
background-color: #eaf4fc;
background-size: 55px;
background-repeat: no-repeat;
background-position: 2% 50%;
font-style:normal;
box-sizing: border-box;
}

#access { background-image: url("../images/icon/contact_access.png"); }
#mail { background-image: url("../images/icon/contact_mail.png"); }
#tel { background-image: url("../images/icon/contact_tel.png"); }


/* access.................................. */

#page_title_access {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 300px;
background-image: url(../images/background/access_background.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: scroll;
}

@media (max-width: 768px) {
#page_title_access {
height: 180px;
}
}

#access_address {
display: block
}

.access_google {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 20px;
}

.access_google iframe {
width: 100%;
border-radius: 20px;
}

@media (max-width: 768px) {
.access_google iframe {
height: 200px;
}
}