/* =========================================================
  生地カラー早見表テンプレート 完全独立版
  注意：.js-tcm-open には一切デザインを当てません。
========================================================= */
:root{
  --tcm-bg:#F5F2EA;
  --tcm-white:#fff;
  --tcm-text:#242424;
  --tcm-sub:#5d5750;
  --tcm-main:#01C8BD;
  --tcm-main-dark:#00a79f;
  --tcm-line:#e7ded2;
  --tcm-orange:#cb6b33;
  --tcm-shadow:0 24px 70px rgba(0,0,0,.22);
}

/* 通常ボタン用。追従ボタンには使わなくてOK */
.tcm-open-btn{
  display:grid;
  place-items:center;
  min-height:58px;
  padding:0 24px;
  border:0;
  border-radius:10px;
  background:var(--tcm-main);
  color:#fff !important;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:17px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  box-shadow:0 5px 0 var(--tcm-main-dark);
  transition:.2s ease;
}
.tcm-open-btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--tcm-main-dark);opacity:.95;}

.tcm-modal,
.tcm-modal *{box-sizing:border-box;}
.tcm-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:170px 30px 40px;
  color:var(--tcm-text);
  font-family:"Zen Kaku Gothic New",sans-serif;
  opacity:0;
  pointer-events:none;
  transition:.28s ease;
}
.tcm-modal.is-open{opacity:1;pointer-events:auto;}
.tcm-modal-bg{position:absolute;inset:0;background:rgba(36,36,36,.45);backdrop-filter:blur(6px);}
.tcm-modal-panel{
  position:relative;
  z-index:2;
  width:min(1280px,94vw);
  max-height:calc(100vh - 210px);
  overflow:auto;
  background:var(--tcm-bg);
  border-radius:32px;
  padding:34px;
  box-shadow:var(--tcm-shadow);
  transform:scale(.92) translateY(18px);
  opacity:0;
  transition:.32s cubic-bezier(.2,.8,.2,1);
}
.tcm-modal.is-open .tcm-modal-panel{transform:scale(1) translateY(0);opacity:1;}
.tcm-modal-close{position:absolute;right:20px;top:18px;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--tcm-text);font-size:28px;line-height:1;font-weight:900;cursor:pointer;box-shadow:0 10px 24px rgba(96,70,32,.12);}
.tcm-modal-head{margin-bottom:22px;padding-right:60px;}
.tcm-modal-head h2{position:relative;margin:0 0 8px;padding-left:28px;font-size:34px;line-height:1.35;font-weight:900;}
.tcm-modal-head h2::before,.tcm-panel-title::before{content:"";position:absolute;left:0;top:.25em;background:var(--tcm-main);border-radius:4px;}
.tcm-modal-head h2::before{width:16px;height:16px;}
.tcm-modal-head p{margin:0;color:var(--tcm-sub);font-weight:700;}
.tcm-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:0;}
.tcm-tabs button{min-height:72px;padding:12px 8px;border:0;border-radius:14px 14px 0 0;background:#ddd;color:var(--tcm-main);font-size:15px;line-height:1.25;font-weight:900;cursor:pointer;}
.tcm-tabs button small{color:#555;font-size:12px;}
.tcm-tabs button.active{background:#fff;color:var(--tcm-main);}
.tcm-tabs button[data-tab="tarpaulin"]{color:var(--tcm-orange);}
.tcm-panels{background:#fff;border-radius:0 0 24px 24px;padding:28px;}
.tcm-panel{display:none;animation:tcmPanelPop .28s ease both;}
.tcm-panel.active{display:block;}
@keyframes tcmPanelPop{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
body.tcm-modal-open{overflow:hidden;}
.tcm-panel-title{position:relative;margin:0 0 26px;padding-left:34px;color:#555;font-size:32px;line-height:1.35;font-weight:900;}
.tcm-panel-title::before{width:22px;height:22px;}
.tcm-series-wrap{background:#fff;padding:34px;border-radius:20px;overflow:auto;}
.tcm-series-table{width:100%;min-width:850px;border-collapse:collapse;font-size:15px;color:#555;}
.tcm-series-table th,.tcm-series-table td{border:1px solid #cfcfcf;padding:10px 12px;text-align:center;}
.tcm-series-table th{background:#e5e5e5;font-weight:900;}
.tcm-series-table td:first-child{text-align:left;color:var(--tcm-main);font-weight:900;text-decoration:underline;background:#fffdf0;}
.tcm-spec-note{margin:24px 0 0;padding-left:20px;color:#555;line-height:1.8;font-weight:700;}
.tcm-fabric-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:30px;background:#fff;border-radius:0 0 24px 24px;}
.tcm-fabric-side{padding:28px 8px 20px;text-align:center;}
.tcm-fabric-side h3{margin:0 0 16px;padding:10px;color:#fff;background:var(--tcm-main);font-size:22px;line-height:1.35;font-weight:900;}
.tcm-fabric-side h3 span{font-size:16px;}
.tcm-fabric-side strong{display:block;color:var(--tcm-main);font-size:92px;line-height:.9;font-family:Georgia,serif;font-weight:400;}
.tcm-fabric-side p{margin:0 0 22px;color:var(--tcm-main);font-size:28px;line-height:1.1;font-weight:900;}
.tcm-fabric-side ul{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0;margin:0 0 34px;list-style:none;}
.tcm-fabric-side li{display:grid;place-items:center;min-height:70px;border:2px solid var(--tcm-main);color:var(--tcm-main);font-size:14px;line-height:1.25;font-weight:900;}
.tcm-fabric-side b{display:block;margin-top:24px;color:var(--tcm-main);font-size:34px;letter-spacing:.02em;}
.tcm-fabric-side.orange h3{background:var(--tcm-orange);}
.tcm-fabric-side.orange strong,.tcm-fabric-side.orange p,.tcm-fabric-side.orange li{color:var(--tcm-orange);border-color:var(--tcm-orange);}
.tcm-fabric-main{min-width:0;padding:28px 0;}
.tcm-fabric-main h3{margin:0 0 18px;color:var(--tcm-main);font-size:26px;font-weight:900;}
.tcm-fabric-main h4{margin:0 0 12px;color:#987932;font-size:20px;font-weight:900;}
.tcm-fire-box{position:relative;border:3px solid var(--tcm-main);padding:30px;margin-top:10px;}
.tcm-fire-label{position:absolute;top:-18px;left:18px;background:#fff;padding:0 10px;color:var(--tcm-main);font-size:19px;font-weight:900;}
.tcm-fire-box.orange{border-color:var(--tcm-orange);}
.tcm-fire-box.orange .tcm-fire-label{color:var(--tcm-orange);}
.tcm-swatch-grid{display:grid;gap:20px;}
.tcm-swatch-grid.five{grid-template-columns:repeat(5,minmax(100px,1fr));}
.tcm-swatch-grid.three{grid-template-columns:repeat(3,minmax(130px,180px));}
.tcm-swatch-grid span{display:block;width:100%;height:58px;border-radius:2px;box-shadow:inset 0 0 12px rgba(0,0,0,.08);}
.tcm-swatch-grid p{margin:8px 0 0;color:#444;font-size:15px;line-height:1.4;font-weight:700;}
.tcm-red-note{margin:28px 0 0;color:var(--tcm-main)!important;font-weight:900!important;line-height:1.8;}
.tcm-red-note.orange{color:var(--tcm-orange)!important;}
.tcm-note{margin-top:24px;color:#555;font-weight:700;}
.tcm-animal{background-color:#f6e7a3!important;background-image:radial-gradient(circle at 20% 20%,rgba(255,150,80,.5) 0 2px,transparent 3px)!important;background-size:18px 18px!important;}
.tcm-animal.blue{background-color:#bfe5ef!important;}
.tcm-animal.pink{background-color:#f5c6d8!important;}
@media(max-width:1024px){.tcm-modal{padding-top:140px;}.tcm-modal-panel{max-height:calc(100vh - 170px);}.tcm-tabs{grid-template-columns:repeat(3,1fr);gap:8px;}.tcm-tabs button{border-radius:14px;min-height:58px;font-size:14px;}.tcm-panels{margin-top:10px;border-radius:20px;padding:18px;}.tcm-fabric-layout{grid-template-columns:1fr;}.tcm-fabric-side{padding:20px;}.tcm-fabric-side ul{grid-template-columns:repeat(2,1fr);}.tcm-swatch-grid.five,.tcm-swatch-grid.three{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.tcm-modal{padding:96px 12px 24px;}.tcm-modal-panel{max-height:calc(100vh - 118px);padding:22px 14px;border-radius:24px;}.tcm-modal-close{right:12px;top:12px;width:40px;height:40px;}.tcm-modal-head{padding-right:48px;}.tcm-modal-head h2{font-size:26px;}.tcm-tabs{grid-template-columns:repeat(2,1fr);}.tcm-tabs button{min-height:54px;font-size:13px;}.tcm-panel-title{font-size:24px;}.tcm-series-wrap{padding:14px;}.tcm-fabric-side strong{font-size:72px;}.tcm-fire-box{padding:22px 14px;}.tcm-swatch-grid.five,.tcm-swatch-grid.three{grid-template-columns:1fr;}}
/* ==========================
   追従ボタン
========================== */

.floating-reference-btn{
  appearance:none;
  -webkit-appearance:none;

  border:none !important;
  outline:none !important;
  box-shadow:none !important;

  padding:0;
  margin:0;

  cursor:pointer;

  background-image:url("../img/reference_btn_bg.svg") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  background-color:transparent !important;
}

.floating-reference-btn:focus,
.floating-reference-btn:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

.floating-reference-btn::-moz-focus-inner{
  border:0;
  padding:0;
}