@charset "UTF-8";
/***** COMMON *****/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html {
  font-size: 62.5%;
  font-family: 'ヒラギノ角ゴ Pro W3',Hiragino Kaku Gothic Pro,'メイリオ',Meiryo,'MS Pゴシック',MS PGothic,sans-sans-serif;
  line-height: 100%; }

body {
  background: #000;
  font-size: 100%;
  height: 100vh;
  position: relative;
  width: 100vw; }

ul {
  list-style-type: none; }

a {
  transition: all 0.5s; }

a img {
  transition-duration: 0.25s; }

a:hover img,
a:active img {
  transform: scale(1.2, 1.2);
  transition-duration: 0.25s;
  /*opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha( opacity=50 )";*/ }

img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  touch-callout: none;
  user-select: none; }

.pc {
  display: block; }
  @media screen and (max-width: 767px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 767px) {
    .sp {
      display: block; } }

.modalArea {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }
  .modalArea .modalBg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); }
  .modalArea .modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    padding: 0;
    height: 700px;
    width: 700px; }
    @media screen and (max-width: 767px) {
      .modalArea .modalWrapper {
        height: 900px;
        width: 700px; } }
  .modalArea .closeModal {
    font-size: 2rem;
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer; }
    @media screen and (max-width: 767px) {
      .modalArea .closeModal {
        font-size: 5rem; } }

.slide-wrap {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%; }
  .slide-wrap .slider {
    position: absolute;
    top: 0;
    left: 0;
    height: 700px;
    width: 700px; }
    @media screen and (max-width: 767px) {
      .slide-wrap .slider {
        height: 900px;
        width: 700px; } }
    .slide-wrap .slider .slide-item {
      width: 100%; }
      .slide-wrap .slider .slide-item img {
        height: 700px;
        width: 700px; }
        @media screen and (max-width: 767px) {
          .slide-wrap .slider .slide-item img {
            height: 900px;
            width: 700px; } }
      .slide-wrap .slider .slide-item a:hover img,
      .slide-wrap .slider .slide-item a:active img {
        transform: scale(1, 1); }
      .slide-wrap .slider .slide-item .pc {
        display: block; }
        @media screen and (max-width: 767px) {
          .slide-wrap .slider .slide-item .pc {
            display: none; } }
      .slide-wrap .slider .slide-item .sp {
        display: none; }
        @media screen and (max-width: 767px) {
          .slide-wrap .slider .slide-item .sp {
            display: block; } }

@media screen and (max-width: 767px) {
  .slick-prev,
  .slick-next {
    top: 45%; } }

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px; }
  @media screen and (max-width: 767px) {
    .wrap {
      top: 25px;
      transform: translate(-50%, 25px);
      padding: 0 3.333%;
      width: 100%; } }

header {
  background: url("../images/bg_header.png") no-repeat;
  background-position: bottom center;
  background-size: 100%;
  margin-bottom: 25px;
  padding-bottom: 50px;
  text-align: center;
  width: 100%; }
  @media screen and (max-width: 767px) {
    header {
      background: none;
      margin-bottom: 50px; } }
  header h1 {
    animation-delay: 1.5s;
    display: block;
    height: auto;
    margin: 0 auto 50px;
    width: 650px; }
    header h1 img {
      width: 100%; }
  header p {
    margin: 0 auto;
    width: 450px; }
    header p img {
      width: 100%; }
    @media screen and (max-width: 767px) {
      header p {
        width: 600px; } }

section#body {
  font-size: 1.2rem;
  position: relative;
  width: 100%; }
  @media screen and (max-width: 767px) {
    section#body {
      font-size: 1.6rem; } }
  section#body .btn {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1000; }
    section#body .btn span {
      animation-delay: 3.0s;
      background: #FFF;
      border-radius: 25px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      color: #231815;
      display: block;
      height: 40px;
      line-height: 100%;
      margin: 0 auto;
      padding: 15px 20px;
      text-align: center;
      text-decoration: none;
      vertical-align: middle;
      width: 200px; }
      @media screen and (max-width: 767px) {
        section#body .btn span {
          border-radius: 50px;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          font-size: 2rem;
          height: 80px;
          padding: 30px 40px;
          width: 400px; } }
  section#body .bubble {
    display: block;
    height: 350px;
    position: relative;
    width: 900px; }
    @media screen and (max-width: 767px) {
      section#body .bubble {
        height: 600px;
        margin: 0 auto;
        width: 700px; } }
    section#body .bubble li {
      height: auto;
      position: absolute; }
      section#body .bubble li#staff_001 {
        animation-delay: 1.0s;
        bottom: 25px;
        right: 0;
        width: 190px;
        z-index: 0; }
        section#body .bubble li#staff_001:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_001 {
            top: 150px;
            right: 0;
            width: 200px; } }
      section#body .bubble li#staff_002 {
        animation-delay: 0.5s;
        top: 75px;
        left: 360px;
        width: 180px;
        z-index: 1; }
        section#body .bubble li#staff_002:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_002 {
            top: 175px;
            left: 225px;
            width: 250px; } }
      section#body .bubble li#staff_003 {
        animation-delay: 0.8s;
        bottom: 50px;
        left: 300px;
        width: 100px;
        z-index: 0; }
        section#body .bubble li#staff_003:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_003 {
            bottom: 15px;
            left: 220px;
            width: 120px; } }
      section#body .bubble li#staff_004 {
        animation-delay: 0.6s;
        top: 100px;
        right: 270px;
        width: 100px;
        z-index: 2; }
        section#body .bubble li#staff_004:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_004 {
            top: 260px;
            right: 130px;
            width: 120px;
            z-index: 1; } }
      section#body .bubble li#staff_005 {
        animation-delay: 0.9s;
        top: 50px;
        right: 180px;
        width: 110px;
        z-index: 1; }
        section#body .bubble li#staff_005:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_005 {
            top: 120px;
            right: 140px;
            width: 120px; } }
      section#body .bubble li#staff_006 {
        animation-delay: 0.4s;
        bottom: 10px;
        right: 170px;
        width: 150px;
        z-index: 3; }
        section#body .bubble li#staff_006:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_006 {
            bottom: 0;
            right: 15px;
            width: 200px; } }
      section#body .bubble li#staff_007 {
        animation-delay: 0.7s;
        top: 0;
        right: 60px;
        width: 130px;
        z-index: 1; }
        section#body .bubble li#staff_007:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_007 {
            top: 0;
            right: 10px;
            width: 150px; } }
      section#body .bubble li#staff_008 {
        animation-delay: 0.2s;
        top: 50px;
        left: 100px;
        width: 135px;
        z-index: 3; }
        section#body .bubble li#staff_008:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_008 {
            top: 100px;
            left: 120px;
            width: 150px; } }
      section#body .bubble li#staff_009 {
        animation-delay: 0.3s;
        top: 110px;
        left: 230px;
        width: 110px;
        z-index: 1; }
        section#body .bubble li#staff_009:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_009 {
            top: 300px;
            left: 120px;
            width: 150px;
            z-index: 3; } }
      section#body .bubble li#staff_010 {
        animation-delay: 0.1s;
        top: 160px;
        left: 140px;
        width: 125px;
        z-index: 2; }
        section#body .bubble li#staff_010:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_010 {
            top: 200px;
            left: 0;
            width: 180px; } }
      section#body .bubble li#staff_011 {
        animation-delay: 0.75s;
        bottom: 30px;
        right: 310px;
        width: 100px;
        z-index: 0; }
        section#body .bubble li#staff_011:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_011 {
            bottom: 25px;
            right: 180px;
            width: 160px; } }
      section#body .bubble li#staff_012 {
        animation-delay: 0.55s;
        bottom: -25px;
        left: 0;
        width: 170px;
        z-index: 1; }
        section#body .bubble li#staff_012:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_012 {
            width: 200px; } }
      section#body .bubble li#staff_013 {
        animation-delay: 0.25s;
        top: 0;
        left: 0;
        width: 135px;
        z-index: 4; }
        section#body .bubble li#staff_013:hover {
          z-index: 100; }
        @media screen and (max-width: 767px) {
          section#body .bubble li#staff_013 {
            width: 150px; } }
      section#body .bubble li img {
        width: 100%; }