@charset 'UTF-8';
/* ============================================================================
   医療白衣ユニフォーム.com V3 共通CSS — 商品ページ編
   ----------------------------------------------------------------------------
   設置：/files/css/uni_common.css
   読込：<HEAD内追加タグ> に
         <link rel="stylesheet" href="/files/css/uni_common.css?v=20260803">
         ※ uni_font_v3.css より「先に」読み込むこと

   出自：エステユニフォーム.com の uni_common.css から
         商品詳細ページで実際に使われているクラスだけを抽出し、
         02_トンマナ定義書_医療白衣ユニフォームcom_V3.md に合わせて再調律。
   クラス名はCSV側に埋め込み済みのため一切変更していない。

   ■ 収録範囲（CSVで実使用のクラスのみ）
     0. デザイントークン（:root）
     1. .uniSec01 基本（リンク・見出し・段落・配置）
     2. .detailList01  商品追加画像
     3. dl.descList01  商品詳細リスト
     4. #colorSwatchGrid カラーバリエーション
     5. .tbl01         サイズ表
     6. a.btnType01/02/03 ボタン
     7. ユーティリティ（mg/pd/fsz/aln/mglr）
     8. SmartPhoto（拡大表示）の調律
     9. V2の残骸クラスの救済（.itemInfo / .center）
   ============================================================================ */


/* ============================================================================
   0. デザイントークン
   02_トンマナ定義書 §10 の一括定義をそのまま採用。
   既定は MEDICAL（ディープブルー）。介護系ページは <body data-mode="care">。
   ============================================================================ */
:root{
  /* Neutral */
  --white:#ffffff; --bg:#f7f9fb; --bg-alt:#eef2f6;
  --ink:#1f2933; --ink-soft:#56616b; --ink-mute:#8a949c;
  --line:#d8e0e6; --line-soft:#eaeff3;
  /* Function */
  --sale:#c33a26; --new:#b8541e; --new-light:#e8703a;
  --stock-o:#1f7a4d; --stock-t:#8a6a1c; --stock-x:#6f787f;
  --free:#1b4b6b;
  /* Type */
  --font-sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",YuGothic,"Yu Gothic Medium",Meiryo,sans-serif;
  --font-serif:"Hiragino Mincho ProN","游明朝",YuMincho,serif;
  --font-en:"Jost","Century Gothic",sans-serif;
  --font-num:"Roboto","Helvetica Neue",Arial,sans-serif;
  /* Layout */
  --container:1200px; --gutter:24px; --sec-pad:80px; --sec-pad-sp:56px;
  --radius:4px; --radius-lg:8px; --radius-pill:999px;
  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.18s; --dur-base:.25s; --dur-slow:.45s;
  /* Default = MEDICAL */
  --accent-dark:#1b4b6b; --accent:#2e7ba6; --accent-mid:#6fa8c7;
  --accent-pale:#dcebf3; --accent-bg:#f2f8fb;

  /* サイズ表の行ハイライト（トンマナ本体には無いページ固有の値） */
  --size-oth:#fbf1dc;      /* 別寸サイズ行 */
  --size-ladies:#fbe9ec;   /* レディースサイズ行 */
}
[data-mode="care"]{
  --accent-dark:#2f6b4f; --accent:#4e9375; --accent-mid:#8cbfa5;
  --accent-pale:#dcece3; --accent-bg:#f4faf6;
}
@media (prefers-reduced-motion: reduce){
  .uniSec01 *{ animation:none !important; transition:none !important; }
}


/* ============================================================================
   1. .uniSec01 基本
   ============================================================================ */
.uniSec01{
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink);
}
@media only screen and (max-width: 767px){
  .uniSec01{ font-size: 14px; }
}

/* WYSIWYGエディタが挿入する<br>を無効化（grid/flex崩れ防止） */
.uniSec01 .noBr br:not(.pcBr):not(.allBr){ display:none; }

/* -- 商品詳細のリンク文字色 --
   トンマナ §2-2：--bg 上の14px以下は --accent-dark（8.83:1）を使う。 */
.uniSec01 a,
.uniSec01 a:link,
.uniSec01 a:active   { color: var(--accent-dark) !important; text-decoration: none; }
.uniSec01 a:visited  { text-decoration: none; }
.uniSec01 a:hover    { color: var(--accent) !important; text-decoration: underline; }
.uniSec01 a:focus-visible{
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}

.inner{ margin: 0 auto; }

/* -- 商品説明タイトル非表示（カート側の見出しを殺す） -- */
.detail-cont p.ttl_prd{ display:none; }


/* -- セクション見出し h2 --
   HTMLは <h2>detail<br class="allBr"><span>商品説明</span></h2>。
   トンマナ §5-3 の「英字キッカー＋和文見出し＋ディバイダ」に読み替える。
   （エステ版は英字22px Book Antiqua＋和文14px明朝＋上罫線だった） */
/* ※ uni_font_v3.css が `body h2 { font-weight / letter-spacing / line-height }` を
      !important で指定しているため、ここも !important で上書きする必要がある。 */
.uniSec01 h2{
  text-align: center;
  margin: 0 0 32px;
  /* ここは英字キッカー */
  font-family: var(--font-en) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: .40em !important;
  text-indent: .40em;          /* letter-spacing の右側アキを打ち消して中央に見せる */
  text-transform: uppercase;
  color: var(--accent) !important;
}
.uniSec01 h2 br{ display:block; }
.uniSec01 h2 span{
  /* ここが和文の本見出し */
  display: block;
  margin-top: 10px;
  font-family: var(--font-sans) !important;
  font-size: clamp(20px, 2.6vw, 26px) !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: .10em !important;
  text-indent: 0;
  text-transform: none;
  color: var(--ink) !important;
  /* エステ版の border-top は使わず、トンマナのディバイダに置換 */
  border: 0;
  padding: 0;
}
.uniSec01 h2 span::after{
  content: "";
  display: block;
  width: 40px; height: 2px;
  margin: 18px auto 0;
  background: var(--accent);
}

/* -- 商品キャッチコピー h3（<h3 class="alnC">） -- */
.uniSec01 h3{
  font-family: var(--font-sans) !important;
  font-size: clamp(16px, 2.2vw, 19px) !important;
  font-weight: 600 !important;
  line-height: 1.7 !important;
  letter-spacing: .06em !important;
  color: var(--ink) !important;
  margin: 0 0 16px;
}

.uniSec01 p{ margin: 0 0 20px; }
.uniSec01 p img{ max-width: 100%; }
.uniSec01 img{ max-width: 100%; height: auto; }

/* サブコピー（<p class="pc_alnC fsz13 mgb40">）は補助テキスト色に */
.uniSec01 p.pc_alnC{ color: var(--ink-soft); line-height: 1.8; }

.uniSec01 .alnC,
.uniSec01 .pc_alnC,
.alnC { text-align: center; }
.uniSec01 .alnR{ text-align: right; }

.uniSec01 br.pcBr,
.uniSec01 br.allBr{ display: block; }
@media only screen and (max-width: 767px){
  .uniSec01 .pc_alnC{ text-align: left; }
  .uniSec01 br.pcBr{ display: none; }
}

/* -- ブランド紹介などの枠付きブロック --
   CSV側が style="background:#e0e0e0" をインラインで持っているため、
   トンマナの --bg-alt へ上書きする（CSVを直すまでの暫定措置）。 */
.uniSec01.pdall20[style*="background"]{
  background: var(--bg-alt) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.uniSec01.pdall20 h2{ margin-bottom: 24px; }


/* ============================================================================
   2. 追加画像リスト .detailList01
   エステ版は float + :before で正方形を作っていたが、
   grid + aspect-ratio に置換（回り込み解除が不要になる）。
   ============================================================================ */
.detailList01{
  list-style-type: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
}
.detailList01 li{
  margin: 0; padding: 0;
  line-height: 0;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.detailList01 li a{ display:block; width:100%; height:100%; }
.detailList01 li img{
  width: 100%; height: 100%;
  object-fit: cover;          /* サムネイルはトリミング。拡大時に全体が見える */
  object-position: center;
  display: block;
  transition: opacity var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.detailList01 li:hover img{
  opacity: .82;
  transform: scale(1.04);
}
@media only screen and (max-width: 767px){
  .detailList01{ grid-template-columns: repeat(3, 1fr); gap: 6px; }
}

/* 旧float版のためのfallback（aspect-ratio非対応の古い端末） */
@supports not (aspect-ratio: 1 / 1){
  .detailList01 li::before{ content:""; display:block; padding-top:100%; }
  .detailList01 li img{ position:absolute; inset:0; }
}


/* ============================================================================
   3. 商品詳細リスト dl.descList01
   トンマナ「1pxの細いディバイダで仕切る」に合わせ、点線→実線の極薄罫線へ。
   ============================================================================ */
dl.descList01{
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 32px;
}
dl.descList01 dt,
dl.descList01 dd{ padding: 10px 6px; }
dl.descList01 dt{
  float: left;
  width: 9em;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
dl.descList01 dd{
  position: relative;
  padding-left: 9.5em;
  padding-right: 13em;          /* 右上のボタンとの重なりを防ぐ */
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
dl.descList01 dd span{
  position: absolute;
  top: 7px;
  right: 0;
}
dl.descList01 dd span a.btnType01{
  font-size: 11px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  letter-spacing: .04em;
}
.uniSec01 dl.descList01 br{ display: block; }

/* 品番は数字書体で（トンマナ §3：品番 --font-num 11px .14em） */
.uniSec01 .prd-code,
.uniSec01 .itemCode{
  font-family: var(--font-num) !important;
  letter-spacing: .14em;
}

@media only screen and (max-width: 767px){
  dl.descList01 dt{
    float: none; width: 100%;
    padding: 12px 6px 0;
  }
  dl.descList01 dd{
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 12px;
  }
  dl.descList01 dd span{
    position: static;
    display: block;
    margin-top: 8px;
  }
}


/* ============================================================================
   4. カラーバリエーション #colorSwatchGrid
   中身は uni_color_swatch.js がインラインstyleで生成する。
   ここでは箱まわりだけ整える。
   ============================================================================ */
#colorSwatchGrid{ margin-top: 4px; }
#colorSwatchGrid a{
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease);
}
#colorSwatchGrid a:hover{ transform: translateY(-3px); }
#colorSwatchGrid img{ border-color: var(--line) !important; }


/* ============================================================================
   5. サイズ表 .tbl01
   エステ版の th 背景 #E9F6A3（黄緑）→ トンマナの --accent-pale。
   ============================================================================ */
.tbl01{
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: collapse;
  table-layout: fixed;
  background: var(--white);
}
.tbl01 th,
.tbl01 td{
  border: 1px solid var(--line);
  padding: 7px 2px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* 行見出し（SS / S / M …） */
.tbl01 th{
  background: var(--bg-alt);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .04em;
}
/* 列見出し行（1行目）は他より強く */
.tbl01 tr:first-child th{
  background: var(--accent-pale);
  color: var(--accent-dark);
  font-weight: 600;
}
/* 実測値は数字書体で */
.tbl01 td{
  font-family: var(--font-num);
  color: var(--ink);
  letter-spacing: .01em;
}
/* eShop-doのCMSは保存時に本文中の<br>タグを無条件で全除去するため、
   セル内2行表示（範囲値＋中心値など）は<br>ではなく<p>2つのブロック分割で
   組む。ここでその<p>の余白をリセットしてセル内で詰めて見せる。 */
.tbl01 td p, .tbl01 th p{ margin:0; }

.tbl01.col2  th, .tbl01.col2  td{ width: calc(100% / 2); }
.tbl01.col3  th, .tbl01.col3  td{ width: calc(100% / 3); }
.tbl01.col4  th, .tbl01.col4  td{ width: calc(100% / 4); }
.tbl01.col5  th, .tbl01.col5  td{ width: calc(100% / 5); }
.tbl01.col6  th, .tbl01.col6  td{ width: calc(100% / 6); }
.tbl01.col7  th, .tbl01.col7  td{ width: calc(100% / 7); }
.tbl01.col8  th, .tbl01.col8  td{ width: calc(100% / 8); }
.tbl01.col9  th, .tbl01.col9  td{ width: calc(100% / 9); }
.tbl01.col10 th, .tbl01.col10 td{ width: calc(100% / 10); }
.tbl01.col11 th, .tbl01.col11 td{ width: calc(100% / 11); }
.tbl01.col12 th, .tbl01.col12 td{ width: calc(100% / 12); }
.tbl01.col13 th, .tbl01.col13 td{ width: calc(100% / 13); }
.tbl01.col14 th, .tbl01.col14 td{ width: calc(100% / 14); }
.tbl01.col15 th, .tbl01.col15 td{ width: calc(100% / 15); }

/* 別寸・レディース行のハイライト。
   トンマナ §8「色のみで情報を伝えない」に従い、凡例（.otherSize）と併用する前提。 */
.tbl01 tr.othSize,
.tbl01 td.othSize{ background: var(--size-oth); }
.tbl01 tr.ladiesSize{ background: var(--size-ladies); }

/* 凡例スウォッチ */
.otherSize{
  display: inline-block;
  border: 1px solid var(--line);
  background: var(--size-oth);
  height: 16px; width: 20px;
  margin-right: 4px;
  vertical-align: bottom;
  border-radius: 2px;
}
/* AI生成画像バッジ（トンマナ §6：AI生成は必ず明示） */
.generativeAI{
  display: inline-block;
  border: 1px solid var(--sale);
  background: var(--sale);
  color: var(--white);
  height: 20px; width: 42px;
  margin-right: 4px;
  vertical-align: bottom;
  border-radius: 2px;
  font-size: 11px;
  line-height: 20px;
  text-align: center;
  letter-spacing: .04em;
}


/* ============================================================================
   6. CSSボタン
   トンマナ §5-1
     btnType01 → Secondary（白地＋--accent-dark枠）: 他カラー・同素材・ブランド
     btnType02 → 小型Primary（--accent 塗り）      : サイズについて
     btnType03 → Primary（--accent-dark 塗り h48） : 主要CTA
   ============================================================================ */
a.btnType01,
.uniSec01 a.btnType01{
  display: inline-block;
  padding: 7px 24px;
  border: 1px solid var(--accent-dark);
  background: var(--white);
  border-radius: var(--radius);
  color: var(--accent-dark) !important;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.5;
  text-decoration: none !important;
  transition: all var(--dur-fast) var(--ease);
}
a.btnType01:hover,
.uniSec01 a.btnType01:hover{
  background: var(--accent-dark);
  color: var(--white) !important;
  text-decoration: none !important;
}

a.btnType02,
.uniSec01 a.btnType02{
  display: inline-block;
  padding: 6px 20px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--white) !important;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none !important;
  transition: all var(--dur-fast) var(--ease);
}
a.btnType02:hover,
.uniSec01 a.btnType02:hover{
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: var(--white) !important;
  text-decoration: none !important;
}

a.btnType03{
  display: inline-block;
  width: 60%;
  min-width: 20em;
  min-height: 48px;                 /* トンマナ：タップターゲット確保 */
  padding: 13px 24px;
  background: var(--accent-dark);
  border-radius: var(--radius);
  color: var(--white) !important;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .14em;
  text-decoration: none !important;
  transition: all var(--dur-base) var(--ease);
}
a.btnType03:hover{
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27,75,107,.22);
  color: var(--white) !important;
  text-decoration: none !important;
}
a.btnType03 i{ font-size: 20px; margin-right: 10px; }
@media only screen and (max-width: 540px){
  a.btnType03{ width: 100%; font-size: 14px; padding: 12px 16px; }
  a.btnType03 i{ font-size: 16px; }
}

/* Font Awesome の矢印アイコンは少し引いた扱いに */
.uniSec01 .fa-arrow-circle-right{ margin-left: 4px; opacity: .8; }


/* ============================================================================
   7. ユーティリティ
   （エステ版からそのまま。mglr20 は未定義だったので新規追加）
   ============================================================================ */
.mgt10{ margin-top:10px !important; }
.mgt20{ margin-top:20px !important; }
.mgb0 { margin-bottom:0    !important; }
.mgb5 { margin-bottom:5px  !important; }
.mgb10{ margin-bottom:10px !important; }
.mgb15{ margin-bottom:15px !important; }
.mgb20{ margin-bottom:20px !important; }
.mgb25{ margin-bottom:25px !important; }
.mgb30{ margin-bottom:30px !important; }
.mgb40{ margin-bottom:40px !important; }
.mgb50{ margin-bottom:50px !important; }
.pdt20{ padding-top:20px !important; }
.pd20 { padding-top:20px !important; padding-bottom:20px !important; }
.pdall20{ padding:20px; }
/* ▼ エステ版CSSに定義が無く、CSVでは1,328箇所使われていた */
.mglr20{ margin-left:20px; margin-right:20px; }
@media only screen and (max-width: 767px){
  .mglr20{ margin-left:0; margin-right:0; }
}

.fsz12{ font-size:12px !important; }
.fsz13{ font-size:13px !important; }
.fsz14{ font-size:14px !important; }

.alnR{ text-align:right; }

img.max100 { max-width:100% !important; }
img.img_w100{ width:100% !important; }

.caution_kome{ margin-left:1em; text-indent:-1em; }
.strong_red{ color: var(--sale); font-weight: 700; }


/* ============================================================================
   8. SmartPhoto（拡大表示）の調律
   smartphoto.css はベンダーファイルなので直接いじらず、後勝ちで上書きする。
   （将来 SmartPhoto を差し替えてもこのブロックだけ効き続ける）
   ============================================================================ */
.smartphoto-loader{
  border-color: var(--accent-mid) !important;
  border-right-color: transparent !important;
}
/* キャプションは素材説明など100字級の日本語が入る。読める行間と幅を確保する。
   padding の左右を max() で計算し、本文が840pxを超えて間延びしないようにする。 */
.smartphoto-caption{
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  letter-spacing: .02em;
  padding: 14px max(24px, calc((100% - 840px) / 2)) !important;
  background-color: rgba(15, 25, 33, .82) !important;
  text-align: center;
}
@media only screen and (max-width: 767px){
  .smartphoto-caption{ font-size: 12.5px !important; padding: 12px 16px !important; }
}
.smartphoto-arrows a{ border-color: rgba(255,255,255,.75) !important; }


/* ============================================================================
   9. V2の残骸クラスの救済
   商品説明列の38行に <p class="itemInfo center"> / <p class="itemInfo center strong">
   がV2のまま残っている。CSVを直すのが本筋だが、直るまで崩れないようにしておく。
   ============================================================================ */
.uniSec01 .center{ text-align: center; }
.uniSec01 p.itemInfo{
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 20px;
}
.uniSec01 p.itemInfo.strong{
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 600;
  letter-spacing: .06em;
}
@media only screen and (max-width: 767px){
  .uniSec01 .center{ text-align: left; }
}


/* ============================================================================
   10. 静的コンテンツページ用（cid=hdmn 系の .kcont-val コンテンツ）
   商品ページの .uniSec01 の外側で使われるため、あえて非スコープで定義。
   uni_font_v3.css が body 単位でゴシック指定済みのため、
   .uniSec01 ラッパー無しでもトンマナに沿った見え方になる。
   出自：エステユニフォーム.com の .h1pTitle / .cautionBox を
        02_トンマナ定義書 §5-3（セクションヘッド）／§2-4（ファンクションカラー）
        のトークンで再調律したもの。
   ============================================================================ */
.h1pTitle{
  margin: 0 0 32px;
  padding: 40px 24px;
  background: var(--accent-bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-dark);
  border-radius: var(--radius-lg);
  text-align: center;
}
.h1pTitle-kicker{
  display: inline-block;
  margin-bottom: 12px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .40em;
  text-indent: .40em;
  text-transform: uppercase;
  color: var(--accent);
}
.h1pTitle h1{
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--accent-dark);
}
.h1pTitle p{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.h1pTitle br{ display: block; }
@media only screen and (max-width: 767px){
  .h1pTitle{ padding: 28px 16px; }
  .h1pTitle h1{ font-size: 20px; }
  .h1pTitle p{ font-size: 13px; }
}

/* 注意書き枠。トンマナのファンクションカラー --sale（赤系）を薄く敷いて警告色に。 */
.cautionBox{
  margin: 0 0 32px;
  padding: 20px 24px;
  background: rgba(195,58,38,.06);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sale);
  border-radius: var(--radius);
}
.cautionBox h4{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--sale);
}
.cautionBox h4 i{ margin-right: 6px; }
.cautionBox ul{ margin: 0; padding: 0 0 0 1em; }
.cautionBox ul li{
  padding: 0 0 6px 1em;
  text-indent: -1em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
}
.cautionBox ul li:last-child{ padding-bottom: 0; }

/* 肯定的な案内（送料無料など）用の枠。cautionBoxの警告色(--sale)に対し、
   こちらはブランドのアクセント色（青）でポジティブな情報だと視認できるようにする。 */
.noteBox{
  margin: 0 0 32px;
  padding: 16px 20px;
  background: var(--accent-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-dark);
  border-radius: var(--radius);
}
.noteBox p{
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
}
.noteBox strong{ color: var(--accent-dark); }