/****** Stream,exhibition ******/

#stream,
#exhibition,
#book,
#degitalcatarog,
#ceremony,
#use
{
    margin-top: 20px;
    padding-bottom: 100px;
    text-align: center;
}

#stream h2,
#exhibition h2,
#book h2,
#degitalcatarog h2,
#ceremony h2,
#use h2{
    margin: 50px auto;
    display: block;
    font-size: 32px;
    font-weight: 800;
}


@media screen and (max-width:640px){
    #stream h2,
    #exhibition h2,
    #book h2,
    #degitalcatarog h2,
    #ceremony h2,
    #use h2{
        margin: 50px auto;
    }
}



#stream .detail,
#exhibition .detail,
#book .detail,
#degitalcatarog .detail,
#ceremony .detail{
    width: 80%;
    margin: 50px auto 0 auto;
    padding: 18% 20px 50px 20px;
    text-align: center;
    background-size: 100%;
    display: block;
}



.no-webp #degitalcatarog .detail{
    background-image: url("../img/subheader_degitalcatalog.png") ;
}

.no-webp #stream .detail{
    background-image: url("../img/subheader_stream.png") ;
}

.no-webp #exhibition .detail{
    background-image: url("../img/subheader_exhibition.png") ;
}

.no-webp #ceremony .detail{
    background-image: url("../img/subhead_ceremony.png") ;
}

.no-webp #book .detail{
    background-image: url("../img/subheader_book.png") ;
}

.webp #degitalcatarog .detail{
    background-image: url("../img/subheader_degitalcatalog.webp") ;
}

.webp #stream .detail{
    background-image: url("../img/subheader_stream.webp") ;
}

.webp #exhibition .detail{
    background-image: url("../img/subheader_exhibition.webp") ;
}

.webp #ceremony .detail {
    background-image: url("../img/subhead_ceremony.webp") ;
}

.webp #book .detail{
    background-image: url("../img/subheader_book.webp") ;
}

#ceremony .sub-detail{
    width: 80%;
    margin: 50px auto 0 auto;
    padding: 20px;
    text-align: center;
    background-size: 100%;
    display: block;
}

#stream .sub-detail{
    width: 80%;
    margin: 50px auto 0 auto;
    padding: 50px 20px 50px 20px;
}


#book .detail h3,
#degitalcatarog .detail h3,
#use .detail h3{
    padding: 50px auto;
    display: block;
    font-size: 32px;
}

#exhibition .detail h3,
#stream .detail h3,
#ceremony .detail h3,
#ceremony .sub-detail h3
#stream .sub-detail h3{
    padding: 10px 20px;
    display: block;
    font-size: 21px;
    background: url("../img/bg_white_w.jpg")  top center repeat-y;
    text-align: left;
    font-weight: 800;
    border-radius: 30px;
    margin: 0 20px;
}

#stream .detail h4
#ceremony .detail h4{
    padding: 100px;
    display: block;
    font-size: 18px;
    margin: 10px;
    text-align: left;
    padding: 5px;
    font-weight: 400;
}

#ceremony .detail h4,
#ceremony .sub-detail h4{
    display: block;
    font-size: 18px;
    text-align: left;
    margin: 20px;
    font-weight: 600; 
}

#exhibition .detail h4,
#stream .detail h4 span,
#stream .detail h4,
#stream .sub-detail h4{
    padding: 100px;
    display: block;
    font-size: 18px;
    margin: 20px;
    text-align: left;
    padding: 5px;
    font-weight: 400;
    padding: 0.5em 0;/*上下の余白*/
    border-top: solid 2px #44A7DE;/*上線*/
    border-bottom: solid 2px #44A7DE;/*下線*/
}

#ceremony .detail h4 span{
    font-weight: 600;
    margin: 10px;
    background: linear-gradient(transparent 50%, #FCF25A 50%);
}

#ceremony .detail h4,
#ceremony .sub-detail h4{
    padding: 0.5em 0;/*上下の余白*/
    border-top: solid 2px #44A7DE;/*上線*/
    border-bottom: solid 2px #44A7DE;/*下線*/
}


#stream .detail h4 span,
#stream .sub-detail h4 span{
    font-weight: 600;
    margin: 10px;
}

#stream .detail p,
#exhibition .detail p,
#book .detail p,
#degitalcatarog .detail p,
#use .detail p{
    text-align: left;
    padding: 20px;
    line-height: 2em;
}

#book .detail p span,
#ceremony p span{
    font-weight: 600;
    margin: 10px;
    background: linear-gradient(transparent 50%, #FCF25A 50%);
}


#ceremony .detail p,
#ceremony .sub-detail p{
    text-align: left;
    padding: 0PX 20px;
    line-height: 2em;
}




#stream .detail .subheader,
#exhibition .detail .subheader,
#book .detail .subheader,
#degitalcatarog .detail .subheader,
#ceremony .detail .subheader,
#use .detail .subheader{
    width: 100%;
}

#stream .detail .planner,
#exhibition .detail .planner,
#book .detail .planner,
#degitalcatarog .detail .planner,
#ceremony .detail .planner,
#use .detail .planner{
    text-align: center;
    margin: 50px auto 0px auto;
    font-size: 14px;

}

.contents-box{
    background: #F2F2F2 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 10px #00000080;
    border-radius: 30px;
    opacity: 1;
    color: #29262b;
}

#ceremony .shop_list .contents-box{
    background: #FFFFFF 0% 0% no-repeat padding-box;
}
}

.contents-sub-box{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 30px;
    opacity: 1;
    display: block;
    color: #29262b;
    margin: 0 10%;
    padding: 20px 0px;
}




.btn{
    text-align: center;
    margin: 30px auto;
    max-width: 250px;
    display: block;
    padding: 15px 80px;
    line-height: 1.8em;
    font-weight: 800;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 4px solid #DC4B8A;
    border-radius: 20px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.btn:hover{
    text-decoration: none;
    color: #FCF25A;
    border: 4px solid #FCF25A;
}

.btn_dis{
    text-align: center;
    padding: 15px 80px;
    line-height: 1.8em;
    font-weight: 800;
    background: #FFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    border: 4px solid #BBB;
    border-radius: 20px;
    color: #BBB;
    display: block;
    width: 150px;
    margin: 20px auto;
}

.member-list{
    width: 80%; 
    margin: 0 auto;
    padding: 50px auto;
    display: block;
}

@media screen and (max-width:640px){
.member-list{
    width: 100%; 
    margin: 0 auto;
}
}

.member_list {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto 30px auto;
}

.member_list li {
    list-style: none;
    margin: 20px;
    font-size: 14px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 800;
    color: #29262B;
    width: 200px;
}

.member_list li img {
    border-radius: 100px;
    width: 200px;

}

.member_list li a {
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
    color: #29262B;
}


.member_list .card-title{
    display: block;
    padding: 10px;
    text-align: center;
}


.member_list li a:hover{
    text-decoration: none;
    color: #DC4B8A;
}

.member_list li a:before{
    padding: 6px 2px 0px 4px;
}

.layout-4img{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0 auto;
    align-items: flex-end;
}


@media screen and (min-width:320px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
    .layout-4img img{
        width: 90%;
        height: 90%;
        padding: 10px;
    }

}
@media screen and (min-width:768px) {
    /*　画面サイズが768pxはここを読み込む　*/
    .layout-4img img{
        width: 45%;
        height: 45%;
        padding: 10px;
    }

}


#ceremony .contents-sub-box{
    margin: 20px;
}


#ceremony .btn_overview{
    /*アニメーションの起点とするためrelativeを指定*/
    position: relative;
    overflow: hidden;
    /*ボタンの形状*/
    text-decoration: none;
    display: inline-block;
    padding: 20px 30px;
    border-radius: 50px;
    margin: 5px 5px 50px 5px;
    text-align: center;
    width: 200px;
    outline: none;
    background: transparent linear-gradient(111deg, #449ED4 0%, #BA5CCB 51%, #DC4B8A 100%) 0% 0% no-repeat padding-box;
    /*アニメーションの指定*/   
    transition: ease .2s;
    box-shadow: 0px 3px 6px #00000080;
}


#ceremony .btn_overview span {
    position: relative;
    z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
    color:#fff;
}

#ceremony .btn_overview:hover span{
    color:#fff;
}

/*== 背景が流れる（左から右） */
#ceremony .bgleft:before {
    content: '';
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /*色や形状*/
    background:#333;/*背景色*/
    width: 100%;
    height: 100%;
    background: transparent linear-gradient(111deg, #FCF25A 0%, #E67840 51%, #DC4B8A 100%) 0% 0% no-repeat padding-box;
    /*アニメーション*/
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
}

/*hoverした際の形状*/
#ceremony .bgleft:hover:before{
    transform-origin:left top;
    transform:scale(1, 1);
}


@media screen and (min-width:768px) {
    /*　画面サイズが768pxはここを読み込む　*/
#ceremony .btn_overview{
    padding: 30px 30px;
}
}




.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

#ceremony .sub-detail .center{
    text-align: center;
}