@charset "UTF-8";
/*------------------------------------------------------------*/
/*H2設定*/
/*------------------------------------------------------------*/
/*トップページ専用パネル内*/
section.panel h2 {
  position: absolute;
  width: 485px;
  height: 191px;
  margin: 0 0 0 -242px;
  top: -140px;
  left: 50%;
  z-index: 3;
}
/*初めての方のみ*/
section.panel.green h2 {
  position: absolute;
  width: 485px;
  height: 191px;
  margin: 0 0 0 -242px;
  top: -125px;
  left: 50%;
  z-index: 3;
}
/*------------------------------------------------------------*/
/*パネルレイアウト基本設定*/
/*------------------------------------------------------------*/
section.panel:before {
  position: absolute;
  content: '';
  display: inline-block;
  width: 910px;
  height: 28px;
  vertical-align: middle;
  top: -28px;
}
section.panel:after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 910px;
  height: 28px;
  vertical-align: middle;
  bottom: -28px;
}
/*コンテンツ背景:基本*/
section.panel {
  position: relative;
  width: 910px;
  margin: 56px auto 56px; /*各ブロック毎の下マージン*/
  padding: 0;
  z-index: 2;
}
/*ムービー*/
.topPage section.panel.blue {
  margin: 126px auto 176px; /*各ブロック毎の下マージン*/
  padding: 22px 0 12px 0;
}
/*最新情報*/
.topPage section.panel.news {
  margin: 56px auto 176px; /*各ブロック毎の下マージン*/
  padding: 22px 0 12px 0;
}
/*遊び方*/
.topPage section.panel.green {
  margin: 56px auto -12px; /*各ブロック毎の下マージン*/
  padding: 22px 0 12px 0;
}
/*アニメ情報*/
.topPage section.panel.yellow {
  margin: 86px auto 56px; /*各ブロック毎の下マージン*/
  padding: 22px 0 12px 0;
}
/*コンテンツレイアウト*/
section.panel .inner {
  /*border: 1px solid #666;*/
  position: relative;
  /*仮に810pxで設定*/
  width: 810px;
  margin: 0 auto;
  padding: 12px 0;
  text-align: center;
}
/*------------------------------------------------------------*/
/*モーダルウインドウH2設定*/
/*------------------------------------------------------------*/
/*トップページ専用パネル内*/
.cardPop section.panel h2 {
  position: absolute;
  width: 485px;
  height: 191px;
  margin: 0 0 0 -242px;
  top: -140px;
  left: 50%;
  z-index: 3;
}
/*------------------------------------------------------------*/
/*パネルレイアウト基本設定*/
/*------------------------------------------------------------*/
.cardPop section.panel:before {
  position: absolute;
  content: '';
  display: inline-block;
  width: 800px;
  height: 28px;
  vertical-align: middle;
  top: -28px;
  left: 0;
}
.cardPop section.panel:after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 800px;
  height: 28px;
  vertical-align: middle;
  bottom: -28px;
  left: 0;
}
/*コンテンツ背景:基本*/
.cardPop section.panel {
  position: relative;
  width: 800px;
  margin: 56px auto 56px; /*各ブロック毎の下マージン*/
  padding: 0;
  z-index: 2;
}
/*コンテンツレイアウト*/
.cardPop section.panel .inner {
  /*border: 1px solid #666;*/
  position: relative;
  /*仮に810pxで設定*/
  width: 710px;
  margin: 0 auto;
  padding: 12px 0;
  text-align: center;
}
/*閉じるボタン*/
.btn_close {
  position: absolute;
  width: 62px;
  height: 62px;
  background: url("../../_img/popup_close@2x.png")no-repeat center top/100% auto;
  top: -50px;
  right: -64px;
  ;
  text-indent: -999999px;
  z-index: 4;
}
.btn_next {
  position: absolute;
  width: 62px;
  height: 62px;
  background: url("../../_img/popup_next@2x.png")no-repeat center top/100% auto;
  top: 200px;
  right: -64px;
  ;
  text-indent: -999999px;
  z-index: 4;
}
.btn_prev {
  position: absolute;
  width: 62px;
  height: 62px;
  background: url("../../_img/popup_prev@2x.png")no-repeat center top/100% auto;
  top: 200px;
  left: -64px;
  ;
  text-indent: -999999px;
  z-index: 4;
}
/*------------------------------------------------------------*/
/*レイアウト ※以降背景画像のみを設定*/
/*------------------------------------------------------------*/
section.panel.green:before {
  background: url('../../_img/bg_green_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.green:after {
  background: url('../../_img/bg_green_btm@2x.png') no-repeat center top/100% auto;
}
/*コンテンツ背景*/
section.panel.green {
  background: url('../../_img/bg_green_cmn@2x.png') repeat-y center top /100% auto;
}
/*------------------------------------------------------------*/
/*レッド：レイアウト*/
section.panel.red:before {
  background: url('../../_img/bg_red_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.red:after {
  background: url('../../_img/bg_red_btm@2x.png') no-repeat center top/100% auto;
}
section.panel.red {
  background: url('../../_img/bg_red_cmn@2x.png') repeat-y center top /100% auto;
}
/*------------------------------------------------------------*/
/*イエロー：レイアウト*/
section.panel.yellow:before {
  background: url('../../_img/bg_yellow_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.yellow:after {
  background: url('../../_img/bg_yellow_btm@2x.png') no-repeat center top/100% auto;
}
section.panel.yellow {
  background: url('../../_img/bg_yellow_cmn@2x.png') repeat-y center top /100% auto;
}
/*------------------------------------------------------------*/
/*ブルー：レイアウト*/
section.panel.blue:before {
  background: url('../../_img/bg_blue_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.blue:after {
  background: url('../../_img/bg_blue_btm@2x.png') no-repeat center top/100% auto;
}
section.panel.blue {
  background: url('../../_img/bg_blue_cmn@2x.png') repeat-y center top /100% auto;
}
/*------------------------------------------------------------*/
/*オレンジ：レイアウト*/
section.panel.orange:before {
  background: url('../../_img/bg_orenge_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.orange:after {
  background: url('../../_img/bg_orenge_btm@2x.png') no-repeat center top/100% auto;
}
section.panel.orange {
  background: url('../../_img/bg_orenge_cmn@2x.png') repeat-y center top /100% auto;
}
/*------------------------------------------------------------*/
/*オレンジ：レイアウト*/
section.panel.purple:before {
  background: url('../../_img/bg_purple_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.purple:after {
  background: url('../../_img/bg_purple_btm@2x.png') no-repeat center top/100% auto;
}
section.panel.purple {
  background: url('../../_img/bg_purple_cmn@2x.png') repeat-y center top /100% auto;
}
/*------------------------------------------------------------*/
/*ニュース専用：レイアウト*/
section.panel.news:before {
  background: url('../../_img/bg_news_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.news:after {
  background: url('../../_img/bg_news_btm@2x.png') no-repeat center top/100% auto;
}
section.panel.news {
  min-height: 180px;
  background: url('../../_img/bg_news_cmn@2x.png') repeat-y center top /100% auto;
}
/*------------------------------------------------------------*/
/*ブログ専用：レイアウト*/
section.panel.blog:before {
  width: 1000px;
  background: url('../../_img/bg_blog_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.blog:after {
  width: 1000px;
  background: url('../../_img/bg_blog_btm@2x.png') no-repeat center top/100% auto;
}
section.panel.blog {
  width: 1000px;
  min-height: 180px;
  background: url('../../_img/bg_blog_cmn@2x.png') repeat-y center top /100% auto;
}
/*コンテンツレイアウト*/
section.panel.blog .inner {
  /*border: 1px solid #666;*/
  position: relative;
  /*仮に810pxで設定*/
  width: 946px;
  background: url('../../_img/bg_blog_inner@2x.png') repeat center top /355px auto;
  margin: 0 auto;
  padding: 12px 0;
  text-align: center;
}


/*------------------------------------------------------------*/
/*SP設定*/
/*------------------------------------------------------------*/
@media screen and (max-width: 667px) {
  /*------------------------------------------------------------*/
  /*H2設定*/
  /*------------------------------------------------------------*/
  /*トップページ専用パネル内*/
  section.panel h2 {
    position: absolute;
    width: 90%;
    height: 191px;
    margin: 0 0 0 -45%;
    top: -96px;
    left: 50%;
    z-index: 3;
  }
  /*初めての方のみ*/
  section.panel.green h2 {
    position: absolute;
    width: 90%;
    height: 191px;
    margin: 0 0 0 -45%;
    top: -96px;
    left: 50%;
    z-index: 3;
  }
  /*------------------------------------------------------------*/
  /*パネルレイアウト基本設定*/
  /*------------------------------------------------------------*/
  section.panel:before {
    position: absolute;
    content: '';
    display: inline-block;
    width: 100%;
    height: 28px;
    vertical-align: middle;
    top: -28px;
  }
  section.panel:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 100%;
    height: 28px;
    vertical-align: middle;
    bottom: -28px;
  }
  /*コンテンツ背景:基本*/
  section.panel {
    position: relative;
    width: 100%;
    margin: 56px auto 56px; /*各ブロック毎の下マージン*/
    padding: 0;
    z-index: 2;
  }
  /*ムービー*/
  .topPage section.panel.blue {
    margin: 63px auto 88px; /*各ブロック毎の下マージン*/
    padding: 22px 0 12px 0;
  }
  /*最新情報*/
  .topPage section.panel.news {
    margin: 56px auto 98px; /*各ブロック毎の下マージン*/
    padding: 22px 0 12px 0;
  }
  /*遊び方*/
  .topPage section.panel.green {
    margin: 56px auto 0px; /*各ブロック毎の下マージン*/
    padding: 22px 0 12px 0;
  }
  /*アニメ情報*/
  .topPage section.panel.yellow {
    margin: 86px auto 26px; /*各ブロック毎の下マージン*/
    padding: 22px 0 12px 0;
  }
  /*コンテンツレイアウト*/
  section.panel .inner {
    /*border: 1px solid #666;*/
    position: relative;
    /*仮に810pxで設定*/
    width: 90%;
    margin: 0 auto;
    padding: 12px 0;
    text-align: center;
  }
    /*------------------------------------------------------------*/
/*ブログ専用：レイアウト*/
section.panel.blog:before {
  width: 100%;
  background: url('../../_img/bg_blog_top@2x.png') no-repeat center bottom/100% auto;
}
section.panel.blog:after {
  width: 100%;
  background: url('../../_img/bg_blog_btm@2x.png') no-repeat center top/100% auto;
}
section.panel.blog {
  width: 100%;
  min-height: 180px;
  background: url('../../_img/bg_blog_cmn@2x.png') repeat-y center top /100% auto;
}
/*コンテンツレイアウト*/
section.panel.blog .inner {
  /*border: 1px solid #666;*/
  position: relative;
  /*仮に810pxで設定*/
  width: 94%;
  background: url('../../_img/bg_blog_inner@2x.png') repeat center top /200px auto;
  margin: 0 auto;
  padding: 12px 0;
  text-align: center;
}

  /*------------------------------------------------------------*/
  /*モーダルウインドウH2設定*/
  /*------------------------------------------------------------*/
  /*トップページ専用パネル内*/
  .cardPop section.panel h2 {
    position: absolute;
    width: 485px;
    height: 191px;
    margin: 0 0 0 -242px;
    top: -140px;
    left: 50%;
    z-index: 3;
  }
  /*------------------------------------------------------------*/
  /*パネルレイアウト基本設定*/
  /*------------------------------------------------------------*/
  .cardPop section.panel:before {
    position: absolute;
    content: '';
    display: inline-block;
    width: 100%;
    height: 28px;
    vertical-align: middle;
    top: -28px;
    left: 0;
  }
  .cardPop section.panel:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 100%;
    height: 28px;
    vertical-align: middle;
    bottom: -28px;
    left: 0;
  }
  /*コンテンツ背景:基本*/
  .cardPop section.panel {
    position: relative;
    width: 100%;
    margin: 56px auto 56px; /*各ブロック毎の下マージン*/
    padding: 0;
    z-index: 2;
  }
  /*コンテンツレイアウト*/
  .cardPop section.panel .inner {
    /*border: 1px solid #666;*/
    position: relative;
    /*仮に810pxで設定*/
    width: 90%;
    margin: 0 auto;
    padding: 12px 0;
    text-align: center;
  }
  /*閉じるボタン*/
  .btn_close {
    position: absolute;
    width: 50px;
    height: 50px;
    background: url("../../_img/popup_close@2x.png")no-repeat center top/100% auto;
    top: -38px;
    right: -31px;
    ;
    text-indent: -999999px;
    z-index: 4;
  }
  .btn_next {
    position: absolute;
    width: 50px;
    height: 50px;
    background: url("../../_img/popup_next@2x.png")no-repeat center top/100% auto;
    top: 200px;
    right: -28px;
    ;
    text-indent: -999999px;
    z-index: 40;
  }
  .btn_prev {
    position: absolute;
    width: 50px;
    height: 50px;
    background: url("../../_img/popup_prev@2x.png")no-repeat center top/100% auto;
    top: 200px;
    left: -28px;
    ;
    text-indent: -999999px;
    z-index: 40;
  }
  /*-----------------------------------------------------//end media*/
}