/* ==========================================================================
   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 {
      color: var(--color-main);
      text-align: center;
      font-family: var(--font-heading);
      font-size: 4.5rem;
      font-weight: 700;
      line-height: 1.04167;
      letter-spacing: 0.18rem;

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

   h2 {
      margin-top: 100px;
      margin-bottom: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      color: var(--color-main);
      font-family: var(--font-sans);
      font-size: 2.25rem;
      font-weight: 700;
      line-height: 1.3888888889;
      letter-spacing: 0.045rem;

      &::after {
         content: "";
         display: block;
         width: 5.625rem;
         height: 0.25rem;
         margin-top: 1.75rem;
         background-color: var(--color-main);
      }

      html[data-viewport="mobile"] & {
         margin-top: 80px;
         font-size: 1.5rem;
         line-height: 1.4;
         letter-spacing: 0.03rem;

         &::after {
            width: 3.375rem;
            height: 0.1875rem;
            margin-top: 0.875rem;
         }
      }
   }

   h3 {
      margin-top: 60px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      color: var(--color-main);
      font-family: var(--font-sans);
      font-size: 1.875rem;
      font-weight: 700;
      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-main);
      }

      html[data-viewport="mobile"] & {
         gap: 9px;
         font-size: 1.25rem;
         line-height: 1.4;
         letter-spacing: 0.025rem;

         &::before {
            margin-top: 0.375rem;
            width: 0.25rem;
            height: 1.25rem;
         }
      }
   }

   h4 {
      margin-top: 40px;
      color: var(--color-main);
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 0.03rem;

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

   /* toc-nav 見出し：h2 のショートバー（::after）を出さない。中央寄せ */
   .toc-nav__title {
      display: block;
      text-align: center;
      text-decoration: none;

      &::after {
         display: none;
      }
   }

   p {
      margin-top: 20px;
      color: var(--color-black);
      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-black);
      font-family: var(--font-sans);
      font-weight: 700;
      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: 0.75rem;
      height: 0.75rem;
      background-image: url("/site-assets/brand/seibu-fitness/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/brand/seibu-fitness/images/common/icon-pdf.svg");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
   }

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

   ul:not([class]),
   ol:not([class]) {
      padding-left: 26px;
   }

   /* ========== 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-main);
         text-align: center;
         font-family: var(--font-heading);
         font-size: 1.75rem;
         font-weight: 700;
         line-height: 1.5;
         letter-spacing: 0.035rem;
      }

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

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

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

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

      &[data-variant="background"] {
         background-color: var(--color-main-light);
      }
   }

   /* ========== Block: wys-button — Wysiwyg用ボタン ========== */
   .wys-button {
      display: inline-block;
      width: auto;
      min-height: 40px;
      min-width: 384px;
      max-width: 100%;
      padding: 8px 20px 10px;
      text-align: center;
      font-family: var(--font-sans);
      font-size: 1.125rem;
      font-weight: 600;
      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;

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

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

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

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

      &[target="_blank"]:not([href$=".pdf"])::after {
         content: "";
         display: inline-block;
         margin-inline-start: 0.625rem;
         margin-bottom: 0.225rem;
         vertical-align: middle;
         width: 0.875rem;
         height: 0.875rem;
         background-color: currentColor;
         background-image: none;
         -webkit-mask-image: url("/site-assets/brand/seibu-fitness/images/common/icon-external.svg");
         -webkit-mask-size: contain;
         -webkit-mask-repeat: no-repeat;
         -webkit-mask-position: center;
         mask-image: url("/site-assets/brand/seibu-fitness/images/common/icon-external.svg");
         mask-size: contain;
         mask-repeat: no-repeat;
         mask-position: center;

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

         html[data-viewport="mobile"] & {
            margin-bottom: 0.175rem;
         }
      }

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

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

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

         html[data-viewport="mobile"] & {
            margin-bottom: 0.175rem;
         }
      }

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

   /* ========== 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-black);
         border: 1px solid rgba(0, 0, 0, 0.3);
      }

      th {
         background-color: #ebf3f8;
      }

      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-size="sm" — 小さいテーブル（キャプション程度） */
         &[data-size="sm"] th,
         &[data-size="sm"] td {
            padding: 10px;
            font-size: 0.8125rem;
            line-height: 1.8462;
            letter-spacing: 0.01625rem;
         }
      }

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

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

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

         &[data-variant="simple"] tbody,
         &[data-variant="simple"] tr,
         &[data-variant="simple"] th,
         &[data-variant="simple"] td {
            display: block;
            width: 100%;
         }

         &[data-variant="simple"] tr:not(:first-child) th,
         &[data-variant="simple"] td {
            border-top: none;
         }
      }
   }

   .wys-table-mini {
      margin-top: 8px;
      border-spacing: 0;

      >tbody {
         display: revert;
      }

      tr {
         display: revert;

         >th,
         >td {
            display: revert;
            font-weight: normal;
            color: var(--color-black);
            padding-top: 4px;
            padding-bottom: 4px;
            vertical-align: bottom;

         }

         th {
            text-align: left;
            padding-right: 12px;
         }

         td {
            text-align: right;
         }
      }
   }

   .video-wrapper {
      aspect-ratio: 16 / 9;
   }

   .video-wrapper iframe {
      width: 100%;
      height: 100%;
   }

}