body { 
opacity:1 !important;
 }

#loader-bg {
  /**display: none;**/
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000000;
  z-index: 99999;
}
#loader {
  /**display: none;**/
  display: block;
  position: fixed;
  /**top: 50%;**/
  top: 55%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #000000;
  z-index: 999999;
}
#carousel-hestia-generic{
	opacity: 0;
}
#black_scl {
  opacity: 1;
}
#top_moji1 {
  opacity: 0;
}
#top_moji2 {
  opacity: 0;
}
#top_moji3 {
  opacity: 0;
}
#top_moji4 {
  opacity: 0;
}
#top_moji4 {
  /**animation: arrow111 3s linear infinite forwards;**/
}
@keyframes arrow111 {
/**
    0% { background-position: left ;background-size: 125%; }
    50% { background-position: right ;background-size: 105%; }
    60% { background-position: right ;background-size: 110%; }
    100% { background-position: left ;background-size: 125%;  }
 **/
     0% { background-position: top 73% center;  }
     20% { background-position: top 73% center;  }
    /**30% { background-position: top 75% center; }
    40% { background-position: top 77% center; }
    50% { background-position: top 91% center; }**/
    80% { background-position: top 95% center; }
    100% { background-position: top 95% center;  }

}

/**.header { height:100%; }**/
/**
video {
    max-width: 1000% !important;
}
**/
.video-container {
  position: relative;
  top: 0;
  /**bottom: 0;**/
  left:0%;
  width: 100%;
  /**height: 100%;**/ 
  height: 100%;
  overflow: hidden;
}

/** 801pxより小さい(800から) **/
@media (max-width: 800px) {

.video-container {
  width: 100%;
}

}
/**デバイスが縦長の状態の場合**/
@media screen and (orientation: portrait) {
#carousel-hestia-generic{
  overflow: hidden;
}
}

/**topページメイン画像↓**/

/**デバイスが横長の状態の場合**/
@media screen and (orientation: landscape) {
  #main_scl{
    background: url('https://lighthouse-ube.jp/wp-content/themes/hestia/img/top_scr.jpg') no-repeat;
  }
  #main_scl2{
    background: url('https://lighthouse-ube.jp/wp-content/themes/hestia/img/top_scr2.jpg') no-repeat;
  }
  #main_scl3{
    background: url('https://lighthouse-ube.jp/wp-content/themes/hestia/img/top_scr3.jpg') no-repeat;
  }
  
  
}
/**デバイスが縦長の状態の場合**/
@media screen and (orientation: portrait) {
  #main_scl{
    background: url('https://lighthouse-ube.jp/wp-content/themes/hestia/img/top_scr_keitai.jpg') no-repeat;
  }
  #main_scl2{
    background: url('https://lighthouse-ube.jp/wp-content/themes/hestia/img/top_scr_keitai2.jpg') no-repeat;
  }
  #main_scl3{
    background: url('https://lighthouse-ube.jp/wp-content/themes/hestia/img/top_scr_keitai3.jpg') no-repeat;
  }
  
  
}

/**topページメイン画像↑**/



#bgvid {
  
  /* Make video to at least 100% wide and tall */
  /**
  min-width: 100%; 
  min-height: 100%; 
  **/
  /**max-width: 122%; **/
  /**max-height: 130%; **//**ここら辺後で調整**/
  /**max-width: 110%;
  min-width: 110%; **/
  /**min-height: 100%; **/
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  /**width: auto;ここら辺後で調整/
  height: 100%;**/
  
  /**以下、画面いっぱいにするためのCSS設定**/
  
  min-height: 100%;
  /**min-height: 100vh;不要htmlbodyより大きくなる**/
  min-width: 100%;
  /**min-width: 100vw;不要htmlbodyより大きくなる**/
  
  /* Center the video */
  position: absolute;
  /**top: 50%;**/
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
    /**
    background: url('http://xxxx/wp-content/themes/hestia/img/top_haikei.png') no-repeat;**/
    background-size: cover;

}

.pic_div2 {
    position: relative;
    width: 100%;
    height: auto;
}
.pic_div2:before {
    content: "";
    display: block;
    padding-top: 20%;
}
.pic_div3 {
    position: relative;
    width: 100%;
    height: auto;
}
.pic_div3:before {
    content: "";
    display: block;
    padding-top: 18%;
}
.pic_div4 {
    position: relative;
    width: 100%;
    height: auto;
}
.pic_div4:before {
    content: "";
    display: block;
    padding-top: 8%;
}
/**
.pic_div_inner {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
}
**/
/**
.pic_div {
    position: relative;
    width: 100%;
    height: auto;
}


.pic_div:before {
    content: "";
    display: block;
    padding-top: 62%;
}
**/

.reflection-img{
    margin      :0 auto;
    width       :180px;
    height      :100%;
    position    :relative;
    overflow    :hidden;
}
.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 5s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 5s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 5s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 5s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 5s ease-in-out infinite;
}
 
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    90% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    91% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    90% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    91% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    90% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    91% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    90% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    91% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    90% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    91% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}



/** 531pxより小さい(530から) **/
@media (max-width: 530px) {

  .picup_wh1 {
   margin:0px;
   width: 200px;
   height:480px;
  }
  .picup_wh2 {
  top:50px;
   width: 200px;
   height:160px;
  }
  .picup_wh3 {
   top:   210px;
   width: 200px;
   height:280px;
  }


}

/** 401pxより小さい(400から) **/
@media (max-width: 400px) {
 /**
  .picup_wh1 {
   margin:0px;
   width: 150px;
   height:420px;
  }
  .picup_wh2 {
   width: 150px;
   height:160px;
  }
  .picup_wh3 {
   top:   120px;
   width: 150px;
   height:280px;
  }
  **/
  .picup_wh1 {
  margin:8px;
   width: 230px;
   height:480px;
  }
  .picup_wh2 {
  top:50px;
   width: 230px;
   height:160px;
  }
  .picup_wh3 {
   top:   210px;
   width: 230px;
   height:280px;
  }
  
  
}
 
/** 530pxより大きい(531から) **/
@media (min-width: 530px) {
  .picup_wh1 {
  margin:8px;
   width: 280px;
   height:480px;
  }
  .picup_wh2 {
  top:50px;
   width: 280px;
   height:160px;
  }
  .picup_wh3 {
   top:   210px;
   width: 280px;
   height:280px;
  }
  
}

/**
.orgimg_k:hover {
   transform:scale(1.05,1.05);
}
**/

.button_base {
    margin: 0 auto;
    border: 0;
    
    width: 80px;
    height: 40px;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-user-select: none;
    cursor: default;
}

.button_base:hover {
    cursor: pointer;
}
/* ### ### ### 05 yellow*/
.b05_3d_roll_y {
    perspective: 500px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
}

.b05_3d_roll_y div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 40px;
    padding: 7px;
    border: #008000 solid 1px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.b05_3d_roll_y div:nth-child(1) {
    color: #008000;
    background-color: #FFFFFF;
    transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -20px;
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
}

.b05_3d_roll_y div:nth-child(2) {
    color: #FFFFFF;
    background-color: #008000;/**色**/
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform-origin: 50% 50% -20px;
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
}

.b05_3d_roll_y:hover div:nth-child(1) {
    color: #008000;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
}

.b05_3d_roll_y:hover div:nth-child(2) {
    background-color: #FFFFFF;
    transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
}




/** 1280pxより大きい(1280から) **/
@media (min-width: 1280px) {
  
  /**トピックス用**/
  .topi_yaji1{
      opacity:1;
  }
  .topi_yaji2{
      opacity:1;
  }
  
}
/** 1280pxより小さい(1279pxから) **/
@media (max-width: 1280px) {
  
  /**トピックス用**/
  .topi_yaji1{
      opacity:0;
  }
  .topi_yaji2{
      opacity:0;
  }
  
}