:root{
    --font:#000000;
    --background:linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5)),url("picture/home/background.png");
    --logo:invert(1);
    --back:rgba(255,255,255,0.4);
    --title:rgba(64,64,92,0.2);
}
:root.dark{
    --font:#ffffff;
    --background:linear-gradient(rgba(64,64,92,0.8),rgba(64,64,92,0.8)),url("picture/home/background.png");
    --logo:none;
    --back:rgba(0,0,0,0.4);
    --title:rgba(0,0,0,0.4);
}


@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+JP:wght@100..900&display=swap');


*{
    font-family:"Noto Sans JP";
    font-weight:400;
    font-style:normal;
    font-size:3vw;
    color:var(--font);
}
body{
    background:var(--background);
    background-size:33.33vw auto;
    background-repeat:repeat;
    background-attachment:fixed;
    margin:0;
}


.navi{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:7vw;
    display:flex;
    align-items:center;
    background:rgba(0,0,0,0.2);
    backdrop-filter:blur(2vw);
    z-index:10000;
    margin-bottom:7vw;
}
.navi-text{
    font-size:3vw;
    color:#000000;
    position:absolute;
    left:2vw;
}
.navi-link{
    text-decoration:none;
    display:flex;
    position:absolute;
    right:2vw;
    gap:2vw;
}
.navi-button{
    height:5vw;
    width:18vw;
    font-size:2vw;
    color:#000000;
    background-color:#ffffff;
}


.main{
    height:100vh;
    height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.main-logo{
    width:20vh;
    transition:transform .3s ease;
    position:absolute;
    top:30vh;
}
.main-title{
    font-weight:700;
    font-size:5vw;
    position:absolute;
    top:53vh;
}
.main-scroll{
    font-size:4vw;
    position:absolute;
    bottom:2vw;
    opacity:.7;
    animation:b 1.5s infinite;
    margin-bottom:2vw;
}
@keyframes b{
    50%{
        transform:translateY(10px);
    }
}


section{
    padding:11vw 3vw;
}
.section-title{
    font-size:5vw;
    font-weight:700;
    margin-bottom:2vw;
}
.section-content{
    margin-top:3vw;
}
.bold{
    font-weight:900;
}


.about-top{
    font-size:9.4vw;
    font-weight:900;
    text-align:center;
}
.about-logo{
    margin-top:7vw;
    width:94vw;
    height:94vw;
    background-color:#ffffff;
}


.department-card{
    position:relative;
    width:94vw;
    height:43vw;
    border-radius:2vw;
    border:0.3vw solid #000000;
    background:var(--back);
    margin-top:4vw;
}
.department-card:hover{
    transform:scale(1.02);
}
.department-card:active{
    transform:scale(0.98);
}
.department-icon{
    position:absolute;
    top:6vw;
    left:3vw;
    width:9vw;
    filter:var(--logo);
}
.department-name{
    position:absolute;
    top:5vw;
    left:15vw;
    font-size:4.5vw;
    font-weight:500;
}
.department-text{
    position:absolute;
    top:15vw;
    left:15vw;
    width:76vw;
}


.record-title{
    padding:1vw 3vw;
    margin-top:4vw;
    width:88vw;
    font-size:3.5vw;
    font-weight:700;
    background:var(--title);
}
.record-table{
    margin:2vw 0;
    width:94vw;
}
.record-table-date{
    width:10vw;
    align-items:flex-start;
    padding-top:0.5vw;
    vertical-align:top;
}
.record-table-department{
    width:9vw;
    padding-top:0.5vw;
    vertical-align:top;
}
.record-table-content{
    width:69vw;
    padding-top:0.5vw;
    padding-bottom:1.5vw;
    vertical-align:top;
}