@charset 'UTF-8';
/* ============================================================================
   医療白衣ユニフォーム.com V3 フォント定義
   ----------------------------------------------------------------------------
   設置：/files/css/uni_font_v3.css
   読込：<HEAD内追加タグ> に、uni_common.css より「後で」読み込むこと
         <link rel="stylesheet" href="/files/css/uni_font_v3.css?v=20260803">

   ■ エステユニフォーム.com 版からの最大の変更点
     エステ版は全要素を「游明朝」に !important で固定していた。
     医療白衣.com は 02_トンマナ定義書 §1-2 に従い【ゴシック主体】へ反転する。

       > 明朝の情緒性は医療現場の合理性と衝突し、
       > かつ品番・サイズ・価格の可読性を落とす。
       > ただしグループとしての品位を残すため、
       > Our Concept と職種LPのリード文にのみ明朝を残す。

     明朝を残す箇所は .conceptLead / .catLead / .brandLead / .serif に限定した。

   ■ Webフォントについて
     @import で Google Fonts を読み込んでいる（HEADを触らずに済ませるため）。
     表示速度を優先するなら @import を消し、HEADの <link> 側に移すこと。
     読み込みに失敗しても、ローカルの游ゴシック／ヒラギノにフォールバックする。
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Jost:wght@300;400;500&family=Roboto:wght@400;500;700&display=swap');

/* トークン未読込でも壊れないように、この2つだけ再宣言しておく
   （uni_common.css が先に読まれていれば、そちらの :root が既に効いている） */
:root{
  --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;
}

/* ---------------------------------------------------------------------------
   1. 全体はゴシック
   --------------------------------------------------------------------------- */
body,
body p, body a, body span, body div,
body h1, body h2, body h3, body h4, body h5, body h6,
body td, body th, body li, body dd, body dt, body dl, body ul, body ol,
body label, body strong, body em, body small, body blockquote, body cite,
body button, body input, body textarea, body select,
body header, body footer, body nav, body section, body article, body aside, body main,
body figure, body figcaption, body address, body pre, body code,
body table, body tbody, body thead, body tr {
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 見出し：トンマナ §3
   h1 clamp(24,4vw,34)/.08em/700　h2 clamp(22,3vw,30)/.10em/600　h3 17px/.06em/600 */
body h1, body h2, body h3, body h4, body h5, body h6{
  color: var(--ink, #1f2933);
  line-height: 1.5 !important;
}
body h1{ font-weight:700 !important; letter-spacing:.08em !important; }
body h2{ font-weight:600 !important; letter-spacing:.10em !important; }
body h3{ font-weight:600 !important; letter-spacing:.06em !important; }
body h4, body h5, body h6{ font-weight:600 !important; letter-spacing:.06em !important; }

/* ---------------------------------------------------------------------------
   2. 価格・品番・数量は数字書体（トンマナ §3）
      エステ版の Book Antiqua（明朝系セリフ）→ Roboto に置換。
      実機クラス名は当時の調査どおり prd-price / tax-txt / mem-discount 等。
   --------------------------------------------------------------------------- */
body .prd-price,
body .prd-price span,
body .tax-txt,
body .mem-discount,
body .prd-code,
body .price, body .priceArea, body .priceBox,
body .itemPrice, body .prdPrice, body .taxPrice, body .salePrice,
body .amount, body .total, body .prdCode, body .itemCode,
body .tbl01 td {
  font-family: var(--font-num) !important;
  letter-spacing: .01em !important;
}
body .prd-price,
body .prd-price span,
body .price, body .itemPrice, body .prdPrice, body .salePrice{
  font-weight: 700 !important;
}
/* 品番はトンマナ §3 に合わせ字間を広く */
body .prd-code, body .prdCode, body .itemCode{
  letter-spacing: .14em !important;
  font-weight: 500 !important;
}
/* 税込部分は控えめに */
body .tax-txt{
  font-weight: 400 !important;
  font-size: .85em;
  color: var(--ink-soft, #56616b);
}
/* 販売価格・セール価格の色 */
body .salePrice, body .prd-price .sale{ color: var(--sale, #c33a26) !important; }

/* ---------------------------------------------------------------------------
   3. 英字キッカーは Jost（トンマナ §3 / §5-3）
   --------------------------------------------------------------------------- */
body .section-kicker,
body .kicker,
body .en,
body .uniSec01 h2{
  font-family: var(--font-en) !important;
}
/* 和文が入る span 側はゴシックへ戻す（uniSec01 h2 は英字＋和文の2段構成） */
body .uniSec01 h2 span{
  font-family: var(--font-sans) !important;
}

/* ---------------------------------------------------------------------------
   4. バッジ・タグはゴシック太字（トンマナ §5-5）
   --------------------------------------------------------------------------- */
body .bdg, body .badge, body .label, body .tag,
body .ribbon, body .icoNew, body .icoSale, body .statusLabel,
body .mem-discount .bdg{
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
}

/* ---------------------------------------------------------------------------
   5. 明朝を残す例外
      トンマナ §1-2「Our Concept と職種LPのリード文にのみ明朝を残す」
      本文 15〜16px / 字間 .08em / 行間 2.1
   --------------------------------------------------------------------------- */
body .conceptLead, body .conceptLead p,
body .catLead,     body .catLead p,
body .brandLead,   body .brandLead p,
body .serif,       body .serif p,
body .lead-serif,  body .lead-serif p{
  font-family: var(--font-serif) !important;
  font-size: 15.5px;
  letter-spacing: .08em !important;
  line-height: 2.1 !important;
  font-weight: 400 !important;
}