@charset "utf-8";

/* ==================================================
  LPページ 共通CSS
================================================== */
/* --------------------------------------------------
  デフォルト
-------------------------------------------------- */
html {
  height: 100%;
}

body {
  position: relative;
  color: #333333;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #3b3b3b;
  font-size: 14px/1.231;
  font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R', 'Droid Sans', メイリオ, 'sans-serif';
  -webkit-text-size-adjust: none;
}

input[type='submit'] {
  -webkit-tap-highlight-color: rgba(232, 76, 128, 0.2);
}
a {
  color: #4c83e8;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(232, 76, 128, 0.2);
}

/* --------------------------------------------------
  レイアウト
-------------------------------------------------- */
#container {
  overflow: hidden;
  position: relative;
}

.layout_hold {
  overflow-x: hidden;
  position: absolute;
  left: 0;
  width: 100%;
}

/* --------------------------------------------------
  ヘッダ
-------------------------------------------------- */
#lp_header_area {
  display: flex;
  align-items: center;
  width: 100%;
  height: 45px;
  margin-top: -45px;
  box-sizing: border-box;
  background: #fff;
  padding: 0 15px;
}

/* ロゴ */
#lp_header_area li#logo {
  display: block;
  overflow: hidden;
  width: 148px;
  height: 0;
  padding-top: 18px;
  background: url(../../../img/contents/logo_01.png) no-repeat 0 0;
  background-size: 148px 18px;
}

/* --------------------------------------------------
  メイン
-------------------------------------------------- */
#lp_wrapper {
  background: #ffffff;
  -webkit-box-shadow: 0 1px 3px rgba(7, 0, 2, 0.35), inset 0 1px 1px rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 3px rgba(7, 0, 2, 0.35), inset 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* 人気ゲーム
--------------------------------------------------------- */
.lp_inner_01 {
  line-height: 1.5;
  padding-bottom: 15px;
}

.app_box_01 {
  width: 320px;
  margin: 0 auto;
  padding-top: 12px;
}
.app_box_01:nth-last-of-type(1) {
  padding-bottom: 12px;
}
.app_box_01 img {
  -moz-box-shadow: 0 2px 2px rgba(7, 0, 2, 0.5);
  -webkit-box-shadow: 0 2px 2px rgba(7, 0, 2, 0.5);
  box-shadow: 0 2px 2px rgba(7, 0, 2, 0.5);
  vertical-align: bottom;
}
.app_box_01 p {
  margin: 3px 8px 0;
}
.app_box_01 p a {
  font-weight: bold;
  font-size: 14px;
}

#popular_game_01 .app_box_01 p a {
  color: #70a2ff;
}

.lead_icon {
  display: inline-block;
  width: 26px;
  height: 25px;
  vertical-align: top;
  background: url(../../../img/contents/pf_icon_white_01.png) no-repeat;
  -webkit-background-size: 26px 550px;
  -moz-background-size: 26px 550px;
  -o-background-size: 26px 550px;
  -ms-background-size: 26px 550px;
  background-size: 26px 550px;
}

.lead_icon.icon_note        { background-position: left top; margin: 3px 0 0 0; }
.lead_icon.icon_game        { background-position: left -25px; margin: 3px 4px 0 0; }
.lead_icon.icon_community   { background-position: left -50px; margin: 3px 4px 0 0; }
.lead_icon.icon_coin        { background-position: left -75px; margin: 3px 7px 0 0; }
.lead_icon.icon_talk        { background-position: left -100px; margin: 3px 3px 0 0; }
.lead_icon.icon_friend      { background-position: left -125px; margin: 3px 6px 0 0; }
.lead_icon.icon_diary       { background-position: left -150px; margin: 3px 3px 0 0; }
.lead_icon.icon_foot        { background-position: left -175px; margin: 4px 3px 0 0; }
.lead_icon.icon_heart       { background-position: left -200px; margin: 3px 0 0 0; }
.lead_icon.icon_profile     { background-position: left -225px; margin: 3px 3px 0 0; }
.lead_icon.icon_mail        { background-position: left -250px; margin: 3px 3px 0 0; }
.lead_icon.icon_setting     { background-position: left -275px; margin: 3px 3px 0 0; }
.lead_icon.icon_fav         { background-position: left -300px; margin: 4px 3px 0 0; }
.lead_icon.icon_topic       { background-position: left -325px; margin: 3px 3px 0 0; }
.lead_icon.icon_search      { background-position: left -350px; margin: 3px 3px 0 0; }
.lead_icon.icon_fav_game    { background-position: left -375px; margin: 2px 5px 0 0; }
.lead_icon.icon_pop_game    { background-position: left -375px; margin: 5px 5px 0 0; }
.lead_icon.icon_before_game { background-position: left -400px; margin: 3px 3px 0 0; }
.lead_icon.icon_present     { background-position: left -425px; margin: 3px 0 0 0; }
.lead_icon.icon_pict        { background-position: left -450px; margin: 8px 4px 0 0; }
.lead_icon.icon_pr          { background-position: left -475px; margin: 3px 4px 0 0; }
.lead_icon.icon_now         { background-position: left -500px; margin: 7px 4px 0 0; }
.lead_icon.icon_twitter     { background-position: left -525px; margin: 3px 4px 0 0; }

/* 見出し */

div.main_lead_01 h2 {
  border-top: 1px solid #f993b6;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 -1px 1px rgba(7, 0, 2, 0.4);
  height: 40px;
  line-height: 40px;
  padding: 0 8px;
  background: url(../../../img/contents/lp/bg_lead_01.png) no-repeat top center #ee5a8b;
  -webkit-background-size: 304px 40px;
  -moz-background-size: 304px 40px;
  -o-background-size: 304px 40px;
  -ms-background-size: 304px 40px;
  background-size: 304px 40px;
}

#popular_game_01 div.main_lead_01 {
  border-top: 1px solid #8e8e8e;
  border-bottom: 1px solid #8e8e8e;
  height: 100%;
  padding: 0;
}

#popular_game_01 div.main_lead_01 div {
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

#popular_game_02 div.main_lead_01 {
  border-top: 1px solid #ee5a8b;
  border-bottom: 1px solid #ee5a8b;
}

#popular_game_02 div.main_lead_01 div {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

#popular_game_01 .lp_inner_01 {
  background: url(../../../img/contents/lp/bg_lp_game_01.png) repeat;
  -webkit-background-size: 200px 200px;
  -moz-background-size: 200px 200px;
  -o-background-size: 200px 200px;
  -ms-background-size: 200px 200px;
  background-size: 200px 200px;
}

#popular_game_02 .lp_inner_01 {
  background: url(../../../img/contents/lp/bg_lp_game_02.png) repeat;
  -webkit-background-size: 200px 200px;
  -moz-background-size: 200px 200px;
  -o-background-size: 200px 200px;
  -ms-background-size: 200px 200px;
  background-size: 200px 200px;
}

#game_event_01 div.main_lead_01 h2 {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  font-size: 18px;
  font-weight: bold;
  color: #e5e5e5;
  text-shadow: 0 -1px 1px rgba(7, 0, 2, 0.8);
  height: 40px;
  line-height: 40px;
  padding: 0 8px;
  background: #313131;
  -moz-box-shadow: 0 1px 3px rgba(7, 0, 2, 0.35), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  -webkit-box-shadow: 0 1px 3px rgba(7, 0, 2, 0.35), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  box-shadow: 0 1px 3px rgba(7, 0, 2, 0.35), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

/* おすすめゲーム スライドバナー
------------------------------------------------------------ */
.center_banner {
  display: block;
  width: 100%;
  text-align: center;
  padding: 8px 0 3px;
}

/* 全年齢ページ JS指定上書き */
.type_general .center_banner .sls-pagination a:hover,
.type_general .center_banner .sls-pagination a.current {
  background: #73c8d4 !important;
}

/* --------------------------------------------------
  フッタ
-------------------------------------------------- */
#lp_footer_area {
  text-align: center;
}

#lp_footer_area #copyright {
  display: block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background-image: -moz-linear-gradient(bottom, #3b3b3b 0%, #2f2f2f 100%);
  background-image: -o-linear-gradient(bottom, #3b3b3b 0%, #2f2f2f 100%);
  background-image: -webkit-linear-gradient(bottom, #3b3b3b 0%, #2f2f2f 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#3b3b3b), to(#2f2f2f));
  background-image: linear-gradient(bottom, #3b3b3b 0%, #2f2f2f 100%);
  background-color: #2f2f2f;
  border-top: 1px solid #484848;
}

#lp_footer_area #copyright small {
  display: block;
  margin: 0 auto;
  font-size: 12px;
  color: #ededed;
}

/* --------------------------------------------------
  汎用
-------------------------------------------------- */
.hide {
  display: none;
}

/*  汎用ボタンボックス
--------------------------------------------------------- */
.more_link {
  background-color: #f9f7f7;
  background-image: -moz-linear-gradient(bottom, #dfdfdf 0%, #dbdbdb 100%);
  background-image: -o-linear-gradient(bottom, #dfdfdf 0%, #dbdbdb 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#dfdfdf), to(#dbdbdb));
  background-image: -webkit-linear-gradient(bottom, #dfdfdf 0%, #dbdbdb 100%);
  background-image: linear-gradient(bottom, #dfdfdf 0%, #dbdbdb 100%);
  border-top: 1px solid #f6f6f6;
  text-align: right;
}

.more_link a {
  display: block;
  color: #4b4b4b;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background: url(../../../img/contents/icon_link_01.png) no-repeat right center;
  -webkit-background-size: 19px 14px;
  -moz-background-size: 19px 14px;
  -o-background-size: 19px 14px;
  -ms-background-size: 19px 14px;
  background-size: 19px 14px;
  padding: 16px 28px 16px 0;
}

/* ボックスシャドウ汎用
--------------------------------------------------------- */
.main_box_shadow {
  background-color: #fbfbfb;
  -moz-box-shadow: 0 1px 3px rgba(7, 0, 2, 0.35);
  -webkit-box-shadow: 0 1px 3px rgba(7, 0, 2, 0.35);
  box-shadow: 0 1px 3px rgba(7, 0, 2, 0.35);
}

/* 文字揃え
--------------------------------------------------------- */
.t_align_l { text-align: left; }
.t_align_c { text-align: center; }
.t_align_r { text-align: right; }

.v_align_t { vertical-align: top !important; }
.v_align_m { vertical-align: middle !important; }
.v_align_b { vertical-align: bottom !important; }

/* インデント
--------------------------------------------------------- */
.indent_01 {
  text-indent: -1em;
  padding-left: 1em;
}
.indent_01 span {
  padding-right: 2px;
}

/* フォントサイズ
--------------------------------------------------------- */
.fs10 { font-size: 10px !important; }
.fs12 { font-size: 12px !important; }
.fs14 { font-size: 14px !important; }
.fs16 { font-size: 16px !important; }
.fs18 { font-size: 18px !important; }

/* 強調
--------------------------------------------------------- */
.text_bold_none { font-weight: normal !important; }
.text_bold      { font-weight: bold !important; }

/* 余白
--------------------------------------------------------- */
.mt5   { margin-top: 5px !important; }
.mt10  { margin-top: 10px !important; }
.mt15  { margin-top: 15px !important; }
.mt20  { margin-top: 20px !important; }
.mt25  { margin-top: 25px !important; }
.mt30  { margin-top: 30px !important; }

.mb5   { margin-bottom: 5px !important; }
.mb10  { margin-bottom: 10px !important; }
.mb15  { margin-bottom: 15px !important; }
.mb20  { margin-bottom: 20px !important; }
.mb25  { margin-bottom: 25px !important; }
.mb30  { margin-bottom: 30px !important; }
.mb100 { margin-bottom: 100px !important; }

.pt5   { padding-top: 5px !important; }
.pt10  { padding-top: 10px !important; }
.pt15  { padding-top: 15px !important; }
.pb5   { padding-bottom: 5px !important; }
.pb10  { padding-bottom: 10px !important; }
.pb15  { padding-bottom: 15px !important; }

.pt0   { padding-top: 0 !important; }
.pb0   { padding-bottom: 0 !important; }
.mt0   { margin-top: 0 !important; }
.mb0   { margin-bottom: 0 !important; }

/* 基本余白調整用 */
.mb12  { margin-bottom: 12px !important; }
.mt12  { margin-top: 12px !important; }
.pb8   { padding-bottom: 12px !important; }
.pt8   { padding-top: 12px !important; }

/* ビデオ再生ボタン
--------------------------------------------------------- */
#lp_wrapper .video.ready:after {
  content: ' ';
  background: rgba(0, 0, 0, 0) url('/img/contents/lp/btn_video_start.png') no-repeat center 41%;
  -o-background-size: 110px 110px;
  -ms-background-size: 110px 110px;
  -moz-background-size: 110px 110px;
  -webkit-background-size: 110px 110px;
  background-size: 110px 110px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: pop 2s ease 0s infinite normal both;
}

@-webkit-keyframes pop {
  0%   { -webkit-transform: scale(1); }
  90%  { -webkit-transform: scale(1); }
  92%  { -webkit-transform: scale(0.93); }
  94%  { -webkit-transform: scale(1.07); }
  96%  { -webkit-transform: scale(0.96); }
  98%  { -webkit-transform: scale(1.04); }
  100% { -webkit-transform: scale(1); }
}

#lp_wrapper .video.ready:before {
  content: ' ';
  background: url('/img/contents/lp/txt_video_first.png') no-repeat center 75%;
  -o-background-size: 260px 24px;
  -ms-background-size: 260px 24px;
  -moz-background-size: 260px 24px;
  -webkit-background-size: 260px 24px;
  background-size: 260px 24px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#lp_wrapper .video > .control {
  background: url('/img/contents/lp/btn_video_start.png') no-repeat center;
  -o-background-size: 110px 110px;
  -ms-background-size: 110px 110px;
  -moz-background-size: 110px 110px;
  -webkit-background-size: 110px 110px;
  background-size: 110px 110px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: opacity 300ms ease;
  opacity: 0;
}

#lp_wrapper .video > .control.show {
  -webkit-transition: opacity 0ms;
  opacity: 1;
}

/* クリア
--------------------------------------------------------- */
.clear {
  clear: both;
}

.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
  font-size: 0;
}

/* ローディング画面
--------------------------------------------------------- */
.loading {
  position: relative;
}

.loading:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 3;
}

.loading:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  margin-left: -15px;
  z-index: 3;
  text-align: center;
  background: url(../../../img/developers/loading_01.gif) center top no-repeat;
  -webkit-background-size: 26px 26px;
  background-size: 26px 26px;
  opacity: 0.5;
}

/* 事前登録LPのモダール完了ウィンドウ表示
--------------------------------------------------------- */
div#modal_reserved {
  background: url('../../../img/contents/modal_reserved.png') no-repeat center;
  -moz-background-size: 100% 100%;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
  top: -36%;
  position: absolute !important;
  z-index: 500;
}

div#modal_reserved p {
  top: 44%;
  left: 11%;
  text-align: center;
  font-size: 10px;
  position: absolute;
}

div#modal_reserved a {
  color: rgba(255, 255, 255, 0);
  position: absolute;
  display: block;
  /* background-color: rgba(255, 0, 0, 0.65); */
  overflow: hidden;
  width: 60%;
  top: 54%;
  margin-left: 20%;
  /* bottom: 10%; */
  height: 4%;
  pointer-events: auto;
}

div#modal_reserved_back {
  background-color: rgba(0, 0, 0, 0.5) !important;
  width: 100%;
  height: 300%;
  position: absolute !important;
  z-index: 40;
}

/* 事前登録完了モダールのアニメーション
--------------------------------------------------------- */
.animated {
  -moz-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  -o-animation-name: slidein;
  animation-name: slidein;
  -webkit-transition-timing-function: cubic-bezier(0.025, 0.255, 0.345, 0.905);
  -moz-transition-timing-function: cubic-bezier(0.025, 0.255, 0.345, 0.905);
  -o-transition-timing-function: cubic-bezier(0.025, 0.255, 0.345, 0.905);
  transition-timing-function: cubic-bezier(0.025, 0.255, 0.345, 0.905);
}

@-moz-keyframes slidein {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slidein {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-o-keyframes slidein {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slidein {
  0% {
    opacity: 0;
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}