@charset "UTF-8";
:root {
    /* --accent:rgb(236, 77, 19); */
    /* --accent:#ec9913; */
    --accent:navy;
    --theme-dark:#333;
    --theme:#555;
    --theme-light:#ccc;
    --dark:#4173a2;
    --mid:#555;
    --mid-light:#ccc;
    --light:#eee;
    --accent_r:#ee5955;
    --accent_y:#fbf00d;
  }

.relay_carnival__container *{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
}

.relay_carnival__container{
    position: relative;
}

.relay_carnival__container h1,.relay_carnival__container h2,.relay_carnival__container h3,.relay_carnival__container h4,.relay_carnival__container p,.relay_carnival__container a,.relay_carnival__container dt,.relay_carnival__container dd,.relay_carnival__container span{
  line-height: 1.6;
}
.relay_carnival__container picture{
    margin-bottom: 0.5rem;
}

.relay_carnival__container img{
    width: 100%;
}
.relay_carnival__container .maintitle-wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}
    @media screen and (min-width:768px) {
        .relay_carnival__container .maintitle-wrap{
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
    }
.relay_carnival__container .maintitle-wrap h1{
    font-size: 1.5rem;
    font-weight: 600;
}


.relay_carnival__container .maintitle-wrap p{
    font-size: 0.975rem;
    font-weight: 600;
}
.relay_carnival__container .maintitle-wrap p{
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 0.5rem; */
}
.relay_carnival__container .maintitle-wrap .relay-c__nav-title span{
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--dark);
}



.relay-c__nav-wrap{
    width: 100%;
    margin-bottom: 1rem;
}
.relay-c__nav-wrap h2{
    width: 100%;
    margin-bottom: 4px;
    font-size: 1.25rem;
    background: #eee;
    text-align: center;
}

.relay-c__nav-wrap ul{
    width: 100%;
    display: grid;	
    gap: 4px;
    grid-template-columns: 1fr;	
}
@media screen and (480px <= width < 1024px) {
    .relay-c__nav-wrap ul{
    grid-template-columns:1fr 1fr;
    }
    .relay-c__nav-wrap ul li a{
        min-height: 3.5em;
        }
    
}
@media screen and (min-width:1024px) {
    .relay-c__nav-wrap ul{
    grid-template-columns:repeat(auto-fit, minmax(100px,1fr));
    grid-template-rows: auto;
    }
}



.relay-c__nav-wrap li a{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100%;
    padding: 4px 20px 4px 8px;
    background: var(--accent_y);
    color: var(--dark);
    font-weight: 700;
    border: 2px solid transparent;
    position: relative;
}
.relay-c__nav-wrap li:not(.box-others) a{
    font-size: 1.25rem;
}
.relay-c__nav-wrap li.box-others a{
    font-size: 0.875rem;
}


.relay-c__nav-wrap li a::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--dark);
    border-right: 2px solid var(--dark);
}
.relay-c__nav-wrap li a:hover{
    opacity: 1;
    background: #fff;
    color: var(--dark);
    /* color:  var(--dark); */
    border: 2px solid var(--dark);
}
.relay-c__nav-wrap li a:hover::after{
    border-top: 2px solid var(--dark);
    border-right: 2px solid var(--dark);
}
.relay-c__nav-wrap .pay{
    display: block;
    width: 20px;
    aspect-ratio: 1/1;
	background:
    url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><defs><style>.cls-1{fill:%233471d6;}</style></defs><path class="cls-1" d="M26.03,30.08H9.97c-1.59,0-2.89-1.3-2.89-2.89v-9.87c0-1.59,1.3-2.89,2.89-2.89H26.03c1.59,0,2.89,1.3,2.89,2.89v9.87c0,1.59-1.3,2.89-2.89,2.89ZM9.97,16.43c-.49,0-.89,.4-.89,.89v9.87c0,.49,.4,.89,.89,.89H26.03c.49,0,.89-.4,.89-.89v-9.87c0-.49-.4-.89-.89-.89H9.97Z"/><path class="cls-1" d="M25.87,15.13h-2.5v-1.33c0-2.97-2.42-5.39-5.39-5.39s-5.39,2.42-5.39,5.39v1.27h-2.5v-1.27c0-4.35,3.54-7.89,7.89-7.89s7.89,3.54,7.89,7.89v1.33Z"/><path class="cls-1" d="M18.99,23.05v2.48h-1.85v-2.48c-.75-.35-1.28-1.11-1.28-1.99,0-1.22,.99-2.2,2.2-2.2s2.2,.99,2.2,2.2c0,.89-.53,1.64-1.28,1.99Z"/></svg>');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    margin-left:4px;
}

/* リレーカーニバルTOPページへ戻るリンク */
.relay_c_toplink{
    width: 16em;
    display: block;
    margin: 0 0 0 auto;
    background: #999;
    font-size: 0.875rem;
    border-radius: 99px;
    color: #fff;
    padding: 2px 22px 2px 14px;
    position: relative;
}
.relay_c_toplink::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    width: 8px;
    height:8px;
    background: var(--accent_y);
}
.relay_c_top .relay_c_toplink{
    display: none;
}

@media screen and (min-width:480px) {
    .relay-c__submenu-wrap .relay_c_toplink{
        margin-right: 64px;
    }
}



/* ----------------------------
    TOPページ
---------------------------- */
.intro_container {
    position: relative;
    z-index: 0;
	padding: 0.5rem;
	overflow: hidden;
}

.intro_container:before{
	content: '';
	position: absolute;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
    /* filter: blur(8px); */
    z-index: -1;
	min-height: 1000px;
	background: url('img/relay_background.jpg');
	background-size: contain;
}

.relay_carnival__container .photowrap{
    display: grid; 
    gap: 4px;
    grid-template-columns: 1fr 1fr;
}
        @media screen and (min-width:768px){
            .relay_carnival__container .photowrap{
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        }

.relay_carnival__container .lead{
    background: aliceblue;
    padding: 1rem;
    letter-spacing: 0.04em;
    max-width: 580px;
    margin: 0.5rem auto;
}
.lead .leadtitle{
    margin: 0.5rem 0;
}
.lead .leadtitle span{
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--dark);
    color: var(--accent_y);
    padding: 2px 0.5rem;
    font-family: "Noto Sans JP",sans-serif;
    line-height: 1.8;
}

    @media screen and (min-width:480px){
		.intro_container {
			padding: 1rem;
		}
		
		.lead h3.leadtitle{
			/* width: 12em; */
			text-align: center;
			margin: 0.5rem auto;
		}
		.lead .leadtitle span{
			font-size: 1.25rem;
		}
		.lead .leadtitle span:last-of-type{
			font-size: 1.75rem;
		}
	}


    .relay_carnival__container.relay_c_stadium .lead{
        background: #fff;
        max-width: 100%;
    }

    .relay_carnival__container.relay_c_stadium .lead h3{
        font-weight: 700;
        margin-bottom: 0.5rem;
    }



h2.event-head{
    margin: 1rem auto;
    padding: 1rem;
    border-bottom: 4px solid var(--dark);
    border-top: 4px solid var(--dark);
    font-size: 1.5rem;
    font-weight: bold;
    position: relative;
}

h2.event-head::after{
    content: "（注）4/16時点の兵庫陸上競技協会の提供データに基づきます";
    display: block;
    font-size: clamp(12px,3vw,14px);
    font-weight: 500;
    color: var(--dark);
}

@media screen and (min-width:480px){
    h2.event-head::after{
        position: absolute;
        right: 4px;
        bottom: 1px;
    }
}





/* ◆◆◆◆◆案02◆◆◆◆◆ */
.tab-and-pc .eventmenu-area{
    display: none;
    /* スマホでは非表示 */
}
.relay-c__eventmenu-wrap{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 16px;
}
.modal-window .relay-c__eventmenu-wrap{
    padding: 0 16px 16px;
}


.relay-c__eventmenu{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    font-size: 0.875rem;
}
    /* 「小学」　「中学」 */
    p.eventmenu-head{
        font-weight: 800;
        color: #555;
    }


    /* リンク部分 【★線なし塗あり】*/
    .relay-c__eventmenu a{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4px;
        background: aliceblue;
        color: var(--dark);
        text-align: center;
        position: relative;
    }
    .relay-c__eventmenu.women a,
    .relay-c__eventmenu a.women
    {
        background: #fff0f0;
    } 

    .relay-c__eventmenu.mixed a,
    .relay-c__eventmenu a.mixed
    {
        background: #f8fbe3;/* #f0fff0; */
    } 

    @media screen and (min-width:375px){
            /* .relay-c__eventmenu{
            grid-template-columns: 1fr 1fr;
            font-size: 1rem;
            background: #ccc;
            gap: 2px;
            } */

            .relay-c__eventmenu{
                grid-template-columns: 1fr 1fr;
                font-size: 1rem;
                /* background: #ccc; */
                gap: 2px;
                }
        }    

    @media screen and (min-width:768px){
        .eventmenu-area{
            display: block;
            margin-bottom: 2rem;
        }
        .relay-c__eventmenu{
            background: #fff;
            grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
        }
    }    




    
.relay-c__eventmenu a::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%) rotate(45deg);
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid var(--dark);
    border-right: 2px solid var(--dark);
}

/* アコーディオンメニューのあるエリア */

.relay-c__submenu-wrap{
    position: relative;
}

@media screen and (min-width:600px){
    .relay-c__submenu-wrap > ul{
        width: calc(100% - 64px);
    }        
}


        /*ベース*/
        .relay_carnival__container .toggle {
            display: none;
        }
        .relay_carnival__container .Label {		/*タイトル*/
            padding: 1em;
            display: block;
            color: #fff;
            background:var(--dark);
            color: #fff;
        }
        .relay_carnival__container .Label::before{		/*タイトル横の矢印*/
            content:"";
            width: 6px;
            height: 6px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
            -webkit-transform: rotate(45deg);
            position: absolute;
            top:calc( 50% - 3px );
            right: 20px;
            transform: rotate(135deg);
        }

        .relay_carnival__container .Label.default::before{		/*タイトル横の矢印★デフォルト*/
            transform: rotate(-45deg);
        }
        
        .relay_carnival__container .Label,
        .relay_carnival__container .content {
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transform: translateZ(0);
            transition: all 0.3s;
        }

        .relay_carnival__container .content {		/*本文*/
            height: 0;
            margin-bottom:10px;
            /* padding:0 20px; */
            overflow: hidden;
        }

        .relay_carnival__container .content.default {		/*デフォルトは一つ目のアコーディオンあけておく*/
            height: auto;
            transition: all .3s;
        }
        @media screen and (min-width:768px) {
                .relay_carnival__container .content.default{
                    padding: 20px;
                }
            }

        .relay_carnival__container .toggle:checked + .Label + .content {	/*開閉時*/
            height: auto;
            transition: all .3s;
        }



        .relay_carnival__container .toggle:checked + .Label.default,
        .relay_carnival__container .toggle:checked + .content.default {/*デフォルトは一つ目のアコーディオンあけておく*/
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            transform: translateZ(0);
            transition: all 0.3s;
        }





        .relay_carnival__container .toggle:checked + .Label.default + .content {	/*開閉時★デフォルト*/
            height: 0;
            margin-bottom:10px;
            /* padding:0 20px; */
            overflow: hidden;
        }

        
            @media screen and (min-width:768px){
                .relay_carnival__container .toggle:checked + .Label + .content {	/*開閉時*/
                    padding:20px ;
                }
                .relay_carnival__container .toggle:checked + .Label.default + .content {
                    padding:0 ;
                }

            }    

        .relay_carnival__container .toggle:checked + .Label + .content p{
            margin: 0;
        }
    
    
        .relay_carnival__container .toggle:checked + .Label::before {
            transform: rotate(-45deg) !important;
        }

        .relay_carnival__container .toggle:checked + .Label.default::before { 
            /* デフォルト */
            transform: rotate(135deg) !important;
        }


    .relay_carnival__container p,.relay_carnival__container ul{
        font-size:90%;
    }

    @media screen and (min-width:768px){
        .relay_carnival__container p,.relay_carnival__container ul{
            font-size:100%;
            line-height: 1.6em;
        }
        .relay_carnival__container h4{
            font-size: 100%;
        } 
    }    

/* 「●組」 */
.relay-c__list-wrap h3 {
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    background: var(--accent_y);

    /* color: #fff; */
    color: var(--theme-dark);
    letter-spacing: 0.1rem;
    font-weight: bold;
    margin: 1rem 0 0;
}
    @media screen and (min-width:768px){
        .relay-c__list-wrap h3 {
            margin: 0 0 1.5rem;
        }
    }   
.relay-c__list-headline-pc{
    margin: 0;
    padding: 0;
}
.relay-c__list-headline-pc li{
    list-style: none;
}
.display-pc{
    display: none;
}
.relay-c__list-wrap .relay-c__list{
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid var(--dark);
    /* 個人ごとのデータの区切りをはっきりさせる、スマホレイアウトでは暗めの下border */
}
    @media screen and (min-width:768px){
        .relay-c__list-wrap{
            max-width: 100%;
            }
        .relay-c__list-wrap .relay-c__list{
            border: none;
        }
    }

.relay-c__list-wrap .relay-c__list .itemwrap{
    display: flex;
    /* flex-direction: column; */
    justify-content: flex-start;
}
.relay-c__list-wrap .relay-c__list dt{
    /* padding: 2px 2px; */
    font-size: 0.75rem;
    font-weight: bold;
    background: #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
}


@media screen and (min-width:480px){
    .relay-c__list-wrap .relay-c__list .itemwrap{
        flex-direction: row;
    }
    .relay-c__list-wrap .relay-c__list dt{
        width: 7rem;
        font-size: 0.975rem;
    }
}
.relay-c__list-wrap .relay-c__list dd{
    padding: 0.5em;/*0.25em 1em*/
    width: 100%;
    word-break: break-all;
}


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

        .relay-c__list-wrap .relay-c__list-headline-pc{
            display: flex;
            flex-direction: row;
            gap:1em;
            font-size: 0.75rem;
            min-height: 3em;
            border-bottom: 1px solid var(--theme-dark);
            padding: 0.75rem;
            /* padding: 0.75rem 0.75rem 0.75rem 0 ; */
        }

    
    /*表の中身*/
        .relay-c__list-wrap .relay-c__list{
            /* padding: 0.5rem 0.75rem 0.5rem 0; */
            padding: 0.75rem;
            min-height: 4em;
            flex-direction: row;
            align-items: center;
            gap:1em;
            border-bottom: 1px solid var(--theme-dark);
            margin-bottom: 0;
        }
        /* .relay-c__list-wrap .relay-c__list:first-of-type{
            border-top: 1px solid var(--theme-dark);
        } */

        .relay-c__list-wrap .relay-c__list dt{
            display: none;
        }

/* 各項目の幅調整 */
/* has-6 */
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .name,
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .furigana,
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .school-grade,
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .affiliation,
        .relay-c__list-wrap.has-6 .name,
        .relay-c__list-wrap.has-6 .furigana,
        .relay-c__list-wrap.has-6 .school-grade,
        .relay-c__list-wrap.has-6 .affiliation
        {flex: 1;}

        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .itemwrap.number,
        .relay-c__list-wrap.has-6 .itemwrap.number,
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .itemwrap.lane,
        .relay-c__list-wrap.has-6 .itemwrap.lane,
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .itemwrap.grade,
        .relay-c__list-wrap.has-6 .itemwrap.grade
        {
            flex-grow: 0;
            min-width: 4rem;
            justify-content: center;
            text-align: right;
            padding-right: 1rem;
        }
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .itemwrap.number,
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .itemwrap.lane,
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .itemwrap.grade
        {text-align: center; padding-right: 0;}

        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .record,
        .relay-c__list-wrap.has-6 .relay-c__list-headline-pc .best-record,
        .relay-c__list-wrap.has-6 .record,
        .relay-c__list-wrap.has-6 .best-record
        {
            flex-grow: 0;
            width: 5rem;
        }

        .itemwrap.number dd{color: navy;}


/* has-5 */
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .name,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .furigana,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .school-grade,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .affiliation,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .affiliation.prefecture,
        .relay-c__list-wrap.has-5 .name,
        .relay-c__list-wrap.has-5 .furigana,
        .relay-c__list-wrap.has-5 .school-grade,
        .relay-c__list-wrap.has-5 .affiliation,
        .relay-c__list-wrap.has-5 .affiliation.prefecture
        {flex: 1;}
        
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .itemwrap.lane,
        .relay-c__list-wrap.has-5 .itemwrap.lane,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .itemwrap.number,
        .relay-c__list-wrap.has-5 .itemwrap.number,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .itemwrap.grade,
        .relay-c__list-wrap.has-5 .itemwrap.grade
        {
            flex-grow: 0;
            min-width: 4rem;
            justify-content: center;
            text-align: right;
            padding-right: 1rem;
        }

        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .itemwrap.lane,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .itemwrap.number,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .itemwrap.grade
        {text-align: center; padding-right: 0;}

        
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .record,
        .relay-c__list-wrap.has-5 .record,
        .relay-c__list-wrap.has-5 .relay-c__list-headline-pc .best-record,
        .relay-c__list-wrap.has-5 .best-record
        {
            flex-grow: 0;
            min-width: 5rem;
        }


/* has-3 */
        .relay-c__list-wrap.has-3 .relay-c__list-headline-pc .member,
        .relay-c__list-wrap.has-3 .member
        {
            flex-grow:3;
            width: 30%;
        }

        .relay-c__list-wrap.has-3 .relay-c__list-headline-pc .itemwrap.lane,
        .relay-c__list-wrap.has-3 .itemwrap.lane{
            flex-grow: 0;
            min-width: 4rem;
            justify-content: center;
            text-align: center;
        }

        .relay-c__list-wrap.has-3 .relay-c__list-headline-pc .itemwrap.team,
        .relay-c__list-wrap.has-3 .itemwrap.team{
            flex-grow: 2;
            width: 30%;
        }

        .relay-c__list-wrap.has-3 .relay-c__list-headline-pc .itemwrap.number,
        .relay-c__list-wrap.has-3 .itemwrap.number{
            flex-grow: 0;
            min-width: 4rem;
        }
 

        .relay-c__list dt p small {
            /* wbr改行設定 */
            white-space: pre-wrap;
            word-break: keep-all;
        }
    
        .relay-c__list-wrap .relay-c__list dd{
            margin: 0;
            padding: 0;
        }
    
    }




/*  世界記録・日本記録・大会記録リスト  */
.record__list{
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    gap: 8px;
}
.record__list .itemwrap{
    width: 100%;
    display: flex;
    /* flex-direction: column; */
    align-items: stretch;
    /* align-items: center; */
    gap:8px;
}
.record__list .itemwrap dt.record__title{
    display: grid;
    place-items: center;
    background: aliceblue;
    color: var(--dark);
    border: 1px solid var(--dark);
    padding: 4px 8px;
    min-width: 8.25em;
    text-align: center;
    font-size: clamp(12px,3vw,0.875rem);
}
.record__list .itemwrap dd.record__data{
    display: flex;
    align-items: center
}
.record__list .itemwrap dd.record__data .maindata{
    color: navy;
    font-size: 1.25em;
    padding: 4px 8px;
}
.record__list .itemwrap dd.record__data .subdata{
    padding: 4px 8px;
    word-break: break-all;
}

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

            .record__list{
                grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
            }
        }

        @media screen and (min-width:768px) {
            .record__list{
                margin-top: 0;
            }
            
            .record__list .itemwrap dd.record__data{
                flex-direction: row;
                gap: 16px;
                /* padding: 16px; */
            }
            .record__list .itemwrap dd.record__data .maindata{
                color: var(--dark);
            }
        }
        @media screen and (min-width:1024px) {
             .record__list{
                grid-template-columns: repeat(auto-fill,minmax(400px,1fr));
            } 
        }




    @media screen and (min-width:480px) {
            .relay-c__list-wrap .relay-c__list .member dt.display-sp small{
                display: none;
            }
        }

@media screen and (width < 600px) {
    .relay-c__list-wrap .relay-c__list .member dd{
        padding-top: 3em;
        position: relative;
    }

    .relay-c__list .member dd:after{
        position: absolute;
        top: 8px;
        content: "▼ゼッケン/氏名 ※名前の後ろにある数字は学年です";
        display: block;
        font-size:clamp(12px,3vw,0.875rem);
        color: navy;
    }
}

    @media screen and (600px <= width < 768px) {
            .relay-c__list-wrap .relay-c__list .member dd{
                padding-top: 3em;
                position: relative;
            }
        
            .relay-c__list .member dd:after{
                position: absolute;
                top: 12px;
                content: "ゼッケン/氏名 ※名前の後ろにある数字は学年です";
                display: block;
                font-size: 0.875rem;
                color: navy;
                border: 1px solid navy;
                padding: 4px 8px;
            }
        }


/* 追従ボタン二つ */
.relay_carnival__container .fixed-btn{
            position: sticky;
            /* fixed */
            bottom: 0;
            left: 0;
            margin: 2rem 0 0 auto;
            width: 100%;
            display: flex;
            /* z-index: 3; */
            /* デフォルトは非表示 */
            /* visibility: hidden;
            opacity: 0; */
        }
        /* .relay_carnival__container .fixed-btn.active{
            visibility: visible;
            opacity: 1;
        } */
        
        .relay_carnival__container .pagetop{
            margin: 0 0 0 auto;
            width: 56px;
            height: 56px;
            aspect-ratio: 1/1;
            background: #aaa;
            display: grid;
            place-items: center;
        }
    

        .relay_carnival__container .pagetop a{
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
            background: var(--accent_y);
        }
        
        .relay_carnival__container .pagetop a::before {
            position: absolute;
            content: "";
            width: 12px;
            height: 12px;
            border-top: 2px solid var(--dark);
            border-right: 2px solid var(--dark);
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%) rotate(-45deg);
        }

@media screen and (min-width:600px){
            .relay_carnival__container .fixed-btn{
                flex-direction: column;
                gap: 8rem;
                margin-top: 0;
                width: 60px;
                /* padding-right: 2rem; */
            }
        }

    /* モーダルOPENボタン */
    .relay_carnival__container .button-entrymodalopen {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        border: none;
        padding: 1em;
        background: var(--accent);
        color: var(--accent_y);
        cursor: pointer;
        overflow: hidden;
        } 

        .relay_carnival__container .button-entrymodalopen .button-illust{
            display: none;
            } 
        .relay_carnival__container .button-entrymodalopen .button-inner{
            font-size: min(5vw,16px);
            font-weight: 800;
        }

        
        @media screen and (min-width:600px){
            .relay_carnival__container .button-entrymodalopen {
                position: sticky;
                top: 0;
                width: 60px;
                height: 15em;
                border: none;
                margin: 0 0 0 auto;
                padding: 0;
                background: none;
                flex-direction: column;
                align-items: center;
                } 

                .relay_carnival__container .button-entrymodalopen .button-illust{
                    display: block;
                    width: 54px;
                    height: 112px;
                    object-fit: contain;
                    padding-right: 4px;
                    animation: rotateAnime 1s linear infinite;
                }
                    @keyframes rotateAnime {
                        0% , 100%{
                            transform: rotate(4deg);
                        }
                        50%{
                            transform: rotate(-4deg);
                        }
                    }
                
                
                .relay_carnival__container .button-entrymodalopen .button-inner{
                    font-size: 12px;
                    font-weight: 700;
                    letter-spacing: 0.08rem;
                    padding: 6px 4px;
                    /* border-right: 2px solid var(--accent_r);
                    border-left:2px solid var(--accent_r); */
                    background:var(--accent);
                    writing-mode: vertical-rl;
                    color: var(--accent_y);
                    height: 8em;
                    width: 2.25em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
        }

    


        .relay_carnival__container .button-entrymodalopen span {
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            z-index: 4;
        } 
        /* モーダルウィンドウ */
        .relay_carnival__container .modal-window {
            display: none;
            position: fixed;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 100%;
            height: 80vh;
            background-color: #fff;
            z-index: 11;
            letter-spacing: 0.04em;
            overflow-y: scroll;
          }

          @media screen and (min-width:600px){
            .relay_carnival__container .modal-window {
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: min(92%,800px);
              }
            }


          
           .relay_carnival__container .modal-window h2{
            margin-bottom: 8px;
            font-size: clamp(13px, 4vw, 1.25rem);
            background: var(--accent);
            color: var(--accent_y);
            font-weight: 700;
            padding: 8px 0;
            height: 48px;
            display: grid;
            place-items: center;
          }
          .relay_carnival__container .modal-window .fontsizeLarge{
            color: red; 
            font-size: 1.5em;
            letter-spacing: 0.05em;
            padding: 0 0.25rem;
          }
          .relay_carnival__container .modal-window .fontsizeSmall{
            font-size: 0.875em;
            padding-left: 0.375rem;
          }
              
          /* ENTRYモーダルを閉じるボタン */
          .relay_carnival__container .button-entrymodalclose {
            position: absolute;
            top:0;
              right: 0;
              width: 48px;
              height: 48px;
              border: none;
              /* border-radius: 50%; */
              background: #555;
              cursor: pointer;
          }
          .relay_carnival__container .button-entrymodalclose:after {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%);
              content: "×";
              color: #fff;
              font-size: 36px;
                  }
                  
                  
          /*オーバーレイ*/
          .relay_carnival__container #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
            z-index: 10;
          }
          /* 表示領域外へはスクロールさせない */
          .relay_carnival__container .no_scroll {
            overflow: hidden;
          }