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

/* 詳細ページ
--------------------------------------------------------- */
/* 上部のスタートボタン 位置調整 */
.appTopMainimg01 .appTopMainimgIn01 .btn {
  position: absolute;
  top: 135px;
  right: 0;
}

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

.webp .appTopMainimg01 .appTopMainimgIn01 .btn a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/btn_top_start01.webp);
}

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

.webp .appTopMainimg01 .appTopMainimgIn01 .btn a::before {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/btn_top_start01.webp);
}

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

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

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

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

.webp .appTopMainimg01 {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/img_top_mainimg01.webp);
}

/* ナビゲーションボタン画像 */
#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(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/btn_top_navi01.png) no-repeat 0 0;
  height: 54px;
}

.webp #main .appTopNavi01 li[class^='navi'] a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/btn_top_navi01.webp);
}

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

.webp #main .appTopNavi01 li[class^='navi'] a::before {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/btn_top_navi01.webp);
}

/* トップ */
#main .appTopNavi01 li.navi01 a,
#main .appTopNavi01 li.navi01 a:hover,
#main .appTopNavi01 li.navi01 a:active,
#main .appTopNavi01 li.navi01 a::before {
  width: 184px;
  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: 180px;
  background-position-x: -184px;
}

/* 公式コミュニティ */
#main .appTopNavi01 li.navi03 a,
#main .appTopNavi01 li.navi03 a:hover,
#main .appTopNavi01 li.navi03 a:active,
#main .appTopNavi01 li.navi03 a::before {
  width: 180px;
  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: -542px;
}

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


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

/* ナビゲーションボタンの現在地を示す三角形の位置 */
.appTopContent01#appContents01:before{ left: 82px; }
.appTopContent01#appContents02:before{ left: 260px; }
.appTopContent01#appContents03:before{ left: 441px; }
.appTopContent01#appContents04:before{ left: 620px; }
.appTopContent01#appContents05:before{ left: 800px; }

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

.webp .appTopTitle01 {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/bg_top_title01.webp);
}

/* 横長ボタン */
.appTopPlayBtn01 a {
  position: relative;
  height: 88px;
  width: 414px;
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/btn_top_start02.png) no-repeat 0 0 / cover;
}

.webp .appTopPlayBtn01 a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/btn_top_start02.webp);
}

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

.webp .appTopPlayBtn01 a::before {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app801/details/btn_top_start02.webp);
}

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

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

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

.appTopContent01 {
  margin: 3px auto 0;
}

/* 見出し */
.appTopTitle01 {
  line-height: 41px;
  color: #fff;
  text-shadow: none;
}

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