@charset "utf-8";
/* =========================================================================================================================================== */
/* ブレイクポイント
/*   : 1200px フッターを２列に切り替えタイミング
/*   : 1023px ヘッダー・フッターのスマホデザイン切り替えタイミング
/*   :  767px 全体のスマホデザイン切り替えタイミング
/*   :  440px フッターのグループ会社リストを１列に切り替えるタイミング
/* =========================================================================================================================================== */


/* =========================================================================================================================================== */
/* Googleフォント                                                                                                                                */
/* =========================================================================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');

/* =========================================================================================================================================== */
/* 別CSS読み込み　                                                                                                                                */
/* =========================================================================================================================================== */
/* ------------------------------------------------------------- */
/* ライブラリ　                                                     */
/* ------------------------------------------------------------- */
@import url('../lib/slick/slick.css');       /* slick            */


/* ------------------------------------------------------------- */
/* パーツ　                                                        */
/* ------------------------------------------------------------- */
@import url('./parts/header.css');           /* ヘッダー           */
@import url('./parts/footer.css');           /* フッター           */


/* ------------------------------------------------------------- */
/* ページ　                                                        */
/* ------------------------------------------------------------- */
@import url('./page/top.css');               /* TOPページ　        */
@import url('./page/sub.css');               /* 下層ページ　        */


/* =========================================================================================================================================== */
/* CSS変数                                                                                                                                      */
/* =========================================================================================================================================== */
:root {
    --webfont-YuGothic    :  "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    --webfont-squada      :  'Squada One', cursive;

    --font-size-normal    : 16px;

    --font-weight-regular : 400;
    --font-weight-bold    : 700;
    --font-weight-black   : 900;

    --width-100           : calc(100% - 50px);
    --content-width-1     : 1760px;
    --content-width-2     : 1400px;
    --content-width-3     : 980px;
    --content-width-4     : 800px;
    --content-width-5     : 650px;

    --mobile-width-1      : 340px;

    --color-black1        : #000000;
    --color-black2        : #333333;
    --color-black3        : #555555;
    --color-black4        : #222222;
    --color-gray1         : #888888;
    --color-gray2         : #d2d2d2;
    --color-gray3         : #dddddd;
    --color-gray4         : #e5e5e5;
    --color-gray5         : #ebebeb;
    --color-gray6         : #f1f1f1;
    --color-gray7         : #f5f5f5;
    /* ↓↓↓ 25.06.20 Gallery対応 ↓↓↓ */
    --color-gray8         : #a6a6a6;
    /* ↑↑↑ 25.06.20 Gallery対応 ↑↑↑ */
    --color-red1          : #930300;
    --color-red2          : #5d0200;
    --color-red3          : #bd6563;
    --color-red4          : #B34E4C;
    --color-red5          : #950103;
    --color-blue1         : #001f61;
    --color-blue2         : #1b66a2;
    --color-white1        : #ffffff;

    --zindex-header       : 100;
    --zindex-gnavi        : 200;

    --header-height       : 116px;
}
@media (max-width: 1023px){
    :root {
        --header-height       : 103px;
    }    
}


/* =========================================================================================================================================== */
/* サイト共通デザイン　                                                                                                                             */
/* =========================================================================================================================================== */
* {
    box-sizing: border-box;
}


/* ------------------------------------------------------------- */
/* 切り替え                                                        */
/* ------------------------------------------------------------- */
.pc_only   { display: block;  }
.pc_none   { display: none;   }
.pc_inline { display: inline; }
.sp_only   { display: none;   }
.sp_none   { display: block; }
@media (max-width: 767px) {
    .pc_only   { display: none;  }
    .pc_none   { display: block; }
    .pc_inline { display: none;  }
    .sp_only   { display: block; }
    .sp_none   { display: none;  }
}


/* ------------------------------------------------------------- */
/* 全体                                                           */
/* ------------------------------------------------------------- */
html {
    font-size: 62.5%;
    overflow-y:scroll;
}
body{
    position: relative;
    margin: 0;
    font-family: var(--webfont-YuGothic);
    font-size: var(--font-size-normal);
    font-size: 1.6rem; 
    font-weight: var(--font-weight-regular);
    line-height: 1.75;
    background-color: var(--color-white);
    color: var(--color-black2);
    overflow-x: hidden;
}


/* ------------------------------------------------------------- */
/* 装飾                                                           */
/* ------------------------------------------------------------- */
@media all {
    .mb-10 { margin-bottom: 10px !important; }
    .mb-20 { margin-bottom: 20px !important; }
    .mb-30 { margin-bottom: 30px !important; }
    .mb-40 { margin-bottom: 40px !important; }
    .mb-50 { margin-bottom: 50px !important; }
    .mb-60 { margin-bottom: 60px !important; }
    .mb-70 { margin-bottom: 70px !important; }
    .mb-80 { margin-bottom: 80px !important; }


    /* text-align */
    .ta-left   { text-align: left !important; }
    .ta-center { text-align: center !important; }
    .ta-right  { text-align: right !important; }


    /* font-weight */
    .fw-bold { font-weight: var(--font-weight-bold) !important; }
/* 240319_ここから */
    /* padding-bottom */
    .pb-5 { padding-bottom: 5px !important }
    .pb-10 { padding-bottom: 10px !important }
    .pb-15 { padding-bottom: 15px !important }
    .pb-20 { padding-bottom: 20px !important }
    .pb-25 { padding-bottom: 25px !important }
    .pb-30 { padding-bottom: 30px !important }
    .pb-35 { padding-bottom: 35px !important }
    .pb-40 { padding-bottom: 40px !important }
    .pb-45 { padding-bottom: 45px !important }
    .pb-50 { padding-bottom: 50px !important }
    .pb-55 { padding-bottom: 55px !important }
    .pb-60 { padding-bottom: 60px !important }
    .pb-65 { padding-bottom: 65px !important }
    .pb-70 { padding-bottom: 70px !important }
    .pb-75 { padding-bottom: 75px !important }
    .pb-80 { padding-bottom: 80px !important }
    .pb-85 { padding-bottom: 85px !important }
    .pb-90 { padding-bottom: 90px !important }
    .pb-95 { padding-bottom: 95px !important }
    .pb-100 { padding-bottom: 100px !important }

    /* width */
    .wd-500 { max-width: 500px; }
    .wd-510 { max-width: 510px; }
    .wd-520 { max-width: 520px; }
    .wd-530 { max-width: 530px; }
    .wd-540 { max-width: 540px; }
    .wd-550 { max-width: 550px; }
    .wd-560 { max-width: 560px; }
    .wd-570 { max-width: 570px; }
    .wd-580 { max-width: 580px; }
    .wd-590 { max-width: 590px; }
    .wd-600 { max-width: 600px; }
    .wd-610 { max-width: 610px; }
    .wd-620 { max-width: 620px; }
    .wd-630 { max-width: 630px; }
    .wd-640 { max-width: 640px; }
    .wd-650 { max-width: 650px; }
    .wd-660 { max-width: 660px; }
    .wd-670 { max-width: 670px; }
    .wd-680 { max-width: 680px; }
    .wd-690 { max-width: 690px; }
    .wd-700 { max-width: 700px; }
    .wd-710 { max-width: 710px; }
    .wd-720 { max-width: 720px; }
    .wd-730 { max-width: 730px; }
    .wd-740 { max-width: 740px; }
    .wd-750 { max-width: 750px; }
    .wd-760 { max-width: 760px; }
    .wd-770 { max-width: 770px; }
    .wd-780 { max-width: 780px; }
    .wd-790 { max-width: 790px; }
    .wd-800 { max-width: 800px; }
    .wd-810 { max-width: 810px; }
    .wd-820 { max-width: 820px; }
    .wd-830 { max-width: 830px; }
    .wd-840 { max-width: 840px; }
    .wd-850 { max-width: 850px; }
    .wd-860 { max-width: 860px; }
    .wd-870 { max-width: 870px; }
    .wd-880 { max-width: 880px; }
    .wd-890 { max-width: 890px; }
    .wd-900 { max-width: 900px; }
    .wd-910 { max-width: 910px; }
    .wd-920 { max-width: 920px; }
    .wd-930 { max-width: 930px; }
    .wd-940 { max-width: 940px; }
    .wd-950 { max-width: 950px; }
    .wd-960 { max-width: 960px; }
    .wd-970 { max-width: 970px; }
    .wd-980 { max-width: 980px; }
/* 240319_ここまで */
}
@media (max-width: 767px) {
    .mb-10 { margin-bottom: 10px !important; }
    .mb-20 { margin-bottom: 10px !important; }
    .mb-30 { margin-bottom: 15px !important; }
    .mb-40 { margin-bottom: 20px !important; }
    .mb-50 { margin-bottom: 25px !important; }
    .mb-60 { margin-bottom: 30px !important; }
    .mb-70 { margin-bottom: 35px !important; }
    .mb-80 { margin-bottom: 40px !important; }
   
}

/* ------------------------------------------------------------- */
/* 画像                                                           */
/* ------------------------------------------------------------- */
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}



/* ------------------------------------------------------------- */
/* リンク　                                                        */
/* ------------------------------------------------------------- */
a {
    text-decoration: none;
    color: var(--color-lightgray6);
}
a:hover,
a:hover img {
    opacity: 0.7;
}


/* ------------------------------------------------------------- */
/* ボタン　                                                        */
/* ------------------------------------------------------------- */
button {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* ------------------------------------------------------------- */
/* ページヘッダー　                                                  */
/* ------------------------------------------------------------- */
@media all {
    .page_header {
        background-color: var(--color-black1);
        margin-bottom: 80px;
    }
    .page_header .page_header_inner {
        max-width: var(--content-width-1);
        margin: 0 auto;
        height: 300px;
        width: var(--width-100);
        position: relative;
    }


    /* 画像 */
    .page_header figure {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .page_header figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }


    /* タイトル */
    .page_header p {
        font-size: 100px;
        position: absolute;
        font-family: var(--webfont-squada);
        font-weight: var(--font-size-normal);
        -webkit-text-stroke: 2px #fff;
        text-stroke: 2px #fff;
        color: transparent;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        text-align: center;
        line-height: 300px;
    }
}
@media (max-width: 767px) {
    .page_header {
        margin-bottom: 35px;
    }
    .page_header .page_header_inner {
        height: 120px;
    }


    /* タイトル */
    .page_header p {
        font-size: 50px;
        line-height: 120px;
    }
}


/* ------------------------------------------------------------- */
/* H1                                                            */
/* ------------------------------------------------------------- */
/* TYPE1 */
@media all {
    #h1.type1 {
        padding-bottom: 45px;
    }
    #h1.type1 h1 {
        font-family: var(--webfont-squada);
        text-align: center;
        font-size: 50px;
        line-height: 52px;
    }
    #h1.type1 h1::before {
        content: "";
        background-image: url('../img/sub_icon_flag.jpg');
        background-size: cover;
        display: inline-block;
        width: 96px;
        height: 49px;
        margin-right: 16px;
    }
}
@media (max-width: 767px) {
    #h1.type1 {
        padding-bottom: 8px;
    }
    #h1.type1 h1 {
        font-size: 28px;
        line-height: 30px;
        padding-bottom: 7px;
    }
    #h1.type1 h1::before {
        width: 50px;
        height: 26px;
        margin-right: 5px;
    }
}

/* ↓↓↓ 25.06.20 Gallery対応 ↓↓↓ */
/* TYPE2 */
@media all {
    .h1_type2 {
        max-width: var(--content-width-2);
        margin: 0 auto;
        width: var(--width-100);
        background-color: var(--color-black4);
        color: var(--color-white1);
        border-bottom: solid 6px var(--color-red1);
        text-align: center;
        margin-bottom: 15px;
        padding: 16px 0 6px;
    }
    
    .h1_type2 .series {
        font-size: 16px;
        line-height: 20px;
        font-weight: var(--font-weight-bold);
        padding-bottom: 5px;
    }
    
    .h1_type2 .title {
        font-size: 22px;
        line-height: 30px;
        font-weight: var(--font-weight-bold);
    }
}
@media (max-width: 767px) {
    .h1_type2 {
        padding: 8px 0 4px;
    }
    .h1_type2 .series {
        font-size: 14px;
        line-height: 18px;
        padding-bottom: 2px;
    }
    .h1_type2 .title {
        font-size: 16px;
        line-height: 24px;
    }
}
/* ↑↑↑ 25.06.20 Gallery対応 ↑↑↑ */


/* ------------------------------------------------------------- */
/* H2                                                            */
/* ------------------------------------------------------------- */
/* TYPE1 */
@media all {
    .h2_type1 h2 {
        font-size: 32px;
        font-weight: var(--font-weight-bold);
        text-align: center;
        line-height: 1.3;
    }
}
@media (max-width: 767px) {
    .h2_type1 h2 {
        font-size: 20px;
    }
}


/* TYPE2 */
@media all {
    .h2_type2 h2 {
        line-height: 48px;
        font-size: 36px;
        text-align: center;
        font-family: var(--webfont-squada);
        background-color: var(--color-gray1);
        color: var(--color-white1);
        border-bottom: solid 6px var(--color-red1);
    }


    /* 背景色 */
    .h2_type2.black h2 {
        background-color: var(--color-black4);
    }


    /* フォントファミリー */
    .h2_type2.YuGothic h2 {
        font-family: var(--webfont-YuGothic);
        font-size: 22px;
        font-weight: var(--font-weight-bold);
    }


    /* フォントサイズ */
    .h2_type2.fs-40 h2 {
        font-size: 40px;
    }


    /* 高さ */
    .h2_type2.h-56 h2 {
        line-height: 56px;
    }
}
@media (max-width: 767px) {
    .h2_type2 h2 {
        font-size: 30px;
        line-height: 40px;
    }


    /* フォントファミリー */
    .h2_type2.YuGothic h2 {
        font-size: 18px;
    }


    /* フォントサイズ */
    .h2_type2.fs-40 h2 {
        font-size: 22px;
    }


    /* 高さ */
    .h2_type2.h-56 h2 {
        line-height: 34px;
    }
}


/* TYPE3 */
@media all {
    .h2_type3 {
        text-align: center;
        position: relative;
    }
    .h2_type3 .en {
        font-family: var(--webfont-squada);
        font-size: 110px;
        line-height: 74px;
        color: var(--color-gray4);
    }
    .h2_type3 h2 {
        font-size: 32px;
        font-weight: var(--font-weight-bold);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        line-height: 74px;
    }
}
@media (max-width: 767px) {
    .h2_type3 .en {
        font-size: 70px;
        line-height: 50px;
    }
    .h2_type3 h2 {
        font-size: 24px;
        line-height: 50px;
    }
}
@media (max-width: 430px) {
    .h2_type3 .en {
        font-size: calc(70 / 430 * 100vw);
        line-height: calc(50 / 430 * 100vw);
    }
    .h2_type3 h2 {
        line-height: calc(50 / 430 * 100vw);
    }
}


/* TYPE4 */
@media all {
    .h2_type4 h2 {
        font-size: 30px;
        text-align: center;
        font-weight: var(--font-weight-bold);
        line-height: 36px;
    }
}
@media (max-width: 767px){
    .h2_type4 h2 {
        font-size: 21px;
        line-height: 24px;
    }
}


/* ------------------------------------------------------------- */
/* H3                                                            */
/* ------------------------------------------------------------- */
/* TYPE1 */
@media all {
    .h3_type1 h3 {
        font-family: var(--webfont-squada);
        text-align: center;
        font-size: 38px;
    }
    .h3_type1 h3::before {
        content: "";
        background-image: url('../img/sub_icon_flag.jpg');
        background-size: cover;
        display: inline-block;
        width: 72px;
        height: 37px;
        margin-right: 10px;
    }
}
@media (max-width: 767px) {
    .h3_type1 h3 {
        font-size: 28px;
        line-height: 30px;
        padding-bottom: 7px;
    }
    .h3_type1 h3::before {
        width: 50px;
        height: 26px;
        margin-right: 5px;
    }
}


/* ------------------------------------------------------------- */
/* table                                                         */
/* ------------------------------------------------------------- */
/* TYPE1 */
@media all {
    .table_type1 {
        width: var(--width-100);
        max-width: var(--content-width-2);
        margin: 0 auto;
    }
    .table_type1 .round  { width: 198px; }
    .table_type1 .date   { width: 322px; }
    .table_type1 .course { width: 302px; }
    .table_type1 .driver { width: 266px; }
    .table_type1 .result { width: 158px; }
    .table_type1 .report { width: 154px; }


    .table_type1 .small_only { display: none; }
    .table_type1 .small_under { display: none !important; }
    .table_type1 .not_small_inline { display: inline; }


    /* ヘッダー */
    .table_type1 .thead {
        background-color: var(--color-black2);
        display: flex;
        flex-wrap: wrap;
        height: 50px;
        color: var(--color-white1);
    }
    .table_type1 .thead .th {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        border-right: solid 1px var(--color-gray2);
        font-size: 14px;
        text-align: center;
    }
    .table_type1 .thead .th:last-child {
        border-right: none;
    }


    /* ボディ*/
    .table_type1 .tbody .tr {
        display: flex;
        flex-wrap: wrap;
        height: 76px;
        background-color: var(--color-gray7);
    }
    .table_type1 .tbody .tr:nth-child(even) {
        background-color: var(--color-gray5);
    }
    .table_type1 .tbody .tr .td {
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-left: 12px;
        font-size: 16px;
        line-height: 24px;
        border-right: solid 1px var(--color-gray2);
    }
    .table_type1 .tbody .tr .td:last-child {
        border-right: none;
    }
    .table_type1 .tbody .tr .td.driver { 
        padding-left: 0;
        justify-content: center;
    }
    .table_type1 .tbody .tr .td p {
        width: 100%;
        text-align: center;
        line-height: 20px;
    }
    .table_type1 .tbody .tr .td span {
        font-size: 14px;
    }
    .table_type1 .tbody a {
        display: flex;
        width: 120px;
        height: 28px;
        background-color: var(--color-white1);
        text-align: center;
        border: solid 1px var(--color-black2);
        font-family: var(--webfont-squada);
        justify-content: center;
        align-items: center;
    }
    .table_type1 .tbody a::after {
        content: ">";
        padding-left: 6px;
    }
}
@media (max-width: 1500px) {
    .table_type1 .small_only { display: block; }
    .table_type1 .small_under { display: block !important; }
    .table_type1 .not_small_inline { display: none }

    .table_type1 {
        max-width: 1054px;
    }

    .table_type1 .round  { width: 149px; text-align: center;}
    .table_type1 .date   { width: 171px; }
    .table_type1 .driver { width: 170px; }
    .table_type1 .report { width: 104px; }

    .table_type1 .tbody .tr .td.round {
        padding-left: 0;
    } 


    .table_type1 .tbody a {
        width: 80px;
    }
}
@media (max-width: 1150px) {
    .table_type1 {
        max-width: 932px;
    }
    .table_type1 .course   {
        width: 180px; 
    }
}
@media (max-width: 1000px) {
    .table_type1 .small_only { display: none; }
    .table_type1 .small_under { display: block !important; }
    .table_type1 .not_small_inline { display: inline; }


    /* ヘッダー　*/
    .table_type1 .thead {
        display: none;
    }
    

    /* ボディ */
    .table_type1 .tbody .tr {
        display: block;
        height: auto;
    }
    .table_type1 .tbody .tr .td {
        width: 100%;
        min-height: 41px;
        border: none;
        border-bottom: solid 1px var(--color-gray2);
        padding: 10px 0px;
        padding-left: calc(90px + 9px);
        position: relative;
        font-size: 14px;
        line-height: 18px;
    }
    .table_type1 .tbody .tr .td:last-child {
        border-bottom: none;
        height: 40px;
    }
    .table_type1 .tbody .tr .td.driver {
        padding-left: calc(90px + 9px);
    }
    .table_type1 .tbody .tr .td.round {
        padding-left: calc(90px + 9px);
        justify-content: flex-start;
    } 
    .table_type1 .tbody .tr .td::before {
        content: "";
        width: 90px;
        height: 100%;
        position: absolute;
        left: 0;
        background-color: var(--color-black2);
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--color-white1);
        font-size: 12px;
    }
    .table_type1 .tbody .tr:nth-child(even) .td::before {
        background-color: var(--color-black3);
    }

    
    .table_type1 .tbody .tr .td.round::before  { content: "ラウンド"; }
    .table_type1 .tbody .tr .td.date::before   { content: "開催日"; }
    .table_type1 .tbody .tr .td.course::before { content: "コース"; }
    .table_type1 .tbody .tr .td.driver::before { content: "ドライバー"; }
    .table_type1 .tbody .tr .td.result::before { content: "結果"; }
    .table_type1 .tbody .tr .td.report::before { content: "レポート"; }

    .table_type1 .tbody .tr .td p {
        text-align: left;
        line-height: 18px;
    }
    .table_type1 .tbody .tr .td br {
        display: none;
    }
    .table_type1 .tbody .tr .td.result br {
        display: block;
    }
    
    .table_type1 .tbody a {
        width: 74px;
        height: 20px;
        font-size: 14px;
    }
    .table_type1 .tbody a::after {
        font-size: 10px;
        padding-left: 5px;
    }
}


/* ------------------------------------------------------------- */
/* list                                                          */
/* ------------------------------------------------------------- */
/* TYPE1 */
@media all {
    .list_type1 ul li a {
        border-bottom: solid 1px var(--color-gray2);
        padding-top: 15px;
        display: flex;
        flex-wrap: wrap;
    }
    
    .list_type1 ul li:first-child a {
        border-top: solid 1px var(--color-gray2);
    }
    

    /* カテゴリ */
    .list_type1 ul li .category {
        width: 95px;
        height: 22px;
        background-color: var(--color-blue1);
        color: var(--color-white1);
        font-family: var(--webfont-squada);
        text-align: center;
        line-height: 22px;
        font-size: 14px;
        margin-left: 4px;
    }
    .list_type1 ul li .category.movie {
        background-color: var(--color-blue2);
    }
    .list_type1 ul li .category.news {
        background-color: var(--color-black1);
    }
    .list_type1 ul li .category.release {
        background-color: var(--color-red1);
    }
    

    /* 日付 */
    .list_type1 ul li .date {
        width: calc(100% - 99px);
        padding-left: 14px;
        font-size: 14px;
        line-height: 22px;
        font-weight: var(--font-weight-bold);
    }
    

    /* タイトル */
    .list_type1 ul li .title {
        font-size: 16px;
        line-height: 20px;
        padding-left: 21px;
        position: relative;
        padding-top: 7px;
        padding-bottom: 14px;
        width: 100%;
    }
    .list_type1 ul li .title::before {
        content: ">";
        font-size: 16px;
        font-family: var(--webfont-squada);
        position: absolute;
        left: 6px;
    }
}
@media (max-width: 767px) {
    .list_type1 ul li a {
        padding-top: 13px;
        display: block;
    }


    /* カテゴリ */
    .list_type1 ul li .category {
        margin-left: 0;
    }


    /* 日付 */
    .list_type1 ul li .date {
        width: 100%;
        padding-left: 0;
        padding-top: 5px;
        font-size: 12px;
        line-height: 18px;
    }


    /* タイトル */
    .list_type1 ul li .title {
        font-size: 14px;
        padding-left: 15px;
    }
    .list_type1 ul li .title::before {
        font-size: 12px;
        left: 2px;
    }
}


/* ------------------------------------------------------------- */
/* 文章                                                           */
/* ------------------------------------------------------------- */
/* TYPE1 */
@media all {
    p.type1 {
        width: var(--width-100);
        max-width: var(--content-width-3);
        margin: 0 auto;
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 26px;
    }
}
@media (max-width: 767px) {
    p.type1 {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 20px;
    }
}


/* ------------------------------------------------------------- */
/* 画像                                                           */
/* ------------------------------------------------------------- */
/* TYPE1 */
@media all {
    figure.type1 {
        width: var(--width-100);
        max-width: var(--content-width-5);
        margin: 0 auto;
        margin-bottom: 38px;
    }
}
@media (max-width: 767px) {
    figure.type1 {
        max-width: var(--mobile-width-1);
        margin-bottom: 22px;
    }
}


/* TYPE2 */
@media all {
    figure.type2 {
        width: var(--width-100);
        max-width: var(--content-width-3);
        margin: 0 auto;
        margin-bottom: 38px;
    }
}
@media (max-width: 767px) {
    figure.type2 {
        margin-bottom: 22px;
    }
}


/* ------------------------------------------------------------- */
/* レースバナー                                                     */
/* ------------------------------------------------------------- */

/* ------------------------------------------------------------- */
/* レースリンク                                                     */
/* ------------------------------------------------------------- */
@media all {
    /* 2列表示 */
    #races .races_inner {
        display: flex;
        flex-wrap: wrap;
    }
    #races article {
        width: 50%;
    }
    #races article a {
        display: block;
        width: 100%;
        padding-top: calc(528 / 960 * 100%);
        position: relative;
    }


    /* 画像 */
    #races article figure {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    #races article figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* タイトル */
    #races article h2 {
        position: absolute;
        font-family: var(--webfont-squada);
        font-size: 60px;
        color: transparent;
        -webkit-text-stroke: 1px #fff;
        text-stroke: 1px #fff;
        bottom: 20px;
        line-height: 60px;
        left: 40px;
    }


    /* ボタン */
    #races article .button {
        position: absolute;
        width: 63px;
        height: 63px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: var(--webfont-squada);
        font-size: 26px;
        background-color: rgba(0,0,0,0.71);
        color: var(--color-white1);
        right: 0;
        top: 0;
        bottom: 0;
        left: auto;
        margin: auto;
    }

    /* 3列表示　*/
    #races.col3 article {
        width: calc(100% / 3);
    }
    #races.col3 article h2 {
        font-size: 30px;
        bottom: 6px;
    }
}
@media (max-width: 767px) {
    #races article {
        width: 100%;
    }
    

    /* タイトル */
    #races article h2 {
        font-size: 30px;
        line-height: 30px;
        left: 25px;
    }
    

    /* ボタン */
    #races article .button {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }


    /* 3列表示　*/
    #races.col3 article {
        width: 100%;
    }
}

/* 2400611_ここから */
/* ------------------------------------------------------------- */
/* boxレイアウト　                                                  */
/* ------------------------------------------------------------- */
/* type1 */
@media all {
    .box-type1 {
        width: var(--width-100);
        max-width: 1180px;
        margin: 0 auto;
        display: flex;
        align-items: end;
        justify-content: center;
        margin-bottom: 34px;
        flex-wrap: wrap;
    }
    
    .box-type1 figure {
        padding-bottom: 24px;
        margin-bottom: 0;
        width: calc(100% - 562px + 35px);
        margin-right: -35px;
        position: relative;
        z-index: -1;
    }
    
    .box-type1 .box {
        width: 562px;
        background-color: #f5f5f5;
        padding: 35px;
    }
    
    .box-type1 .box .title {
        font-size: 16px;
        font-weight: var(--font-weight-bold);
        line-height: 1;
        padding-bottom: 20px;
        color: var(--color-red5);
    }
    
    .box-type1 .box .name {
        font-size: 20px;
        font-weight: var(--font-weight-bold);
        line-height: 1;
        padding-bottom: 10px;
        border-bottom: solid 1px;
        margin-bottom: 10px;
    }
    
    .box-type1 .box .name span {
        font-size: 14px;
        font-weight: var(--font-weight-regular);
        padding-left: 0.5em;
    }
    
    .box-type1 .box .list .item {
        padding-left: 1em;
        font-size: 16px;
        line-height: 28px;
        position: relative;
    }
    
    .box-type1 .box .list .item::before {
        content: "・";
        display: block;
        position: absolute;
        left: 0;
    }
}
@media (max-width: 1024px) {
    .box-type1 figure {
        width: 100%;
        margin: 0;
        padding-bottom: 0;
        margin-bottom: -26px;
        max-width: unset;
    }
    
    .box-type1 {
        max-width: var(--content-width-5);
    }
    
    .box-type1 .box {
        width: calc(100% - 48px);
        padding: 28px;
    }
    
    .box-type1 .box .title {
        font-size: 14px;
        padding-bottom: 15px;
    }
    
    .box-type1 .box .name {
        font-size: 18px;
        margin-bottom: 15px;
    }
    
    .box-type1 .box .name span {}
    
    .box-type1 .box .list .item {
        font-size: 14px;
        line-height: 18px;
        padding-bottom: 10px;
    }
}

/* 240908 ここから */
/* ------------------------------------------------------------- */
/* ページナビゲーション                                               */
/* ------------------------------------------------------------- */
@media all {
    .page_navi {
        padding-bottom: 70px;
    }
    .page_navi ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        row-gap: 35px;
    }
    
    .page_navi ul .list {
        width: 100%;
        text-align: center;
    }
    
    .page_navi ul .prev,
    .page_navi ul .next {
        margin: 0 34px;
        position: relative;
        line-height: 24px;
        font-family: var(--webfont-squada);
        font-size: 26px;
    }
    
    .page_navi ul .next::before {
        content: "";
        display: block;
        position: absolute;
        width: 2px;
        height: 24px;
        top: 0;
        left: -34px;
        background-color: var(--color-gray2);
    }

    .page_navi ul .next:first-child::before {
        content: none;
    }

    .page_navi ul .prev a span,
    .page_navi ul .next a span {
        font-size: 20px;
    }
    
    .page_navi ul .prev a {
        position: relative;
        padding-left: 28px;
    }
    
    .page_navi ul .prev a::before {
        content: "<";
        font-size: 40px;
        line-height: 24px;
        display: block;
        position: absolute;
        left: 0;
    }
    
    .page_navi ul .next a {
        position: relative;
        padding-right: 28px;
    }
    
    .page_navi ul .next a::before {
        content: ">";
        font-size: 40px;
        line-height: 24px;
        display: block;
        position: absolute;
        right: 0;
    }
    
    .page_navi ul .list a {
        display: inline-block;
        font-size: 14px;
        text-decoration: underline;
        color: var(--color-black2);
    }
}
@media (max-width: 767px) {
    .page_navi {
        padding-bottom: 50px;
    }

    .page_navi ul {
        row-gap: 26px;
    }

    .page_navi ul .prev,
    .page_navi ul .next {
        margin: 0 19px;
        font-size: 22px;
        line-height: 22px;
    }

    .page_navi ul .next::before {
        left: -20px;
        height: 22px;
    }

    .page_navi ul .prev a span, 
    .page_navi ul .next a span {
        font-size: 16px;
    }

    .page_navi ul .prev a {
        padding-left: 19px;
    }

    .page_navi ul .prev a::before {
        font-size: 30px;
        line-height: 20px;
    }

    .page_navi ul .next a {
        padding-right: 19px;
    }

    .page_navi ul .next a::before {
        font-size: 30px;
        line-height: 20px;
    }
}
/* 240908 ここまで */

/* =========================================================================================================================================== */
/* プラグイン系                                                                                                                                  */
/* =========================================================================================================================================== */
/* ------------------------------------------------------------- */
/* Inview                                                        */
/* ------------------------------------------------------------- */
@media all {
    .fade {
        opacity: 0;
        transition: .8s;
        transform: translate(0, 100px);
      }


      /* 方向＆距離系：重複不可 */
      .fade.fade-up-50 {
        transform: translate(0, 50px);
      }
      .fade.fade-right-50 {
        transform: translate(-50px, 0);
      }
      .fade.fade-left-50 {
        transform: translate(50px, 0);
      }
      .fade.fade-down-50 {
        transform: translate(0, -50px);
      }


      /* 遅れ系 */
      .fade.fade-delay {
        transition-delay: .1s;
      }
      .fade.fade-delay-500 {
        transition-delay: .5s;
      }
      .fade.fade-delay-800 {
        transition-delay: .8s;
      }
      .fade.fade-delay-1000 {
        transition-delay: 1s;
      }
      
      
      /* 表示用*/
      .fade.fade-in {
        opacity: 1;
        transform: translate(0, 0);
      }
}