@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● block.css                                           */
/*                                                        */
/*    ブロックの定義                                      */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.MainContentsArea {}





/* DefaultBlock (ページ・フォーム・ブログ全般の基本スタイル)
--------------------------------------------------- */
.DefaultBlock{
  margin: 0 auto;
  max-width: $page-width-max;
  position: relative;
  z-index: 1;
  @include media-query(under-bp-m) {
    // max-width: 420px;
  }

   + .DefaultBlock{
    margin-top: 5rem;
  }

    /* タイトル部分 */
    .BlockHeader{
      &:not(:empty){
        margin-bottom: 5rem;
      }
    }



    /* コンテンツ部分 */
    .BlockContents{
      p{
        &:not(.Catch){
          @extend %DefaultText;
        }
        a:not(.ImageLink) {      
          @extend %DefaultLink;          
          // 別ウィンドウのリンクにアイコンを付加
          &[target="_blank"]{
            @extend %ExternalLink;
            padding-right: 1em;
            &::after{
              margin-left: 0;
              position: absolute;
            }
          }
        }
      }
      ul:not([class]),
      ol:not([class]){
        @extend %DefaultList;
      }
    }



    /* フッタ部分 */
    .BlockFooter{
      margin-top: 2.5rem;
      .ButtonGroup{
        display: flex;
        justify-content: center;
      }
    }

}




/* DefaultBlock (インデックス・アーカイブ用)
--------------------------------------------------- */
.DefaultBlock.Index,
.DefaultBlock.Archives{



}




/* DefaultBlock (詳細表示画面用)
--------------------------------------------------- */
.DefaultBlock.Detail{


    /* タイトル部分 */
  .BlockHeader{
    
    .Meta{
      display: block;

      .Date{
        line-height: 1;
        padding: 0;
      }
    }
  }

  /* コンテンツ部分 */
  .BlockContents{
    
  }

  .BlockFooter{
  }
}






/* ブログプラグイン用
--------------------------------------------------- */



/* - - 共通 - - */
.BlogBlock {
  .BlockHeader{
    .Heading:not([class*='Type']){
      .Icon{
        color: $base-color;
      }
    }
    .Description{
      margin: 1.5em auto;
      width: 90%;
      p{
        @extend %DefaultText;
        margin: 0;

      }
    }
  }
  // インフォメーションブログ特殊処理
  &.InformationBlock{
    .BlockHeader{
      .Heading {
        .Label{
          margin-top: 0.5em;
        }
      }
    }
    .BlockContents{
      .BlogList{
        li{
          a{
            // @extend .hvr-default;
            @extend .hvr-default-dark;
            padding: 0.75em 0.75rem;
          }
        }
      }
      &.Important{
        background: #222;
        padding: 2.5rem;
        margin-bottom: 2.5rem;
        @include media-query(over-bp-m) {
          margin: 0 -2.5rem 2.5rem;
        }
        .Heading{
          font-size: $font-size-m;
          font-weight: 600;
          letter-spacing: 0.1em;
          margin-bottom: 0.5em;
        }
        .BlogList{
          li{
            border: none;
          }
        }
      }
    }
  }
  &:not(.InformationBlock){
    .BlockHeader{
      border-bottom: none;
    }
  }

  //カテゴリ表示 (CategoryList)
  .CategoryList {
    list-style: none;
    display: flex;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: stretch;
    li{
      width: calc(100% / 4);
      @include media-query(under-bp-m) {
        width: calc(100% / 2);
      }
      margin: 0.5rem 0;
      a{
        height: 100%;
        text-align: center;
        margin: 0 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5em 0.5em;
        background: #f4f4f4;
        font-size: $font-size-s;
        font-weight: 700;
        line-height: 1.25;
        min-width: 12em;
        position: relative;
        @include media-query(under-bp-m) {
          font-size: $font-size-ss;
          font-weight: 500;
          padding: 1.0em 0.5em;
        }
        &::after{
          content: "";
          display: block;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 2px;
          transition: height 0.2s;
          background: #0e41a4;;
        }
      }
      & a:hover,
      &.Active a,
      &.current a,
      & a:focus{
        &::after{
          height: 5px;
        }
      }
    }
  }
  .BlockFooter{
    .Button{
      border: none;
    }
  }

}




/* - - 一覧表示用（トップ） - - */
  .BlogBlock.Top {
  }




/* - - 一覧表示用 - - */
.BlogBlock.List{
}




/* - - 詳細表示用 - - */
.BlogBlock.Detail{
  .BlockHeader{
    .Meta{
      font-weight: normal;
      position: relative;
      display: flex;
      letter-spacing: normal;
      align-items: center;
      justify-content: center;
      @include media-query(under-bp-m) {
        //font-size: $font-size-s;
        margin-bottom: 0.5em;
      }
      &,
      & *{
        //vertical-align: middle;
      }
      .Date{
        font-size: $font-size-s;
      }
      .Category{
        margin-right: 1em;
        //color: $base-color;
        border: 1px solid;
        //background: #fff;
        font-size: $font-size-ss;
        font-weight: 600;
        min-width: 8em;
        padding-left: 0.75em;
        padding-right: 0.75em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
    }
    .eye-catch{
      text-align: center;
      img{
        @include media-query(over-bp-l) {
          min-width: 800px;
        }

      }
    }
    .Heading{
      
      @include media-query(under-bp-m) {
        font-size: 137.5%;
      }
    }
  }
  .BlockContents{
    .PostOutline{ // 概要
      margin: 0 auto 1em;
    }
    .ReserveButton{
      
    }
  }

  .BlockFooter{
    margin-top: 2.5rem;
    .ButtonGroup{
      display: flex;
      justify-content: center;
    }
  }
}




/* Eventブログ
--------------------------------------------------- */
.EventBlogBlock{
  .BlockHeader{
    position: relative;

  }

  .BlogList{      
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // justify-content: flex-start;
    @include media-query(over-bp-m) {
      &.lastline_cnt_2{
        &::after{
          content:"";
          display: block;
          width:30%;
        }
      }
    }
    > li{
      border: none;
      @include media-query(over-bp-m) {
        // margin-right: calc(33.3% - 27.5%);
        // width: 27.5%;
        width: 30%;
        margin-bottom: 50px;
      }
      @include media-query(under-bp-m) {
        width: 100%;
        margin: 0 auto 25px;
      }
      a{
        &:not(.NoLink){
          @extend .hvr-childimg-zoom;
        }
      }
      .ImageItem{
        margin-bottom: 1.5rem;
        position: relative;
        background: rgba(0,0,0,0.25);
        .Icon{
          position: absolute;
          left:   0rem;
          bottom: 0rem;
          z-index: 5;
          &::before{
            border-radius: 0;
            transform: none;
          }
        }
        .Image{
          width: 100%;
          @include media-query(over-bp-m) {
            @include aspect-ratio(1 / 1);
            img{
              object-fit: cover;
            }
          }
          @include media-query(under-bp-m) {
            img{
              width: 100%;
            }
          }
        }
      }
      .TextItem{
        flex-direction: column;
        align-items: flex-start;
        > *{
          line-height: 1.5;
        }
      }
    }
  }
  .BlogList > li > .inner .TextItem,
  .BlockHeader{
    
    .Meta{
      margin: 0 0 0.5em;
      .Category{
        margin-top: 0;
        margin-bottom: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.125em 0.25em;
        
        background: rgba(0, 0, 0, 0.5);
        padding: 0.25em;
        border: none!important;
      }
    }
    .Title{
      font-size: $font-size-m;
      margin-bottom: 0.25em;
    }
    .HeldTerm{
      width: auto!important;
      color: $main-color;
      font-weight: 600;
      font-size: $font-size-s;
      margin: 0 0 0.25em;
    }
    .OtherInfoGroup{
      font-size: $font-size-ss;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      .Place,
      .Fee,
      .Capacity{
        display: flex;
        align-items: baseline;
        margin: 0.25em 0;
        margin-right: 1em;
        line-height: 1.25;
        .Heading{
          white-space: nowrap;
          line-height: 1;
          display: inline-flex;
          padding: 0.375em;
          padding-right: 1em;
          color: #fff;
          background: rgba($main-color,0.6);
          clip-path: polygon(80% 0%, 100% 50%, 80% 100%, 0% 100%, 0% 50%, 0% 0%);
          font-size: $font-size-ss;
          margin-right: 0.125em;
        }
      }
    }
  }
  .BlockHeader{

    .Meta{
      justify-content: center!important;
    }
    .HeldTerm{
      text-align: center!important;
    }
  }
}




/* PageBlock (固定ページ表示用)
--------------------------------------------------- */
.PageBlock{
  .BlockHeader{
    .ImageItem{
      &.EyeCatch{
        .Image{
          text-align: center;
        }
      }
    }
  }
}



/* BannerBlock (バナー表示用)
--------------------------------------------------- */
.BannerBlock{
}






/* SearchBlock (サイト内検索 結果表示用)
--------------------------------------------------- */
.SearchBlock{
  .BlockHeader{
    .Heading{
      .Icon{
        color: rgba(64, 164, 179, 1);
      }
      .Label{
        margin: 0.5em 0 1em;
      }
    }
    > p{
      strong{
        font-size: $font-size-l;
        margin: 0 0.1em;
      }
    }
    // Baserが出力する「件数選択リスト」
    .list-num{
      margin: 1em auto;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      strong{
        line-height: 1;
        display: inline-flex;
        padding: 0.5em;
        padding-right: 1em;
        color: #fff;
        background: #333;
        clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 0% 50%, 0% 0%);
        font-size: $font-size-ss;
        margin-right: 1em;
      }
      p{
        line-height: 1;
        span{
          font-size: $font-size-l;
          padding: 0.125em;
          display: inline-block;
          &.current{
            font-weight: 600;
            position: relative;
            &::after{
              content: "";
              display: block;
              height: 2px;
              background: $base-color;
              width: 100%;
              position: absolute;
              top: 100%;
              left: 0%;
            }
          }
        }
      }
    }
  }
  .BlockContents{
    padding: 2.5rem;
    @include media-query(under-bp-m) {
      padding: 1.0rem;
    }
  }
}







/* LocalMenuBlock (ローカルメニュー)
--------------------------------------------------- */
.LocalNaviBlock{
  margin-bottom: 1.5rem;
  .BlockContents{
    @include media-query(under-bp-m) {
      overflow-x: hidden;
      .swiper-container{
        margin: 0 calc(-2 *  #{$sp-padding});
      }
    }
    .ContentsMenuList{
      display: flex;
      @include media-query(over-bp-m) {
        flex-wrap: wrap;
      }
      &.has1elements{
        display: none; // 子要素が1件のみの時は表示しない
      }
      li{
        margin: 0;
        padding: 0.25em;
        border: none;
        box-shadow: none;
        @include media-query(over-bp-m) {
          min-width: 15%;
          min-width: 20%;
        }
        a{
          white-space: nowrap;
          display: flex;
          font-weight: 600;
          font-size: $font-size-s;
          border: 1px solid;
          border-radius: 0.5em;
          padding: 0.875em 1.5em;
          justify-content: center;
          @extend .hvr-default-dark;
          @include media-query(under-bp-m) {
            font-size: $font-size-ss;
          }
          .Icon{
            color: $main-color;
            display: none;
          }
          .Label{
            min-width: 6em;
            text-align: center;
          }
          &[target="_blank"]{
            .Label{
              @extend %ExternalLink;
            }
          }
        }
        &.current,
        &.Active{
          a{
            color: $main-color-deep;
            background: #fff;
            border-color: #fff;
            font-weight: 800;
          }
        }
      }
    }
  }
  .BlockFooter{
    .Button{
      border: none;
      @include media-query(under-bp-m) {
        font-size: $font-size-s;
      }
    }
  }
}






/* イベントカレンダー用
--------------------------------------------------- */
.EventScheduleBlock{
  .BlockHeader{
    position: relative;
    .ContentsNavi{
      position: absolute;
      width: 100%;
      z-index: 50;
      top: 2.5em;
    }

  }
  &.Detail{
    .BlockFooter{
      margin-top: 0;
    }
  }
}