@charset "UTF-8";
/*
 * app584
 */

/* 詳細ページ
--------------------------------------------------------- */
/* 上部のスタートボタン 位置調整 */
.appTopMainimg01 .appTopMainimgIn01 .btn {
  position: absolute;
  top: 120px;
  right: 75px;
  -webkit-animation: yura 2.5s ease-in-out infinite;
  animation: yura 2.5s ease-in-out infinite;
}

@-webkit-keyframes yura {
  0% {-webkit-transform: translate3d(0,-5px,0);}
  50% {-webkit-transform: translate3d(0,5px,0);}
  100% {-webkit-transform: translate3d(0,-5px,0);}
}

@keyframes yura {
  0% {transform: translate3d(0,-5px,0);}
  50% {transform: translate3d(0,5px,0);}
  100% {transform: translate3d(0,-5px,0);}
}


.appTopMainimg01 .appTopMainimgIn01 .btn a {
  width: 213px;
  padding-top: 213px;
  height: 0;
  position: relative;
  background: url(../../../../img/contents_pc/apps/app612/details/btn_top_start01.png) no-repeat 0 0;
  z-index: 100;
}

.appTopMainimg01 .appTopMainimgIn01 .btn a::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 213px;
  height: 213px;
  background: url(../../../../img/contents_pc/apps/app612/details/btn_top_start01.png) no-repeat;
  background-position: 0 -220px;
  opacity: 0;
  transition: opacity .3s;
}

/* hover */
.appTopMainimg01 .appTopMainimgIn01 .btn a:hover::before {
  opacity: 1;
}

/* 招待の場合の表示 */
.appTopMainimg01 .appTopMainimgIn01 .btn.invite a {
  background-position: 0 -440px;
}

.appTopMainimg01 .appTopMainimgIn01 .btn.invite a::before {
  background-position: 0 -660px;
}

/* メインイメージ画像 */
.appTopMainimg01 {
  background: url(../../../../img/contents_pc/apps/app612/details/img_top_mainimg01.jpg) no-repeat center top;
}

/* ナビゲーションボタン画像 */
#main .appTopNavi01 {
  display: flex;
  justify-content: center;
}

#main .appTopNavi01 li[class^='navi'] {
  width: auto;
  float: none;
}

#main .appTopNavi01 li[class^='navi'] a {
  position: relative;
  background: url(../../../../img/contents_pc/apps/app612/details/btn_top_navi01.png) no-repeat 0 0;
  height: 52px;
}

#main .appTopNavi01 li[class^='navi'] a::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: url(../../../../img/contents_pc/apps/app612/details/btn_top_navi01.png) no-repeat;
  background-position-y: -54px; 
  opacity: 0;
  transition: opacity .3s;
}

/* トップ */
#main .appTopNavi01 li.navi01 a,
#main .appTopNavi01 li.navi01 a:hover,
#main .appTopNavi01 li.navi01 a:active,
#main .appTopNavi01 li.navi01 a::before {
  width: 185px;
  background-position-x: 0px;
}

/* ギャラリー */
#main .appTopNavi01 li.navi02 a,
#main .appTopNavi01 li.navi02 a:hover,
#main .appTopNavi01 li.navi02 a:active,
#main .appTopNavi01 li.navi02 a::before {
  width: 178px;
  background-position-x: -185px;
}

/* 公式コミュニティ */
#main .appTopNavi01 li.navi03 a,
#main .appTopNavi01 li.navi03 a:hover,
#main .appTopNavi01 li.navi03 a:active,
#main .appTopNavi01 li.navi03 a::before {
  width: 178px;
  background-position-x: -363px;
}

/* 対応環境 */
#main .appTopNavi01 li.navi04 a,
#main .appTopNavi01 li.navi04 a:hover,
#main .appTopNavi01 li.navi04 a:active,
#main .appTopNavi01 li.navi04 a::before {
  width: 178px;
  background-position-x: -541px;
}

/* サポート */
#main .appTopNavi01 li.navi05 a,
#main .appTopNavi01 li.navi05 a:hover,
#main .appTopNavi01 li.navi05 a:active,
#main .appTopNavi01 li.navi05 a::before {
  width: 185px;
  background-position-x: -719px;
}

/* hover active */
#main .appTopNavi01 li[class^='navi'] a.active::before,
#main .appTopNavi01 li[class^='navi'] a:hover::before {
  opacity: 1;
}

/* 各タイトルの背景画像 */
.appTopTitle01 {
  background: url(../../../../img/contents_pc/apps/app612/details/bg_top_title01.png) no-repeat left top;
  width: 810px;
}

/* 横長ボタン */
.appTopPlayBtn01 a {
  position: relative;
  background: url(../../../../img/contents_pc/apps/app612/details/btn_top_start02.png) no-repeat 0 0;
}

.appTopPlayBtn01 a::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../../../img/contents_pc/apps/app612/details/btn_top_start02.png) no-repeat 0 0;
  background-position: 0px -96px;
  opacity: 0;
  transition: opacity .3s;
}

/* hover */
.appTopPlayBtn01 a:hover::before {
  opacity: 1;
}

/* 招待の場合の表示 */
.appTopPlayBtn01.invite a {
  background-position: 0 -192px;
}

.appTopPlayBtn01.invite a::before {
  background-position: 0 -288px;
}

.appTopContent01 {
  margin: 3px auto 0;
}

/* 見出し */
.appTopTitle01 {
  /* text-shadow: 0px 0px 5px rgba(255, 255, 255, 1); */ /* 白地以外 */
  /* color: #300; */
  padding-left: 15px;
  line-height: 39px;
  color: #fff;
}

/* common修正 */
.appTopSupportBtn01 .btnType02 a > span span {
  padding: 0;
}