@charset "UTF-8";



.box {
  position   : relative;
  max-width  : 950px;
  height     : 500px;
  margin     : auto;
  overflow   : hidden;
}

.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 36s infinite;   /* 4画像 × 各9s = 36s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1 {
  background-image : url(../images/top_image00.jpg);
}
.box .src2 {
  background-image : url(../images/top_image01.jpg);
  animation-delay  : 9s;
}
.box .src3 {
  background-image : url(../images/top_image00.jpg);
  animation-delay  : 18s;
}
.box .src4 {
  background-image : url(../images/top_image01.jpg);
  animation-delay  : 27s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   9% { opacity: 1; }
  25% { opacity: 1; }
  34% { opacity: 0; }
 100% { opacity: 0; }
}

.box .boxString0{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
#  background : rgba(0, 127, 255, 0.7);
  color      : #fff;
  font-size    : 26px;
  top        : 50px;
  left       : 20px;
#  transform  : translate(-50%,-50%);
  z-index    : 11;
}
.box .boxString1{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
#  background : rgba(0, 127, 255, 0.7);
  color      : #fff;
  font-size    : 26px;
  top        : 80px;
  left       : 20px;
#  transform  : translate(-50%,-50%);
  z-index    : 11;
}
.box .boxString2{
  position   : absolute;
  display    : inline-block;
  padding    : 20px;
#  background : rgba(0, 127, 255, 0.7);
  color      : #fff;
  font-size    : 34px;
  top        : 280px;
  left       : 780px;
  transform  : translate(-50%,-50%);
  z-index    : 11;
}


.button1{
    background: url("../images/b1_event1.png") no-repeat;
    position  : absolute;
    top       : 350px;
    left      : 20px;
    z-index   : 12;
}
.button1 a {
    width: 145px;
    height: 145px;
    background: url("../images/b1_event1.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
.button1 a:hover {
        background-image: url("../images/b1_event2.png");
}
.button1 a:hover img {
    visibility: hidden;
}


.button2{
    background: url("../images/b2_design1.png") no-repeat;
    position  : absolute;
    top       : 350px;
    left      : 173px;
    z-index   : 12;
}
.button2 a {
    width: 145px;
    height: 145px;
    background: url("../images/b2_design1.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
.button2 a:hover {
        background-image: url("../images/b2_design2.png");
}
.button2 a:hover img {
    visibility: hidden;
}



.button3{
    background: url("../images/b3_goods1.png") no-repeat;
    position  : absolute;
    top       : 350px;
    left      : 326px;
    z-index   : 12;
}
.button3 a {
    width: 145px;
    height: 145px;
    background: url("../images/b3_goods1.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
.button3 a:hover {
        background-image: url("../images/b3_goods2.png");
}
.button3 a:hover img {
    visibility: hidden;
}



.button4{
    background: url("../images/b4_visual1.png") no-repeat;
    position  : absolute;
    top       : 350px;
    left      : 479px;
    z-index   : 12;
}
.button4 a {
    width: 145px;
    height: 145px;
    background: url("../images/b4_visual1.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
.button4 a:hover {
        background-image: url("../images/b4_visual2.png");
}
.button4 a:hover img {
    visibility: hidden;
}



.button5{
    background: url("../images/b5_performer1.png") no-repeat;
    position  : absolute;
    top       : 350px;
    left      : 632px;
    z-index   : 12;
}
.button5 a {
    width: 145px;
    height: 145px;
    background: url("../images/b5_performer1.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
.button5 a:hover {
        background-image: url("../images/b5_performer2.png");
}
.button5 a:hover img {
    visibility: hidden;
}



.button6{
    background: url("../images/b6_rental1.png") no-repeat;
    position  : absolute;
    top       : 350px;
    left      : 785px;
    z-index   : 12;
}
.button6 a {
    width: 145px;
    height: 145px;
    background: url("../images/b6_rental1.png") no-repeat;
    display: block;
    text-indent: -9999px;
}
.button6 a:hover {
        background-image: url("../images/b6_rental2.png");
}
.button6 a:hover img {
    visibility: hidden;
}