@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● heading.css                                         */
/*    共通部品                                            */
/*    ・見出し                                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* サイトロゴ
--------------------------------------------------- */
.SiteLogo{
  display: flex;
  font-size: 1.0rem;  //ロゴの基準文字サイズ
  @include media-query(under-bp-m) {
    font-size: 0.8rem; 
  }
  &,
  & *{
    vertical-align: bottom;
  }
  > a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

    html.PcView &:hover,
    html.PcView &:focus{
      // opacity: 0.8;
      text-shadow: 0px 0px 2rem  rgba( $text-color , 0.5);
    }
    
    .Icon{
      color: $text-color;
      font-size: 15em;
      line-height: 0em;
      margin: 0em auto -0.1em;
    }
    .Label{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      line-height: 1.5;
      margin-top: 1em;
      //white-space: nowrap;
      .Main{
        @extend %FontDecoratedLatin;
        font-size: 4.75em;
        font-weight: 300 !important;
        letter-spacing: 0.025em;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
        .Thin{
          font-weight: 300;
        }
        .Bold{
          font-weight: 500;
        }
      }
      .Sub{
        font-size: 1.2em;
        font-weight: 700;
        html[lang="ja"] &{
          letter-spacing: 0.3em;
        }
        line-height: 1.1;
        text-align: center;
      }
  
    }
  }
}



/* ページタイトル 兼 トップのエリアタイトル
--------------------------------------------------- */
.PageTitle{
  display: flex;
  flex-direction: column;
  align-items: flex-start!important;
  .Main{
    @extend %FontDecoratedLatin;
    @include media-query(over-bp-m) {
      font-size: 400%;
    }
    @include media-query(under-bp-m) {
      font-size: 250%;
      align-self: center!important;
    }
    color: $main-color;
    font-weight: 300;
    font-weight: 500;
    letter-spacing: 0.05em;
    &::first-letter{
    }
  }
  .Sub{
    font-size: 100%;
    letter-spacing: 0.125em;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
    @include media-query(under-bp-m) {
      align-self: center!important;
      font-size: 87.5%;
    }
  }
}




/* 見出し common
--------------------------------------------------- */
.Heading{
  margin: 1.5em 0;
  position: relative;
  font-weight: bold;
  clear: both;
  
  @extend %FontSansSerif;
  .Icon{
    display: inline-block;
    transform: scale(1.75);
    margin-right: 0.5em;
  }

  
  em{
    font-weight: initial;
    background: none;
  }
  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}

/* 見出しバリエーション
--------------------------------------------------- */

/* Type1 :::::::::::::::::::::::::  */
.Heading.Type1{
  text-align: center;
  font-weight: bold;
  color: inherit;
  margin: 2em 0 1em;
  line-height: 1.75;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  letter-spacing: .05em;
  font-size: 225%;
  font-weight: 700;
  @include media-query(under-bp-m) {
    font-size: 162.5%;
    letter-spacing: .05em;
    margin: 2em 0 1em;
    text-align: justify;
    br{
      display: none;
    }
  }
  .Sub{
    font-size: 1.6rem;
    margin-top: 1em;
    color: $main-color;
    @include media-query(under-bp-m) {
      font-size: 1.4rem;
    }
  }  
  &::after{
    content: "";
    margin-top: 1.25em;
    height: 2px;
    width: 17.5rem;
    //background: rgba($main-color, 1);
    background: darken( $main-color, 10% );
    @include media-query(under-bp-m) {
      margin-top: 0.75em;
      width: 12.5rem;
    }
  }
  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}


/* Type2 :::::::::::::::::::::::::  */
.Heading.Type2{
  font-size: 162.5%;
  font-weight: 700;
  text-align: left;
  margin: 2em 0 2em;
  line-height: 1.75;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  letter-spacing: .05em;
  @include media-query(under-bp-m) {
    font-size: 137.5%;
    margin-bottom: 1.5em;
    font-weight: 600;
    br{
      display: none;
    }
  }
  .Sub{
    font-size: 1.6rem;
    margin-top: 1em;
    color: $main-color;
  }
  &::before{
    content: "";
    height: 5px;
    width: 7.5rem;
    //border-radius: 1em;
    background-color: darken( $main-color, 10% );
    background-image: linear-gradient(to right, rgba($main-color, 0.5), rgba($main-color, 0));
    margin-bottom: 1.5em;
  }
  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}



/* Type3 :::::::::::::::::::::::::  */
.Heading.Type3{
  font-size: $font-size-m;
  font-weight: 700;
  line-height: 1.75;
  margin: 2.5em 0 1.5em;
  color: inherit;
  padding: .5em 1.5rem;
  // background-color: darken( $main-color, 10% );
  background-image: linear-gradient(to right, rgba($main-color-deep, 0.85), rgba($main-color-deep, 0.5));
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  @include media-query(under-bp-m) {
    font-size: $font-size-d;
    margin-bottom: 1.25em;
    br{
      display: none;
    }
  }
  .Sub{
    font-size: 75%;
    margin-left: 1em;
    opacity: 0.75;
    font-weight: 400;
  }
  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}







/* Type4 :::::::::::::::::::::::::  */
.Heading.Type4{
  font-size: $font-size-m;
  font-weight: 700;
  line-height: 1.75;
  margin: 2.5em 0 1.5em;
  color: inherit;
  padding: .5em 1.5rem;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  border-left: 4px solid $main-color-deep;
  @include media-query(under-bp-m) {
    font-size: $font-size-d;
    margin-bottom: 1.25em;
    br{
      display: none;
    }
  }
  .Sub{
    font-size: 75%;
    margin-left: 1em;
    opacity: 0.75;
    font-weight: 400;
  }
  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}





/* Type5 :::::::::::::::::::::::::  */
.Heading.Type5 {
  font-size: $font-size-m;
  font-weight: 700;
  line-height: 1.75;
  margin: 2.5em 0 1.5em;
  color: inherit;
  padding: .75em 1.5rem;
  padding-left: 0;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  @include media-query(under-bp-m) {
    font-size: $font-size-d;
    margin-bottom: 1.25em;
    br{
      display: none;
    }
  }
  .Sub{
    font-size: 75%;
    margin-left: 1em;
    opacity: 0.75;
    font-weight: 400;
  }

  &::after{
    content: "";
    height: 1px;
    width: 10em;
    position: absolute;
    bottom: -1px;
    left: 0px;
    background: $main-color;
  }

  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}





/* Type6 :::::::::::::::::::::::::  */
.Heading.Type6{
  position: relative;
  margin: 1.5em 0 1em;
  letter-spacing: .05em;
  font-size: $font-size-l;
  font-size: 1.8rem;
  @include media-query(under-bp-m) {
    font-size: 1.6rem;
  }
  line-height: 1.875;
  font-weight: 700;
  display: flex;
  align-items: baseline;
  .Sub{
    font-size: 1.4rem;
    margin-left: 2em;
    border-left: 1px solid $main-color;
    padding-left: 1.5em;
    font-weight: 400;
  }
  &:first-child{
    margin-top: 0;
  }
  &:last-child{
    margin-bottom: 0;
  }
}




/* キャッチ :::::::::::::::::::::::::  */
.Catch{
  font-size: $font-size-ll;
  font-weight: 600;
  color: $main-color;
  margin: 0 0 1em;
  @include media-query(under-bp-m) {
    font-size: $font-size-m;
  }
}