.body {
    font-size: 16px;
    background-color: #d2dde9ca;
    width: 100%;
}

footer {
    margin-top: 10px;
    padding-top: 10px;
    height: 50px;
    background-color: rgba(2, 0, 36, 1);
    color: #fff;
}

/* hanberger ===============*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn {
    /*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
    position: relative;
    /* background: #cdcce3; */
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    border: 0px;
}

/*ボタン内側*/
.openbtn span {
    display: inline-block;
    transition: all .4s;
    /*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
    background: #fff;
    width: 45%;
}

.openbtn span:nth-of-type(1) {
    top: 13px;
}

.openbtn span:nth-of-type(2) {
    top: 19px;
}

.openbtn span:nth-of-type(3) {
    top: 25px;
}

.openbtn span:nth-of-type(3)::after {
    content: "Menu";
    /*3つ目の要素のafterにMenu表示を指定*/
    position: absolute;
    top: 5px;
    left: -2px;
    color: #fff;
    font-size: 0.6rem;
    text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn.active span:nth-of-type(1) {
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(3)::after {
    content: "Close";
    /*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
    top: 5px;
    left: 4px;
}

.hero {
    /* background-image: url('/result/public/img/live_main.jpg'); */
    background-image: url('../img/live_main.jpg');
    background-size: cover;
    height: 100vh;
}

.second-hero {
    /* background-image: url('/result/public/img/hero2.jpg'); */
    background-image: url('../img/hero2.jpg');
    background-size: cover;
    height: fit-content;
}

.child {
    margin-top: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.fontBK {
    color: #333333;
}

.font-large {
    font-size: 2em;
}

.font-midiam {
    font-size: 1.2em;
}

.font-small {
    font-size: 0.8em;
}

.font-bold {
    font-weight: bold;
}

/* カラー系 */
.dark-blue__bg { 
    background-color: #1b3477;
}

.dark-blue__fc { 
    color: #1b3477;
}

.baby-blue_bg {
    background-color: #89a8fdb0;
}

.baby-blue_fc { 
    color: #89a8fdb0;
}

.slate-gray__bg { 
    background-color: #708090;
}

.slate-gray__fc { 
    color: #708090;
}

.powder-blue__bg {
    background-color: #e0e5ec;
} 

.powder-blue__fc {
    color: #e0e5ec;
}

/* インデックスロゴ */
.visual {
    /* background: url({path}/visual.jpg) no-repeat right top; */
    margin: auto;
    position: relative;
    width: 100%;
    height: fit-content;
}

.visual .mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.visual .txt {
    font-size: 0;
    line-height: 0.6;
    position: absolute;
    top: 85px;
    left: 40px;
}

.visual .line {
    display: block;
    font-family: "Josefin Sans";
    /* google fonts を使用しています */
    font-size: 60px;
    font-weight: bold;
}

.visual .line+.line {
    margin-top: 15px;
}

.visual .letter {
    display: inline-block;
    padding-top: 5px;
}

.visual .large {
    font-size: 80px;
}


/* 初期は非表示 */

.visual .line,
.visual .letter {
    opacity: 0;
}


/* is-visible になったらアニメーション開始 */

.visual.is-visible .line {
    opacity: 1;
}

.visual.is-visible .letter {
    animation: slideIn .8s cubic-bezier(0, 1.2, .13, 1.5) forwards;
}

.header-text {
    font-weight: bold;
    font-size: 1.5em;
    color: black;
    text-decoration: none;
}

.eigo {
    font-family: 'Times New Roman', sans-serif;
}

.game-card {
    width: 50%;
    padding-bottom: 2px;
}

.admincard {
    width: 80%;
    min-height: 90vh;
}
/* 文字が左から出てくるアニメーション（お好みの動きでどうぞ） */

/* インデックスロゴ下ボタン */
.scroll-btn {
    color: white;
    background-color: #ffc107;
    border: none;
    cursor: pointer;
    box-shadow: 2px 4px 8px rgba(238, 233, 233, 0.6);/* 立体感を持たせるシャドウ */
    transition: all 0.3s ease; /* ホバー時の滑らかな変化 */
    display: inline-block;
    border-radius: 5px; /* 角を少し丸く */
    font-weight: bold; /* テキストを太字に */
}

.scroll-btn:hover {
    background-color: #1b3477;
    color: aliceblue;
    box-shadow: 2px 2px 12px rgba(238, 233, 233, 0.6); /* ホバー時にシャドウを強調 */
    transform: translateY(-2px); /* ホバー時に少し浮き上がる */
}

.scroll-btn:active {
    background-color: #0f1f4b; /* クリック時に暗くする */
    box-shadow: inset 2px 2px 4px rgba(238, 233, 233, 0.6); /* 押し込まれたように見せる */
    transform: translateY(0); /* 押すと元に戻る */
}

.scroll-btn:focus {
    outline: none;
}

.hanamaru {
    width: 1.5em;
    height: 1.5em;
}


@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translate3d(-100px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (min-width: 767.98px) {
    thead {
        font-size: 1em;
    }
    tbody {
        font-size: 1em;
    }
}
@media (max-width:768px) {
    .second-hero {
        background-image: url('../img/hero2.jpg');
        background-size: cover;
        height: fit-content;
    }
    .visual .line {
        display: block;
        font-family: "Josefin Sans";
        /* google fonts を使用しています */
        font-size: 60px;
        font-weight: bold;
    }
    .visual .large {
        font-size: 80px;
    }
    .font-large {
        font-size: 1.9em;
    }
    .font-midiam {
        font-size: 1.3em;
    }
    .body {
        font-size: 16px;
        background-color: #d2dde9ca;
        width: 100%;
    }
    .admincard {
        width: 97%;
        min-height: 90vh;
    }
}
@media (max-width:480px) {
    .second-hero {
        background-image: url('../img/hero2.jpg');
        background-size: cover;
        height: fit-content;
    }
    .visual .line {
        display: block;
        font-family: "Josefin Sans";
        /* google fonts を使用しています */
        font-size: 40px;
        font-weight: bold;
    }
    .visual .large {
        font-size: 60px;
    }
    .font-large {
        font-size: 1.5em;
    }
    .font-midiam {
        font-size: 1em;
    }
    .body {
        font-size: 16px;
        background-color: #d2dde9ca;
        width: 100%;
    }
    .admincard {
        width: 97%;
        min-height: 90vh;
    }
    .hanamaru {
        width: 1.2em;
        height: 1.2em;
    }
}

@media (max-width:360px) {
    .second-hero {
        background-image: url('../img/hero2.jpg');
        background-size: cover;
        height: fit-content;
    }
    .visual .line {
        display: block;
        font-family: "Josefin Sans";
        /* google fonts を使用しています */
        font-size: 30px;
        font-weight: bold;
    }
    .visual .large {
        font-size: 40px;
    }
    .font-large {
        font-size: 1.3em;
    }
    .font-midiam {
        font-size: 1em;
    }
    .body {
        font-size:14px;
        background-color: #d2dde9ca;
        width: 100%;
    }
    .admincard {
        width: 97%;
        min-height: 90vh;
    }
    .hanamaru {
        width: 1em;
        height: 1em;
    }
}

/* LIVE RESULTS global navigation */
.lr-site-header {
    z-index: 1030;
}

.lr-site-nav {
    padding-block: var(--bs-navbar-padding-y, 0.5rem);
}

.lr-site-brand {
    flex: 0 0 auto;
}

.lr-site-brand .navbar-brand {
    margin-right: var(--bs-navbar-brand-margin-end, 1rem);
    padding-block: var(--bs-navbar-brand-padding-y, 0.3125rem);
}

.lr-site-menu,
.lr-site-menu-list {
    color: oklch(97% 0.01 235);
}

.lr-section-switch,
.lr-nav-home {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: oklch(97% 0.01 235) !important;
    font-size: 0.84rem;
    font-weight: 720;
    letter-spacing: 0.02em;
}

.lr-section-switch:hover,
.lr-section-switch:focus-visible,
.lr-nav-home:hover,
.lr-nav-home:focus-visible {
    color: oklch(91% 0.12 205) !important;
}

.lr-section-switch:focus-visible,
.lr-nav-home:focus-visible,
.lr-category-link:focus-visible {
    outline: 3px solid oklch(88% 0.13 199);
    outline-offset: 2px;
}

.lr-category-menu {
    width: min(520px, calc(100vw - 32px));
    max-height: min(62vh, 520px);
    margin-top: 10px !important;
    padding: 0;
    overflow-y: auto;
    border: 1px solid oklch(77% 0.04 240);
    border-radius: 2px;
    background: oklch(98% 0.008 235);
    box-shadow: 0 18px 42px oklch(17% 0.07 270 / 0.28);
}

.lr-category-menu li + li {
    border-top: 1px solid oklch(86% 0.025 238);
}

.lr-category-link {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 11px 14px 11px 18px;
    color: oklch(23% 0.065 260);
    background: transparent;
    transition: background-color 180ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lr-category-link:hover,
.lr-category-link:focus {
    color: oklch(19% 0.075 264);
    background: oklch(94% 0.035 226);
}

.lr-category-link.is-current {
    color: oklch(20% 0.085 264);
    background: oklch(91% 0.055 228);
    font-weight: 750;
}

.lr-category-link__name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.96rem;
    line-height: 1.45;
}

.lr-category-state {
    min-width: 68px;
    padding: 5px 8px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.lr-category-state--current,
.lr-category-state--live {
    color: oklch(48% 0.14 245);
    background: oklch(97% 0.02 228);
}

.lr-category-state--result {
    color: oklch(38% 0.09 155);
    background: oklch(97% 0.025 151);
}

.lr-category-state--waiting {
    color: oklch(48% 0.025 245);
    background: oklch(96% 0.01 240);
}

@media (max-width: 1199.98px) {
    .lr-site-nav .container-fluid {
        align-items: center;
    }

    .lr-site-menu {
        flex-basis: 100%;
        padding-top: 12px;
    }

    .lr-site-menu-list {
        width: 100%;
        gap: 5px;
    }

    .lr-category-menu {
        position: static !important;
        width: 100%;
        transform: none !important;
        margin: 6px 0 12px !important;
    }

    .lr-nav-home {
        padding-inline: 2px;
    }
}

@media (max-width: 575.98px) {
    .lr-category-link {
        min-height: 56px;
        gap: 10px;
        padding-inline: 13px 11px;
    }

    .lr-category-state {
        min-width: 62px;
        font-size: 0.64rem;
    }
}