<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/*
- SP/PC切り換え
- ページ全体スタイル
- PC版ロゴ変更
- スタートボタン
- フェードインアニメ
- 注意文
- PC用スライドCSS

- 背景・背景パターン・ボタンカラーバリエーション

&lt;article&gt;に下記クラス付与で色など変更可能

  - 背景色
  - bgc_lite-pink（デフォルト）
  - bgc_pink
  - bgc_lite-purple
  - bgc_purple
  - bgc_lite-orange
  - bgc_orange
  - bgc_lite_blue
  - bgc_blue
  - bgc_lite_yellow
  - bgc_yellow
  - bgc_line_green
  - bgc_green

 - 背景パターン
  - bgpt_heart（デフォルト）
  - bgpt_triangle

 - ボタン色
  - btn_orange（デフォルト）
  - btn_green
  - btn_purple

&lt;btn&gt;に下記クラス付与で色など変更可能

- icon
  - icon_dual（両対応・デフォルト）
  - icon_sp（スマホ対応）

*/

/* ==================================================
 特集ページレイアウトCSS
================================================== */
/* SPPC表示切り換え
------------------------------------------- */
#article .pc {
  display: none;
}

@media screen and (min-width: 767px) {
  #article .pc {
    display: block;
  }
  #article .sp {
    display: none;
  }
}

/* ローディング時のアニメーション
------------------------------------------- */
.fadeInDown {
  animation-name: fadeInDown 2s both;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ロゴ・ヘッダー幅調整
------------------------------------------- */
@media screen and (min-width: 767px) {
  #lp_header_area {
    height: 60px;
  }

  #lp_header_area li#logo {
    width: 214px;
    padding-top: 26px;
    background-size: 214px 26px;
  }
}

/* ページ全体スタイル
------------------------------------------- */
#article {
  position: relative;
  background: linear-gradient(
    135deg,
    rgb(255, 178, 178) 0%,
    rgb(255, 178, 191) 100%
  );
}

/* 背景カラーバリエーション */
#article.bgc_pink {
  background: linear-gradient(
    135deg,
    rgb(255, 127, 127) 0%,
    rgb(255, 127, 149) 100%
  );
}

#article.bgc_lite-purple {
  background: linear-gradient(
    135deg,
    rgb(157, 127, 255) 0%,
    rgb(205, 127, 255) 100%
  );
}

#article.bgc_purple {
  background: #ac1a0e;
}

#article.bgc_lite-orange {
  background: linear-gradient(
    135deg,
    rgb(255, 148, 110) 0%,
    rgb(255, 178, 136) 100%
  );
}

#article.bgc_orange {
  background: linear-gradient(
    135deg,
    rgb(255, 127, 102) 0%,
    rgb(255, 156, 102) 100%
  );
}

#article.bgc_lite_blue {
  background: linear-gradient(
    135deg,
    rgb(127, 206, 255) 0%,
    rgb(127, 238, 255) 100%
  );
}

#article.bgc_blue {
  background: linear-gradient(
    135deg,
    rgb(76, 187, 255) 0%,
    rgb(76, 231, 255) 100%
  );
}

#article.bgc_lite_yellow {
  background: linear-gradient(
    135deg,
    rgb(255, 200, 103) 0%,
    rgb(255, 215, 120) 100%
  );
}

#article.bgc_yellow {
  background: linear-gradient(
    135deg,
    rgb(255, 187, 69) 0%,
    rgb(255, 213, 86) 100%
  );
}

#article.bgc_line_green {
  background: linear-gradient(
    135deg,
    rgb(128, 232, 171) 0%,
    rgb(100, 223, 191) 100%
  );
}

#article.bgc_green {
  background: linear-gradient(
    135deg,
    rgb(65, 217, 128) 0%,
    rgb(61, 204, 168) 100%
  );
}

/* ----- 内側背景 ----- */
#article .articleInner {
  background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article/2102_01/bg_02.png) repeat
    center top;
}

@media screen and (min-width: 767px) {
  #article {
    width: 100%;
    overflow: hidden;
  }

  /* ----- PC背景 ----- */
  #article .scroll-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% + 150px);
    width: calc(100% + 75px);
    z-index: 0;
    background: url(/img/contents/lp/article2102_02/bg_mainbg_adult.png) center center repeat;
    animation: anime-topBg 15s linear infinite;
  }

  #article.bgpt_triangle .scroll-bg {
    background: url(https://www.nijiyome.com/nijiyome-img/img/contents/lp/article/2012_02/bg_mainbg.png)
      center center repeat;
  }

  /* 内側の表示サイズと影色 */
  #article .articleInner {
    position: relative;
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    box-shadow: 0px 0px 6px -1px #000;
  }
}

/* media以下にkeyframeを置くとIE11で動作しないため外だし */

@keyframes anime-topBg {
  0% {
    transform: translate(-158px, 0);
    transform: translate(-158px, 0);
  }
  100% {
    transform: translate(0, -175px);
    transform: translate(0, -175px);
  }
}

/* section別スタイル
------------------------------------------- */
#article section {
  position: relative;
}

#article [class*="box_"] {
  text-align: center;
  margin-top: 10vw;
}

/* ----- ヘッダー画像 ----- */
#article .header img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ----- バナー画像 ----- */
#article [class*="box_"] img {
  width: 94%;
  height: auto;
}

@media screen and (min-width: 767px) {
  #article [class*="box_"] {
    margin-top: 80px;
  }

  #article [class*="box_"] img {
    width: 91.8%;
    max-width: 940px;
    height: auto;
    margin: 0 auto;
  }

  #article [class*="box_"] h2 {
    position: relative;
    width: 91.8%;
    max-width: 940px;
    margin: 0 auto;
    overflow: hidden;
  }

  /* ----- バナーhover時のアニメーション ----- */
  #article [class*="box_"] h2::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 100%
    );
    transform: skewX(-25deg);
    content: "";
  }

  #article [class*="box_"] h2:hover::before {
    animation: shine 0.75s;
  }
}

/* media以下にkeyframeを置くとIE11で動作しないため外だし */
@keyframes shine {
  100% {
    left: 125%;
  }
}

/* 各ゲームスタートボタン
------------------------------------------- */
#article [class^="box_0"] .btn {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  display: block;
  margin: 0 auto;
  margin-right: 10%;
  width: 65%;
  padding: 4vw 0;
  margin-top: 6%;

  background: #5f7aff;
  box-shadow: 0px 5px 0px 0px #3950c1;
  background-size: contain;
  border-radius: 2vw;
  color: #fff;
  animation: scaling 2s ease 0.2s infinite both;
  font-size: 5vw;
}



/* ボタンカラーバリエーション */
#article.btn_green [class^="box_0"] .btn {
  background: linear-gradient(
    135deg,
    rgb(55, 219, 52) 0%,
    rgb(1, 193, 60) 100%
  );
  box-shadow: 0px 5px 0px 0px rgb(30, 161, 39);
}

#article.btn_purple [class^="box_0"] .btn {
  background: #ca200d;
  box-shadow: 0px 5px 0px 0px #750603;
}

/* ----- hover ----- */
#article [class^="box_0"] .btn:hover,
#article [class^="box_0"] .btn:active {
  background:#750603;
  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.2) inset;
  top: 5px;
}

/* hoverボタンカラーバリエーション */
#article.btn_green [class^="box_0"] .btn:hover,
#article.btn_green [class^="box_0"] .btn:active {
  background: linear-gradient(
    135deg,
    rgba(255, 168, 30, 0.99608) 0%,
    rgb(255, 184, 47) 100%
  );
  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.2) inset;
  top: 5px;
}

/* hoverボタンカラーバリエーション */
#article.btn_purple [class^="box_0"] .btn:hover,
#article.btn_purple [class^="box_0"] .btn:active {
  background: #5f0200;
  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.2) inset;
  top: 5px;
}

/* ----- 対応アイコン ----- */
#article [class^="box_0"] .btn::before {
  display: inline-block;
  position: absolute;
  left: -16vw;
  top: -1vw;
  width: 13.8vw;
  height: 14.58vw;
  background: url(/img/contents/lp/article2102_02/icon_dual.png)
    no-repeat;
  background-size: contain;
  content: "";
}

#article [class^="box_0"] .btn.icon_pc::before {
  background: url(/img/contents/lp/article2102_02/icon_pc.png) no-repeat;
  background-size: contain;
}

#article [class^="box_0"] .btn.icon_pc_android::before {
    background: url(/img/contents/lp/article2102_02/icon_pc_android.png) no-repeat;
    background-size: contain;
  }

#article [class^="box_0"] .btn:hover::before,
#article [class^="box_0"] .btn:active::before {
  margin-top: -5px;
}

@keyframes scaling {
  0% {
    transform: scale(1);
  }
  5% {
    transform: scale(1);
  }
  10% {
    transform: scale(0.95);
  }
  15% {
    transform: scale(1);
  }
  20% {
    transform: scale(0.98);
  }
  25%,
  100% {
    transform: scale(1);
  }
}

@media screen and (min-width: 767px) {
  #article [class^="box_0"] .btn {
    width: 450px;
    padding: 28px 0;
    font-size: 2em;
    border-radius: 10px;
    margin: 50px auto 0;
    margin-left: 30%;
  }

  #article [class^="box_0"] .btn::before {
    width: 102px;
    height: 107px;
    top: -10px;
    left: -140px;
  }

  #article [class^="box_0"] .btn.icon_sp::before {
    width: 94px;
    height: 116px;
  }
}

/* アテンション文
-------------------------------------------------- */
#article .article_attention_wrap {
  margin: 10vw auto 0;
}

#article .article_attention_wrap &gt; div {
  margin: 5vw auto 0;
}

#article .article_attention_wrap &gt; div:first-child {
  margin: 0 auto;
}

#article .article_attention {
  display: block;
  width: 90%;
  position: relative;
  padding-bottom: 20px;
  color: #222;
  text-align: center;
}

/* テキスト */
#article .article_attention p,
#article .article_attention li {
  font-size: 2.8vw;
  text-align: left;
  line-height: 1.6;
  width: 100%;
  position: relative;
}

#article .article_attention p {
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

#article .article_attention p:before,
#article .article_attention li:before {
  content: "※";
  left: -1.3em;
  position: absolute;
}

/* キャンペーン用表示 */
#article .article_attention.campaign {
  background: rgba(20, 0, 0, 0.7);
  border: solid 1px #ccc;
  text-align: center;
  width: 93%;
  border-radius: 10px;
  margin: 10vw auto 0;
  padding: 5vw 0;
  color: #eee;
}

#article .article_attention.campaign &gt; * {
  margin-top: 3%;
}

#article .article_attention.campaign &gt; *:first-child {
  margin-top: 0;
}

#article .article_attention.campaign h3 {
  text-align: center;
  font-size: 4vw;
}

#article .article_attention.campaign p {
  text-align: center;
}

#article .article_attention.campaign p:before {
  content: "";
}

#article .article_attention ul {
  border-top: 1px dashed #ccc;
  width: 90%;
  margin: 0 auto;
  padding-top: 3%;
}

#article .article_attention li {
  width: 90%;
  margin: 0 auto;
  font-size: 2.5vw;
}

@media screen and (min-width: 767px) {
  #article .article_attention_wrap {
    margin: 90px auto 0;
  }

  #article .article_attention_wrap &gt; div {
    margin: 45px auto 0;
  }

  #article .article_attention p,
  #article .article_attention li {
    font-size: 14px;
  }

  #article .article_attention p {
    width: auto;
    font-size: 15px;
    display: inline-block;
  }

  #article .article_attention.campaign {
    width: 85%;
    max-width: 800px;
    padding: 30px 30px;
    margin: 80px auto 0;
  }

  #article .article_attention.campaign h3 {
    font-size: 24px;
  }

  #article .article_attention.campaign p {
    font-size: 16px;
  }
  #article .article_attention.campaign ul {
    width: 90%;
  }
}

/* SP版用他のおすすめゲーム用スタイル上書き
-------------------------------------------------- */
.main_lead_01 {
  margin: 0;
}

/* PC版用他の人気ゲーム用スタイル
-------------------------------------------------- */
.recommendWrap01,
.lpBtmWrap01 {
  padding: 20px 0;
  background: #e5e5e5;
  overflow: hidden;
}

.recommendWrap01.lpBtmWrap {
  border-top: 1px solid #999;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) inset;
}

.section01 {
  margin: 0 0 20px;
}

.section01:last-child {
  margin: 0;
}

.recommendWrap01 .section01 {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.cornerWrap01 {
  border-radius: 4px;
}

.cornerWrap01 .title01 {
  background: #4c4b4b;
  font-weight: 700;
  color: #fff;
  padding: 8px 20px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-size: 100%;
  font-family: Helvetica Neue, verdana, Hiragino Sans, Hiragino Kaku Gothic ProN,
    Meiryo, sans-serif;
}

.cornerContents01 {
  position: relative;
  border: 1px solid #ccc;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.recommendWrap01 .cornerContents01 {
  background: #fff;
  padding: 20px;
  text-align: center;
}

.appIndexMainSlideWrap01 {
  padding: 15px 10px 20px;
  background: #222;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cornerContents01 .appIndexMainSlideWrap01 {
  margin: 0 -1px -5px;
}

.recommendWrap01 .cornerContents01 .appIndexMainSlideWrap01 {
  background: #e5e5e5;
  border-radius: 6px;
}

.appIndexMainSlide01 {
  width: 720px;
  overflow: hidden;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
}

.appIndexMainSlide01 {
  width: 100%;
  max-width: 720px;
  overflow: hidden;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
}

.appIndexMainSlide01 ul {
  width: 9999px;
  display: block;
  min-height: 1%;
}

.appIndexMainSlide01 ul li {
  float: left;
}

/* 矢印 */

.appIndexSlidePrev01,
.appIndexSlideNext01 {
  opacity: 0;
  position: absolute;
  top: 50%;
  z-index: 20;
  margin: -20px 0 0;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.appIndexSlidePrev01 {
  left: 5px;
  transform: translateX(5px);
}

.appIndexSlideNext01 {
  right: 5px;
  transform: translateX(-5px);
}

.appIndexMainSlide01:hover .appIndexSlidePrev01,
.appIndexMainSlide01:hover .appIndexSlideNext01 {
  opacity: 1;
}

.appIndexMainSlide01:hover .appIndexSlidePrev01 {
  transform: translateX(0);
}

.appIndexMainSlide01:hover .appIndexSlideNext01 {
  transform: translateX(0);
}

.appIndexSlidePrev01:hover,
.appIndexSlideNext01:hover {
  background: rgba(255, 255, 255, 0.9);
}

.appIndexSlidePrev01:before,
.appIndexSlideNext01:before {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -8px 0 0 -8px;
  box-shadow: 2px 2px 0 #000 inset;
  content: "";
}

.appIndexSlidePrev01:before {
  transform: rotate(-45deg);
  margin: -8px 0 0 -4px;
}

.appIndexSlideNext01:before {
  transform: rotate(135deg);
  margin: -7px 0 0 -10px;
}

.appIndexSlidePrev01 i,
.appIndexSlideNext01 i {
  display: none;
}
</pre></body></html>