@charset "utf-8";

@media only screen and (max-width:599px) {
    body {
        min-width: auto;
        font-size: 14px;
    }

    main {
        padding-top: 57px;
    }

    .container {
        width: 90%;
    }

    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }

    /* ヘッダー */

    .head-wrap {
        padding: 5px 0;
        width: 95%;
    }

    header {
        background-color: #fff;
        min-width: auto;
        position: fixed;
    }

    header .logo {
        width: 180px;
        padding-top: 0;
    }

    header .head-info {
        display: none;
    }

    header .sns {
        margin-left: 10px;
    }

    header .sns ul li {
        margin-left: 8px;
    }

    header .sns ul li img {
        height: 40px;
    }

    .navi-btn-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }

    .navi-btn {
        width: 32px;
        position: relative;
        cursor: pointer;
        display: inline-block;
        z-index: 1;
        height: 22px;
    }

    .navi-btn span {
        position: absolute;
        display: block;
        width: 32px;
        height: 3px;
        background: #031b6a;
        border-radius: 5px;
        transition: all .3s;
    }

    .navi-btn span:nth-of-type(2) {
        top: 11px;
        opacity: 1;
        transition: all .3s;
    }

    .navi-btn span:last-of-type {
        top: 22px;
    }

    .navi-btn-on span:first-of-type {
        transform: rotate(-45deg) translateY(8px) translateX(-6px);
    }

    .navi-btn-on span:nth-of-type(2) {
        transform: translateX(0);
        opacity: 0;
    }

    .navi-btn-on span:last-of-type {
        transform: rotate(45deg) translateY(-9px) translateX(-7px);
    }

    #gnav {
        display: none;
        position: absolute;
        width: 100%;
        padding-bottom: 5px;
        padding-top: 15px;
        max-height: calc(100vh - 51px);
        max-height: calc(100dvh - 51px);
        overflow-y: scroll;
        top: 51px;
    }

    #gnav ul {
        display: block;
    }

    #gnav>ul>li {
        border: none;
        margin-bottom: 12px;
    }

    #gnav>ul>li:first-child {
        border: none;
    }

    #gnav ul li ul {
        position: static;
    }

    #gnav ul li a {
        background-color: #fff;
        color: #333;
        text-align: left;
        padding: 10px;
        display: flex;
        align-items: center;
    }

    #gnav ul li > a.active {
        background-color: #0051a3;
        color: #fff;
    }

    #gnav ul li > a::after {
        border-top: solid 2px #031b6a;
        border-right: solid 2px #031b6a;
        width: 7px;
        height: 7px;
        transform: rotate(45deg);
        display: inline-block;
        flex-shrink: 0;
        -webkit-flex-shrink: 0;
        content: "";
        margin-left: auto;
    }

    #gnav ul li > a.active::after {
        transform: rotate(135deg);
        border-color: #fff;
    }

    #gnav ul li a:hover {
        opacity: 1;
    }

    #gnav ul li.mult:hover ul {
        display: none;
    }

    #gnav ul li ul li {
        border-color: #000;
    }
    
    #gnav ul li ul li:hover {
        background: #fff;
    }
    

    /* フッター */

    .foot-wrap {
        padding-top: 30px;
    }

    footer .logo img {
        width: 240px;
    }

    footer .menu-area {
        flex-wrap: wrap;
        margin: 0 -12px;
        margin-top: 25px;
    }

    footer .menu-area>div {
        margin: 0;
        width: 50%;
        padding: 10px 12px;
        min-width: auto;
    }

    footer .menu-area .menu-title {
        padding: 5px;
        text-align: left;
    }

    footer .bnr-area {
        margin-bottom: 20px;
    }

    .foot-btm {
        margin-top: 10px;
    }

    .copyright {
        padding: 10px 0;
    }

    #pagetop {
        bottom: 120px;
    }

    /* TOP */

    #top-fixed-news .container {
        width: 95%;
    }

    #top-fixed-news .news-title {
        margin-right: 10px;
    }

    #top-fixed-news .news-title img {
        height: 26px;
    }

    #top-fixed-news .contents {
        padding: 4px 0;
    }

    .top-main-contents {
        padding-bottom: 30px;
    }

    .top-main-contents-wrapper {
        display: block;
    }

    .top-main-contents-left {
        float: none;
        width: 100%;
        padding-right: 0;
    }

    .top-main-contents-right {
        float: none;
        width: 100%;
    }

    .nextevent-title {
        font-size: 1.2em;
    }

    .top-main-contents-left {
        margin-bottom: 20px;
    }

    .information {
        padding-bottom: 0;
    }

    .info-wrapper {
        display: block;
    }

    .info-left {
        width: 100%;
    }

    .info-right {
        width: 100%;
        padding-top: 30px;
    }

    .info-tab-area {
        width: 100%;
    }

    .tab-list-wrap li:first-child {
        margin-right: 5px;
    }

    .info-right-btn {
        font-size: 1em;
        padding: 10px;
        display: inline-block;
        margin-left: 0;
        line-height: inherit;
        width: 95%;
        height: auto;
        margin-top: 15px;
    }

    .info-twieets {
        max-height: unset;
        padding: 1px;
    }

    .tab-content {
        width: 100%;
        padding: 15px;
    }

    .tab-content .content-list {
        padding-right: 5px;
        height: 370px;
    }

    .info-next {
        margin-top: 20px;
    }

    .twitter-timeline {
        width: 100%;
        padding-left: 0;
    }

    .other-wrapper {
        display: block;
    }

    .other .live {
        width: 100%;
        margin-bottom: 20px;
    }

    .other .live h2 {
        padding: 10px 15px;
    }

    .other .live .btn-area {
        padding: 10px;
    }

    .other .live .btn-area ul li a {
        width: 100px;
        font-size: 1em;
    }

    .other .ponstar {
        width: 100%;
        margin: 0;
        margin-bottom: 20px;
    }

    .other .ponstar h2 {
        padding: 10px 15px;
    }

    .other .ponstar .news-item .item-content h3 {
        font-size: 0.8em;
    }

    .other .inside-event {
        width: 100%;
    }

    .other .inside-event .img-area img {
        height: auto;
    }

    .other .inside-event h2 {
        padding: 10px 15px;
    }

    .detail-text {
        font-size: 0.9em;
    }

    .detail-mark {
        font-size: 1.5em;
    }

    .schedule-bottom-wrapper {
        display: block;
    }

    .schedule-note {
        width: 100%;
        margin: 20px 0 0 0;
    }

    .outside-schedule {
        width: 400px;
        padding-top: 7px;
        margin-left: 30px;
    }

    .outside-schedule::before {
        left: 320px;
        width: 6px;
        height: 6px;
    }

    .event-area {
        grid-template:
            "title1"
            "left"
            "right2"
            "title2"
            "right1"/ 100%;
    }

    .event-other {
        justify-content: center;
        padding-bottom: 15px;
    }

    .event-contents-next {
        height: auto;
        line-height: inherit;
        padding: 8px;
        width: 90%;
        margin-top: 5px;
    }

    .nextevent-note {
        padding-top: 5px;
    }

    .event-other-item {
        padding-bottom: 10px;
        padding-top: 5px;
    }

    .event-icon {
        padding-top: 6px;
    }

    .event-outside {
        padding: 10px;
        text-align: center;
    }

    .nextevent {
        text-align: center;
    }

    .tanuki01 {
        width: 60px;
        height: 60px;
        top: 10px;
        left: -10px;
    }

    .player-introduction-main {
        height: 425px;
    }

    .info-left-wrapper {
        text-align: center;
    }

    .info-left-title-icon {
        display: inline-block;
        margin-right: 10px;
        width: 50px;
    }

    .info-left-title {
        margin-left: 0;
    }

    .info-right-wrapper {
        flex-wrap: wrap;
        text-align: center;
    }

    .info-right-title-icon {
        display: inline-block;
        width: 50px;
        margin-right: 10px;
    }

    .info-right-title {
        margin-left: 0;
        display: inline-block;
    }

    .schedule {
        padding-top: 30px;
    }

    .schedule-title-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .schedule-title-icon {
        display: inline-block;
        width: 50px;
    }

    .schedule-title {
        margin-left: 0;
    }

    .schedule-list {
        overflow: auto;
    }

    .schedule-list table {
        min-width: 1000px;
    }

    .schedule-list th {
        width: 80px;
    }

    .schedule-list td img {
        height: 18px;
    }

    .schedule-list tbody td {
        height: 80px;
    }

    .schedule-bottom-wrapper {
        display: block;
    }

    .outside-schedule-btn {
        width: 100%;
        display: block;
    }

    .schedule-guide {
        margin-top: 10px;
        width: 100%;
    }

    .outside-schedule {
        width: 320px;
        padding-top: 7px;
    }

    .outside-schedule::before {
        left: 280px;
        width: 6px;
        height: 6px;
    }

    #schedule .schedule-list {
        margin-top: 20px;
    }

    #schedule .tab {
        flex-wrap: wrap;
        margin: 0 -5px;
    }

    #schedule .tab li {
        width: calc(100%/3);
        padding: 5px;
    }

    #schedule .tab li span {
        font-size: 1em;
        padding: 8px;
    }

    .btn-text {
        font-size: 1.3em;
    }

    .breadcrumb {
        margin-bottom: 30px;
    }

    .main-contents {
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .main-title {
        margin-bottom: 20px;
    }

    .main-title img {
        width: 60px;
        margin-right: 10px;
    }

    .main-title h1 {
        font-size: 1.5em;
        margin-top: 5px;
    }

    .race-table-list>div:not(:last-child) {
        margin-bottom: 30px;
    }

    #race-table h2 {
        font-size: 1.2em;
        padding: 8px 10px;
        border-width: 5px;
        margin-bottom: 15px;
    }

    #racefocus .lead {
        text-align: left;
    }

    .race-tab {
        margin-top: 25px;
        margin-bottom: 30px;
    }

    .race-tab ul {
        flex-wrap: wrap;
        margin: -5px;
    }

    .race-tab ul li {
        width: calc(100%/4);
        padding: 5px;
    }

    .race-tab ul li a {
        padding: 8px;
        font-size: 1em;
    }

    #racefocus h2 {
        font-size: 1.2em;
        padding: 8px 10px;
        border-width: 5px;
        margin-bottom: 15px;
    }

    .racefocus-list>div:not(:last-child) {
        margin-bottom: 20px;
    }

    /* 開催情報 */

    #holding h2 {
        font-size: 1.2em;
        padding: 8px 10px;
        border-width: 5px;
    }

    #holding .cts {
        padding: 20px 0;
    }

    /* 斡旋情報 */

    #assen .tab {
        flex-wrap: wrap;
        margin: -5px;
        margin-bottom: 20px;
    }

    #assen .tab li {
        width: calc(100%/4);
        padding: 5px;
    }

    #assen .tab li button {
        font-size: 1em;
        padding: 8px;
    }

    #assen table th {
        padding: 5px 10px;
    }

    #assen table td {
        padding: 5px 10px;
    }

    /* 本日の出場レース */

    #participation .table-wrapper {
        overflow: auto;
    }

    #participation table {
        white-space: nowrap;
    }

    #participation table th {
        padding: 5px 20px;
    }

    .tablesorter th::before,
    .tablesorter th::after {
        border-width: 4px;
        right: 5px;
    }

    .tablesorter th::before {
        top: 34%;
    }

    .tablesorter th::after {
        bottom: 34%;
    }

    #participation table td {
        padding: 5px 10px;
    }

    /* 選手一覧 */

    #player .tab {
        flex-wrap: wrap;
        margin: -5px;
    }

    #player .tab li {
        width: calc(100%/3);
        padding: 5px;
    }

    #player .tab li span {
        font-size: 1em;
        padding: 8px;
    }

    #player .player-list-wrap {
        margin-top: 25px;
    }

    #player h2 {
        font-size: 1.2em;
        padding: 8px 10px;
        border-width: 5px;
        margin-bottom: 20px;
    }

    #player .player-list .list-box {
        margin: 0;
        display: block;
    }

    #player .player-list .player-box {
        width: 100%;
        padding: 0;
        margin-bottom: 15px;
    }

    #player .player-list .player-box a>div {
        width: 100%;
    }

    #player .player-list .player-box .img-area img {
        max-height: 210px;
    }

    /* ポンスターニュース */

    #ponstar .main-title {
        margin-bottom: 20px;
    }

    #ponstar .select-wrap select {
        width: 100%;
    }

    #ponstar .news-item {
        width: 50%;
    }

    #ponstar .news-item .item-content h3 {
        font-size: 0.8em;
    }

    #ponstar .pager {
        margin-top: 30px;
    }

    #ponstar .article-box .title {
        padding: 8px 10px;
        border-width: 5px;
    }

    #ponstar .article-box .title h2 {
        font-size: 1.2em;
    }

    #ponstar .article-box .cts {
        padding: 20px 0px;
    }

    #ponstar .link-box {
        margin-top: 10px;
    }

    #ponstar .link-box a {
        padding: 10px;
    }

    #ponstar .link-box a span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    #ponstar .link-box .back-link a::before {
        margin-left: 5px;
        margin-right: 8px;
    }

    #ponstar .link-box .next-link a::after {
        margin-left: 8px;
        margin-right: 5px;
    }

    /* お知らせ・イベント */

    #news .pager {
        margin-top: 20px;
    }

    #news .article-box h2 {
        font-size: 1.2em;
        padding: 8px 10px;
        border-width: 5px;
    }

    #news .article-box .cts {
        padding: 20px 0;
    }

    #news .tab {
        flex-wrap: wrap;
        margin: -5px;
        margin-bottom: 15px;
    }

    #news .tab li {
        width: calc(100%/3);
        padding: 5px;
    }

    #news .tab li span {
        font-size: 1em;
        padding: 8px;
    }

    #news .link-box {
        margin-top: 10px;
    }

    #news .link-box a {
        padding: 10px;
    }

    #news  .link-box a span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    #news .link-box .back-link a::before {
        margin-left: 5px;
        margin-right: 8px;
    }

    #news .link-box .next-link a::after {
        margin-left: 8px;
        margin-right: 5px;
    }

    /* データBOX */

    #date .lead {
        font-size: 1em;
        margin-bottom: 20px;
    }

    #date .gender-link {
        margin-bottom: 15px;
    }

    #date .gender-link .tab {
        display: flex;
        margin: 0 -5px;
    }

    #date .gender-link ul li {
        width: 100%;
        margin: 0 5px;
        font-size: 1em;
        padding: 8px;
    }

    #date .c-menu-anchor {
        margin-bottom: 20px;
    }

    #date .c-menu-anchor ul {
        margin: 0 -5px;
    }

    #date .c-menu-anchor ul li {
        margin: 0 5px;
        font-size: 1em;
        padding: 8px;
    }

    #date .table {
        font-size: 0.9em;
    }

    #date .table .head li {
        padding: 5px;
    }

    #date .table .contents li {
        padding: 5px 3px;
    }

    #date .table ul.contents li.deme span {
        height: 20px;
        width: 20px;
        line-height: 20px;
        margin: 3px;
    }

    /* リーフレット */

    #leaflet h2 {
        font-size: 1.2em;
        padding: 8px 10px;
        border-width: 5px;
        margin-bottom: 15px;
    }

    .leaflet-list>div:not(:last-child) {
        margin-bottom: 30px;
    }

    /* アクセス */

    #access h2 {
        font-size: 1.2em;
        padding: 8px 10px;
        border-width: 5px;
        margin-bottom: 20px;
    }

    #access .contents-area-left>div:not(:last-child) {
        margin-bottom: 15px;
    }

    #access .contents-title {
        margin-bottom: 15px;
    }

    #access .contents-title h3 {
        font-size: 1.1em;
    }

    #access .contents-area-left p {
        font-size: 1em;
    }

    #access .contents-area-wrapper {
        flex-direction: column;
    }

    #access .contents-area-left {
        width: 100%;
        margin-right: 0;
        order: 2;
    }

    #access .contents-area-right {
        width: 100%;
        order: 1;
        margin-bottom: 20px;
        height: 200px;
    }

    #access .get-opening {
        margin-top: 15px;
        margin-bottom: 15px;
    }

    #access .main-contents table {
        font-size: 1em;
    }

    #access .main-contents .access-photo {
        display: block;
        margin: 0;
    }

    #access .main-contents .access-photo .access-photo-contents {
        width: 100%;
        padding: 0;
        margin-bottom: 15px;
    }

    .s_kamojima {
        margin-top: 40px;
    }

    /* バンク */

    #bank .contents-area table {
        width: 100%;
    }

    #bank .contents-area table tr {
        text-align: center;
        font-size: 1em;
        line-height: 50px;
    }

    #bank .contents-area table th {
        border-bottom: #081c6a solid 1px;
    }

    #bank .contents-area table td {
        border-bottom: #081c6a solid 1px;
    }

    /* リンク */

    #link .contents-area .link-top {
        margin-bottom: 20px;
    }

    #link .contents-area .link-wrapper {
        display: block;
        margin: 0;
    }

    #link .contents-area .link-contents {
        width: 100%;
        padding: 0;
        margin-bottom: 20px;
    }

    #link .contents-area .link-wrapper.small-bnr {
        margin: 0 -8px;
        display: flex;
    }

    #link .contents-area .link-other-contents {
        width: 50%;
        padding: 8px;
    }

    /* プライバシーポリシー */

    #privacy .contents-area .privacy-top-message {
        margin-bottom: 10px;
    }

    #privacy .contents-area h2 {
        line-height: 50px;
        font-size: 1.2em;
    }

    #privacy .contents-area p {
        font-size: 0.9em;
        line-height: normal;
    }

    #privacy .contents-area .contact p .privacy-main-message {
        display: none;
    }

    #privacy .contents-area .contact {
        margin-top: 25px;
        text-align: left;
    }

    #privacy .contents-area .contact h2 {
        line-height: normal;
        margin-bottom: 10px;
        text-align: center;
    }

    /* インフォメーション */

    #info h2 {
        font-size: 1.2em;
        padding: 8px 10px;
        border-width: 5px;
        margin-bottom: 20px;
    }

    #info h3 {
        font-size: 1.1em;
        margin-bottom: 5px;
    }

    .cable-tv table {
        font-size: 1em;
    }

    .cable-tv table th {
        display: block;
        padding: 10px 15px;
    }

    .cable-tv table td {
        display: block;
        padding: 10px 15px;
    }

    .cable-tv table td ul {
        padding-left: 20px;
    }

    .event-title-left {
        padding-left: 1.8rem;
    }

    /* お問い合わせ */

    #contact .lead {
        text-align: left;
        margin-bottom: 20px;
    }

    #contact .form-area table {
        width: 100%;
    }

    #contact .form-area table tr {
        display: block;
        margin-bottom: 5px;
    }

    #contact .form-area table th {
        display: block;
        width: 100%;
        padding: 0;
    }

    #contact .form-area table td {
        display: block;
        padding: 10px 0;
    }

    #contact .form-area .btn-area {
        margin-top: 10px;
    }

    #contact .recaptcha-msg {
        margin-top: 30px;
        text-align: left;
    }

    /* キャンペーン */

    #campaign .form-area h2 {
        font-size: 1.4em;
        margin-bottom: 20px;
    }

    #campaign .form-area .msg-box {
        margin-top: 20px;
        padding: 15px 10px;
    }

    #campaign .form-area .msg-box {
        width: auto;
    }

    #campaign .lead {
        margin-bottom: 20px;
    }

    #campaign .form-area table {
        width: 100%;
    }

    #campaign .form-area table tr {
        display: block;
        margin-bottom: 5px;
    }

    #campaign .form-area table th {
        display: block;
        width: 100%;
        padding: 0;
    }

    #campaign .form-area table td {
        display: block;
        padding: 10px 0;
    }

    #campaign .form-area .btn-area {
        margin-top: 10px;
    }
}