/*
Theme Name:TwentyTwelve Child Theme Base
Template:twentytwelve
*/

/* ---
    Reset
--------------------------------------- */
body{
    background-color: #121212;
    background-image: url(img/bg_around.webp);
    background-repeat: repeat-y;
    background-position: center top;
    background-size: cover;

    position: relative;
    .site{
        max-width: 100%;
        box-shadow: none;
        margin: 0;
        padding: 0;
        background: inherit;
    }
}

.site-header{
    padding: 0;
}

.site-content{
    margin: 0;
    article{
        padding-bottom: 0;
        border-bottom: none;
    }
}

.entry-header{
    margin-bottom:0;
}

.entry-content{
    p{
        margin: 0;
        color: #fff;
        font-size: 1.6rem;
        @media (max-width:767px){
            font-size: 16px;
        }
    }
    img{
        box-shadow:none;
    }
    iframe{
        margin-bottom: 0;
    }
}

ul,
ul li,
.entry-content li{
    margin:0;
    padding: 0;
    list-style: none;
}

/* ---
    Common Elements
--------------------------------------- */

/* --- ローディング画面 --- */
#loading-screen {
  position: fixed;
  z-index: 99999;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s;
  flex-direction: column;
}
#loading-screen.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
#loading-screen .loading-progress-bar {
  width: 200px;
  height: 6px;
  background: #eeeeee;
  border-radius: 3px;
  margin-top: 24px;
  overflow: hidden;
  box-shadow: 0 0 4px #ccc inset;
}
#loading-screen .loading-progress {
  width: 0%;
  height: 100%;
  background: #050B9B;
  transition: width 0.3s;
}

/* フォントの適用 */
.ff{
    font-family: "Reggae One", system-ui;
}

p.mini{
    font-size: 14px;
}

.center{
    text-align: center;
}

h2.main-title__center{
    font-family: "Reggae One", system-ui;
    font-size: 3rem;
    line-height: 1.4;
    text-align: center;
    color: #fff;
    border-bottom: 3px solid #fff;
    padding-bottom: 15px;
    @media (max-width:767px){
        font-size: 2.4rem;
    }
}

/* ---
    Layout
--------------------------------------- */
.column{
    width:100%;
    .row{
        max-width: 1280px;
        margin:0 auto;
        padding: 100px 0;
        @media (max-width:767px){
            max-width:calc(100% - 30px);
            padding: 30px 0;
        }
        &.sp_row{
            > img{
                @media (max-width:767px){
                    display: block;
                    max-width:calc(100% - 30px);
                    margin:0 auto;
                } 
            }
            @media (max-width:767px){
                max-width:100%;
            }
        }
    }

}

.column.video-background{
    background-color: #000;
    .row{
        &.fullwidth{
            max-width: 100%;
            width:100%;
            position: relative;
            padding: 0;
            .first-concept{
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, 50%);
                h2.main-title__center{
                    margin: 0 auto 30px auto;
                    text-shadow:0 0 4px #121212;
                }
                @media (max-width:767px){
                    width:100%;
                }
            }
            .over-lay{
                position: absolute;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                z-index: 0;
                &::after{
                    content: '';
                    display: block;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0,0,0,0.3);
                    background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
                    background-size: 4px 4px;
                    background-position: 0 0, 2px 2px;
                }
            }
            video{
                width: 100%;
                height: 507px;
                object-fit: cover;
                position: relative;
                margin: 0;
            }
        }
    }
}

.column.column01,
.column.column02,
.column.column03,
.column.column04{
    background-position: center top;
    background-size: cover;
    color: #fff;
}

/* --- 下層ページ（固定ページ）のレイアウト共通 --- */

/* --- リスト（共通） --- */
ul.list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 2em;
    li{
        border:1px solid #efefef;
    }
    &.list2{
        li{
            width: calc(100% / 2 - 0.5em);
        }
    }
    &.list3{
        li{
            width:calc(100% / 3 - 1.5em);
            @media (max-width:767px){
                width:calc(100% / 2 - 0.5em);
            }
        }
        @media (max-width:767px){
            row-gap: 0.8em;
        }
    }
    &.list4{
        li{
            width:calc(100% / 4 - 0.5em);
        }
    }
}

/* ---
    Swiper JS
--------------------------------------- */
.swiper{
    margin: 0 auto;
    .swiper-wrapper {
        width: 100%;
        .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
        }
    }
}
.swiper2{
    margin: 0 auto 30px auto;
    .swiper-wrapper,
    .swiper-wrapper{
        .swiper-slide,
        .swiper-slide{
            img{
                display: block;
                width: auto;
                height: 80vh;
                margin:0 auto;
                object-fit: cover;
                @media (max-width:1280px){
                    height: auto;
                }
            } 
        }
    }
}

/* ---
    Header
--------------------------------------- */

.site-header{
    width: 100%;
    position: fixed;
    z-index: 99;
    background-color: rgba(4,3,59,0.3);
    .header-contents{
        max-width:90%;
        margin:0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        h1{
            line-height: 1;
            margin-bottom: 0;
            a{
                color: #000;
                text-shadow:0 0 5px #fff,
                0 0 5px #fff,
                0 0 5px #fff,
                0 0 5px #fff,
                0 0 5px #fff;
                img{
                    max-width: 90px;
                }
            }
        }
    }
}

.main-navigation{
    margin:0;
    ul.nav-menu,
    .main-navigation div.nav-menu > ul{
        border:none;
    }
    li{
        margin: 0;
    }
    li a,
    .current-menu-item > a,
    .current-menu-ancestor > a,
    .current_page_item > a,
    .current_page_ancestor > a{
        font-size:1.6rem;
        color: #fff;
        font-family: "Reggae One", system-ui;
        padding: 0em 1.5em;
        text-shadow:0 0 5px #000,
        0 0 5px #000,
        0 0 5px #000,
        0 0 5px #000,
        0 0 5px #000;
        &:hover{
            color: #fff;
            transition: 0.5s;
            background-color: rgba(255,255,255,0.3);
        }
    }
}

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul{
    border: none;
}

/* --- スマホ ハンバーガーメニュー --- */
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #ffffff;
    span,
    span:before,
    span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #121212;
        position: absolute;
    }
    span:before {
        bottom: 8px;
    }
    span:after {
        top: 8px;
    }
    &:hover{
        cursor: pointer;
    }
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

.menu-content{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #121212;
    transition: all 0.5s;/*アニメーション設定*/
    ul {
        padding: 70px 10px 0;
        li {
            border-bottom: solid 1px #ffffff;
            list-style: none;
            a {
                display: block;
                width: 100%;
                font-size: 1.8rem;
                box-sizing: border-box;
                color:#ffffff;
                text-decoration: none;
                padding: 1em 15px 1em 0;
                position: relative;
                font-family: "Reggae One", system-ui;
                &::before{
                    content: "";
                    width: 7px;
                    height: 7px;
                    border-top: solid 2px #ffffff;
                    border-right: solid 2px #ffffff;
                    transform: rotate(45deg);
                    position: absolute;
                    right: 11px;
                    top: 16px;
                }
            }
        }
    }
}

/* ---
    Footer
--------------------------------------- */

footer[role="contentinfo"]{
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    background-color: #121212;
    color: #fff;
    border-top: 0;
    .site-info{
        max-width:1280px;
        margin:0 auto;
        .copyright{
            font-size: 1.4rem;
            text-align: center;
        }
    }
}

/* --- フッター固定SNSアイコン --- */
.sns_icon{
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    z-index: 999;
    li{
        width: 100%;
        height: 100%;
        a{
            img{
                display: block;
                width: 100%;
            }
        }
    }
}

/* ---
    トップページ
--------------------------------------- */
.mainvisual{
    width:100%;
    background:linear-gradient(to bottom,#000,#050444);
    padding:100px 0;
    overflow: hidden;
    @media (max-width:767px){
        padding:100px 0 50px 0;
    }
}

/* VTuber Fes VackON!!とは */
.first-concept{
    text-align: center;
    p{
        font-size: 1.6rem;
        font-family: "Reggae One", system-ui;
        text-shadow:0 0 4px #121212;
        @media (max-width:767px){
            font-size: 16px;
        }
    }
}

/* チケット販売中 */
.tickets-onsale{
    width:100%;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    column-gap: 5%;
    > div{
        width:45%;
        @media (max-width:767px){
            width: 100%;
        }
    }
    .image_area{
        @media (max-width:767px){
            margin-top: 30px;
        }
    }
}

/* 約束１．才能に色眼鏡をかけない */
.promise-1_box{
    width:100%;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    column-gap: 5%;
    margin-top: 60px;
    > div{
        width:45%;
        @media (max-width:767px){
            width: 100%;
        }
    }
}

/* 約束２．感動に妥協しない */
.movie_around{
    width:100%;
    .movie_box{
        display: flex;
        .lp_movie{
            border:20px solid #000;
            @media (max-width:767px){
                border:10px solid #000;
            }
        }
        &.movie01,
        &.movie03{
            justify-content: flex-start;
            .lp_movie{
                transform: rotate(-10deg);
            }
        }
        &.movie02{
            justify-content: flex-end;
            .lp_movie{
                transform: rotate(10deg);
            }
        }
    }
    @media (max-width:767px){
        overflow: hidden;
    }
}

/* YouTube Short一覧 */
ul.youtube_short{
    margin:100px auto 0 auto;
    justify-content: space-around;
    li{
        border: none;
        iframe{
            height: 640px;
            @media (max-width:767px){
                height: 320px;
            }
        }
    }
    @media (max-width:767px){
        margin:50px auto 0 auto;
    }
}

/* 過去開催の#VackON */
ul.past-events{
    margin:100px auto 0 auto;
    row-gap: 5em;
    background-color: #000;
    padding: 30px;
    @media (max-width:767px){
        flex-direction: column;
    }
    li{
        border: none;
        @media (max-width:767px){
            width: 100%!important;
            margin-bottom: 30px;
        }
        img{
            display: block;
            border-radius: 10px;
        }
        h3{
            color: #fff;
            font-size: 2.2rem;
            border-bottom: 1px solid #fff;
            margin: 0 auto 10px auto;
            @media (max-width:767px){
                font-size: 2.0rem;
            }
        }
        p{
            @media (max-width:767px){
                font-size: 16px;
            }
        }
        &:last-child{
            margin-bottom: 0;
        }
    }
    @media (max-width:767px){
        margin: 50px auto 0 auto;
    }
}

/* ---
    お問い合わせページ
--------------------------------------- */
.column_contact{
    h1{
        text-align: center;
        font-family: "Reggae One", system-ui;
        color: #fff;
    }
}