@charset "UTF-8";
/* =========================================================
   ビジネスフォン名鑑 共通CSS（全ページ共通・最初に読み込む）
   ========================================================= */

/* ---------- 共通：リセット・基本 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP",sans-serif;
  font-size:clamp(13px,0.9vw + 6px,14px);
  line-height:1.7;
  color:#333;
  background:#fff;
  overflow-x:hidden;
}
a{color:#333}
img{max-width:100%;display:block}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}

.inner{max-width:1160px;margin:0 auto;padding:0 16px}
.sec{padding:clamp(40px,6vw,72px) 0;border-bottom:1px solid #e5e5e5}
.sec.gray{background:#f5f5f5}
.secHead{text-align:center;margin-bottom:clamp(24px,3vw,36px)}
.secHead .en{display:inline-block;font-size:12px;color:#666;border:1px solid #ccc;padding:0 10px;margin-bottom:8px}
.secHead h2{font-size:clamp(18px,2.2vw,24px);font-weight:700;line-height:1.4;color:#268ad5}
.secHead p{color:#666;margin-top:8px}
.more{text-align:center;margin-top:28px}

.kari{font-size:12px;color:#666;border:1px dashed #999;padding:0 4px;margin-left:4px;white-space:nowrap}
.note{font-size:12px;color:#666;margin-top:8px}

/* 画像の仮置き */
.ph{background:#ddd;color:#777;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:1px solid #333;background:#fff;color:#333;text-decoration:none;font-weight:700}
.btn.main{background:#333;color:#fff}
.btn.full{width:100%}

/* タグ */
.tag{display:inline-block;font-size:12px;border:1px solid #bbb;padding:0 8px;color:#555;background:#fff}

/* ---------- 共通：ヘッダー ---------- */
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #ddd}
.hd .inner{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:clamp(15px,1.4vw,18px);white-space:nowrap}
.logo .mark{width:32px;height:32px}
.gnav{display:flex;gap:clamp(12px,1.6vw,22px);margin-left:auto;font-size:13px}
.gnav a{text-decoration:none;white-space:nowrap}
.hd .search{font-size:18px;color:#268ad5}
.hd .btn{min-height:40px;padding:0 16px;font-size:13px}

/* ---------- 共通：ハンバーガー（チェックボックス方式） ---------- */
#drwNavTrigger{display:none}
.drwNavBtn{display:none}
.drwNavClose{display:none}
#drwNav{display:none}
#wrapper{transition:transform .3s ease}

/* ---------- 共通：パンくず ---------- */
.bread{font-size:12px;color:#666;padding:12px 0;border-bottom:1px solid #eee}
.bread ol{display:flex;flex-wrap:wrap;gap:6px}
.bread li+li::before{content:"›";margin-right:6px}

/* ---------- 共通：CTA帯 ---------- */
.ctaBand{background:#eee;padding:clamp(36px,5vw,56px) 0;text-align:center}
.ctaBand h2{font-size:clamp(18px,2vw,22px);color:#268ad5}
.ctaBand p{color:#555;margin:8px 0 20px}
.ctaBand .btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.ctaBand .tel{font-size:clamp(20px,2.4vw,26px);font-weight:700}

/* ---------- 共通：フッター ---------- */
.ft{background:#444;color:#fff;padding:48px 0 24px}
.ft a{color:#fff;text-decoration:none}
.ft .cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:32px}
.ft h3{font-size:13px;margin-bottom:10px;border-bottom:1px solid #777;padding-bottom:6px}
.ft li{font-size:13px;margin-bottom:6px}
.ft .about p{font-size:13px;color:#ddd;margin-top:10px}
.ft .copy{font-size:12px;color:#ccc;text-align:center;margin-top:36px}

/* スマホ下部固定CTA */
.spCta{display:none}

/* ---------- 共通：レスポンシブ ---------- */
@media (max-width:1024px){
  .gnav{display:none}
  .hd .btn.hdCta{display:none}
  .hd .inner{justify-content:space-between}
  .hd .search{margin-left:auto;margin-right:56px}
  .ft .cols{grid-template-columns:1fr 1fr 1fr}
  /* ハンバーガー：右からドロワー、本体を左へ押し出す */
  .drwNavBtn{display:flex;flex-direction:column;justify-content:center;gap:6px;position:fixed;top:12px;right:12px;width:40px;height:40px;padding:0 9px;z-index:1002;cursor:pointer;background:#fff;border:1px solid #999}
  .drwNavBtn span{display:block;height:2px;background:#333;transition:transform .3s,opacity .3s}
  #drwNav{display:block;position:fixed;top:0;right:0;width:300px;height:100%;background:#fff;border-left:1px solid #ccc;z-index:1001;overflow-y:auto;padding:72px 20px 32px;transform:translateX(100%);transition:transform .3s ease}
  #drwNav li a{display:block;padding:14px 4px;border-bottom:1px solid #ddd;text-decoration:none}
  #drwNav .btn{margin-top:20px;width:100%}
  .drwNavClose{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s}
  #drwNavTrigger:checked ~ #drwNav{transform:translateX(0);transition-delay:.3s}
  #drwNavTrigger:checked ~ .drwNavClose{opacity:1;visibility:visible}
  #drwNavTrigger:checked ~ #wrapper{transform:translateX(-300px)}
  #drwNavTrigger:checked ~ .drwNavBtn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  #drwNavTrigger:checked ~ .drwNavBtn span:nth-child(2){opacity:0}
  #drwNavTrigger:checked ~ .drwNavBtn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

@media (max-width:767px){
  body{padding-bottom:64px}
  .hd .inner{height:56px}
  .ft .cols{grid-template-columns:1fr 1fr}
  .ft .about{grid-column:1 / 3}
  .spCta{display:grid;grid-template-columns:1fr 1.6fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid #999}
  .spCta a{display:flex;align-items:center;justify-content:center;gap:6px;height:56px;text-decoration:none;font-weight:700;font-size:14px}
  .spCta a.main{background:#333;color:#fff}
}