@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● list.css                                            */
/*    共通部品                                            */
/*    ・リスト                                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* リスト（汎用）
--------------------------------------------------- */
.DefaultList,
%DefaultList{
  margin: 1em 0;
  @include media-query(under-bp-m) {
    font-size: $font-size-s;
  }
  li{
    //margin: 1em 0;
    margin-left: 2em;
    line-height: 2;
    position: relative;
  }
  &.NoMargin{
    li{
      margin-top: 0;
      margin-bottom: 0;
    }

  }
}






/* LinkList （汎用リンクリスト）
--------------------------------------------------- */
.LinkList,
%LinkList{
  margin: 1em 0;
  list-style: none;
  @include media-query(under-bp-m) {
    font-size: $font-size-s;
  }
  li{
    margin: 0 auto;
    a{
      padding: 0.25em;
      position: relative;
      //@extend .hvr-textlink;
      
      // 別ウィンドウのリンクにアイコンを付加
      &[target="_blank"]{
        @extend %ExternalLink;
      }
      
      display: flex;
      align-items: center;
      width: 100%;
      .Icon{
        &.icon-right-dir{
          @extend .icon-decorate-circle;
        }
        width: 3.0rem;
      }
      .Label{
        //width: calc(100% - 2.5rem);  //アイコンサイズ分をマイナス
      }

      &:hover,
      &:focus{
        color: #fff;
        background: #222;
      }
    }
  }

}






/* FileLinkList （ファイルリンクリスト ※ファイルリンク用の派生）
--------------------------------------------------- */
.FileLinkList{
  @extend %LinkList;
  
  li{
    a,
    .Label{
      &::after{
        display: none!important;  // extアイコンを非表示
      }
    }
  }
}







/* ほか
--------------------------------------------------- */

/* ol: タイプ１ */
ol.Type1 {
  counter-reset: num;
  margin: 1.25em 0;
  list-style: none;
  @include media-query(under-bp-m) {
    font-size: $font-size-s;
  }
  > li,
  > li::before{
    vertical-align: top;
  }
  
  > li {
    position: relative;
    margin: 0.75em 0;
    margin-left: 2em;
    &:first-child {
      margin-top: 0;
    }
    &::before {
      counter-increment: num;
      content:  "（"counter(num) "）";
      font-weight: normal;
      position: absolute;
      right: 100%;
      top:  0;
      white-space: nowrap;
    }
  }
}
    


/* ol: タイプ２ */
ol.Type2 {
  counter-reset: num;
  margin: 1.25em 0;
  list-style: none;
  @include media-query(under-bp-m) {
    font-size: $font-size-s;
  }
  > li,
  > li::before{
    vertical-align: top;
  }
  
  > li {
    margin: 0.75em 0;
    margin-left: 2em;
    position: relative;
    &:first-child {
      margin-top: 0;
    }
    &::before {
      content: counter(num);
      counter-increment: num;
      border: 1px solid;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      width:  1.25em;
      transform: scale(0.8);
      line-height: 1.25;
      position: absolute;
      right: 100%;
      top: 0.125em;
    }
  }
}



/* 装飾付きリスト  */
ol.DecoratedList {
  counter-reset: mycounter;
  list-style: none;
  @include media-query(under-bp-m) {
    font-size: $font-size-s;
  }

  li {
    margin-bottom: 0.75em;
    padding-left:  2.0em;
    position: relative;
    &::before {
      content: counter(mycounter);
      counter-increment: mycounter;
      background-color: #fecb1a;
      color: #222;
      display: inline-block;
      float: left;
      line-height:  1.5em;
      margin-left: -2em;
      text-align: center;
      height: 1.5em;
      width:  1.5em;
      border-radius: 50%;
    }
  }
}



/* ポイントリスト  */
.PointList{
  list-style: none;
  counter-reset: my-counter;
  margin-left: 0!important;
  margin-bottom: 1.25em!important;
  @include media-query(under-bp-m) {
    font-size: $font-size-s;
  }

  & > li{
    position: relative;
    padding: 0.5em 0;
    padding-left: 6em!important;
    margin: 0;
    border-bottom: 1px solid #bbd7f4;
    line-height: 1.5;
    @include media-query(under-bp-m) {
      padding: 1em 0;
      padding-left: 5em!important;
      &::before,
      &::after{
        font-size: 62.5%;
      }
      &::after{

        top:  2.25em;
      }
    }

    &::before{
      font-family: "Century Gothic", sans-serif;
      content: "POINT " counter(my-counter);
      counter-increment: my-counter;
      position: absolute;
      left: 0;
      display: inline-block;
      color: #fff;
      background: #447cb5;
      text-align: center;
      line-height: 1.5;
      border-radius: 0.25em;
      font-size: 75%;
      padding: 0.25em 0.5em;
      width: 5em;
      font-weight: bold;
    }
    &::after{
      font-size: 75%;
      content: "";
      position: absolute;
      top:  1.375em;
      left: 6em;
      border-top: 0.3em solid transparent;
      border-left: 0.5em solid #447cb5;
      border-bottom: 0.3em solid transparent;
    }
  }

}
    
    
    





/* フロー（手順）リスト  */
.FlowList,
%FlowList{
  list-style: none;
  counter-reset: my-counter;
  margin-left: 0!important;
  @include media-query(under-bp-m) {
    font-size: $font-size-s;
  }

  & > li{
    position: relative;
    padding: 0.75em 1em;
    margin: 1em 0;
    background: rgba($main-color, 0.125);
    border-radius: 0.5em;
    @include media-query(over-bp-m) {
      padding-left:  8em!important;
    }
  
    &::before{
      /*font-family: "Century Gothic", sans-serif;*/
      //font-family: "Impact", sans-serif;
      content: "STEP." counter(my-counter);
      counter-increment: my-counter;
      color: $main-color;
      white-space: nowrap;
      letter-spacing: 0.05em;
      @include media-query(over-bp-m) {
        display: inline-block;
        position: absolute;
        left: 1em;
        border-right: 1px dotted;
        padding-right: 1em;
      }
      @include media-query(under-bp-m) {
        display: block;
        position: static;
        line-height: 1;
        margin: 0.5em 0;
        border-bottom: 1px dotted;
        width: 4em;
        padding-bottom: 0.5em;
      }
    }

    &:not(:last-child)::after{
      content: "";
      position: absolute;
      bottom: -0.7em;
      left: 50%;
      margin-left: -0.5em;
      
      z-index: 1;
      width:  8px;
      height: 8px;
      border-top:   2px solid  $main-color;
      border-right: 2px solid  $main-color;
      transform: rotate(135deg) translate3d(0,0,0);
    }
  }
}



/* スポットリスト  */
.SpotList{
  @extend %FlowList;
  & > li{
    &::before{
      content: "SPOT." counter(my-counter);
    }
  }
}





            
/* ※印付きリスト :  */
.AsteriskList{
  list-style: none;
  opacity: 0.75;
  margin-left: 1.5em;
  font-size: $font-size-s;
  @include media-query(under-bp-m) {
    font-size: $font-size-ss;
  }

    & > li{
      position: relative;
      &::before{
        content: "※";
        position: absolute;
        left: -1.25em;
        top: 0;
      }
    }
    li{
      margin: 0.25em 0;
    }
}



/* InlineList（インライン表示させるリスト）
--------------------------------------------------- */
.InlineList{
  list-style: none;
  @extend %DefaultText;
  margin-bottom: 0;
  li{
    display: inline-block;
    margin-right: 1em;
    white-space: nowrap;
    &::before{
      content: "・";
    }
    &:not(:last-child)::after{
      //content: "、";
    }
  }
}




/* BlogList （ブログ向け汎用リスト）
--------------------------------------------------- */
.BlogList{
  list-style: none;
  font-size: $font-size-d;
  line-height: 1.5;
  @include media-query(under-bp-m) {
    font-size: $font-size-s;
  }
    > li{
      border-top: 1px solid rgba($text-color, 0.25);
      &:last-child{
        border-bottom: 1px solid rgba($text-color, 0.25);
      }
      a{
        padding: 0.75em 0;
        transition: all .2s;
        display: block;
        
        .Icon{
          &.icon-right-dir{
            @extend .icon-decorate-circle;
          }
          display: inline-block;
          width: 3rem;
          //transform: scale(1.5);
          text-align: center;
        }
        &.NoLink{
          .Icon{
            display: none;
          }
        }
      
        // 別ウィンドウのリンクにアイコンを付加
        &[target="_blank"] .TextItem .Title{
          @extend %ExternalLink;
          // @include media-query(under-bp-m) {
          //   &::after{
          //     position: absolute;
          //     right: 0;
          //   }
          // }
          
        }
      }
      > .inner{
        .ImageItem{
          line-height: 0;  //不要な余白ができるのを防止
        }
        .TextItem{
          flex-wrap: nowrap;
          justify-content: flex-start;
          //align-items: flex-start;
          align-items: center;
          display: flex;
          @include media-query(under-bp-m) {
            flex-direction: column;
            align-items: start;
          }
          .Meta{
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 0;
            @include media-query(under-bp-m) {
              // font-size: $font-size-s;
            }
            &,
            & *{
              vertical-align: middle;
            }
            .Date{
              width: 6.5em;  //[NEW] 表示分を踏まえておく
              white-space: nowrap;
              color: $main-color;
              @extend %FontDecoratedLatin;
              //transform: scale(1.25);
              //transform-origin: 0% 50%;
            }
            .Category{
              margin-right: 0.5rem;
              //color: $base-color;
              &:not(:empty){
                // border: 1px solid;
                background: rgba(0,0,0,0.5);
                padding: 0.25em;
              }
              
              font-size: $font-size-ss;
              font-weight: 600;
              width: 11em;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              line-height: 1.5;
              //display: none;
              // border-radius: 0.375em;
            }
          }
          .Title{
            margin-bottom: 0;
            font-weight: 700;
            display: flex;
            @include media-query(under-bp-m) {
              font-size: $font-size-d;
            }
            .Icon{
            }
            .Label{
              flex-grow: 1;
            }
          }
        }
        
        /* [NEW]を表示 */
        &.New {
          .TextItem{
            .Date::after{
              content: "NEW";
              display: inline-block;
              @extend %FontDecoratedLatin;
              color: #fff;
              background: #e35;
              border-radius: 0.25em;
              padding: 0em 0.5em;
              margin-left: 0.5em;
              line-height: 1.5;
              vertical-align: middle;
              font-weight: 500;
              font-size: 1.0rem;
            }
          }
        }
      }
    }
 }





/* 汎用メニュー
--------------------------------------------------- */

/* MenuList */
.MenuList{
  list-style: none;
    li{
      // margin: 0;
      // a{
      //   position: relative;
      //   @extend .hvr-textlink;
        
      //   display: flex;
      //   width: 100%;
      //   .Icon{
      //     &.icon-right-dir{
      //       @extend .icon-decorate-circle;
      //     }
      //   }
      //   .Label{
      //     //width: calc(100% - 2.5rem);  //アイコンサイズ分をマイナス
      //   }
      // }
    }
  }



/* ContentsMenuList（Baserが出力するメニューリスト）
--------------------------------------------------- */
.ContentsMenuList{
  
}







/* SearchResultList（サイト内検索の結果表示リスト）
--------------------------------------------------- */
.SearchResultList{
  list-style: none;
  li{
    margin: 0;
    position: relative;
    padding: 1.5em;
    margin: 0.5em;
    background: #333;
    strong{
      color: $accent-color;
      color: $main-color;
    }
    .result-head{
      font-size: $font-size-m;
      display: flex;
      padding: 0.25em 0;
      margin-bottom: 1em;
      align-items: center;
      width: 100%;
      @include media-query(under-bp-m) {
        font-size: $font-size-d;
      }
      a{
        .Icon{
          color: $main-color-deep;
          margin-right: 0.25em;
        }
        .Label{
          //width: calc(100% - 2.5rem);  //アイコンサイズ分をマイナス
        }
        @extend .hvr-underline-effect;
      }
    }
    .result-body{
      font-size: $font-size-s;
      margin-left: 4rem;
      @include media-query(under-bp-m) {
        margin-left: 0rem;
        font-size: $font-size-s;
      }
    }
  }
}




/* PageList
--------------------------------------------------- */
/* PageList （本文エリア内に表示させるページリスト） */
.PageList{
  list-style: none;
  li{
    margin: 0;
    // border-top: 1px solid  rgba($text-color,0.25);
    // &:last-child{
    //  border-bottom: 1px solid  rgba($text-color,0.25);
    // }
    position: relative;
    a{
      display: flex;
      padding: 1em 0;
      align-items: flex-start;
      @extend .hvr-underline-effect;

      //width: 100%;
      .Icon{
        color: $main-color;
      }
      .Label{
        //width: calc(100% - 2.5rem);  //アイコンサイズ分をマイナス
      }
      &[target="_blank"]{
        .Label{
          @extend %ExternalLink;
        }
      }
    }
  }
  // 多階層リスト
  //&{
  &{
      .li-level-1{
        padding: 1.0em 4rem;
        @include media-query(under-bp-m) {
          padding: .75em 1rem;
        }
        //box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
        //margin: 0 0 1.25rem;
        border-bottom: 1px dashed rgba(0,0,0,0.125);
        &:first-child{
          border-top: 1px dashed rgba(0,0,0,0.125);
        }
        a{
          padding: 0.5em 0;
          font-weight: 700;
          font-size: $font-size-m;
          @include media-query(under-bp-m) {
            font-size: $font-size-d;
          }
          .Icon{
            margin-right: 0.5rem;
          }
        }
      }

  }
  &.multi-level{
      .li-level-1{
        padding: 2em 4rem;
        @include media-query(under-bp-m) {
          padding: .75em 1rem;
        }
        a{
          //justify-content: center;
          font-size: $font-size-l;
          @include media-query(under-bp-m) {
            font-size: $font-size-m;
          }
        }
      }
      .ul-level-2{
        margin-top: 1.5em;
        margin-left: 1rem;
        border-left: 1px solid $base-color;
        padding-left: 3rem;
        .li-level-2{
          margin: 0 0 0;
          a{
            padding: 0.375em 0;
            font-weight: 700;
            font-size: $font-size-d;
            justify-content: left
          }
        }
      }
      .ul-level-3{
        margin-left: 6rem;
        margin-bottom: 1.5em;
        @include media-query(under-bp-m) {
          margin-left: 3rem;
        }
        display: flex;
        flex-wrap: wrap;
        padding: 0.5em 0;
        .li-level-3{
          border: none;
          margin-right: 2em;
          margin-bottom: 0.5em;
          a{
            padding: 0;
            font-weight: 500;
            font-size: $font-size-s;
    
          }
        }
      }
    }
}




/* SNS メニュー
--------------------------------------------------- */
.SnsMenu{
  display: flex;
  list-style: none;
  justify-content: space-around;
  justify-content: center;
  margin: 0 auto;
    li{
      margin: 0 0.5rem;
      &:first-child{
        margin-left: 0!important;
      }
      &:last-child{
        margin-right: 0!important;
      }
      a{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        margin: 0;
        border-radius: 100%;
        transition: all .2s;
        //color: $main-color-deep;
        color: #222;
        .Icon{
          display: inline-flex;
          font-size: 2.0rem;
          width:  4rem;
          height: 4rem;
          align-items: center;
          justify-content: center;
        }
        .Label{
          display: none;
        }
        &:hover,
        &:focus{
          color: #fff;
          background: #222;
        }
      }
    }
  }




/* BannerList
--------------------------------------------------- */
.BannerList{

  list-style: none;
  // text-align: center;
  // display: flex;
  // flex-wrap: wrap;
  // align-items: center;
  // justify-content: flex-start;
  // @include media-query(under-bp-m) {
  //   flex-direction: column;
  // }
    li{
      // padding: 0.75em;
      // @include media-query(over-bp-m) {
      //   width: 20%;
      // }
      a:hover img,
      a:focus img{
        //filter: brightness(1.1);
        opacity: 0.8;

      }
    }
  }


/* ThumbnailList
--------------------------------------------------- */
.ThumbnailList{
  list-style: none;
  li{
    a{
      display: block;
      @extend .hvr-childimg-zoom;
      //@extend .hvr-textlink;
      
      // 別ウィンドウのリンクにアイコンを付加
      &[target="_blank"] .Label{
        @extend %ExternalLink;
        padding-right: 0;
      }
    }
    .ImageItem{
      margin: 0 0 1rem;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 0 0.5rem;
      flex-direction: column;
      .Image{
        margin: 0;
        img{
          width: 100%;
          height: auto;
          image-rendering: -webkit-optimize-contrast;
        }
      }
      .Caption{
        text-align: center;
        font-size: $font-size-s;
        margin: 0.75em 0 0;
        line-height: 1.5;
        @include media-query(under-bp-m) {
          margin-top: 0.5em;
          font-size: $font-size-ss;
        }
      }
    }
    .TextItem{
      margin: 1em 0 0;
      line-height: 1.5;
      .Icon{
        margin-right: 0.25rem;
        display: inline-flex;

        &.icon-right-dir{
          @extend .icon-decorate-circle;

          &::before{
          }
        }
      }
    }
  }
}


/* ボタンリスト （共通）
--------------------------------------------------- */
.ButtonList{
  list-style: none;
  text-align: center;
  display: flex;
	justify-content: center;
  flex-wrap: wrap;
  li{
    margin: 5px;
  }
  .TabFooter &{
    margin-top: 1em;
  }



  // ページナビ（前後リンク）
  &.ContentsNavi{
    justify-content: space-between;
    li{
      a{
        padding-left: 0.75em;
        padding-right: 0.75em;
        .Icon{
          margin: 0;
        }
      }
      &:last-child{
        a{
          .Label{
            order: 1;
          }
          .Icon{
            order: 2;
          }
        }
      }
    }
  }
}




/* TabMenu （共通）
--------------------------------------------------- */
.TabMenu{
  
    /* - - list - - */
    .TabList{
      list-style: none;
      margin: 1em auto!important;
      display: flex;

      li{
        margin: 0!important;
        a{
          display: block;
          background: #fff;
          text-align: center;
          position: relative;
          margin: 5px;
          border: 1px solid #ccc;
          cursor: pointer;

          &::after{
            content: "";
            display: block;
            left:   0px;
            bottom: -1px;
            width: 100%;
            height: 1px;
            background: #1450b4;
            position: absolute;
            transition: height .2s;
          }

        }
        .Label{
          padding: 0.75em 1em;
          min-width: 8.5em;
          display: inline-block;
        }
        &.Active a::after,
        html.PcView a:hover::after{
          height: 4px;
        }
      }
    }

}




// タグ一覧
.TagGroup{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  justify-self: center;
  padding: 0.5em 1em;
  margin-bottom: 1.5em;
  // background: #222;
  // width: fit-content;
  // border-radius: 0.5em;
  .Heading{
    margin: 0;
    font-size: $font-size-s;
    margin-right: 0.5em;
  }
  .TagList{

  }
}
.TagList{
  display: flex;
  list-style: none;
  font-size: $font-size-ss;
  &.SelectedTagList{
    li{
      padding: 0 0.5rem;
      border: 1px solid rgba(255,255,255,1);
      border-radius: 0.25em;
    }
  }
  li{
    max-width: 8em;
    text-align: center;
    margin: 0 0.25rem;
    &:last-child{
      // border-right: 1px solid rgba(255,255,255,0.5);
    }
    a{
      display: block;
      padding: 0.125em 0.5em;
      border: 1px solid rgba(255,255,255,1);
      border-radius: 0.25em;
      min-width: 4em;
      text-align: center;
    }
    &.current a{
      color: $main-color-deep;
      background: #fff;
      border-color: #fff;
    }
    // 特定のタグを非表示
    &[data-tag="「今日の遺跡・博物館」に表示"],
    &[data-tag="「サイネージ」に表示"]{
      display: none;
    }
  }
}