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

/* 詳細ページ
--------------------------------------------------------- */
/* 上部のスタートボタン 位置調整 */
.appTopMainimg01 .appTopMainimgIn01 .btn {
  position: absolute;
  top: 150px;
  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/app778/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/app778/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/app778/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/app778/details/btn_top_start01.webp) ;
}

/* 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(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app778/details/img_top_mainimg01.jpg) no-repeat center top;
}

.webp .appTopMainimg01 {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app778/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/app778/details/btn_top_navi01.png) no-repeat 0 0;
  height: 52px;
}

.webp #main .appTopNavi01 li[class^='navi'] a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app778/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/app778/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/app778/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: 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: 179px;
  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: 184px;
  background-position-x: -719px;
}


/* 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/app778/details/bg_top_title01.png) no-repeat left top;
  width: 810px;
}

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

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

.webp .appTopPlayBtn01 a {
  background-image: url(https://www.nijiyome.com/nijiyome-img/img/contents_pc/apps/app778/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/app778/details/btn_top_start02.png) no-repeat 0 0;
  background-position: 0px -96px;
  opacity: 0;
  transition: opacity .3s;
}

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

/* 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 {
  padding-left: 35px;
  line-height: 37px;
  color: #fff;
  text-shadow: none;
}

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