/************************************
** 内容
************************************/
.content{
  margin-top: 24px;
}

/*エントリー・アーカイブの見出し*/
.entry-title,
.archive-title{
  font-size: 26px;
  margin: 16px 0;
  line-height: 1.3;
}

.archive-title{
  span{
    margin-right: 10px;
  }
}

.entry-content{
  margin-top: 1em;
  margin-bottom: 3em;
}

pre{
  line-height: 1.6;
  word-wrap: normal;
}

/*本文下カテゴリーとタグ*/
.entry-categories-tags{
  @extend %bottom_margin;
  >div{
    margin-bottom: 0.5em;
  }

  .tax-icon{
    margin-right: 0.4em;
  }
}

.ctdt-one-row{
  >div{
    display: inline;
  }
}

.ctdt-category-only{
  .entry-tags{
    display: none;
  }
}

.ctdt-tag-only{
  .entry-categories{
    display: none;
  }
}

.ctdt-none{
  display: none;
}

/*本文下カテゴリ*/
.cat-link{
  @include link_cancel(var(--cocoon-white-color));
  display: inline-block;
  margin-right: 5px;
  padding: 2px 6px;
  font-size: 12px;
  background-color: var(--cocoon-text-color);
  border-radius: var(--cocoon-badge-border-radius);
  word-break: break-all;

  &:hover{
    opacity: 0.5;
    color: var(--cocoon-white-color);
    // @include bgc_hover;
    // color: var(--cocoon-text-color);
  }
}

/*本文下タグ*/
.tag-link{
  @include link_cancel;
  display: inline-block;
  margin-right: 5px;
  padding: 1px 5px;
  font-size: 12px;
  border: 1px solid var(--cocoon-x-pallid-text-color);
  border-radius: var(--cocoon-badge-border-radius);
  word-break: break-all;

  &:hover{
    @include bgc_hover;
  }
}

/************************************
** 投稿・固定ページで使うHTML要素
************************************/
table {
  margin-bottom: 20px;
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  th,
  td{
    position: relative;
    padding: 0.5em;
  }

  th{
    background-color: var(--cocoon-xx-thin-color);
  }

  tr{
    &:nth-of-type(2n+1){
      background-color: var(--cocoon-xxx-thin-color);
    }

    // &:hover{
    //   @include bgc_hover;
    // }
  }

  &:not(.has-border-color) {
    :where(th, td) {
      border: 1px solid var(--cocoon-x-thin-color);
      // padding: 6px;
    }
  }

  // :is(th, td):has(.s-circle, .d-circle, .triangle, .cross, .b-question, .b-check){
  //   height: 60px;
  //   min-width: 80px;
  // }

}

///////////////////////////////////////
// レスポンシブテーブル
///////////////////////////////////////
.scrollable-table{
  -webkit-overflow-scrolling: touch;
  margin: 0;

  //1列目を固定
  &.stfc-sticky table:not(.wp-calendar-table) {
    tr{
      >*:first-child {
        background-color: #e9eff2;
        color: var(--cocoon-text-color);
        position: sticky;
        position: -webkit-sticky;
        left: 0;
        z-index: 2;
      }
    }
  }
}

.scrollable-table table{
  border-collapse: collapse;
  max-width: none;
  margin: 0;
}

.scrollable-table th{
  background-color: #eee;
}

.scrollable-table th,
.scrollable-table td{
  // padding: 3px 5px;
  white-space: nowrap;
}

//テーブルブロックデフォルト機能の「表のセル幅を固定」を有効にした場合は横スクロール表示しない
.scrollable-table .has-fixed-layout th,
.scrollable-table .has-fixed-layout td {
  white-space: normal;
}

.scrollable-table {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

// figure.wp-block-table.scrollable-block-table{
//   &.aligncenter,
//   &.alignleft,
//   &.alignright{
//     display: block;
//   }
// }

///////////////////////////////////////////
// テーブル修正
// 草村さん案
///////////////////////////////////////////
figure.wp-block-table table {
  width: auto;
}
// figure.wp-block-table[class*="align"] {
//   max-width: 100%;
//   display: block;
// }
// figure.wp-block-table[class*="align"] table {
//   width: auto;
//   margin-left: auto;
//   margin-right: auto;
// }
figure.wp-block-table.alignwide table,
figure.wp-block-table.alignfull table{
  width: 100%;
}
.main figure.wp-block-table {
  width: auto;
  max-width: 100%;
  display: block;
}
figure.wp-block-table{
  table {
    margin-right: auto;
  }
  &.aligncenter table {
    margin-left: auto;
  }
  &.aligncenter figcaption {
    text-align: center;
  }
  &.alignright table {
    margin-left: 0;
  }
}

// figure.wp-block-table table {
//   margin-right: auto;
// }
// figure.wp-block-table.aligncenter table {
//   margin-left: auto;
// }
// figure.wp-block-table.aligncenter figcaption {
//   text-align: center;
// }
// figure.wp-block-table.alignright table {
//   margin-left: 0;
// }

.scroll-hint-icon-wrap {
  overflow: hidden;
}


.article{
  @import "article";
  margin-bottom: 2em;
}

/************************************
** 引用（blockquote）
************************************/
blockquote {
  background-color: var(--cocoon-xxx-thin-color);
  border: 1px solid var(--cocoon-thin-color);
  padding: 1.4em 1.8em;
  position: relative;

  &::before,
  &::after{
    color: #C8C8C8;
    font-family: serif;
    position: absolute;
    font-size: 300%;

  }

  &::before {
    content: "“";
    line-height: 1.1;
    left: 10px;
    top: 0;
  }

  &::after {
    content: "”";
    line-height: 0;
    right: 10px;
    bottom: 0px;
  }

  cite{
    font-size: 0.7em;
  }
}

/*本文下情報*/
.footer-meta{
  font-size: 0.8em;
  text-align: right;
}

/*投稿者*/
.author-info .post-author{
  font-size: 14px;
}

/************************************
** ページ管理画面の設定で「本文のみ」表示
************************************/
.content-only{
  .header-container,
  .appeal,
  .ad-area,
  .sns-share,
  .date-tags,
  .sns-follow,
  .article-footer,
  .under-entry-content,
  .breadcrumb,
  .main-scroll,
  .footer,
  .go-to-top-button,
  .notice-area,
  .content-top,
  .content-bottom,
  .recommended
  {
    display: none;
  }
  .carousel{
    display: none !important;
  }
}

/************************************
** 外部リンク・内部リンク
************************************/
span.external-icon,
span.internal-icon{
  margin-left: 3px;
  font-size: 0.8em;
}

///////////////////////////////////////
// ログインして意外ユーザーに表示するメッセージ
///////////////////////////////////////
.login-user-only{
  text-align: center;
  padding: 2em;
  background-color: var(--cocoon-xxx-thin-color);
  border: 1px solid var(--cocoon-basic-border-color);
  // margin-bottom: 1.2em;
}

///////////////////////////////////////
// 投稿関連情報を表示
///////////////////////////////////////
.no-post-date .article-header .post-date,
.no-post-update .article-header .post-update,
.no-post-author .author-info {
  display: none;
}

.read-time{
  text-align: center;
  font-size: 0.7em;
  border-top: 4px double var(--cocoon-x-thin-color);
  border-bottom: 4px double var(--cocoon-x-thin-color);
  margin: 0 3%;
  margin-bottom: 1em;

  .hourglass-half-icon {
    margin-right: 3px;
  }
}

///////////////////////////////////////
// タイトルを表示しない
///////////////////////////////////////
.no-page-title .entry-title {
  display: none;
}