@charset "utf-8";

/*****************************
 * 画像の反射エフェクト      *
 *****************************/
div.reflection-img {
    width       : 765px;
    position    : relative;
    overflow    : hidden;
    margin      : 0 auto;
}
div.reflection-img.large {
    width       : 1096px;
}
div.reflection-img.lage1 {
    width       : 1044px;
}
/** 表ページ用 */
div.reflection-img.large2 {
/*    width: 786px;*/
  width: auto;
}
div.reflection-button {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0;
    line-height: 1;
}

div.reflection {
    height      : 100%;
    width       : 30px;
    z-index     : 100;
    position    : absolute;
    top         : -180px;
    left        : -380px;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { 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; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -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; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -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; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -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; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}

/*****************************
 * ボーダーの点滅エフェクト  *
 *****************************/
div.blink {
  box-shadow: 0px 0px 3px 3px #ff2200;
  width: 200px;
  height: 20px;
  display: none;
  animation: blink 1s ease-in-out infinite alternate;
  -webkit-animation: blink 1s ease-in-out infinite alternate;
  -moz-animation: blink 1s ease-in-out infinite alternate;
  -ms-animation: blink 1s ease-in-out infinite alternate;
  -o-animation: blink 1s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes blink {
    0% {opacity: 0.4;}
  100% {opacity: 1.0;}
}
@-webkit-keyframes blink {
    0% {opacity: 0.4;}
  100% {opacity: 1.0;}
}
@-moz-keyframes blink {
    0% {opacity: 0.4;}
  100% {opacity: 1.0;}
}
@-ms-keyframes blink {
    0% {opacity: 0.4;}
  100% {opacity: 1.0;}
}
@-o-keyframes blink {
    0% {opacity: 0.4;}
  100% {opacity: 1.0;}
}



/*****************************
 * バナーのボタン点滅        *
 *****************************/
.blink-reflection {
  height: 151px;
}
.blink-banner {
  z-index: 5;
  position: relative;
  top: 0;
  left: 0;
}
.blink-button {
  height: 151px;
  width: 158px;
  z-index: 10;
  position: relative;
  top: -158px;
  float: right;
  cursor: pointer;
  animation:         blink 1s ease-in-out infinite alternate;
  -webkit-animation: blink 1s ease-in-out infinite alternate;
  -moz-animation:    blink 1s ease-in-out infinite alternate;
  -ms-animation:     blink 1s ease-in-out infinite alternate;
  -o-animation:      blink 1s ease-in-out infinite alternate;
}
.blink-button:hover {
  animation:         none;
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  -o-animation:      none;
}

@keyframes blink {
    0% {opacity: 1.0;}
  100% {opacity: 0.2;}
}
@-webkit-keyframes blink {
    0% {opacity: 1.0;}
  100% {opacity: 0.2;}
}
@-moz-keyframes blink {
    0% {opacity: 1.0;}
  100% {opacity: 0.2;}
}
@-ms-keyframes blink {
    0% {opacity: 1.0;}
  100% {opacity: 0.2;}
}
@-o-keyframes blink {
    0% {opacity: 1.0;}
  100% {opacity: 0.2;}
}