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


*{
    font-family:"Noto Sans JP";
    font-weight:450;
    font-size:3vw;
    color:#ffffff;
    text-shadow:
        0em      -0.08em 0 #000,
        0.016em  -0.078em 0 #000,
        0.031em  -0.074em 0 #000,
        0.044em  -0.067em 0 #000,
        0.057em  -0.057em 0 #000,
        0.067em  -0.044em 0 #000,
        0.074em  -0.031em 0 #000,
        0.078em  -0.016em 0 #000,

        0.08em    0em     0 #000,
        0.078em   0.016em 0 #000,
        0.074em   0.031em 0 #000,
        0.067em   0.044em 0 #000,
        0.057em   0.057em 0 #000,
        0.044em   0.067em 0 #000,
        0.031em   0.074em 0 #000,
        0.016em   0.078em 0 #000,

        0em       0.08em  0 #000,
        -0.016em   0.078em 0 #000,
        -0.031em   0.074em 0 #000,
        -0.044em   0.067em 0 #000,
        -0.057em   0.057em 0 #000,
        -0.067em   0.044em 0 #000,
        -0.074em   0.031em 0 #000,
        -0.078em   0.016em 0 #000,

        -0.08em    0em     0 #000,
        -0.078em  -0.016em 0 #000,
        -0.074em  -0.031em 0 #000,
        -0.067em  -0.044em 0 #000,
        -0.057em  -0.057em 0 #000,
        -0.044em  -0.067em 0 #000,
        -0.031em  -0.074em 0 #000,
        -0.016em  -0.078em 0 #000;
}
body{
    background:linear-gradient(rgba(64,64,92,0.8),rgba(64,64,92,0.8)),url("picture/background.png");
    background-size:33.33vw auto;
    background-repeat:repeat;
    background-attachment:fixed;
    margin:0;
    font-size:2.76vw;
}


.navi{
    position:fixed;
    top:0;
    left:0;
    display:flex;
    z-index:10000;
}
.navi-background{
    width:100vw;
    z-index:1000;
}
.navi-text{
    font-size:6.5vw;
    color:#000000;
    position:absolute;
    top:4vw;
    left:4vw;
    color:#ffffff;
    font-weight:900;
    transform: rotate(-4deg); 
    z-index:10001;
}
.navi-about{
    text-decoration:none;
    position:absolute;
    top:1.5vw;
    left:44.3vw;
    z-index:10001;
}
.navi-section{
    text-decoration:none;
    position:absolute;
    top:1.5vw;
    left:54.46vw;
    z-index:10001;
}
.navi-record{
    text-decoration:none;
    position:absolute;
    top:1.5vw;
    left:64.6vw;
    z-index:10001;
}
.navi-link{
    text-decoration:none;
    position:absolute;
    top:1.5vw;
    left:74vw;
    z-index:10001;
}
.navi-button{
    font-size:4vw;
    text-decoration:none;
    position:absolute;
    top:0.8vw;
    right:1vw;
    font-weight:900;
    z-index:10001;
}


.main{
  height:100vh;
  position:relative;
  overflow:hidden;
}
.main-contents{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}
.main-logo{
  width:50vw;
  transition:transform .3s ease;
}
.main-title{
  font-weight:900;
  font-size:4.5vw;
  margin-top:5vw;
}
.main-sub{
  margin-top:0.8vw;
  margin-bottom:10vw;
}
.main-scroll{
  position:fixed;
  bottom:10vh;
  left:50%;
  transform:translateX(-50%);
  opacity:.7;
  animation:b 1.5s infinite;
}
@keyframes b{
  50%{
    transform:translateX(-50%) translateY(10px);
  }
}



section{
    padding:2vw 3vw;
}
.section-back{
    margin-top:13vw;
    margin-left:-3vw;
    width:29vw;
    transform: rotate(-1deg); 
}
.section-title{
    font-size:5vw;
    font-weight:700;
    margin-top:-7.9vw;
    margin-bottom:2vw;
    transform: rotate(-1deg); 
}
.section-content{
    margin-top:3vw;
}



.about-top{
    font-size:9vw;
    font-weight:900;
    text-align:center;
}
.text-orange{
    color:#FF4C1D;
    font-size:9vw;
    font-weight:900;
    text-align:center;
}
.about-logo{
    margin:7vw 0;
    width:94vw;
    transform: rotate(-4deg); 
}
.bold{
    color:#00FF00;
    font-weight:900;
}




.department-card{
    position:relative;
    width:94vw;
    border-radius:2vw;
    border:0.3vw solid #000000;
    background:var(--back);
    margin-top:5.5vw;
}
.department-back{
    width:100%;
}
.department-icon{
    position:absolute;
    top:6vw;
    left:3vw;
    width:9vw;
    filter:var(--logo);
    transform: rotate(-4deg); 
}
.department-name{
    position:absolute;
    top:5vw;
    left:14vw;
    font-size:4.5vw;
    font-weight:500;
}
.department-text{
    position:absolute;
    top:14vw;
    left:14vw;
    width:76vw;
}


.record-back1{
    margin-top:3vw;
    width:94vw;
    margin-bottom:-19vw;
    z-index:-1;
}
.record-back2{
    margin-top:3vw;
    width:94vw;
    margin-bottom:-31vw;
    z-index:-1;
}
.record-title{
    padding:1vw 3vw;
    width:88vw;
    font-size:3.5vw;
    font-weight:700;
    background:var(--title);
}
.record-table{
    margin:2vw 2vw;
    width:94vw;
}
.record-table-date{
    width:7vw;
    align-items:flex-start;
    padding-top:0.5vw;
    vertical-align:top;
}
.record-table-department{
    width:7vw;
    padding-top:0.5vw;
    vertical-align:top;
}
.record-table-content{
    padding-top:0.5vw;
    padding-bottom:1.5vw;
    vertical-align:top;
}