@charset "UTF-8";
/*==================================
 setting
===================================*/
/* @include fontsize(18px, 18px, 3rem); */
* {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}

html {
  font-size: 62.5%;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1000px) {
  html {
    font-size: 1vw;
  }
}
@media screen and (max-width: 980px) {
  html {
    font-size: 1.0204081633vw;
  }
}

body {
  font-family: "メイリオ", "ＭＳ Ｐゴシック", Helvetica, sans-serif;
  line-height: 1.6;
  position: relative;
  width: 100%;
  min-width: 320px;
  height: auto;
  -webkit-text-size-adjust: 100%;
}
body:before {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100vh;
  content: "";
  background: url("../image/bg.jpg") center no-repeat;
  background-size: cover;
}

img {
  max-width: 100%;
  height: auto;
}

_:lang(x)::-internal-media-controls-overlay-cast-button,
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

a,
a:hover,
a:active {
  color: #383275;
}

a:visited {
  color: #383275;
}

a:focus {
  outline: none;
}

ul {
  list-style: none;
}

/*clearfix*/
.cf::after {
  display: block;
  clear: both;
  content: "";
}

/*==================================
 common
===================================*/
.-showSp {
  display: none;
}
@media screen and (max-width: 980px) {
  .-showSp {
    display: block;
  }
}

.-showPc {
  display: block;
}
@media screen and (max-width: 980px) {
  .-showPc {
    display: none;
  }
}

.-fontBold {
  font-weight: bold;
}

.-fontNormal {
  font-weight: normal;
}

.-hover01:hover {
  transform: translateY(2px);
}

img.lazyload {
  width: 100%;
}

.fontPink {
  color: #ff44a0;
}

#wrapper {
  overflow-x: hidden;
  width: 100%;
  min-width: 320px;
  height: auto;
}

/*==================================
main
===================================*/
.main {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background: url("../image/main-bg.png") center no-repeat;
  background-size: 1920px;
}
@media screen and (max-width: 980px) {
  .main {
    background: none;
    background-size: contain;
  }
}
.main .logoSteam {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 177px;
  margin-left: -500px;
}
@media screen and (max-width: 980px) {
  .main .logoSteam {
    left: 1.5306122449vw;
    width: 23.9795918367vw;
    margin-left: auto;
  }
}
.main .logoMiku {
  position: absolute;
  top: 15px;
  left: 50%;
  width: 178px;
  margin-left: 298px;
}
@media screen and (max-width: 980px) {
  .main .logoMiku {
    right: 8.8775510204vw;
    left: 0;
    width: 25vw;
    margin-left: auto;
  }
}
@media screen and (min-width: 1920px) {
  .main {
    background-size: cover;
  }
}
.main .main-right {
  position: absolute;
  top: 278px;
  left: 50%;
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: space-between;
  margin-left: -146px;
}
@media screen and (max-width: 980px) {
  .main .main-right {
    top: 51.2244897959vw;
    left: 20.612244898vw;
    align-items: flex-start;
    width: 76.5306122449vw;
    margin-left: auto;
  }
}
@media screen and (max-width: 980px) {
  .main .main-right .logo {
    width: 62.5510204082vw;
    margin-left: 11.4285714286vw;
  }
}
.main .main-right .catch {
  display: block;
  width: 268px;
  margin: 5px auto;
}
@media screen and (max-width: 980px) {
  .main .main-right .catch {
    width: 33.0612244898vw;
    margin-left: 26.7346938776vw;
  }
}
.main .main-right .movieWrap {
  position: relative;
  width: 300px;
  height: 170px;
  margin: 10px auto;
  padding: 4px;
  background: linear-gradient(to right, #77e8da 0%, #f3ff62 33%, #f3ff62 66%, #ff79c8 100%);
}
@media screen and (max-width: 980px) {
  .main .main-right .movieWrap {
    width: 45.306122449vw;
    height: 25.7142857143vw;
    margin-left: 22vw;
    padding: 0.612244898vw;
  }
}
.main .main-right .movieWrap .movie {
  position: relative;
  overflow: hidden;
  width: 292px;
  height: 162px;
}
@media screen and (max-width: 980px) {
  .main .main-right .movieWrap .movie {
    width: 44.4897959184vw;
    height: 24.693877551vw;
  }
}
.main .main-right .movieWrap .movie a:hover .movieOverlay {
  background: 0;
}
.main .main-right .movieWrap .movie .movieOverlay {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.main .main-right .movieWrap .movie .movieImg {
  position: absolute;
  top: -28px;
}
@media screen and (max-width: 980px) {
  .main .main-right .movieWrap .movie .movieImg {
    top: -4.4897959184vw;
  }
}
.main .main-right .movieWrap .movie .btn {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 35px;
  margin: auto;
}
@media screen and (max-width: 980px) {
  .main .main-right .movieWrap .movie .btn {
    width: 7.3469387755vw;
    height: 5.2040816327vw;
  }
}
.main .main-right .btn {
  margin: 5px auto;
  cursor: pointer;
}
@media screen and (max-width: 980px) {
  .main .main-right .btn {
    width: 56.6326530612vw;
    margin: auto;
    margin-top: 2%;
    margin-left: 0;
  }
}
.main .miku {
  position: relative;
  top: 88px;
  left: 50%;
  width: 1007px;
  margin-left: -660px;
  padding-bottom: 20px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0.6s;
  transform: translate(100px, 50px);
  opacity: 0;
}
.main .miku.-anime {
  transform: translate(0, 0);
  opacity: 1;
}
@media screen and (min-width: 1920px) {
  .main .miku {
    top: 4.1666666667vw;
    width: 52.4479166667vw;
    margin-left: -34.375vw;
  }
}
@media screen and (max-width: 980px) {
  .main .miku {
    top: 10vw;
    left: -21.4285714286vw;
    width: 140.8163265306vw;
    margin-left: auto;
    padding-bottom: 20.4081632653vw;
  }
}
.main .infoWrap {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 500px;
  height: 110px;
  margin-left: -80px;
  padding-top: 10px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 80%, rgba(255, 255, 255, 0) 100%);
}
.main .infoWrap .info {
  overflow-y: scroll;
  width: 400px;
  height: 90px;
  margin: 0 auto;
}
@media screen and (max-width: 980px) {
  .main .infoWrap .info {
    width: 94%;
    height: 16vw;
    background: #fff;
  }
}
@media screen and (max-width: 980px) {
  .main .infoWrap .info dl {
    width: 100%;
  }
}
.main .infoWrap .info dl dt {
  font-size: 12px;
  font-weight: bold;
  color: #03c0e8;
}
@media screen and (max-width: 980px) {
  .main .infoWrap .info dl dt {
    font-size: 2.2vw;
  }
}
.main .infoWrap .info dl dd {
  font-size: 14px;
  font-weight: bold;
  color: #ff44a0;
}
@media screen and (max-width: 980px) {
  .main .infoWrap .info dl dd {
    font-size: 2.6vw;
  }
}
@media screen and (max-width: 980px) {
  .main .infoWrap {
    left: 0;
    width: 100%;
    height: 20vw;
    margin-left: 0;
    padding-top: 2vw;
    background: #fff;
  }
}
.main .info::-webkit-scrollbar {
  width: 16px;
}
.main .info::-webkit-scrollbar-track {
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.5);
}
.main .info::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-color: #03c0e8;
}

/*==================================
 contents
===================================*/
section {
  position: relative;
}
section .contentsWrap {
  width: 96%;
  max-width: 1000px;
  margin: 0 auto;
}
section .contentsWrap .title {
  font-family: "M PLUS 1p", "Montserrat", "Helvetica Neue", "メイリオ", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 34px;
  margin-top: 6%;
  text-align: center;
  color: #fff;
  background: linear-gradient(-45deg, #ff58a5 25%, #fe65b7 25%, #fe65b7 50%, #ff58a5 50%, #ff58a5 75%, #fe65b7 75%, #fe65b7);
  background-size: 12px 12px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
}
@media (max-width: 980px) {
  section .contentsWrap .title {
    font-size: 5vw;
    padding: 1%;
  }
}
section .contentsWrap .subTitle {
  font-family: "M PLUS 1p", "Montserrat", "Helvetica Neue", "メイリオ", "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  font-size: 26px;
  padding: 5px;
  text-align: center;
  color: #fff;
  background: linear-gradient(-45deg, #01c7ce 25%, #0dd0d7 25%, #0dd0d7 50%, #01c7ce 50%, #01c7ce 75%, #0dd0d7 75%, #0dd0d7);
  background-size: 12px 12px;
}
@media (max-width: 980px) {
  section .contentsWrap .subTitle {
    font-size: 4vw;
  }
}
section .contents {
  margin-top: 3%;
  padding: 2% 3% 3% 3%;
  background-color: rgba(255, 255, 255, 0.92);
}
section .contents .mt5 {
  margin-top: 5%;
}
section .contents .musicListWrap {
  overflow-y: scroll;
  width: 100%;
  height: 560px;
  margin-top: 2%;
  margin-bottom: 5%;
}
section .contents .musicListWrap::-webkit-scrollbar {
  width: 16px;
}
section .contents .musicListWrap::-webkit-scrollbar-track {
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.5);
}
section .contents .musicListWrap::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background-color: #03c0e8;
}
section .contents .musicListWrap .musicList {
  font-size: 16px;
  margin: auto;
  table-layout: fixed;
  word-wrap: break-all;
  word-break: break-all;
  border: 2px solid #01c7ce;
}
@media (max-width: 640px) {
  section .contents .musicListWrap .musicList {
    font-size: 3vw;
  }
}
section .contents .musicListWrap .musicList tbody tr {
  padding: 5px 10px;
}
section .contents .musicListWrap .musicList tbody tr td {
  padding: 5px 10px;
  border: 2px solid #01c7ce;
}
section .contents .musicListWrap .musicList tbody tr td:nth-of-type(1) {
  width: 40%;
  color: #fff;
  background: #0c7478;
}
section .contents .musicListWrap .musicList tbody tr td:nth-of-type(2), section .contents .musicListWrap .musicList tbody tr td:nth-of-type(3), section .contents .musicListWrap .musicList tbody tr td:nth-of-type(4) {
  width: 20%;
  background: #fff;
}
section .contents .musicListWrap .musicList tbody tr:nth-of-type(1) {
  color: #fff;
  background: #01c7ce;
}
section .contents .musicListWrap .musicList tbody tr:nth-of-type(1) td {
  color: #fff;
  border-right: 2px solid #fff;
  background: #01c7ce;
}
section .contents .musicListWrap .musicList tbody tr:nth-of-type(1) td:nth-of-type(4) {
  border-right: none;
}
section .contents .btn {
  position: relative;
  max-width: 456px;
  margin: 3% auto;
  cursor: pointer;
}
section .contents .btn span {
  font-family: "M PLUS 1p", sans-serif;
  font-size: 25px;
  position: absolute;
  z-index: 10;
  top: 50%;
  display: block;
  width: 100%;
  transform: translate(0, -55%);
  text-align: center;
  color: #fff;
}
@media (max-width: 640px) {
  section .contents .btn span {
    font-size: 4.4vw;
  }
}
section .contents .btn.edit {
  width: 463px;
}
@media (max-width: 640px) {
  section .contents .btn.edit {
    width: 100%;
  }
}
section .contents .text {
  font-size: 18px;
  margin: 2% auto;
  text-align: left;
  color: #4c4c4c;
}
@media (max-width: 980px) {
  section .contents .text {
    font-size: 3vw;
  }
}
section .contents .text-s {
  font-size: 14px;
}
@media (max-width: 980px) {
  section .contents .text-s {
    font-size: 2.3vw;
  }
}
section .contents .item02Wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2% auto;
}
@media (max-width: 980px) {
  section .contents .item02Wrap.-triple {
    margin-bottom: 2%;
  }
}
@media (max-width: 980px) {
  section .contents .item02Wrap.-triple .itemWrap {
    margin: 0 auto;
  }
}
@media (max-width: 980px) {
  section .contents .item02Wrap .itemWrap {
    margin: 3% auto;
  }
}
@media (max-width: 980px) {
  section .contents .item02Wrap {
    margin: 4% auto 0 auto;
  }
}
@media (max-width: 980px) {
  section .contents .item02Wrap .musicTitle {
    width: 80%;
  }
}
section .contents .item02Wrap .item {
  width: 49%;
}
@media (max-width: 980px) {
  section .contents .item02Wrap .item {
    width: 100%;
    margin: 4% auto;
  }
}
section .contents .item02Wrap .item:nth-of-type(1) {
  margin-right: 1%;
}
@media (max-width: 980px) {
  section .contents .item02Wrap .item:nth-of-type(1) {
    margin-right: 0;
  }
}
section .contents .item02Wrap .item:nth-of-type(2) {
  margin-left: 1%;
}
@media (max-width: 980px) {
  section .contents .item02Wrap .item:nth-of-type(2) {
    margin-left: 0;
  }
}
section .contents .itemWrap {
  width: 100%;
  margin: 3% auto 3% auto;
  padding: 2% 3%;
  border: solid 1px #65ffff;
  background-color: rgba(20, 85, 87, 0.6);
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
}
section .contents .itemWrap.-dl {
  width: 80%;
}
@media (max-width: 980px) {
  section .contents .itemWrap.-dl {
    width: 100%;
  }
}
section .contents .itemWrap.-dl .ss {
  width: 98%;
  max-width: 600px;
  margin: auto;
}
@media (max-width: 980px) {
  section .contents .itemWrap.-dl .ss {
    width: 98%;
    max-width: inherit;
  }
}
section .contents .itemWrap.-single {
  padding: 4%;
}
@media (max-width: 980px) {
  section .contents .itemWrap {
    margin: 6% auto 6% auto;
    padding: 6% 3%;
  }
}
section .contents .itemWrap .text {
  font-size: 18px;
  text-align: center;
  color: #fff;
}
@media (max-width: 980px) {
  section .contents .itemWrap .text {
    font-size: 3vw;
  }
}
section .contents .itemWrap .ssWrap {
  display: flex;
  flex-wrap: wrap;
  margin: 2% auto;
}
@media (max-width: 980px) {
  section .contents .itemWrap .ssWrap {
    margin: 4% auto;
  }
}
section .contents .itemWrap .ssWrap .ss {
  width: 49%;
}
@media (max-width: 980px) {
  section .contents .itemWrap .ssWrap .ss {
    width: 100%;
    margin: 4% auto;
  }
}
section .contents .itemWrap .ssWrap .ss:nth-of-type(1) {
  margin-right: 1%;
}
@media (max-width: 980px) {
  section .contents .itemWrap .ssWrap .ss:nth-of-type(1) {
    margin-right: 0;
  }
}
section .contents .itemWrap .ssWrap .ss:nth-of-type(2) {
  margin-left: 1%;
}
@media (max-width: 980px) {
  section .contents .itemWrap .ssWrap .ss:nth-of-type(2) {
    margin-left: 0;
  }
}
@media (max-width: 980px) {
  section .contents .itemWrap .ssWrap {
    display: block;
  }
}
section .contents .itemWrap .ss {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
}
section .contents .moduleWrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 3% auto;
}
@media (max-width: 980px) {
  section .contents .moduleWrap {
    display: flex;
  }
}
@media (max-width: 640px) {
  section .contents .moduleWrap {
    display: block;
    width: 76%;
  }
}
section .contents .moduleWrap .moduleItem {
  width: 31.3%;
  margin: 2% auto;
}
@media (max-width: 980px) {
  section .contents .moduleWrap .moduleItem {
    width: 48%;
  }
}
section .contents .moduleWrap .moduleItem img {
  width: 100%;
  margin: 0 auto;
  border: solid 1px #65ffff;
  box-shadow: 0 0 10px -6px rgba(0, 0, 0, 0.6);
}
@media (max-width: 640px) {
  section .contents .moduleWrap .moduleItem img {
    display: block;
    width: calc(100% - 2px) !important;
    box-shadow: none;
  }
}
section .contents .slick-list {
  padding-left: 4px;
}
@media (max-width: 640px) {
  section .contents .slick-list {
    padding-left: 0;
  }
}
section .contents .comparison {
  width: 80%;
  margin: 3% auto;
}
@media (max-width: 980px) {
  section .contents .comparison {
    width: 100%;
  }
}

.prev_icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: -24px;
  width: 24px;
  cursor: pointer;
  transform: translate(0, -50%);
}
@media (max-width: 640px) {
  .prev_icon {
    left: -12%;
    width: 8%;
  }
}

.next_icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -24px;
  width: 24px;
  cursor: pointer;
  transform: translate(0, -50%);
}
@media (max-width: 640px) {
  .next_icon {
    right: -12%;
    width: 8%;
  }
}

.dlbtnWrap {
  display: flex;
}
@media (max-width: 980px) {
  .dlbtnWrap {
    display: block;
  }
}
.dlbtnWrap .btn {
  width: 46%;
  margin: 0 2%;
}
@media (max-width: 980px) {
  .dlbtnWrap .btn {
    width: 100%;
    max-width: 456px;
  }
}

#gameInfo {
  margin-top: 4%;
}
@media (max-width: 640px) {
  #gameInfo {
    margin-top: 6%;
  }
}

.gameInfoWrap {
  position: relative;
  padding: 10px 15px;
  border: solid 1px #65ffff;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 10px -6px rgba(0, 0, 0, 0.6);
}
.gameInfoWrap .gameLogos {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.gameInfoWrap .gameLogos span {
  display: inline-block;
}
.gameInfoWrap .gameLogos span.cero {
  width: 37px;
  margin-left: 10px;
}
@media (max-width: 980px) {
  .gameInfoWrap .gameLogos span.cero {
    width: 8.59375vw;
    max-width: 55px;
  }
}
.gameInfoWrap .gameLogos span.am {
  width: 93px;
}
@media (max-width: 980px) {
  .gameInfoWrap .gameLogos span.am {
    width: 18.59375vw;
    max-width: 119px;
  }
}
.gameInfoWrap .gameItemWrap {
  width: 70%;
}
@media (max-width: 980px) {
  .gameInfoWrap .gameItemWrap {
    width: 100%;
  }
}
.gameInfoWrap .gameItemWrap .gameItem {
  display: inline-block;
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
}
@media (max-width: 980px) {
  .gameInfoWrap .gameItemWrap .gameItem {
    display: flex;
    align-items: flex-start;
    margin-top: 2vw;
    margin-right: 2vw;
    margin-bottom: 1vw;
  }
}
.gameInfoWrap .gameItemWrap .gameItem .gameTitle {
  font-size: 12px;
  font-weight: bold;
  display: inline-block;
  width: 82px;
  padding: 3px 5px 0 5px;
  text-align: center;
  color: #fff;
  background: #298a8e;
}
@media (max-width: 980px) {
  .gameInfoWrap .gameItemWrap .gameItem .gameTitle {
    font-size: 2.4vw;
    width: 22%;
    padding: 0.3vw 0.6vw;
    text-align: center;
  }
}
.gameInfoWrap .gameItemWrap .gameItem .gameText {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
  color: #fff;
}
@media (max-width: 980px) {
  .gameInfoWrap .gameItemWrap .gameItem .gameText {
    font-size: 2.4vw;
    width: 78%;
    margin-left: 1.4vw;
  }
}

#banner {
  width: 100%;
  margin-top: 4%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.4);
}
@media (max-width: 980px) {
  #banner {
    margin-top: 6%;
  }
}
#banner .bannerWrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  width: 560px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  #banner .bannerWrap {
    width: 100%;
  }
}
#banner .bannerWrap p {
  margin: 10px;
}
@media (max-width: 640px) {
  #banner .bannerWrap p {
    width: 46%;
    max-width: 250px;
    margin: 2%;
  }
}

.pagetop {
  position: fixed;
  z-index: 10;
  right: 15px;
  bottom: 15px;
  width: 100px;
  cursor: pointer;
}
@media (max-width: 640px) {
  .pagetop {
    right: 1%;
    bottom: 1%;
    width: 17.1875vw;
  }
}

/*==================================
 footer
===================================*/
.footer {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 20px 0 40px 0;
  color: #fff;
  background: linear-gradient(-45deg, #444 25%, #424242 0, #424242 50%, #444 0, #444 75%, #424242 0, #424242);
  background-attachment: fixed;
  background-size: 20px 20px;
}
@media (max-width: 980px) {
  .footer {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(-45deg, #444 25%, #424242 0, #424242 50%, #444 0, #444 75%, #424242 0, #424242);
    background-attachment: fixed;
    background-size: 20px 20px;
  }
}
.footer .contents {
  position: relative;
  width: 960px;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 980px) {
  .footer .contents {
    font-size: 1.8vw;
    width: 96%;
  }
}
.footer .contents .link {
  margin-top: 20px;
}
.footer .contents .link li a {
  font-size: 10px;
  color: #fff;
}
.footer .contents .link li a:hover {
  text-decoration: none;
}
@media (max-width: 980px) {
  .footer .contents .link li a {
    font-size: 1.8vw;
  }
}
.footer .contents .sns {
  display: flex;
  width: 170px;
  margin: 20px auto;
}
@media (max-width: 640px) {
  .footer .contents .sns {
    width: 40%;
    margin: 4% auto;
  }
}
.footer .contents .sns p {
  width: 46px;
  margin: 0 5px;
}
@media (max-width: 640px) {
  .footer .contents .sns p {
    width: 32%;
    margin: 4 0.5%;
  }
}
.footer .contents .logo {
  margin-top: 2%;
}
.footer .contents .logo img {
  margin: 0 10px;
}
.footer .contents .logo .sega {
  width: 98px;
}
.footer .contents .logo .hatsunemiku {
  width: 110px;
  height: auto;
}

/*==================================
 colorbox
===================================*/
#colorbox #cboxClose {
  top: -70px;
  right: 0;
  display: inline-block;
  overflow: hidden;
  width: 56px;
  height: 55px;
  white-space: nowrap;
  text-indent: 300%;
  background-image: url("../image/btn-close.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
}
@media screen and (max-width: 980px) {
  #colorbox #cboxClose {
    height: 55px;
    height: 7.33333vw;
  }
}

#cboxContent,
#cboxWrapper,
#cboxWrapper > div:nth-child(2),
#colorbox {
  overflow: visible !important;
}

@media screen and (max-width: 980px) {
  #colorbox.iframeColorbox #cboxContent {
    width: 90vw !important;
    height: auto !important;
  }

  #colorbox.iframeColorbox #cboxContent #cboxLoadedContent {
    position: relative;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.4%;
  }

  #colorbox.iframeColorbox #cboxContent #cboxLoadedContent iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  #colorbox.iframeColorbox {
    top: 50% !important;
    left: 5vw !important;
    width: 90vw !important;
    height: 50.75vw !important;
    margin-top: -25.37vw;
  }

  #colorbox.iframeColorbox #cboxWrapper,
#colorbox.iframeColorbox #cboxWrapper > div:nth-child(2) {
    position: relative !important;
    left: 0 !important;
    display: flex !important;
    justify-content: center;
    width: 100% !important;
    height: auto !important;
  }
}
.animated {
  transition: opacity 1s linear, transform 1s ease-out;
  transform: translateY(20px);
  opacity: 0;
}
.animated.-active {
  transform: translateY(0px);
  opacity: 1;
}

.t-r {
  text-align: right !important;
}/*# sourceMappingURL=common.css.map */