/* ==================================================================
   LEATHER 上部ブロック (.leather .pt_a_top) ／ STYLING
   ================================================================== */

  /* ==========================================================================
     LEATHER 商品詳細 Aパターン ／ 上部ブロック  ( .leather .pt_a_top )
     「HYOD FAN」「STYLING」
     HYOD_Web_レザーウエア_00_詳細_Aパターン 準拠
     ---------------------------------------------------------------------------
     ・掲載位置：商品説明テキストの下、サイズテーブルの上（.ex_info 内）
     ・他CSSと干渉しないよう、全セレクタを .leather .pt_a_top 配下に限定
     ・フォントは既存サイトで読み込み済みのため、font-family は指定していません
       （見出しの英字はサイト既存の英字見出しと同じ指定を継承します）
     ・写真は一旦グレーの枠（プレースホルダー）で組んでいます。
       入稿後は .ptt_fig の中に <img> を入れるだけで置き換わります（下部にサンプル）
     ・STYLING はサムネイルをクリックすると拡大ポップアップが開き、
       左右の矢印／キーボード←→で S・M・L を切り替えられます
     ・寸法はカンプ(PC:1366px幅／コンテンツ幅1210px)の実寸を % に換算
         サムネイル幅 150px  → 12.4%  (150 / 1210)
         サムネイル間隔 10.5px →  0.87% ( 10.5 / 1210)
       → 列幅・間隔は --ptt-col / --ptt-gap の2行だけで全体が連動します
     ・このファイルは <style>／<script> 内蔵の1ファイル完結版です。
       style.css を触らずに、このHTMLごと貼り付けて使えます。
     ========================================================================== */

  .leather .pt_a_top{
    /* --- 可変値（ここだけ触れば全体が連動します） --- */
    --ptt-col:   12.4%;      /* サムネイル1枚の幅（カンプ 150/1210） */
    --ptt-gap:   0.87%;      /* サムネイル横間隔（カンプ 10.5/1210） */
    --ptt-ratio: 150 / 235;  /* サムネイルの縦横比（カンプ 150 × 235px） */
    --ptt-rowgap: 30px;      /* 折り返した時の縦間隔 */
    --ptt-ph:  #c9c9c9;      /* 写真未入稿時のグレー */

    color: #111;
    font-feature-settings: "palt" 1;
    text-align: left;
  }

  /* --- SP (max-width:899px) : 3列固定 -------------------------------------- */
  @media only screen and (max-width: 899px){
    .leather .pt_a_top{
      --ptt-gap: 3%;
      --ptt-col: calc((100% - var(--ptt-gap) * 2) / 3);   /* 3列 */
      --ptt-rowgap: 22px;
    }
  }

  .leather .pt_a_top *{ box-sizing: border-box; }
  .leather .pt_a_top p,
  .leather .pt_a_top h3,
  .leather .pt_a_top ul,
  .leather .pt_a_top li,
  .leather .pt_a_top figure{ margin: 0; padding: 0; }
  .leather .pt_a_top ul{ list-style: none; }
  .leather .pt_a_top img{ display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
  /* W2エディタが <img> を <p> で包むことがあるため、figure直下のpも余白ゼロに */
  .leather .pt_a_top figure > p{ margin: 0; padding: 0; height: 100%; }


  /* --------------------------------------------------------------------------
     ブロック（HYOD FAN ／ STYLING 共通）
     -------------------------------------------------------------------------- */
  .leather .pt_a_top .ptt_block{ margin: 0 0 50px; }
  .leather .pt_a_top .ptt_block:last-child{ margin-bottom: 0; }

  /* --- 小見出し（HYOD FAN / STYLING）
         サイト既存の英字表記（COLOR / OPTION ITEMS などの .barlow）に合わせています。
         書体・太さは <h3> に付けた class="barlow" 側（Barlow Condensed / 500）を継承するため、
         ここでは font-family / font-weight を指定していません --- */
  .leather .pt_a_top .ptt_label{
    margin: 0 0 14px;
    color: #000;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: .48px;
  }

  /* --- サムネイル一覧 --- */
  .leather .pt_a_top .ptt_list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--ptt-rowgap) var(--ptt-gap);
  }
  .leather .pt_a_top .ptt_item{
    flex: 0 0 var(--ptt-col);
    max-width: var(--ptt-col);
  }

  /* --- 写真枠（現状はグレーのみ。<img> を入れると写真に置き換わります） --- */
  .leather .pt_a_top .ptt_fig{
    overflow: hidden;
    aspect-ratio: var(--ptt-ratio);
    background: var(--ptt-ph);
  }
  /* aspect-ratio 非対応ブラウザ用フォールバック（235 / 150 = 156.67%） */
  @supports not (aspect-ratio: 1 / 1){
    .leather .pt_a_top .ptt_fig{ position: relative; height: 0; padding-top: 156.67%; }
    .leather .pt_a_top .ptt_fig img{ position: absolute; top: 0; left: 0; }
  }

  /* --- キャプション（身長／体重、サイズ／身長） --- */
  .leather .pt_a_top .ptt_cap{
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
  }
  .leather .pt_a_top .ptt_cap span{ display: block; }

  @media only screen and (max-width: 899px){
    .leather .pt_a_top .ptt_block{ margin-bottom: 40px; }
    .leather .pt_a_top .ptt_label{ margin-bottom: 10px; }   /* 文字サイズはPCと共通(14px) */
    .leather .pt_a_top .ptt_cap{ margin-top: 6px; font-size: 11px; }
  }

  /* --- SP：STYLING は横スライド ---------------------------------------------
     サイズが5点あり3列では収まらないため、SPでは1行の横スクロールにしています。
     ・画面端いっぱいまで広げ、次の写真が少し覗くことで「横に動く」ことが伝わります
     ・スクロールスナップで1枚ずつ気持ちよく止まります
     ・ライブラリ不要（ネイティブのスクロール＝慣性も効きます）
     ・1枚の幅は --ptt-sp-col の1行で調整できます
     -------------------------------------------------------------------------- */
  @media only screen and (max-width: 899px){
    .leather .pt_a_top .ptt_styling{
      --ptt-sp-col:  38vw;    /* サムネイル1枚の幅（約2.4枚見える） */
      --ptt-sp-gap:   3vw;    /* サムネイル間隔 */
      --ptt-sp-edge: 5.33vw;  /* 画面左右の余白（サイト既存の 20/375 と同じ） */
    }
    .leather .pt_a_top .ptt_styling .ptt_list{
      flex-wrap: nowrap;
      gap: var(--ptt-sp-gap);
      margin: 0 calc(50% - 50vw);          /* 画面幅いっぱいまで広げる */
      padding: 0 var(--ptt-sp-edge);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;   /* iOS の慣性スクロール */
      overscroll-behavior-x: contain;      /* 端で親がスクロールしない */
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--ptt-sp-edge);
      scrollbar-width: none;               /* Firefox：スクロールバーを隠す */
      -ms-overflow-style: none;
    }
    .leather .pt_a_top .ptt_styling .ptt_list::-webkit-scrollbar{ display: none; }
    .leather .pt_a_top .ptt_styling .ptt_item{
      flex: 0 0 var(--ptt-sp-col);
      max-width: var(--ptt-sp-col);
      scroll-snap-align: start;
    }
  }


  /* --------------------------------------------------------------------------
     STYLING：クリックで開く拡大ポップアップ
     -------------------------------------------------------------------------- */
  /* 写真枠いっぱいの透明ボタン（サイト側の button 指定を打ち消して素の見た目に） */
  .leather .pt_a_top .ptt_styling .ptt_fig{ position: relative; }
  .leather .pt_a_top .ptt_open{
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
  }
  .leather .pt_a_top .ptt_open:focus-visible{ outline: 2px solid #000; outline-offset: -2px; }

  /* --- オーバーレイ --- */
  .leather .pt_a_top .ptt_modal{
    display: none;
    position: fixed;
    z-index: 10000;
    top: 0; right: 0; bottom: 0; left: 0;
    padding: 60px 70px;
    background: rgba(0,0,0,.85);
  }
  .leather .pt_a_top .ptt_modal.is_open{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- 拡大画像エリア --- */
  .leather .pt_a_top .ptt_modal_inner{
    position: relative;
    max-width: 100%;
    text-align: center;
  }
  .leather .pt_a_top .ptt_stage{
    aspect-ratio: var(--ptt-ratio);
    height: 70vh;
    max-height: 70vh;
    margin: 0 auto;
    overflow: hidden;
    background: var(--ptt-ph);
  }
  @supports not (aspect-ratio: 1 / 1){
    .leather .pt_a_top .ptt_stage{ width: 44.68vh; }   /* 150 / 235 * 70vh */
  }
  .leather .pt_a_top .ptt_modal_cap{
    margin-top: 14px;
    color: #fff;
    font-size: 13px;
    line-height: 1.6;
  }
  .leather .pt_a_top .ptt_modal_cap span{ display: inline-block; margin: 0 .5em; }

  /* --- 前へ／次へ／閉じる。
         W2エディタが空タグを削除するため、矢印は疑似要素で描画しています --- */
  .leather .pt_a_top .ptt_nav,
  .leather .pt_a_top .ptt_close{
    position: absolute;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
  }
  .leather .pt_a_top .ptt_nav{
    top: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
  }
  .leather .pt_a_top .ptt_prev{ left: -62px; }
  .leather .pt_a_top .ptt_next{ right: -62px; }
  .leather .pt_a_top .ptt_nav::after{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
  }
  .leather .pt_a_top .ptt_prev::after{
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  .leather .pt_a_top .ptt_next::after{
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .leather .pt_a_top .ptt_close{
    top: -46px;
    right: -46px;
    width: 40px;
    height: 40px;
  }
  .leather .pt_a_top .ptt_close::before,
  .leather .pt_a_top .ptt_close::after{
    content: "";
    position: absolute;
    top: 19px;
    left: 8px;
    width: 24px;
    height: 2px;
    background: #fff;
  }
  .leather .pt_a_top .ptt_close::before{
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .leather .pt_a_top .ptt_close::after{
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .leather .pt_a_top .ptt_nav:focus-visible,
  .leather .pt_a_top .ptt_close:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }

  /* ボタン内の説明テキストは読み上げ用（画面には出しません） */
  .leather .pt_a_top .ptt_vh{
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* --- SP：矢印は画像に重ねて配置 --- */
  @media only screen and (max-width: 899px){
    .leather .pt_a_top .ptt_modal{ padding: 60px 10px; }
    .leather .pt_a_top .ptt_stage{ height: 62vh; max-height: 62vh; }
    @supports not (aspect-ratio: 1 / 1){
      .leather .pt_a_top .ptt_stage{ width: 39.57vh; }
    }
    .leather .pt_a_top .ptt_prev{ left: -6px; }
    .leather .pt_a_top .ptt_next{ right: -6px; }
    .leather .pt_a_top .ptt_nav::after{ width: 13px; height: 13px; }
    .leather .pt_a_top .ptt_close{ top: -44px; right: 0; }
    .leather .pt_a_top .ptt_modal_cap{ font-size: 12px; }
  }

/* ==================================================================
   LEATHER 製品特徴深堀 (.leather .pt_a) ／ 7つの項目
   ================================================================== */

  /* ==========================================================================
     LEATHER 商品詳細 Aパターン  ( .leather .pt_a )
     HYOD_Web_レザーウエア_01_詳細_HSL516DS 準拠（アコーディオン改訂版）
     ---------------------------------------------------------------------------
     ・他CSSと干渉しないよう、全セレクタを .leather .pt_a 配下に限定
     ・寸法はすべて --u (基準単位) の倍数。カンプ(SP:375px幅)の実寸をそのまま記述
         SP  : --u = 1px      … カンプ375px版と等倍
         PC  : --u = 2.347px  … カンプ1366px版と等倍 (786.2 / 335)
       → 拡大・縮小は --u の値 1 行だけで全体が連動します
     ・このファイル(26aw_detail.css)は media="all" で読み込まれるため、
       PC/SPの出し分けはファイル内のメディアクエリで行っています
     ========================================================================== */

  .leather .pt_a{
    --u: 1px;
    --pta-line: #000;
    --pta-gray: #a0a0a0;
    --pta-bg:   transparent;   /* 背景グレーなし。#f8f8f8 にすればカンプの薄グレー背景になります */

    background: var(--pta-bg);
    color: #111;
    font-family: "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",メイリオ,Meiryo,sans-serif;
    font-feature-settings: "palt" 1;
    padding: calc(40 * var(--u)) 0 calc(80 * var(--u));
    text-align: left;

    /* 親 .ex_info の左右padding(15px)を打ち消して親幅いっぱいに広げる */
    margin-left: -15px;
    margin-right: -15px;
  }

  /* --- PC (style.css / min-width:900px) ------------------------------------ */
  @media only screen and (min-width: 900px){
    .leather .pt_a{
      --u: 2.347px;                       /* カンプ1366px版と等倍 (786.2/335) */
    }
  }

  /* --- SP (style_sp.css / max-width:899px) --------------------------------- */
  /* カンプSP版(375px)と完全に同じ比率になるよう、画面幅いっぱいに引き伸ばす */
  @media only screen and (max-width: 899px){
    .leather .pt_a{
      --u: calc(100vw / 375);             /* 375px幅で 1px ＝ カンプ等倍 */
      width: 100vw;
      margin-left:  calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
  }

  .leather .pt_a *{ box-sizing: border-box; }
  /* サイト側 style.css の
       .productDetailPage #ec_detail_layout #primary #dvProductDetailArea
       .productDetailBox #tabBox > div#detailOne .container ... p { font-size:14px }
     がID5個の高詳細度で p / h3 の文字サイズと行間を固定しているため、
     このブロック内の文字指定はすべて !important で打ち消しています。 */
  .leather .pt_a p,
  .leather .pt_a h3,
  .leather .pt_a figure{ margin: 0 !important; padding: 0 !important; }
  .leather .pt_a img{ display: block; width: 100%; height: auto; border: 0; }
  /* W2エディタが <img> を <p> で包むことがあるため、figure直下のpも余白ゼロに */
  .leather .pt_a figure > p{ margin: 0 !important; padding: 0 !important; }
  .leather .pt_a sup{ font-size: 60% !important; vertical-align: super; line-height: 0 !important; }


  /* --------------------------------------------------------------------------
     1. 導入ビジュアル
     -------------------------------------------------------------------------- */
  .leather .pt_a .pta_wide{ margin: 0 0 calc(20 * var(--u)) !important; }

  /* pho01 と キャッチ帯 は画面幅いっぱい（カンプ 1366px = ビューポート幅） */
  .leather .pt_a .pta_bleed{
    width: 100vw;
    margin: 0 calc(50% - 50vw) calc(20 * var(--u)) !important;
  }

  /* pho04：画像にテキストが焼き込まれていないため、キャッチを重ねる */
  .leather .pt_a .pta_band{ position: relative; }
  .leather .pt_a .pta_band_txt{
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 0 calc(15 * var(--u)) !important;
    color: #fff !important;
    font-size: calc(12 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-align: center;
  }

  /* SPはカンプの帯高(87u)に合わせてトリミング表示（画像の縦横比だと薄くなるため） */
  @media only screen and (max-width: 899px){
    .leather .pt_a .pta_band img{
      height: calc(87 * var(--u));
      object-fit: cover;
    }
  }

  /* PC のみ 880/1366 幅で中央寄せ（SPは全幅） */
  @media only screen and (min-width: 900px){
    .leather .pt_a .pta_wide{
      max-width: calc(375 * var(--u));   /* = 880px 相当 */
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }


  /* --------------------------------------------------------------------------
     2. 特長カード
     -------------------------------------------------------------------------- */
  .leather .pt_a .pta_sec{
    position: relative;
    margin: 0 calc(20 * var(--u));   /* 枠線なし・見出し帯を隙間なく積む */
    background: var(--pta-bg);
  }

  @media only screen and (min-width: 900px){
    .leather .pt_a .pta_sec{
      max-width: calc(335 * var(--u));   /* = 786px 相当 */
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* --- 見出し帯（アコーディオンのヘッダー／閉じた状態はこれだけが並ぶ） --- */
  .leather .pt_a .pta_head{
    position: relative;
    min-height: calc(80 * var(--u));   /* はみ出して次の帯に隠れないよう min-height */
    padding: calc(24 * var(--u)) calc(26 * var(--u)) 0 !important;
    background: var(--pta-line);
    color: #fff;
  }
  .leather .pt_a .pta_htitle{
    display: flex;
    align-items: center;
    font-size: calc(16 * var(--u)) !important;
    line-height: 1.35 !important;
  }
  .leather .pt_a .pta_num{
    flex: 0 0 auto;
    font-family: "Oswald","Barlow Condensed","Noto Sans JP",sans-serif;
    font-weight: 500;
    font-size: calc(22 * var(--u)) !important;
    line-height: 1 !important;
    padding-right: calc(8 * var(--u));
    margin-right: calc(8 * var(--u));
    border-right: 1px solid #fff;
  }
  .leather .pt_a .pta_htxt{
    font-size: calc(16 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.35 !important;
    letter-spacing: -.01em;
  }
  /* 文字数が多い見出しの縮小指定（カンプ準拠） */
  .leather .pt_a .pta_htxt.is_s { font-size: calc(14.5 * var(--u)) !important; }
  .leather .pt_a .pta_htxt.is_xs{ font-size: calc(11.5 * var(--u)) !important; }

  /* --- リード文 --- */
  .leather .pt_a .pta_lead{
    padding: calc(20 * var(--u)) calc(27.5 * var(--u)) 0 !important;
    font-size: calc(9 * var(--u)) !important;
    line-height: 1.7 !important;
  }

  /* --- 千鳥（画像＋キャッチ） --- */
  .leather .pt_a .pta_zigzag{
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(30 * var(--u));
  }
  .leather .pt_a .pta_zigzag > *{ width: 50%; }
  .leather .pt_a .pta_catch{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(8 * var(--u)) !important;   /* 画像との間隔。SPの最長キャッチが1行に収まる上限が約10u */
    font-size: calc(11 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-align: center;
  }
  /* カンプは中央線寄せ（左右のブロックが内側に寄る）。
     戻す場合は下の2ブロックのコメントを外してください。
  .leather .pt_a .pta_catch1{ justify-content: flex-start; text-align: left;  padding-left: calc(10 * var(--u)); }
  .leather .pt_a .pta_catch2{ justify-content: flex-end;   text-align: right; padding-right: 0; }
  */

  /* --- 本文（3行 → もっと読む で全文） --- */
  .leather .pt_a .pta_check{
    display: block;          /* サイト側 input[type="checkbox"]{display:none} を打ち消す */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
            appearance: none;
  }
  .leather .pt_a .pta_text{
    padding: calc(26 * var(--u)) calc(27.5 * var(--u)) 0 !important;
    font-size: calc(11 * var(--u)) !important;
    line-height: 1.82 !important;
  }

  /* 展開パーツ（画像・リード・千鳥・本文）は閉じている間は非表示 */
  .leather .pt_a .pta_body{
    display: none;
    padding-bottom: calc(6 * var(--u));
  }
  .leather .pt_a .pta_check:checked ~ .pta_body{ display: block; }

  /* --- もっと読む／ここまでたたむ --- */
  /* 帯の中のボタンは「帯の下端からの距離」で固定します。
     文字の行送りに影響されないので、フォントの読み込み状況やOSが違っても
     矢印が帯からはみ出して欠けることがありません。 */
  .leather .pt_a .pta_ctl{
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(5 * var(--u));    /* 矢印の見た目の下端が帯の下端から5u内側に入る */
    margin: 0 !important;
    font-size: 0 !important;      /* p の strut を消して帯の高さを崩さない */
    line-height: 0 !important;
    text-align: center;
  }
  /* 展開後、本文の末尾に置く「ここまでたたむ」は通常フロー */
  .leather .pt_a .pta_ctl_btm{
    position: static;
    margin-top: calc(15 * var(--u)) !important;
  }
  .leather .pt_a .pta_more{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--pta-gray) !important;
    font-size: calc(10 * var(--u)) !important;
    line-height: 1 !important;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
  }
  .leather .pt_a .pta_more .pta_close{ display: none; }
  .leather .pt_a .pta_check:checked ~ .pta_head .pta_more .pta_open { display: none; }
  .leather .pt_a .pta_check:checked ~ .pta_head .pta_more .pta_close{ display: block; }

  /* 矢印。W2エディタが空タグ(<i>)を削除するため、疑似要素で描画しています */
  .leather .pt_a .pta_more::after{
    content: "";
    display: block;
    width:  calc(11 * var(--u));
    height: calc(11 * var(--u));
    /* 正方形を45°回転させているため、見た目は枠より上下に約2.3u はみ出します。
       その分を見込んで、Vの下端が帯の下端から約2u内側に収まる位置に置いています。 */
    margin: calc(4 * var(--u)) 0 0;
    border-right:  2px solid var(--pta-gray);
    border-bottom: 2px solid var(--pta-gray);
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  /* 開いている時は上向き（位置は動かさず回転だけ切り替え） */
  .leather .pt_a .pta_check:checked ~ .pta_head .pta_more::after,
  .leather .pt_a .pta_ctl_btm .pta_more::after{
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  .leather .pt_a .pta_ctl_btm .pta_more::after{ margin: calc(6 * var(--u)) 0 0; }
  .leather .pt_a .pta_ctl_btm .pta_more .pta_close{ display: block; }

  /* ▼ W2エディタは <input> を <p> で自動的に包むため、上の兄弟セレクタ(~)が効かなくなります。
        構造に依存しない :has() 版を併記（どちらかが必ず効きます）。 */
  .leather .pt_a .pta_sec:has(.pta_check:checked) .pta_body{ display: block; }
  .leather .pt_a .pta_sec:has(.pta_check:checked) .pta_head .pta_open { display: none; }
  .leather .pt_a .pta_sec:has(.pta_check:checked) .pta_head .pta_close{ display: block; }
  .leather .pt_a .pta_sec:has(.pta_check:checked) .pta_head .pta_more::after{
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  /* キーボード操作時のフォーカス表示（帯の中のラベルへ） */
  .leather .pt_a .pta_check:focus ~ .pta_head .pta_more{ outline: 1px dotted var(--pta-gray); }
  .leather .pt_a .pta_sec:has(.pta_check:focus) .pta_head .pta_more{ outline: 1px dotted var(--pta-gray); }

/* ==================================================================
   TEXTILE 製品特徴深堀 (.textile .pt_a)
   ================================================================== */

  /* ==========================================================================
     TEXTILE (ST-X TEXTILE) 商品詳細  ( .textile .pt_a )
     26aw_look_sp_STJ556D 準拠
     ---------------------------------------------------------------------------
     ・他CSSと干渉しないよう、全セレクタを .textile .pt_a 配下に限定
     ・寸法はすべて --u (基準単位) の倍数。カンプ(SP:375px幅)の実寸をそのまま記述
         SP  : --u = 100vw/375  … カンプ375px版と等倍
         PC  : --u = 2.347px    … leather と同じ見せ方 (カード786px)
       → 拡大・縮小は --u の値 1 行だけで全体が連動します
     ・このファイル(26aw_detail.css)は media="all" で読み込まれるため、
       PC/SPの出し分けはファイル内のメディアクエリで行っています
     ========================================================================== */

  .textile .pt_a{
    --u: 1px;
    --pta-line: #000;
    --pta-gray: #a0a0a0;
    --pta-bg:   transparent;   /* 背景なし。#f8f8f8 にすればカンプの薄グレー背景になります */

    background: var(--pta-bg);
    color: #111;
    font-family: "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",メイリオ,Meiryo,sans-serif;
    font-feature-settings: "palt" 1;
    padding: calc(40 * var(--u)) 0 calc(80 * var(--u));
    text-align: left;

    /* 親 .ex_info の左右padding(15px)を打ち消して親幅いっぱいに広げる */
    margin-left: -15px;
    margin-right: -15px;
  }

  /* --- PC (style.css / min-width:900px) ------------------------------------ */
  @media only screen and (min-width: 900px){
    .textile .pt_a{ --u: 2.347px; }
  }

  /* --- SP (style_sp.css / max-width:899px) --------------------------------- */
  @media only screen and (max-width: 899px){
    .textile .pt_a{
      --u: calc(100vw / 375);
      width: 100vw;
      margin-left:  calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
  }

  .textile .pt_a *{ box-sizing: border-box; }
  /* サイト側 style.css の
       .productDetailPage #ec_detail_layout #primary #dvProductDetailArea
       .productDetailBox #tabBox > div#detailOne .container ... p { font-size:14px }
     がID5個の高詳細度で p / h3 の文字サイズと行間を固定しているため、
     このブロック内の文字指定はすべて !important で打ち消しています。 */
  .textile .pt_a p,
  .textile .pt_a h3,
  .textile .pt_a figure{ margin: 0 !important; padding: 0 !important; }
  .textile .pt_a img{ display: block; width: 100%; height: auto; border: 0; }
  /* W2エディタが <img> を <p> で包むことがあるため、figure直下のpも余白ゼロに */
  .textile .pt_a figure > p{ margin: 0 !important; padding: 0 !important; }
  .textile .pt_a sup{ font-size: 60% !important; vertical-align: super; line-height: 0 !important; }


  /* --------------------------------------------------------------------------
     1. 導入ビジュアル
     -------------------------------------------------------------------------- */
  .textile .pt_a .pta_wide{ margin: 0 0 calc(20 * var(--u)) !important; }

  /* pho01 と キャッチ帯 は画面幅いっぱい（カンプ準拠） */
  .textile .pt_a .pta_bleed{
    width: 100vw;
    margin: 0 calc(50% - 50vw) calc(20 * var(--u)) !important;
  }

  /* pho04：画像にテキストが焼き込まれていないため、キャッチを重ねる */
  .textile .pt_a .pta_band{ position: relative; }
  .textile .pt_a .pta_band_txt{
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 0 calc(15 * var(--u)) !important;
    color: #fff !important;
    font-size: calc(12 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-align: center;
  }

  /* PC のみ 880/1366 幅で中央寄せ（SPは全幅） */
  @media only screen and (min-width: 900px){
    .textile .pt_a .pta_wide{
      max-width: calc(375 * var(--u));   /* = 880px 相当 */
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }


  /* --------------------------------------------------------------------------
     2. 特長カード
     -------------------------------------------------------------------------- */
  .textile .pt_a .pta_sec{
    position: relative;
    margin: 0 calc(20 * var(--u)) calc(50 * var(--u));
    border: 4px solid var(--pta-line);
    background: var(--pta-bg);
  }
  .textile .pt_a .pta_sec:first-of-type{ margin-top: calc(80 * var(--u)); }
  .textile .pt_a .pta_sec:last-of-type{ margin-bottom: 0; }

  @media only screen and (min-width: 900px){
    .textile .pt_a .pta_sec{
      max-width: calc(335 * var(--u));   /* = 786px 相当 */
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* --- 見出し（黒帯・中央揃え） --- */
  .textile .pt_a .pta_head{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16 * var(--u)) !important;
    line-height: 1.35 !important;
    min-height: calc(76 * var(--u));
    padding: calc(8 * var(--u)) calc(6 * var(--u)) !important;
    background: var(--pta-line);
    color: #fff !important;
  }
  .textile .pt_a .pta_num{
    flex: 0 0 auto;
    font-family: "Oswald","Barlow Condensed","Noto Sans JP",sans-serif;
    font-weight: 500;
    font-size: calc(22 * var(--u)) !important;
    line-height: 1 !important;
    padding-right: calc(8 * var(--u));
    margin-right: calc(8 * var(--u));
    border-right: 1px solid #fff;
  }
  /* 見出しは1行に収まるよう、カンプ同様ブロックごとにサイズを指定 */
  .textile .pt_a .pta_htxt{
    font-size: calc(16 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.35 !important;
    letter-spacing: -.01em;
  }
  .textile .pt_a .pta_htxt.s20{ font-size: calc(20 * var(--u)) !important; }

  /* --- リード文 --- */
  .textile .pt_a .pta_lead{
    padding: calc(20 * var(--u)) calc(23.5 * var(--u)) 0 !important;
    font-size: calc(9 * var(--u)) !important;
    line-height: 1.7 !important;
  }

  /* --- 千鳥（画像＋キャッチ） --- */
  .textile .pt_a .pta_zigzag{
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(30 * var(--u));
  }
  .textile .pt_a .pta_zigzag > *{ width: 50%; }
  .textile .pt_a .pta_catch{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(8 * var(--u)) !important;
    font-size: calc(11 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-align: center;
  }

  /* --- 本文（3行 → もっと読む で全文） --- */
  .textile .pt_a .pta_check{
    display: block;          /* サイト側 input[type="checkbox"]{display:none} を打ち消す */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
            appearance: none;
  }
  .textile .pt_a .pta_text{
    padding: calc(26 * var(--u)) calc(23.5 * var(--u)) 0 !important;
    font-size: calc(11 * var(--u)) !important;
    line-height: 1.82 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .textile .pt_a .pta_check:checked ~ .pta_text{
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .textile .pt_a .pta_more{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(15 * var(--u)) 0 calc(20 * var(--u));
    color: var(--pta-gray) !important;
    font-size: calc(10 * var(--u)) !important;
    line-height: 1 !important;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
  }
  .textile .pt_a .pta_more .pta_close{ display: none; }
  .textile .pt_a .pta_check:checked ~ .pta_more .pta_open { display: none; }
  .textile .pt_a .pta_check:checked ~ .pta_more .pta_close{ display: block; }

  /* 矢印。W2エディタが空タグ(<i>)を削除するため、疑似要素で描画しています */
  .textile .pt_a .pta_more::after{
    content: "";
    display: block;
    width:  calc(11 * var(--u));
    height: calc(11 * var(--u));
    margin: calc(8 * var(--u)) 0 calc(-2 * var(--u));
    border-right:  2px solid var(--pta-gray);
    border-bottom: 2px solid var(--pta-gray);
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .textile .pt_a .pta_check:checked ~ .pta_more::after{
    margin: calc(10 * var(--u)) 0 0;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }

  /* ▼ W2エディタは <input> を <p> で自動的に包むため、上の兄弟セレクタ(~)が効かなくなります。
        構造に依存しない :has() 版を併記（どちらかが必ず効きます）。 */
  .textile .pt_a .pta_sec:has(.pta_check:checked) .pta_text{
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .textile .pt_a .pta_sec:has(.pta_check:checked) .pta_open { display: none; }
  .textile .pt_a .pta_sec:has(.pta_check:checked) .pta_close{ display: block; }
  .textile .pt_a .pta_sec:has(.pta_check:checked) .pta_more::after{
    margin: calc(10 * var(--u)) 0 0;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  .textile .pt_a .pta_check:focus ~ .pta_more{ outline: 1px dotted var(--pta-gray); }

/* ==================================================================
   GLOVE 製品特徴深堀 (.glove .pt_a)
   ================================================================== */

  /* ==========================================================================
     GLOVE (ST-X HEATING RIDE GLOVES) 商品詳細  ( .glove .pt_a )
     26aw_look_sp_HHG501 準拠
     ---------------------------------------------------------------------------
     ・他CSSと干渉しないよう、全セレクタを .glove .pt_a 配下に限定
     ・寸法はすべて --u (基準単位) の倍数。カンプ(SP:375px幅)の実寸をそのまま記述
         SP  : --u = 100vw/375  … カンプ375px版と等倍
         PC  : --u = 2.347px    … leather と同じ見せ方 (カード786px)
       → 拡大・縮小は --u の値 1 行だけで全体が連動します
     ・このファイル(26aw_detail.css)は media="all" で読み込まれるため、
       PC/SPの出し分けはファイル内のメディアクエリで行っています
     ========================================================================== */

  .glove .pt_a{
    --u: 1px;
    --pta-line: #000;
    --pta-gray: #a0a0a0;
    --pta-bg:   transparent;   /* 背景なし。#f8f8f8 にすればカンプの薄グレー背景になります */

    background: var(--pta-bg);
    color: #111;
    font-family: "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",メイリオ,Meiryo,sans-serif;
    font-feature-settings: "palt" 1;
    padding: calc(40 * var(--u)) 0 calc(80 * var(--u));
    text-align: left;

    /* 親 .ex_info の左右padding(15px)を打ち消して親幅いっぱいに広げる */
    margin-left: -15px;
    margin-right: -15px;
  }

  /* --- PC (style.css / min-width:900px) ------------------------------------ */
  @media only screen and (min-width: 900px){
    .glove .pt_a{ --u: 2.347px; }
  }

  /* --- SP (style_sp.css / max-width:899px) --------------------------------- */
  @media only screen and (max-width: 899px){
    .glove .pt_a{
      --u: calc(100vw / 375);
      width: 100vw;
      margin-left:  calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
  }

  .glove .pt_a *{ box-sizing: border-box; }
  /* サイト側 style.css の
       .productDetailPage #ec_detail_layout #primary #dvProductDetailArea
       .productDetailBox #tabBox > div#detailOne .container ... p { font-size:14px }
     がID5個の高詳細度で p / h3 の文字サイズと行間を固定しているため、
     このブロック内の文字指定はすべて !important で打ち消しています。 */
  .glove .pt_a p,
  .glove .pt_a h3,
  .glove .pt_a figure{ margin: 0 !important; padding: 0 !important; }
  .glove .pt_a img{ display: block; width: 100%; height: auto; border: 0; }
  /* W2エディタが <img> を <p> で包むことがあるため、figure直下のpも余白ゼロに */
  .glove .pt_a figure > p{ margin: 0 !important; padding: 0 !important; }
  .glove .pt_a sup{ font-size: 60% !important; vertical-align: super; line-height: 0 !important; }


  /* --------------------------------------------------------------------------
     1. 導入ビジュアル
     -------------------------------------------------------------------------- */
  .glove .pt_a .pta_wide{ margin: 0 0 calc(20 * var(--u)) !important; }

  /* pho01 と キャッチ帯 は画面幅いっぱい（カンプ準拠） */
  .glove .pt_a .pta_bleed{
    width: 100vw;
    margin: 0 calc(50% - 50vw) calc(20 * var(--u)) !important;
  }

  /* pho04：画像にテキストが焼き込まれていないため、キャッチを重ねる */
  .glove .pt_a .pta_band{ position: relative; }
  .glove .pt_a .pta_band_txt{
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding: 0 calc(15 * var(--u)) !important;
    color: #fff !important;
    font-size: calc(12 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-align: center;
  }

  /* PC のみ 880/1366 幅で中央寄せ（SPは全幅） */
  @media only screen and (min-width: 900px){
    .glove .pt_a .pta_wide{
      max-width: calc(375 * var(--u));   /* = 880px 相当 */
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }


  /* --------------------------------------------------------------------------
     2. 特長カード
     -------------------------------------------------------------------------- */
  .glove .pt_a .pta_sec{
    position: relative;
    margin: 0 calc(20 * var(--u)) calc(50 * var(--u));
    border: 4px solid var(--pta-line);
    background: var(--pta-bg);
  }
  .glove .pt_a .pta_sec:first-of-type{ margin-top: calc(80 * var(--u)); }
  .glove .pt_a .pta_sec:last-of-type{ margin-bottom: 0; }

  @media only screen and (min-width: 900px){
    .glove .pt_a .pta_sec{
      max-width: calc(335 * var(--u));   /* = 786px 相当 */
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* --- 見出し（黒帯・中央揃え） --- */
  .glove .pt_a .pta_head{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(16 * var(--u)) !important;
    line-height: 1.35 !important;
    min-height: calc(76 * var(--u));
    padding: calc(8 * var(--u)) calc(6 * var(--u)) !important;
    background: var(--pta-line);
    color: #fff !important;
  }
  .glove .pt_a .pta_num{
    flex: 0 0 auto;
    font-family: "Oswald","Barlow Condensed","Noto Sans JP",sans-serif;
    font-weight: 500;
    font-size: calc(22 * var(--u)) !important;
    line-height: 1 !important;
    padding-right: calc(8 * var(--u));
    margin-right: calc(8 * var(--u));
    border-right: 1px solid #fff;
  }
  /* 見出しは1行に収まるよう、カンプ同様ブロックごとにサイズを指定 */
  .glove .pt_a .pta_htxt{
    font-size: calc(16 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.35 !important;
    letter-spacing: -.01em;
  }
  .glove .pt_a .pta_htxt.s12{ font-size: calc(12 * var(--u)) !important; }
  .glove .pt_a .pta_htxt.s15{ font-size: calc(15 * var(--u)) !important; }
  .glove .pt_a .pta_htxt.s16{ font-size: calc(16 * var(--u)) !important; }
  .glove .pt_a .pta_htxt.s18{ font-size: calc(18 * var(--u)) !important; }
  .glove .pt_a .pta_htxt.s20{ font-size: calc(20 * var(--u)) !important; }

  /* --- リード文 --- */
  .glove .pt_a .pta_lead{
    padding: calc(20 * var(--u)) calc(23.5 * var(--u)) 0 !important;
    font-size: calc(9 * var(--u)) !important;
    line-height: 1.7 !important;
  }

  /* --- 千鳥（画像＋キャッチ） --- */
  .glove .pt_a .pta_zigzag{
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(30 * var(--u));
  }
  .glove .pt_a .pta_zigzag > *{ width: 50%; }
  .glove .pt_a .pta_catch{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 calc(8 * var(--u)) !important;
    font-size: calc(11 * var(--u)) !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-align: center;
  }

  /* --- 本文（3行 → もっと読む で全文） --- */
  .glove .pt_a .pta_check{
    display: block;          /* サイト側 input[type="checkbox"]{display:none} を打ち消す */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
            appearance: none;
  }
  .glove .pt_a .pta_text{
    padding: calc(26 * var(--u)) calc(23.5 * var(--u)) 0 !important;
    font-size: calc(11 * var(--u)) !important;
    line-height: 1.82 !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .glove .pt_a .pta_check:checked ~ .pta_text{
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  .glove .pt_a .pta_more{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(15 * var(--u)) 0 calc(20 * var(--u));
    color: var(--pta-gray) !important;
    font-size: calc(10 * var(--u)) !important;
    line-height: 1 !important;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
  }
  .glove .pt_a .pta_more .pta_close{ display: none; }
  .glove .pt_a .pta_check:checked ~ .pta_more .pta_open { display: none; }
  .glove .pt_a .pta_check:checked ~ .pta_more .pta_close{ display: block; }

  /* 矢印。W2エディタが空タグ(<i>)を削除するため、疑似要素で描画しています */
  .glove .pt_a .pta_more::after{
    content: "";
    display: block;
    width:  calc(11 * var(--u));
    height: calc(11 * var(--u));
    margin: calc(8 * var(--u)) 0 calc(-2 * var(--u));
    border-right:  2px solid var(--pta-gray);
    border-bottom: 2px solid var(--pta-gray);
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .glove .pt_a .pta_check:checked ~ .pta_more::after{
    margin: calc(10 * var(--u)) 0 0;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }

  /* ▼ W2エディタは <input> を <p> で自動的に包むため、上の兄弟セレクタ(~)が効かなくなります。
        構造に依存しない :has() 版を併記（どちらかが必ず効きます）。 */
  .glove .pt_a .pta_sec:has(.pta_check:checked) .pta_text{
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .glove .pt_a .pta_sec:has(.pta_check:checked) .pta_open { display: none; }
  .glove .pt_a .pta_sec:has(.pta_check:checked) .pta_close{ display: block; }
  .glove .pt_a .pta_sec:has(.pta_check:checked) .pta_more::after{
    margin: calc(10 * var(--u)) 0 0;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
  .glove .pt_a .pta_check:focus ~ .pta_more{ outline: 1px dotted var(--pta-gray); }

/* ==================================================================
   DETAIL画像グリッド ( #detailTwo .row.image_column )
   B / B' / D / E パターンの、サイズテーブル下に並ぶ6枚
   ------------------------------------------------------------------
   ・style.css の
       .productDetailPage ... #tabBox > div .container .image_column
       { margin: 0 -20px -25px; }
     が margin-top:0 を指定しているため、サイズテーブルと詰まって表示される。
     同セレクタはID4つで詳細度が高いため !important で上書きする。
   ・値は 260824_HYOD_Web_W2page_B/B'.pdf の実測。
     PC : サイズテーブル注記の下端 y=1717 → グリッド上端 y=1818 ＝ 101px
     SP : y=1716 → y=1746 ＝ 30px（style_sp.css の指定と一致するため追加不要）
   ・SPは既存の 30px が設計どおりなので、PC(900px以上)だけに適用する。
   ================================================================== */
@media only screen and (min-width: 900px) {
  #tabBox > #detailTwo .container .row.image_column {
    margin-top: 100px !important;
  }
}