/* ==========================================================
   全ページ共通 ヘッダー・フッター・下部固定の帯（2026-10）
   このファイルを全ページの </head> の直前で読み込んでいます
========================================================== */

/* ========== トップページ ヘッダー（実績ドーン×CMYK）2026-10 追加分 ==========
   対象：index.html の旧ヘッダー（header・nav#menubar）を置き換えた部分
   class名はすべて hdr- から始まります
============================================================ */
.hdr,.hdr *{box-sizing:border-box}
.hdr a{text-decoration:none}
.hdr ul{list-style:none;margin:0;padding:0}
.hdr p{margin:0}

/* 上端の4色の帯 */
.hdr-cmyk{display:flex;height:10px}
.hdr-cmyk span{flex:1}
.hdr-cmyk .c{background:#00a0e9}
.hdr-cmyk .m{background:#e4007f}
.hdr-cmyk .y{background:#ffe100}
.hdr-cmyk .k{background:#16171b}

/* ロゴ・キャッチ・実績の段 */
.hdr-main{background:#fff}
.hdr-in{max-width:1192px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:20px}
.hdr-logo{display:flex;align-items:flex-end;gap:12px;flex:none}
.hdr-nums{flex:none}
.hdr-logo img{display:block;height:auto;margin:0}
.hdr-logo .hdr-shop{width:210px}
.hdr-logo .hdr-mark{width:118px}
.hdr .hdr-catch{margin-right:auto;flex:1;min-width:0}
.hdr-catch{line-height:1.25;border-left:1px solid #d9dde3;padding-left:20px}
.hdr-catch b{display:block;font-size:27px;font-weight:900;color:#16171b;white-space:nowrap;letter-spacing:.01em}
.hdr-catch em{font-style:normal;color:#e4007f}
.hdr-catch em.hdr-c{color:#00a0e9}
.hdr-catch small span{display:inline-block}
.hdr-no1{display:inline-flex;align-items:center;gap:6px;margin-bottom:5px;padding:3px 12px;border-radius:14px;background:linear-gradient(90deg,#b8860b,#e0b43a);color:#fff;font-size:12.5px;font-weight:900;letter-spacing:.02em;white-space:nowrap}
.hdr-no1 i{font-size:12px}
.hdr-catch small{display:block;font-size:12.5px;color:#4a5568;font-weight:700;margin-top:5px}
.hdr-nums{display:flex;gap:8px}
.hdr-nums div{width:108px;text-align:center;border-radius:12px;padding:8px 4px 7px;background:#fff;border:2px solid #16171b;line-height:1.25}
.hdr-nums b{display:block;font-size:24px;font-weight:900;line-height:1.1}
.hdr-nums b small{font-size:12px}
.hdr-nums span{display:block;font-size:10.5px;font-weight:700;color:#4a5568;margin-top:3px}
.hdr-nums .hdr-n-c{border-color:#00a0e9}
.hdr-nums .hdr-n-c b{color:#00a0e9}
.hdr-nums .hdr-n-m{border-color:#e4007f}
.hdr-nums .hdr-n-m b{color:#e4007f}
.hdr-nums .hdr-n-y{border-color:#f0c800;background:#fffbe0}
.hdr-nums .hdr-n-y b{color:#16171b}

/* メニュー（ネイビー＋水色のアイコン） */
.hdr-nav{background:#0d3c8c}
.hdr-nav ul{max-width:1192px;margin:0 auto;display:flex}
.hdr-nav li{flex:1;border-left:1px solid rgba(255,255,255,.15)}
.hdr-nav li:first-child{border-left:0;flex:0 0 96px;background:#0a2f6e}
.hdr-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:72px;color:#fff;font-weight:900;font-size:14.5px;border-bottom:5px solid transparent;line-height:1.2;white-space:nowrap}
.hdr-nav a i{font-size:24px}
.hdr-nav a i{color:#7fd3ff}
.hdr-nav a:hover{border-bottom-color:#7fd3ff;background:rgba(255,255,255,.06)}

/* 淡い水色の帯 */
.hdr-tick{background:#e3f4fd;color:#0d3c8c;border-bottom:1px solid #b9e2f7;font-weight:900;font-size:14px;margin:0 0 15px}
.hdr-tick .hdr-in{padding:8px 20px;gap:28px;justify-content:center}
.hdr-tick i{margin-right:6px}
.hdr-tick-r{display:flex;gap:8px;margin-left:8px}
.hdr-tick-r a{background:#0d3c8c;color:#fff;padding:5px 14px;border-radius:16px;font-size:13px;line-height:1.4}
.hdr-tick-r a.hdr-m{background:#00a0e9}

@media screen and (max-width:1239px) and (min-width:1061px){
	.hdr-nav a{font-size:13.5px}
	.hdr-in{gap:16px}
	.hdr-logo .hdr-shop{width:190px}
	.hdr-logo .hdr-mark{width:106px}
	.hdr .hdr-catch{padding-left:16px}
	.hdr-catch b{font-size:23px}
	.hdr-catch small{font-size:11.5px}
	.hdr-no1{font-size:11.5px}
	.hdr-nums div{width:96px}
	.hdr-nums b{font-size:21px}
}

/* やや狭い画面（タブレットなど）では、キャッチコピーを隠して詰まらないようにする */
@media screen and (max-width:1060px) and (min-width:768px){
	.hdr-catch{display:none}
	.hdr .hdr-logo{margin-right:auto}
	.hdr-nav a{font-size:12px;gap:4px}
	.hdr-nav a i{font-size:20px}
	.hdr-nav li:first-child{flex:0 0 70px}
}

/* スマホ用（パソコンでは出さない） */
.hdr-spmenu,.hdr-sp{display:none}

@media screen and (max-width:767px){
	.hdr-in{padding:8px 10px;gap:8px}
	.hdr .hdr-logo{margin-right:auto;gap:6px}
	.hdr-logo .hdr-shop{width:128px}
	.hdr-logo .hdr-mark{width:76px}
	.hdr-catch,.hdr-main .hdr-nums,.hdr-nav,.hdr-tick-opt,.hdr-tick-r{display:none}
	.hdr-tick{font-size:11.5px;margin:0}
	.hdr-tick .hdr-in{padding:6px 10px;justify-content:center}

	/* メニューボタン（押すと開く） */
	.hdr-spmenu{display:block;position:relative}
	.hdr-spmenu summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:48px;border-radius:8px;background:#1565c0;color:#fff;font-size:10px;font-weight:700;gap:2px}
	.hdr-spmenu summary::-webkit-details-marker{display:none}
	.hdr-spmenu summary i{font-size:18px}
	.hdr-spmenu ul{position:absolute;right:0;top:54px;width:240px;padding:6px 0;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:3000}
	.hdr-spmenu li a{display:flex;gap:10px;align-items:center;padding:10px 14px;color:#1b2433;font-weight:700;font-size:14px;border-bottom:1px solid #eef1f5}
	.hdr-spmenu li a i{color:#1565c0;width:18px;text-align:center}

	/* 実績の数字と「消耗品をすぐ探す」 */
	.hdr-sp{display:block;background:#fff;padding:8px 0 10px;border-bottom:1px solid #e3e7ee;margin:0 0 10px}
	.hdr-sp-no1{margin:0 10px 6px;padding:5px 8px;border-radius:8px;background:linear-gradient(90deg,#b8860b,#e0b43a);color:#fff;font-size:12.5px;font-weight:900;text-align:center}
	.hdr-sp-no1 i{margin-right:6px}
	.hdr-sp-catch{margin:0 10px 8px;text-align:center;font-size:14px;font-weight:900;color:#16171b}
	.hdr-sp-catch em{font-style:normal;color:#e4007f}
	.hdr-sp-catch em.hdr-c{color:#00a0e9}
	.hdr-sp .hdr-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:0 10px 8px}
	.hdr-sp .hdr-nums div{width:auto;border-radius:8px;padding:4px 2px;font-size:10px;font-weight:700;color:#4a5568;line-height:1.3}
	.hdr-sp .hdr-nums b{font-size:15px}
	.hdr-sp-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 10px 6px;font-size:13px;font-weight:900;color:#16171b}
	.hdr-sp-h a{font-size:11.5px;color:#1565c0}
	.hdr-sp-row{display:flex;gap:8px;overflow-x:auto;padding:0 10px;scrollbar-width:none}
	.hdr-sp-row::-webkit-scrollbar{display:none}
	.hdr-sp-row a{flex:none;width:76px;text-align:center;color:#16171b;font-size:11px;font-weight:700;line-height:1.25}
	.hdr-sp-row img{display:block;width:60px;height:60px;margin:0 auto 4px;border-radius:50%;object-fit:cover;border:2px solid #e3e7ee;background:#fff}
}

/* ========== フッター（お問い合わせ帯つき）2026-10 ==========
   class名はすべて ftr- から始まります
============================================================ */

/* お問い合わせ帯（黄色） */
.ftr-cta{clear:both;background:#ffe100;padding:28px 20px;text-align:center;margin-top:30px}
.ftr-cta *{box-sizing:border-box}
.ftr-cta .ftr-cta-h{margin:0 0 6px;font-size:24px;font-weight:900;color:#16171b;line-height:1.4}
.ftr-cta .ftr-cta-h span{display:inline-block}
.ftr-cta .ftr-cta-p{margin:0 0 16px;font-size:14px;font-weight:700;color:#3a3d44;line-height:1.6}
.ftr-cta-btns{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ftr-cta-btns a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:84px;border-radius:12px;color:#fff;font-weight:900;font-size:16px;text-decoration:none;box-shadow:0 3px 0 rgba(0,0,0,.18);line-height:1.25}
.ftr-cta-btns a:hover{color:#fff;opacity:.9}
.ftr-cta-btns a i{font-size:24px}
.ftr-cta-btns a small{font-size:11px;font-weight:700}
.ftr-cta-btns .d{background:#00a0e9}
.ftr-cta-btns .s{background:#e4007f}
.ftr-cta-btns .l{background:#06c755}
.ftr-cta-btns .f{background:#16171b}

/* フッター本体（紺） */
footer.ftr{clear:both;text-align:left;padding:0;background:#0f1e3d;color:#d6d9df;font-size:13px;line-height:1.6;margin:0}
footer.ftr *{box-sizing:border-box}
footer.ftr a{color:#d6d9df;text-decoration:none}
footer.ftr a:hover{color:#ffe100}
footer.ftr ul{list-style:none;margin:0;padding:0}
footer.ftr p{margin:0}
.ftr-cmyk{display:flex;height:8px}
.ftr-cmyk span{flex:1}
.ftr-cmyk .c{background:#00a0e9}
.ftr-cmyk .m{background:#e4007f}
.ftr-cmyk .y{background:#ffe100}
.ftr-cmyk .k{background:#555a63}
.ftr-in{max-width:1192px;margin:0 auto;padding:0 20px}

/* ロゴ・会社名・SNS */
.ftr-head{display:flex;align-items:center;gap:24px;padding:28px 0 20px}
footer.ftr .ftr-logo a{display:inline-flex;align-items:flex-end;gap:10px;background:#fff;border-radius:10px;padding:8px 14px}
.ftr-logo img{display:block;height:auto;margin:0}
.ftr-logo img:first-child{width:190px}
.ftr-logo img:last-child{width:106px}
footer.ftr .ftr-co{margin-right:auto;font-size:12.5px;line-height:1.6}
.ftr-co b{display:block;color:#fff;font-size:16px}
.ftr-sns{display:flex;gap:10px}
footer.ftr .ftr-sns a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#fff;font-size:19px}
.ftr-sns a.x{background:#000;border:1px solid #555}
.ftr-sns a.x span{font-size:17px;font-weight:700}
.ftr-sns a.ig{background:linear-gradient(45deg,#f9a825,#e4007f,#7b1fa2)}
.ftr-sns a.yt{background:#e62117}
.ftr-sns a.fb{background:#1877f2}
.ftr-sns a.ln{background:#06c755}

/* 3拠点 */
.ftr-bases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-bottom:26px;border-bottom:1px solid #26365a;margin-bottom:26px}
.ftr-base{background:#16294f;border-radius:10px;padding:14px 16px}
footer.ftr .ftr-base-h{color:#fff;font-weight:900;font-size:15px;margin-bottom:6px;padding-bottom:6px;border-bottom:2px solid #00a0e9}
.ftr-base:nth-child(2) .ftr-base-h{border-color:#e4007f}
.ftr-base:nth-child(3) .ftr-base-h{border-color:#ffe100}
.ftr-base-h i{margin-right:6px;color:#9fb3d9}
.ftr-base li{font-size:12.5px;color:#c3ccdc;line-height:1.7}

/* リンク4列 */
.ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-bottom:28px}
footer.ftr .ftr-col-h{color:#fff;font-weight:900;font-size:14px;padding-bottom:8px;margin-bottom:8px;border-bottom:2px solid #8a909b}
.ftr-col:nth-child(1) .ftr-col-h{border-color:#00a0e9}
.ftr-col:nth-child(2) .ftr-col-h{border-color:#e4007f}
.ftr-col:nth-child(3) .ftr-col-h{border-color:#ffe100}
footer.ftr .ftr-col li a{display:block;padding:4px 0 4px 12px;position:relative;font-size:13px}
footer.ftr .ftr-col li a:before{content:"\203A";position:absolute;left:0;color:#7d838e}
footer.ftr .ftr-copy{text-align:center;font-size:11.5px;color:#8a909b;padding:14px 10px;border-top:1px solid #26365a}
footer.ftr .ftr-copy a{color:#8a909b}

@media screen and (max-width:1000px) and (min-width:768px){
	.ftr-bases{grid-template-columns:1fr}
	.ftr-cols{grid-template-columns:1fr 1fr}
}
@media screen and (max-width:767px){
	.ftr-cta{padding:22px 12px;margin-top:20px}
	.ftr-cta .ftr-cta-h{font-size:18px}
	.ftr-cta .ftr-cta-p{font-size:12.5px}
	.ftr-cta-btns{grid-template-columns:1fr 1fr;gap:8px}
	.ftr-cta-btns a{height:72px;font-size:14px}
	.ftr-head{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 0 16px}
	.ftr-bases{grid-template-columns:1fr;gap:10px}
	.ftr-cols{grid-template-columns:1fr 1fr;gap:18px 14px}
	footer.ftr .ftr-col li a{font-size:12.5px;padding:5px 0 5px 12px}
}

/* ================================
   お問い合わせ導線（下部固定）
   2026-10 右端の縦並び → 画面下中央のフローティングバーに変更
================================ */

#rail {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9998;

  display: flex;
  gap: 6px;
  padding: 6px;

  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15,30,60,.08);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15,30,60,.18), 0 2px 6px rgba(15,30,60,.08);
}

/* 共通ボタン */
#rail a {
  --rail-c: #0798d0;

  display: flex;
  align-items: center;
  gap: 10px;

  height: 48px;
  padding: 0 20px 0 6px;
  box-sizing: border-box;

  border-radius: 999px;
  color: #1f2937;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;

  transition: background-color .2s, color .2s, transform .2s;
}

#rail a:hover {
  background: #eef3f8;
  transform: translateY(-2px);
}

/* アイコン（丸の中に線画アイコン） */
#rail .ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  width: 36px;
  height: 36px;
  border-radius: 50%;

  color: #fff;
  background: var(--rail-c);
}

#rail svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* デモ予約（いちばん押してほしいボタンなので塗りつぶし） */
#rail .r-demo {
  --rail-c: #0798d0;
  background: #0798d0;
  color: #fff;
}

#rail .r-demo:hover {
  background: #0686b8;
}

#rail .r-demo .ic {
  background: rgba(255,255,255,.22);
}

/* デモ予約の注記（東京・大阪・福井） */
#rail .lb {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#rail .sub {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  opacity: .9;
}

/* LINE相談 */
#rail .r-line {
  --rail-c: #06c755;
}

/* メール */
#rail .r-mail {
  --rail-c: #2b3a55;
}

/* 電話 */
#rail .r-tel {
  --rail-c: #55565c;
}

/* バーがフッター（コピーライト）に重ならないよう余白を確保 */
body:has(#rail) footer {
  padding-bottom: 96px;
}



/* ================================
   スマホ
================================ */

@media screen and (max-width: 700px) {

  #rail {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;

    gap: 0;
    padding: 0;

    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,.2);
  }

  #rail a,
  #rail .r-demo {
    flex: 1;

    flex-direction: column;
    justify-content: center;
    gap: 4px;

    height: 62px;
    padding: 6px 2px;

    border-radius: 0;
    color: #fff;
    background: var(--rail-c);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;

    border-right: 1px solid rgba(255,255,255,.35);
  }

  #rail a:last-child {
    border-right: none;
  }

  #rail a:hover,
  #rail .r-demo:hover {
    background: var(--rail-c);
    transform: none;
    opacity: .85;
  }

  #rail .ic,
  #rail .r-demo .ic {
    width: auto;
    height: auto;
    background: none;
  }

  #rail .lb {
    align-items: center;
    gap: 1px;
  }

  #rail .sub {
    font-size: 9px;
    letter-spacing: 0;
  }

  body:has(#rail) footer {
    padding-bottom: 77px;
  }

}

/* 下部固定の帯：かごの中身 */
#rail .hf-rail-cart{--rail-c:#ef6c00}

/* 商品ページの「お知らせ（黄色い帯）」が下部固定の帯に重ならないよう上にずらす */
body:has(#rail) .notice_fixed{bottom:84px}
/* 商品ページの「かごに入れる」ボタンも帯の上に出す */
body:has(#rail) .cart-back{bottom:84px}
@media screen and (max-width:700px){
	body:has(#rail) .notice_fixed{bottom:70px}
	body:has(#rail) .cart-back{bottom:calc(70px + env(safe-area-inset-bottom))}
}