@charset "UTF-8";
/* =====
 * /outline レイアウト
============================================================================= */
/* -----
 * Schedule
----------------------------------------------------------------------------- */
#Schedule {
  margin-bottom: 35px;
}

#Schedule .stage {
  width: 530px;
  float: left;
}

#Schedule hr {
  display: block;
  width: 20px;
  height: 200px;
  margin: 0;
  border: none;
  float: left;
  background: transparent url(../images/outline/schedule-arrow.png) 4px 50% no-repeat;
}

/* -----
 * responsive
----------------------------------------------------------------------------- */
@media screen and (min-width: 944px) {
  /* PC */
}

@media screen and (min-width: 768px) and (max-width: 943px) {
  /* tablet */
}

@media screen and (max-width: 767px) {
  /* smart phone */
  /* -----
   * page-title
  ----------------------------------------------------------------------------- */
  .page-title .str {
    width: 135px;
    height: 21px;
    background-image: url(../images/outline/page-title-sp.png);
  }
  /* -----
   * Schedule
  ----------------------------------------------------------------------------- */
  #Schedule {
    margin-bottom: 25px;
  }
  #Schedule .stage {
    width: auto;
    float: none;
    height: 0;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
            background-size: contain;
  }
  #Schedule .stage img {
    display: none;
  }
  #Schedule .stage.stage-1 {
    padding-top: 63%;
    background-image: url(../images/outline/stage1-sp.png);
  }
  #Schedule .stage.stage-2 {
    padding-top: 59%;
    background-image: url(../images/outline/stage2-sp.png);
  }
  #Schedule hr {
    width: 20px;
    height: 11px;
    margin: 5px auto;
    float: none;
    background-image: url(../images/outline/schedule-arrow-sp.png);
    background-position: 50% 50%;
    -webkit-background-size: contain;
            background-size: contain;
  }
}