:root{
  --fg:#111;
  --muted:#555;
  --grid:#ececec;
  --max:1080px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  color:var(--fg);
  background:#fff;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.75}
.wrap{max-width:var(--max); margin:0 auto; padding:48px 24px}
.grid{
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 96px 96px;
}
.nav{
  position:sticky; top:0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #f0f0f0;
  z-index:10;
}
.nav .inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand{font-weight:800; letter-spacing:.02em}
.brand img{display:block; height:20px; width:auto}
.menu{
  display:flex;
  gap:18px;
  font-weight:650;
  letter-spacing:.08em;
  font-size:12px;
  flex-wrap:wrap
}
.hero{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:32px;
  align-items:start; /* 写真の上端を全ページ同じ位置に揃える */
  padding:64px 0 16px;
}
.hero > *{
  min-width:0;
}
/* 見出しは左カラム幅に合わせて縮む（最長語 MANUFACTURING が収まる比率） */
.hero > div:first-child{
  container-type:inline-size;
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr; align-items:start}
}
.h1{
  font-weight:900;
  letter-spacing:-.02em;
  line-height:.95;
  font-size:clamp(32px,11.5cqi,84px);
  margin:0 0 18px;
}
.lead{
  margin:0;
  color:var(--muted);
  line-height:1.9;
  font-size:14px;
  max-width:56ch
}
.card{
  border:1px solid #eee;
  border-radius:18px;
  overflow:hidden;
  background:#fff
}
.heroimg{
  width:100%;
  aspect-ratio:21 / 9;
  min-height:240px;
  background: #f4f4f4 url("hero.jpg") center / cover no-repeat;
  position: relative;
}


.badge{
  position:absolute;
  left:14px;
  top:14px;
  font-size:11px;
  font-weight:750;
  letter-spacing:.08em;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
  padding:10px 12px;
  border-radius:999px
}
.section.section{
  padding:28px 0;
}

.kicker{
  font-size:12px;
  letter-spacing:.18em;
  font-weight:800;
  margin:0 0 10px
}
.h2{
  font-size:28px;
  font-weight:900;
  margin:0 0 14px;
  letter-spacing:-.02em
}
.p{
  margin:0;
  color:var(--muted);
  line-height:1.9;
  font-size:14px;
  max-width:72ch
}
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid #eee;
  border-radius:18px;
  padding:18px;
  flex-wrap:wrap
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid #ddd;
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:850;
  letter-spacing:.12em
}
.footer{
  border-top:1px solid #f0f0f0;
  padding:28px 24px;
  color:#777;
  font-size:12px
}
.footer a{color:inherit}
.footer .inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}
.smallcap{
  letter-spacing:.16em;
  font-weight:800
}
/* --- subpage hero image (21:9) --- */
.page-heroimg{
  width:100%;
  aspect-ratio:21/9;
  background:#f4f4f4 url("hero.jpg") center/cover no-repeat;
  position:relative;
}
@media (max-width:860px){
  .page-heroimg{ aspect-ratio:16/9; }
}
/* --- mobile nav: ロゴ1段目、メニューは横スクロール1行 --- */
@media (max-width:860px){
  .nav .inner{flex-direction:column; align-items:flex-start; gap:8px; padding:12px 24px}
  .menu{flex-wrap:nowrap; overflow-x:auto; width:100%; gap:16px; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .menu::-webkit-scrollbar{display:none}
}
/* --- 狭い画面ではhero画像の左右が切れるため、人物を右寄せしラベルを左下へ --- */
@media (max-width:560px){
  .heroimg{background-position:15% center}
  .badge{top:auto; bottom:14px}
}
/* --- ページ別hero画像 --- */
.hero-oem{background-image:url("hero-oem.jpg")}
.hero-textiles{background-image:url("hero-textiles.jpg")}
.hero-company{background-image:url("hero-company.jpg")}
@media (max-width:560px){
  .hero-oem{background-position:52% center}
  .hero-textiles{background-position:0% center}
  .hero-company{background-position:50% center}
  .hero-company .badge,
  .hero-textiles .badge{top:14px; bottom:auto}
}
/* --- 下層ページのコンテンツ部品（OEM / TEXTILES） --- */
.p + .p{margin-top:10px}
.note{margin:12px 0 0; color:#888; font-size:12px; line-height:1.8}
.p a,.note a{text-decoration:underline; text-underline-offset:3px}

/* タグ（対応アイテム・機能） */
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.tags li{
  border:1px solid #ddd; border-radius:999px; background:#fff;
  padding:8px 14px; font-size:13px; font-weight:650; letter-spacing:.04em
}

/* 工程ステップ */
.steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px;
  margin:18px 0 0; padding:0; list-style:none; counter-reset:step
}
.steps li{
  counter-increment:step;
  border:1px solid #eee; border-radius:14px; background:#fff;
  padding:12px; font-size:13px; font-weight:700; line-height:1.5
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  display:block; margin-bottom:6px;
  font-size:11px; font-weight:800; letter-spacing:.18em; color:#999
}

/* カード（生産拠点・素材・実績） */
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;
  margin:18px 0 0
}
.cards > *{
  border:1px solid #e6e6e6; border-radius:14px; background:#fff; padding:24px
}
.cards h3{
  margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.18em
}
.cards p{margin:0; color:var(--muted); font-size:14px; line-height:1.9}
.cards .meta{margin-top:10px; color:#111; font-weight:700; font-size:13px}

/* 期間の目安 */
.lead-time{display:flex; flex-wrap:wrap; gap:10px 28px; margin:16px 0 0}
.lead-time div{font-size:14px; line-height:1.7}
.lead-time b{display:block; font-size:11px; letter-spacing:.18em; color:#999}

/* よくある質問 */
.faq{margin:18px 0 0; border-top:1px solid #e6e6e6}
.faq details{border-bottom:1px solid #e6e6e6; background:rgba(255,255,255,.85)}
.faq summary{
  cursor:pointer; list-style:none; position:relative;
  padding:18px 40px 18px 4px; font-size:15px; font-weight:700; line-height:1.6
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:8px; top:16px; font-size:20px; font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0; padding:0 4px 20px; color:var(--muted); font-size:14px; line-height:1.9}