/*
    All Common

///////////////////////////////////////////
    Base Structure
/////////////////////////////////////////*/
html {
    width: 100%;
	height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
body {
    background-color: #000;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-style: normal;
    font-weight: 400;
    margin: 0;
	padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow-x: hidden;
}
/*===========================================================
	Base
============================================================*/
.wrap {
    position: relative;
    margin: 0 auto;
}
/*------------------------------------------------------------
	Style Reset
-------------------------------------------------------------*/
* {
	box-sizing: border-box;
		-moz-box-sizing: border-box;
	min-height:0;
	min-width : 0;
 }

ul li, ol li {
    padding: 0.5em 0;
}
    nav ul,
    ul.breadcrumb {
        list-style: none;
    }
    .privacy-policy-content ul {
        list-style: square;
    }
    .privacy-policy-content ol {
        list-style: decimal;
    }
p {
    line-height: 1.7;
}
a {
    color: #fff;
    text-decoration: none;
}
/*------------------------------------------------------------
	image
-------------------------------------------------------------*/
img {
	border-style:none;
	max-width: 100%; /* 1 width/height属性によってコントロールされるアスペクト比を維持しつつ、画像のサイズを流動的に変更できるようにします。*/
	height: auto; /* 1 */
	vertical-align: middle; /* 2 画像の下にできる余白を取り除きます。*/
	font-style: italic; /* 3 altテキストを斜体にして、周囲のテキストから視覚的に相殺します。*/
	background-repeat: no-repeat; /* 4 オプション: LQIP(Low-Quality Image Placeholders)用に背景を設定。*/
	background-size: cover; /* 4 */
	shape-margin: 0.75rem; /* 5 オプション: 回り込みシェイプ用にshape-outsideのmarginを設定。*/
  }
/*------------------------------------------------------------
	Button
-------------------------------------------------------------*/
.wp-element-button {
    color: #333;
    font-weight: 700;
    background-color: #eee;
    border: #eee 2px solid;
    border-radius: 30px;
}
    .wp-element-button:hover {
        color: #eee;
        font-weight: 700;
        background-color: #333;
        border: #eee 2px solid;
        border-radius: 30px;
    }
/*------------------------------------------------------------
	Text
-------------------------------------------------------------*/
.black { color: #000; }
/* 英語フォント  Chakra Petch*/
.chakra-petch-medium {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 500;
    font-style: normal;
}
.chakra-petch-semibold {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.chakra-petch-bold {
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* Heading */
h1 {
    font-size: 200%; /*32px*/
    line-height: 1.8;
    font-weight: 300;
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-style: normal;
}
    h1::first-letter {
        color: #ff0000;
    }
h2 {
    font-size: 175%; /* 28px */
    line-height: 1.8;
    font-weight: 700;
}
h3 {
    font-size: 150%; /* 24px */
    line-height: 1.5;
    font-weight: 700;
}
h4 {
    font-size: 125%; /* 20px */
    line-height: 1.5;
    font-weight: 300;
}
h5 {
    font-size: 100%; /* 16px */
    line-height: 1.5;
    font-weight: 300;
}
/*------------------------------------------------------------
	PageToTOP
------------------------------------------------------------*/
/*リンクの形状*/
#page-top a {
	display: flex;
	justify-content:center;
	align-items:center;
	border-radius: 5px;
	width: 60px;
	height: 160px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
    /* transform: scale(.8); */
}
#page-top a:hover{
    opacity: .5;
}
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	/* right: 10px; */
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(130px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(130px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(130px);
  }
}
/*------------------------------------------------------------
	Loading背景画面設定 // Topのみ
------------------------------------------------------------*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background:#333;
	text-align:center;
	color:#fff;
}

/* Loadingバー中央配置　*/
#splash_text {
	position: absolute;
	top: 50%;
	left: 50%;
    z-index: 999;
	width: 100%;
	transform: translate(-50%, -50%);
	color: #fff;
}
/*------------------------------------------------------------
    Header
------------------------------------------------------------*/
header {
    position: relative;
    z-index: 998;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
    .logo-area {
        margin: 1em 1em;
    }
    nav#nav-content ul {
        display: flex;
    }
    nav ul li a,
    nav ul li a:hover {
        padding: 0 0 0.5em 0;
    }
        nav ul li a:hover {
            border-bottom: #ff0000 3px solid;
        }
/*------------------------------------------------------------
    Footer
------------------------------------------------------------*/
footer {
    width: 100%;
    height: auto;
    background-color: #4d4d4d;
}
    #foot-content {
        margin: 0 auto;
        padding: 0;
    }
    #foot-contact {
        margin: 0;
        padding: 1em 0;
    }
    #tel-area {
        display: block;
        background-color: #fff;
        color: #000;
        height: auto;
        padding: 0.5em;
        font-size: 0.8em;
        margin: 0 auto;
    }
    .tel-no {
        display: block;
        width: 100%;
        text-align: center;
        font-family: "Chakra Petch", sans-serif;
        font-weight: 700;
        font-style: normal;
    }
    .comment {
        text-align: center;
        padding: 0 0.5em;
        background-color: #000;
        color: #fff;
    }
    #foot-bottom-area {
        display: flex;
    }
    #add-area {
        margin: 0 auto 1em auto;
    }
    #foot-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 0;
    }
       #foot-nav ul li {
            margin: 0;
        }
#copyright {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
/*------------------------------------------------------------
    Slider
------------------------------------------------------------*/
.slider {
    position:relative;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
  .slider-item {
    width: auto;/*100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:550px;/*100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
  .slider-item img {
      width: 100%;
      height: auto;
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover;
  }
/*------------------------------------------------------------
	Top
------------------------------------------------------------*/

/*------------------------------------------------------------
    Concept // Top
------------------------------------------------------------*/
#concept-area {
    position: relative;
    width: 100vw;
    margin: 1em calc(50% - 50vw);
    overflow: hidden;
}
#concept-area img {
    max-width: fit-content;
}
    #concept-txt {
        position: absolute;
        margin: 0 auto;
        text-align: center;
    }
    #concept-txt h1,
    #concept-txt span,
    #lineup h1,
    #gallery-area h1 {
        text-align: center;
    }
    #concept-txt h1,
    #lineup-title-area h1,
    #gallery-area h1 {
        margin: 0.5em auto;
    }
    .concept-btn {
        display: block;
        padding: 0.5em 1em;
        margin: 1em auto;
        text-align: center;
        color: #000;
        border: #fff 2px solid;
        background-color: #fff;
    }
    .concept-btn p {
        font-size: 80%;
        margin: 0;
        padding: 0;
    }
    .concept-btn:hover {
        background-color: rgba(255,255,255,0.7);
        border: #000 2px solid;
    }
/*------------------------------------------------------------
    LineUP　ふわっと表示 // Top
------------------------------------------------------------*/
#lineup {
    display: grid;
    padding: 0;
}
#lineup-title-area {
    position: relative;
    background: url('../images/LINEUP-title.png');
    background-size: cover;
    background-position: center;
    margin: 0;
}
    #lineup-title-area h1 {
        text-shadow: #333 0 0 7px;
    }
    #lineup-title-area .title-txt {
        position: absolute;
        background-color: rgba(0,0,0,0.6);
    }


.cut-diag{
    position: relative;
    clip-path: polygon(50% 0%, 100% 0, 100% 35%, 100% 70%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 30% 0);
}
    .cut-diag img {
        width: 100%;
        height: 269px;
        object-fit: cover;
    }
    .number {
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(0,0);
    }
        .number::after {
            z-index: 2;
            content: url('images/LINEUP-item001.png');
            height: 300px;
            width: 315px;
        }
    .item-txt {
        z-index: 3;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 0.7em;
        padding: 0.5em;
        background-color: rgba(0,0,0,0.7);
    }
.fadeUpTrigger {
    opacity: 0;
}
.fadeUp {
    animation-name:fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
#lineup .link-btn {
    line-height: 30px;
}
/*------------------------------------------------------------
    Gallery//Top
------------------------------------------------------------*/
#gallery-bn-area {
    position: relative;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}
#gallery-bn-area h1 {
    position: absolute;
    top: 35%;
    text-shadow: #333 0 0 7px;
}
    #gallery-bn-area img {
        object-fit: cover;
        width: 100%;
        margin: 0 auto;
    }
/*------------------------------------------------------------
    News//Top
------------------------------------------------------------*/
.link-btn {
    display: block;
    padding: 0.5em 1em;
    margin: 1em auto;
    text-align: center;
    border: #000 2px solid;
    background-color: #000;
    color: #fff;
}
    .link-btn:hover {
        border: #000 2px solid;
        background-color: #fff;
        color: #000;
    }
#news {
    position: relative;
    background-color: #fff;
    padding: 0.5em 1em;
    margin: 2em auto;
    box-sizing: border-box;
}
.title-news {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 1.5;
    margin: 0 0 0.5em 0;
    padding: 0;
    color: #000;
    text-align: center;
    font-family: "Chakra Petch", sans-serif;
    font-weight: 700;
    font-style: normal;
}
    .title-news::before {
        content: '';
        position: absolute;
        border-bottom: 5px solid #ff0000;
        top: 80%;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
    }
.news-slide {
    padding: 0;
}
    .news-slide li {
        position: relative;
    }
        .news-slide img {
            height:auto;
        }
        .news-slide .news-txt {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            font-size: 80%;
            line-height: 2.0;
            padding: 0.3em 0.5em;
            background-color: rgba(0,0,0,0.7);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
            .news-slide .news-txt p {
                text-align: right;
                margin: 0;
                padding: 0 0.3em;
                border: #eee 1px solid;
            }
            .news-slide .news-txt span {
                display: block;
                width: 100%;
            }
            .news-slide .slick-slide {
                position: relative;
                transition: transform .3s;
                padding: 0;
            }
            .news-slide .slick-center {
                transform: scale(1);
            }
            .slick-dots li {
                height: 10px !important;
                background-color: #eee;
            }
            .slick-dots .slick-active {
                background-color: #ff0000;
            }
                .slick-dots button::before {
                    color: #eee;
                    content: '' !important;
                }
.not-news {
    color: #000;
    text-align: center;
    list-style: none;
    line-height: 2.0;
    width: 100%;
}
    .not-news span {
        font-size: 80%;
    }
/*------------------------------------------------------------
    Banner Area//Top
------------------------------------------------------------*/
.banner-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 2em auto;
    width: 90%;
}
    .banner-area h1 {
        display: block;
        width: 100%;
        text-align: center;
    }
    .banner-area a {
        width: 48%;
        margin-bottom: 1em;
    }
        .banner-comment {
            width: 100%;
            padding: 1em;
            box-sizing: border-box;
            text-align: center;
        }
/*===========================================================
    Lower
============================================================*/
.home_btn {
    display: block;
    text-align: right;
    margin: 2em 0;
}
.content-area .box-line {
    width: 90%;
    text-align: center;
    line-height: 1.8;
    padding: 1em;
    margin: 1em auto;
    border: #eee 1px solid;
}
    .content-area .box-line strong {
        font-weight: 900;
        font-size: 1.5em;
    }
    .content-area .box-line a {
        text-decoration: underline;
    }
        .content-area .box-line a::after {
            content: '\f08e';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            padding-left: 1em;
        }

/*----------------------------------------------------------
    ページ毎ヘッダー画像変更
-----------------------------------------------------------*/
#race-reserve-header,
#contact-header,
#concept-header,
#news-header,
#race-report-header,
#gallery-header,
#lineup-header,
#post-header {
    box-sizing: border-box;
    background-color: #000;
    color: #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
}
    #race-reserve-header h1,
    #contact-header h1,
    #concept-header h1,
    #news-header h1,
    #race-report-header h1,
    #gallery-header h1,
    #lineup-header h1,
    #post-header h1 {
        font-size: 250%;
        text-transform: uppercase;/* 小文字を大文字に変換 */
        text-shadow: #333 5px 5px 5px;
    }
    #privacy-policy-header h1 {
        font-size: 250%;
        text-transform: uppercase;
        background-color: #333;
    }

    /* #race-reserve-header {
        background-image: url(../images/race-reserve-header.png);
    } */

    #contact-header {
        background-image: url(../images/contact-header.png);
    }
    #race-reserve-header,
    #concept-header {
        background-image: url(../images/concept-header.png);
    }
    #gallery-header,
    #race-report-header,
    #lineup-header {
        background-image: url(../images/lineup-header.png);
    }
    #news-header,
    #post-header {
        background-image: url(../images/concept-header.png);
    }
/*----------------------------------------------------------
    Lower Content
-----------------------------------------------------------*/
#container-lower {
    min-height: 800px;
    padding-bottom: 2em;
}
/*----------------------------------------------------------
    Breadcrumb
-----------------------------------------------------------*/
#breadcrumb-area {
    width: 100%;
    text-align: left;
    padding: 1em 0;
    margin: 0;
    font-family: "Chakra Petch", sans-serif;
    font-weight: 500;
    font-style: normal;
}
ul.breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}
    ul.breadcrumb li {
        height: 25px;
    }
    ul.breadcrumb li img {
        margin: 0 0.5em;
        padding: 0;
    }
    ul.breadcrumb li.txt-li {
        line-height: 25px;
    }
    #container-lower h2::first-letter,
    #container-lower h3::first-letter {
        color: #ff0000;
    }
/*----------------------------------------------------------
    concept // page
-----------------------------------------------------------*/
.concept-content {
    position: relative;
}
.thum-head {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}
    .thum-head img {
        width: 100%;
        height: 300px;
        margin: 0 auto;
        object-fit: cover;
    }
    .thum-head-txt {
        position: absolute;
        top: 3%;
        left: 0;
        padding: 1em;
        box-sizing: border-box;
        line-height: 1.8;
        text-align: center;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .concept-content h3 {
        position: relative;
        padding-left: 1em;
    }
        .concept-content h3::before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            height: 50px;
            width: 2px;/*線の太さ*/
            background-color: #ff0000;
            transform: rotate(30deg);
        }
        .concept-content h3 span {
            display: block;
            font-size: 75%;
            line-height: 0.8;
            font-style: italic;
            font-weight: 500;
        }
.concept-content .is-layout-flex .is-layout-flow h4.wp-block-heading {
    padding: 0.5em;
    text-align: center;
    border: #fff 1px solid;
}
.white-content .wp-block-table,
.black-content .wp-block-table,
.red-content .wp-block-table,
.yellow-content .wp-block-table,
.blue-content .wp-block-table,
.green-content .wp-block-table {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding: 1em 0;
    box-sizing: border-box;
    color: #000;
    background-size: cover;
    background-color: #eee;
}
.white-content .wp-block-table table,
.black-content .wp-block-table table,
.red-content .wp-block-table table,
.yellow-content .wp-block-table table,
.blue-content .wp-block-table table,
.green-content .wp-block-table table {
    width: 960px;
    margin: 0 auto;
}
    .white-content .wp-block-table td,
    .black-content .wp-block-table td,
    .red-content .wp-block-table td,
    .yellow-content .wp-block-table td,
    .blue-content .wp-block-table td,
    .green-content .wp-block-table td {
        border-top: none;
        border-bottom: #666 1px solid;
        border-left: none;
        border-right: none;
    }
/*----------------------------------------------------------
    contacr // page
-----------------------------------------------------------*/
#contact-form {
    width: 90%;
    margin: 2em auto;
    padding: 0;
}
    #contact-form p {
        margin: 0;
        padding: 0;
    }
    #contact-form dl {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
        #contact-form dt {
            width: 30%;
            margin: 0 0 0.5em 0;
            padding: 1em 2em;
            background-color: #666;
        }
        #contact-form dd {
            width: 70%;
            margin: 0 0 0.5em 0;
            padding: 1em 2em;
        }
            #contact-form dd input[type=text],
            #contact-form dd input[type=tel],
            #contact-form dd input[type=email],
            #contact-form dd textarea {
                width: 100%;
                margin: 0;
                padding: 1em 1.5em;
                border-radius: 5px;
                border: none;
            }
    #contact-form input[type=submit] {
        width: 100%;
        margin: 0 auto;
        padding: 1em;
        font-size: 150%;
        text-align: center;
        color: #fff;
        background-color: #666;
        border: none;
        border-radius: 5px;
    }
        #contact-form input[type=submit]:hover {
            color: #000;
            background-color: #eee;
        }
/*----------------------------------------------------------
    Archive | News // 1カラム
-----------------------------------------------------------*/
.archive-area {
    width: 100%;
}
.archive-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 1em;
    margin: 0 0 1em 0;
}
    .archive-title {
        padding: 0;
        margin: 0;
    }
    .date-area {
        padding: 0.5em;
        margin-bottom: 1em;
        border-bottom: #333 1px solid;
        font-size: 80%;
        text-align: right;
    }
.arch-2column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}
.flex2column {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}
.photo {
    display: block;
    width: 100%;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}
    .photo img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
a .photo:hover {
    opacity: 0.5;
}
    .arc-excerpt {
        flex-grow:1;
        width: 100%;
    }

    .arch-link-btn {
        text-align: right;
        padding: 0.5em;
        margin: 1em 1em;
        border: #666 1px solid;
        border-right: #ff0000 3px solid;
    }
        .arch-link-btn:hover {
            background-color: #666;
        }
/*----------------------------------------------------------
    Archive | Race Report + Gallary + Lineup // 3カラム
-----------------------------------------------------------*/
#race-report-area,
#gallery-area,
#lineup-area {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
}
    .rr-archive-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }