/*!
 * Nabesan Front Page CSS
 * 新HPデザイン (max-width: 512px / モバイルファースト)
 * このファイルは front-page.php (is_front_page) でのみ enqueue される
 */

:root {
  --front-bg: #FFFFFF;
  --front-bg-soft: #F4ECDE;
  --front-ink: #2B2A28;
  --front-ink-soft: #6B6863;
  --front-line: #ECE6D8;
  --front-orange: #F08A3E;
  --front-orange-deep: #E36F1E;
  --front-orange-soft: #FBD9BA;
  --front-red: #D8443B;
  --front-gold: #F2B324;
  --front-blue-ph: #4A78C6;
  --front-blue-ph-2: #3E66AE;
}

/* base — front-page 専用ラッパー .site の中だけに適用 */
.site, .site *{ box-sizing:border-box; }
.site{
  max-width: 512px;
  margin: 0 auto;
  background: var(--front-bg);
  overflow:hidden;
  position:relative;
  font-family: "Zen Maru Gothic","Noto Sans JP", system-ui, sans-serif;
  color: var(--front-ink);
  -webkit-font-smoothing:antialiased;
  font-weight:500;
}

/* placeholder */
.site .ph{
  background: repeating-linear-gradient(135deg, var(--front-blue-ph) 0 14px, var(--front-blue-ph-2) 14px 28px);
  color:#fff;
  font-family: "Noto Sans JP", monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.4;
  padding: 6px;
  border-radius: 6px;
}
.site .ph.flat{ background:var(--front-blue-ph); }

/* HEADER */
.site header.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 18px 6px;
}
.site .logo{
  display:flex;
  align-items:center;
  gap:10px;
}
.site .logo .ph{
  width:44px;height:44px;
  border-radius: 999px;
  font-size:9px;
}
.site .logo img.logo-img{
  width:44px;height:44px;
  border-radius:999px;
  object-fit:cover;
}
.site .logo .name{ line-height:1.05; }
.site .logo .name .row1{
  font-family:"Zen Maru Gothic";
  font-weight:900;
  font-size:20px;
  letter-spacing:.02em;
}
.site .logo .name .row1 .of{
  font-size:14px;
  font-weight:700;
  margin: 0 1px;
}
.site .logo .name .row2{
  font-family:"Zen Maru Gothic";
  font-weight:900;
  font-size:20px;
  letter-spacing:.02em;
}
.site .logo .name .tag{
  margin-top:3px;
  font-size:10px;
  color:var(--front-ink-soft);
  font-weight:700;
  letter-spacing:.06em;
}
.site .menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  cursor:pointer;
  background:none;
  border:none;
  padding:0;
}
.site .menu .bars{
  width:34px;height:30px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding: 5px 0;
}
.site .menu .bars span{
  display:block;height:3px;background:var(--front-ink);border-radius:2px;
}
.site .menu .lbl{
  font-size:10px;color:var(--front-ink);letter-spacing:.1em;font-weight:700;
}

/* HERO */
.site .hero{
  padding: 14px 22px 0;
  position:relative;
}
.site .hero-single{
  position:relative;
  border-radius: 10px;
  overflow:hidden;
}
.site .hero-single img{
  display:block;
  width: 100%;
  height: auto;
}
.site .hero-single .ph{
  position:absolute;
  inset:0;
  border-radius:10px;
  font-size:12px;
  padding: 14px;
  line-height:1.8;
}

/* SECTION generic */
.site section{ padding: 0 18px; }
.site .sec-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin: 28px 0 14px;
}
.site .sec-head img.g{
  width: 30px; height: 30px;
  display: block;
  flex-shrink: 0;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.site .sec-head h2{
  margin:0;
  font-family:"Zen Maru Gothic";
  font-weight:900;
  font-size: 22px;
}
.site .sec-head .stars{ color:var(--front-gold);font-size:18px;letter-spacing:1px; }
.site .sec-head .gtag{ font-size:12px;color:var(--front-ink);font-weight:700; }

/* SEC BAR (CASES heading row) */
.site .sec-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 26px 0 12px;
}
.site .sec-bar .left{
  display:flex;align-items:center;gap:8px;
}
.site .sec-bar .icon{
  width:30px;height:30px;
  background: var(--front-orange);
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;
}
.site .sec-bar img.sec-g{
  width: 30px; height: 30px;
  display: block;
  flex-shrink: 0;
  background: transparent !important;
  border: 0;
  border-radius: 0;
}
.site .sec-bar h2{
  margin:0;font-family:"Zen Maru Gothic";font-weight:900;font-size:20px;
}
.site .sec-bar .more{
  color:var(--front-ink);
  font-size:12.5px;
  font-weight:700;
  text-decoration:none;
}
.site .sec-bar .more::after{ content:" →";color:var(--front-orange); }

/* CASES */
.site .cases{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.site .case{
  background:#FBF3E2;
  border:1px solid #E8DCC1;
  border-radius: 10px;
  padding: 0;
  overflow:hidden;
}
.site .case .topbar{
  background:#3A2E25;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 10px;
}
.site .case .topbar .no{
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  font-family:"Zen Maru Gothic";
}
.site .case .topbar .cat{
  background:#D8443B;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 7px;
  border-radius:3px;
  letter-spacing:.04em;
}
.site .case .body{ padding: 10px 11px 12px; }
.site .case .title{
  margin: 2px 0 9px;
  font-size: 14px;
  font-weight:900;
  line-height:1.35;
  font-family:"Zen Maru Gothic";
}
.site .case .imgs{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  position:relative;
}
.site .case .imgs .slot{
  position:relative;
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:"Noto Sans JP";
  font-weight:700;
  font-size: 13px;
}
.site .case .imgs .slot.before{ background:#9A9A9A; }
.site .case .imgs .slot.after{ background: var(--front-blue-ph); }
.site .case .imgs .slot img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.site .case .imgs .tag{
  position:absolute;
  top:4px;
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing:.05em;
  z-index:2;
}
.site .case .imgs .tag.before{ left:3px;background:#3A2E25; }
.site .case .imgs .tag.after{ left:3px;background:var(--front-orange); }
.site .case .spec{
  margin: 11px 0 9px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.site .case .spec .row{
  display:flex;
  align-items:flex-start;
  gap: 6px;
}
.site .case .spec dt{
  background: var(--front-bg-soft);
  color: var(--front-ink);
  font-weight:700;
  padding: 2px 7px;
  border-radius: 3px;
  font-size: 11.5px;
  flex-shrink:0;
  margin:0;
}
.site .case .spec dd{
  margin:0;
  font-size: 12.5px;
  flex:1;
  word-break: break-all;
}
.site .case .spec dd .price{
  color: var(--front-orange-deep);
  font-weight:900;
  font-family:"Noto Sans JP";
  font-size: 14.5px;
}
.site .case .desc{
  font-size: 12px;
  line-height: 1.6;
  color: var(--front-ink);
  margin: 0 0 10px;
}
.site .case .detail-btn{
  display:block;
  width: 100%;
  text-align:center;
  background:#fff;
  border: 1.5px solid var(--front-orange);
  color: var(--front-orange-deep);
  font-weight:700;
  font-size: 12.5px;
  padding: 8px 4px;
  border-radius: 5px;
  text-decoration:none;
  line-height:1.2;
}

/* SMALL JOBS */
.site .small-jobs{
  margin: 22px 0 0;
  background: #FBE6CE;
  border-radius: 14px;
  padding: 16px 14px 18px;
}
.site .small-jobs .sj-head{
  display:flex;
  align-items:center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0 2px;
}
.site .small-jobs .sj-head .ic{
  width: 30px;height:30px;
  border-radius: 6px;
  background: var(--front-orange);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size: 16px;
}
.site .small-jobs h2{
  margin:0;
  font-family:"Zen Maru Gothic";
  font-weight:900;
  font-size: 17px;
  line-height:1.3;
}
.site .sj-icons{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.site .sj-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  text-decoration:none;
  color: var(--front-ink);
}
.site .sj-icon .badge{
  width: 58px; height: 58px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--front-orange);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color: var(--front-orange-deep);
  font-size: 22px;
}
.site .sj-icon .badge img{
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.site .sj-icon .lbl{
  font-size: 11.5px;
  font-weight:700;
  text-align:center;
  line-height:1.3;
}
.site .small-jobs .note{
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--front-ink);
  text-align:center;
  font-weight:500;
}

/* FAQ */
.site .faq-section{ margin-top: 26px; }
.site .faq-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 0 0 12px;
}
.site .faq-head .left{
  display:flex;
  align-items:center;
  gap: 8px;
}
.site .faq-head .ic{
  width: 30px;height:30px;
  border-radius:6px;
  background:#fff;
  border:1.5px solid var(--front-orange);
  color: var(--front-orange-deep);
  display:flex;align-items:center;justify-content:center;
  font-size: 16px;
}
.site .faq-head h2{
  margin:0;
  font-family:"Zen Maru Gothic";
  font-weight:900;
  font-size: 19px;
}
.site .faq-head .more{
  font-size:12.5px;font-weight:700;color:var(--front-ink);text-decoration:none;
}
.site .faq-head .more::after{ content:" →";color:var(--front-orange); }
.site .faq-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.site .faq-card{
  background:#fff;
  border:1px solid var(--front-line);
  border-radius: 10px;
  padding: 10px 8px 8px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  position:relative;
  text-decoration:none;
  color: var(--front-ink);
  min-height: 96px;
}
.site .faq-card .q-badge{
  width: 20px;height:20px;
  border-radius: 4px;
  background: var(--front-orange);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Noto Sans JP";
  font-weight:900;
  font-size: 12px;
}
.site .faq-card .qtxt{
  font-size: 11.5px;
  font-weight:700;
  line-height:1.4;
  color: var(--front-ink);
}
.site .faq-card .qmark{
  position:absolute;
  right:6px;bottom:6px;
  width: 16px;height:16px;
  border-radius:999px;
  background: var(--front-orange-soft);
  color: var(--front-orange-deep);
  display:flex;align-items:center;justify-content:center;
  font-size: 10px;
  font-weight:900;
}

/* REVIEWS */
.site .reviews{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.site .review{
  background:#fff;
  border:1px solid var(--front-line);
  border-radius: 10px;
  padding: 10px 8px;
  box-shadow: 0 2px 0 rgba(0,0,0,.02);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.site .review .avatar{
  width:38px;height:38px;border-radius:999px;
  overflow:hidden;
}
.site .review .avatar .ph{ height:100%;font-size:0;border-radius:0; }
.site .review .avatar img{ width:100%;height:100%;object-fit:cover; }
.site .review .rstars{ color:var(--front-gold);font-size:13px;letter-spacing:1px; }
.site .review .quote{
  font-size: 12px;
  line-height:1.5;
  color: var(--front-ink);
  font-weight:500;
}
.site .review .who{
  font-size: 11.5px;
  color: var(--front-ink-soft);
  margin-top:2px;
}
.site .google-link{
  text-align:center;
  margin: 14px 0 0;
}
.site .google-link a{
  color: var(--front-orange-deep);
  font-weight:700;
  font-size:13.5px;
  text-decoration:none;
  border-bottom:1px solid var(--front-orange-soft);
  padding-bottom:2px;
}
.site .google-link a .ext{
  display:inline-block;
  width:10px;height:10px;
  border:1.5px solid var(--front-orange-deep);
  border-radius:2px;
  position:relative;
  margin-left:4px;
  vertical-align:-1px;
}

/* NEWS */
.site .news-head{
  display:flex;align-items:center;justify-content:space-between;
  margin: 30px 0 12px;
}
.site .news-head .left{ display:flex;align-items:center;gap:10px; }
.site .news-head .ic{
  width: 36px;height:36px;border-radius:6px;
}
.site .news-head h2{
  margin:0;
  font-family:"Zen Maru Gothic";font-weight:900;font-size:21px;
  border-bottom: 3px solid var(--front-orange-soft);
  padding-bottom: 2px;
}
.site .news-head .more{
  font-size:12.5px;font-weight:700;color:var(--front-ink);text-decoration:none;
}
.site .news-head .more::after{ content:" →";color:var(--front-orange); }
.site .news{ background:transparent; }
.site .nrow{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--front-line);
  font-size: 13px;
  text-decoration:none;
  color: var(--front-ink);
}
.site .nrow .date{
  color: var(--front-orange-deep);
  font-weight:700;
  font-family:"Noto Sans JP";
  font-size: 13px;
  width: 78px;
  flex-shrink:0;
}
.site .nrow .cat{
  background: var(--front-bg-soft);
  color: var(--front-ink);
  font-size: 11px;
  font-weight:700;
  padding: 3px 8px;
  border-radius: 3px;
  flex-shrink:0;
}
.site .nrow .txt{
  flex:1;
  font-size: 13px;
  color: var(--front-ink);
  font-weight:500;
  line-height:1.4;
}
.site .nrow .chev{
  color: var(--front-ink-soft);
  font-size:16px;
}

/* Instagram */
.site .ig-head{
  display:flex;align-items:center;justify-content:space-between;
  margin: 30px 0 12px;
}
.site .ig-head .left{ display:flex;align-items:center;gap:8px; }
.site img.ig-logo{
  width: 30px; height: 30px;
  display: block;
  flex-shrink: 0;
}
.site .ig-head h2{
  margin:0;font-family:"Zen Maru Gothic";font-weight:900;font-size:19px;
}
.site .ig-head .more{ font-size:12.5px;font-weight:700;color:var(--front-ink);text-decoration:none; }
.site .ig-head .more::after{ content:" →";color:var(--front-orange); }
.site .ig-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.site .ig-card{
  position:relative;
  width: 100%;
  border-radius: 8px;
  overflow:hidden;
  border:1px solid var(--front-line);
  display:block;
  text-decoration:none;
}
.site .ig-card .ph{ position:absolute;inset:0;border-radius:0;font-size:9px; }
.site .ig-card img{ display:block; width:100%; height:auto; }
.site .ig-card .lbl{
  position:absolute;
  left:4px;bottom:4px;
  background: rgba(0,0,0,.55);
  color:#fff;
  font-size: 10.5px;
  font-weight:700;
  padding: 2px 6px;
  border-radius: 3px;
}

/* Smash Balloon Instagram Feed — 新HP world-view にスコープ調整 */
.site .ig-feed-wrap{ margin-top: 0; }
.site #sb_instagram{
  padding-bottom: 0 !important;
  width: 100% !important;
  box-sizing: border-box;
}
.site #sb_instagram .sbi_photo_wrap{ border-radius: 8px; overflow: hidden; }
.site #sb_instagram .sbi_photo_wrap a.sbi_photo{ border-radius: 8px; }
.site #sb_instagram .sbi_photo_wrap img,
.site #sb_instagram .sbi_item img{ border-radius: 8px; }
.site #sb_instagram .sbi_item{
  overflow: hidden;
  border-radius: 8px;
}
.site #sb_instagram .sb_instagram_header,
.site #sb_instagram .sbi_follow_btn,
.site #sb_instagram .sbi_load{ display: none !important; }

/* FOOTER */
.site .foot-town{
  margin-top: 30px;
  position:relative;
}
.site .foot-town img{
  display:block;
  width: 100%;
  height: auto;
}
.site footer.foot{
  padding: 20px 18px 26px;
  background: var(--front-bg);
}
.site .foot-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
  align-items:flex-start;
}
.site .foot-logo{
  display:flex;align-items:center;gap:10px;
}
.site .foot-logo .ph{
  width: 44px;height:44px;border-radius:999px;font-size:0;
}
.site .foot-logo img{
  width: 44px;height:44px;border-radius:999px;object-fit:cover;
}
.site .foot-logo .name .row1,
.site .foot-logo .name .row2{
  font-family:"Zen Maru Gothic";font-weight:900;font-size:19px;line-height:1.05;
}
.site .foot-logo .name .tag{
  font-size:10px;color:var(--front-ink-soft);font-weight:700;margin-top:3px;
}
.site .foot-info{
  font-size: 12px;
  line-height: 1.7;
  color: var(--front-ink);
  margin-top: 8px;
}
.site .foot-tel{
  font-family:"Noto Sans JP";
  font-weight:900;
  font-size: 20px;
  margin-top: 4px;
}
.site .foot-tel::before{
  content:"☎ ";
  font-size: 16px;
}
.site .foot-links{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 4px;
}
.site .foot-link{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 14px;
  font-weight:700;
  text-decoration:none;
  color: var(--front-ink);
}
.site .foot-link img.li,
.site .foot-link img.ig{
  width: 30px; height: 30px;
  display: block;
  flex-shrink: 0;
}
.site .copyright{
  margin-top: 22px;
  font-size: 11.5px;
  color: var(--front-ink-soft);
  text-align:center;
}
.site .totop{
  position: fixed;
  right: calc(50% - 252px);
  bottom: 18px;
  width: 36px;height:36px;border-radius:999px;
  background:#fff;
  border:1px solid var(--front-line);
  display:flex;align-items:center;justify-content:center;
  color: var(--front-ink-soft);
  font-size: 16px;
  text-decoration:none;
  z-index:50;
}
@media (max-width: 540px){
  .site .totop{ right: 14px; }
}

/* DRAWER (hamburger menu) */
.site-drawer{
  position: fixed;
  inset: 0;
  z-index: 100;
}
.site-drawer[hidden]{ display: none; }
.site-drawer-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .2s ease;
}
.site-drawer.is-open .site-drawer-backdrop{ opacity: 1; }
.site-drawer-panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(82vw, 320px);
  background: #fff;
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex;
  flex-direction: column;
  font-family: "Zen Maru Gothic","Noto Sans JP", system-ui, sans-serif;
}
.site-drawer.is-open .site-drawer-panel{ transform: translateX(0); }
.site-drawer-close{
  align-self: flex-end;
  width: 44px; height: 44px;
  border: 0; background: none;
  font-size: 28px; line-height: 1;
  color: var(--front-ink);
  cursor: pointer;
  margin: 6px 6px 0 0;
}
.site-drawer-list{
  list-style: none;
  padding: 8px 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
}
.site-drawer-list li{ border-bottom: 1px solid var(--front-line); }
.site-drawer-list a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  color: var(--front-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}
.site-drawer-list a::after{
  content: "›";
  color: var(--front-orange);
  font-size: 18px;
}
.site-drawer-list a:hover{ background: var(--front-bg-soft); }
.site-drawer-cta{
  padding: 16px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-drawer-cta a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.site-drawer-cta a.line{
  background: #06C755;
  color: #fff;
}
.site-drawer-cta a.quote{
  background: var(--front-orange);
  color: #fff;
}

/* デスクトップヘッダーナビ — モバイルでは非表示 */
.site .top-nav-desktop{ display: none; }

/* =====================================================
   タブレット 640px〜
   ===================================================== */
@media (min-width: 640px) {
  .site{ max-width: 720px; }
  .site .hero{ padding: 20px 32px 0; }
  .site section{ padding: 0 28px; }
  .site .small-jobs h2{ font-size: 18px; }
  .site .sj-icon .badge{ width: 64px; height: 64px; }
  .site .sj-icon .lbl{ font-size: 12px; }
  .site .case .title{ font-size: 15px; }
  .site .case .desc{ font-size: 12.5px; }
  .site .case .spec dt{ font-size: 12px; }
  .site .case .spec dd{ font-size: 13px; }
  .site .nrow{ padding: 16px 6px; font-size: 13.5px; }
  .site .nrow .date{ width: 84px; }
  .site footer.foot{ padding: 24px 28px 28px; }
}

/* =====================================================
   PC 960px〜
   ===================================================== */
@media (min-width: 960px) {
  .site{ max-width: 100%; }
  .site section{ padding: 0 64px; }

  /* HEADER PC: 水平ナビ + CTA */
  .site header.top{ padding: 18px 64px 14px; }
  .site .menu{ display: none; }
  .site .top-nav-desktop{
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  .site .top-nav-desktop a{
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--front-ink);
    text-decoration: none;
    border-radius: 999px;
  }
  .site .top-nav-desktop a:hover{ color: var(--front-orange-deep); }
  .site .top-nav-desktop a.cta{
    background: var(--front-orange);
    color: #fff;
    margin-left: 8px;
    padding: 10px 18px;
  }
  .site .top-nav-desktop a.cta:hover{ background: var(--front-orange-deep); color: #fff; }

  /* HERO */
  .site .hero{ padding: 28px 64px 0; }

  /* SMALL JOBS — アイコン大きく */
  .site .small-jobs{ padding: 32px 48px 36px; margin-top: 28px; }
  .site .small-jobs h2{ font-size: 20px; }
  .site .sj-icons{ gap: 16px; }
  .site .sj-icon .badge{ width: 84px; height: 84px; border-width: 2px; }
  .site .sj-icon .lbl{ font-size: 13.5px; }
  .site .small-jobs .note{ font-size: 14px; }

  /* CASES — 2列のままだがゆとり */
  .site .sec-bar h2{ font-size: 22px; }
  .site .sec-bar .icon{ width: 34px; height: 34px; font-size: 18px; }
  .site .sec-bar img.sec-g{ width: 34px; height: 34px; }
  .site .sec-bar .more{ font-size: 13.5px; }
  .site .cases{ gap: 18px; }
  .site .case .body{ padding: 14px 16px 16px; }
  .site .case .title{ font-size: 16px; }
  .site .case .desc{ font-size: 13px; line-height: 1.65; }
  .site .case .topbar{ padding: 8px 14px; }
  .site .case .topbar .no{ font-size: 14px; }
  .site .case .topbar .cat{ font-size: 11.5px; padding: 3px 10px; }
  .site .case .detail-btn{ font-size: 13.5px; padding: 10px 4px; }

  /* FAQ — 4列のままゆとり */
  .site .faq-head h2{ font-size: 21px; }
  .site .faq-head .ic{ width: 34px; height: 34px; font-size: 18px; }
  .site .faq-grid{ gap: 12px; }
  .site .faq-card{ padding: 14px 12px 12px; min-height: 110px; }
  .site .faq-card .qtxt{ font-size: 12.5px; }
  .site .faq-card .q-badge{ width: 22px; height: 22px; font-size: 13px; }
  .site .faq-card .qmark{ width: 18px; height: 18px; font-size: 11px; }

  /* REVIEWS — 3列のままゆとり */
  .site .reviews{ gap: 14px; }
  .site .review{ padding: 14px 12px; }
  .site .review .avatar{ width: 44px; height: 44px; }
  .site .review .rstars{ font-size: 15px; }
  .site .review .quote{ font-size: 13px; }
  .site .review .who{ font-size: 12.5px; }

  /* NEWS */
  .site .news-head h2{ font-size: 22px; }
  .site .news-head .ic{ width: 40px; height: 40px; }
  .site .nrow{ padding: 18px 8px; font-size: 14.5px; }
  .site .nrow .date{ font-size: 14.5px; width: 96px; }
  .site .nrow .cat{ font-size: 12px; padding: 4px 10px; }
  .site .nrow .txt{ font-size: 14.5px; }

  /* INSTAGRAM — PC では 3列 (フィードも) */
  .site .ig-head h2{ font-size: 21px; }
  .site .ig-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .site #sb_instagram{
    --sbi-num-cols: 3;
  }

  /* FOOTER — 大きく */
  .site .foot-town{ margin-top: 40px; }
  .site footer.foot{ padding: 32px 64px 36px; }
  .site .foot-grid{ grid-template-columns: 1.3fr 1fr; gap: 28px; }
  .site .foot-logo img{ width: 56px; height: 56px; }
  .site .foot-logo .name .row1,
  .site .foot-logo .name .row2{ font-size: 22px; }
  .site .foot-info{ font-size: 13.5px; line-height: 1.8; margin-top: 12px; }
  .site .foot-tel{ font-size: 24px; }
  .site .foot-link{ font-size: 15px; }
  .site .foot-link img.li,
  .site .foot-link img.ig{ width: 34px; height: 34px; }
  .site .copyright{ font-size: 12.5px; margin-top: 28px; }

  /* totop — PC では画面右下 */
  .site .totop{
    right: 32px !important;
    bottom: 32px;
    width: 44px; height: 44px;
    font-size: 20px;
  }
}