/* ========================================
   MV (Main Visual) Styles
   ======================================== */

.mv__title {
    font-size: 3rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text);
}

.mv__subtitle {
    font-size: 1.25rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

@media (max-width: 768px) {
    .mv__title {
        font-size: 2rem;
    }
    
    .mv__subtitle {
        font-size: 1rem;
    }
}

/* ========================================
  Canvas / Animation
  ======================================== */

.mv__canvas-wrapper {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: hidden
}

@media screen and (max-width: 767px) {
 .mv__canvas-wrapper {
 height: 455px
 }

}

.mv__canvas {
 position: absolute;
 left: 0;
 top: 0;
 -webkit-transform-origin: left top;
 transform-origin: left top;
 -webkit-filter: drop-shadow(0 0 #000);
 filter: drop-shadow(0 0 #000)
}

/* ========================================
  Main / Hero
  ======================================== */

.mv__copy {
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(2.8%, -56%);
 transform: translate(2.8%, -56%)
}

@media screen and (max-width: 767px) {
 .mv__copy {
 top: 232px;
 -webkit-transform: translate(-50%);
 transform: translate(-50%)
 }

}

.mv__copy-main-txt--pc {
 display: block;
 opacity: 0
}

@media screen and (max-width: 767px) {
 .mv__copy-main-txt--pc {
 display: none
 }

}

.mv__copy-sub-txt--pc {
 display: block;
 opacity: 0
}

@media screen and (max-width: 767px) {
 .mv__copy-sub-txt--pc {
 display: none
 }

}

.mv__copy-main-txt--sp {
 display: none;
 opacity: 0
}

@media screen and (max-width: 767px) {
 .mv__copy-main-txt--sp {
 display: block
 }

}

.mv__copy-sub-txt--sp {
 display: none;
 opacity: 0
}

@media screen and (max-width: 767px) {
 .mv__copy-sub-txt--sp {
 display: block
 }

}

.mv__copy-main {
 position: relative;
 width: 540px;
 height: 114px;
 margin-bottom: 75px
}

@media screen and (max-width: 1279px) {
 .mv__copy-main {
 width: 440px;
 height: 105px
 }

}

@media screen and (max-width: 767px) {
 .mv__copy-main {
 width: 330px;
 height: 79px;
 margin-bottom: 7px
 }

}

.mv__copy-main-txt {
 position: absolute;
 left: 0;
 top: 0
}

.mv__copy-main-txt, .mv__copy-main-txt .svg-sprite {
 width: 100%;
 height: 100%
}

.mv__copy-sub {
 position: relative;
 width: 500px;
 height: 62px;
 margin-left: 10px
}

@media screen and (max-width: 1279px) {
 .mv__copy-sub {
 width: 400px;
 height: 48px
 }

}

@media screen and (max-width: 767px) {
 .mv__copy-sub {
 width: 300px;
 height: 42px;
 margin: 0 auto
 }

}

.mv__copy-sub-txt {
 position: absolute;
 left: 0;
 top: 0;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden
}

.mv__copy-sub-txt, .mv__copy-sub-txt .svg-sprite {
 width: 100%;
 height: 100%
}

.mv__rect {
 position: absolute;
 left: 85%;
 top: 51%;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 width: 84px;
 height: 84px
}

@media screen and (max-width: 767px) {
 .mv__rect {
 width: 39px;
 height: 39px;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 top: 467px
 }

}

.mv__rect-block {
 width: 16px;
 height: 16px;
 margin-right: 1px;
 margin-bottom: 1px;
 background: #82cbd1;
 opacity: 0
}

@media screen and (max-width: 767px) {
 .mv__rect-block {
 width: 7px;
 height: 7px
 }

}

.mv__rect-block:nth-child(5n) {
 margin-right: 0
}

.mv__rect-block:nth-last-child(-n+5) {
 margin-bottom: 1px
}

.mv__rect-block:nth-child(10), .mv__rect-block:nth-child(14), .mv__rect-block:nth-child(15), .mv__rect-block:nth-child(18), .mv__rect-block:nth-child(19), .mv__rect-block:nth-child(20), .mv__rect-block:nth-child(22), .mv__rect-block:nth-child(23), .mv__rect-block:nth-child(24), .mv__rect-block:nth-child(25) {
 visibility: hidden
}

.mv-detail {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 width: 100%;
 height: 260px;
 padding: 76px 0 0;
 background-color: #ccc;
 background-size: cover;
 background-position: bottom;
 background-image: url(/wp-content/themes/vext-corp-2019/assets/images/mv-detail-bg-default.png)
}

@media screen and (max-width: 767px) {
 .mv-detail {
 height: 160px;
 padding: 24px 0 0
 }

}

.mv-detail--page .mv-detail__title {
 margin-top: 23px
}

.mv-detail--margin {
 margin-top: 70px
}

@media screen and (max-width: 767px) {
 .mv-detail--margin {
 margin-top: 50px
 }

}

.mv-detail__inner {
 display: block
}

.mv-detail__title {
 color: #000
}

.mv-detail__main-title, .mv-detail__link:hover .mv-detail__title {
 opacity: .7
}

/* ========================================
  MV Base Styles (from style.css)
  ======================================== */

.mv {
 position: relative;
 min-width: 1120px;
 height: 660px;
 overflow: hidden
}

@media (min-width: 1121px) {
 .mv {
 height: 58.90625vw
 }

}

@media screen and (max-width: 767px) {
 .mv {
 min-width: auto;
 height: 197vw
 }

}

/* ========================================
  Information Bar (from style.css)
  ======================================== */

.information-bar {
 width: 930px
}

@media screen and (max-width: 767px) {
 .information-bar {
 width: calc(100% - 30px)
 }

}

.information-bar--mv {
 position: absolute;
 bottom: 32px
}

@media screen and (min-width: 768px) {
 .information-bar--mv {
 left: 50%;
 margin-left: -465px
 }

}

@media screen and (max-width: 767px) {
 .information-bar--mv {
 left: 15px
 }

}

.home .information-bar--mv {
 -webkit-transform: translateY(20%);
 transform: translateY(20%);
 opacity: 0;
 -webkit-transition: opacity 1s cubic-bezier(.645, .045, .355, 1) .3s, -webkit-transform 1s cubic-bezier(.645, .045, .355, 1) .3s;
 transition: opacity 1s cubic-bezier(.645, .045, .355, 1) .3s, -webkit-transform 1s cubic-bezier(.645, .045, .355, 1) .3s;
 transition: transform 1s cubic-bezier(.645, .045, .355, 1) .3s, opacity 1s cubic-bezier(.645, .045, .355, 1) .3s;
 transition: transform 1s cubic-bezier(.645, .045, .355, 1) .3s, opacity 1s cubic-bezier(.645, .045, .355, 1) .3s, -webkit-transform 1s cubic-bezier(.645, .045, .355, 1) .3s
}

@media screen and (max-width: 767px) {
 .home .information-bar--mv {
 -webkit-transform: translateY(10%);
 transform: translateY(10%)
 }

}

.home .information-bar--mv.is-active {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 opacity: 1
}

.information-bar__box {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-flex-wrap: wrap;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 height: 72px
}

@media screen and (max-width: 767px) {
 .information-bar__box {
 display: block;
 height: auto
 }

}

.information-bar__heading {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-pack: center;
 -webkit-justify-content: center;
 -ms-flex-pack: center;
 justify-content: center;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 width: 182px;
 max-width: 182px;
 -webkit-flex-basis: 182px;
 -ms-flex-preferred-size: 182px;
 flex-basis: 182px;
 font-size: 18px;
 line-height: 1;
 background-color: #0e192d;
 color: #fff;
 font-family: YakuHanJP, Montserrat, sans-serif;
 font-weight: 600;
 letter-spacing: .09em
}

@media screen and (max-width: 767px) {
 .information-bar__heading {
 width: 151px;
 height: 30px;
 font-size: 12px
 }

}

.information-bar__content {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -webkit-align-items: center;
 -ms-flex-align: center;
 align-items: center;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1;
 padding: 0 40px 0 29px;
 border: 1px solid #0e192d;
 border-left-width: 0;
 overflow: hidden
}

@media screen and (max-width: 767px) {
 .information-bar__content {
 padding: 4px 14px 11px;
 border-left-width: 1px
 }

}

.information-bar__content__list {
 display: block;
 width: 100%
}

.information-bar__link {
 display: block;
 width: 100%;
 text-align: right;
 padding: 0 2px 0 0
}

.information-bar__link--margin {
 margin-top: 14px
}

@media screen and (max-width: 767px) {
 .information-bar__link--margin {
 margin-top: 8px
 }

}

.information-bar__link__inner {
 display: inline-block;
 font-size: 14px;
 font-family: YakuHanJP, Montserrat, sans-serif;
 font-weight: 600;
 line-height: 1;
 letter-spacing: .09em;
 color: #0e192d;
 text-decoration: none
}

@media screen and (max-width: 767px) {
 .information-bar__link__inner {
 font-size: 12px
 }

}

@media screen and (min-width: 768px) {
 .information-bar__link__inner:hover .information-bar__link__arrow {
 -webkit-transform: translate(10px, -3px);
 transform: translate(10px, -3px)
 }

}

.information-bar__link__arrow {
 display: inline-block;
 width: 55px;
 height: 8px;
 margin: 0 0 0 4px;
 -webkit-transform: translateY(-3px);
 transform: translateY(-3px);
 -webkit-transition: -webkit-transform .25s ease;
 transition: -webkit-transform .25s ease;
 transition: transform .25s ease;
 transition: transform .25s ease, -webkit-transform .25s ease
}

@media screen and (max-width: 767px) {
 .information-bar__link__arrow {
 width: 48px;
 height: 7px;
 margin: 0 0 0 10px;
 -webkit-transform: translateY(-2px);
 transform: translateY(-2px)
 }

}

.information-bar__link__arrow .svg-sprite-arrow-long {
 width: 55px;
 height: 8px;
 fill: #0e192d
}

@media screen and (max-width: 767px) {
 .information-bar__link__arrow .svg-sprite-arrow-long {
 width: 48px;
 height: 7px
 }

}