@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● contents.css                                        */
/*    サイト共通部                                        */
/*    ・コンテンツ                                        */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ロードエフェクト
--------------------------------------------------- */
#ContentsDivision{
  position: relative;
  &::before{
    content: '';
    width: 100vw;
    height: 100vh;
    bottom: -1px;
    left: 0;
    position: fixed;
    z-index: 50;
    //background: linear-gradient(to bottom, rgba(255,255,255,0) 10vh, rgba(255,255,255,1) 20vh);
    background: $base-color;
    transition: height 0.25s ease-in;
    border-bottom: 1px solid rgba($main-color, 1);
  }

  body.loading &::before{
    height: 100vh;
  }
  body.loaded &::before{
    height: 0vh;
    border-bottom: 0px solid rgba($main-color, 0);
  }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    Contents                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
.ContentsDivision {
    

    /* 固定ページ共通体裁
    --------------------------------------------------- */
    .Page{
         @include flex();
         flex-wrap: wrap;
         align-items: flex-start;
         flex-direction: column;
         padding: 5rem 0;
         @include media-query(over-bp-m) {
           min-height: 100vh;
         }

        .PageHeader{
          width: 100%;
          padding-bottom: 5rem;
          order: 1;
          @include media-query(under-bp-m) {
            padding-bottom: 2.5rem;
          }
        }
        .PageSpecialContents{
          order: 2;
          width: 100%;
          padding-bottom: 5rem;
          @include media-query(under-bp-m) {
            padding-bottom: 2.5rem;
          }
        }
        .PageContents{
          flex-grow: 2;
          order: 4;
          @include media-query(over-bp-m) {
            width: 75%;
            width: 100%;
          }
          @include media-query(under-bp-m) {
            width: 100%;
          }
        }
        .PageFooter{
          order: 3;
          @include media-query(over-bp-m) {
            width: 20.0%;
            width: 100%;
          }
          @include media-query(under-bp-m) {
            width: 100%;
          }
        }
        &.AutoChildren{
          .PageContents{
            margin-bottom: 7.5rem;
            .DefaultBlock{
              .BlockHeader{
                margin-bottom: 2.5rem;
              }
            }
          }
        }
    }



}