@charset "utf-8";

/* reset */
*,*::before,*::after{box-sizing:border-box;margin: 0;padding: 0;}
ol,ul,menu,summary{list-style:none;}
a{text-decoration: none;}

/* style */
.sitemap {
    clear: both;
    max-width: 750px;
    margin: 0 auto;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.page-title {
    padding: 1em;
    margin-bottom: 6.6vw;
    background-color: #eee;
    font-size: 3.73vw;
    color: #333;
    line-height: 1;
}

.categories {
    display: flex;
    width: 100%;
    border-top: 1px solid #d6d6d6;
}
.categories-item {
    flex: 1;
    border-bottom: 1px solid #d6d6d6;
    > a {
        padding: .8em 0;
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        color: #333;
        font-size: 3.73vw;
        font-weight: bold;
        line-height: 1.28;
        background-color: #efefef;
    }
    &:not(:first-child) {
        border-left: 1px solid #d6d6d6;
    }
    &.current {
        border-bottom-color: #fff;
        > a {
            background-color: #fff;
        }
    }
}

.sitemap-title {
    padding: 1em;
    font-size: 5.33vw;
    text-align: center;
    line-height: 1;
}

.sitemap-item {
    border-top: 1px solid #000;
    > span {
        position: relative;
        display: block;
        padding: 1em 0 1em 18.5vw;
        font-size: 4.26vw;
        font-weight: bold;
        color: #333;
        &::before {
            position: absolute;
            left: 4vw;
            top: 3.4vw;
            content: "";
            display: block;
            width: 8.53vw;
            height: 8.53vw;
        }
    }
}
.sitemap-item--index {
    border-color: #cb8b0e;
    > span {
        background-color: #fef1e9;
    }
}
.sitemap-item--keiba {
    border-color: #4db477;
    > span {
        background-color: #ecf8f1;
    }
}
.sitemap-item--keirin {
    border-color: #2aaeda;
    > span {
        background-color: #e5f5fa;
    }
}
.sitemap-item--autorace {
    border-color: #9674e0;
    > span {
        background-color: #f2edf9;
    }
}
.sitemap-item--loto {
    border-color: #f38570;
    > span {
        background-color: #ffefec;
    }
}
.sitemap-item--vote {
    > span {
        &::before {
            background: url(../images/icon_vote.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--info {
    > span {
        &::before {
            background: url(../images/icon_info.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--mypage {
    > span {
        &::before {
            background: url(../images/icon_my.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--company {
    > span {
        &::before {
            background: url(../images/icon_aboutus.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--schedule {
    > span {
        &::before {
            background: url(../images/icon_schedule.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--yosou {
    > span {
        &::before {
            background: url(../images/icon_yosou.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--know {
    > span {
        &::before {
            background: url(../images/icon_know.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--keiba_track {
    > span {
        &::before {
            background: url(../images/icon_keiba_racetrack.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--keirin_track {
    > span {
        &::before {
            background: url(../images/icon_keirin_racetrack.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--autorace_track {
    > span {
        &::before {
            background: url(../images/icon_autorace_track.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--dirtgrade {
    > span {
        &::before {
            background: url(../images/icon_keiba_grade.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--keiringrade {
    > span {
        &::before {
            background: url(../images/icon_keirin_grade.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--autograde {
    > span {
        &::before {
            background: url(../images/icon_auto_grade.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--blog {
    > span {
        &::before {
            background: url(../images/icon_blog.png) no-repeat;
            background-size: 100%;
        }
    }
}
.sitemap-item--other {
    > span {
        &::before {
            background: url(../images/icon_other.png) no-repeat;
            background-size: 100%;
        }
    }
}


.sitemap-sub-item {
    &:not(:last-child) {
        border-bottom: 1px solid #eee;
    }
    > a {
        position: relative;
        display: block;
        padding: 4vw;
        font-size: 3.73vw;
        color: #333;
        &::after {
            content: "";
            display: block;
            width: 2.5vw;
            height: 2.5vw;
            border-top: 2px solid #d6d6d6;
            border-right: 2px solid #d6d6d6;
            position: absolute;
            transform: rotate(45deg);
            top: calc(50% - 1.2vw);
            right: 4vw;
        }
        > span {
            display: block;
            margin-top: 1.2vw;
            padding-right: 3.2vw;
            font-size: 3.2vw;
        }
    }
}

@media screen and (min-width:751px) {
    .page-title {
        margin-bottom: 50px;
        font-size: 28px;
    }

    .categories-item {
        > a {
            margin-bottom: 25px;
            font-size: 28px;
        }
    }

    .sitemap-title {
        font-size: 40px;
    }

    .sitemap-item {
        > span {
            padding-left: 140px;
            font-size: 32px;
            &::before {
                left: 30px;
                top: 24px;
                width: 62px;
                height: 62px;
            }
        }
    }

    .sitemap-sub-item {
        > a {
            padding: 30px;
            font-size: 28px;
            &::after {
                width: 19px;
                height: 19px;
                top: calc(50% - 9px);
                right: 30px;
            }
            > span {
                margin-top: 9px;
                padding-right: 24px;
                font-size: 24px;
            }
        }
    }
}