/* ==========================================================
   Solid State Chemistry Laboratory
   style.css
   ========================================================== */

:root{
    --main:#3a1d54;
//    --main:#1f3b63;
//    --accent:#005bac;
    --accent:#2c7a6b;
    --text:#333333;
    --line:#dddddd;
    --bg:#f7f8fa;
    --white:#ffffff;
    --width:1000px;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        "Yu Gothic",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.8;
}

/* ---------- 共通 ---------- */

.container{
    width:min(92%, var(--width));
    margin:auto;
}

section{
    padding:2rem 0;
}

h1,h2,h3{
    font-weight:600;
}

h2{
    color:var(--main);
    font-size:1.8rem;
    margin-bottom:1.5rem;
    padding-bottom:.4rem;
    border-bottom:3px solid var(--accent);
}

a{
    color:inherit;
    text-decoration:none;
}
a:hover{
    color:#003d73;
    text-decoration:underline;
}

ul{
    list-style:none;
}

img{
    max-width:600px;
    width:100%
}

/* ---------- Header ---------- */

header{
    background:var(--main);
    color:#ffffff;
    padding:2.5rem 0 1rem;
}

.university{
    font-size:0.95em;
    letter-spacing:.1em;
    opacity:.9;
    margin-bottom:.2rem;
}

header h1{
    font-size:2.3rem;
    letter-spacing:.08em;
    margin-bottom:.4rem;
}

.subtitle{
    opacity:.9;
    margin-bottom:2rem;
}

/* ---------- Menu ---------- */

nav ul{
    display:flex;
    gap:2rem;
    flex-wrap:wrap;
}

nav a{
    color:white;
    padding:.4rem 0;
    border-bottom:2px solid transparent;
    transition:.2s;
}

nav a:hover{
    color:#f4d35e;
//    border-color:#f4d35e;
    text-decoration:none;
}

nav a.active{
    color:#f4d35e;
    border-bottom:2px solid #f4d35e;
    pointer-events:none;
    cursor:default;
}

/* ---------- Hero ---------- */

.hero{
    background:#ffffff;
    text-align:center;
}

.hero h2{
    border:none;
    margin-bottom:1rem;
    font-size:2rem;
}

.hero p{
    max-width:600px;
    width:100%;
    margin:auto;
    text-align:justify;
}
.hero-photo{
    border-radius:10px;
    border:1px solid var(--line);
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}
/* ---------- News ---------- */

.news li{
    padding:.9rem 0;
    border-bottom:1px solid var(--line);
}

.news time{
    display:inline-block;
    width:8rem;
    color:var(--main);
    font-weight:bold;
}

/* ---------- Cards ---------- */

.cards{
    display:flex;
    gap:1.5rem;
    flex-wrap:wrap;
}

.card{
    flex:1 1 280px;
    background:#ffffff;
    padding:1.8rem;
    border-radius:10px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
    transition:.2s;
}

.card:hover{
//    transform:translateY(-4px);
}

.card h3{
    color:var(--main);
    margin-bottom:.8rem;
}

.card p{
    text-align:justify;
}

/* ---------- Contact ---------- */

strong{
    color:var(--main);
}

/* ---------- Footer ---------- */

footer{
    margin-top:3rem;
    padding:2rem 0;
    background:var(--main);
    color:white;
    text-align:center;
    font-size:.9rem;
}

/* ---------- Responsive ---------- */

@media (max-width:768px){

header{
    text-align:center;
}

nav ul{
    justify-content:center;
    gap:1rem;
}

nav li{
    width:45%;
}

nav a{
    display:block;
    padding:.6rem;
    border:1px solid rgba(255,255,255,.3);
    border-radius:6px;
}

.news time{
    display:block;
    margin-bottom:.3rem;
}

.hero h2{
    font-size:1.6rem;
}

.cards{
    flex-direction:column;
}

section{
    padding:3rem 0;
}

}




/* ---------- Member ---------- */

.member{
    width:100%;
    border-collapse:collapse;
    margin-top:1rem;
    background:#ffffff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.member th,
.member td{
    padding:1rem;
    border-bottom:1px solid var(--line);
    text-align:left;
}

.member th{
    width:140px;
    background:#f3f6fa;
    color:var(--main);
    font-weight:600;
}

.member tr:last-child th,
.member tr:last-child td{
    border-bottom:none;
}

@media(max-width:768px){

.member th,
.member td{
    display:block;
    width:100%;
}
.member th{
    border-bottom:none;
    padding-bottom:.3rem;
}

.member td{
    padding-top:0;
    margin-top:1rem;
    margin-bottom:.8rem;
}

}

.profile{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:2rem;
    margin-top:0rem;
}

.profile-photo{
    width:100px;
    aspect-ratio:3/4;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--line);
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

@media(max-width:768px){
.profile{
    flex-direction:column-reverse;
    align-items:center;
    text-align:center;
}

.profile-photo{
    width:120px;
}

}

.profile-link{
    display:inline-block;
    margin-top:.3em;
    font-size:.9em;
    color:var(--accent);
}

/* ---------- Publications ---------- */
.publication{
    margin-top:1rem;
    padding-left:1.8rem;
}

.publication li{
    margin-bottom:1.2rem;
    line-height:1.8;
}

.publication i{
    color:var(--main);
}

.publication b{
    font-weight:600;
}
.paper-link{
    margin-left:.5rem;
    font-size:.9rem;
}


/*==================================================
Events
==================================================*/

.event-card{
    background:#ffffff;
    border-radius:12px;
    overflow:hidden;
    margin:3rem 0;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
}

.event-main{
    display:block;
    width:100%;
    aspect-ratio:16/6;
    object-fit:cover;
}

.event-body{
    padding:1.8rem;
}

.event-body h4{
    color:var(--main);
    font-size:1.5rem;
    margin-bottom:.3rem;
}

.date{
    color:#777;
    margin-bottom:1rem;
    font-size:.9rem;
}

.gallery{
    display:flex;
    gap:.8rem;
    margin-top:1.2rem;
    flex-wrap:wrap;
}

.gallery img{
    width:160px;
    aspect-ratio:4/3;
    object-fit:cover;
    border-radius:8px;
//    cursor:pointer;
//    transition:.2s;
}

.gallery img:hover{
//    transform:scale(1.03);
}

.category{
    display:inline-block;
    padding:.2rem .7rem;
    margin-right:.8rem;

    font-size:.8rem;

    color:#ffffff;
    background:var(--main);

    border-radius:999px;
}

@media(max-width:768px){

.event-main{
    aspect-ratio:16/9;
}
.gallery img{
    width:100%;
}

}



/*==================================================
Links
==================================================*/

.link-list{
    list-style:none;
    margin-top:1rem;
}

.link-list li{
    padding:.8rem 0;
    border-bottom:1px solid var(--line);
}

.link-list a{
    color:var(--accent);
    text-decoration:none;
}

.link-list a:hover{
    text-decoration:underline;
}