.wrapper {
padding: 5% 10%;
}

@media (max-width: 1024px) {
.wrapper {
padding: 20% 5%;
}
}

@media (max-width: 768px) {
.wrapper {
padding: 20% 5%;
}
}

/*       ・・・・・・・main・・・・・・・        */

main {
margin-top: 100px;
}

#main_container {
display: block;
height: 100vh;
}

#main_img {
display: flex;
justify-content: center;
align-items: center;
height: 70%;
}

#main_img img {
display: block;
margin: 0 auto;
}

#main_copy {
position:relative;
width:100%;
text-align:center;
overflow:hidden;
}

#main_copy p {
position:relative;
display:inline-block;
margin:0 auto;
text-align:center;
color: #000;
}

#flow_text {
position:relative;
width:100%;
text-align:left;
animation:marquee 15s linear infinite;
}

#flow_text p {
position:relative;
padding-left:10rem;
color: #AEABAB;
white-space: nowrap;
}

#flow_text p::after {
content:"Creating a future where materials and living organisms meet.";
position:absolute;
top:0px;
left:100%;
padding-left:10rem;
color: #AEABAB;
white-space: nowrap;
}

@keyframes marquee {
0%   {transform: translateX(0);}
100% {transform: translateX(calc(-100% - 10rem)); 
}
}

#fixd_text p {
width: 100%;
text-align: center;
}

#fixd_text br {
display: none;
}

@media (max-width: 1024px) {
#main_img {
height: 70%;
margin: 10%;
}

#main_container {
display: block;
height: 100%;
}
}

@media (max-width: 768px) {
#fixd_text br {
display: block;
}
}


/*       topics        */

#topics_container {
position: relative;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
max-width: 1200px;
padding:  8% 5%;
margin: 0 auto;
border: 2px solid #000000;
border-radius: 30px;
background-color: #ffffff;
background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
                  linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
background-size: 16px 16px;
background-repeat: repeat;
background-position: center center;
}

#topics_box ul {
display: flex;
flex-flow: column;
justify-content: center;
gap: 10px;
margin-bottom: 5%;
}

#topics_box li {
position: relative;
display: flex;
flex-flow: column;
justify-content: center;
align-items: start;
width: 100%;
height: 85px;
max-width: 1200px;
min-height: 85px;
padding: 0 20px;
border: 2px solid #000000;
border-radius: 20px;
background-color: #ffffff;
}

#topics_box a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 20px;
transition: 0.5s;
z-index: 1;
}

#topics_box time , #topics_box p {
position: relative;
display: -webkit-box;             
-webkit-box-orient: vertical;      /* 垂直方向に配置 */
overflow: hidden;                  /* 溢れた部分を隠す */
text-overflow: ellipsis;           /* 溢れた部分に「...」を表示 */
-webkit-line-clamp: 2;             /* 最大行数を2行に設定 */
pointer-events: none;
z-index: 2;
}

#topics_box p {
width: 100%;
height: auto;
max-width: 1200px;
}

#topics_box a:hover {
opacity: 0.8;
background-color: #F1EFEE;
}

.news time::after {
padding-left: 20px;
content: "#news";
color: #000000;
}

.event time::after {
padding-left: 20px;
content: "#event";
color: #000000;
}

.activity time::after {
padding-left: 20px;
content: "#activity report";
color: #000000;
}

@media (max-width: 1024px) {
#topics_container {
padding:  15% 5%;
}

#topics_box ul {
gap: 15px;
margin-bottom: 10%;
}
}


/*       ・・・・・・・research・・・・・・・        */

#research_container {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
max-width: 1200px;
margin: 0 auto;
}

#research_intro {
display: flex;
justify-content: center;
align-items: center;
width: 90%;
max-width: 900px;
margin-bottom: 5%;
text-align: center;
}

.research_box {
display: flex;
width: 100%;
height: auto;
max-height: 550px;
padding: 5%;
margin: 0 auto 0 0;
margin-bottom: 15%;
gap: 5%;
border-radius: 30px;
}

#research_box01 {
background-color: #F1EFEE;
}

#research_box02 {
flex-direction: row-reverse;
background-color: #F1EFEE;
}

.research_text {
width: 60%;
height: 100%;
}

.research_box ul {
list-style-type: disc;
padding-left: 20px;
line-height: 30px;
}

.research_text h3 {
margin-bottom: 10px;
line-height: 1;
}

.research_box p {
border-bottom: 2px dashed #000000;
padding-bottom: 20px;
margin-bottom: 20px;
}

.research_photo img{
width: 100%;
max-width: 1000px;
border-radius: 30px;
}

#research_photo01 {
margin-top: 50px;
margin-right: -500px;
}

#research_photo02 {
margin-top: 50px;
margin-left: -500px;
}

@media (max-width: 1024px) {
.research_box {
flex-flow: column;
width: 100%;
height: auto;
max-height: 1000px;
margin-bottom: 5%;
}

#research_box02 {
display: flex;
flex-flow: column;
background-color: #F1EFEE;
}

.research_text {
width: 100%;
height: 100%;
margin-bottom: 5%;
}

.research_photo img{
width: 100%;
border-radius: 15px;
}

#research_photo01 {
margin-top: 0px;
margin-right: 0px;
}

#research_photo02 {
margin-top: 0px;
margin-left: 0px;
}
}

@media (max-width: 768px) {
#research_intro {
margin-bottom: 10%;
}

.research_text {
margin-bottom: 10%;
}

.research_box {
margin-bottom: 10%;
}
}


/*       ・・・・・・・member・・・・・・・        */

#member_container {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
max-width: 1200px;
margin: 0 auto;
}

#member_box01 {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: auto;
gap: 5%;
max-width: 1200px;
margin-bottom: 10%;
}

.profile {
width: 100%;
height: auto;
max-width: 500px;
}

.profile span {
display: block;
border-bottom: 2px dashed #000000;
padding-bottom: 10px;
margin-bottom: 10px;
}

.profile img {
width: 100%;
height: 100%;
border-radius: 30px;
margin-bottom: 5%;
}

.profile div {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
max-width: 500px;
text-align: center;
border: 2px solid #000000;
border-radius: 30px;
background-color: #ffffff;
}

#member_box02 {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100vw;
height: auto;
}

#group_photo img {
display: block;
width: 100vw;
height: auto;
}

#dear_students {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 90%;
height: auto;
max-width: 1200px;
padding: 5%;
margin-top: -5%;
margin-bottom: 5%;
text-align: center;
border-radius: 30px;
background-color: #ffffff;
border: 2px solid #000000;
}

#dear_students h4 {
width: 90%;
max-width: 1000px;
border-bottom: 2px dashed #000000;
padding-bottom: 20px;
margin-bottom: 20px;
}

#dear_students br {
display: none;
}

@media (max-width: 768px) {
#member_box01 {
flex-flow: column;
gap: 30px;
}

#member_box02 {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
max-width: 500px;
}

#group_photo img {
display: block;
width: 100%;
height: 500px;
margin-bottom: 5%;
object-fit:cover;
border-radius: 30px;
}

#dear_students {
width: 100%;
padding: 10% 5%;
margin-top: 0%;
}

#dear_students br {
display: block;
}
}


/*       ・・・・・・・others・・・・・・・        */

#others_container {
display: flex;
justify-content: center;
align-items: start;
width: 100%;
height: auto;
color: #ffffff;
}

.others_box {
position: relative;
}

#others_box01 , #others_box02 {
display: flex;
flex-flow: column;
justify-content: start;
align-items: center;
width: 50%;
height: 300px;
}

.others_box h2 {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
white-space: nowrap;
pointer-events: none;
}

.others_box a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.3s;
pointer-events: auto;
}

.others_box a:hover {
background-color: #ffffff;
transition: 0.3s;
opacity: calc(0.3);
}

#others_box01 {
margin: 10% 10% 10% auto;
}

#others_box02 {
margin: 10% auto 10% 10%;
}


@media (max-width: 1024px) {

}


@media (max-width: 768px) {
#others_container {
flex-flow: column;
justify-content: center;
align-items: center;
}

#others_box01 , #others_box02 {
height: 250px;
margin: 5% auto;
}
}