@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300..700&display=swap");

:root {
  --header-top-offset: 0px;
}

body.admin-bar {
  --header-top-offset: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --header-top-offset: 46px;
  }
}

.entry-content {
  max-width: 100%;
}

/**
 * 「テンプレートを表示」未チェック時の背景色を白にする
 */
.editor-styles-wrapper:has(> .wp-block-post-content) {
  background-color: var(--color-background-default);
}

@layer base {
  .entry-content {
    h1 {
      margin-top: 0%;
      margin-bottom: var(--spacing-sm);
    }

    h2 {
      font-size: var(--font-size-50);
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-80);
      letter-spacing: var(--letter-spacing-80);
      margin-top: var(--spacing-xxl);
      margin-bottom: 40px;
      padding-block: var(--spacing-sm);
      padding-inline: var(--spacing-lg);
    }

    h3 {
      font-size: var(--font-size-40);
      font-weight: var(--font-weight-bold);
      line-height: var(--line-height-40);
      letter-spacing: var(--letter-spacing-40);
      margin-top: 40px;
      margin-bottom: var(--spacing-xl);
    }

    h4 {
      margin-top: var(--spacing-xl);
      margin-bottom: var(--spacing-xl);
    }

    h5 {
      margin-top: var(--spacing-xl);
      margin-bottom: var(--spacing-xl);
      font-weight: var(--font-weight-bold);
    }

    p {
      letter-spacing: var(--letter-spacing-40);
      margin-bottom: var(--spacing-xl);
      margin-top: var(--spacing-xl);
    }

    a {
      color: var(--color-text-link, #0171c1);
      font-size: var(--font-size-30, 16px);
      font-style: normal;
      font-weight: 300;
      line-height: var(--line-height-30, 28px);
      letter-spacing: 0.48px;
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: none;
      text-decoration-thickness: auto;
      text-underline-offset: auto;
      text-underline-position: from-font;
    }

    a:hover {
      text-decoration: none;
    }

    a:active {
      opacity: 0.5;
    }

    strong,
    b {
      font-weight: var(--font-weight-bold);
    }

    hr {
      margin-top: var(--spacing-xl);
      margin-bottom: var(--spacing-xl);
      @media (max-width: 576px) {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
      }
    }

    .wp-block-table {
      margin-bottom: var(--spacing-xl);
      margin-top: var(--spacing-xl);
    }

    ul,
    ol {
      margin-bottom: var(--spacing-xl);
      margin-top: var(--spacing-xl);

      ul,
      ol {
        margin-bottom: 0;
        margin-top: 0;
      }
    }

    blockquote {
      border-top: 1px solid var(--color-border-subtle, #e0e0e0);
      border-right: 1px solid var(--color-border-subtle, #e0e0e0);
      border-bottom: 1px solid var(--color-border-subtle, #e0e0e0);
      border-left: 1px solid var(--color-border-subtle, #e0e0e0);
      padding: var(--spacing-sm) var(--spacing-md);
      margin-bottom: var(--spacing-xl);
    }

    /* ------------------------------------------------ */
    /* 大老から移行したスタイル */
    /* note, msg-box, message-box, message-box-title, message-box, img-box, img-box-left-img, img-box-right-text, img-box-right-text-right-top, img-box-right-text-right-body sticky-th */
    /* ------------------------------------------------ */
    .notes {
      font-size: var(--font-size-10);
      line-height: 160%;
    }

    .msg-box {
      background: white;
      border: 2px solid var(--color-border-subtle, #e0e0e0);
      padding: 1em 1.5em;
      box-shadow: 4px 4px var(--color-border-subtle, #e0e0e0);
      color: var(--color-text-default, #222222);
      margin-bottom: 10px;
    }

    .message-box-title {
      display: inline-block;
      border-radius: 4px 4px 0 0;
      border: 1px solid var(--color-border-subtle, #e0e0e0);
      margin-bottom: 0px;
      padding: 12px 20px;
      background-color: var(--color-background-highlight, #f4f4f4);
      font-size: 16px;
      font-weight: bold;
      line-height: 1;
      letter-spacing: 0.04em;
      color: var(--color-text-brand, #004343);
    }

    .message-box {
      border-radius: 0px 4px 4px 4px;
      margin-top: -1px;
      border: 1px solid var(--color-border-subtle, #e0e0e0);
      padding: 12px 16px;
    }

    .img-box {
      border: 1px solid #e0e0e0;
      box-shadow: 0 3px 0 rgba(8, 1, 2, 0.03);
      line-height: 1.9;
      padding: 16px;
      margin-bottom: 12px;
    }
    .img-box:after {
      content: "";
      display: block;
      clear: both;
    }
    .img-box .left-img {
      width: 35%;
      float: left;
    }
    .img-box .left-img amp-img img {
      width: auto;
      height: auto;
      margin: 0;
    }
    .img-box .right-text {
      width: 60%;
      float: right;
    }
    .img-box .right-text .right-top {
      display: block;
      font-weight: bold;
    }
    .img-box .right-text .right-body {
      font-size: 14px;
    }

    .sticky-th {
      width: 120px;
      position: sticky;
      left: 0;
      background-color: var(--color-background-default);
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
      z-index: 2;
      word-wrap: break-word;

      img {
        width: 120px;
      }
    }

    thead .sticky-th {
      top: 0;
      z-index: 2;
    }

    /*テーブルで比較表を使っているもの、WordPressのテーブル要素ではないものがあるのでここでCSSを適用しておく */
    /*ほぼcore-table.cssと同じものだが、word-wrap: break-word;を追加している*/
    .trial-table {
      overflow-x: scroll;
      display: block;
      table-layout: fixed;
      word-wrap: break-word;
      -webkit-overflow-scrolling: touch;

      table {
        border-collapse: separate;
        border-spacing: 0;
        width: 100%;
      }

      &:has(tr > td:nth-child(3)) {
        td {
          min-width: 130px;
        }
      }

      th,
      td {
        border: 0;
      }

      table th:first-child,
      table td:first-child {
        left: 0;
        z-index: 1;
        border-left: 1px solid var(--color-border-subtle, #e0e0e0);
      }

      tbody tr:last-child th,
      tbody tr:last-child td {
        border-bottom: 1px solid var(--color-border-subtle, #e0e0e0);
      }

      tr th:first-child,
      tr td:first-child {
        border-left: 1px solid var(--color-border-subtle, #e0e0e0);
      }

      th {
        padding: 12px;
        gap: 10px;
        flex: 1 0 0;

        border-top: 1px solid var(--color-border-subtle, #e0e0e0);
        border-right: 1px solid var(--color-border-subtle, #e0e0e0);
        background: var(--color-background-brand-subtler, #eef7f7);

        color: var(--color-text-brand, #004343);
        font-size: var(--typography-label-sm-bold-font-size, 14px);
        font-style: normal;
        font-weight: 600;
        line-height: var(--typography-label-sm-bold-line-height, 14px); /* 100% */
        letter-spacing: 0.42px;
        word-break: keep-all;

        @media (max-width: 576px) {
          padding-block: var(--spacing-xxs);
          padding-inline: var(--spacing-xs);
        }
      }

      td {
        padding: 12px;
        flex: 1 0 0;

        border-top: 1px solid var(--color-border-subtle, #e0e0e0);
        border-right: 1px solid var(--color-border-subtle, #e0e0e0);
        background: var(--color-background-default, #fff);

        color: var(--color-text-default, #222);
        font-size: var(--font-size-20, 14px);
        font-style: normal;
        font-weight: 300;
        line-height: 150%;
        letter-spacing: 0.42px;

        @media (max-width: 576px) {
          padding: var(--spacing-xs);
        }
      }
    }
  }

  @media (max-width: 576px) {
    .entry-content {
      h2 {
        font-size: var(--font-size-40);
        line-height: var(--line-height-80);
        letter-spacing: var(--letter-spacing-50);
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
        padding-inline: var(--spacing-md);
      }

      h3 {
        font-size: var(--text-base);
        line-height: var(--line-height-20);
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
      }

      h4 {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
      }

      p {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
      }

      .wp-block-table {
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
      }

      ul,
      ol {
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
      }
    }
  }
}

/* TODO: 適切な@layerに整理する */

body:not(.wp-admin) {
  /* チェックボックス */
  input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    background-color: white;
    border: 2px solid var(--color-general-color-sky-blue, #3191d5);
    display: grid;
    place-content: center;
  }

  input[type="checkbox"]:checked {
    background-color: var(--color-general-color-sky-blue, #3191d5);
  }

  input[type="checkbox"]:checked::after {
    content: "";
    background-color: var(--color-background-default, #ffffff);
    width: 14px;
    height: 10px;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L5.70711 9.70711C5.31658 10.0976 4.68342 10.0976 4.29289 9.70711L0.292893 5.70711C-0.0976311 5.31658 -0.0976311 4.68342 0.292893 4.29289C0.683417 3.90237 1.31658 3.90237 1.70711 4.29289L5 7.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893Z" fill="currentColor"/></svg>')
      no-repeat center center;
    mask-size: cover;
  }

  input[type="checkbox"]:disabled {
    border-color: var(--color-border-subtle, #e0e0e0);
    cursor: not-allowed;
  }

  input[type="checkbox"]:checked:disabled {
    background-color: var(--color-border-subtle, #e0e0e0);
    border-color: var(--color-border-subtle, #e0e0e0);
  }

  input[type="checkbox"]:checked:disabled::after {
    background-color: var(--color-background-subtler, #f4f4f4);
  }
}

:where(figure) {
  margin: 0;
}

.wp-block-table {
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-xl);

  @media (max-width: 576px) {
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-md);
  }
}

.shared-button-icon {
  width: 32px;
  height: 32px;

  &:hover {
    opacity: 0.8;
  }
}