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

   出自：エステユニフォーム.com 加工注文ページ(88-35-x / 99-38-x)の商品別インライン<style>を
         共通化し、02_トンマナ定義書(ディープブルー／ゴシック主体)のトークンで再調律。
         h2（英字キッカー＋和文見出し）は uni_common.css 側の定義をそのまま使う。
   クラス名はエステ版と同一（HTMLの流用性を保つため）。
   ============================================================================ */

/* --- リード文・注記 ------------------------------------------------------- */
.uniSec01 .leadTxt{
  font-size:14px; line-height:1.95; text-align:center;
  margin:0 auto 24px; max-width:760px; color:var(--ink-soft);
}
.uniSec01 .leadTxt strong{ color:var(--ink); }
.uniSec01 .cautionTxt{
  font-size:12px; line-height:1.85; color:var(--ink-mute);
  margin:16px auto 0; text-align:center; max-width:820px;
}

/* --- ご注文の流れ（アコーディオン） -------------------------------------- */
.uniSec01 .flowList01{ list-style:none; padding:0; margin:0 auto; max-width:820px; }
.uniSec01 .flowList01 > li{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:10px; background:var(--white); padding:0; overflow:hidden;
}
.uniSec01 .flowList01 > li > details{ width:100%; }
.uniSec01 .flowList01 > li > details > summary{
  list-style:none; cursor:pointer; padding:16px 50px 16px 88px;
  position:relative; user-select:none; transition:background var(--dur-fast);
}
.uniSec01 .flowList01 > li > details > summary:hover{ background:var(--accent-bg); }
.uniSec01 .flowList01 > li > details > summary::-webkit-details-marker{ display:none; }
.uniSec01 .flowList01 > li > details > summary .flowStep{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en); font-size:11px; font-weight:500;
  color:var(--accent-dark); letter-spacing:.16em; width:64px; text-transform:uppercase;
}
.uniSec01 .flowList01 > li > details > summary .flowTitle{
  display:block; font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; margin:0;
}
.uniSec01 .flowList01 > li > details > summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en); font-size:22px; font-weight:300; color:var(--accent); line-height:1;
}
.uniSec01 .flowList01 > li > details[open] > summary::after{ content:"\2212"; }
.uniSec01 .flowList01 > li > details > .flowBody{
  padding:14px 18px 18px 88px; border-top:1px dashed var(--line); background:var(--bg);
}
.uniSec01 .flowList01 > li > details > .flowBody > .flowText{
  font-size:13px; line-height:1.9; color:var(--ink-soft); margin:0 0 6px;
}
.uniSec01 .flowList01 > li > details > .flowBody a.flowLink{
  color:var(--accent-dark) !important; border-bottom:1px solid var(--accent-mid); padding-bottom:1px;
}
.uniSec01 .flowList01 > li > details > .flowBody a.flowLink:hover{ background:var(--accent-pale); text-decoration:none; }
.uniSec01 .flowList01 .flowSubBlock{
  margin-top:12px; padding:10px 14px; background:var(--white);
  border:1px solid var(--line-soft); border-radius:3px;
}
.uniSec01 .flowList01 .flowSubBlock + .flowSubBlock{ margin-top:10px; }
.uniSec01 .flowList01 .flowSubTitle{
  font-size:13px; font-weight:600; color:var(--accent-dark); margin:0 0 6px; letter-spacing:.04em;
}
.uniSec01 .flowList01 .flowNote{
  font-size:12px; line-height:1.85; color:var(--ink-soft);
  background:var(--accent-bg); border-left:3px solid var(--accent);
  padding:8px 12px; margin:8px 0 0;
}
.uniSec01 .flowList01 .flowNote strong{ color:var(--sale); }
.uniSec01 .flowList01 .sizeMiniList{
  list-style:none; padding:8px 0 4px; margin:6px 0; font-size:13px; line-height:1.9; color:var(--ink-soft);
}
.uniSec01 .flowList01 .sizeMiniList li{ display:inline-block; margin-right:18px; padding:0; border:none; background:none; }

/* --- 注意事項リスト ------------------------------------------------------ */
.uniSec01 .noteList01{
  max-width:760px; margin:0 auto; padding-left:1.2em;
  font-size:13px; line-height:1.95; color:var(--ink-soft);
}
.uniSec01 .noteList01 li{ margin-bottom:6px; }
.uniSec01 .noteList01--strong{ list-style:none; padding-left:0; max-width:820px; }
.uniSec01 .noteList01--strong li{
  padding:8px 12px; background:var(--white);
  border-left:3px solid var(--accent); margin-bottom:8px;
}

/* --- FAQアコーディオン --------------------------------------------------- */
.uniSec01 .faqList01{ max-width:820px; margin:0 auto; border-top:1px solid var(--line); }
.uniSec01 .faqList01 .faqItem{ border-bottom:1px solid var(--line); }
.uniSec01 .faqList01 .faqItem > summary{
  list-style:none; cursor:pointer; padding:14px 44px 14px 36px; position:relative;
  font-size:14px; font-weight:600; color:var(--ink); letter-spacing:.03em;
  user-select:none; transition:background var(--dur-fast);
}
.uniSec01 .faqList01 .faqItem > summary:hover{ background:var(--accent-bg); }
.uniSec01 .faqList01 .faqItem > summary::-webkit-details-marker{ display:none; }
.uniSec01 .faqList01 .faqItem > summary::before{
  content:"Q."; position:absolute; left:10px; top:14px;
  font-family:var(--font-en); color:var(--accent-dark); font-weight:500; font-size:15px;
}
.uniSec01 .faqList01 .faqItem > summary::after{
  content:"+"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en); font-size:20px; font-weight:300; color:var(--accent); line-height:1;
}
.uniSec01 .faqList01 .faqItem[open] > summary::after{ content:"\2212"; }
.uniSec01 .faqList01 .faqItem > .faqA{
  padding:4px 14px 18px 36px; font-size:13px; line-height:1.95;
  color:var(--ink-soft); position:relative; background:var(--bg);
}
.uniSec01 .faqList01 .faqItem > .faqA::before{
  content:"A."; position:absolute; left:10px; top:4px;
  font-family:var(--font-en); color:var(--accent); font-weight:500; font-size:15px;
}
.uniSec01 .faqList01 .faqItem > .faqA strong{ color:var(--ink); }

/* --- 表（刺繍サイズ） ---------------------------------------------------- */
.uniSec01 .sizeTable01{
  width:100%; max-width:760px; margin:0 auto; border-collapse:collapse; font-size:13px;
}
.uniSec01 .sizeTable01 th,.uniSec01 .sizeTable01 td{
  border:1px solid var(--line); padding:12px 14px; text-align:center; line-height:1.6;
}
.uniSec01 .sizeTable01 thead th{
  background:var(--bg-alt); font-weight:600; letter-spacing:.05em; color:var(--ink);
}

/* --- 糸色／書体カタログ -------------------------------------------------- */
.uniSec01 .subHd{
  margin:18px auto 12px; padding:6px 12px;
  background:var(--bg-alt); border-left:3px solid var(--accent-dark); color:var(--ink);
  font-weight:700; font-size:15px; display:flex; align-items:baseline; gap:8px; max-width:820px;
}
.uniSec01 .subHd small{
  font-size:11px; font-family:var(--font-en); color:var(--accent-dark);
  font-weight:500; letter-spacing:.12em; margin-left:4px;
}
.uniSec01 .fontsAcc{ max-width:820px; margin:0 auto 12px; }
.uniSec01 .fontsAcc > summary.subHd{
  list-style:none; cursor:pointer; margin:18px auto 0; padding:10px 44px 10px 14px;
  position:relative; user-select:none; transition:background var(--dur-fast); align-items:center;
}
.uniSec01 .fontsAcc > summary.subHd:hover{ background:var(--accent-pale); }
.uniSec01 .fontsAcc > summary.subHd::-webkit-details-marker{ display:none; }
.uniSec01 .fontsAcc[open] > summary.subHd{ background:var(--accent-pale); border-bottom:1px solid var(--line); }
.uniSec01 .fontsAcc > summary.subHd::after{
  content:"+"; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en); font-size:20px; font-weight:300; color:var(--accent); line-height:1;
}
.uniSec01 .fontsAcc[open] > summary.subHd::after{ content:"\2212"; }
.uniSec01 .fontsAcc > .fontsAcc__body{
  padding:14px 0 18px; border:1px solid var(--line); border-top:none; background:var(--white);
}
.uniSec01 .fontsAcc > .fontsAcc__body .colorGrid,
.uniSec01 .fontsAcc > .fontsAcc__body .fG{ margin:0 14px; max-width:none; }
.uniSec01 .fontsAcc > summary.subHd .subHdLabel{ font-size:15px; font-weight:700; }

.uniSec01 .colorGrid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:6px auto 22px; max-width:820px;
}
.uniSec01 .cChp{
  position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--white); border:1px solid var(--line); border-radius:6px;
}
.uniSec01 .cSw{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); box-shadow:0 1px 3px rgba(31,41,51,.08);
}
.uniSec01 .cIf{ flex:1; line-height:1.25; min-width:0; display:flex; flex-direction:column; gap:2px; }
.uniSec01 .cNm{ display:block; font-size:12.5px; color:var(--ink); font-weight:700; line-height:1.3; }
.uniSec01 .cCd{ display:block; font-size:10.5px; color:var(--ink-mute); font-family:var(--font-num); letter-spacing:.05em; line-height:1.2; }

.uniSec01 .fG{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px auto 16px; max-width:820px; }
.uniSec01 .fC{
  background:var(--white); border:1px solid var(--line); border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
}
.uniSec01 .fCs{
  flex:1; padding:18px 12px; text-align:center; background:var(--bg); color:var(--ink);
  line-height:1; display:flex; align-items:center; justify-content:center; min-height:70px;
}
.uniSec01 .fCs.is-jp{ font-size:28px; }
.uniSec01 .fCs.is-en{ font-size:24px; letter-spacing:.02em; }
.uniSec01 .fCn{
  padding:8px 10px; background:var(--white); border-top:1px solid var(--line);
  text-align:center; font-size:12px; color:var(--ink); font-weight:700;
}
.uniSec01 .fCn small{
  display:block; font-size:10px; color:var(--ink-mute); font-family:var(--font-en);
  letter-spacing:.08em; margin-top:2px; font-weight:400;
}
.uniSec01 .font-kaisho{font-family:"HG行書体","HGP行書体","DFP楷書体","Yu Mincho",serif;font-weight:400}
.uniSec01 .font-gothic{font-family:"游ゴシック","Yu Gothic","Hiragino Sans","Meiryo",sans-serif;font-weight:900}
.uniSec01 .font-mincho{font-family:"游明朝","Yu Mincho","Hiragino Mincho ProN","HG明朝B",serif;font-weight:700}
.uniSec01 .font-maruGothic{font-family:"Hiragino Maru Gothic ProN","HGMaruGothicMPRO","Comic Sans MS",sans-serif;font-weight:700}
.uniSec01 .font-kanteiryu{font-family:"HG行書体","HGP教科書体","Yu Mincho",serif;font-weight:400;letter-spacing:.05em}
.uniSec01 .font-smallBlock{font-family:"Impact","Haettenschweiler","Arial Black",sans-serif;font-weight:900;letter-spacing:.05em}
.uniSec01 .font-hige{font-family:"Brush Script MT","Lucida Handwriting",cursive;font-style:italic;font-weight:400}
.uniSec01 .font-cheltenham{font-family:"Cambria","Georgia",serif;font-weight:900}
.uniSec01 .font-oldEnglish{font-family:"Old English Text MT","UnifrakturMaguntia",serif;font-weight:400}
.uniSec01 .font-arialRounded{font-family:"Arial Rounded MT Bold","Arial Rounded MT","Helvetica Rounded","Helvetica",sans-serif;font-weight:700}
.uniSec01 .font-script2{font-family:"Lucida Handwriting","Brush Script MT","Snell Roundhand",cursive;font-weight:400}
.uniSec01 .font-timesRoman{font-family:"Times New Roman","Times",serif;font-weight:700}
.uniSec01 .fontNote{
  max-width:760px; margin:18px auto 8px; padding:10px 14px;
  background:var(--accent-bg); border-left:3px solid var(--accent);
  font-size:12.5px; line-height:1.85; color:var(--ink-soft);
}
.uniSec01 .fontNote::before{ content:"\203B "; color:var(--sale); font-weight:700; }

/* --- 丈詰め：形状注意カード ---------------------------------------------- */
.uniSec01 .cautionHd{
  max-width:820px; margin:36px auto 8px; padding:8px 12px; text-align:center;
  font-size:15px; font-weight:700; color:var(--ink);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.uniSec01 .cautionHd strong{ color:var(--sale); }
.uniSec01 .cautionCards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:18px auto 8px; max-width:820px;
}
.uniSec01 .cautionCard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.uniSec01 .cautionCard__head{
  background:var(--accent-dark); color:#fff; padding:10px 12px; font-size:14px;
  font-weight:700; text-align:center; letter-spacing:.08em;
}
.uniSec01 .cautionCard__img{
  background:#fff; padding:14px; display:flex; justify-content:center; align-items:center;
  aspect-ratio:1/1; border-bottom:1px solid var(--line-soft);
}
.uniSec01 .cautionCard__img img{ max-width:100%; max-height:100%; height:auto; display:block; }
.uniSec01 .cautionCard__text{
  padding:12px 14px; font-size:13px; line-height:1.7; color:var(--ink);
  text-align:center; background:var(--bg); margin:0; flex:1;
}

/* --- 加工ページの注文フォーム（エキスパートモード） ---------------------- */
.kakouForm{ font-size:13px; line-height:1.8; color:var(--ink); }
.kakouForm .kfLabel{ display:block; font-weight:700; margin:12px 0 4px; color:var(--ink); }
.kakouForm .kfHint{ display:block; font-size:12px; color:var(--ink-mute); margin:0 0 4px; }
.kakouForm select,.kakouForm input[type=text]{
  width:100%; max-width:100%; box-sizing:border-box; padding:8px 10px; font-size:14px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink);
}
.kakouForm select:focus,.kakouForm input[type=text]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.kakouForm .kfWarn{ color:var(--sale); font-weight:700; margin:14px 0 10px; display:block; }
.kakouForm input[type=submit]{
  display:block; width:100%; padding:14px 12px; font-size:15px; font-weight:700; letter-spacing:.08em;
  color:#fff; background:var(--accent-dark); border:0; border-radius:var(--radius); cursor:pointer;
  transition:background var(--dur-fast);
}
.kakouForm input[type=submit]:hover{ background:var(--accent); }

/* --- スマホ -------------------------------------------------------------- */
@media screen and (max-width:768px){
  .uniSec01 .leadTxt{ text-align:left; font-size:13px; }
  .uniSec01 .flowList01 > li > details > summary{ padding:14px 42px 14px 14px; }
  .uniSec01 .flowList01 > li > details > summary .flowStep{ position:static; transform:none; display:inline-block; margin-bottom:2px; width:auto; }
  .uniSec01 .flowList01 > li > details > summary .flowTitle{ font-size:14px; }
  .uniSec01 .flowList01 > li > details > .flowBody{ padding:12px 14px 16px; }
  .uniSec01 .flowList01 .sizeMiniList li{ display:block; margin:0 0 4px; }
  .uniSec01 .faqList01 .faqItem > summary{ padding:14px 38px 14px 32px; font-size:13px; }
  .uniSec01 .faqList01 .faqItem > .faqA{ padding:4px 12px 16px 32px; }
  .uniSec01 .colorGrid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .uniSec01 .fG{ grid-template-columns:1fr; gap:8px; }
  .uniSec01 .fCs.is-jp{ font-size:24px; }
  .uniSec01 .fCs.is-en{ font-size:20px; }
  .uniSec01 .sizeTable01{ font-size:12px; }
  .uniSec01 .sizeTable01 th,.uniSec01 .sizeTable01 td{ padding:8px 6px; }
  .uniSec01 .cautionCards{ grid-template-columns:1fr; gap:10px; }
  .uniSec01 .cautionCard__img{ aspect-ratio:auto; min-height:180px; }
  .uniSec01 .cautionHd{ font-size:14px; }
}

/* --- セクション間の余白（加工ページは .uniSec01 が連続するため） --------- */
.uniSec01 .pdt1{ padding-top:32px; padding-bottom:8px; }
.kakouForm input[type=text]{ display:inline-block; }
.kakouForm .kfLabel + input[type=text]{ display:block; }

/* --- 誘導リンク(CTA)：他商品・別ページへの案内を枠付きボタンで目立たせる ---- */
.uniSec01 .linkCta{ max-width:760px; margin:0 auto 24px; text-align:center; }
.uniSec01 .linkCta a{
  display:inline-block; position:relative; padding:13px 44px 13px 22px;
  background:var(--accent-bg); color:var(--accent-dark) !important; font-size:14px; font-weight:700;
  line-height:1.6; letter-spacing:.04em; text-decoration:none !important;
  border:1px solid var(--accent); border-left:5px solid var(--accent); border-radius:3px;
  transition:background var(--dur-fast), color var(--dur-fast);
}
.uniSec01 .linkCta a::after{
  content:""; position:absolute; right:20px; top:50%; width:8px; height:8px; margin-top:-5px;
  border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg);
}
.uniSec01 .linkCta a:hover{ background:var(--accent); color:#fff !important; }
.uniSec01 .cautionTxt a{
  display:inline-block; margin:2px 0; padding:3px 12px; border:1px solid var(--accent-mid);
  border-radius:20px; background:var(--accent-bg); color:var(--accent-dark) !important;
  font-weight:600; text-decoration:none !important;
}
.uniSec01 .cautionTxt a:hover{ background:var(--accent); color:#fff !important; }
@media(max-width:768px){ .uniSec01 .linkCta a{ display:block; text-align:left; } }

/* --- 組み合わせ制限表(rowspan)：1列目を縦中央に --------------------------- */
.uniSec01 .limitTable td[rowspan]{ vertical-align:middle; text-align:center; background:var(--accent-bg); }

/* --- イラスト一覧表（57-35 ミッフィー加工） ------------------------------- */
.uniSec01 .illustTable{ width:100%; max-width:760px; margin:0 auto 28px; border-collapse:collapse; table-layout:fixed; }
.uniSec01 .illustTable caption{ caption-side:top; padding:10px 12px; font-weight:600; letter-spacing:.05em; background:var(--bg-alt); border:1px solid var(--line); border-bottom:0; color:var(--ink); }
.uniSec01 .illustTable td{ border:1px solid var(--line); padding:14px 8px 12px; text-align:center; vertical-align:top; width:33.33%; }
.uniSec01 .illustTable td img{ display:block; margin:0 auto 8px; width:auto; max-width:100%; height:110px; object-fit:contain; }
.uniSec01 .illustTable .ilCode{ display:block; font-weight:700; font-size:14px; color:var(--accent-dark); letter-spacing:.06em; }
.uniSec01 .illustTable .ilName{ display:block; font-size:12px; color:var(--ink-soft); margin-top:2px; }
.uniSec01 .illustTable .ilEmpty{ background:var(--accent-bg); }
.uniSec01 .illustTable.ilPrint td{ width:25%; }
@media(max-width:768px){ .uniSec01 .illustTable td img{ height:84px; } }

/* イラスト表を展開式(flowList01内)に入れた場合の調整 */
.uniSec01 .flowList01 .illustTable{ margin:0 auto 4px; }
.uniSec01 .flowList01 .flowStep{ white-space:nowrap; }

/* --- 75-01 グログランテープ：カタログ風の色見本 --------------------------- */
.uniSec01 .tapeChart{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 16px; }
.uniSec01 .tcChip{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:3px; background:var(--white); font-size:12px; line-height:1.3; }
.uniSec01 .tcSw{ flex:none; width:34px; height:18px; border:1px solid rgba(0,0,0,.2); border-radius:2px; }
.uniSec01 .tcNo{ flex:none; min-width:18px; height:18px; line-height:18px; text-align:center; font-weight:700; font-size:11px; color:#fff; background:var(--accent-dark); border-radius:9px; }
.uniSec01 .comboGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:8px 0 12px; }
.uniSec01 .comboCard{ display:flex; gap:10px; padding:10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
.uniSec01 .ccScrub{ flex:none; width:96px; font-size:11px; line-height:1.35; text-align:center; }
.uniSec01 .ccSw{ display:block; height:52px; margin-bottom:5px; border:1px solid rgba(0,0,0,.15); border-radius:2px; }
.uniSec01 .ccCode{ display:block; font-weight:700; color:var(--accent-dark); }
.uniSec01 .ccName{ display:block; color:var(--ink-soft); }
.uniSec01 .ccTapes{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.uniSec01 .ccTapes .tcChip{ border:0; padding:0; background:none; }
@media(max-width:768px){
  .uniSec01 .tapeChart{ grid-template-columns:repeat(2,1fr); }
  .uniSec01 .comboGrid{ grid-template-columns:1fr; }
  .uniSec01 .tcChip{ font-size:11.5px; gap:6px; }
}