/* =========================================================
   index.css
   トップページ
   ========================================================= */


/* =========================================================
   Hero
   ========================================================= */

.hero {

    margin: 12px 0 28px;

}


.hero-link {

    display: block;

}

.hero img {

    display: block;

    width: 100%;

    border-radius: 6px;

    box-shadow: 0 5px 14px rgba(0,0,0,.18);

}


/* =========================================================
   開催情報
   ========================================================= */

.event-information .site-card {

    padding: 24px;

}

.event-information strong {

    display: block;

    margin-top: 10px;

    font-size: 2rem;

    color: var(--color-main);

    line-height: 1.2;

}


/* =========================================================
   お知らせ
   ========================================================= */

.news-list {

    margin: 0;

    padding: 0;

}

.news-list li {

    list-style: none;

    border-bottom: 1px solid #e5e5e5;
    
    margin-top: 8px

}

.news-list a{

    position:relative;

    display:block;

    padding-right:28px;

}

.news-list a::after{

    content:"›";

    position:absolute;

    right:8px;

    top:50%;

    transform:translateY(-50%);

    font-size:1.5rem;

    color:var(--color-main);

}

.news-date {

    display: block;

    margin-bottom: 2px;

    font-size: .82rem;

    color: #888;

}

.news-title {

    line-height: 1.45;

}


/* =========================================================
   レースカード
   ========================================================= */

.race-card {

    position: relative;

    transition: .2s;

}

.race-card:hover {

    border-color: var(--color-main);

    transform: translateY(-2px);

}

.race-card::after {

    content: "›";

    position: absolute;

    right: 18px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 1.8rem;

    color: var(--color-main);

}


/* =========================================================
   データカード
   ========================================================= */

.data-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.data-card i{

    font-size:2rem;

    color:var(--color-main);

}


/* =========================================================
   SNS
   ========================================================= */

.sns-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

}

.sns-card .sns-brand-icon{

    width:40px;

    height:40px;

}

.sns-card .sns-icon-x{

    font-size:20px;

}

.sns-card .sns-icon-youtube{

    font-size:22px;

}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width:599px){

    .event-information .site-card{

        font-size:1rem;

    }

    .event-information strong{

        display:block;

        margin-top:.5rem;

        font-size:1.2rem;

    }

}