@charset "UTF-8";

/* =============================================================================

Post Contents CSS

・投稿スタイル用CSS「.bpc-×××」

上記はここに記述する

============================================================================= */


/* リセット
============================================================================= */
:is(.editor-styles-wrapper, .post-contents) h1,
:is(.editor-styles-wrapper, .post-contents) h2,
:is(.editor-styles-wrapper, .post-contents) h3,
:is(.editor-styles-wrapper, .post-contents) h4,
:is(.editor-styles-wrapper, .post-contents) h5,
:is(.editor-styles-wrapper, .post-contents) h6 {
  margin: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-weight: inherit;
}

/* ---- List: ul / ol を素に ------------------------------------------ */
:is(.editor-styles-wrapper, .post-contents) ul,
:is(.editor-styles-wrapper, .post-contents) ol {
  margin: 0;
  padding: 0;
  list-style: none; /* マーカーは post-contents.css で設計 */
}
:is(.editor-styles-wrapper, .post-contents) li {
  margin: 0;
  padding: 0;
}

/* ---- Table: 罫線・余白・幅の既定を外す ------------------------------ */
:is(.editor-styles-wrapper, .post-contents) table {
  border-collapse: collapse;
  border-spacing: 0;
  width: auto;      /* 必要なら 100% に戻すのは post-contents.css 側で */
  margin: 0;
  max-width: 100%;  /* はみ出し防止の保険（任意） */
}
:is(.editor-styles-wrapper, .post-contents) th,
:is(.editor-styles-wrapper, .post-contents) td {
  padding: 0;
  border: 0;
  text-align: inherit;
  vertical-align: top;
  font: inherit;
  line-height: inherit;
}

/* ---- Button: ネイティブ & WPブロックボタンを素に -------------------- */
/* ネイティブボタン */
:is(.editor-styles-wrapper, .post-contents) button,
:is(.editor-styles-wrapper, .post-contents) input[type="button"],
:is(.editor-styles-wrapper, .post-contents) input[type="submit"],
:is(.editor-styles-wrapper, .post-contents) input[type="reset"] {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* WPボタン（ブロック） */
:is(.editor-styles-wrapper, .post-contents) .wp-block-buttons > .wp-block-button {
  display: inline-flex;
}
:is(.editor-styles-wrapper, .post-contents) .wp-block-button .wp-block-button__link {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  display: inline-block;
}

/* ---- Link: 下線は無効化（本文デザイン側で制御） --------------------- */
:is(.editor-styles-wrapper, .post-contents) a:where(:not(.wp-element-button)) {
  text-decoration: none;
}


/* コンテンツ
============================================================================= */
.post-contents {
  --bpc-mt:4.8rem;

  a[href][data-type="link"] {
    color:var(--cc-blue-A);
    text-decoration: underline;

    @media (hover:hover) {
      &:hover {
        text-decoration: none;
      }
    }
  }

  .bpc-block {
    & + .bpc-block {
      margin-top:var(--bpc-mt);
    }
  }

  .bpc-paragraph,
  .bpc-list {
    .bpc-block + & {
      margin-top:var(--bpc-mt);
    }
  }

  .bpc-heading {
    font-weight: 700;
    &:is(h2) {
      margin-block:7.2rem 4.8rem;
      color:#fff;
      padding:1.2rem 2.8rem;
      font-size:2.4rem;
      line-height:1.5;
      background-color:var(--cc-blue-A);
      border-radius:var(--radius-C);

      @media (width <= 767px) {
        margin-block:8.0rem 6.0rem;
        padding:1.6rem 3.2rem;
        font-size:3.6rem;
      }
    }
    &:is(h3) {
      margin-block:6.0rem 2.0rem;
      padding-bottom:1.2rem;
      padding-left:.4rem;
      font-size:2.2rem;
      line-height:1.5;
      border-bottom:1px solid var(--cc-blue-A);

      @media (width <= 767px) {
        margin-block:8.0rem 3.6rem;
        padding-bottom:1.6rem;
        font-size:3.2rem;
      }
    }
    &:is(h4,h5) {
      margin-block:4.8rem 2.0rem;
      padding:.8rem 1.8rem;
      font-size:2.0rem;
      line-height:1.5;
      border-radius:var(--radius-C);
      @media (width <= 767px) {
        margin-block:6.0rem 3.6rem;
        padding:1.2rem 2.4rem;
        font-size:2.8rem;
      }
    }
    &:is(h4) {
      background-color:#ccedf7;
    }
    &:is(h5) {
      background-color:#fff;
    }
  }

  .bpc-list {
    line-height:1.5;

    li {
      position:relative;
      & + li,
      .bpc-list {
        margin-top:.5lh;
      }
    }

    &:is(ul) {
      > li {

        padding-left:1.6rem;
        @media (width <= 767px) {
          padding-left:3.2rem;
        }
        &::before {
          content: "";
          display: inline-block;
          border-radius: 50%;
          width: 6px;
          height: 6px;
          background-color: #c4c4c4;
          position: absolute;
          top: calc(.5lh - 3px);
          left: .02rem;
        }
      }
    }

    &:is(ol) {
      counter-reset: num;
      > li {
        padding-left:2em;
        &::before {
          counter-increment: num;
          content: counter(num, decimal-leading-zero);
          width:1.5em;
          font-size:1em;
          background-image:linear-gradient(to bottom,transparent calc(1lh - 1em),var(--cc-black-A) calc(1lh - 1em),var(--cc-black-A) calc(.5lh + .5em),transparent calc(.5lh + .5em));
          background-size:1px 100%;
          background-repeat:no-repeat;
          background-position:center right;
          position: absolute;
          left: 0;
          letter-spacing: -.05em;
        }
      }
    }
  }

  .bpc-buttons {
    display:flex;
    @media (width <= 767px) {
      &.aligncenter {
        justify-content: center;
      }
      &.alignleft {
        justify-content: flex-start;
      }
      &.alignright {
        justify-content: flex-end;
      }
    }
    @media (width <= 767px) {
      flex-direction: column;
      gap:4.0rem;
    }
    &:has(.l-button-A:nth-child(1):last-child) {
      @media (width <= 767px) {
        justify-content: center;
      }
    }
    &:has(.l-button-A:nth-child(2)) {
      .l-button-A {
        @media (width > 767px) {
          flex:1;
          width:auto;
        }
      }
    }
    &:has(.l-button-A:nth-child(2):last-child) {
      @media (width > 767px) {
        gap:6.0rem;
      }
    }
    &:has(.l-button-A:nth-child(3):last-child) {
      @media (width > 767px) {
        gap:5.0rem;
      }
    }
    &:has(.l-button-A:nth-child(4)) {
      @media (width > 767px) {
        flex-wrap:wrap;
        gap:4.0rem;
      }
      .l-button-A {
        @media (width > 767px) {
          min-width:calc((100% - (3 * 4.0rem)) / 4);
          &::after {
            content:none;
          }
        }
      }
    }
    .l-button-A {
      &::after {
        @media (width > 767px) {
          right:2.0rem;
        }
      }
    }
  }
  .bpc-button.l-button-A {
    padding-block:0;
    @media (width <= 767px) {
      min-width:100%;
    }
  }

  .bpc-image {
    width:fit-content;
    &.aligncenter {
      margin-inline:auto;
    }
    &.alignright {
      margin-left:auto;
    }
    &.alignleft {
      margin-right:auto;
    }
    &:not(.aligncenter, .alignright, .alignleft) {
      margin-inline:auto;
    }

    figcaption {
      text-align:left;
      margin-top:.8rem;
      @media (width > 767px) {
        font-size:1.4rem;
        line-height:1.5;
      }
    }
  }

  a:not(.wp-block-button__link,.wp-element-button) {
    color:var(--cc-blue-A);
    text-decoration:underline;

    @media (hover:hover) {
      &:hover {
        text-decoration:none;
      }
    }
  }
}


.wp-block-columns.bpc-columns {
  display:grid;
  @media (width > 767px) {
    gap:6.0rem;
    grid-template-columns: 1fr 1fr;
    margin-inline:auto;
    width:96.0rem;
  }
  @media (width <= 767px) {
    gap:4.0rem;
  }
}

.wp-block-table.bpc-table {
  @media (width <= 767px) {
    &.simplebar-scrollable-x {
      margin-left:-3.5rem;
      width:100vw;
      .simplebar-content {
        &::after {
          width:1.75rem;
        }
      }
      table {
        margin-left:1.75rem;
      }
    }
  }
  table {
    border-spacing:2.0rem 0;
    border-collapse:separate;
    table-layout:auto;
    border:0;
    line-height:calc(26/16);
    @media (width <= 767px) {
      min-width:calc(var(--sp-min_w) - 3.5rem);
    }

    tr {
      :is(td,th) {
        border:0;
        border-bottom:1px solid;
        padding:1.6rem .8rem;
        vertical-align: top;
        @media (width <= 767px) {
          padding:2.0rem .8rem;
        }

        &:first-child {
          color:var(--cc-blue-A);
          font-weight:700;
          white-space: nowrap;
        }
      }
      &:first-child {
        :is(td,th) {
          border-top:1px solid;
        }
      }
    }
  }
}