html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
    box-sizing: border-box;
}


section{
    position: relative;
    margin: 120px 0;
    color: #fff;
}
#contents{
    opacity: 0;
    transition: opacity 2s;
}
#contents.is-visible{
    opacity: 1;
}
.wrapper {
    padding: /*140*/ 90px 0 0 0;
    width: 100vw;
    position: relative;
    z-index: 0;
}
body#onodera-user-runbulls-audition{
    font-family: "Noto Sans JP", sans-serif;
    background-color: #000;
}
.dleague p{
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 500;
}
.b{
    font-weight: 900;
    color: #d38c00;
}
#main-content{
    position: relative;
    z-index: 4;
}
.mainBg-ol{
    position: fixed;
    z-index: 3;
    width: 100vw;
    height: 100vh;
    content: '';
    background-color: rgba(0, 0, 0, .54);
    top: 0;
    left: 0;
}
.mainBg-copyright{
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 150px;
    height: auto;
    z-index: 2;
}
.mainBg{
    position: fixed;
    z-index: 1;
    width: auto;
    height: 100vh;
    aspect-ratio: 16 / 9;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
.mainBg img{
    position: relative;
    width: auto;
    height: 100vh;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/*-----------Opening-----------*/
#opening{
    width: 100%;
    height: 100%;
    background-color: #000000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transition: opacity 0.8s ease; /* 0.8秒かけて変化 */
    margin: 0;
}
#opening > div.videoWrapper{
    width: 100%;
    height: 100vh;
    aspect-ratio: 16 / 9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#youtube-player{
    width: 100vw;
    height: 56.25vw; /* 16:9の場合 */
    min-height: 100vh;
    min-width: 177.77vh; /* 100 * 16 / 9 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#opening > div#skip{
    /* top: 130px; */
    position: fixed;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    top: 50%;
}
#opening > div#skip span{
    color: #ffffff;
    font-weight: 500;
    font-size: 1.6rem;
    padding: 7px 20px;
    border: 1px solid #fff;
    background-color: #d38c00ab;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: fit-content;
    height: fit-content;
}
#opening > div#skip span::after{
    content: '';
    display: block;
    width: 11px;
    height: 12px;
    background-image: url("/img/dleague/skipAfter.svg");
    background-repeat: no-repeat;
    background-size: cover;
    margin: 3px 0 0 10px;
}

/*音量スイッチ*/
.mute-switch {
    position: fixed;
    top: 100px;
    left: 30px;
    display: inline-block;
    width: 86px;
    height: 30px;
    z-index: 100;
}
.mute-switch input{
    opacity: 0;
    width: 0;
    height: 0;
}
/* 土台部分 */
.soundSlider {
    cursor: pointer;
    transition: .4s;
    border-radius: 99999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0px;
    border: 2px solid #fff; /* 白いフチ */
}
/* 白い動く丸部分（つまみ） */
.soundSlider:before {
    position: absolute;
    content: '';
    width: 45px;
    height: 30px;
    background-color: #fff;
    transition: .4s;
    border-radius: 99999px;
    z-index: 1;
}
.icon {
    z-index: 2; /* つまみより上に表示 */
    transition: .4s;
    display: flex;
    align-items: center;
}
.icon svg {
    width: 23px; height: 14px;
}
.icon-unmute{
    margin-left: 12px;
}
.icon-mute{
    margin-right: 10px;
}
/* --- 色と動きの制御 --- */

/* 1. 初期状態 (checked: ミュートONの状態) */
/* 左(音あり)はつまみがないので白、右(消音)はつまみがあるので黒 */
input:checked + .soundSlider .icon-unmute svg { fill: #fff; }
input:checked + .soundSlider .icon-mute svg   { fill: #000; }
input:checked + .soundSlider:before { transform: translateX(38px); } /* つまみは右へ */

/* 2. クリック後 (チェック解除: 音を出す状態) */
/* 左(音あり)につまみが来るので黒、右(消音)は白 */
input:not(:checked) + .soundSlider .icon-unmute svg { fill: #000; }
input:not(:checked) + .soundSlider .icon-mute svg   { fill: #fff; }
input:not(:checked) + .soundSlider:before { transform: translateX(0px); } /* つまみは左へ */

/*-----------スクロールアクション用-----------*/
.fadeIn{
    opacity: 0;
    visibility: hidden;
    transition: all 1s ease;
    transform: translateY(100px);
}
.is-active{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.cutIn{
    visibility: hidden;
    transition: all 0.4s;
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
}
.is-activeCut{
    visibility: visible;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}


/*-----------fv-----------*/
#fv{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 720px;
    margin: 0 0 220px;
}
.fvTitle{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    max-width: 1024px;
    height: fit-content;
}
.fvTitle .imgarea{
    width: 31.25%;
    height: auto;
}
.fvTitle .textarea{
    color: #fff;
    margin-top: 42px;
    position: relative;
    width: 100%;
    height: fit-content;
    text-align: center;
}
.fvTitle .textarea .main{
    font-size: 4.6rem;
    font-weight: 800;
    margin-top: 20px;
}
.fvTitle .textarea .sub{
    font-size: 3.2rem;
    font-weight: 800;
}
.deadline{
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.deadline::before, 
.deadline::after{
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #ffffff;
}
.deadline::before{
    margin-right: 10px;
}
.deadline::after{
    margin-left: 10px;
}

/*-----------fv以下コンテンツ-----------*/
/* 1. 外枠：サイズを固定 */
.slider-container.imgarea {
    display: block !important;
    position: relative !important;
    width: 58% !important;
    aspect-ratio: 704 / 507;
    overflow: hidden !important;
    background-color: #000;
}

/* 2. Slickの内部レール：ここが画像を外に飛ばさないように固定 */
.slider-container .slick-list,
.slider-container .slick-track {
    width: 100% !important;
    height: 100% !important;
    transform: none !important; /* 横移動の計算を無効化 */
}

/* 3. 各スライド：インラインの left 設定を強制的に 0 に上書き */
.slider-container .slick-slide {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important; /* ★ここが重要。マイナスの値を 0 に戻す */
    width: 100% !important;
    height: 100% !important;
    opacity: 0; /* JSの上書きを待つ */
    z-index: 1;
    transition: opacity 2s ease-in-out;
}

/* 4. アクティブスライドの表示確定 */
body #onodera-user-runbulls-audition .slider-container .slick-slide.slick-current,
body #onodera-user-runbulls-audition .slider-container .slick-slide.slick-active {
    opacity: 1 !important;
    z-index: 100 !important;
    visibility: visible !important;
}

/* 5. 画像自体の設定 */
.slider-container .slideItem,
.slider-container .slideItem img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 6. clip-path解除 */
.slider-container.slick-initialized {
    clip-path: none !important;
}


#news{
    margin-bottom: 220px;
}
#main-content h2{
    border: 2px solid #d38c00;
    background-color: rgba(0, 0, 0, .5);
    border-radius: 0px 10px 10px 0px;
    color: #d38c00;
    width: fit-content;
    height: auto;1
}
#about h2, #director h2{
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    border-left: none;
    width: fit-content;
    height: max-content;
    padding: 30px 5% 30px 0;
    top: -110px;
    z-index: 20;
}
#team h2, #news h2, #audition h2{
    margin: 0 auto;
    padding: 20px 64px;
    border-radius: 10px;
}

#about h2 .h2Inner, #director h2 .h2Inner{
    position: relative;
    margin-left: 12.5vw;
}
#team h2 .h2Inner, #news h2 .h2Inner, #audition h2 .h2Inner{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#about h2::before, #director h2::before{
    content: '';
    display: block;
    position: relative;
    left: 0;
    width: 12.5%;
}
.h2main{
    font-size: 6.4rem;
    line-height: 1;
    font-family: "Science Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 125,
        "CTRS" 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.h2main::after{
    content: '';
    width: 40px;
    height: 4px;
    background-color: #d38c00;
    margin-top: 12px;

}
.h2sub{
    margin-top: 20px;
}
#team h2 .h2Inner .h2main, #news h2 .h2Inner .h2main, #audition h2 .h2Inner .h2main{
    align-items: center;
}
#about .stWrap, #director .stWrap{
    position: relative;
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 0;
}
.stWrap .imgarea, .stWrap .textarea{
    position: relative;
}
.stWrap .imgarea{
    width: 58%;
}
.stWrap .textarea{
    width: 42%;
}
.stWrap.col{
    max-width: 960px;
    margin: 46px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#main-content h3{
    padding: 12px 32px;
    background-color: #d38c00;
    font-size: 2.8rem;
    line-height: 1.5;
    font-weight: 800;
    margin-bottom: 30px;
    color: #000000;
    text-align: justify;
    letter-spacing: -0.05rem;
}
h3 span{
    font-size: 1.8rem;
}
.stWrap .textarea p{
    margin-left: 32px;
    text-align: justify;
}
.dirPro{
    font-size: 1.6rem;
    line-height: 2;
    font-weight: 900;
}
#team .stWrap, #news .stWrap, #audition .stWrap{
    max-width: 960px;
    margin: 60px auto 0;
}
#audition .stWrap{
    padding: 0 30px;
}
.stWrap.aboutDL{
    max-width: 960px;
    margin: 60px auto 0;
    padding: 32px;
    box-sizing: border-box;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, .6);
}
.stWrap.aboutDL .imgarea{
    width: 256px;
    margin-right: 32px;
}
.stWrap.aboutDL .textarea{
    width: calc(100% - 320px);
    padding-left: 32px;
    border-left: 2px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: end;
}
.stWrap.aboutDL .textarea p{
    margin-left: 0;
}
.moreDetail{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    background-image: linear-gradient(109deg, #E600BF, #7300E6);
    font-weight: 800;
    color: #fff;
    margin-top: 20px;
}
.moreDetail:hover, .moreDetail:visited{
    color: #fff;
}
.moreDetail::before{
    content: url("/img/dleague/moreDetailafter.svg");
    width: 46px;
    height: 9px;
    margin-right: 20px;
    transition: margin-right 0.4s ease;
    margin-top: -16px;
}
.moreDetail:hover::before{
    margin-right: 10px;
}

.teamLogo{
    position: relative;
    width: 75%;
    min-width: 280px;
    margin-bottom: 30px;
}
.conceptTitle, .tagline{
    text-align: center;
    color: #fff;
}
.conceptTitle{
    font-family: "Science Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings: "slnt" 0, "wdth" 125, "CTRS" 0;
    font-size: 2.4rem;
    margin-bottom: 36px;
    padding: 12px 1rem;
    background-color: #003168;
    border-radius: 10px;
}
.tagline{
    font-weight: 800;
    font-size: 3.2rem;
    margin-bottom: 46px;
    line-height: 1.6;
}
.newsList{
    padding-bottom: 20px;
    border-bottom: 1px solid #aaaaaa;
    margin-bottom: 20px;
}
.newsList a, .newsList a:visited{
    color: #ffffff;
}
.headliner{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    transition: margin-bottom 0.4s
}
.headliner.is-open{
    margin-bottom: 14px;
}
.headliner .data{
    background: #ffffff;
    padding: 6px 22px 6px 12px;
    color: #003168;
    font-size: 1.3rem;
    border: 1px solid #003168;
    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%);
    margin-right: 32px;
    font-weight: 600;
    width: 118px;
    padding-bottom: 20px;
    height: 27px;
}
.newsTitle{
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.8;
    /* width: calc(100% - 191px); */
    width: calc(100% - 139px);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
}
.newsTitle::after{
    content: url(/img/dleague/moreDetailafter.svg);
    width: 46px;
    height: 8px;
    transform: rotate(90deg);
    margin-left: 32px;
    display: none;
}
.newsArticle{
    line-height: 0;
    opacity: 0;
    transition: line-height 0.4s, opacity 0.4s;
}
.newsArticle.is-open{
    line-height: 1.6;
    opacity: 1;
}
.auditionList dl{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid #d38c00;
    margin-bottom: 20px;
}
.auditionList:nth-child(8) > dl{
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}
.adtnItem{
    padding: 12px 24px;
    border: 1px solid #d38c00;
    color: #d38c00;
    background: rgba(0, 0, 0, .65);
    font-size: 1.6rem;
    font-weight: 700;
    width: 232px;
    text-align: center;
    margin-right: 48px;
    line-height: 1.4;
}
.adtnDetail{
    width: calc(100% - 280px);
    font-size: 1.4rem;
    line-height: 1.6;
    font-weight: 500;
    color: #ffffff;
}
.adtnDetail ul li{
    font-size: 1.6rem;
    margin-bottom: 6px;
    font-family: 'Noto Sans JP';
    font-weight: 800;
    letter-spacing: 0.05rem;
    line-height: 1.6;
    text-indent: -1em; /*ここで字下げ。今回は一文字分なので1em*/
    padding-left: 1em; /*text-indentでデザインが崩れるので修正*/
    word-break: break-all;
    color: #ffffff;
}
.adtnDetail ul li::before{
    content: '●';
    font-size: 1.2rem;
    display: inline-block;
    margin: 0 3px 2px 0;
}
.deadlineDisc{
    text-align: center;
    margin: 30px auto;
}
.linkEntry-Fixed, .linkEntry-Content{
    display: block;
    width: fit-content;
    height: fit-content;
    padding: 24px 36px;
    background-color: #d38c00;
    border-radius: 10px;
    margin: 60px auto 120px;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .75);
}
.linkEntry-Fixed span, .linkEntry-Content span{
    font-size: 2.6rem;
    font-family: "Science Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:
        "slnt" 0,
        "wdth" 125,
        "CTRS" 0;
    letter-spacing: 0.25rem;
    color: #000000;
    font-weight: 700;
    transition: letter-spacing 0.4s ease;
}
.linkEntry-Fixed:hover span, .linkEntry-Content:hover span{
    letter-spacing: 0.5rem;
}
.linkEntry-Fixed, .sns{
    position: fixed;
    z-index: 100;
}
.linkEntry-Fixed{
    bottom: 0;
    right: 0;
    border-radius: 10px 0 0 0;
    margin: 0;
    box-shadow: -2px -2px 8px rgba(0, 0, 0, .75);
}
.sns{
    top: 118px;
    right: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
.instgrm, .tktk, .x, .ytb{
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
}
.tktk img, .ytb img{
    opacity: .3;
}

body#onodera-user-runbulls-audition .contactArea{
    margin-bottom: 0;
}
body#onodera-user-runbulls-audition #footer{
    margin: 0;
}

.newsListWrap > .newsList:last-child{
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}


@media screen and (max-width: 960px){
    #main-content{
        width: calc(100% - 120px);
        margin: 0 auto;
    }
    .rc-anchor-invisible{
        display: none;
    }
    .wrapper{
        padding-top: 50px;
    }
    #fv{
        min-height: 0;
        margin: 90px 0 60px;
    }
    .fvTitle{
        width: 100%;
    }
    h2{
        width: 100%;
    }
    #about h2, #director h2, #audition h2{
        width: fit-content;
        position: relative;
        border-left: 2px solid #d38c00;
        top: 0;
        margin: 0 auto;
        padding: 20px 64px;
        border-radius: 10px;
        z-index: inherit;
        justify-content: center;
    }
    #about h2::before, #director h2::before{
        display: none;
    }
    #about h2 .h2Inner, #director h2 .h2Inner{
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .h2main{
        font-size: 3.6rem;
        align-items: center;
    }
    .h2sub{
        font-size: 1.8rem;
        text-align: center;
    }
    .stWrap{
        flex-direction: column;
        margin: 45px auto 0;
        gap: 30px;
    }
    .stWrap .imgarea, .stWrap .textarea{
        width: 100%;
    }
    .slider-container.imgarea{
        width: 75%!important;
    }
    #main-content h3{
        font-size: 2rem;
        text-align: center;
        box-sizing: border-box;
        margin-bottom: 20px;
        padding: 12px;
    }
    h3 span{
        font-size: 1.3rem;
    }
    #about .stWrap, #director .stWrap{
        flex-direction: column;
        gap: 20px;
    }
    .stWrap .textarea p{
        margin-left: 0;
    }
    .stWrap.aboutDL .imgarea{
        margin-right: 0;
    }
    .stWrap.aboutDL .textarea{
        width: 100%;
        border-left: none;
        border-top: 2px solid #fff;
        padding: 20px 0 0 0;
    }
    .moreDetail{
        margin-top: 10px;
    }
    .teamLogo{
        width: 85%;
    }
    .conceptTitle{
        font-size: 1.8rem;
    }
    .tagline{
        font-size: 2.4rem;
    }
    #news {
        margin-bottom: 120px;
    }
    .linkEntry-Fixed, .linkEntry-Content{
        padding: 12px 24px;
        box-sizing: border-box;
        text-align: center;
    }
    #footer .copyright{
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 767px){
    #opening{
        aspect-ratio: 16 / 9;
        margin-top: 0px;
        overflow: hidden;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #opening > div#skip{
        top: 90px;
    }
    #opening > div#skip span{
        font-size: 1.2rem;
        padding: 5px 12px;
    }
    #opening > div#skip span::after{
        width: 9px;
        height: 10px;
        margin: 1px 0 0 6px;
    }
    .mute-switch{
        left: 30px;
        top: 62px;
        width: 80px;
    }
    .soundSlider:before{
        width: 39px;
        height: 26px;
    }
    .icon svg{
        width: 18px;
        height: 10px;
    }
    .icon-mute{
        margin-right: 9px;
    }
    .fvTitle .imgarea{
        width: 260px;
    }
    #news{
        margin-bottom: 60px;
    }
    .headliner .data{
        margin-right: 24px;
        font-size: 1.1rem;
        width: 100px;
        padding: 6px 12px 6px 12px;
        height: 24px;

    }
    .newsTitle{
        width: 100%;
        font-size: 1.4rem;
        line-height: 1.6;

    }
    .newsTitle::after{
        margin-left: 0px;
    }
    .newsArticle{
        font-size: 1.3rem;
    }
    .linkEntry-Fixed{
        width: 100vw;
        text-align: center;
        border-radius: 0;
    }
    .sns{
        top: 80px;
        gap: 20px;
    }
    .instgrm, .tktk, .x, .ytb{
        width: 18px;
        height: 18px;
    }
    .headliner, .auditionList dl{
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        border-bottom: 0px;
    }
    .adtnItem{
        width: 100%;
    }
    .adtnDetail{
        width: 100%;
    }
    .adtnDetail ul li{
        text-indent: -0.5em;
    }
    .mainBg-copyright{
        width: 100px;
        bottom: 60px;
        left: 20px;
    }
}
@media screen and (max-width: 480px){
    #main-content{
        width: calc(100% - 60px);
    }
    #opening{
        aspect-ratio: 9 / 16;
    }
    #opening > div#skip{
        /* top: 90px; */
        top: 50%;
    }
    .mute-switch{
        top: 60px;
        left: 20px;
    }
    .fvTitle .textarea .sub{
        font-size: 2rem;
    }
    .fvTitle .textarea .main{
        font-size: 3.2rem;
    }
    .slider-container.imgarea{
        width: 100%!important;
    }
    #about h2, #director h2, #audition h2{
        width: calc(100% - 20px);
    }
}

@media screen and (max-width: 465px){
    .linkEntry-Content span{
        font-size: 2rem;
    }
}

.grecaptcha-badge{
    display: none;
}