/* ==========================================================================
   坂本篠一株式会社 — corporate site v2
   Design language: MUJI / Apple / Uniqlo minimalism
   White space, restrained type, near-monochrome + one precise accent
   ========================================================================== */

:root{
  --bg:        #FFFFFF;
  --bg-soft:   #F6F5F2;
  --bg-deep:   #EFEDE7;
  --ink:       #161616;
  --ink-soft:  #6B6B68;
  --ink-faint: #9B9A95;
  --line:      #E6E4DE;
  --line-soft: #EFEDE8;
  --accent:    #BC3B2E;   /* single precision accent — used sparingly */

  --serif: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", sans-serif;

  --max: 1120px;
  --maxN: 760px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;color:var(--ink);letter-spacing:.01em;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px;}
.wrap-n{max-width:var(--maxN);margin:0 auto;padding:0 40px;}

.skip-link{position:absolute;left:-999px;top:0;}
.skip-link:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:999;}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.brand{
  color:var(--ink);
  font-family:var(--serif);
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.02em;
  display:flex;align-items:center;gap:8px;
}
.brand .dot{width:6px;height:6px;background:var(--accent);display:inline-block;flex-shrink:0;}
.brand .en{
  font-family:var(--sans);
  font-size:9.5px;
  color:var(--ink-faint);
  letter-spacing:.14em;
  display:block;
  margin-top:3px;
  font-weight:400;
}
nav.main-nav{display:flex;align-items:center;gap:4px;}
nav.main-nav a{
  color:var(--ink-soft);
  font-size:13.5px;
  letter-spacing:.03em;
  padding:10px 16px;
  transition:color .15s ease;
}
nav.main-nav a:hover{color:var(--ink);}
nav.main-nav a[aria-current="page"]{color:var(--ink);font-weight:600;}

.lang-toggle{
  background:transparent;border:1px solid var(--line);
  color:var(--ink-soft);font-family:var(--sans);font-size:11.5px;
  letter-spacing:.04em;padding:7px 13px;border-radius:20px;cursor:pointer;
  margin-left:8px;
}
.lang-toggle:hover{border-color:var(--ink);color:var(--ink);}

.nav-toggle{display:none;}

@media (max-width:780px){
  nav.main-nav{
    position:fixed;inset:76px 0 0 0;background:#fff;
    flex-direction:column;align-items:flex-start;padding:18px 40px;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  nav.main-nav.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  nav.main-nav a{width:100%;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);}
  .nav-toggle{
    display:inline-flex;background:transparent;border:0;color:var(--ink);
    width:34px;height:34px;align-items:center;justify-content:center;cursor:pointer;
  }
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
    content:"";display:block;width:20px;height:1px;background:var(--ink);
    position:relative;
  }
  .nav-toggle span::before{position:absolute;top:-6px;}
  .nav-toggle span::after{position:absolute;top:6px;}
}

/* ---------- hero ---------- */
.hero{padding:120px 0 90px;}
.eyebrow{
  font-size:11.5px;letter-spacing:.22em;color:var(--ink-faint);
  font-family:var(--sans);margin-bottom:24px;display:flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:5px;height:5px;background:var(--accent);display:inline-block;}
.hero h1{
  font-size:clamp(34px,5vw,58px);line-height:1.32;max-width:820px;
  font-weight:500;letter-spacing:-.01em;
}
.hero .lead{
  margin-top:28px;color:var(--ink-soft);max-width:560px;font-size:16px;line-height:1.9;
}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:80px;border-top:1px solid var(--line);
}
.hero-stats div{padding:26px 28px 0;border-right:1px solid var(--line);}
.hero-stats div:last-child{border-right:0;}
.hero-stats .num{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--ink);display:block;}
.hero-stats .label{font-size:12px;color:var(--ink-soft);margin-top:6px;display:block;letter-spacing:.02em;}
@media(max-width:680px){
  .hero-stats{grid-template-columns:1fr;}
  .hero-stats div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:4px;}
}

/* ---------- sections ---------- */
section{padding:90px 0;}
section + section{border-top:1px solid var(--line);}
.section-head{margin-bottom:56px;}
.section-head .eyebrow{margin-bottom:18px;}
.section-head h2{font-size:clamp(24px,3vw,34px);font-weight:500;max-width:600px;}
.section-foot{margin-top:56px;}

/* ---------- main business banner ---------- */
.main-biz{
  background:var(--bg-soft);
  padding:64px;
  display:grid;grid-template-columns:1fr 1.3fr;gap:60px;
}
.main-biz .tag{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:.1em;color:var(--accent);
  margin-bottom:18px;font-weight:600;
}
.main-biz .tag::before{content:"";width:5px;height:5px;background:var(--accent);}
.main-biz h3{font-size:26px;line-height:1.5;margin-bottom:18px;}
.main-biz p{color:var(--ink-soft);margin:0;font-size:15px;}
.main-biz-list{margin:0;padding:0;list-style:none;}
.main-biz-list li{
  padding:18px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-soft);
  display:flex;gap:14px;
}
.main-biz-list li:last-child{border-bottom:0;}
.main-biz-list strong{color:var(--ink);font-weight:600;min-width:120px;flex-shrink:0;}
@media(max-width:780px){
  .main-biz{grid-template-columns:1fr;padding:40px 28px;}
}

/* ---------- 3 strengths ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;}
.grid3 .num{font-family:var(--serif);font-size:13px;color:var(--ink-faint);letter-spacing:.08em;margin-bottom:18px;display:block;}
.grid3 h3{font-size:18px;margin-bottom:12px;font-weight:600;}
.grid3 p{font-size:14px;color:var(--ink-soft);margin:0;}
@media (max-width:780px){.grid3{grid-template-columns:1fr;gap:44px;}}

/* ---------- product grid (取扱商品) ---------- */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.product-card{background:#fff;padding:0;}
.product-photo{
  aspect-ratio:1/1;background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.product-photo .ph-mark{
  font-size:10px;letter-spacing:.1em;color:var(--ink-faint);text-align:center;
}
.product-photo .ph-icon{width:26px;height:26px;border:1px solid var(--ink-faint);border-radius:50%;margin:0 auto 10px;}
.product-info{padding:22px 22px 26px;}
.product-info .jan{font-size:10.5px;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:8px;display:block;}
.product-info h4{font-family:var(--serif);font-size:15.5px;font-weight:600;margin:0 0 4px;line-height:1.5;}
.product-info .en-name{font-size:11.5px;color:var(--ink-soft);display:block;margin-bottom:10px;}
.product-info .spec{font-size:12px;color:var(--ink-faint);}
@media(max-width:780px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.product-grid{grid-template-columns:1fr;}}

.partner-note{
  margin-top:40px;padding:24px 28px;background:var(--bg-soft);
  font-size:13px;color:var(--ink-soft);display:flex;gap:14px;align-items:flex-start;
}
.partner-note .dot{width:5px;height:5px;background:var(--accent);margin-top:7px;flex-shrink:0;}

/* ---------- company table ---------- */
table.kaisha{width:100%;border-collapse:collapse;}
table.kaisha tr{border-bottom:1px solid var(--line);}
table.kaisha th,table.kaisha td{text-align:left;padding:22px 6px;vertical-align:top;font-weight:400;}
table.kaisha th{
  width:200px;color:var(--ink-soft);font-size:13px;letter-spacing:.03em;font-weight:500;
}
table.kaisha td{font-size:15px;}
table.kaisha td .fill{color:var(--accent);}
@media (max-width:600px){
  table.kaisha, table.kaisha tr, table.kaisha th, table.kaisha td{display:block;width:auto;}
  table.kaisha th{padding-bottom:6px;}
  table.kaisha tr{padding:18px 0;}
}

/* ---------- business numbered list ---------- */
.kanji-list > div{
  display:flex;gap:28px;padding:36px 0;border-top:1px solid var(--line);
}
.kanji-list > div:first-child{border-top:0;}
.kanji-num{
  font-family:var(--serif);font-size:13px;color:var(--ink-faint);flex-shrink:0;width:30px;letter-spacing:.04em;
  padding-top:3px;
}
.kanji-list h3{font-size:18px;margin-bottom:10px;font-weight:600;}
.kanji-list p{margin:0;color:var(--ink-soft);font-size:14.5px;}

/* ---------- full list (41 items) ---------- */
.full-list{columns:2;column-gap:48px;list-style:none;margin:0;padding:0;}
.full-list li{font-size:13px;color:var(--ink-soft);padding:9px 0;border-bottom:1px solid var(--line-soft);break-inside:avoid;}
.full-list li span.lnum{color:var(--ink-faint);font-family:var(--serif);margin-right:8px;font-size:12px;}
.full-list li.highlight{color:var(--ink);font-weight:600;}
.full-list li.highlight span.lnum{color:var(--accent);}
@media(max-width:680px){.full-list{columns:1;}}

/* ---------- news ---------- */
.news-item{
  display:grid;grid-template-columns:130px 1fr;gap:28px;
  padding:34px 0;border-top:1px solid var(--line);
}
.news-item:first-child{border-top:0;}
.news-date{font-family:var(--serif);color:var(--ink-faint);font-size:13.5px;}
.news-tag{
  display:inline-block;font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);
  border:1px solid var(--line);padding:3px 9px;margin-bottom:10px;
}
.news-item h3{font-size:16px;margin-bottom:10px;font-weight:600;}
.news-item p{margin:0;color:var(--ink-soft);font-size:14px;}
@media (max-width:600px){.news-item{grid-template-columns:1fr;gap:8px;}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
@media (max-width:780px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
.contact-block dt{font-size:12px;color:var(--ink-faint);letter-spacing:.04em;margin-top:24px;}
.contact-block dt:first-child{margin-top:0;}
.contact-block dd{margin:5px 0 0;font-size:16px;font-family:var(--serif);color:var(--ink);font-weight:500;}
.btn{
  display:inline-block;margin-top:32px;background:var(--ink);color:#fff;
  padding:15px 32px;font-size:13.5px;letter-spacing:.04em;
  transition:background .15s ease;
}
.btn:hover{background:var(--accent);}
.map-frame{border:1px solid var(--line);height:320px;width:100%;background:var(--bg-soft);}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(15%);}

/* ---------- footer ---------- */
footer{background:var(--bg-soft);color:var(--ink);padding:60px 0 36px;border-top:1px solid var(--line);}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;}
footer .f-brand{font-family:var(--serif);font-size:15px;font-weight:600;margin-bottom:8px;}
footer .f-meta{font-size:12px;color:var(--ink-soft);line-height:1.8;}
footer .f-links{display:flex;gap:24px;font-size:13px;}
footer .f-links a{color:var(--ink-soft);}
footer .f-links a:hover{color:var(--ink);}
footer .f-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-faint);}

/* ---------- language toggle ---------- */
.lang-cn{display:none;}
html.show-cn .lang-jp{display:none;}
html.show-cn .lang-cn{display:block;}
html.show-cn .lang-cn.inline{display:inline;}
html.show-cn .lang-cn.flex{display:flex;}

.fill{color:var(--accent);}

@media (prefers-reduced-motion: reduce){*{transition:none !important;}}

.page-head{padding:64px 0 0;}
.page-head h1{font-size:clamp(28px,4vw,40px);}
.page-head .eyebrow{margin-bottom:16px;}