@charset "UTF-8";

.Fbg {
  width:100%;
  min-height: 100%;
  background-color: rgba(0,0,0,0.8);
  font-family: 'Electrolize', sans-serif;
  font-size: 100%;
  position: fixed;
  justify-content: space-between;

  /* 画像ファイルの指定 */
  background-image: url(../img/jobraber_teazer_back.jpg)!important;
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center !important;
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat !important;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: scroll !important;
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover; !important;
  z-index: 9999;
}

.teazer-head{
  width: 90%;
  margin:0.5% auto 0;
}
.teazer-head div{
  float: left;
}
.teazer-head .logo_tomica{
  width:20%;
  text-align: left;
}
.teazer-head .logo_tomica img{
  width:40%;
}
.teazer-head .copy{
  width:60%;
  text-align: center;
  margin-top: 3%;
}
.teazer-head .copy img{
  width:100%;
}
.teazer-head .logo_jb{
  width:20%;
  text-align: right;
}
.teazer-head .logo_jb img{
  width:80%;
}

.cd-body{
  text-align:center;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
}
@media screen and ( min-width:768px ) { /* PC ==================== */
.cd-body{
    margin-top:0;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .cd-body{
    margin-top:10%;
  }
}

.teazer-img{
  width:100%;
  margin-top:-2% !important;
}
.teazer-img img{
  width:100%;
}

.teazer-img2{
  width:80%;
  margin:0 auto;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
.teazer-img2 a{
  display: block;
  width:50%;
  float: left;
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
.teazer-img2 a{
}
}
.teazer-img2 a img{
  width:100%;
}

 
.ct_bg{
  position: relative;
  margin-top:-2% !important;
}

.ct_bg div{
}
.next-is{
  color: #fff;
  font-family: 'Michroma', sans-serif;
  bottom: 0;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .next-is{
  width:30%;
  float: left;
  font-size: 300%;
  padding-right:20px;
  text-align: right;
  position: absolute;
  top:-20;
  bottom: 0;
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .next-is{
  width:85%;
    margin:0 auto;
  font-size: 150%;
  text-align: left;
  margin-top:10%
}
}
.next-time{
  text-align: center;
  font-family: 'Electrolize', sans-serif;
}
.next-time span.date-titles{
  font-size: 120%;
  text-align: center;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .next-time{
  width:40%;
  margin: 0 auto;
  font-size: 1.5vw;
}
.next-time span.date-titles{
  font-size: 30% !important%;
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .next-time{
    width:90%;
    margin:0 auto;
  font-size: 90%;
}
.next-time span{
  font-size: 20% !important%;
}
}
  .total-time{
  font-family: 'Electrolize', sans-serif;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
  .total-time{
  width:20%;
  position: absolute;
  right:0;
  bottom: 0;
  font-size: 50%;
  margin-right:5%;
}
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .total-time{
    width:50%;
    margin:0 auto;
  font-size: 50%;
  margin-top: 5%;
  margin-bottom: 10%;
}
}

@media screen and ( min-width:768px ) { /* PC ==================== */
  .jb-top{
    margin:1% auto 0;
  }
}
@media screen and ( max-width:768px ) { /* SP  ==================== */
  .jb-top{
    width:80%;
    margin:0 auto;
  }
  .jb-top img{
    width:100%;
  }
}


.cd-area{
  width:100%;
  color: #C8C8C8;
}

.cd-area li {
width: 25%;
float: left;
text-align: center;
}


.time-titles {
font-size: 5em;
line-height: 1em;
}
.date-titles {
font-size: 2em;
line-height: 1em;
}
.BTNzone img {
width: 200px;
}
.BTNzone {
margin-bottom: 20px;
/* [disabled]position: fixed; */
bottom: 10px;
text-align: center;
width: 100%;
}