/* TABLE OF CONTENTS:
 * 
 * 01 どのサイズでも共通で適用されるスタイル
 *    - ビルボード
 *    - 新着情報
 *    - イントロ
 *    - サービス料金
 * 02 幅 480px 以上
 * 03 幅 768px 以上
 *    - ビルボード
 *    - 新着情報
 * 04 幅 880px 以上
 * 05 幅 1072px 以上
 * 06 幅 1264px 以上
 *    - ビルボード
 *    - サービス料金
 * 07 その他 任意幅
 */

/* --------------------------------------------------------------------------------------------------------
   01
 *
 * どのサイズでも共通で適用されるスタイル
 */



/* ビルボード */
  #mainImg .swiper-slide > div {
    padding-bottom: 30px;
  }
  #mainImg .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0;
  }



/* 新着情報 */
  #news {
    margin-top: 0;
  }
  #news dl {
    margin: 0;
    padding: 10px 0;
  }
  #news dl dt {
    background: #cc3333;
    border-radius: 3px;
    color: #FFF;
    padding: 0 1em;
  }
  #news dl dt:before {
    font-family: "Font Awesome 5 free";
    font-weight: 900;
    content: "\f026";
    display: inline-block;
    margin-right: 0.5em;
  }
  #news dl dd {
    margin: 0.5em 0 0;
  }



/* イントロ */
  .outer.concept {
    background: #80d9f1 url(../img/top/intro-bg.jpg) center bottom no-repeat;
    background-size: cover;
  }

/* サービス料金 */
  .outer.price {
    background-size: auto 100%;
  }



/* --------------------------------------------------------------------------------------------------------
   02
 *
 * 幅 480px 以上
 */
@media screen and (min-width: 30em) {

    /* ここにスタイル */

}/* End 620px Mobile Large */



/* --------------------------------------------------------------------------------------------------------
   03
 *
 * 幅 768px 以上
 */
@media screen and (min-width: 48em) {


    /* ビルボード */
      #mainImg .swiper-slide > div {
        background-position: right 50vw center, left 50vw center;
        text-align: center;
        background-repeat: no-repeat;
        background-size: auto 100%;
        padding: 20px;
      }
      #mainImg .swiper-slide > div.bil-1 {
        background-image: url(../img/top/bil-1-bgl.png), url(../img/top/bil-1-bgr.png);
      }
      #mainImg .swiper-slide > div.bil-2 {
        background-image: url(../img/top/bil-2-bgl.png), url(../img/top/bil-2-bgr.png);
      }
      #mainImg .swiper-slide > div.bil-3 {
        background-image: url(../img/top/bil-3-bgl.png), url(../img/top/bil-3-bgr.png);
      }

    /* 新着情報 */
      #news dl {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
      #news dl dt {
        font-size: 1rem;
        margin-right: 1em;
      }
      #news dl dd {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        margin: 0;
      }



}/* End 740px Tablet Small */



/* --------------------------------------------------------------------------------------------------------
   04
 *
 * 幅 880px 以上
 */
@media screen and (min-width: 55em) {

    /* ここにスタイル */

}/* End 880px Tablet Large */



/* --------------------------------------------------------------------------------------------------------
   05
 *
 * 幅 1072px 以上
 */
@media screen and (min-width: 67em) {

    /* ここにスタイル */

}/* End 955px Desktop Small */



/* --------------------------------------------------------------------------------------------------------
   06
 *
 * 幅 1264px 以上
 */
@media screen and (min-width: 79em) {


    /* ビルボード */
      #mainImg .swiper-slide > div.bil-1,
      #mainImg .swiper-slide > div.bil-2,
      #mainImg .swiper-slide > div.bil-3 {
        background-position: left center, right center;
      }


    /* サービス料金 */
      .outer.price {
        background-size: contain;
      }

}/* End 1100px Desktop Medium */



/* --------------------------------------------------------------------------------------------------------
   07
 *
 * その他 任意幅
 */
 
@media screen and (min-width: 1500px) {
  #qa {
    position: relative;
  }
  #qa:after {
    content: "";
    background: url(../img/contents/qa-image.png) center top no-repeat;
    display: block;
    height: 400px;
    width: 262px;
    position: absolute;
    bottom: -3.5em;
    right: -262px;
  }
}/* End min 1500px */