/* ===========================================
   Delta Quarry Bend — Main Stylesheet
   デルタ・クオリー・ベンド
   =========================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&display=swap');

/* ── Variables ── */
:root {
  --white:       #FFFFFF;
  --off-white:   #FAFAF8;
  --light:       #F5F5F0;
  --beige:       #F0EBE3;
  --warm:        #E8E0D5;
  --stone-lt:    #C8C0B8;
  --stone:       #8B8680;
  --stone-dk:    #4A4540;
  --green:       #4A6741;
  --green-lt:    #7A9977;
  --green-pale:  #EEF3ED;
  --brown:       #6B5C4C;
  --text:        #2C2820;
  --text-mid:    #5C5650;
  --text-lt:     #8C8880;
  --serif:       'Noto Serif JP', 'Yu Mincho', serif;
  --sans:        'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --corm:        'Cormorant Garamond', serif;
  --ease:        all 0.3s ease;
  --shadow:      0 2px 20px rgba(0,0,0,0.07);
  --shadow-h:    0 8px 40px rgba(0,0,0,0.13);
  --r:           2px;
  --max:         1180px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
a { color:inherit; text-decoration:none; transition: var(--ease); }
img { max-width:100%; height:auto; display:block; }
ul { list-style:none; }
button { font-family: var(--sans); cursor:pointer; }
body.no-scroll { overflow:hidden; }

/* ── Layout ── */
.container { max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ==========================================
   HEADER
   ========================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--warm);
  transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.07); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-logo { display:flex; flex-direction:column; line-height:1.25; }
.logo-en {
  font-family: var(--corm);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--brown);
  line-height: 1;
}
.logo-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-lt);
  margin-top: 4px;
}

.main-nav { display:flex; align-items:center; gap:28px; }
.main-nav a {
  font-size: 13px;
  letter-spacing: 0.07em;
  color: var(--text-mid);
  position: relative;
  padding: 4px 0;
}
.main-nav a::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.main-nav a:hover,
.main-nav a.active { color: var(--green); }
.main-nav a:hover::after,
.main-nav a.active::after { transform: scaleX(1); }

.nav-cta {
  background: var(--green) !important;
  color: var(--white) !important;
  padding: 9px 22px;
  border-radius: var(--r);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover { background: var(--stone-dk) !important; color:var(--white) !important; }

.hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:40px; height:40px;
  background:none; border:none;
  padding:8px;
}
.hamburger span {
  display:block;
  width:22px; height:1.5px;
  background: var(--stone-dk);
  transition: var(--ease);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5.5px, 5.5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5.5px,-5.5px); }

/* Mobile Overlay */
.mobile-nav-overlay {
  display:none;
  position:fixed; inset:0;
  background: rgba(44,40,32,0.97);
  z-index:2000;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.mobile-nav-overlay.show { display:flex; }
.mob-close {
  position:absolute; top:20px; right:20px;
  background:none; border:none;
  color:rgba(255,255,255,0.6);
  font-size:32px; line-height:1; padding:8px;
}
.mobile-nav-overlay a {
  color:rgba(255,255,255,0.82);
  font-size:17px;
  letter-spacing:0.12em;
  padding:16px 60px;
  width:100%;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.mobile-nav-overlay a:first-of-type { border-top:1px solid rgba(255,255,255,0.08); }
.mobile-nav-overlay a:hover { color:var(--green-lt); background:rgba(255,255,255,0.04); }

/* ==========================================
   PAGE HERO (inner pages)
   ========================================== */
.page-hero {
  background: var(--beige);
  padding: 56px 0 44px;
}
.breadcrumb {
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:var(--text-lt);
  margin-bottom:20px; letter-spacing:0.06em;
}
.breadcrumb a { color:var(--text-lt); }
.breadcrumb a:hover { color:var(--green); }
.breadcrumb .sep { color:var(--stone-lt); font-size:10px; }

.page-hero h1 {
  font-family: var(--serif);
  font-size: clamp(26px,4vw,40px);
  font-weight: 400;
  color: var(--stone-dk);
  margin-bottom:10px;
  line-height:1.45;
}
.page-hero-en {
  font-family: var(--corm);
  font-size:13px; letter-spacing:0.22em;
  color:var(--stone); text-transform:uppercase;
}

/* ==========================================
   SECTIONS
   ========================================== */
section { padding:88px 0; }
.bg-light  { background: var(--light);    }
.bg-beige  { background: var(--beige);    }
.bg-dark   { background: var(--stone-dk); }
.bg-green-pale { background: var(--green-pale); }

.section-header { margin-bottom:52px; }
.section-header.center { text-align:center; }
.section-header.center .section-sub { margin:0 auto; }

.section-tag {
  font-family: var(--corm);
  font-size:13px; letter-spacing:0.25em;
  color:var(--green); text-transform:uppercase;
  display:block; margin-bottom:14px;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(22px,3.5vw,34px);
  font-weight:400;
  color: var(--stone-dk);
  margin-bottom:16px; line-height:1.5;
}
.section-sub {
  font-size:15px;
  color:var(--text-mid);
  line-height:1.95;
  max-width:600px;
}
.divider {
  width:40px; height:2px;
  background:var(--green);
  margin:14px 0 22px;
}
.divider.center { margin:14px auto 22px; }

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 36px;
  font-size:14px; letter-spacing:0.08em;
  border-radius:var(--r);
  border:none; cursor:pointer;
  transition: var(--ease);
  font-family:var(--sans);
}
.btn-green  { background:var(--green); color:var(--white); }
.btn-green:hover { background:#3a5432; }
.btn-outline {
  background:transparent;
  color:var(--stone-dk);
  border:1px solid var(--stone-dk);
}
.btn-outline:hover { background:var(--stone-dk); color:var(--white); }
.btn-outline-white {
  background:transparent;
  color:var(--white);
  border:1px solid rgba(255,255,255,0.55);
}
.btn-outline-white:hover { background:rgba(255,255,255,0.12); border-color:var(--white); }
.btn-sm { padding:10px 24px; font-size:13px; }

/* ==========================================
   CARDS
   ========================================== */
.card {
  background:var(--white);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition: var(--ease);
}
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-h); }
.card-img { aspect-ratio:4/3; overflow:hidden; }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.card:hover .card-img img { transform:scale(1.07); }
.card-body { padding:28px; }
.card-tag {
  font-size:11px; letter-spacing:0.15em;
  color:var(--green); text-transform:uppercase;
  display:block; margin-bottom:8px;
}
.card-title {
  font-family:var(--serif);
  font-size:18px; color:var(--stone-dk);
  margin-bottom:10px; line-height:1.5;
}
.card-text { font-size:14px; color:var(--text-mid); line-height:1.85; }
.card-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--green);
  margin-top:16px; letter-spacing:0.04em;
}
.card-link:hover { color:var(--stone-dk); }

/* ==========================================
   GRID
   ========================================== */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ==========================================
   HERO (index)
   ========================================== */
.hero {
  position:relative; min-height:88vh;
  display:flex; align-items:center; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(
    105deg,
    rgba(44,40,32,0.75) 0%,
    rgba(44,40,32,0.45) 55%,
    rgba(44,40,32,0.18) 100%
  );
}
.hero-content { position:relative; z-index:1; max-width:680px; }
.hero-tag {
  font-family:var(--corm);
  font-size:13px; letter-spacing:0.28em;
  color:rgba(255,255,255,0.68); text-transform:uppercase;
  display:flex; align-items:center; gap:12px;
  margin-bottom:24px;
}
.hero-tag::before {
  content:''; width:32px; height:1px;
  background:rgba(255,255,255,0.5);
}
.hero-title {
  font-family:var(--serif);
  font-size:clamp(28px,4.8vw,54px);
  font-weight:300; color:var(--white);
  line-height:1.55; margin-bottom:24px;
  letter-spacing:0.04em;
}
.hero-text {
  font-size:clamp(14px,1.5vw,16px);
  color:rgba(255,255,255,0.82);
  line-height:2; margin-bottom:40px;
  max-width:520px;
}
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }

/* ==========================================
   FEATURES / ICONS
   ========================================== */
.feature-icon {
  width:56px; height:56px; border-radius:50%;
  background:var(--green-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; margin-bottom:18px;
  flex-shrink:0;
}
.feature-item h3 {
  font-family:var(--serif);
  font-size:17px; color:var(--stone-dk);
  margin-bottom:8px;
}
.feature-item p { font-size:14px; color:var(--text-mid); line-height:1.85; }

/* ==========================================
   PROCESS
   ========================================== */
.process-steps {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:0; position:relative;
}
.process-steps::before {
  content:''; position:absolute;
  top:27px; left:10%; right:10%;
  height:1px; background:var(--stone-lt);
}
.process-step {
  display:flex; flex-direction:column;
  align-items:center; text-align:center;
  padding:0 10px; position:relative; z-index:1;
}
.process-num {
  width:54px; height:54px; border-radius:50%;
  background:var(--green); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--corm); font-size:22px;
  margin-bottom:18px; flex-shrink:0;
}
.process-step h4 {
  font-family:var(--serif); font-size:14px;
  color:var(--stone-dk); margin-bottom:8px;
}
.process-step p { font-size:12px; color:var(--text-mid); line-height:1.7; }

/* ==========================================
   FAQ
   ========================================== */
.faq-item { border-bottom:1px solid var(--warm); }
.faq-q {
  width:100%; display:flex;
  justify-content:space-between; align-items:center;
  gap:16px; padding:20px 0;
  background:none; border:none; text-align:left;
  font-family:var(--sans); font-size:15px;
  color:var(--text); letter-spacing:0.04em; line-height:1.6;
}
.faq-q:hover { color:var(--green); }
.faq-icon {
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--stone-lt);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--green);
  flex-shrink:0; transition:transform 0.3s;
}
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.faq-item.open .faq-a { max-height:500px; padding-bottom:20px; }
.faq-a p {
  font-size:14px; color:var(--text-mid); line-height:1.95;
  padding-left:16px;
  border-left:2px solid var(--green-lt);
}

/* ==========================================
   BLOG
   ========================================== */
.blog-meta {
  display:flex; gap:14px; align-items:center;
  font-size:12px; color:var(--text-lt);
  margin-bottom:10px; letter-spacing:0.05em;
}
.blog-cat {
  background:var(--green-pale); color:var(--green);
  padding:2px 10px; border-radius:2px;
  font-size:11px; letter-spacing:0.08em;
}

/* ==========================================
   FORM
   ========================================== */
.form-group { margin-bottom:24px; }
label {
  display:block; font-size:13px;
  letter-spacing:0.06em; color:var(--text-mid);
  margin-bottom:8px;
}
.req { color:var(--green); margin-left:4px; font-size:11px; }
input[type="text"],
input[type="email"],
input[type="tel"],
select, textarea {
  width:100%; padding:12px 16px;
  border:1px solid var(--warm); border-radius:var(--r);
  font-size:15px; font-family:var(--sans);
  color:var(--text); background:var(--white);
  transition:border-color 0.3s; appearance:none;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--green);
  box-shadow:0 0 0 3px rgba(74,103,65,0.08);
}
textarea { resize:vertical; min-height:140px; }

/* ==========================================
   TABLE
   ========================================== */
.info-table { width:100%; border-collapse:collapse; }
.info-table th, .info-table td {
  padding:16px 20px; font-size:14px;
  border-bottom:1px solid var(--warm);
  line-height:1.7; vertical-align:top; text-align:left;
}
.info-table th {
  width:200px; color:var(--text-mid); font-weight:400;
  background:var(--light); font-size:13px; letter-spacing:0.05em;
  white-space:nowrap;
}

/* ==========================================
   CONTACT
   ========================================== */
.contact-card {
  background:var(--light); border-radius:var(--r); padding:32px;
}
.contact-card h3 {
  font-family:var(--serif); font-size:18px;
  color:var(--stone-dk); margin-bottom:20px;
  padding-bottom:12px; border-bottom:1px solid var(--warm);
}
.contact-row {
  display:flex; gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
  font-size:14px; color:var(--text-mid); line-height:1.65;
}
.contact-row .ci { color:var(--green); font-size:16px; margin-top:2px; flex-shrink:0; }

/* ==========================================
   MAP
   ========================================== */
.map-wrap { aspect-ratio:16/7; background:var(--light); border-radius:var(--r); overflow:hidden; }
.map-wrap iframe { width:100%; height:100%; border:0; }

/* ==========================================
   POPUP
   ========================================== */
.popup-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.52);
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity 0.3s, visibility 0.3s;
}
.popup-overlay.show { opacity:1; visibility:visible; }
.popup-box {
  background:var(--white); border-radius:6px;
  padding:48px 40px; max-width:400px; width:90%;
  text-align:center;
  transform:translateY(-20px);
  transition:transform 0.3s;
}
.popup-overlay.show .popup-box { transform:translateY(0); }
.popup-icon { font-size:52px; margin-bottom:14px; line-height:1; }
.popup-title {
  font-family:var(--serif); font-size:21px;
  color:var(--stone-dk); margin-bottom:12px;
}
.popup-msg { font-size:14px; color:var(--text-mid); line-height:1.8; margin-bottom:26px; }
.popup-btn {
  background:var(--green); color:var(--white);
  border:none; padding:12px 40px;
  border-radius:var(--r); font-size:14px;
  font-family:var(--sans); cursor:pointer;
  letter-spacing:0.06em; transition:background 0.3s;
}
.popup-btn:hover { background:var(--stone-dk); }

/* ==========================================
   BADGE
   ========================================== */
.badge {
  display:inline-block; padding:4px 12px;
  font-size:11px; letter-spacing:0.1em; border-radius:2px;
}
.badge-green { background:var(--green-pale); color:var(--green); }
.badge-stone { background:var(--light); color:var(--stone-dk); }
.badge-warm  { background:var(--warm); color:var(--brown); }

/* ==========================================
   PORTFOLIO FILTER
   ========================================== */
.filter-btns { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
.filter-btn {
  padding:8px 20px; border-radius:20px;
  border:1px solid var(--stone-lt);
  font-size:13px; color:var(--text-mid);
  background:var(--white); cursor:pointer;
  transition:var(--ease);
}
.filter-btn:hover, .filter-btn.active {
  background:var(--green); color:var(--white); border-color:var(--green);
}

/* ==========================================
   PORTFOLIO ITEM
   ========================================== */
.portfolio-item { position:relative; overflow:hidden; border-radius:var(--r); cursor:pointer; }
.portfolio-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s; display:block; }
.portfolio-item:hover img { transform:scale(1.07); }
.portfolio-info {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(44,40,32,0.85) 0%, transparent 60%);
  display:flex; flex-direction:column;
  justify-content:flex-end; padding:24px;
  opacity:0; transition:opacity 0.3s;
}
.portfolio-item:hover .portfolio-info { opacity:1; }
.portfolio-info h3 {
  font-family:var(--serif); color:var(--white);
  font-size:16px; margin-bottom:4px;
}
.portfolio-info p { font-size:12px; color:rgba(255,255,255,0.72); }

/* ==========================================
   FOOTER
   ========================================== */
.site-footer { background:var(--stone-dk); color:rgba(255,255,255,0.76); padding-top:72px; }
.footer-top {
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1.2fr;
  gap:48px; padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand .logo-en { color:rgba(255,255,255,0.9); font-size:20px; }
.footer-brand .logo-sub { color:rgba(255,255,255,0.42); }
.footer-brand p {
  font-size:13px; color:rgba(255,255,255,0.58);
  margin-top:18px; line-height:1.9; max-width:260px;
}
.footer-col h4 {
  font-family:var(--serif); font-size:14px; font-weight:400;
  color:rgba(255,255,255,0.88); margin-bottom:18px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.12);
  letter-spacing:0.08em;
}
.footer-col ul li { margin-bottom:11px; }
.footer-col ul li a { font-size:13px; color:rgba(255,255,255,0.56); letter-spacing:0.04em; }
.footer-col ul li a:hover { color:var(--green-lt); }
.f-contact-row {
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; color:rgba(255,255,255,0.58);
  margin-bottom:12px; line-height:1.65;
}
.f-contact-row .fci { color:var(--green-lt); flex-shrink:0; margin-top:1px; }
.footer-bottom {
  padding:20px 0;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-bottom p { font-size:12px; color:rgba(255,255,255,0.32); letter-spacing:0.05em; }
.footer-bl { display:flex; gap:24px; }
.footer-bl a { font-size:12px; color:rgba(255,255,255,0.35); letter-spacing:0.03em; }
.footer-bl a:hover { color:rgba(255,255,255,0.65); }

/* ==========================================
   POLICY PAGES
   ========================================== */
.policy-content { max-width:800px; margin:0 auto; }
.policy-content h2 {
  font-family:var(--serif); font-size:20px;
  color:var(--stone-dk); margin:40px 0 14px;
  padding-bottom:8px; border-bottom:1px solid var(--warm);
}
.policy-content p { font-size:14px; color:var(--text-mid); line-height:1.95; margin-bottom:14px; }
.policy-content ul { padding-left:20px; margin-bottom:14px; }
.policy-content ul li {
  font-size:14px; color:var(--text-mid); line-height:1.85;
  list-style:disc; margin-bottom:6px;
}

/* ==========================================
   BLOG POST
   ========================================== */
.post-content { max-width:760px; margin:0 auto; }
.post-content h2 {
  font-family:var(--serif); font-size:22px;
  color:var(--stone-dk); margin:40px 0 14px; line-height:1.5;
}
.post-content p { font-size:15px; color:var(--text-mid); line-height:1.95; margin-bottom:18px; }
.post-content img {
  border-radius:var(--r); margin:28px 0;
  width:100%; object-fit:cover; max-height:420px;
}
.post-content ul { padding-left:24px; margin-bottom:18px; }
.post-content ul li {
  font-size:14px; color:var(--text-mid); line-height:1.85;
  list-style:disc; margin-bottom:6px;
}
.post-content blockquote {
  border-left:3px solid var(--green); padding:16px 20px;
  background:var(--green-pale); margin:24px 0;
  border-radius:0 var(--r) var(--r) 0;
  font-size:14px; color:var(--text-mid); line-height:1.9;
}

/* ==========================================
   SERVICE DETAIL
   ========================================== */
.service-detail-img {
  width:100%; aspect-ratio:16/7; object-fit:cover;
  border-radius:var(--r); margin-bottom:40px;
}
.service-points { margin:32px 0; }
.service-point {
  display:flex; gap:16px; align-items:flex-start;
  margin-bottom:20px; padding-bottom:20px;
  border-bottom:1px solid var(--warm);
}
.service-point:last-child { border-bottom:none; }
.sp-icon {
  width:44px; height:44px; border-radius:50%;
  background:var(--green-pale);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.sp-text h4 {
  font-family:var(--serif); font-size:16px;
  color:var(--stone-dk); margin-bottom:6px;
}
.sp-text p { font-size:14px; color:var(--text-mid); line-height:1.85; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width:1024px) {
  .main-nav { display:none; }
  .hamburger { display:flex; }
  .footer-top { grid-template-columns:1fr 1fr; gap:36px; }
  .process-steps { grid-template-columns:repeat(3,1fr); gap:24px; }
  .process-steps::before { display:none; }
}

@media (max-width:768px) {
  section { padding:60px 0; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; gap:20px; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .footer-bl { justify-content:center; flex-wrap:wrap; gap:16px; }
  .hero { min-height:75vh; }
  .hero-btns { flex-direction:column; }
  .hero-btns .btn { justify-content:center; }
  .process-steps { grid-template-columns:repeat(2,1fr); }
  .info-table th { width:110px; font-size:12px; }
  .info-table td { font-size:13px; }
}

@media (max-width:480px) {
  .container { padding:0 16px; }
  .process-steps { grid-template-columns:1fr; }
  .hero-tag { display:none; }
  .filter-btns { gap:8px; }
  .filter-btn { font-size:12px; padding:7px 16px; }
}