:root {
    --mTime: 15s;
}

.rotate {
    animation: rotate 0.4s linear infinite;
    display: inline-block;
}

.marquee {
    animation: marquee var(--mTime) linear infinite;
}

.runnning{
    background: white;
    color: black;
    width: 100%;
    overflow: hidden;
}
/* Google Chrome, Safari */
.runnning::-webkit-scrollbar {
    display: none;
}

/* Firefox */
.runnning {
    scrollbar-width: none;
}

.repeat {
    animation: repeat var(--mTime) steps(1) infinite;
    display: inline-block;
}

@keyframes rotate {
    0% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes marquee {
    0% {
        transform: translate(-50%);
    }

    50% {
        transform: translate(120%);
    }

    100% {
        transform: translate(-50%);
    }
}

@keyframes repeat {
    0% {
        transform: rotateY(0);
    }

    50% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0);
    }
}

body {
    display: flex;
    font-family: Arial, sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    flex-direction: column;
    color: #444444;
}

a {
    color: #007bff;
    text-decoration: none;
}

header {
    background-color: #4d4f75;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.container {
    flex: 1;
    display: flex;
}

aside {
    width: 200px;
    background-color: #f4f4f4;
    padding: 20px;
}

main {
    flex: 1;
    padding: 20px;
}

footer {
    background-color: #333333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    width: 100%;
    overflow: hidden;
}

li {
    margin-bottom: 0.5em;
    list-style-type: none;
}


.siteName {
    font-family: Times New Roman;
    font-size: 3em;
    margin: 0 0 0 .7em
}

a.siteName {
    color: #e6b422;
}

.vertical-center {
    vertical-align: middle;
}

.vertical-center img {
    vertical-align: middle;
}

.parent {
    margin-bottom: 1em;
}

.child {
    padding-left: 1em;
}

.new-label {
    font-size: small;
    color: white;
    background-color: #6688aa;
    padding: 3px 8px;
    border-radius: 5px;
    margin-left: 0.5em;
}

.linerNotes{
    text-align: center;
}

/* ゲームリスト */
.gameC{
    width:120px;
    height:200px;
    margin:5px;
    text-align:center;
    float:left;
    position: relative;
    border: #4d4f75 solid 1px;
    padding-top: 5px;
}

.gameT{
    background:#4d4f75;
    color:#ffffff;
    font-weight:bold;
    position:absolute;
    bottom:0;
    width:100%;
}


/* ハンバーガーメニュー */
#hamburger-menu {
    display: none; /* デフォルトでは非表示 */
}

/* 600px以下の画面幅の場合のスタイル */
@media screen and (max-width: 600px) {
    aside {
        display: none; /* サイドメニューを非表示にする */
    }

    #hamburger-menu {
        display: block; /* ハンバーガーメニューボタンを表示する */

    }
}

/* アコーディオンメニュー */
.accordion {
    background-color: #eee;
    color: #333;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
    vertical-align: middle;
}

.panel a {
    display: flex;
    padding: 12px 0;
    color: #333;
    text-decoration: none;
    vertical-align: middle;
}

.panel a:hover {
    background-color: #f4f4f4;
}

button{
    font-size: 1em;
}