/*--  Top クロスフェード --*/
.SliderTop{
    width:950px;
    height:544px;
    margin:0 auto;
    position:relative;
}
.SliderTop ul{
    margin:0;
    padding:0;
    list-style:none;
}
.SliderTop ul li{
    width:950px;
    height:544px;
    position:absolute;
    top:0;
    left:0;

  /* VendorPrefix */
  -webkit-animation-duration: 48s; /* 8sec x 5枚 + 8sec  */
  animation-duration: 48s;
  -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;

}

.SliderTop ul li:nth-child(1){
    animation-name:SliderTop;
    animation-delay:-1500ms; /* 1枚目は1.5sec早めに開始し、トランジションをパスする */
}
.SliderTop ul li:nth-child(2){
    animation-name:SliderTop;
    animation-delay:6500ms;
    opacity:0;
}
.SliderTop ul li:nth-child(3){
    animation-name:SliderTop;
    animation-delay:15000ms;
    opacity:0;
}
.SliderTop ul li:nth-child(4){
    animation-name:SliderTop;
    animation-delay:23000ms;
    opacity:0;
}
.SliderTop ul li:nth-child(5){
    animation-name:SliderTop;
    animation-delay:31000ms;
    opacity:0;
}
 
@keyframes SliderTop{
    0%{ /* Start */
        opacity:0;
    }
    3.12%{  /* 1.5s 1.5秒に100％にする */
        opacity:1;
    }
    33.33%{ /* 8s 8秒後まで100％にしておく */
        opacity:1;
    }
    39.58%{ /* 9.5s 9.5秒までに0％にする */
        opacity:0;
    }
    100%{   /* そのまま最後まで0％にしておく */
        opacity:0;
    }
}

/*--  横方向スライド 7枚分 --*/
#stage01 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 480px;
  background:#fefbf6;
  overflow: hidden;
}
#photo01 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 720px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright1 21s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright1 21s ease infinite;
  -webkit-transition:left 1s ease;
  /*
  ease：開始と完了を滑らかにする（初期値）
  linear：一定／ease-in：ゆっくり始まる／ease-out：ゆっくり終わる
  ease-in-out：ゆっくり始まってゆっくり終わる
  cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
  */
}
.pic01 {
  width:720px;
  position:absolute;
}
.pic01 img { width:720px; }
#photo01-1 { left:-635px; }
#photo01-2 { left: 115px; }
#photo01-3 { left: 865px; }
#photo01-4 { left:1615px; }
#photo01-5 { left:2365px; }
#photo01-6 { left:3115px; }
#photo01-7 { left:3865px; }
#photo01-8 { left:4615px; }
#photo01-9 { left:5365px; }

/* スライド群のanimation */
@keyframes transtoright1 {
    0%      { left:     0px; } /* Start */
    9.52%   { left:     0px; } /* 2sec( 2) wait */
   14.29%   { left:  -750px; } /* 1sec( 3) 1->2 */
   23.81%   { left:  -750px; } /* 2sec( 5) wait */
   28.57%   { left: -1500px; } /* 1sec( 6) 2->3 */
   38.1%    { left: -1500px; } /* 2sec( 8) wait */
   42.86%   { left: -2250px; } /* 1sec( 9) 3->4 */
   52.38%   { left: -2250px; } /* 2sec(11) wait */
   57.14%   { left: -3000px; } /* 1sec(12) 4->5 */
   66.67%   { left: -3000px; } /* 2sec(14) wait */
   71.43%   { left: -3750px; } /* 1sec(15) 5->6 */
   80.95%   { left: -3750px; } /* 2sec(17) wait */
   85.71%   { left: -4500px; } /* 1sec(18) 6->7 */
   95.24%   { left: -4500px; } /* 2sec(20) wait */
   99.9999% { left: -5250px; } /* 1sec(21) 7->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

#stage02 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 440px;
  background:#dacfb3;
  overflow: hidden;
}
#photo02 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 660px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright2 15s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright2 15s ease infinite;
  -webkit-transition:left 1s ease;
}
.pic02 {
  width:660px;
  position:absolute;
}
.pic02 img { width:660px; }
#photo02-1 { left:-555px; }
#photo02-2 { left: 145px; }
#photo02-3 { left: 845px; }
#photo02-4 { left:1545px; }
#photo02-5 { left:2245px; }
#photo02-6 { left:2945px; }
#photo02-7 { left:3645px; }
/* スライド群のanimation */
@keyframes transtoright2 {
    0%      { left:     0px; } /* Start */
   13.33%   { left:     0px; } /* 2sec wait */
   20%      { left:  -700px; } /* 1sec 1->2 */
   33.33%   { left:  -700px; } /* 2sec wait */
   40%      { left: -1400px; } /* 1sec 2->3 */
   53.33%   { left: -1400px; } /* 2sec wait */
   60%      { left: -2100px; } /* 1sec 3->4 */
   73.33%   { left: -2100px; } /* 2sec wait */
   80%      { left: -2800px; } /* 1sec 4->5 */
   93.33%   { left: -2800px; } /* 2sec wait */
   99.9999% { left: -3500px; } /* 1sec 5->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

#stage03 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 440px;
  background:#dacfb3;
  overflow: hidden;
}
#photo03 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 660px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright3 15s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright3 15s ease infinite;
  -webkit-transition:left 1s ease;
}
.pic03 {
  width:660px;
  position:absolute;
}
.pic03 img { width:660px; }
#photo03-1 { left:-555px; }
#photo03-2 { left: 145px; }
#photo03-3 { left: 845px; }
#photo03-4 { left:1545px; }
#photo03-5 { left:2245px; }
#photo03-6 { left:2945px; }
#photo03-7 { left:3645px; }
/* スライド群のanimation */
@keyframes transtoright3 {
    0%      { left:     0px; } /* Start */
   13.33%   { left:     0px; } /* 2sec wait */
   20%      { left:  -700px; } /* 1sec 1->2 */
   33.33%   { left:  -700px; } /* 2sec wait */
   40%      { left: -1400px; } /* 1sec 2->3 */
   53.33%   { left: -1400px; } /* 2sec wait */
   60%      { left: -2100px; } /* 1sec 3->4 */
   73.33%   { left: -2100px; } /* 2sec wait */
   80%      { left: -2800px; } /* 1sec 4->5 */
   93.33%   { left: -2800px; } /* 2sec wait */
   99.9999% { left: -3500px; } /* 1sec 5->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

#stage04 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 440px;
  background:#dacfb3;
  overflow: hidden;
}
#photo04 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 660px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright4 18s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright4 18s ease infinite;
  -webkit-transition:left 1s ease;
}
.pic04 {
  width:660px;
  position:absolute;
}
.pic04 img { width:660px; }
#photo04-1 { left:-555px; }
#photo04-2 { left: 145px; }
#photo04-3 { left: 845px; }
#photo04-4 { left:1545px; }
#photo04-5 { left:2245px; }
#photo04-6 { left:2945px; }
#photo04-7 { left:3645px; }
#photo04-8 { left:4345px; }
/* スライド群のanimation */
@keyframes transtoright4 {
    0%      { left:     0px; } /* Start */
   11%      { left:     0px; } /* 2sec wait */
   16.67%   { left:  -700px; } /* 1sec 1->2 */
   27.78%   { left:  -700px; } /* 2sec wait */
   33.33%   { left: -1400px; } /* 1sec 2->3 */
   44.44%   { left: -1400px; } /* 2sec wait */
   50%      { left: -2100px; } /* 1sec 3->4 */
   61.11%   { left: -2100px; } /* 2sec wait */
   66.67%   { left: -2800px; } /* 1sec 4->5 */
   77.78%   { left: -2800px; } /* 2sec wait */
   83.33%   { left: -3500px; } /* 1sec 5->6 */
   94.44%   { left: -3500px; } /* 2sec wait */
   99.9999% { left: -4200px; } /* 1sec 6->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

#stage05 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 440px;
  background:linear-gradient(#e5d1a7, #e5d2a8); /* ここだけバックをグラデに */
  overflow: hidden;
}
#photo05 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 660px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright5 18s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright5 18s ease infinite;
  -webkit-transition:left 1s ease;
}
.pic05 {
  width:660px;
  position:absolute;
}
.pic05 img { width:660px; }
#photo05-1 { left:-555px; }
#photo05-2 { left: 145px; }
#photo05-3 { left: 845px; }
#photo05-4 { left:1545px; }
#photo05-5 { left:2245px; }
#photo05-6 { left:2945px; }
#photo05-7 { left:3645px; }
#photo05-8 { left:4345px; }
/* スライド群のanimation */
@keyframes transtoright5 {
    0%      { left:     0px; } /* Start */
   11%      { left:     0px; } /* 2sec wait */
   16.67%   { left:  -700px; } /* 1sec 1->2 */
   27.78%   { left:  -700px; } /* 2sec wait */
   33.33%   { left: -1400px; } /* 1sec 2->3 */
   44.44%   { left: -1400px; } /* 2sec wait */
   50%      { left: -2100px; } /* 1sec 3->4 */
   61.11%   { left: -2100px; } /* 2sec wait */
   66.67%   { left: -2800px; } /* 1sec 4->5 */
   77.78%   { left: -2800px; } /* 2sec wait */
   83.33%   { left: -3500px; } /* 1sec 5->6 */
   94.44%   { left: -3500px; } /* 2sec wait */
   99.9999% { left: -4200px; } /* 1sec 6->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

#stage06 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 580px;
  background:linear-gradient(#e5d1a7, #e5d2a8); /* ここだけバックをグラデに */
  overflow: hidden;
}
#photo06 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 870px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright6 18s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright6 18s ease infinite;
  -webkit-transition:left 1s ease;
}
.pic06 {
  width:870px;
  position:absolute;
}
.pic06 img { width:870px; }
#photo06-1 { left:-910px; }
#photo06-2 { left:  40px; }
#photo06-3 { left: 950px; }
#photo06-4 { left:1860px; }
#photo06-5 { left:2770px; }
#photo06-6 { left:3680px; }
#photo06-7 { left:4590px; }
#photo06-8 { left:5500px; }
/* スライド群のanimation */
@keyframes transtoright6 {
    0%      { left:     0px; } /* Start */
   11%      { left:     0px; } /* 2sec wait */
   16.67%   { left:  -910px; } /* 1sec 1->2 */
   27.78%   { left:  -910px; } /* 2sec wait */
   33.33%   { left: -1820px; } /* 1sec 2->3 */
   44.44%   { left: -1820px; } /* 2sec wait */
   50%      { left: -2730px; } /* 1sec 3->4 */
   61.11%   { left: -2730px; } /* 2sec wait */
   66.67%   { left: -3640px; } /* 1sec 4->5 */
   77.78%   { left: -3640px; } /* 2sec wait */
   83.33%   { left: -4550px; } /* 1sec 5->6 */
   94.44%   { left: -4550px; } /* 2sec wait */
   99.9999% { left: -5460px; } /* 1sec 6->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

/*--  横方向スライド 6枚分 --*/
#stage07 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 480px;
  background:#fefbf6;
  overflow: hidden;
}
#photo07 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 720px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright7 18s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright7 18s ease infinite;
  -webkit-transition:left 1s ease;
  /*
  ease：開始と完了を滑らかにする（初期値）
  linear：一定／ease-in：ゆっくり始まる／ease-out：ゆっくり終わる
  ease-in-out：ゆっくり始まってゆっくり終わる
  cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
  */
}
.pic07 {
  width:720px;
  position:absolute;
}
.pic07 img { width:720px; }
#photo07-1 { left:-635px; }
#photo07-2 { left: 115px; }
#photo07-3 { left: 865px; }
#photo07-4 { left:1615px; }
#photo07-5 { left:2365px; }
#photo07-6 { left:3115px; }
#photo07-7 { left:3865px; }
#photo07-8 { left:4615px; }

/* スライド群のanimation */
@keyframes transtoright7 {
    0%      { left:     0px; } /* Start */
   11%      { left:     0px; } /* 2sec wait */
   16.67%   { left:  -750px; } /* 1sec 1->2 */
   27.78%   { left:  -750px; } /* 2sec wait */
   33.33%   { left: -1500px; } /* 1sec 2->3 */
   44.44%   { left: -1500px; } /* 2sec wait */
   50%      { left: -2250px; } /* 1sec 3->4 */
   61.11%   { left: -2250px; } /* 2sec wait */
   66.67%   { left: -3000px; } /* 1sec 4->5 */
   77.78%   { left: -3000px; } /* 2sec wait */
   83.33%   { left: -3750px; } /* 1sec 5->6 */
   94.44%   { left: -3750px; } /* 2sec wait */
   99.9999% { left: -4500px; } /* 1sec 6->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

/*--  横方向スライド 4枚分 --*/
#stage08 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 480px;
  background:#fefbf6;
  overflow: hidden;
}
#photo08 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 720px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright8 12s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright8 12s ease infinite;
  -webkit-transition:left 1s ease;
  /*
  ease：開始と完了を滑らかにする（初期値）
  linear：一定／ease-in：ゆっくり始まる／ease-out：ゆっくり終わる
  ease-in-out：ゆっくり始まってゆっくり終わる
  cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
  */
}
.pic08 {
  width:720px;
  position:absolute;
}
.pic08 img { width:720px; }

#photo08-1 { left:-635px; }
#photo08-2 { left: 115px; }
#photo08-3 { left: 865px; }
#photo08-4 { left:1615px; }
#photo08-5 { left:2365px; }
#photo08-6 { left:3115px; }

/* スライド群のanimation */
@keyframes transtoright8 {
    0%      { left:     0px; } /* Start */
   16.67%   { left:     0px; } /* 2sec wait */
   25%      { left:  -750px; } /* 1sec 1->2 */
   41.67%   { left:  -750px; } /* 2sec wait */
   50%      { left: -1500px; } /* 1sec 2->3 */
   66.67%   { left: -1500px; } /* 2sec wait */
   75%      { left: -2250px; } /* 1sec 3->4 */
   91.67%   { left: -2250px; } /* 2sec wait */
   99.9999% { left: -3000px; } /* 1sec 4->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

/*--  横方向スライド 5枚分 --*/
#stage09 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 480px;
  background:#fefbf6;
  overflow: hidden;
}
#photo09 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 720px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright9 15s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright9 15s ease infinite;
  -webkit-transition:left 1s ease;
  /*
  ease：開始と完了を滑らかにする（初期値）
  linear：一定／ease-in：ゆっくり始まる／ease-out：ゆっくり終わる
  ease-in-out：ゆっくり始まってゆっくり終わる
  cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
  */
}
.pic09 {
  width:720px;
  position:absolute;
}
.pic09 img { width:720px; }
#photo09-1 { left:-635px; }
#photo09-2 { left: 115px; }
#photo09-3 { left: 865px; }
#photo09-4 { left:1615px; }
#photo09-5 { left:2365px; }
#photo09-6 { left:3115px; }
#photo09-7 { left:3865px; }

/* スライド群のanimation */
@keyframes transtoright9 {
    0%      { left:     0px; } /* Start */
   13.33%   { left:     0px; } /* 2sec wait */
   20%      { left:  -750px; } /* 1sec 1->2 */
   33.33%   { left:  -750px; } /* 2sec wait */
   40%      { left: -1500px; } /* 1sec 2->3 */
   53.33%   { left: -1500px; } /* 2sec wait */
   60%      { left: -2250px; } /* 1sec 3->4 */
   73.33%   { left: -2250px; } /* 2sec wait */
   80%      { left: -3000px; } /* 1sec 4->5 */
   93.33%   { left: -3000px; } /* 2sec wait */
   99.9999% { left: -3750px; } /* 1sec 5->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

/*--  横方向スライド 3枚分 --*/
#stage10 { /* スライドを表示するエリアの設定 */
  position: relative;
  width: 950px;
  height: 480px;
  background:#fefbf6;
  overflow: hidden;
}
#photo10 { /* 実際に表示する1枚の写真の設定 */
  position: absolute;
  width: 720px;
  transition:left 1s ease; /* 1秒で左にイージングする */
  animation:transtoright10 9s ease infinite; /* 待ち時間2秒、永久ループ */
  /* VendorPrefix */
  -webkit-animation: animation:transtoright10 9s ease infinite;
  -webkit-transition:left 1s ease;
  /*
  ease：開始と完了を滑らかにする（初期値）
  linear：一定／ease-in：ゆっくり始まる／ease-out：ゆっくり終わる
  ease-in-out：ゆっくり始まってゆっくり終わる
  cubic-bezier(数値, 数値, 数値, 数値)：3次ベジェ曲線のP1とP2を (x1, y1, x2, y2) で指定
  */
}
.pic10 {
  width:720px;
  position:absolute;
}
.pic10 img { width:720px; }

#photo10-1 { left:-635px; }
#photo10-2 { left: 115px; }
#photo10-3 { left: 865px; }
#photo10-4 { left:1615px; }
#photo10-5 { left:2365px; }

/* スライド群のanimation */
@keyframes transtoright10 {
    0%      { left:     0px; } /* Start */
   22.22%   { left:     0px; } /* 2sec wait */
   33.33%   { left:  -750px; } /* 1sec 1->2 */
   55.55%   { left:  -750px; } /* 2sec wait */
   66.67%   { left: -1500px; } /* 1sec 2->3 */
   88.89%   { left: -1500px; } /* 2sec wait */
   99.99%   { left: -2250px; } /* 1sec 3->1 */
  100%      { left:     0px; } /* 瞬時にLoop */
}

/*******************************************
 TOPページ サムネイルによる切替(SPより移植)
********************************************/
#crsl1-1, crsl1-2 {
    position: relative;
    width: 950px;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #fcfbf7;
    text-align:center;
}
.crs-inner {
    position: relative;
    overflow: hidden;
    margin-left: 47px;
    margin-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}
.crs > * {
  -webkit-transform: translateZ(0px);
}
.crs::-webkit-scrollbar {
  display: none;
  height: 0 !important;
}
.crs-open:checked + .crs-item {
    position: static;
    opacity: 1.0;
}
.crs-item {
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity 0.6s ease-out;
    transition: opacity 0.6s ease-out;
}
.crs-item img {
    display: block;
    height: auto;
    max-width: 100%;
}
.crs-b-t {
    /*width: auot;*/
    cursor: pointer;
    margin-left: 10px;
}
.crs-b-t:hover {
    color: #ffffff;
    margin-left: 10px;
}

/*********************************
 TOPページ 永久ループ用スライド
**********************************/
#movie_D {
  background:url(https://www.saka-hotel.com/rktn/images/top2/img_cuisine_gallery.jpg);
  background-position:0px 0px;
  width:950px;
  height:350px;
  cursor:pointer;
  position:relative;

  -webkit-animation: leftSlide 150s linear infinite;
}

/* left */
@-webkit-keyframes leftSlide {
  0%    { background-position:0px 0px;  }
  100%  { background-position:-3360px 0px;  }
}

/********************************************
 Roomページ 1個の画像にオンマウスでイメージを
*********************************************/
.RThmb   { /* ブロック全体 */
  width:856px;
  margin-left:47px;
  border:0px;
}
.RThmbL1 { /* 左ブロック黄色用 */
  float:left;
  border:0px;
}
.RThmbR1 { /* 右ブロック黄色用 */
  float:right;
  border:0px;
}
.RThmbL2 { /* 左ブロック緑用 */
  float:left;
  border:0px;
}
.RThmbR2 { /* 右ブロック緑用 */
  float:right;
  border:0px;
}
.RThmbL3 { /* 左ブロック紫用 */
  float:left;
  border:0px;
}
.RThmbR3 { /* 右ブロック紫用 */
  float:right;
  border:0px;
}
/* 以下 客室説明画像用 */
.RThmbL1b { /* 左ブロック黄色用 */
  float:left;
  border:0px;
}
.RThmbR1b { /* 右ブロック黄色用 */
  float:right;
  border:0px;
}
.RThmbL2b { /* 左ブロック緑用 */
  float:left;
  border:0px;
}
.RThmbR2b { /* 右ブロック緑用 */
  float:right;
  border:0px;
}
.RThmbL3b { /* 左ブロック紫用 */
  float:left;
  border:0px;
}
.RThmbR3b { /* 右ブロック紫用 */
  float:right;
  border:0px;
}


.RThmbL1F { /* 左ブロック黄色用 */
  float:left;
  width:428px;
  border:0px;
  background: url("https://www.saka-hotel.com/rktn/images/room2/bg1.jpg") no-repeat;
}
.RThmbL1F a img{ /* 左ブロック黄色用 */
  display: inline-block;
  transition: 0.2s ease-out;
  opacity: 1.0;
}
.RThmbL1F a:hover img { /* 左ブロック黄色用 */
  /*visibility: hidden;*/
  transition: 0.5s;
  opacity: 0.3;
}
.RThmbR1F { /* 左ブロック黄色用 */
  float:right;
  width:428px;
  border:0px;
  background: url("https://www.saka-hotel.com/rktn/images/room2/bg1.jpg") no-repeat;
}
.RThmbR1F a img { /* 左ブロック黄色用 */
  display: inline-block;
  transition: 0.2s ease-out;
  opacity: 1.0;
}
.RThmbR1F a:hover img { /* 左ブロック黄色用 */
  /*visibility: hidden;*/
  transition: 0.5s ;
  opacity: 0.3;
}

.RThmbL2F { /* 左ブロック緑用 */
  float:left;
  width:428px;
  border:0px;
  background: url("https://www.saka-hotel.com/rktn/images/room2/bg2.jpg") no-repeat;
}
.RThmbL2F a img { /* 左ブロック緑用 */
  display: inline-block;
  transition: 0.2s ease-out;
  opacity: 1.0;
}
.RThmbL2F a:hover img { /* 左ブロック緑用 */
  /*visibility: hidden;*/
  transition: 0.5s ;
  opacity: 0.3;
}
.RThmbR2F { /* 左ブロック緑用 */
  float:right;
  width:428px;
  border:0px;
  background: url("https://www.saka-hotel.com/rktn/images/room2/bg2.jpg") no-repeat;
}
.RThmbR2F a img { /* 左ブロック緑用 */
  display: inline-block;
  transition: 0.2s ease-out;
  opacity: 1.0;
}
.RThmbR2F a:hover img { /* 左ブロック緑用 */
  /*visibility: hidden;*/
  transition: 0.5s ;
  opacity: 0.3;
}

.RThmbL3F { /* 左ブロック紫用 */
  float:left;
  width:428px;
  border:0px;
  background: url("https://www.saka-hotel.com/rktn/images/room2/bg3.jpg") no-repeat;
}
.RThmbL3F a img { /* 左ブロック紫用 */
  display: inline-block;
  transition: 0.2s ease-out;
  opacity: 1.0;
}
.RThmbL3F a:hover img { /* 左ブロック紫用 */
  /*visibility: hidden;*/
  transition: 0.5s ;
  opacity: 0.3;
}
.RThmbR3F { /* 左ブロック紫用 */
  float:right;
  width:428px;
  border:0px;
  background: url("https://www.saka-hotel.com/rktn/images/room2/bg3.jpg") no-repeat;
}
.RThmbR3F a img { /* 左ブロック紫用 */
  display: inline-block;
  transition: 0.2s ease-out;
  opacity: 1.0;
}
.RThmbR3F a:hover img { /* 左ブロック紫用 */
  /*visibility: hidden;*/
  transition: 0.5s ;
  opacity: 0.3;
}


/*********************************
 TOPページ 最上部のクロスフェード
**********************************/
.sliderSHK{
    width:1190px;
    height:670px;
    margin:0 auto;
    position:relative;
}
.sliderSHK ul{
    margin:0;
    padding:0;
    list-style:none;
}
.sliderSHK ul li{
    width:1190px;
    height:670px;
    position:absolute;
    top:0;
    left:0;
    animation-iteration-count:infinite;
    animation-duration:56000ms; /* 56sec = 7sec * 8枚 */
}
.sliderSHK ul li:nth-child(1){ /*-1.5sec (前もって表示させておくため)*/
    animation-name:sliderSHK;
    animation-delay:-1500ms;
}
.sliderSHK ul li:nth-child(2){ /*-1.5sec + 7sec = 5.5sec */
    animation-name:sliderSHK;
    animation-delay:5500ms;
    opacity:0;
}
.sliderSHK ul li:nth-child(3){ /*-1.5sec + (7sec*2) = 12.5sec */
    animation-name:sliderSHK;
    animation-delay:12500ms;
    opacity:0;
}
 
.sliderSHK ul li:nth-child(4){ /*-1.5sec + (7sec*3) = 19.5sec */
    animation-name:sliderSHK;
    animation-delay:19500ms;
    opacity:0;
}

.sliderSHK ul li:nth-child(5){ /*-1.5sec + (7sec*4) = 26.5sec */
    animation-name:sliderSHK;
    animation-delay:26500ms;
    opacity:0;
}

.sliderSHK ul li:nth-child(6){ /*-1.5sec + (7sec*5) = 33.5sec */
    animation-name:sliderSHK;
    animation-delay:33500ms;
    opacity:0;
}

.sliderSHK ul li:nth-child(7){ /*-1.5sec + (7sec*6) = 40.5sec */
    animation-name:sliderSHK;
    animation-delay:40500ms;
    opacity:0;
}

.sliderSHK ul li:nth-child(8){ /*-1.5sec + (7sec*7) = 47.5sec */
    animation-name:sliderSHK;
    animation-delay:47500ms;
    opacity:0;
}

@keyframes sliderSHK{
    0%{
        opacity:0;
    }
    2.68%{/* 100% / 56sec * 1.5sec=2.68% */  /* 基：100/24*5sec=20.83% */
        opacity:1;
    }
    12.5%{/* 100% / 56sec * 7sec=12.5% */  /* 基：100/24*8sec=33.33% */
        opacity:1;
    }
    15.18%{/* 100% / 56sec * 8.5sec=15.18% */  /* 基：100/24*11sec=45.83% */
        opacity:0;
    }
    100%{ /* 基：100/24*24sec=100% /
        opacity:0;
    }   
}