@charset "UTF-8";
/* compileCompressed: ../css/$1.css*/
/*ブレイクポイント*/
/*基本コンテンツ幅*/
/*Webフォント*/
/*カラー*/
/*clearfix*/
/*fontawesome*/
/*icomoon*/
/*============================================================
イントロ部分
============================================================*/
#intro {
  background: #131732;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0; }
  #intro #t1 {
    position: absolute;
    top: 150px;
    left: calc(50% - 204px);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }
    #intro #t1 li {
      margin: 0 30px;
      width: 42px; }
      #intro #t1 li img {
        opacity: 0; }
  #intro #t2 {
    position: absolute;
    top: 150px;
    left: calc(50% - 153px);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }
    #intro #t2 li {
      margin: 0 30px;
      width: 42px; }
      #intro #t2 li img {
        opacity: 0; }
  #intro #t3 {
    position: absolute;
    top: 150px;
    left: calc(60%);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    z-index: 3; }
    #intro #t3 li {
      margin: 0 30px;
      width: 42px; }
      #intro #t3 li img {
        opacity: 0; }
  #intro #bg1 {
    background: url(../img/top/bg1.jpg) center top no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0; }
  #intro #bg2 {
    background: url(../img/top/bg2.jpg) center top no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0; }
  #intro #skip {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 5; }
  @media screen and (max-width: 767px) {
    #intro #t1 {
      top: 20%;
      left: calc(50% - 100px); }
      #intro #t1 li {
        margin: 0 10px;
        width: 30px; }
        #intro #t1 li img {
          width: 100%; }
    #intro #t2 {
      top: 20%;
      left: calc(50% - 75px); }
      #intro #t2 li {
        margin: 0 10px;
        width: 30px; }
        #intro #t2 li img {
          width: 100%; }
    #intro #t3 {
      top: 20%;
      left: 50%; }
      #intro #t3 li {
        margin: 0 10px;
        width: 30px; }
        #intro #t3 li img {
          width: 100%; }
    #intro #bg1 {
      background: url(../img/top/bg1.jpg) 40% top no-repeat;
      background-size: cover; }
    #intro #bg2 {
      background: url(../img/top/bg2.jpg) 40% top no-repeat;
      background-size: cover; } }