@charset "utf-8";

/* CSS Document */
:root {
    --main-font: "Zen Kaku Gothic New", sans-serif;
    --regular: 400;
    --semi-bold: 500;
    --bold: 700;
    --mg-large: 48px;
    --mg-regular: 32px;
    --mg-small: 16px;
    --primary-color: #666;
    /*hsl: rgb:#3c4da5*/
    --secondary-color: #cccccc;
    /*#edb0d1*/
    --accent-color: #f9be00;
    --dark-theme: #666;
    /*#0d3936*/
    --light-theme: #eeeeee;
    /*#b2d7d4 #ccc;*/
    --gray: #FAF5F3;
    /*#b2d7d4*/
    --white: #fff;
    --classic: #FBDCE2;
    --modern: #F9DFAC;
}

.youbu {
    width: 100%;
}

.youbu * {
    font-family: var(--main-font);
    font-weight: var(--semi-bold);
    font-style: normal;
    font-size: 100%;
    line-height: 1.3;
    letter-spacing: 0.08em;
}

@media screen and (min-width:768px) {
    .youbu * {
        line-height: 1.4;
    }
}

.youbu small {
    display: block;
    font-size: clamp(1rem, 2.05vw, 1.125rem);
    /*clamp(0.75rem,1.57vw,0.875rem);*/
    text-align: center;
    margin-top: 8px;
    margin-bottom: 24px;
}

@media screen and (min-width:768px) {
    .youbu small {
        text-align: right;
    }
}

.youbu .maintitle-wrap {
    margin-bottom: var(--mg-small);
}

@media screen and (min-width:768px) {
    .youbu .maintitle-wrap {
        margin-bottom: var(--mg-regular);
    }
}

.youbu .maintitle-wrap {
    width: 100%;
}

.youbu .maintitle-wrap img {
    width: 100%;
}

.youbu .maintitle-wrap a {
    display: block;
    text-align: center;
}

.youbu .maintitle-wrap.small a img {
    width: 100%;
    max-width: 600px;
}

strong.strong {
    font-weight: var(--bold);
    text-decoration: underline;
}


/*topの表、スマホ～共通*/
.youbu .youbu_date_wrap {
    margin-bottom: 2.5rem;
}

.youbu .youbu__headline2 {
    width: 100%;
    background: var(--primary-color);
    color: var(--white);
    font-size: clamp(16px, 3.01vw, 1.75rem);
    /* clamp(20px,3.01vw,1.75rem);*/
    font-family: serif;
    padding: 0.375rem;
    text-align: center;
}

@media screen and (min-width:768px) {
    .youbu .youbu_date_wrap {
        margin-bottom: 4rem;
    }
}

.youbu .youbu__headline3 {
    font-size: clamp(18px, 2.65vw, 1.5rem);
    line-height: 1.5;
    font-weight: 600;
    text-align: left;
    margin: 40px auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

@media screen and (min-width:768px) {
    .youbu .youbu__headline3 {
        justify-content: center;
        flex-direction: row;
        text-align: center;
        gap: 1em;
    }
}

.noApplicable {
    width: min(80%, 640px);
    text-align: center;
    margin: 64px auto;
    font-family: var(--main-font);
    font-weight: var(--semi-bold);
    font-style: normal;
    font-size: 100%;
    line-height: 1.3;
    letter-spacing: 0.08em;
}

.youbu .display-pc {
    display: none;
}

@media screen and (min-width:768px) {
    .youbu .display-pc {
        display: block;
    }

    .display-sp {
        display: none;
    }
}


/*レスポンシブ---------------------------------*/
@media screen and (min-width:768px) {

    /* マウスオーバーした際のデザイン */

    .youbu .youbu__btn:hover {
        opacity: 1;
    }


    .youbu .pc {
        display: flex;
    }

    .youbu .sp {
        display: none;
    }
}

.youbu .container {
    width: 100%;
    margin: 0 auto;
}


.youbu .youbu__headline-date {
    font-size: clamp(18px, 3.01vw, 1.75rem);
    font-family: serif, var(--main-font);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem auto;
    /*2rem auto 0.5rem*/
}

.youbu .youbu__headline-date span {
    display: flex;
    align-items: center;
    width: 30%;
    height: 1px;
    background: var(--dark-theme);
}

.youbu .youbu__headline-date span:last-child {
    display: flex;
    justify-content: flex-end;
}

.youbu .youbu__headline-date span:first-child::before,
.youbu .youbu__headline-date span:last-child::after {
    display: block;
    content: "";
    width: clamp(6px, 0.84vw, 8px);
    height: clamp(6px, 0.84vw, 8px);
    background: var(--dark-theme);
    transform: rotate(45deg);
}

.youbu .youbu_part-wrap {
    padding: 1rem;
}

.youbu .youbu__headline-part {
    font-family: var(--main-font);
    font-size: clamp(14px, 2vw, 1.125rem);
    margin-bottom: 0.5rem;
    /*0.25*/
    display: block;
    padding: 6px 1em;
    line-height: 1.6;
    text-align: center;
    color: #555;
    font-weight: bold;
}

.youbu .youbu__headline-part.classic {
    background: var(--classic);
}

.youbu .youbu__headline-part.modern {
    background: var(--modern);
}

@media screen and (min-width:768px) {
    .youbu .youbu__headline-part {
        display: inline-block;
        padding: 4px 2.5em 4px 1em;
        text-align: left;
        position: relative;
    }

    .youbu .youbu__headline-part::after {
        position: absolute;
        top: 0;
        right: -1px;
        display: block;
        content: "";
        width: calc(0.5em + 1px);
        height: calc(1em * 1.6 + 8px);
        clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
        background: #fff;
    }
}


.youbu .youbu__headline4 {
    z-index: 2;
    font-size: clamp(16px, 2.17vw, 1.25rem);
    margin-top: 40px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.7;
    position: relative;
}

.youbu .youbu__headline4::before {
    z-index: -1;
    position: absolute;
    left: -8px;
    transform: rotate(45deg);
    height: 1.8rem;
    /*2*/
    width: 1.8rem;
    display: block;
    background: var(--modern);
    content: '';
}

.youbu .youbu__headline4::after {
    z-index: -1;
    position: absolute;
    left: -8px;
    top: -8px;
    transform: rotate(45deg);
    height: 1.6rem;
    /*1.8*/
    width: 1.6rem;
    display: block;
    background: var(--classic);
    content: '';
}


@media screen and (min-width:480px) {
    .youbu .youbu__headline4 {
        line-height: 1.5;
    }
}

.youbu_linkList.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}



@media screen and (min-width:480px) {
    .youbu .container {
        width: 80%;
    }

    .youbu_linkList.grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}


.youbu_linkList__item a {
    min-height: 3em;
    font-size: clamp(14px, 2vw, 16px);
    text-align: center;
    display: flex;
    /*block*/
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    border-radius: 4px;
    border: 1px solid var(--dark-theme);
    color: var(--dark-theme);
    /*background: var(--dark-theme);*/
    position: relative;
    container-type: inline-size;
}

.youbu_linkList__item.unpublished>a {
    pointer-events: none;
    /* クリックを無効化 */
    cursor: default;
    /* カーソルをデフォルトスタイルに */
    background-color: lightgray;
    /* リンクカラーを変更して無効化している感を出す */
}



/*ボタンの矢印アイコン*/
.youbu_linkList.grid .youbu_linkList__item:not(.unpublished) a::after {
    display: block;
    content: "";
    width: 0.5rem;
    /*0.375rem*/
    height: 0.375rem;
    /*0.375rem*/
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--dark-theme);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: clamp(10px, 1vw, 1rem);
}

@container (min-width: 320px) {
    .display-narrow {
        display: none;
    }
}

.youbu_linkList .resultlink_wrap {
    background: var(--dark-theme);
    border-radius: 4px;
    position: relative;
}

/*予選結果ページ*/
.youbu_numberList .gridList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    /*repeat(auto-fit, 4.3rem);  ←repeat(auto-fit, minmax(8rem,1fr));*/
    justify-content: flex-start;
}

.youbu_numberList .gridList .item {
    display: grid;
    place-items: center;
    background: #eee;
    border: 1px solid #fff;
    min-height: 3em;
}

/*決戦結果ページ*/

img {
    max-width: 100%;
}

.youbu .youbu-logo-wrap {
    margin: 80px auto 40px;
    width: clamp(108px, 12vw, 120px);
    /*clamp(80px,12vw,120px)*/
}

.youbu .sponsorship,
.youbu .contact {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.4em;
    width: 100%;
}

@media screen and (min-width:480px) {

    .youbu .sponsorship,
    .youbu .contact {
        width: min(80%, 640px);
        /*80%*/
    }
}

.winner-detail-wrap {
    margin: 2rem auto;
    max-width: 540px;
}

.winner-detail-wrap .winner-detail {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
}

@media screen and (min-width:768px) {
    .winner-detail-wrap {
        max-width: 100%;
    }

    .winner-detail-wrap .winner-detail {
        border: none;
    }
}

.winner-detail-wrap .winner-detail .itemwrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /*margin-bottom: 0.5em;*/
}

.winner-detail-wrap .winner-detail-headline-pc .itemwrap::before {
    display: inline-block;
    content: "";
    width: 0.5rem;
    height: 0.375rem;
    margin-right: 4px;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background: var(--dark-theme);
}

.winner-detail-wrap .winner-detail dt {
    padding: 2px 1em;
    font-weight: bold;
    background: #eee;
}

.winner-detail-wrap .winner-detail dd {
    padding: 0.5em;
    /*0.25em 1em*/
}

.winner-detail-wrap .winner-detail .itemwrap.rank dt {
    display: none;
}

.winner-detail-wrap .winner-detail .itemwrap.rank dd {
    /*
            background: #666;
            color: #fff;
*/
    font-size: 1.25em;
    text-align: center;
}

.winner-detail-wrap .winner-detail .itemwrap.title dd::before {
    display: inline-block;
    /* content: "「" */
}

.winner-detail-wrap .winner-detail .itemwrap.title dd::after {
    display: inline-block;
    /* content: "」" */
}

.winner-detail-wrap .winner-detail .itemwrap.rank dd .rank__prize {
    font-size: 0.875em;
    text-align: center;
    font-weight: 600;
    background: #fff;
    color: navy;
    margin-top: 2px;
    padding: 4px;
}

@media screen and (min-width:768px) {
    /*PC用、表の見出し*/

    .winner-detail-wrap .winner-detail-headline-pc {
        display: flex;
        flex-direction: row;
        gap: 1em;
        font-size: 0.75rem;
        min-height: 3em;
    }

    .winner-detail-wrap .winner-detail-headline-pc .itemwrap:first-child {
        width: 12%;
    }

    .winner-detail-wrap .winner-detail-headline-pc .itemwrap:nth-child(2) {
        width: 20%;
    }

    .winner-detail-wrap .winner-detail-headline-pc .itemwrap:nth-child(3) {
        width: 33%;
    }

    .winner-detail-wrap .winner-detail-headline-pc .itemwrap:nth-child(4) {
        width: 33%;
    }

    /*
               .winner-detail-wrap .winner-detail-headline-pc .itemwrap:nth-child(5){
                    width: 29%;
                }
*/

    /*表の中身*/
    .winner-detail-wrap .winner-detail {
        min-height: 4em;
        flex-direction: row;
        align-items: center;
        gap: 1em;
        border-bottom: 1px solid #333;
        margin-bottom: 0;
    }

    .winner-detail-wrap .winner-detail dt {
        display: none;
    }

    .winner-detail-wrap .winner-detail .itemwrap {
        /*border-left: 2px solid #eee;*/
        margin-bottom: 0;
    }

    .winner-detail-wrap .winner-detail .itemwrap:first-child {
        width: 12%;
    }

    .winner-detail-wrap .winner-detail .itemwrap:nth-child(2) {
        width: 20%;
    }

    .winner-detail-wrap .winner-detail .itemwrap:nth-child(3) {
        width: 33%;
    }

    .winner-detail-wrap .winner-detail .itemwrap:nth-child(4) {
        width: 33%;
    }


    .winner-detail-wrap .winner-detail dd {
        padding: 0;
    }

    .winner-detail-wrap .winner-detail .itemwrap:first-child dd {
        margin: 0 auto;
    }

    .winner-detail-wrap .winner-detail .itemwrap.rank dd {
        font-size: inherit;
    }
}


/*202401014*/

.winner-detail {
    position: relative;
}

.winner-detail::before {
    position: absolute;
    top: 3.5%;
    left: 24vw;
    width: 1.75rem;
    height: 1.75rem;
    display: block;
    content: '';
}

.winner-detail:first-of-type::before {
    background: url(/info/youbu/img/gold.png) no-repeat left top/contain;
}

.winner-detail:nth-of-type(2)::before {
    background: url(/info/youbu/img/silver.png) no-repeat left top/contain;
}

.winner-detail:nth-of-type(3)::before {
    background: url(/info/youbu/img/bronze.png) no-repeat left top/contain;
}

.winner-detail .itemwrap .rank__rank {
    font-weight: bold;
}

@media screen and (min-width:768px) {
    .winner-detail::before {
        top: 3%;
        left: 0;
        width: clamp(1.25rem, 2.92vw, 2rem);
        height: clamp(1.25rem, 2.92vw, 2rem);
    }
}

.youbu .youbutop-textlink {
    display: block;
    text-align: center;
    margin: 64px auto;
    color: navy;
    position: relative;
    width: 17em;
}

.youbu .youbutop-textlink::before {
    display: block;
    content: "";
    width: 0.5rem;
    height: 0.375rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--dark-theme);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    right: clamp(10px, 1vw, 1rem);
}