@charset "UTF-8";

body {
    background: #000;
}
.allContain{
    font-family: YakuHanJP, Noto Serif JP, -apple-system, BlinkMacSystemFont, "Arial", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.contain{
    position: relative;
    width: 40%;
    margin-left: 60%;
}
.minVisual .contain{
    margin-left: auto;
    box-sizing: border-box;
}
section {
    padding-left: 0;
    background: transparent;
}
.minVisual section {
    padding-left: 60px;
}
section:first-of-type {
    padding-top: 60px;
}
section:last-of-type {
    padding-bottom: 0;
}
.titBox h2{
    color: #FFF;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
}
.contentBox {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    color: #FFF;
}
.back{
    padding: 60px 60px 60px 0;
    box-sizing: border-box;
    text-align: center;
}
.back a{
    display: inline-block;
    background: #000;
    color: #fff;
    line-height: 1em;
    padding: 10px 20px 12px;
    border-radius: 100px;
}

/* SP-max-1080 */
@media screen and (max-width: 1080px){
.contain {
    min-width: 100%;
}
.minVisual section {
    padding-left: 20px;
}
h2 {
    font-size: 240%;
}
}

/*===================================================
  OP:MODAL
====================================================*/
.op_modal{

}
.op_modal .modPop {
    display:none;
    width: 100%;
    height: 100%;
    color: #fff;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.op_modal .modPop.popActive {
  display:block;
}
.op_modal .modPop .popupShade{
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 0;
}

.op_modal .modPop .close {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: -60px;
    cursor: pointer;
    transition: 0.3s ease;
    transform: rotate(45deg);
    background: #f7f7f7;
    border-radius: 100px;
}
.op_modal .modPop .close::before,
.op_modal .modPop .close::after {
    content: '';
    display: inline-block;
    width: 60%;
    height: 2px;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
}
.op_modal .modPop .close::before {
  transform: translate(-50%,-50%);
}
.op_modal .modPop .close::after {
    transform: translate(-50%,-50%) rotate(90deg);
}
.op_modal .modPop .popInBox {
    width: 90%;
    max-width: 1400px;
    margin: 100px auto;
    position: relative;
    background: #f7f7f7;
    color: #000;
    border-radius: 20px;
    max-height: calc(100vh - 200px);
}
.op_modal .modPop .popInContent{
    width: 100%;
    max-height: calc(100vh - 200px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 60px;
    box-sizing: border-box;
}
.op_modal .modPop .popInContent::-webkit-scrollbar{
    display: none;
}
.op_modal .modPop .popInContent.liveDetail h3{
    margin-bottom: 20px;
}
.op_modal .modPop .popInContent.liveDetail .innerLink{
    color: #ab2250;
}
/* OP:MODAL:PC-min-770 */
@media screen and (min-width: 1081px){

}

/* OP:MODALSP-max-769 */
@media screen and (max-width: 1080px){
.op_modal .modPop .close {
    width: 30px;
    height: 30px;
    right: 0;
    top: -40px;
}
.op_modal .modPop .popInBox {
    max-height: calc(100vh - 120px);
    margin: 60px auto;
}
.op_modal .modPop .popInContent{
    max-height: calc(100vh - 120px);
    padding: 20px;
}
}


/*============================================
    loading
==============================================*/
.loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999;
}
.loading .scene{
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 999;
}
.loading .scene2,
.loading .scene3,
.loading .scene4{
    opacity: 0;
    transform: translatex(0);
}
.loading .scene1{
    opacity: 1;
}


.loading .scene img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.loading .scene2 img,
.loading .scene3 img{
    object-fit: unset;
    width: auto;
    height: 100%;
}
.loaded .loading .scene1{
}
.loaded .loading .scene2{
    left: 50%;
    width: auto;
    opacity: 0;
    animation: fade1 4s linear 0s forwards reverse;
}
.loaded .loading .scene3{
    left: 50%;
    width: auto;
    opacity: 0;
    animation: fade1 4s linear 5s forwards;
}
.loaded .loading .scene4{
    opacity: 0;
    animation: fade2 2s ease 9s forwards;

}
.loading .skip{
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: #FFF;
    line-height: 1em;
    padding: 8px 20px 10px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: YakuHanJP, Noto Serif JP, -apple-system, BlinkMacSystemFont, "Arial", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.loaded .loading  .skip{
    opacity: 0;
    transition: 2s ease 10s;
}
@keyframes fade1 {
    0% {
        opacity: 0;
        transform: translatex(0);
    }
    10% {
        opacity: 1;

    }
    90% {
        opacity: 1;

    } 
    100% {
        opacity: 0;
        transform: translatex(-100%);
    }

}

@keyframes fade2 {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    } 
    100% {
        opacity: 1;
    }

}
/*============================================
    BG
==============================================*/
.bgBox{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/static/seikimaii/official/feature/2man_babymetal/images/bg.jpg);
    background-size: cover;
    background-position: center;
}

/*============================================
    visual
==============================================*/
.visual {
    width: 60%;
    min-height: 580px;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
}
.visual h1{
    aspect-ratio: 1920 / 2717;
    min-height: 580px;
    height: 100vh;
    line-height: 0;
}
.visual .visualDetail{
    display: flex;
    align-items: center;
    justify-content: center;
}
.minVisual .visual .visualDetail{
    display: none;
}

.visual .visualDetail .visualDetailinner{
    width: 50%;
    max-width: 200px;
    height: 100%;
    background-image: url(/static/seikimaii/official/feature/2man_babymetal/images/ph_visual_date_00.png);
    background-size: cover;
    background-position: center;
    /*filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.8));*/
}


/* SP-max-1080 */
@media screen and (max-width: 1080px){
.visual {
    width: 100%;
    min-height: auto;
    position: relative;
}
.visual h1 {
    aspect-ratio: unset;
    min-height: auto;
    height: auto;
}
}

/*============================================
    SCHEDULE
==============================================*/
.scheduleBox{

}
.scheduleBox .contentBox{
    padding: 80px 60px;
}
.scheduleBox .scheduleList{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
}
.scheduleBox .scheduleList li{
    text-align: center;
    border-bottom: 1px solid;
    padding: 0 0 40px;
}
.scheduleBox .scheduleList li:last-child{

}
.scheduleBox .scheduleList .day{
    margin-bottom: 20px;
    font-weight: 700;
}
.scheduleBox .scheduleList .liveTit{
    font-size: 240%;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
    line-height: 1em;
}
.scheduleBox .scheduleList .liveTit span{
    display: block;
    font-size: 50%;
    font-weight: 600;
    line-height: 1em;
    padding: 10px 0 0;
}
.scheduleBox .scheduleList .date{
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 140%;
    line-height: 1.4em;
}
.scheduleBox .scheduleList .date .year{
    font-size: 80%;
    padding: 0 5px;
}
.scheduleBox .scheduleList .date .week{
    font-size: 80%;
    padding: 0 0 0 5px;
}
.scheduleBox .scheduleList .time{
    font-weight: 600;
    font-size: 80%;
}
.scheduleBox .scheduleList .time span{
    font-size: 80%;
    margin: 0 5px 0 0;
}
.scheduleBox .venue{
    text-align: center;
    margin-bottom: 60px;
}
.scheduleBox .venue dt{
    display: inline-block;
    border: 1px solid;
    line-height: 1em;
    padding: 5px 10px 6px;
    margin: 0 0 15px;
    border-radius: 100px;
}
.scheduleBox .venue dd{
    font-size: 160%;
    font-weight: 600;
}
.scheduleBox .btnMore{
    text-align: center;
}
.scheduleBox .btnMore a{
    display: inline-block;
    text-align: center;
    background: #ab2250;
    font-size: 18px;
    padding: 15px 40px 19px;
    color: #FFF;
    border-radius: 100px;
}
.scheduleBox .btnMore a i{
    font-size: 90%;
    vertical-align: -1px;
    padding: 0 0 0 10px;
}
/*============================================
    MOVIE
==============================================*/
.movieBox{

}
.movieBox .contentBox{
    padding: 0;
    background: transparent;
}

/*============================================
    BNR
==============================================*/
.bnrBox{

}
.bnrBox .contentBox{
    padding: 20px;
}
.bnrBox .bnrList{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
}
.bnrBox .bnrList li{

}
.bnrBox .bnrList li:last-child{

}
.bnrBox .bnrList li a{
    display: block;
    overflow: hidden;
    position: relative;
}
.bnrBox .bnrList li a span{
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: #343434;
    padding: 10px 20px;
    color: #FFF;
    font-weight: 600;
}
/* PC-min-1081 */
@media screen and (min-width: 1081px){
.bnrBox .bnrList li a img{
    transition: 0.3s ease;
}
.bnrBox .bnrList li a:hover img{
    transform: scale(1.1);
}
}

/* SP-max-1080 */
@media screen and (max-width: 1080px){
.bnrBox .bnrList li a span {
    position: absolute;
    left: 5px;
    bottom: 5px;
    padding: 2px 10px;
    font-size: 80%;
}
}

/*============================================
    INFORMATION
==============================================*/
.informationBox{

}
.informationBox .infomationList{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
}
.informationBox .infomationList li{
    padding: 0 0 20px;
    border-bottom: 1px solid;
}
.informationBox .infomationList li:last-child{
    padding: 0;
    border-bottom: none;
}
.informationBox .infomationList .date{
    font-weight: 600;
    font-size: 80%;
    margin: 0 0 5px;
}
.informationBox .infomationList .jptxt{
    margin: 0 0 10px;
}
.informationBox .infomationList .entxt{
    font-size: 70%;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    display: inline;
    padding: 5px 10px;
    line-height: 2.6;
    background-color: #ab2250;
}
.informationBox .infoCap{
    border-top: 1px dashed #888;
    padding: 20px 0 0;
    font-size: 14px;
    text-align: center;
}
/*============================================
    STORY
==============================================*/
.storyBox{

}
.storyBox h3{
    font-size: 300%;
    line-height: 1.2em;
    padding-bottom: 40px;
    border-bottom: 1px solid;
    margin-bottom: 40px;
}
.storyBox .storyClm{
    display: flex

}
.storyBox .storyClm .clm{

}
.storyBox .storyClm .clm:first-of-type{
    padding-right: 60px;
    width: calc(100% - 460px);
}
.storyBox .storyClm .clm:last-of-type{
    border-left: 1px solid;
    padding: 0 0 0 60px;
    width: 460px;
    box-sizing: border-box;
}
.storyBox .storyList{
    border-bottom: 1px solid;
    padding: 0 0 40px;
    margin: 0 0 40px;
}
.storyBox .storyList dt {
    margin-bottom: 40px;
}
.storyBox .storyList dt .tit{
    font-size: 220%;
    line-height: 1em;
    font-weight: 700;
    letter-spacing: 0.2em;
}
.storyBox .storyList dt .tit span{
    font-size: 50%;
    line-height: 1em;
    letter-spacing: 0.05em;
}


.storyBox .storyList dd{
    font-size: 14px;
}
.storyBox .storyList dd > *{
    margin: 0 0 10px;
}
.storyBox .storyList dd > *:last-child{
    margin: 0;
}
.storyBox .artist{
    margin-bottom: 60px;
}
.storyBox .artist:last-of-type{
    margin-bottom: 0;
}
.storyBox .artist .artistName{
    font-size: 16px;
    display: inline-block;
    background: #000;
    color: #FFF;
    padding: 5px 10px 6px;
    margin: 0 0 20px;
}
.storyBox .artist .biography{
    font-size: 14px;
    margin: 0 0 10px;
}
.storyBox .artist .biography:last-of-type{
    margin: 0 0 20px;
}
.storyBox .artist .figure{

}

/* SP-max-1080 */
@media screen and (max-width: 1080px){
.storyBox .storyClm {
    display: block;
}
.storyBox .storyClm .clm:first-of-type {
    padding-right: 0;
    width: 100%;
}
.storyBox .storyClm .clm:last-of-type {
    border-left: none;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}
.storyBox h3 {
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: 240%;
}
.storyBox .storyList {
    padding: 0 0 20px;
    margin: 0 0 20px;
}
.storyBox .storyList dt {
    margin-bottom: 20px;
}
.storyBox .artist {
    margin-bottom: 40px;
}
}


footer{
    padding: 100px;
    background: transparent;
    width: calc(100% - 60px);
}
footer .logo{
    margin-bottom: 40px;
}
footer .logo a{
    display: block;
}
footer .credit{
    text-align: center;
    display: block;
    color: #FFF
}

/* PC-min-1081 */
@media screen and (min-width: 1081px){
footer .logo a img{
    transition: 0.3s ease;
}

footer .logo a:hover img{
    filter: invert(1);
}
}

/* SP-max-1080 */
@media screen and (max-width: 1080px){
footer {
    padding: 40px 20px;
    width: 100%;
}
footer .logo {
    width: 70%;
    max-width: 400px;
    margin: 0 auto 40px;
}
}