/*
================================================================================================================
出展タイトル詳細
================================================================================================================
*/

/*ページ内見出し*/
.title_h{
    margin: 0 auto 20px;
    padding:0 0 10px;
    border-bottom:2px solid #000;
    text-align:center;
    font-size: 28px;
    font-family: 'M PLUS Rounded 1c', sans-serif;}


#stage > .title_h,
#campaign > .title_h{
    color:#ff008b;
    border-bottom-color:#ff008b;
}
#exhibition > .title_h{
    color:#8cc121;
    border-bottom-color:#8cc121;
}
#demo > .title_h{
    color:#0397f0;
    border-bottom-color:#0397f0;
}
#novelty > .title_h{
    color:#fa7e00;
    border-bottom-color:#fa7e00;
}
#sales > .title_h{
    color:#002192;
    border-bottom-color:#002192;
}


@media screen and (max-width: 640px) {
.title_h{
        font-size: 22px;
    }
}
@media screen and (max-width: 480px) {
.title_h{
        font-size: 18px;
    }
}

/*共通項目*/
.box{margin: 0 auto 50px;}

.box > .title{
    font-size: 20px;
    font-weight:bold;
    text-align:center;
    margin: 0 auto 20px;
    padding-bottom:10px;
    border-bottom:1px solid #dddddd; 
}

.box .text{}

.box .image_area{width: 100%;display:flex;justify-content space-between;margin:20px auto;}
.box .image_area > *{width:calc(50% - 10px);}
.box img{width:100%;}

.box a{font-weight:bold;color: #ff008b;cursor:pointer;text-decoration:underline;}

.btn{
   position: relative;
   display:flex;
   justify-content:center;
   align-items:center;
   height:50px;
   max-width:300px;
   border-radius:6px;
   border:2px solid rgba(255, 0, 139, 0.3);
   border-bottom-width:5px;
   background:rgba(255, 0, 139, 0.10);
   cursor:pointer;
}
.btn::after {
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    content: '';

}
.btn:hover {
    transform: translateY(3px);
    border-bottom-width: 2px;
}
.btn a{
    position:absolute;
    z-index:2;
    width: 100%;
    height: 100%;  
}
@media screen and (max-width: 640px) {
.box > .title{font-size: 18px;}
.box .image_area{display:block;}
.box .image_area > *{width:100%;margin-bottom:20px;}
}
@media screen and (max-width: 480px) {
.box > .title{font-size: 16px;}
.text#main_exp,
.box .text{font-size:13px;}

}


/*
================================================================================================================
メイン
================================================================================================================
*/
/*メインビジュアル*/
#main_visual{width:100%;margin: 0 auto 20px;}
#main_visual img{width:100%;}

/*公式サイト 公式Xへのリンク*/
#main_exp ul{
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:10px;
    border:1px solid #dddddd;    
    margin:  20px auto;
    padding:10px 0;
}
#main_exp ul li{
   width:calc(50% - 20px);
   max-width:240px;
   margin:0 10px;
}


/*
================================================================================================================
配信 ステージ
================================================================================================================
*/

#stage > ul.date,
#stage > ul.date2{
padding:10px 0;
margin: 20px auto;
border-bottom:1px solid #dddddd;    
}
#stage > ul.date::before,
#stage > ul.date2::before,
#stage > ul.info li.cast::before{
width: fit-content;
display: block;
color:#FFF;
font-weight:bold;
padding:3px 10px;
border-radius:6px;
background-color:rgba(255, 0, 139, 0.5);
} 
#stage > ul.date::before{
content: '配信日時';
}
#stage > ul.date2::before{
content: '日時';
}
#stage > ul.date li,
#stage > ul.date2 li{
font-size:14px;
margin-top: 10px;
padding:5px 10px;
}
#stage > ul.date li::before,
#stage > ul.date2 li::before{
font-weight:bold;
}
#stage > ul.date li.business::before{
content: 'ビジネスデー：';
} 
#stage > ul.date li.user::before{
content: 'ユーザーデー：';
} 

#stage > ul.info{
margin: 20px auto;
padding:10px 0;
display:flex;
}
#stage > ul.info li.photo{
width:40%;
max-width:300px;
margin-right:15px;
aspect-ratio: 16 / 9;
}
#stage > ul.info li.cast{
width:auto;
}
#stage > ul.info li.cast::before{
content: '出演者';
}
#stage > ul.info li.cast > *{margin-top:10px;display:block;}
#stage > ul.info li.cast .mc::before,
#stage > ul.info li.cast .guest::before{
font-weight:bold;
}
#stage > ul.info li.cast .mc::before{
content: 'MC：';
}
#stage > ul.info li.cast .guest::before{
content: 'ゲスト：';
}

#stage > .stream-link{
    max-width:200px;
    margin-left:auto;
}

/*特定機種仕様*/
.box > .title#jubeat{text-align:left;}
.box > .title#jubeat ul.num{width: fit-content;margin:0 auto;}
.box > .title#jubeat ul.num li:first-child{margin-bottom:10px;}

@media screen and (max-width: 640px) {
#stage > ul.info{display: block;}
#stage > ul.info li.photo {width:100%;max-width:500px;margin:0 auto 20px;}
#stage > .stream-link{margin:0 auto;max-width:300px;}

}

/*
================================================================================================================
展示
================================================================================================================
*/
#exhibition > .cast{margin:20px auto;}
#exhibition > .cast > *{margin-top:10px;display:block;}
#exhibition > .cast::before,
#exhibition > .cast .mc::before,
#exhibition > .cast .guest::before{
font-weight:bold;
}
#exhibition > .cast::before{
content: '出演者';
width: fit-content;
display: block;
color:#FFF;
padding:3px 10px;
border-radius:6px;
background-color:#8cc121;
}
#exhibition > .cast .mc::before{
content: 'MC：';
}
#exhibition > .cast .guest::before{
content: 'ゲスト：';
}

#exhibition > .notice{
    font-size:13px;
    margin:20px auto;
} 

/*
================================================================================================================
ノベルティ
================================================================================================================
*/

#novelty > ul{
    display:flex;
    border-radius:10px;
    border:1px solid #dddddd;    
    margin: 0 auto 15px;
    padding:15px;}

#novelty > ul li.photo{
    width:35%;
    max-width:240px;
    margin-right:15px;
}

#novelty > ul li.text{
    width:calc(65% - 15px);
}
#novelty > ul li > .novelty_name{
font-size:18px;
font-weight:bold;
margin-bottom:15px;
}

#novelty > ul.noimg li.text{
    width:100%;
}
#novelty > ul.noimg li > .novelty_name{
    text-align:center;
}
#novelty > ul li.notext{width:100%;max-width: initial;text-align:center;}
#novelty > ul li.notext img{max-width:240px;}

#novelty > .notice{
    font-size:13px;
    margin:20px auto;
} 

@media screen and (max-width: 640px) {
#novelty > ul{display: block;}
#novelty > ul li.photo {width:100%;max-width:400px;margin:0 auto 20px;}
#novelty > ul li.text{width:100%;}
#novelty > ul li > .novelty_name{font-size:16px;}
}

/*
================================================================================================================
物販
================================================================================================================
*/
#sales > .sales-link{
    margin:20px auto;
}

#sales .image_area > *{
    width: 100%;
    margin: 0 auto 20px;}

/*
================================================================================================================
キャンペーン
================================================================================================================
*/

#campaign > .camp-link{
    max-width:300px;
    margin:20px 0 20px auto;
}

#campaign > .notice{
    font-size:13px;
    margin:20px auto;
} 

@media screen and (max-width: 640px) {
#campaign > .camp-link{margin:0 auto;}

}

/*
================================================================================================================
注意書き
================================================================================================================
*/
#notice > ul{
    font-size:13px;
    margin:20px auto;
}