/* ==========================================================================
   wysiwyg.css — WYSIWYG 専用スタイル（単一ファイル版）
   ==========================================================================
   役割:
   - CMS 等が出力する WYSIWYG HTML 用スタイルをこの 1 ファイルに集約
   - タグセレクタベースの基本パーツ（h1〜h6, p, ul/ol/li, a, table など）
   - カスタムパーツ用の Block クラス（.wys-* など）
   - PHP 側での適用都合に合わせて @import は使用しない
   - @layer により他コンポーネント（unlayered）での上書きを容易にする
   - デスクトップファーストで記述（本プロジェクトのモバイルファースト例外）
   ========================================================================== */

@layer wysiwyg {

  /* ========== Block: main（WYSIWYG 基本要素：見出し・テキスト・リンク） ========== */
  h1 {
    margin-top: 60px;
    color: var(--color-gray-800);
    font-family: var(--font-heading-jp);
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.13rem;

    html[data-viewport="mobile"] &,
    html[data-viewport="tablet"] & {
      font-size: 2rem;
      letter-spacing: 0.08rem;
    }
  }

  h2 {
    margin-top: 60px;
    margin-bottom: 40px;
    display: block;
    color: var(--color-gray-800);
    font-family: var(--font-sans);
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.045rem;

    &::after {
      content: "";
      display: block;
      width: 6.5rem;
      height: 0.1875rem;
      margin-top: 0.875rem;
      background-color: var(--color-gray-800);
    }

    html[data-viewport="mobile"] &,
    html[data-viewport="tablet"] & {
      font-size: 1.5rem;
      line-height: 1.4;
      letter-spacing: 0.03rem;

      &::after {
        width: 4.375rem;
        height: 0.125rem;
        margin-top: 0.875rem;
      }
    }
  }

  h3 {
    margin-top: 60px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: var(--color-gray-800);
    font-family: var(--font-sans);
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.0375rem;

    &::before {
      content: "";
      margin-top: 0.375rem;
      display: inline-block;
      flex-shrink: 0;
      width: 0.375rem;
      height: 1.875rem;
      background-color: var(--color-gray-800);
    }

    html[data-viewport="mobile"] &,
    html[data-viewport="tablet"] & {
      font-size: 1.5rem;
      line-height: 1.4;
      letter-spacing: 0.03rem;

      &::before {
        width: 0.25rem;
        height: 1.5rem;
      }
    }
  }

  h4 {
    margin-top: 40px;
    color: var(--color-gray-800);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.03rem;

    html[data-viewport="mobile"] &,
    html[data-viewport="tablet"] & {
      font-size: 1.125rem;
      letter-spacing: 0;
    }
  }

  p {
    margin-top: 20px;
    color: var(--color-gray-800);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
  }

  a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-gray-800);
    font-family: var(--font-sans);
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
  }

  a[target="_blank"]:not([href$=".pdf"])::after {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    margin-bottom: -0.2rem;
    width: 1rem;
    height: 1rem;
    background-image: url("/site-assets/corporate/images/common/icon-external.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  a[href$=".pdf"]::before {
    content: "";
    flex-shrink: 0;
    display: inline-block;
    margin-bottom: -0.2rem;
    width: 0.72rem;
    height: 0.94rem;
    background-image: url("/site-assets/corporate/images/common/icon-pdf.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  ul,
  ol {
    margin-top: 20px;
    color: var(--color-gray-800);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.02rem;
  }

  /* ========== Block: wys-list — Wysiwyg用注釈リスト ========== */
  ul.wys-list {
    margin-top: 12px;

    &[data-marker="note"],
    &[data-marker="ref"],
    &[data-marker="asterisk"] {
      list-style: none;
      padding-left: 0;

      li {
        display: flex;
        align-items: flex-start;
        gap: 4px;
        list-style: none;
      }

      li::before {
        flex-shrink: 0;
      }
    }

    &[data-marker="note"][data-numbered="true"] {
      counter-reset: wys-list-note;

      li {
        counter-increment: wys-list-note;
      }

      li::before {
        content: "注" counter(wys-list-note) " ";
        min-width: 1.5rem;
      }
    }

    &[data-marker="note"]:not([data-numbered="true"]) {
      li::before {
        content: "注";
        min-width: 1rem;
      }
    }

    &[data-marker="ref"] {
      li::before {
        content: "※";
        min-width: 1rem;
      }
    }

    &[data-marker="asterisk"][data-numbered="true"] {
      counter-reset: wys-list-asterisk;

      li {
        counter-increment: wys-list-asterisk;
      }

      li::before {
        content: "*" counter(wys-list-asterisk);
        min-width: 1rem;
      }
    }

    &[data-marker="asterisk"]:not([data-numbered="true"]) {
      li::before {
        content: "*";
        min-width: 0.5rem;
      }
    }
  }

  /* ========== Block: wys-catch-copy — Wysiwyg用キャッチコピー ========== */
  .wys-catch-copy {
    margin-top: 60px;

    p {
      color: var(--color-gray-800);
      font-family: var(--font-heading-jp);
      font-size: 1.75rem;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: 0.035rem;

      html[data-viewport="mobile"] &,
      html[data-viewport="tablet"] & {
        font-size: 1.375rem;
        letter-spacing: 0.0275rem;
      }
    }
  }

  /* ========== Block: wys-box — Wysiwyg用囲みボックス ========== */
  .wys-box {
    margin-top: 60px;

    &>*:first-child {
      margin-top: 0;
    }

    &[data-variant="bordered"] {
      padding: 20px;
      border: 1px solid var(--color-gray-800);
      background: var(--color-white);
    }
  }

  /* ========== Block: wys-button — Wysiwyg用ボタン ========== */
  .wys-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    gap: 10px;
    min-height: 54px;
    min-width: 384px;
    max-width: 100%;
    padding: 7px 8px;

    font-family: var(--font-sans);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.045rem;
    text-decoration: none;

    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 0;

    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;

    html[data-viewport="mobile"] & {
      width: 100%;
      gap: 8px;
      min-height: 32px;
      min-width: auto;
      font-size: 0.875rem;
      letter-spacing: 0.035rem;
    }

    &[data-level="primary"] {
      background-color: var(--color-deep-green);
      color: var(--color-white);
      border-color: var(--color-deep-green);

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-color: var(--color-white);
          color: var(--color-deep-green);
          border-color: var(--color-deep-green);
        }
      }
    }

    &[data-level="secondary"] {
      background-color: var(--color-white);
      color: var(--color-gray-800);
      border-color: var(--color-gray-800);

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background-color: var(--color-gray-800);
          color: var(--color-white);
        }
      }
    }

    &[target="_blank"]:not([href$=".pdf"])::after {
      content: "";
      flex-shrink: 0;
      display: inline-block;
      margin-bottom: -0.2rem;
      width: 0.875rem;
      height: 0.875rem;
      background-color: currentColor;
      background-image: none;
      -webkit-mask-image: url("/site-assets/corporate/images/common/icon-external.svg");
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-image: url("/site-assets/corporate/images/common/icon-external.svg");
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;

      html[data-viewport="mobile"] &,
      html[data-viewport="tablet"] & {
        width: 0.6875rem;
        height: 0.6875rem;
      }
    }

    &[href$=".pdf"]::before {
      /* 無名aタグのスタイル打ち消し */
      content: none;
    }

    &[href$=".pdf"]::after {
      content: "";
      display: inline-block;
      margin-bottom: -0.2rem;
      width: 0.72rem;
      height: 0.94rem;
      background-color: currentColor;
      background-image: none;
      -webkit-mask-image: url("/site-assets/corporate/images/common/icon-pdf.svg");
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-image: url("/site-assets/corporate/images/common/icon-pdf.svg");
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;

      html[data-viewport="mobile"] &,
      html[data-viewport="tablet"] & {
        width: 0.66913rem;
        height: 0.875rem;
      }
    }
  }

  /* ========== Block: wys-media — 画像＋テキストレイアウト ========== */
  .wys-media {
    margin-left: -32px;
    width: calc(100% + 32px);
    display: table;
    border-spacing: 0;
    border-collapse: collapse;

    >tbody {
      display: table-row-group;
    }

    >tbody>tr>td {
      display: table-cell;
      padding-left: 32px;
      width: 50%;
      vertical-align: top;
    }

    img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
    }

    .caption {
      margin-top: 4px;
      font-size: 0.75rem;
      line-height: 1.4;
      letter-spacing: 0.0225rem;
    }

    &[data-layout="image-right"] {
      td:first-child {
        order: 0;
        font-size: 1rem;
        line-height: 1.75;
        letter-spacing: 0.02rem;
        color: var(--color-black);
      }

      td:last-child {
        order: 0;
      }

      &[data-size="md"] td {
        width: 50%;
      }

      &[data-size="sm"] td:last-child {
        width: calc(384 / 1168 * 100%);
      }
    }

    &[data-layout="image-left"] {
      td:first-child {
        order: 0;
      }

      td:last-child {
        order: 0;
        font-size: 1rem;
        line-height: 1.75;
        letter-spacing: 0.02rem;
        color: var(--color-black);
      }

      &[data-size="md"] td {
        width: 50%;
      }

      &[data-size="sm"] td:first-child {
        width: calc(384 / 1168 * 100%);
      }
    }

    html[data-viewport="mobile"] & {
      display: block;
      width: 100%;
      margin-left: 0;

      >tbody {
        display: block;
      }

      >tbody>tr {
        display: flex;
        flex-direction: column;
      }

      >tbody>tr>td {
        display: block;
        padding-left: 0;
        width: 100%;
      }

      &[data-layout="image-right"],
      &[data-layout="image-left"] {
        &[data-size="md"] td {
          width: auto;
        }
      }

      &[data-layout="image-right"] {
        td:first-child {
          order: 2;
        }

        td:last-child {
          order: 1;
        }


        &[data-size="sm"] td:last-child {
          padding-block: 0;
          padding-inline: 76px;
          width: auto;
        }
      }

      &[data-layout="image-left"] {
        td:first-child {
          order: 1;
        }

        td:last-child {
          order: 2;
        }

        &[data-size="sm"] td:first-child {
          padding-block: 0;
          padding-inline: 76px;
          width: auto;
        }
      }
    }
  }

  /* ========== Block: wys-images — 画像グリッド（1〜4列） ========== */
  .wys-images {
    margin-left: -24px;
    width: calc(100% + 24px);
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;

    >tbody {
      display: table-row-group;
    }

    >tbody>tr {
      display: table-row;
    }

    /* ↓上書きcssから持ってきたコード。必要なくなったかも？↓ */
    >tbody>tr+tr>td {
      padding-top: 0px;
    }

    /* ↑上書きcssから持ってきたコード。必要なくなったかも？↑ */

    >tbody>tr>td {
      width: auto;
      padding-left: 24px;
      vertical-align: top;
    }

    &[data-cols="2"]>tbody>tr>td {
      width: calc(100% / 2);
    }

    &[data-cols="3"]>tbody>tr>td {
      width: calc(100% / 3);
    }

    &[data-cols="4"]>tbody>tr>td {
      width: calc(100% / 4);
    }

    .video-wrapper {
      width: 100%;
      max-width: 100%;
    }

    .caption {
      margin-top: 4px;
      font-size: 0.75rem;
      line-height: 1.4;
      letter-spacing: 0.0225rem;
    }

    img {
      display: block;
      width: 100%;
      height: auto;
    }

    html[data-viewport="mobile"] &,
    html[data-viewport="tablet"] & {
      margin-left: 0;
      width: 100%;

      >tbody {
        display: block;
      }

      >tbody>tr {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        column-gap: 13px;
      }

      >tbody>tr>td {
        padding-left: 0;
        width: auto;
      }

      >tbody>tr>td+td {
        padding-left: 0;
      }

      &[data-cols="2"] tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      &[data-cols="3"] tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      &[data-cols="4"] tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      &[data-cols="2"] td,
      &[data-cols="3"] td,
      &[data-cols="4"] td {
        width: auto;
      }
    }

    .wys-images__list {
      display: grid;
      gap: 12px;
    }

    .wys-images__item img {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  /* ========== Block: wys-table-scroll-wrapper — 横スクロール用ラッパー（JS が付与） ========== */
  .wys-table-scroll-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;

    html[data-viewport="tablet"] &,
    html[data-viewport="mobile"] & {
      margin-inline: -20px;
      padding-inline-start: 20px;
      max-width: calc(100% + 40px);
      min-width: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;

      .wys-table-scroll-wrapper__gutter {
        flex-shrink: 0;
        width: 20px;
      }
    }
  }

  /* ========== Block: wys-table — Wysiwyg用テーブル ========== */
  .wys-table {
    margin-top: 28px;
    border-collapse: collapse;
    width: 100%;

    th,
    td {
      padding: 20px;
      text-align: left;
      font-size: 1rem;
      line-height: 1.75;
      letter-spacing: 0.05rem;
      color: var(--color-gray-800);
      border: 1px solid var(--color-gray-500);
    }

    th {
      background-color: var(--color-main-light);
    }

    td {
      background-color: var(--color-white);
    }

    &[data-variant="simple"] {
      display: table;

      & tbody,
      & tr,
      & th,
      & td {
        display: table-row-group;
      }

      & tr {
        display: table-row;
      }

      & th,
      & td {
        display: table-cell;
        width: auto;
      }

      & td {
        border-top: 1px solid rgba(0, 0, 0, 0.3);
      }
    }

    &[data-variant="custom"] {
      table-layout: fixed;
    }

    html[data-viewport="mobile"] &,
    html[data-viewport="tablet"] & {

      th,
      td {
        padding: 10px;
      }

      &[data-variant="simple"] {
        display: block;

        & tbody,
        & tr,
        & th,
        & td {
          display: block;
          width: 100%;
        }

        & tr:not(:first-child) th,
        & td {
          border-top: none;
        }
      }
    }
  }

}