@charset "utf-8";

/* イケメンボタンの設定。性質上明るいページではろくに見えません。*/

/*アニメ挙動設定*/
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}
@keyframes spin_rev {
	0% {transform: rotate(360deg);}
	100% {transform: rotate(0deg);}
}


/*個別設定版*/
/* focusクラスを持つ物だけに適用されます。見た目は代わりません */
.focus{
  position:relative; /* 疑似要素座標の基点にする */
  display: inline-block; /* ボタン化 */
}
.focus:hover{
  position:relative; /* 疑似要素座標の基点にする */
}
.focus:before,.focus:after{
  pointer-events : none; /* 輪っかがカーソルに反応しないようにする */
  position:absolute; 
  width:150px; / *画像の大きさで指定 */
  height:150px;
  top:0;  /* 4方向を0、マージンをautoにすると中央に来る*/
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  opacity:0.0; /*通常時の明るさ*/  transition: all 500ms ease-in; /*オフになる時のアニメーション速度*/
  content:"";
}
.focus:after{
  background-image:url(http://kn-t.jp/ikki/cc/greenring.png); /* 回す画像 */
  animation: spin 22s linear infinite; /* 回転設定。数値が大きほど遅くなる。1周にかかる時間 */
}
.focus:before{
  background-image:url(http://kn-t.jp/ikki/cc/greenring2.png);/* 回す画像 */
  animation: spin 14s linear infinite; /* 回転設定。数値が大きほど遅くなる。1周にかかる時間 */
}

.focus:hover:after{ 
 transition: all 500ms ease; /*出てくるまでの時間*/
 opacity:0.8; /* 表示時の不透明度 */
 }
.focus:hover:before{
 transition: all 2000ms ease; /*出てくるまでの時間*/
 opacity:0.6; /* 表示時の不透明度 */
}


/*ボタン化セット版*/
/*<div class="roomtext"></div>の中のtagクラスを持つ物だけに適用されます*/

/* ルームリンクをボタン化する */
.roomtext a.tag{
  position:relative; /*座標基点*/
  cursor: pointer; /* 指カーソル */
  display: inline-block; /* ボタン化 */
  padding: 0.5em 1em; /*ボタン内余白*/
  margin: 0 auto 0.4em; /* ボタン外余白 */
  text-decoration: none; /* 飾り削除 */
  vertical-align: middle; /* 他の要素との位置 */
  text-shadow: none; /*  シャドウ消し*/
  border: 1px solid rgba(255,255,255,0.6); /* ボタン枠線 */
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0); /* ボタンのシャドウ非表示 */
  outline: 1px solid; /* フォーカス乗せたときの線 */
  outline-color: rgba(255, 255, 255, 0); /* を見えなくして */
  outline-offset: 15px; /* 外側に配置 */
  -webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); /*アニメーション設定*/
}
.roomtext a.tag:hover{
  text-decoration: none;
  border: 1px solid rgba(46, 204, 113,1.0); /*カーソル乗せた時の枠線*/
  outline-color: rgba(255, 255, 255, 0.5); /* フォーカス乗せたときの線表示 */
  outline-offset: 0px; /* borderに重なるように */
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2); /* 光るボタン */

}
.roomtext a.tag:after,.roomtext a.tag:before{ /* 以下個別版と一緒 */
  pointer-events : none;
  position:absolute;
  width:150px;
  height:150px;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  opacity:0.0;
  transition: all 500ms ease-in;
  content:"";
}
.roomtext a.tag:after{
  background-image:url(http://kn-t.jp/ikki/cc/greenring.png);
  animation: spin 22s linear infinite;
}
.roomtext a.tag:before{
  background-image:url(http://kn-t.jp/ikki/cc/greenring2.png);
  animation: spin 14s linear infinite;
}

.roomtext a.tag:hover:before{
 transition: all 2000ms ease-out;
 opacity:0.6;
}
.roomtext a.tag:hover:after{ 
 transition: all 500ms ease-out;
 opacity:0.8;
 }
 .roomtext a.tag:active:before,.roomtext a.tag:active:after{
  transform scale(2.0,2.0);
  opacity:0.0;
  transition: all 800ms ease-in;
}