@charset "UTF-8";
/* ---------------------------------------
  BGM確認
--------------------------------------- */
#sound_info {
  background-image: -moz-linear-gradient(180deg, #031e33 0%, #022e4b 18%, #003e62 50%, #022e4b 73%, #031e33 100%);
  background-image: -webkit-linear-gradient(180deg, #031e33 0%, #022e4b 18%, #003e62 50%, #022e4b 73%, #031e33 100%);
  background-image: -ms-linear-gradient(180deg, #031e33 0%, #022e4b 18%, #003e62 50%, #022e4b 73%, #031e33 100%);
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 999;
  display: none; }
  #sound_info .sound_inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 530px;
    text-align: center;
    width: 650px; }
  #sound_info .logo {
    height: 272px;
    margin: 0 auto 80px;
    width: 380px; }
  #sound_info .text {
    color: #fff;
    margin: 0 0 30px; }
  #sound_info li {
    display: inline-block;
    height: 104px;
    width: 313px; }

/* ---------------------------------------
  CONTENTS
--------------------------------------- */
#contents {
  background: url("../images/top/bg_contents_bottom_sp.jpg") no-repeat center bottom/100%, url("../images/top/bg_contents.jpg") no-repeat center 0/100%, url("../images/top/bg_contents_repeat.jpg") repeat center 0/100%;
  box-shadow: 0 0 20px #000;
  padding: 132px 30px 1px;
  overflow: hidden; }
  #contents .btn_bnr {
    margin: 0 0 40px; }
  #contents .btn_movie {
    margin: 0 auto 100px;
    height: 408px;
    width: 708px; }

section {
  margin: 0 0 100px; }
  section h3 {
    margin: 0 0 40px;
    text-align: center; }
  section .btn_more {
    height: 126px;
    margin: auto;
    width: 664px; }
  section .mCSB_scrollTools {
    opacity: 1; }
    section .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
    section .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
      background: #005a8f; }
    section .mCSB_scrollTools .mCSB_draggerRail {
      background: #002033; }
  section .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
  section .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
    background: #005a8f; }

.news_area .bg_article_list {
  border-radius: 12px;
  background-image: -moz-linear-gradient(135deg, #012d47 0%, #003e62 100%);
  background-image: -webkit-linear-gradient(135deg, #012d47 0%, #003e62 100%);
  background-image: -ms-linear-gradient(135deg, #012d47 0%, #003e62 100%);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); }
.news_area .article_list {
  background: url("../images/top/bg_list.png") no-repeat right bottom -180px;
  height: 564px;
  margin: 0 0 40px;
  padding: 40px 30px; }

.bg_tw_widget {
  border-radius: 12px;
  background-image: -moz-linear-gradient(135deg, #012d47 0%, #003e62 100%);
  background-image: -webkit-linear-gradient(135deg, #012d47 0%, #003e62 100%);
  background-image: -ms-linear-gradient(135deg, #012d47 0%, #003e62 100%);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.2); }
.tw_widget {
  background: url("../images/top/bg_list.png") no-repeat right bottom -180px;
  margin: 0 0 40px;
  padding: 30px 20px; }
.tw_widget iframe {
    width: 740px !important; }

/* ---------------------------------------
  INTRODUCTION
--------------------------------------- */
.introduction {
  padding: 100px 0 0; }
  .introduction .bg_intro {
    background: url("../images/top/bg_intro_sp.jpg") no-repeat 0 0/cover;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: -1; }
  .introduction .block {
    margin: 0 0 100px;
    position: relative; }
    .introduction .block h3, .introduction .block .illust, .introduction .block .movie {
      position: absolute; }
    .introduction .block h3 {
      left: 0;
      right: 0;
      margin: auto;
      top: 80px;
      width: 680px; }
    .introduction .block .movie {
      background: url("../images/top/bg_video.png") no-repeat 0 0;
      height: 652px;
      padding: 32px 0 0 17px;
      width: 366px; }
    .introduction .block .btn {
      position: absolute;
      bottom: 80px;
      left: 0;
      right: 0;
      margin: auto;
      height: 126px;
      width: 664px; }
      .introduction .block .btn.btn_off a {
        pointer-events: none; }
  .introduction .block_01 {
    background: url("../images/top/bg_01.png") no-repeat center 0;
    height: 1148px; }
    .introduction .block_01 .illust {
      top: 144px;
      right: 0; }
    .introduction .block_01 .movie {
      top: 258px;
      left: 53px; }
  .introduction .block_02 {
    background: url("../images/top/bg_02.png") no-repeat center 0;
    height: 1148px; }
    .introduction .block_02 .illust {
      top: 240px;
      left: 0; }
    .introduction .block_02 .movie {
      top: 258px;
      right: 53px; }
  .introduction .block_03 {
    background: url("../images/top/bg_03.png") no-repeat center 0;
    height: 1188px; }
    .introduction .block_03 .illust {
      top: 180px;
      right: 0; }
    .introduction .block_03 .movie {
      top: 300px;
      left: 53px; }

@media print, screen and (max-width: 768px) {
  html, body, #wrap, #main {
    height: 100%; } }
@media print, screen and (min-width: 769px) {
  /* ---------------------------------------
    PC BGM確認
  --------------------------------------- */
  #sound_info .sound_inner {
    height: 322px;
    width: 370px; }
  #sound_info .logo {
    height: 172px;
    margin: 0 auto 40px;
    width: 240px; }
  #sound_info .text {
    margin: 0 0 20px; }
  #sound_info li {
    display: inline-block;
    height: 55px;
    margin: 0 5px;
    width: 168px; }

  /* ---------------------------------------
    PC CONTENTS
  --------------------------------------- */
  #contents {
    background: url("../images/top/bg_contents_bottom.png") no-repeat center bottom/100%, url("../images/top/bg_contents_pc.jpg") no-repeat center 0/100%, url("../images/top/bg_contents_repeat_pc.jpg") repeat center 0/100%;
    padding: 110px 0 0; }

  section {
    margin: 0 0 75px; }
    section .btn_more {
      height: 60px;
      width: 332px; }

  .news_area {
    float: left;
    width: 62%; }
    .news_area h3 {
      margin: 0 auto 30px;
      width: 176px; }
    .news_area .article_list {
      background-size: 36%;
      background-position: right 84px;
      height: 366px;
      margin: 0 0 30px;
      padding: 30px; }
    .news_area .bg_article_list {
      border-radius: 6px; }

  .tw_area {
    float: right;
    width: 34%; }
    .tw_area h3 {
      margin: 0 auto 30px;
      width: 218px; }
    .tw_area .tw_widget {
      background-size: 67%;
      background-position: right 80px;
      margin: 0 0 30px;
      padding: 10px; }
    .tw_area .bg_tw_widget {
      border-radius: 6px; }

  /* ---------------------------------------
    PC INTRODUCTION
  --------------------------------------- */
  .introduction {
    padding: 62px 0 0; }
    .introduction .bg_intro {
      background-image: url("../images/top/bg_intro.jpg"); }
    .introduction .block {
      height: 832px;
      margin: 0 0 64px;
      overflow: hidden;
      width: 100%; }
      .introduction .block h3 {
        top: 40px;
        width: 594px; }
      .introduction .block .movie {
        background-size: contain;
        padding: 27px 16px 0 14px;
        top: 177px;
        width: 294px; }
      .introduction .block .btn {
        bottom: 46px;
        height: 63px;
        width: 330px; }
    .introduction .block_01 {
      background-image: url("../images/top/bg_01_pc.png"); }
      .introduction .block_01 .illust {
        top: 79px;
        right: 50%;
        margin: 0 -504px 0 0; }
      .introduction .block_01 .movie {
        left: 50%;
        margin: 0 0 0 -430px; }
    .introduction .block_02 {
      background-image: url("../images/top/bg_02_pc.png"); }
      .introduction .block_02 .illust {
        top: 93px;
        left: 50%;
        margin: 0 0 0 -520px; }
      .introduction .block_02 .movie {
        right: 50%;
        margin: 0 -430px 0 0; }
    .introduction .block_03 {
      background-image: url("../images/top/bg_03_pc.png"); }
      .introduction .block_03 h3 {
        width: 840px; }
      .introduction .block_03 .illust {
        top: 48px;
        right: 50%;
        margin: 0 -501px 0 0; }
      .introduction .block_03 .movie {
        left: 50%;
        margin: 0 0 0 -430px; } }

/*# sourceMappingURL=top.css.map */