@charset "UTF-8";

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

Post Contents CSS

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

上記はここに記述する

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


/* リセット
============================================================================= */
: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;
}


/* line-clamp .p-lc
styleの場合
<p class="p-lc" style="--lc:2;">text</p> pcとspが同じ
<p class="p-lc" style="--lc-pc:2;--lc-sp:3;">text</p>  pcとspが別
----------------------------------------------------------------------------- */
[class*="-lc"] {
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  overflow:hidden;
  -webkit-line-clamp: var(--lc);
  line-clamp: var(--lc);
}
.-lc_1 {
  --lc:1;
}
.-lc_2 {
  --lc:2;
}
.-lc_3 {
  --lc:3;
}
.-lc_4 {
  --lc:4;
}
.-lc_5 {
  --lc:5;
}
.-lc_6 {
  --lc:6;
}
@media (width > 767px) {
  .-lc_pc_1 {
    --lc:1;
  }
  .-lc_pc_2 {
    --lc:2;
  }
  .-lc_pc_3 {
    --lc:3;
  }
  .-lc_pc_4 {
    --lc:4;
  }
  .-lc_pc_5 {
    --lc:5;
  }
  .-lc_pc_6 {
    --lc:6;
  }
}
@media (width <= 767px) {
  .-lc_sp_1 {
    --lc:1;
  }
  .-lc_sp_2 {
    --lc:2;
  }
  .-lc_sp_3 {
    --lc:3;
  }
  .-lc_sp_4 {
    --lc:4;
  }
  .-lc_sp_5 {
    --lc:5;
  }
  .-lc_sp_6 {
    --lc:6;
  }
}

/* IMG Auto Size
----------------------------------------------------------------------------- */
/* default */
:where(img) {
  display:block;
  max-width:100%;
  height:auto;
}

/* rem */
:where(img[style*="--cbew"]) {
  width:calc(var(--cbew) * .1rem);
}
@media (width <= 767px) { /* SP */
  :where(img[style*="--cbew"]) {
    width:calc(var(--cbew) * .05rem);
  }
}



/* コンテンツ
============================================================================= */
.post-contents {
  --cbel-mt:8.0rem;
  font-family:var(--ff_min);
  font-size:1.5rem;
  line-height: 1.8;
  letter-spacing: 0;
  color:var(--bc_black_text);

  @media (width <= 767px) {
    --cbel-mt:5.6rem;
  }

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

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

  .cbel-block {
    & + .cbel-block {
      margin-top:var(--cbel-mt);
    }
    &:is(.cbel-paragraph,.cbel-list) + :is(.cbel-paragraph,.cbel-list) {
      margin-top:calc(var(--cbel-mt) / 2);
    }
  }

  .cbel-paragraph {
    text-align: justify;
    text-justify: inter-ideograph;
    font-size:inherit;
    line-height:inherit;
    letter-spacing:inherit;
  }

  .cbel-heading {
    color:var(--bc_black);
    &:first-child {
      margin-top:0;
    }
    &:is(h2) {
      margin-block:8.0rem 2.4rem;
      padding-block:1.0rem;
      border-bottom:1px solid;
      font-weight:500;
      font-size:2.4rem;
      line-height:1.5;
      background-color:var(--cc-blue-A);
      border-radius:var(--radius-C);

      @media (width <= 767px) {
        margin-block:5.6rem 1.6rem;
        font-size:2.0rem;
        line-height:1.6;
      }
    }
    &:is(h3) {
      margin-block:8.0rem 2.4rem;
      font-size:2.0rem;
      line-height:1.7;

      @media (width <= 767px) {
        margin-block:5.6rem 1.6rem;
        font-size:2.0rem;
        line-height:1.6;
      }
    }
  }

  .cbel-toc {
    background-color:var(--bc_gray);
    padding:3.6rem 4.0rem 4.0rem;
    @media (width <= 767px) {
      padding:1.6rem;
    }

    .toc-heading {
      margin-bottom:2.0rem;
      font-weight:500;
      @media (width <= 767px) {
        margin-bottom:1.6rem;
      }
    }
    .cbel-toc-parent {
      border-top:1px solid var(--bc_line);

      li {
        &:not(:has(.cbel-toc-child)) {
          border-bottom:1px solid var(--bc_line);
        }
      }

      a {
        display:flex;
        align-items: center;
        text-decoration: none;
        box-sizing: border-box;
        gap:.8rem;
        padding-block:1.6rem;
        padding-right:1.0rem;
        width:100%;
        @media (width <= 767px) {
        }
        &::after {
          flex-shrink: 0;
          content:"";
          display:block;
          margin-left:auto;
          width:.8rem;
          height:auto;
          aspect-ratio: 6/9;
          mask-image: url(/antonio-riva/assets/img/common/ico_toc_down.svg);
          mask-size:contain;
          mask-position:center;
          mask-repeat: no-repeat;
          background-color:currentColor;
        }
      }
    }
    .cbel-toc-child {
      border-top:1px solid var(--bc_line);
      li {
        display:flex;
        @media (width > 767px) {
          padding-left:3.0rem;
        }
        a {
          &::before {
            content:"・";
            margin-bottom:auto;
            @media (width <= 767px) {
              margin-right:-.4rem;
            }
          }
        }
      }
    }
  }

  .cbel-list {
    line-height:1.5;

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

    &:is(ul) {
      > li {

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

    &:is(ol) {
      counter-reset: num;
      > li {
        padding-left:2.2rem;
        @media (width <= 767px) {
          padding-left:1.6rem;
        }
        &::before {
          counter-increment: num;
          content: counter(num)".";
          font-family:var(--ff_en);
          font-size:calc(1.8 / 1.5 * 1em);
          line-height:1;
          position: absolute;
          top:.1em;
          left: 0;
          letter-spacing: .05em;
        }
      }
    }
  }

  .cbel-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;
        }
      }
    }
  }
  .cbel-button.l-button-A > :is(a,.wp-block-button__link) {
    display:flex;
    align-items: center;
    justify-content: space-between;
    column-gap:3.6rem;
    box-sizing: border-box;
    padding:.8rem 1.6rem;
    min-width:28.0rem;
    width:fit-content;
    background-color:#000;
    color:#fff;
    transition-property: opacity;
    transition-duration: .5s;
    @media (width <= 767px) {
      margin-inline:auto;
    }
    @media (hover:hover) {
      &:hover {
        opacity:.6;
      }
    }
    &::after {
      content:"";
      display:block;
      width: 0.8rem;
      height: 0.8rem;
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: contain;
      -webkit-mask-image: url(/antonio-riva/assets/img/common/ico_btn_arrow.svg);
      background: currentColor;
    }
  }

  .cbel-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-block:1.6rem 0;
      font-size:1.3rem;
      line-height:1.8;
      @media (width <= 767px) {
        margin-top:.8rem;
      }
    }
    img {
      @media (width <= 767px) {
        margin-inline:auto;
      }
    }
  }

  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-group.cbel-group-wide {
    .cbel-block + &,
    & + .cbel-block { /* cbel-blockクラスを適用してなかったときの保険 */
      margin-top:var(--cbel-mt);
    }
    @media (width > 767px) {
      max-width:100.0rem;
      margin-inline:-3.2rem;
    }
    @media (width <= 767px) {
      margin-inline:-2.0rem;
    }
  }
  .wp-block-group.cbel-group-border {
    .cbel-block + &,
    & + .cbel-block { /* cbel-blockクラスを適用してなかったときの保険 */
      margin-top:var(--cbel-mt);
    }
    border:1px solid var(--bc_line);
    padding:4.0rem;
    @media (width <= 767px) {
      padding:1.6rem;
    }
  }

  .wp-block-columns.cbel-columns {
    display:grid;

    &.-bq {
      border:1px solid var(--bc_line);
      padding:4.0rem;
      @media (width <= 767px) {
        padding:1.6rem;
      }
    }

    &.-column_1 {
      @media (width > 767px) {
        max-width:100.0rem;
        margin-inline:-3.2rem;
      }
      @media (width <= 767px) {
        margin-inline:-2.0rem;
      }
    }
    &.-column_2 {
      @media (width > 767px) {
        gap:2.4rem;
        grid-template-columns: 1fr 1fr;
        margin-inline:auto;
      }
      @media (width <= 767px) {
        gap:1.6rem;
      }
    }
  }

  .wp-block-table.cbel-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-collapse:separate;
      table-layout:auto;
      border:0;
      border-top:1px solid var(--bc_line);
      line-height:calc(26/16);
      min-width:100%;
      @media (width <= 767px) {
      }
      &:has(:is(td,th):nth-child(2):last-child) {
        @media (width > 767px) {
          table-layout:fixed;
        }
        @media (width <= 767px) {
          display:block;
        }
        tbody {
          @media (width <= 767px) {
            display:block;
          }
        }
        tr {
          @media (width <= 767px) {
            display:block;
          }
          :is(td,th) {
            @media (width <= 767px) {
              display:block;
            }
            &:nth-child(1) {
              @media (width > 767px) {
                width:24.0rem;
              }
              @media (width <= 767px) {
                border-bottom:0;
                padding-bottom:0;
              }
            }
            &:nth-child(2) {
              @media (width > 767px) {
                padding-left:4.0rem;
              }
            }
          }
        }
      }

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

          &:first-child {
            font-weight:500;
            white-space: nowrap;
            color:var(--bc_black);
          }
        }
      }
    }
  }

  .cbel-related {
    display:flex;
    text-decoration: none !important;
    transition-property: opacity;
    transition-duration: .5s;
    & + .cbel-related {
      margin-top:4.0rem;
      @media (width <= 767px) {
        margin-top:2.8rem;
      }
    }
    @media (hover:hover) {
      &:hover {
        opacity:.6;
      }
    }
    @media (width <= 767px) {
    }

    .img {
      flex-shrink: 0;
      img {
        object-fit: cover;
        width:18.0rem;
        height:auto;
        aspect-ratio: 3/2;
        @media (width <= 767px) {
          width:12.0rem;
        }
      }
    }
    .text {
      flex:1;
      margin-block:auto;
      margin-left:1.6rem;
      .heading {
        margin-bottom:.8rem;
        font-weight:500;
      }
      .desc {
        font-size:1.2rem;
        line-height:1.8;
        @media (width <= 767px) {
          display:none;
        }
      }
    }

    > i {
      flex-shrink: 0;
      display:flex;
      justify-content: center;
      align-items: center;
      margin-left:3.6rem;
      border-left:1px solid var(--bc_line);
      width:8.0rem;
      @media (width <= 767px) {
        justify-content: flex-end;
        margin-left:.4rem;
        width:3.2rem;
      }

      &::after {
        content:"";
        display:block;
        width: 1.6rem;
        height: 1.6rem;
        mask-position: center center;
        mask-repeat: no-repeat;
        mask-size: contain;
        -webkit-mask-image: url(/antonio-riva/assets/img/common/ico_btn_arrow.svg);
        background: currentColor;
        @media (width <= 767px) {
          width: 1.2rem;
          height: 1.2rem;
        }
      }
    }
  }

  .cbel-writer {
    border-bottom:1px solid #000;
    > .heading {
      display:flex;
      align-items: center;
      gap:.4rem;
      font-family:var(--ff_min);
      color:#000;
      font-size:3.2rem;
      line-height:1;
      letter-spacing: .02em;
      @media (width <= 767px) {
        font-size:2.4rem;
      }
      &::before,
      &::after {
        content:"";
        border-bottom:1px solid #000;
        margin-top:.4em;
      }
      &::before {
        flex-shrink: 0;
        width:3.6rem;
        @media (width <= 767px) {
          width:1.6rem;
        }
      }
      &::after {
        flex:1;
      }
    }
    > .inner {
      display:grid;
      padding:3.2rem 4.0rem 4.0rem;
      @media (width > 767px) {
        grid-template-rows:auto 1fr;
        grid-template-columns: 1fr 15.0rem;
        gap:2.4rem 5.6rem;
      }
      @media (width <= 767px) {
        grid-template-rows:auto 1fr;
        grid-template-columns: 1fr 8.0rem;
        align-content: center;
        gap:.8rem;
        padding:.8rem 1.6rem 1.6rem;

      }
      .img {
        grid-column:2/3;
        @media (width > 767px) {
          grid-row:1/-1;
        }
        @media (width <= 767px) {
          grid-row:1/2;
        }

        img {
          width:100%;
          height:auto;
          aspect-ratio: 1/1;
        }
      }
      .name_role {
        @media (width <= 767px) {
          grid-row:1/2;
          grid-column:1/2;
          display:grid;
          margin-block:auto;
        }
        .name {
          &:has(+.role) {
            &::after {
              content:"/";
              margin-left:.5em;
              @media (width > 767px) {
                margin-right:.5em;
              }
            }
          }
        }
      }
      .desc {
        font-size:1.4rem;
        line-height:1.7;
        @media (width <= 767px) {
          grid-column:1/-1;
          font-size:1.3rem;
        }
      }
    }
  }
}