/* スタイル上書き */
.text-dark {
    color:#212529!important;
}

/* フォント */
@font-face {
  font-family: 'Noto Sans CJK Japanese';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/NotoSansJP/NotoSansCJKjp-Light.woff2') format('woff2'),
     url('../fonts/NotoSansJP/NotoSansCJKjp-Light.woff') format('woff'),
     url('../fonts/NotoSansJP/NotoSansCJKjp-Light.ttf')  format('truetype'),
       url('../fonts/NotoSansJP/NotoSansCJKjp-Light.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Noto Sans CJK Japanese';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/NotoSansJP/NotoSansCJKjp-Medium.woff2') format('woff2'),
     url('../fonts/NotoSansJP/NotoSansCJKjp-Medium.woff') format('woff'),
     url('../fonts/NotoSansJP/NotoSansCJKjp-Medium.ttf')  format('truetype'),
       url('../fonts/NotoSansJP/NotoSansCJKjp-Medium.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Noto Sans CJK Japanese';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/NotoSansJP/NotoSansCJKjp-Bold.woff2') format('woff2'),
     url('../fonts/NotoSansJP/NotoSansCJKjp-Bold.woff') format('woff'),
     url('../fonts/NotoSansJP/NotoSansCJKjp-Bold.ttf')  format('truetype'),
       url('../fonts/NotoSansJP/NotoSansCJKjp-Bold.eot') format('embedded-opentype');
}

/* サイネージスタイル */
body {
  font: 14px 'Noto Sans CJK Japanese', 'Hiragino Kaku Gothic ProN', Arial, sans-serif;
  font-weight: 300;
  background-color: #000000!important;
  /* cursor: url(../img/mouse.png), default; */
  overflow:hidden;
}

#base_contents_area {
  height: 100vh;
  width:1440px;
  position: relative;
  float:left;
  margin:0;
}

#base_contents_area iframe{
  width:100%;
  height:100%;
  position: absolute;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 1;
}

#base_contents_area iframe.fadeOut{
	opacity: 0;
}

#date_time{
  position: absolute;
  color:#fff;
  z-index: 200;
  font-size:32px;
  font-weight:500;
  right:50px;
  top:72px;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

#loading{
  position: absolute;
  top:925px;
  left:1280px;
  z-index: 210;
  opacity: 0;
	transition: opacity .3s;
}

.loading_view{
  opacity: 1!important;
}

#contral_notice{
  position: absolute;
  top:520px;
  left:650px;
  z-index: 220;
  transition: opacity .2s;
  opacity: 0;
  font-size:40px;
  text-align:center;
  vertical-align:middle;
  line-height: 150px;
  width:150px;
  height:150px;
  border-radius: 50%;
  color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0.1);
}

.contral_notice_view{
  opacity: 1!important;
}

.contral_error_view{
  opacity: 1!important;
  background: rgba(158, 0, 0, 0.3)!important;
}

@keyframes fadeOut {
  0% {opacity: 1}
  100% {opacity: 0}
}
@-webkit-keyframes fadeOut {
  0% {opacity: 1}
  100% {opacity: 0}
}

#base_info_area {
  height: 100vh;
  width:480px;
  background-color: #212529;
  position: relative;
  float:right;
  margin:0;
}

#base_info_area iframe{
  width:100%;
  height:100%;
  background-color: #212529;
}

#control_area{
  position: absolute;
  color:#fff;
  z-index: 200;
  font-size:32px;
  font-weight:500;
  right:0px;
  bottom:-80px;
  width:480px;
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  transition: bottom .3s;
}

#control_open_btn{
  width:100%;
  font-size:22px;
  text-align:center;
}

#control_btn_area{
  padding:20px;
  background: rgba(0,0,0,0.3);
  height:80px;
}

#control_btn_area button{
  margin-left:10px!important;
  width:40px;
}

.control_view{
  bottom:0px!important;
}

.control_view #control_open_btn i{
  transform: rotate(180deg);
}

/* bootstrap4調整用 */
.no-gutters {
  margin:0;
  padding:0;
}


/* 時計点滅用 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*************************************************************/
/* Vue.js                                                    */
/*************************************************************/

/* Transition fade */
 .fade-enter-active, .fade-leave-active {
  transition: opacity 1s ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* v-cloak */
[v-cloak] {
  display: none;
}