@charset "utf-8";
body {
    background-image: url(https://urakosai.net/img/posterback.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: content-box;
    background-blend-mode:lighten;
    /*overflow: hidden;*/
}
.contents_box::-webkit-scrollbar{
    display: none;
}
header {
    text-align: center;
}
.mainContents{
    font-size:15px;
}
h1 {
    font-size: 60px;
    padding-top: 20px;
    text-align: center;
    font-weight: bold;
    margin: 1px;
}
.HR-description {
    text-align: center;
    font-size: 30px;
    margin: 0;
}
h2 {
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    margin: 1px;
}
h3 {
    font-size: 23px;
    text-align: center;
    font-weight: bold;
    margin: 1px;
}
caption {
    font-size: 25px;
    font-weight: bold;
    margin: 2px;
}
.wrapper {
    display: flex;
    justify-content: space-between;
}
/* スマートフォン表示など、画面幅が狭い場合は縦に並ぶようにする */
@media screen and (max-width: 768px) {
    .wrapper {
        display: block;
    }
}
.table-HR {
    flex-basis: 47%;
}
.table-club {
    flex-basis: 52%;
}
aside {
    display: none;
    flex-basis: 15%;
}

table {
    
    width: 100%;
    
    border-collapse: collapse;
}
/* ヘッダー */
#header {
    background-color: rgba(200, 200, 200, 0.87);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    top: 0%;
    
    width: 100%;
    height: 7%;
    position: fixed;
    display: flex;
    opacity: 0;
    left: 0;
    right: 0;
}
#header.visible {
    opacity: 1;
}

/* 偶数行の背景色を少し暗めにする */
.table-HR tbody tr:nth-child(even) {
    background-color: #626262; /* 薄いグレー。もう少し暗くしたいなら #e0e0e0 など */
}
/* 偶数行の背景色を少し暗めにする */
table tbody tr:nth-child(even) {
    background-color: #626262; /* 薄いグレー。もう少し暗くしたいなら #e0e0e0 など */
}

th, td {
    border: 1px solid black;
    text-align: center;
    padding: 2px;
    border-collapse: collapse; /* テーブルの枠線を結合する */
}
th {
    font-size: 15px;
    background-color: transparent;
}
td {
    font-size: 17px;
    background-color: transparent;
}

.group_name {
    font-weight: bold;
    font-size: 17px;
}

.operation_image {
    display: block;
    height: 40px;
    margin: 0 auto;
}
.operation_image_legend {
    max-width: 32px;
}

.mobile-hidden {
    display: block;
    opacity: 1;
}

.legend_nav {
    opacity: 0;
    display: none;
}

.legend th {
    padding: 3px;
}

footer p {
    margin: 2px;
}
@media screen and (max-width:768px) {
    .wrapper {
        display: block;
    }
    .mobile-hidden {
        display: none;
        opacity: 0;
    }
    .legend_nav {
        opacity: 1;
        display: block;
    }
}

.project-link {
    display: block;
}

.project-link:hover {
    filter: brightness(85%);
}

.qr {
    width: 95%;
    margin: 0 auto;
    padding: 0;
}
.qr-image {
    width: 100%;
}
footer {
    text-align: center;
}
.footer-description {
    font-size: 18px;
    margin-top: 15px;
}

.mainContents {
    width: 85%;
    margin: 50px auto; /* 5% autoから固定値に変更 */
    padding: 30px 5%; /* 7% 5%から縦を固定値に変更 */
    background-color: rgba(255, 255, 255, 0.664);
    border-radius: 10px;
    font-size: 15px;
    text-align: center;
    font-weight: 600;
    overflow-x: hidden;
}
.mainContents h3 {
    text-decoration: underline;
    text-decoration-color: rgba(255, 115, 35, 0.986);
    text-decoration-thickness: 10px;
}
.mainContents a {
    color: blue;
}