@charset "UTF-8";
/* 画面幅が640px以上の場合 */
#paris2024menu {
    width: 100%;               /* 幅を100%に設定 */
    /*max-width: 880px;*/          /* 最大幅を880pxに設定 */
    margin: 0 auto;            /* 上下のマージンを0にし、左右を自動に設定して中央揃え */
}
#paris2024menu .menu_pc {
    display: block;            /* 要素をブロック表示に設定 */
}
#paris2024menu .menu_sp {
    display: none;             /* 要素を非表示に設定 */
}

.QRKYDOG__all-view_link {
    display: none;             /* 共同パーツのメダルランキングウィジェットから「すべて見る」を非表示に */
}

#paris2024menu .linkbtns {
    list-style: none;          /* リストのスタイルをなしに設定 */
    width: 100%;               /* 幅を100%に設定 */
    display: flex;             /* フレックスボックスを使用して横並びに配置 */
    flex-wrap: nowrap;         /* 折り返しなしでフレックスアイテムを配置 */
    justify-content: flex-start; /* フレックスアイテムを左揃えに配置 */
}

#paris2024menu .linkbtns li {
    width: calc(100% / 3);     /* 親要素の幅を7等分に設定 */
    text-align: center;        /* テキストを中央揃えに設定 */
    height: 43px;              /* 高さを37pxに設定 */
    line-height: 37px;         /* 行の高さを37pxに設定してテキストを中央揃えに */
    position: relative;        /* 相対位置に設定して擬似要素の位置基準に */
    overflow: hidden;          /* オーバーフローを隠す */
}

#paris2024menu .linkbtns li a {
    display: inline-block;     /* リンクをインラインブロック表示に設定 */
    background-color: #104284; /* 背景色を#104284に設定 */
    width: 100%;               /* 幅を100%に設定 */
    color: #FFF;               /* 文字色を白に設定 */
    font-size: 1.5rem;         /* フォントサイズを1.5remに設定 */
    border-bottom: 3px solid #104284; /* 下部に3pxの#FFF色のボーダーを設定 */
    padding-top: 3px;          /* 上のパディングを3pxに設定 */
    white-space: nowrap;       /* 改行を無効に設定 */
    overflow: hidden;          /* オーバーフローを隠す */
    text-overflow: ellipsis;   /* テキストがあふれた場合に省略記号を表示 */
}

/* paris2024menu ID内のlinkbtnsクラス内のli要素のafter擬似要素に適用するスタイル */
#paris2024menu .linkbtns li::after {
    content: "";               /* 空の内容を設定 */
    position: absolute;        /* 絶対位置に設定 */
    right: 0;                  /* 右端に位置設定 */
    top: 12px;                 /* 上から12pxに位置設定 */
    width: 1px;                /* 幅を1pxに設定 */
    height: 20px;              /* 高さを20pxに設定 */
    background-color: #FFF;    /* 背景色を白に設定 */
}

/* paris2024menu ID内のlinkbtnsクラス内の最後のli要素のafter擬似要素に適用するスタイル */
#paris2024menu .linkbtns li:last-child::after {
    content: none;             /* 擬似要素の内容をなしに設定 */
}

/* paris2024menu ID内のlinkbtnsクラス内のli要素内のaタグのホバー時のスタイル */
#paris2024menu .linkbtns li a:hover {
    opacity: 1;                /* 不透明度を1に設定 */
    border-bottom: 3px solid #C1272D; /* 下部ボーダー色を#C1272Dに変更 */
}

/* 画面幅が640px以下の場合のメディアクエリ */
@media screen and (max-width: 640px) {
    #paris2024menu .menu_pc {
        display: none;         /* 要素を非表示に設定 */
    }

    #paris2024menu .menu_sp {
        display: block;        /* 要素をブロック表示に設定 */
    }

    #paris2024menu .linkbtns {
        overflow-x: auto;      /* 横方向のオーバーフローを自動に設定 */
        overflow-y: hidden;    /* 縦方向のオーバーフローを隠す設定 */
        height: auto;          /* 高さを自動に設定 */
        width: 100%;           /* 幅を100%に設定 */
        -webkit-overflow-scrolling: touch; /* タッチスクロールを有効に設定 */
        white-space: nowrap;   /* 改行を無効に設定 */
    }

    #paris2024menu .linkbtns li {
        flex: 0 0 auto;        /* フレックスアイテムの基本サイズを維持 */
        width: auto;           /* 幅を自動に設定 */
        height: auto;          /* 高さを自動に設定 */
        line-height: normal;   /* 行の高さを通常に設定 */
    }

    #paris2024menu .linkbtns li a {
        width: auto;           /* 幅を自動に設定 */
        padding: 10px 20px;    /* 十分なパディングを設定 */
        white-space: nowrap;   /* 改行を無効に設定 */
        overflow: hidden;      /* オーバーフローを隠す */
        text-overflow: ellipsis; /* テキストがあふれた場合に省略記号を表示 */
        box-sizing: border-box; /* ボックスのサイズを境界ボックスに基づいて計算 */
    }

    #paris2024menu .linkbtns li::after {
        content: none;         /* 擬似要素の内容をなしに設定 */
    }
}