/*
====>> サイト(案件)毎にスタイルを記述していくファイル <<====

・このファイルはサイト(案件)独自のスタイルを記述するファイル
・ここに記述するファイルは、接頭辞に「p-」を付けたセレクタにする事　/　例：「.p-project-item」

*/


/*		TOPページ
-----------------------------------------------------*/

.p-main-visual{
    position: relative;
    .p-main-visual-img{
        padding:0 0 0;
        background-color:#fff ;
    }
    .p-main-visual_text{
        color: #fff;
        padding: 18px 20px;
        background:var(--color-blue);
        .l-container{
            padding: 30px 20px;
            color:var(--color-black);
            border-radius: 16px;
            background-color: #fff;
        }
        .l-inner{
            width: fit-content;
            margin:0 auto;
        }
        .c-title_m{
            font-size: 2.8rem;
            font-weight: bold;
            color: #264A9E;
            letter-spacing: 0.05em;
            margin-bottom: 20px;
            & small{
                font-size:1.8rem;
                color: var(--color-black);
                display: block;
                margin-bottom:10px;
            }
            & span{
                font-size:2.4rem;
                color: #DE382C;
                margin-left:0.5em;
            }
        }
        .p-held{
            /* display: flex; */
            flex-wrap: wrap;
            align-items: center;
            gap:5px;
            font-size:1.6rem;
            letter-spacing: 0.05em;
            vertical-align: middle;
            .p-held_schedule{
                font-weight: bold;
                & b{
                    font-size:2.0rem;
                }
                & span{
                    display: inlnine-block;
                }
            }
            /*
            .p-held_place{

            }*/

        }/* END .p-held */
    }/* end .p-main-visual_text */
}/* end .p-main-visual */

@media (max-width: 600px){
    .p-main-visual{
        .p-main-visual_text{
            .c-title_m{
                font-size: 2.2rem;
                margin-bottom: 15px;
                & small{
                    font-size:1.4rem;
                    margin-bottom:10px;
                }
                & span{
                    display:inline-block;
                    font-size:1.6rem;
                    margin-left:0;
                }
            }
            .l-inner{
                width: 100%;
                padding:0;
                margin:0;
            }
            .p-held{
                flex-direction: column;
                gap:5px;
                font-family: var(--mplus-font);
                transform: var(--Jaggy-clear);
                font-weight: bold;
                font-size:1.4rem;
                .p-held_schedule{
                    font-weight: bold;
                    & b{
                        font-size:1.8rem;
                        display: inline-block;
                    }
                    & span{
                        display: inline-block;
                    }
                }
                .p-held_place{
                    font-weight: bold;
                    & span{
                        display: inline-block;
                    }
                }
    
            }/* END .p-held */
        }/* end .p-main-visual_text */
    }/* end .p-main-visual */    
}

.l-main{
    padding:80px 0 0;
    .c-title_l{
        position: relative;
        font-family: var(--mplus-font);
        transform:var(--Jaggy-clear);
        font-size: 3.6rem;
        letter-spacing: 0.06em;
        padding-top:15px;
        margin-bottom:30px;
        .c-title_en{
            font-size:1em;
            display:block;
            color: #264A9E;
            margin-bottom:5px;
        }
        .c-title_jp{
            font-size:1.6rem;
            letter-spacing: 0.05em;
            display:block;
        }
        &::before{
            content:"";
            display: block;
            width:30px;
            height: 4px;
            border-radius: 100px;
            margin-bottom:15px;
            background-color: #F6C42F;
        }    
    }
    & a[href]:not([class]),
    & a[href].is-external{
        color:var(--color-base);
        &:hover{
            text-decoration: underline;
        }
    }
}
@media (max-width: 600px){
    .l-main{
        padding:50px 0 0;
        .c-title_l{
            font-size: 2.6rem;
            padding-top:15px;
            margin-bottom:30px;
            .c-title_en{
                font-size:1em;
                margin-bottom:5px;
            }
            .c-title_jp{
                font-size:1.4rem;
            }
            &::before{
                width:25px;
            }    
        }
    }
}
.p-top-intro{
    margin-bottom:100px;
    .l-container{
        max-width: var(--w-solid-short);
    }
    .p-top-intro_lead-text{
        font-size: 1.7rem;
        letter-spacing: 0.05em;
    }
}
@media (max-width: 600px){
    .p-top-intro{
        margin-bottom:50px;
        .p-top-intro_lead-text{
            font-size: 1.5rem;
        }
    }
}


.p-top-live{
    margin-bottom:100px;
    .l-container{
        max-width: var(--w-solid-short);
    }
    .p-movie-wrap{
        overflow:hidden;
        width: 100%;
        aspect-ratio: 16 / 9;
        & iflame{
            width: 100%;
            height: 100%;
        }
    }
}
@media (max-width: 600px){
    .p-top-live{
        margin-bottom:50px;
    }
}


.p-top-program{
    padding:80px 20px;
    margin-bottom:100px;
    background-color:#a7d9df;
    .l-container{
        padding:60px 20px;
        background-color: #fff;
        border-radius: 16px;
    }
    .l-inner{
        max-width: var(--w-solid-short);
        margin:0 auto;
    }
    .p-top-program_contents_title{
        font-size:1.6rem;
        font-weight: 400;
        letter-spacing: 0.05em;
        &::before{
            content:"●";
            margin-right:2px;
        }
    }
    & p {
        letter-spacing: 0.05em;
    }
    & p + p,
    & p + .p-top-program_contents_title{
        margin-top:1em;
    }
}
@media (max-width: 600px){
    .p-top-program{
        padding:40px 20px;
        margin-bottom:50px;
        .l-container{
            padding:30px 20px;
        }
        .p-top-program_contents_title{
            font-size:1.4rem;
        }
    }    
}


.p-top-profile{
    margin-bottom:100px;
    .l-container{
        max-width: var(--w-solid-short);
    }
    .p-top-profile_contents{
        &.c-card-grid{
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap:75px 7%;
            .c-card-grid_item{
                grid-row: span 2;
            }
        }
    }
    .c-unit{
        gap:30px;
        margin-bottom:25px;
        .p-top-profile_image{
        width: auto;
        flex-basis: 192px;
        flex-shrink: 0;
        }
        .p-top-profile_item_text{
            flex:1;
            font-size:1.7rem;
            letter-spacing: 0.05em;
            line-height: 1.5;
            .p-top-profile_name{
                font-size:2.4rem;
                color:var(--color-base);;
                letter-spacing: 0.05em;
                margin-bottom:15px;
            }
        }
    }
}

@media (max-width: 600px){
    .p-top-profile{
        margin-bottom:50px;
        .p-top-profile_contents{
            &.c-card-grid{
                grid-template-columns: auto;
                gap:30px;
            }
        }
        .c-unit{
            gap:15px;
            margin-bottom:20px;
            align-items: flex-start;
            .p-top-profile_image{
            width: auto;
            flex-basis: 192px;
            flex-shrink: 1;
            }
            .p-top-profile_item_text{
                font-size:1.5rem;
                .p-top-profile_name{
                    font-size:2rem;
                    margin-bottom:15px;
                }
            }
        }
    }    
}


.p-top-overview{
    margin-bottom:100px;
    .l-container{
        max-width: var(--w-solid-short);
    }
    /*
    .c-title_l{
        text-align: center;
        .c-title_en{
            width: fit-content;
            margin:0 auto 5px;
        }
        .c-title_jp{
        width: fit-content;
        margin:0 auto;
        }
        &::before{
            position:relative;
            left:50%;
            transform: translateX(-50%);
        }
    }*/
    .c-table_plane{
        border-top: solid 1px #ccc;
        & tbody th{
            width: 200px;
            font-size:1.5rem;
            letter-spacing: 0.05em;
            font-weight: bold;
            vertical-align: top;
            text-align: left;
            padding:25px 20px;
            background:#dcf2f5;
        }
        .c-table_inline-block{
            display: inline-block;
            vertical-align: top;
        }
        & tfoot td{
            border:0;
            padding:25px 0;
        }
        .c-dl-flex dt{
            font-weight: 400;
        }
    }
}
@media (max-width: 600px){
    .p-top-overview{
        margin-bottom:50px;
        .c-title_l{
            text-align: left;
            .c-title_en{
                width: auto;
                margin:0 0 5px;
            }
            .c-title_jp{
            width: auto;
            margin:0;
            }
            &::before{
                position:relative;
                left:0;
                transform: translateX(0);
            }
        }
        .c-table_plane{
            & tbody th{
                width: 100%;
                font-size:1.5rem;
                padding:15px 20px;
            }
            & tfoot td{
                width: 100%;
            }
        }
    }
}


.p-top-form{
    padding:40px 20px;
    margin-bottom:100px;
    background-color: var(--color-blue);
    .l-container{
        padding:45px 20px;
        background-color: #fff;
        border-radius: 16px;
    }
    .c-block.c-block_2{
        justify-content: center;
        gap:20px 60px;
        & h2{
            width: auto;
            flex-shrink: 0;
        }
        & p{
            width: auto;
        }
    }
}
@media (max-width: 600px){
    .p-top-form{
        margin-bottom:50px;
        .l-container{
            padding:35px 20px;
        }
        .c-block.c-block_2{
            flex-direction: column;
            align-items: flex-start;
            gap:20px;
            & h2{
                width: auto;
                flex-shrink: 1;
            }
            & p{
                width: auto;
            }
        }
    }
}

.p-top-access{
    letter-spacing: 0.05em;
    margin-bottom:100px;
    .c-gmap{
        padding-top: 30px;
        aspect-ratio: 100 / 130.15;
    }
    .p-top-access_info{
        color:#999;
        .p-top-access_place{
            font-size:2rem;
            letter-spacing: 0.05em;
            color:var(--color-base);
        }
        .p-top-access_info_subtitle{
            font-size:1.6rem;
            color: var(--color-black);
            margin-top:35px;
            margin-bottom:8px;
        }
        & p > span{
            display: inline-block;
            margin-left:0.8em;
        }
    }
}
@media (max-width: 600px){
    .p-top-access{
        margin-bottom:50px;
        .p-top-access_info{
            margin-top: 20px;
            .p-top-access_place{
                font-size:1.8rem;
            }
            .p-top-access_info_subtitle{
                font-size:1.5rem;
                margin-top:20px;
                margin-bottom:8px;
            }    
        }
    }    
}


.p-top-link{
    padding:45px 20px;
    background-color: var(--color-skyblue);
    .l-container{
        padding:40px 20px;
        background-color: #fff;
        border-radius: 16px;
    }
    .c-block.c-block_2{
        gap:20px 3%;
        align-items: flex-start;
        max-width: 890px;
        margin:0 auto;
    }
    .c-title_l{
        width:fit-content;
        flex-shrink: 0;
    }
    .p-top-link_list{
        width: fit-content;
        flex:1;
        justify-content: center;
        gap:30px;
        & li{
            border:1px solid #DCDCDC;
            border-radius: 8px; 
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            &:hover{
                border-color: var(--color-base);
            }
        }
    }
}
@media (max-width: 600px){
    .p-top-link{
        padding:35px 20px;
        .l-container{
            padding:30px 20px;
        }
        .c-block.c-block_2{
            flex-direction: column;
            gap:10px;
        }
        .c-title_l{
            width:100%;
            flex-shrink: 1;
        }
        .p-top-link_list{
            width: auto;
            flex:1;
            gap:15px;
            & li{
                border:1px solid #DCDCDC;
            }
        }
    }    
}


.p-fixed-nav{
    position: fixed;
    top:50%;
    right: 0;
    position:500;
    & li + li{
        margin-top:10px;
    }
    .p-fixed-btn{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:space-around;
        width: 106px;
        aspect-ratio: 1 / 1;
        font-size:1.4rem;
        color:#fff;
        text-align: center;
        line-height: 1.3;
        letter-spacing: 0.01em;
        padding:11px 6px;
        background-color: var(--color-base);
        border:2px solid transparent;
        border-radius: 4px;
        box-shadow: 0px 0px 8px -2px #888;
        transition: all 0.2s ease;
        &.is-pink{
            background-color: #DE382C;

        }
        &.is-blue{
            background-color:var(--color-blue);
        }
        &:hover{
            color: var(--color-base);
            background-color: #fff;
            border-color: var(--color-base);
        }
        &.is-pink:hover{
            color: var(--color-pink);
            border-color: currentColor;
        }
        &.is-blue:hover{
            color: var(--color-blue);
            border-color: currentColor;
        }
        & svg path{
            fill:currentColor;
        }
        & span{
            display: block;
        }
    }
}
@media (max-width: 900px){
    .p-fixed-nav{
        display: none;;
    }
}

/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/
/*		下層ページ
-----------------------------------------------------*/


/* 240308 */
.mb30{
    margin-bottom: 30px;
}

/* 満員御礼 */
@media (max-width: 600px){
    .orei{
        position: relative;
      }
      .orei p{
		position: absolute;
		width: 300px;
		top: 80%;
		left: 52%;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 1.0rem;
		margin: 0;
		padding: 2% 2%;
		background-color: rgb(132, 132, 132);
		text-align: center;
		box-shadow: 4px 3px 3px rgb(101, 101, 101);
	}
	.orei p span{
		font-size: 1.3rem;
		font-weight: bold;
    }
}
/* 241016 COMING SOON */
.cos {
text-align: center;
}
p.comingsoon {
    font-size: 43px;
    line-height: 5rem;
    margin-top: 2vw;
    letter-spacing: 12px;
    margin-bottom: 12px;
}
.mt2{
    margin-top: 2%;
}
.mt3{
    margin-top: 3%;
}
.pb75{
    padding: 0 20px 75px;
}

@media screen and (max-width:767px) {
p.comingsoon {
    font-size: 20px;
    line-height: 5rem;
    margin-top: 4vw;
    letter-spacing: 8px;
    margin-bottom: 1px;
}
.mt2{
    margin-top: 6%;
}
p.p-held_place {
    margin: 12px auto;
}
.mt3{
    margin-top: 5%;
}
}
/* 241016 スクロール時に要素フェードイン*/
.js-scroll-up {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: all 1s;
    
}
.js-scroll-up.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}