@charset "UTF-8";

:root{
    --maincolor:#1aa2b2;
    --maincolor-opa:#1aa2b233;
    --subcolor:#ed6d46;
    --subcolor-opa:#ed6d4633;
    --basecolor:#fff1cbda;
    --wscolor:#5dae76;
    --wscolor-opa:#5dae7620;
    --black:#3a3a3a;
    --white:#fff;
    --zoomvalue:1;

    --header-height:60px;
    
    --shippori:"Shippori Mincho", serif;
    --zen:"Zen Old Mincho", serif;

    interpolate-size: allow-keywords;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    max-width: 100%;
}
html,body {
    font-size:16px;
    line-height:1.5;
	scroll-behavior: smooth;
    font-family: var(--zen);
}
a{ text-decoration:none;}
ul,ol{ list-style:none;}
li{ list-style:none;}
img{ vertical-align:middle; padding: 0; margin: 0;line-height: 0; max-width: 100%;}
table { width:100%;border-collapse: collapse; border-spacing: 0;}


/* @link */
a {text-decoration: none; transition: 0.3s;color: var(--maincolor);}
a:hover,a:active{color: var(--maincolor); text-decoration: none;}
a img{border: none;}

a:hover img {
	opacity: 0.8;
}
a img {
  transition: .3s ease-in-out;
}


/* @css base block */
.sp{ display:none;}
.tb{ display:none;}
.pc{ display:inline;}

.oh{overflow: hidden;}

.f-min{font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;}
.f-gt{font-family: "メイリオ",sans-serif;}
.f-ship{font-family: var(--shippori);}
.f-zen{font-family: var(--zen);}

.cen{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

h1,h2,h3,h4,.bold{font-weight: bold;}

.color{color: var(--maincolor);}
.subcolor{color: var(--subcolor);}
.wscolor{color: var(--wscolor);}
.cen{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.bold{font-weight: bold;}
.small{font-size: 0.9em;line-height: 1.4;}
.big{font-size: 1.1em;line-height: 1.8;}


/*アニメーション設定関連*/
@keyframes fuwa-up-down{
    from{
        translate: 0 40px;
    }
    50%{
        translate: 0 0;
    }
    to{
        translate: 0 40px;
    }
}

@keyframes jiwa{
	0%{
		transform: scale(0.9);
		opacity: 0;
	}
	30%{
		transform: scale(0.95);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes slide-up{
    from{opacity: 0;translate:0 30%;}
    to{opacity: 1; translate:0 0;}
}
@keyframes slide-down{
    from{opacity: 0; translate:0 -30%;}
    to{opacity: 1;  translate:0 0;}
}
@keyframes slide-l{
    from{opacity: 0; translate:50%;}
    to{opacity: 1; translate:0;}
}

@keyframes show-to-right{
    from{clip-path: inset(0 100% 0 0);}
    to{clip-path: inset(0);}
}
@keyframes show-to-left{
    from{clip-path: inset(0 0 0 100%);}
    to{clip-path: inset(0);}
}
@keyframes show-to-bottom{
    from{clip-path: inset(0 0 100% 0);}
    to{clip-path: inset(0);}
}
@keyframes show-to-top{
    from{clip-path: inset(100% 0 0 0);}
    to{clip-path: inset(0);}
}

.circle-animate{
    --r-end:150%;
    clip-path: circle(0% at 50% 50%);;
}
@keyframes show-circle {
    from{clip-path: circle(0% at 50% 50%);}
    to{clip-path: circle(var(--r-end) at 50% 50%);}
}


#breadcrumb ul {
    display: flex;
	justify-content:flex-end;
    gap: 0.3em;
    margin: 50px 0;
	font-size:80%;
}
.post_box #breadcrumb ul{
	justify-content:flex-start;
}

/* ここから下　サイト個別の内容 */

/*全体の箱*/
html{
    font-size: 16px;
}
html.open{
    position: fixed;
    width: 100%;
    z-index: -1;
    overflow: hidden;
}

body { 
    background: var(--basecolor);
    position: relative;
	margin: 0;
	padding: 0;
	color: #222;
	font-size: clamp(1rem,calc(1.2rem * var(--zoomvalue)),3rem);
    line-height: 1.6;
    
    &::before,&::after{
        content: '';
        height: 100dvh;
        width: 100dvw;
        
        position: fixed;
        mix-blend-mode: hard-light;

        top: 0;
        left: 0;
        z-index: -10;
    }

    &::before{background: url("images/texture.png");opacity: 0.3;}
    &::after{background: url("images/back.png") center;opacity: 0.7;}
}

main.subpage{
    margin-top: 100px;
}
main > section{
    width: 70%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
    position: relative;
}
.w980{max-width: 980px; margin-left: auto;margin-right: auto;}
.bg{padding: 1.5em 2em;border-radius: 1em;}
.bg_white{background: rgba(255,255,255,0.8);}
.bg_main{background: var(--maincolor);}
.bg_sub{background: var(--subcolor);}
.bg_base{background: var(--basecolor);}

main p{
    text-align: justify;
}
main p + p{
    margin-top: 1em;
}



/*header*/
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    width: 100%;
    padding: 0.5em 1.5em;
    background: rgba(255,255,255,0.9);
    
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
}

/*メニュー*/
nav{
    height: 100%;
    width: 100%;
}
.menu_list{
    display: flex;
    justify-content: center;
    gap: 0.5em;
    height: 100%;
    li{
        width: fit-content;
        a{
            display: flex;
            justify-content: center;
            align-items: center;

            height: 100%;
            width: 100%;
            padding: 0 1.2em;
            
            &:hover{
                color: var(--black);
            }
            &.menu_color{
                background: var(--subcolor);
            }
        }
    }
}

.menubtn{display: none;}

/*footer*/

footer{
    background: var(--maincolor);
    color: var(--white);
    padding: 2em 2em 0;

    .fot_flex{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding-bottom: 1em;
        .fot_left{
            width: 25%;
        }
    }
}

.copy{
    border-top: 1px solid var(--white);
	font-size: 0.75rem;
    padding: 1em 0;
    text-align: center;
    margin-bottom: 100px;
}


/*見出し*/
.section_title{
    font-size: 180%;
    color: var(--maincolor);
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    align-items: center;
    margin: 2em 0 1.5em;
    span{
        font-size: 1.1rem;
        font-weight: normal;
        display: block;
        margin-left: 1em;
    }
    &::before{content: '■';}

    &.cen{
        justify-content: center;
        text-align: center;
        &::before{content: none;}
        span{
            width: 100%;
            margin-left: 0;
        }
    }
    &.color{color: var(--maincolor);}
}



/*ボタン*/
/*linkbtnと色、形状、サイズをクラス名で指定可*/

.linkbtn{
    font-family: "メイリオ",sans-serif;
    width: fit-content;
    margin: 1em auto 1.5em;
    padding: 0.5em 2em;
    background: var(--btn-back-color);
    color: var(--btn-text-color);
    border-width: 2px;
    border-style: solid;
    border-color: var(--btn-border-color);
    transition: 0.3s;
    display: block;
}
.linkbtn:hover{
    background: var(--btn-text-color);
    color: var(--btn-back-color);
    border-color: var(--btn-border-color);
}
/*色*/
.btn_white{
    --btn-back-color:#fff;
    --btn-border-color:var(--maincolor);
    --btn-text-color:var(--maincolor);
}
.btn_color{
    --btn-back-color:var(--maincolor);
    --btn-border-color:var(--maincolor);
    --btn-text-color:#fff;
}
.btn_subcolor{
    --btn-back-color:var(--subcolor);
    --btn-border-color:var(--subcolor);
    --btn-text-color:#fff;
}
.btn_wscolor{
    --btn-back-color:var(--wscolor);
    --btn-border-color:var(--wscolor);
    --btn-text-color:var(--white);
}
/*形*/
.btn_max_round{
    border-radius: 3em;
}
.btn_min_round{
	border-radius:0.5em;
}
/*サイズ*/
.btn_small{
    font-size: 80%;
    padding: 0.5em 1.5em;
}
.btn_big{
    font-size: 115%;
    padding: 0.5em 5em;
}
.btn_wide{
    width: 100%;
    text-align: center;
}


/*リストの基本形*/
/*list_boxと任意のリスト名クラスを付与し、gapと横列数を指定*/

.list_box{
    display: flex;
    width: 80%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    gap:var(--gap);
}
.list_box > li{
    width: calc((100% - var(--gap) * calc(var(--listitem-length) - 1)) / var(--listitem-length));
}
.list_box.slideup li{
    opacity: 0;
}
.list_box.animation.slideup li{
    animation: slide-up 1.1s forwards;
}


/*点つきリスト*/
.dot-list{
	padding:0 1em;
}
.dot-list,
.dot-list li,
.point_list_box ul,
.point_list_box li{
	list-style:disc;
}
.dot-list li{
	margin-bottom: 0.5em;
}

/*マップ埋め込み用*/

.gmap{
    width: 100%;
    aspect-ratio: 4/1;
    margin: 2em 0 0;
}
.gmap iframe{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

.youtube{
    width: 100%;
    aspect-ratio: 16/9;
    margin: 1em 0;
}
.youtube iframe{
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/*下にずっと出るボタン*/

.bottom_btn{
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    gap: 0;
    font-size: 120%;
    z-index: 10;
    width: 100%;
    border-top: 1px solid var(--basecolor);

    a{
        width: 50%;
        padding: 0.5em 0.3em;
        color: var(--white);
        background: var(--subcolor);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;

    &.support{
        background: var(--wscolor);
        color: var(--white);
    }
    &:hover{
        color: var(--maincolor);
        background: var(--white);
    }
}
}


/*----------トップページ----------*/



/*ファーストビュー*/

#topimg{
    padding: 0;
    overflow: hidden;
    position: relative;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;

    .imgbox{text-align: center;height: 100%;}
    img{
        height: 100%;
    }
    .top_date{
        order: -1;

        position: absolute;
        left: 2vw;
        top: 50%;
        translate: 0 -50%;

        font-size: 280%;
        font-weight: bold;
        color: var(--maincolor);
        .small{font-size: 70%;}
        .bg-day{
            display: inline-block;
            width: 1.6em;
            height: 1.6em;
            padding: 0.3em;
            position: relative;
            color: #fff;
            &::before{
                content: "";
                height: 100%;
                width: 100%;
                position: absolute;
                top: 5px;
                left: 0;
                background: var(--maincolor);
                border-radius: 50%;
                z-index: -1;
        }
    }
}
    .top_btn{
        order: 1;

        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        position: absolute;
        bottom: 2em;
        right: 2em;
        background: var(--subcolor);
        border: 2px solid var(--subcolor);
        color: #fff;
        padding: 0.8em;
        font-weight: bold;
        font-size: 200%;
        line-height: 1.4;

        aspect-ratio: 1/1;
        border-radius: 50%;

        &:hover{
            background: var(--subcolor-opa);
            color: var(--subcolor);
        }
    }

}



.flex_box{
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin: 4em auto;
    align-items: flex-start;
    &.ma00{margin: 0 auto;}
    &.ma01{margin: 1em auto;}
    &.jus_cen{justify-content: center;gap:3em;}
    .linkbtn{margin: 0;}

    .flex_text{
        width: calc(50% - 50px / 2);
        flex-shrink: 0;
    }
}


/*スケジュール*/
.sche_list{
    --listitem-length:1;
    --gap:1.5em;
    flex-wrap: wrap;
    width: 60%;

    h3{
        font-family: sans-serif;
    }

    li{
        background: rgba(255,255,255,0.8);
        padding: 1.5em 2em;
        border-radius: 0.5em;
        position: relative;
        .sche_date{
            letter-spacing: 0.1em;
            margin: 0.3em 0;
            padding: 1em;

            &.bg-main{background:var(--maincolor-opa);}
            &.bg-sub{background:var(--subcolor-opa);}
            &.bg-base{background:var(--basecolor);}
            &.bg-ws{background:var(--wscolor-opa);}
        }
    }
}

/*出演者紹介*/
.performer_list{
    --listitem-length:2;
    --gap:1em;
    flex-wrap: wrap;
    width: 100%;
    font-size: 100%;
    align-items: flex-start;

    li{
        background: var(--white);
        border-radius: 0.5em;
        padding: 1.5em;
        
        figure{width: 40%;flex-shrink: 0;}

        .pf_flex{
            display: flex;
            gap: 1em;
            .linkbtn{margin-bottom: 0;padding: 0.8em 0;font-size: 90%;}
        }
        .pf_prof{
            padding-bottom: 0.5em;
            border-bottom: 1px solid var(--maincolor);
        }
        .pf_name{
            font-size: 130%;
            line-height: 2;
            letter-spacing: 0.05em;
            margin-bottom: 1em;
        }
        .pf_msg{
            padding: 1em 0.5em 0.5em;
            font-size: 1.2rem;
        }
        .pf_dt{
            background: #deeede;
            summary{width: 100%;cursor: pointer;padding: 0.3em 1em;}
            p{padding: 1em;font-size: 90%;}
            figure{width: 40%;margin: 1em auto 0;}

            +.pf_dt{margin-top: 0.5em;}
        }
    }
}



/*-----サブページ-----*/




/*よくある質問*/
.faqbox{
	background: var(--white);
	border:solid 2px var(--maincolor);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	margin-bottom: 3em;

	li{
		border-bottom:dotted 2px var(--maincolor);
		&:last-child{
			border-bottom: none;
		}
        details[open] .faq_a{border-top: 2px dotted var(--subcolor);}
	}
	summary{
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 20px;
		transition: 0.3s;

		&:hover{
			background: rgba(31, 164, 192,0.2);
		}
	}
	.faq_q{
		color: var(--maincolor);
		font-size: 110%;
		display: flex;
		gap: 0.5em;
        font-weight: bold;

		&::before{
			content: "Q";
			background: var(--maincolor);
			color: var(--white);
			border-radius: 50%;
			width:1em;
			height:1em;
			padding: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
			flex-shrink: 0;
		}
	}
	.faq_a{
		padding: 20px;
		display: flex;
		gap: 0.8em;

		&::before{
			content: "A";
			background:var(--subcolor);
			border-radius: 50%;
			width:1em;
			height:1em;
			padding: 5px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 18px;
			flex-shrink: 0;
		}

	}
}

/*応募規約*/

/*お問合せ*/



/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
	▼　タブレット用css　▼
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/

@media (max-width:1024px) {

    html{font-size: 14px;}
    
    /*ヘッダー*/

    /*フッター*/


    /*見出し*/


    /*メインビュー*/
    #topimg{
        height: fit-content;
        
        .top_date,.top_btn{
            order: 1;
            position: static;
            translate: none;
        }
        .top_date{
            text-align: center;
            padding: 1em 0 0.5em;
        }
        .top_btn{
            max-width: 7em;
            font-size: 160%;
            margin: 0 auto;
        }
    }

    /*リスト設定*/
    .list_box{
        flex-wrap: wrap;
        /*--listitem-length:2;*/
        --gap:2.5em;
    }

        .flex_box{
        flex-direction: column;
        gap:50px;
        &.jus_cen{
            gap: 1em;
            align-items: center;
        }
        &.ma00{
            gap: 0;
        }
        .flex_text{
            width: 100%;
        }
    }


    .sche_list{
        width: 100%;
        --gap:1em;
    }
    .performer_list{
        --listitem-length:1;
    }

    .fot_flex{
        flex-direction: column;
        align-items: center;
    }

    /*サブページ用*/


}

@media(max-width:900px){
    header{
        position: relative;
        display: none;
    }

    #topimg{
        img{width: 100%;}
        h1{
            width: 100%;
            text-align: center;
            font-size: 0%;
            img{
                width: 20%;
            }
        }
    }
    
    .entry_list{
        --listitem-length:2;
        --gap:0.5em;
    }



    /*メニュー*/
    #menu{
        position: fixed;
        bottom: 0;
        right: -100%;
        width: 100%;
        height: calc(100%);
        background: rgba(255,255,255,0.9);
        transition: 0.4s;
        overflow-y: scroll;
    }
    #menu.show{
        right: 0;
    }
    .menu_list{
        padding: 0 2em 2em;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .menu_list > li{
        width: 100%;
        height: auto;
        padding: 0.5em;
        text-align: left;
        flex-direction: column;
    }
    .menu_list li:has(.menu_color){
        padding: 0;
        .menu_color{
            padding: 0.5em;
        }
    }

    /*ハンバーガーボタン*/
    .menubtn{
        position: absolute;
        top: 50%;
        right: 0.5em;
        translate: 0 -50%;
        width: 50px;
        height: 50px;
        text-align: center;
        z-index: 2;
        display: block;
        cursor: pointer;
    }
    .menubtn>div{
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu_btn_item{
        position: relative;
        height: 2px;
        width: 80%;
        border: none;
        background: var(--maincolor);
        transition: 0.3s;
    }
    .menu_btn_item::before,
    .menu_btn_item::after{
        content: '';
        display: block;
        position: absolute;
        background: var(--maincolor);
        height: 100%;
        width: 100%;
        left: 50%;
        translate: -50%;
        transition: all 0.3s;
    }
    .menu_btn_item::before{
        top: -10px;
    }
    .menu_btn_item::after{
        top: 10px;
    }
    .show .menu_btn_item{
        background: transparent;
    }
    .show .menu_btn_item::before{
        top: 0;
        rotate: 35deg;
    }
    .show .menu_btn_item::after{
        top: 0;
        rotate: -35deg;
    }


    .btn_list {
        .linkbtn {
            width: calc((100% - 1em) / 2);
        }   
    }
}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
	▼　スマホ用css　▼
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/

@media (max-width: 600px) {
    html{font-size: 12px;}
    
    .pc{display: none;}
    .sp{display: block;}

    #menu{font-size: 110%;}
    .linkbtn{padding: 0.5em 1em;}
    
    /*全体*/
    body{font-size: 0.9rem;}
    main > section{padding: 1em;width: 100%;}

    .section_title{
        width: 100%;
        font-size: 150%;
        span{
            margin-left: 0;
        }
    }
    .site_title{
        font-size: 120%;

    }

    .bg{padding: 1.5em;}
    .list_box{
        width: 100%;
        --gap:1.5em;
    }




    .top_copy{
        font-size: 160%;
        line-height: 1.8;
    }


    #intro{
        p.cen{text-align: left;}

        .flex_text{
            .linkbtn{
                margin: 0 auto 0.5em;
            }
        }
    }


    .rule_table{
        gap: 0;
        dt{
            width: 100%;
        }
        dd{
            width: 100%;
            padding-left: 1em;
            margin-bottom: 1em;
            border-left: 3px solid var(--maincolor);
        }
    }

.copy{margin-bottom: 60px;}

.gmap{
    aspect-ratio: 3/2;
}

.bottom_btn{
    font-size: 100%;
}

.sche_list{
    li{padding: 1em;}
}

}




@media(max-width:450px){

}

@media (min-width: 2500px) {
    :root{
        --header-height:2.5rem;
    }
    html{
        font-size: 2vh;
    }
    main>section{
        max-width: none;
        width: 80%;
    }
}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
    ▲　スマホ用css　▲
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/