@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● header.css                                          */
/*    サイト共通部                                        */
/*    ・ヘッダ                                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */



/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    Header                                        */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

header {
  background-color: #222;
  @include media-query(over-bp-l) {
    display: none;
  }

}


  /* SiteHeaderArea
  --------------------------------------------------- */
  .SiteHeaderArea {
  }




/* - - SiteHeaderBlock - - */
.SiteHeaderBlock {
  @include flex();
  position: relative;
  padding: 0 1rem;
  .BlockHeader{
    @include flex(center, center);
    flex-direction: column;
    @include media-query(under-bp-m) {
      height: 8rem;
    }
    .SiteLogo{
      order: 2;
      opacity: 1;
      transition: 0.2s opacity;
      @include media-query(under-bp-m) {
        font-size: 0.7rem;
      }
      a{
        flex-direction: initial;
        .Icon{
          margin: 0;
          margin-right: 0.25rem;
          font-size: 8em;
        }
        .Label{
        }
      }
      @include media-query(over-bp-l) {
        opacity: 0;
      }
    }
  }
  .BlockContents{
    flex-grow: 2;
    .ButtonList{
      justify-content: flex-end;
      .LanguageButtonGroup{
        position: relative;
        display: none;
        html[lang="ja"] &{
          display: list-item;
        }

        .LanguageButton{
          padding: 0.75em 1em;
          @include media-query(under-bp-m) {
            padding: 0.5em 0.75em;
          }
          .Label{
            @extend %FontDecoratedLatin;
            font-weight: 500;
            @include media-query(under-bp-m) {
              min-width: 5em;
            }
          }
          html.PcView &:focus{
            background: #000;
          }
          &.Active{
            background: $main-color;
          }
        }
        ul{
          position: absolute;
          right: -10%;
          top: 100%;
          width: 120%;
          z-index: 5;
          list-style: none;
          color: #222;
          background: #fff;
          border-radius: 1.5rem;
          overflow: hidden;
          font-size: $font-size-ss;
          li{
            border-top: 1px solid rgba(0,0,0,0.1);
            margin: 0;
            &:first-child{
              border-top: none;
            }
            a{
              display: block;
              padding: 0.75em;
              text-align: center;
              html.PcView &:hover,
              html.PcView &:focus{
                color: white;
                background: #222;
              }
            }
          }
        }

      }
    }
  }
  .BlockFooter{
    .MenuTrigger{
      // position: relative;
      position: fixed;
      z-index: 2000;
      top: 1.5rem;
      right: 1.5rem;
      @include media-query(over-bp-l) {
        display: none;
      }
    }
    @include media-query(under-bp-l) {
      width: 5rem;
    }
  }
}





/* GlobalMenuArea (グローバルメニューの配置とコンテンツ部分に左余白)
--------------------------------------------------- */
// レイアウト：PCでは左サイドへ表示・スマホでは開閉式
main,
footer{
  [class$='Area']{
    transition: padding .2s;
    padding-left: 0;
  }
}
@include media-query(over-bp-l) {
  .GlobalMenuArea{
    position: absolute;
    html:not(.rsbp-lowheight) &{
      position: fixed;
    }
    width: 22.5rem;
    height: 100%;
    top: 0%;
    left: 0%;
    z-index: 100;
  }
  main,
  footer{
    [class$='Area']{
      padding-left: 22.5rem;
      transition: all .2s;
    }
  }
}
@include media-query(under-bp-l) {
  .GlobalMenuArea{
    position: fixed;
    width: 100%;
    height: 120vh;  //本来100vh だが隙間がでるので大きめで
    padding-bottom: 20vh!important;
    overflow: auto;
    opacity: 0;
    z-index: -1;
    &.Active{
      opacity: 1;
      z-index: 1500;
    }
  }
}
// 装飾
.GlobalMenuArea {
  color: #fff;
  transition: all .2s;
  // transition: background .2s 1s;
  @include media-query(over-bp-l) {
    body.loaded &{
      // animation: fadein_main-color 1s 1s 1;
      // animation-fill-mode: forwards;
      background: rgba($main-color,0.25);
      // border-right: 1px solid;
      &:hover,
      &:focus{
        background: rgba($main-color,0.375);
      }
    }
    // @keyframes fadein_main-color {
    //   0% {
    //     background: rgba($main-color,0);
    //   }
    //   100% {
    //     background: rgba($main-color,0.8);
    //   }
    // }

  }
  @include media-query(under-bp-l) {
    background: rgba($main-color,1);
    padding: 1rem;
    .PageWidthSetter{
      width: 75vw;
      max-width: 400px;
      margin: 0 auto;
    }
  }


  /* - - GlobalMenuBlock - - */
  .GlobalMenuBlock {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    @include media-query(over-bp-l) {
    }
    @include media-query(under-bp-l) {
      flex-wrap: nowrap;
    }
    .BlockHeader{
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1.0rem 0;
      .SiteLogo{
        font-size: 0.7rem;
        .Icon{
          font-size: 10rem;
        }
      }
      .SearchGroup{
        display: flex;
        align-items: center;
        padding: 0;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
        .SearchBox{
          margin: 0 auto;
          .FormItem{
            width: auto;
          }
        }
      }
    }
    .BlockContents{
    }
  }

}


/* - - GlobalMenuGroup （グローバルメニューの詳細部分） - - */
.GlobalMenuGroup{
  font-size: 1.6rem;

  // PC・SP共通処理 - - - - - - - - - - - -
    .MenuList{
      list-style: none;

      a{
        position: relative;
        display: flex;
        width: 100%;
        align-items: center;

      }

      // 子メニューの表示スタイル
      & {
        display: flex;
        li{
          position: relative;
          & > .sub-nav{
          }
        }
      }
    }


  // PC向け処理 - - - - - - - - - - - -
    @include media-query(over-bp-l) {
    .MainMenuList{

      // 子メニューの表示スタイル
      & {
        li{
          & > .sub-nav{
            position: absolute;
            top:    0%;
            left:  80%;
            //width: 300%;
            z-index: 5000;
            visibility: hidden;
            opacity: 0;
            transition: all .2s;
          }
          &:hover > .sub-nav,
          &:focus > .sub-nav{
            visibility: visible;
            opacity: 1;
            top:    0%;
            left: 100%;
          }
        }
      }
      .sub-nav-group{
        //box-shadow: 0 0 0.5rem rgba(0,0,0,0.5);
      }
    }
  }

  // メニュー部分のスタイル - - - - - - - - - - - -
  .MenuList{
    // 1階層目 - - - - - - - - - - - - - - - - -
    &.ul-level-1{
      justify-content: space-between;
      align-items: stretch;
      position: relative;
      flex-wrap: wrap;
      flex-direction: column;
      .li-level-1{
        @include media-query(over-bp-l) {
          &:first-child{
            display: none;
          }
        }
        @include media-query(under-bp-l) {
          border-top: 1px solid rgba(#fff, 0.25);
          &:last-child{
            border-bottom: 1px solid rgba(#fff, 0.25);
          }
        }
        & > a{
          width: 100%;
          align-items: center;
          justify-content: center;
          position: initial;
          line-height: 1.25;
          padding: 1rem 1rem;

          .Icon{
            transition: all 0.2s;
            opacity: 0.5;
            display: none;
          }
          .Label{
            width: auto;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 0;
            width: 100%;
            @include media-query(over-bp-l) {
              flex-direction: column;
            }
            @include media-query(under-bp-l) {
              align-items: center;
            }
            .Main{
              font-size: 2.75rem;
              @include media-query(under-bp-l) {
                font-size: 2.25rem;
              }
              //@extend %FontDecoratedLatin;
              font-family: 'Teko', 'Arial', 'Helvetica', sans-serif;
              letter-spacing: 0.05em;
              font-weight: 500!important;
              order: 1;
              line-height: 1.1;
            }
            .Sub{
              font-size: 1.2rem;
              @include media-query(under-bp-l) {
                font-size: 1.1rem;
              }
              font-weight: 600!important;
              order: 2;
            }
          }
        }
        &:not(.has-sub-nav) > a,
        &.ChildShowCmp > a{
          .Icon{
            opacity: 0;
          }
        }
        & > .sub-nav{
          @include media-query(over-bp-l) {
            color: #fff;
            background: $main-color-deep;
          }
        }
        &:hover > .sub-nav{

        }
        // @include media-query(over-bp-l) {
          html.PcView & > a:hover,
          html.PcView & > a:focus,
          html.PcView & > a.Active,
          html.PcView &:hover > a{
            text-decoration: none;
            background: $main-color-deep;
            background: darken($main-color, 15%);
            color: #fff;
          }
        // }
        &.current > a{
          background: $main-color-deep;
          background: darken($main-color, 15%);
          color: #fff;
        }
      }
    }
  }
  // 2階層目 - - - - - - - - - - - - - - - - -
  .ul-level-2{
    justify-content: space-between;
    position: relative;
    align-items: stretch;
    padding: 0;
    flex-wrap: wrap;
    @include media-query(over-bp-l) {
      flex-direction: column;
    }
    @include media-query(under-bp-l) {
      justify-content: center;
    }
    .li-level-2{
      @include media-query(over-bp-l) {
        width: 22.5rem;
      }
      @include media-query(under-bp-l) {
        min-width: 6.5em;
        margin: 0.5rem;
      }

      & > a{
        width: 100%;
        padding: 0.75em 1.75rem;
        align-items: center;
        justify-content: start;
        position: initial;
        line-height: 1.25;
        @include media-query(under-bp-l) {
          border: 1px solid;
          border-radius: 3em;
          justify-content: center;
        }
        .Icon{
          display: none;
        }
        .Label{
          width: auto;
          @include media-query(over-bp-m) {
            font-size: 1.4rem;
            font-weight: 800!important;
          }
          @include media-query(under-bp-m) {
            font-size: 1.2rem;
          }
        }
      }

      & > a:hover,
      & > a:focus,
      & > a.Active,
      &:hover > a{
        text-decoration: none;
        background: darken($main-color-deep, 15%);
        color: #fff;
      }
      &.current > a{
        color: $main-color-deep;
        background: #fff;
      }
    }
  }
}