/* .zen-old-mincho-regular {
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
} */

body {
    font-family: "Zen Old Mincho", serif;
    font-weight: 100;
    font-style: normal;
    margin: 0;
    background-image: url(../img/同窓会/hedr.jpg);
    background-position: 0px 68px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #efefef;
    color: white;
}

.menu0 {
    margin-top: 5%;
    background-color: white;
    /* color: #333; */
    padding: 1% 5%;
    /* width: 100%; */
    text-align: center;
}
.menu1 {
    /* margin-top: 5%; */
    background-color: white;
    /* color: #333; */
    padding: 1% 5%;
    /* width: 100%; */
    text-align: center;
}

.menu0 k {
    margin: 0px 5px 0px 5px;
    border-right: 1px solid #333;
}
.menu0 a {
    /* margin-left: 5px; */
    padding: 0% 2%;
    display: inline-block;
    color: #008eec;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}
.menu0 a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #008eec;
    transform: scaleX(0);
    transform-origin: right;           /* 初期：左から伸びる準備 */
    transition: transform 0.4s ease, transform-origin 0s; /* originは即時変更 */
}
.menu0 a:hover {
    /* color: #ddd; */
    font-weight: bold;
    /* text-shadow: 1px 3px 3px rgba(0, 2, 150, 0.712); */
}

.menu0 a:hover::after {
    transform: scaleX(1);
    transform-origin: left;          /* ホバー中：右側を基準に（縮む準備） */
    transition: transform 0.4s ease, transform-origin 0s; /* 即時origin変更 */
}
.menu1 k {
    margin: 0px 5px 0px 5px;
    border-right: 1px solid #333;
}
.menu1 a {
    /* margin-left: 5px; */
    padding: 0% 2%;
    display: inline-block;
    color: #008eec;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}
.menu1 a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #008eec;
    transform: scaleX(0);
    transform-origin: right;           /* 初期：左から伸びる準備 */
    transition: transform 0.4s ease, transform-origin 0s; /* originは即時変更 */
}
.menu1 a:hover {
    /* color: #ddd; */
    font-weight: bold;
    /* text-shadow: 1px 3px 3px rgba(0, 2, 150, 0.712); */
}

.menu1 a:hover::after {
    transform: scaleX(1);
    transform-origin: left;          /* ホバー中：右側を基準に（縮む準備） */
    transition: transform 0.4s ease, transform-origin 0s; /* 即時origin変更 */
}
.hed {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 25% 1% 20% 1%; */
    height: 80vh;
    z-index: 9998;
    /* height: 100%; */
    font-size: 120%;
    text-shadow: 1px 3px 3px rgb(255, 255, 255);
}
.hed5 {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 25% 1% 20% 1%; */
    /* margin-top: 10%; */
    height: 100vh;
    z-index: 9998;
    /* height: 100%; */
    background-image: linear-gradient(90deg, transparent, #ffffffa6 20%, #ffffff 45%);
}
.hed5 .idou > img {
    width: 100%;
}

.hed1 {
    color: #333;
    /* From https://css.glass */
    background: #efefef;
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2.4px);
    -webkit-backdrop-filter: blur(2.4px); */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    text-align: left;
    padding: 1% 5%;
    /* text-shadow: 1px 3px 3px rgb(0, 0, 0); */
    /* border-top: solid 1px white; */
    display: flex;
    flex-wrap: wrap;
}
.hed2 {
    /* margin-top: 5%; */
    color: #333;
    /* From https://css.glass */
    background: #ffffff;
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2.4px);
    -webkit-backdrop-filter: blur(2.4px); */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    text-align: left;
    padding: 1% 5% 1% 5%;
    /* text-shadow: 1px 3px 3px rgb(0, 0, 0); */
    border-top: solid 1px white;
    display: flex;
    flex-wrap: wrap;
}
.hed2 .btns {
    margin-left: 1%;
    width: 30%;
}
.hed2 .pdf {
    width: 70%;
}
.fto {
    padding: 1% 5%;
    background: #00994e;
    background-image: linear-gradient(143deg, #008eec, #0092cc8f 96%);
}
.idou {
    padding-top: 7%;
    padding-left: 39%;
    padding-right: 1%;
}
.pdfs {
  /* border: solid 1px blue; */
  width: 48%;
}
/* .pdfs p > a:hover { */
  /* border-bottom: solid 1px black; */
  /* margin: 2%; */
  /* font-weight: bold;
} */
.pdfs p > a {
    padding: 1% 51% 0% 1%;
    line-height: 35px;
    color: #008eec;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}
.pdfs p > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #008eec;
    transform: scaleX(0);
    transform-origin: right;           /* 初期：左から伸びる準備 */
    transition: transform 0.4s ease, transform-origin 0s; /* originは即時変更 */
}
.pdfs p > a:hover {
    /* color: #ddd; */
    font-weight: bold;
    /* text-shadow: 1px 3px 3px rgba(0, 2, 150, 0.712); */
}

.pdfs p > a:hover::after {
    transform: scaleX(1);
    transform-origin: left;          /* ホバー中：右側を基準に（縮む準備） */
    transition: transform 0.4s ease, transform-origin 0s; /* 即時origin変更 */
}

.pdfs h2 {
  text-align: left;
}
.pdfs > .links {
  height: 200px;
  margin: 1%;
  overflow: scroll;
}

.menu-base {
    z-index: 9999;
    background-color: #ffffff;;
    position: fixed;
    width: 100%;
    height: 68px;
}
.menu-base img {
    position: fixed;
    top: 0;
    left: 2%;
}

.hed h1, h2 {
    padding-top: 5%;
    color: #008eec;
    /* transform: rotate(15deg); */
}

.top {
    background-color: #ffffff;
    border-top: 1px solid #474747;
    border-left: 1px solid #474747;
    color: #333;
    position: fixed;
    bottom: 0%;
    right: 0%;
    padding: 1% 3%;
    text-decoration: none;
    border-radius: 25px 0px 0px 0px;
    font-size: 150%;
}
.top:hover {
    background-color: #333;
    color: #ffffff;
}
.hed2 {
    padding: 2% 5%;
}
.hed2 .text1 {
    margin: 2% 0%;
    width: 100%;
    color: navy;
    display: flex;
    flex-wrap: nowrap;
}
.hed2 .text2 {
    margin: 2% 0%;
    width: 100%;
    color: navy;
}
.hed2 .text3 {
    margin: 2% 0%;
    width: 100%;
    font-size: 110%;
    color: #00994e;
}
.hed2 .text4 {
    margin: 2% 0%;
    width: 100%;
    font-size: 110%;
    color: #00994e;
}
.hed2 .text4 > h3 {
    color: #006e39;
    border-bottom: 2px #cfcfcf dotted;
}
.hed2 .text4 > p {
    margin-left: 2%;
    padding-left: 2%;
    border-top: solid 5px #00994f00;
    border-left: solid 5px #cfcfcf;
    border-bottom: solid 5px #00000000;
}
.hed2 .text2 > img {
    width: 20%
}
.hed2 .text2 > a {
    padding: 1% 1% 0% 1%;
    color: #008eec;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}
.hed2 .text2 > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #008eec;
    transform: scaleX(0);
    transform-origin: right;           /* 初期：左から伸びる準備 */
    transition: transform 0.4s ease, transform-origin 0s; /* originは即時変更 */
}
.hed2 .text2 > a:hover {
    /* color: #ddd; */
    font-weight: bold;
    /* text-shadow: 1px 3px 3px rgba(0, 2, 150, 0.712); */
}

.hed2 .text2 > a:hover::after {
    transform: scaleX(1);
    transform-origin: left;          /* ホバー中：右側を基準に（縮む準備） */
    transition: transform 0.4s ease, transform-origin 0s; /* 即時origin変更 */
}

.hed2 .text1 > .p1 {
    padding: 2%;
    border-right: 2px #d4d4d4 dotted;
}
.hed2 .text1 > .p2 {
    padding: 2%;
}
.qas {
    margin: 0% 0% 0% 0%;
    padding-top: 0;
    padding-left: 2%;
    padding-bottom: 1%;
    color: navy;
    border-top: solid 5px #00994f00;
    border-left: solid 5px navy;
    border-bottom: solid 5px #00000000;
    width: 100%;
    /* transform: rotate(15deg); */
}
.qas1 {
    margin: 4% 0% 0% 0%;
    padding-top: 0;
    padding-left: 2%;
    padding-bottom: 1%;
    color: #00994e;
    border-top: solid 5px #00994f00;
    border-left: solid 5px #00994e;
    border-bottom: solid 5px #00994e;
    width: 100%;
    /* transform: rotate(15deg); */
}
.qas1 h2 {
    margin: 0%;
    padding: 0;
    color: #00994e;
    /* text-align: left; */
    /* transform: rotate(15deg); */
}
.qas h1, h2 {
    margin: 0%;
    padding: 0;
    color: navy;
    /* text-align: left; */
    /* transform: rotate(15deg); */
}

h1, h2 {
    font-weight: 300;
    text-align: left;
}


    /* メニュー */
    .btn {
        display: block;
        position: fixed;
        /* background-color: #007590; */
        background-image: linear-gradient(143deg, #008eec, #0092cc8f 96%);
        padding: 16.5px;
        z-index: 1000;
        right: 0%;
        top: 0%;
    }
    /* ハンバーガーボタン */
    .hamburger {
      display: block;
      width: 35px;
      height: 35px; /* 正方形にする */
      position: relative;
      cursor: pointer;
    }

    .hamburger span {
      background-color: #fff;
      height: 3px;
      width: 100%;
      position: absolute;
      left: 0;
      transition: all 0.3s;
    }

    .hamburger span:nth-child(1) {
      top: 6px; /* 線を正方形内に調整 */
    }

    .hamburger span:nth-child(2) {
      top: 13.5px;
    }

    .hamburger span:nth-child(3) {
      top: 21px;
    }

    /* メニューオープン時のアニメーション（☰ → ✕） */
    .hamburger.open span:nth-child(1) {
      transform: rotate(45deg);
      top: 13.5px;
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
      transform: rotate(-45deg);
      top: 13.5px;
    }

    /* メニュー */
    .nav-menu {
        display: block;
      /* background-color: #007590; */
      position: fixed;
      top: 68px;
      width: 100%;
      height: 0;
      overflow: hidden;
      transition: height 0.6s ease-in-out;
      z-index: 99;
    }

    .nav-menu.open {
      height: 100%; /* メニューの高さは必要に応じて調整 */
      overflow-y: scroll;
    }

    .nav-menu ul {
      list-style: none;
      z-index: 99;
      /* background-color: #007590; */
      background-image: linear-gradient(143deg, #2480bf, #003452 96%);
      padding: 20px;
      margin-top: 0%;
    }

    .nav-menu li {
      margin: 0 0 15px 0;
    }

    /* .nav-menu a {
        display: block;
        color: #fff;
        font-size: 18px;
      text-decoration: none;
    }

    .nav-menu a:hover {
      color: #ddd;
      font-weight: bold;
      text-decoration: underline;
    } */

    .nav-menu a {
    display: block;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
    transform: scaleX(0);
    transform-origin: right;           /* 初期：左から伸びる準備 */
    transition: transform 0.4s ease, transform-origin 0s; /* originは即時変更 */
}

.nav-menu a:hover {
    color: #ddd;
    font-weight: bold;
    text-shadow: 1px 3px 3px rgba(0, 2, 150, 0.712);
}

.nav-menu a:hover::after {
    transform: scaleX(1);
    transform-origin: left;          /* ホバー中：右側を基準に（縮む準備） */
    transition: transform 0.4s ease, transform-origin 0s; /* 即時origin変更 */
}

/* ホバー解除時：自動で left に戻りつつ scaleX(0) へ */


.news-container {
    width: 50%;
    margin: 10px auto;
    font-weight: 400;
    font-family: Arial, sans-serif;
}
.filter-buttons {
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
}
.filter-buttons button {
    padding: 10px 20px;
    /* margin-right: 10px; */
    cursor: pointer;
    /* background-color: #000000; */
    color: #b3b3b3;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 5px solid #b3b3b3;
    font-size: 100%;
    border-radius: 2.5px 2.5px 0px 0px;
}
.filter-buttons button:hover {
    padding: 10px 20px;
    /* margin-right: 10px; */
    cursor: pointer;
    /* background-image: url(../img/bt2.png); */
    background-size: cover;
    /* background-color: #0052aa; */
    color: white;
    /* border: solid 1px #0052aa; */
    border-bottom: 5px solid white;
    font-size: 100%;
    /* border-radius: 2.5px; */
}
.filter-buttons button.active {
    /* background-image: url(../img/bt2-white.png); */
    background-size: cover;
    background-color: #00000048;
    border-bottom: 5px solid #ffffff;
    /* border: solid 1px #007bff; */
    color: #ffffff;
}
.news-list {
    overflow: scroll;
    height: 200px;
}
.news-item {
    padding: 25px 5px 15px 5px;
    border-bottom: 1px solid #ddd;
    color: #333;
    font-size: 90%;
}
.news-item a {
    color: #00a2ff;
}
.news-item.hidden {
    display: none;
}
.category0 {
    background-color: rgb(0, 158, 158);
    padding: 10px 17px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}

.sadf {
    width: 50%;
}
.category1 {
    background-color: green;
    padding: 10px 17px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}
.category2 {
    background-color: #bb9f00;
    padding: 10px 17px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}
.category3 {
    background-color: #d10050;
    padding: 10px 17px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}
.category4 {
    background-image: linear-gradient(143deg, #008eec, #0092cc8f 96%);
    padding: 10px 17px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}

@media screen and (max-width: 1080px) {
.hed {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 10% 1% 20% 1%; */
    height: 535px;
    z-index: 9998;
    /* height: 100%; */
    font-size: 120%;
    text-shadow: 1px 3px 3px rgb(255, 255, 255);
}
}
@media screen and (max-width: 980px) {
.hed {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 10% 1% 20% 1%; */
    height: 500px;
    z-index: 9998;
    /* height: 100%; */
    font-size: 120%;
    text-shadow: 1px 3px 3px rgb(255, 255, 255);
}
.pdfs {
    width: 100%;
}
.news-container {
    width: 100%;
}
.category0 {
    background-color: rgb(0, 158, 158);
    padding: 5px 12px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}
.category1 {
    background-color: green;
    padding: 5px 12px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}
.category2 {
    background-color: #bb9f00;
    padding: 5px 12px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}
.category3 {
    background-color: #d10050;
    padding: 5px 12px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}
.category4 {
    background-image: linear-gradient(143deg, #008eec, #0092cc8f 96%);
    padding: 5px 12px;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
}
.filter-buttons button {
    padding: 5px 7px;
    /* margin-right: 10px; */
    cursor: pointer;
    /* background-color: #000000; */
    color: #b3b3b3;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 5px solid #b3b3b3;
    font-size: 80%;
    border-radius: 1.5px 1.5px 0px 0px;
}
.filter-buttons button:hover {
    padding: 5px 7px;
    /* margin-right: 10px; */
    cursor: pointer;
    /* background-image: url(../img/bt2.png); */
    background-size: cover;
    /* background-color: #0052aa; */
    color: white;
    /* border: solid 1px #0052aa; */
    border-bottom: 5px solid white;
    font-size: 80%;
    /* border-radius: 2.5px; */
}
}

@media screen and (max-width: 820px) {

.hed2 .text1 {
    margin: 0%;
    flex-wrap: wrap;
}
.hed2 .btns {
    margin-left: 0%;
    height: 100px;
    overflow: scroll;
    width: 100%;
}
.hed2 .pdf {
    width: 100%;
}
.hed5 {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 25% 1% 20% 1%; */
    /* margin-top: 10%; */
    height: 100vh;
    z-index: 9998;
    /* height: 100%; */
    background-image: linear-gradient(90deg, transparent, #ffffffa6 20%, #ffffff 45%);
}
.hed5 .idou > img {
    width: 100%;
}
.idou {
    padding-top: 70%;
    padding-left: 1%;
    padding-right: 1%;
}
        .player {
            background-color: #ffffff;
            margin-left: 1%;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
.hed5 {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 25% 1% 20% 1%; */
    height: 100vh;
    z-index: 9998;
    /* height: 100%; */
    background-image: linear-gradient(90deg, transparent, #ffffff00 20%, #ffffff00 45%);
}
.hed2 .text2 > img {
    width: 50%
}
.hed {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 10% 1% 20% 1%; */
    height: 435px;
    z-index: 9998;
    /* height: 100%; */
    font-size: 120%;
    text-shadow: 1px 3px 3px rgb(255, 255, 255);
}
}
@media screen and (max-width: 430px) {
.hed2 .text1 {
    font-size: 80%;
}
.hed2 .text2 > img {
    width: 70%
}
.hed {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 10% 1% 20% 1%; */
    height: 255px;
    z-index: 9998;
    /* height: 100%; */
    font-size: 120%;
    text-shadow: 1px 3px 3px rgb(255, 255, 255);
}
}
@media screen and (max-width: 415px) {
.hed {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 10% 1% 20% 1%; */
    height: 248px;
    z-index: 9998;
    /* height: 100%; */
    font-size: 120%;
    text-shadow: 1px 3px 3px rgb(255, 255, 255);
}
}
@media screen and (max-width: 390px) {
.hed {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 10% 1% 20% 1%; */
    height: 237px;
    z-index: 9998;
    /* height: 100%; */
    font-size: 120%;
    text-shadow: 1px 3px 3px rgb(255, 255, 255);
}
}
@media screen and (max-width: 380px) {
.hed {
    /* background-color: rgba(0, 0, 0, 0); */
    font-family: Zen Old Mincho;
    /* padding: 10% 1% 20% 1%; */
    height: 224px;
    z-index: 9998;
    /* height: 100%; */
    font-size: 120%;
    text-shadow: 1px 3px 3px rgb(255, 255, 255);
}
}