/* --------------------------------------------------

	2025年 JRAアニバーサリー イベントまとめ

-------------------------------------------------- */

:root {
    /* - カラー
    ---------------------------- */
    --color-main-border: #700101;
}


/* - バリエーション
-------------------------------------------------- */

/* --- 画像サイズ --- */
.w400 img {
    width: 100%;
    max-width: 400px;
}

/* --- イベントタイトル内 改行 --- */
.br_block {
    display: inline-block;
}

/* 改行したら左寄せ */
.event_unit p .br_left {
    text-align: left;
}

/* - レイアウト
-------------------------------------------------- */

/* --- 背景色or背景画像 --- */

#wrapper {
    background: linear-gradient(180deg, #a31005 15%, #6e100e 100%);
}

.event_block a {
    text-decoration: none;
}

/* --- KV　2023ver --- */

#kv_area>.content {
    position: relative;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
}

#kv_area>.content img {
    vertical-align: top;
}


#kv_area>.content h1 img.sp {
    display: none;
}

/* --- キービジュアル下 キャプション --- */

#anni_wrap {
    width: 100%;
    height: 100%;
}

#anni_wrap .title_txt {
    width: 100%;
    padding: 50px 10px;
    text-align: center;
}

#anni_wrap .title_txt .sub_title {
    text-align: center;
}

#anni_wrap .title_txt .sub_title img {
    vertical-align: top;
    width: 100%;
    max-width: 650px;
}

#anni_wrap .title_txt .caption {
    font-size: 1.6rem;
    margin: 0 auto;
    background-color: #fff;
    padding: 15px;
    border: 4px solid #c1a041;
    text-align: center;
    display: inline-block;
}



/* - バナーリスト
------------------------------------------------------ */

:root {
    --gapSize: 10px;
    --cardSize: 160px;
}

/* 3列 最大幅 */
.list_banner ul[data-columns="3"] {
    --cardSize: 160px;
    max-width: 700px;
}


.list_banner ul {
    display: grid;
    justify-content: center;
    grid: auto / repeat(auto-fit, minmax(var(--cardSize), 1fr));
    gap: var(--gapSize);
    margin: 0 auto;
}

.list_banner>ul>li a {
    display: block;
    transition: all 0.3s ease-in-out;
}

.list_banner>ul>li a img {
    vertical-align: top;
    width: 100%;
}

.no-touch .list_banner>ul>li a:hover {
    filter: brightness(0.9);
}

.event_block.day_event {
    margin-top: 50px;
}



/* - イベントブロック
-------------------------------------------------- */

/* --- 枠線の色 --- */
.event_block>.content {
    border: 5px solid var(--color-main-border);
    background-color: #fff;
}

.day_event_list li:nth-child(n+2) .event_unit  {
    border-top: 5px solid var(--color-main-border);
}


/* - イベントユニット
-------------------------------------------------- */

.event_unit {
    padding: 30px;
    padding: clamp(20px, 5%, 30px);
}

.event_unit .inner>.cell.txt.center,
.center {
    text-align: center;
}

/* --- イベントタイトル --- */
.title {
    text-align: center;
}

.title_inner {
    display: inline-block;
    padding: 0.3em 0.6em;
    border-radius: 4px;
    font-size: 2.4rem;
    /* font-size: clamp(2.4rem, 1.9077rem + 1.0256vw, 2.8rem); */
    font-size: clamp(2rem, 1.5844rem + 0.8677vw, 2.4rem);
    font-weight: bold;
    line-height: 1.4;
    background-color: #187700;
    color: #ffffff;
}
.title_inner .txt_size {
    font-size: 1.6rem;
}

/* --- イベントサブタイトル --- */
.heading {
    font-size: clamp(1.4rem, 0.1692rem + 2.5641vw, 2.4rem);
    font-weight: bold;
}

.heading.right {
    text-align: right;
}

/* --- イベント内の要素全て中央寄せ（1列） --- */

.event_unit.center {
    text-align: center;
}

.event_unit.center p {
    display: grid;
    justify-content: center;
    inline-size: fit-content;
    width: 100%;
}

.event_unit .title_inner {
    text-align: left;
}

/* --- 2列 --- */
.event_unit.col2 .inner {
    display: flex;
    gap: 20px;
}

.event_unit.col2 .title {
    text-align: left;
}

.event_unit.col2 .inner>.cell.img {
    flex-shrink: 0;
    flex-grow: 0;
    width: 32%;
    max-width: 300px;
    margin: 0 auto;
}

.img_line_list > .item .img img{
    width: 100%;
    max-width: 390px;
}

.event_unit.col2 .inner>.cell.txt {
    flex: 1;
}

/* --- 画像部分 --- */

.event_unit .inner>.cell.img a {
    display: block;
}

.event_unit .inner>.cell.img a img {
    width: 100%;
    object-fit: contain;
}
.event_unit .bro_center img { 
    max-width: 280px; 
    width: 100%;  
}

/* --- テキストブロック上下中央 --- */

.event_unit.col2 .inner>.cell.txt.align_center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.event_unit.col2 .inner>.cell.txt.align_center .title {
    text-align: center;
}

/* --- 表 --- */

table.basic.simple thead>tr>th {
    white-space: nowrap;
}

table.basic.simple thead>tr>th.stakes {
    width: 84px;
}

/*「表はスクロールすることができます」フォントサイズ調整*/

.event_unit caption .scr_caution p {
    font-size: 1.3rem;
    justify-content: start;
}

/* --- データリスト --- */

.event_unit .data_list_unit {
    text-align: left;
}

.event_unit .data_list_unit p {
    display: block;
}

/* - イベント　各調整
------------------------------------------------------ */

/* --- YOUTUBE --- */

.youtube .img_flex_list>div .img {
    position: relative;
    transition: all 0.4s ease-in-out;
}

.youtube .img_flex_list>div a:focus .img,
.no-touch .youtube .img_flex_list>div a:hover .img {
    filter: brightness(0.8);
}

.youtube .img_flex_list>div .img .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: #eee;
    background-color: rgba(0, 0, 0, 0.8);
    width: 18%;
    aspect-ratio: 3 / 2;
    text-align: center;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    container-type: inline-size;
}

.youtube .img_flex_list>div .img .icon i {
    font-size: calc(24cqw);
}

.youtube .img_flex_list>div a:focus .img .icon,
.no-touch .youtube .img_flex_list>div a:hover .img .icon {
    opacity: 0.6;
}

/* --- 開催競馬場のイベント --- */

.img_flex_list.w630 {
    max-width: 630px;
    margin: 0 auto;
}

.event_unit .caption {
    max-width: 630px;
    margin: 0 auto;
}

.event_unit .img_flex_list.cap-bg.w630>div .img+.cap {
    margin: 0 auto;
    margin-top: 15px;
    color: #fff;
    background-color: #000000;
    border: 1px solid #316510;
    box-shadow: 0 1px 4px rgba(118, 94, 94, 0.15);
    border-radius: 4px;
    font-weight: bold;
    transition: all 140ms ease-in-out;
    max-width: 120px;
}

.event_unit .img_flex_list.cap-bg>div .img+.cap.yellow {
    color: #333;
    background-color: #f8e212;
    border: 1px solid #555;
}

.no-touch .event_unit .img_flex_list.cap-bg>div .img+.cap.yellow:hover {
    filter: brightness(0.9);
}


/*---- YouTube 埋め込み用 ----*/
div.yt_block>div {
    max-width: 600px;
    display: block;
    margin: auto;
}

div.yt_block iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/*詳細ボタンの色変更*/
.btn-def.black {
    color: #fff;
    background-color: #333;
    border: 1px solid #000000;

}

.btn-def.black:hover {
    background: #777;
    border: 1px solid #555;
    color: #fff;
}

.btn-def.yellow {
    color: #333;
    background-color: #f8e212;
    border: 1px solid #555;
}

.no-touch .btn-def.yellow:hover {
    filter: brightness(0.9);
}

.btn-def.black>i {
    color: #fff;
}

.btn-def.yellow>i {
    color: #333;
}
/*ボタンの横並び*/
.item_btn_list {
  display: grid;
  grid-auto-flow: column;
  gap: 20px;
  justify-content: center;
}


/* ------------------------------------------------------------

	767px以下

------------------------------------------------------------ */
@media screen and (max-width: 767px) {

    #wrapper {
        background: linear-gradient(180deg, #C7161E 20%, #811614 100%);
    }

    #kv_area>.content h1 img.pc {
        display: none;
    }

    #kv_area>.content h1 img.sp {
        display: block;
    }

    #anni_wrap .title_txt .caption {
        text-align: left;
        font-size: 1.4rem;
    }

}

/* ------------------------------------------------------------

	639px以下

------------------------------------------------------------ */
@media screen and (max-width: 639px) {

    .event_unit.col2 .inner {
        flex-flow: column;
    }

    .event_unit.col2 .inner>.cell.img {
        width: 100%;
    }

    .event_unit.col2 .title {
        text-align: center;
    }

    .youtube .img_flex_list.col2>div {
        width: 100%;
        flex-basis: auto;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .youtube .img_flex_list>div.empty {
        height: 0;
        margin: 0;
    }

}

/* ------------------------------------------------------------

	479px以下

------------------------------------------------------------ */
@media screen and (max-width: 479px) {

    /* --- テーブルスクロール時 --- */
    table.anni_stakes.basic.simple thead>tr>th.day {
        width: 102px;
    }

    table.anni_stakes.basic.simple thead>tr>th.stakes {
        width: 76px;
    }

}