/* ============================================
   NEO TRIA — Corporate Site
   White-based / charcoal accent / typography-led
   ============================================ */

:root{
  --bg: #ffffff;
  --bg-soft: #f6f5f2;
  --bg-warm: #efece6;
  --ink: #141414;
  --ink-2: #2a2a2a;
  --ink-3: #5b5b5b;
  --ink-4: #8a8a8a;
  --line: #e5e3df;
  --line-strong: #d2cfc9;
  --accent: #1f1f1f;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --mono: "Inter", "Helvetica Neue", Arial, sans-serif;

  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 4vw, 64px);

  --t-fast: .25s cubic-bezier(.2,.7,.2,1);
  --t-med: .55s cubic-bezier(.2,.7,.2,1);
  --t-slow: 1.1s cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .02em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
button{font: inherit; cursor:pointer; background:none; border:0; color:inherit}
ul{list-style:none; padding:0; margin:0}
h1,h2,h3,h4,h5{margin:0; font-weight:500; letter-spacing:.04em; line-height:1.4}
p{margin:0}

/* ============ Type utilities ============ */
.en{font-family: var(--serif); font-weight:400; letter-spacing:.08em}
.en-sans{font-family: var(--mono); letter-spacing:.18em; text-transform:uppercase; font-size:11px; font-weight:500}
.section-eyebrow{
  font-family: var(--mono);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:13px;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 28px;
  display:inline-block;
}
.section-title{
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.45;
  margin-bottom: 24px;
}
.section-title .en{
  display:block;
  font-size: clamp(56px, 6.5vw, 96px);
  letter-spacing:.04em;
  line-height:1;
  margin-bottom: 18px;
  color: var(--ink);
}
.section-lead{
  font-size: 15px;
  color: var(--ink-3);
  max-width: 640px;
  line-height: 2;
}

/* ============ HEADER ============ */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.site-header.scrolled{ border-bottom-color: var(--line); }
.header-inner{
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}
.logo{display:inline-flex; align-items:center; gap:14px; color:var(--ink)}
.logo-mark{display:inline-flex; align-items:center}
.logo-img{ height: 30px; width:auto; display:block }
.logo-text{display:flex; flex-direction:column; line-height:1.1}
.logo-en{font-family:var(--mono); font-weight:500; letter-spacing:.28em; font-size:14px}
.logo-jp{font-size:10px; color:var(--ink-3); letter-spacing:.16em; margin-top:3px}

.footer-logo-img{
  height: 40px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  align-self: flex-start;
  flex-shrink: 0;
  margin-bottom: 14px;
  display: block;
}

.primary-nav ul{display:flex; gap: clamp(18px, 2.4vw, 36px); justify-content:center}
.primary-nav a{
  display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  font-size:13px; font-weight:500; letter-spacing:.1em;
  padding: 8px 2px;
  position: relative;
  transition: color var(--t-fast);
}
.primary-nav a span{
  font-family:var(--mono); font-size:9px; letter-spacing:.24em; color:var(--ink-4);
  text-transform:uppercase;
  transition: color var(--t-fast);
}
.primary-nav a:hover, .primary-nav a.active{color:var(--ink)}
.primary-nav a.active::after{
  content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  width:18px; height:1px; background: var(--ink);
}
.primary-nav a.nav-accent{ color: var(--ink); }

/* ヘッダー右端エリア（CTAグループ + メニューボタン） */
.header-end{
  display: flex; align-items: center; gap: 16px;
}

/* ヘッダーCTAグループ（協業パートナー募集 + お問い合わせ） */
.header-cta-group{
  display: flex; align-items: stretch; gap: 6px;
}

/* CTAボタン共通スタイル（高さ・フォントサイズ揃え） */
.site-header .header-partners,
.site-header .header-contact{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 500;
  white-space: nowrap;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
}

/* 協業パートナー募集ボタン（白背景 + 黒枠） */
.site-header .header-partners{
  background: #fff;
  color: var(--ink);
}
.site-header .header-partners:hover{
  background: var(--ink);
  color: #fff;
}

/* お問い合わせボタン（黒背景反転で最強調） */
.site-header .header-contact{
  background: var(--ink);
  color: #fff;
}
.site-header .header-contact:hover{
  background: #fff;
  color: var(--ink);
}

.menu-toggle{display:none; flex-direction:column; gap:5px; width:28px; height:20px; justify-content:center}
.menu-toggle span{display:block; width:100%; height:1px; background:var(--ink)}

/* ============ MAIN ============ */
#mainContent{ padding-top: 78px; }
.page{ animation: pageIn .6s cubic-bezier(.2,.7,.2,1); }
@keyframes pageIn{
  from{opacity:0; transform: translateY(8px)}
  to{opacity:1; transform: translateY(0)}
}
.container{max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter)}
.container-wide{max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter)}

section{ padding: clamp(80px, 12vw, 160px) 0; }

/* ============ HERO (TOP) ============ */
.hero{
  padding: 0;
  position: relative;
  margin-top: -78px;
  padding-top: 78px;
  background: #0a0a0a;
  color:#fff;
  overflow:hidden;
}
.hero[data-layout="slide"] .hero-slide{
  position: relative;
  height: 100vh;
  min-height: 680px;
  max-height: 900px;
  overflow:hidden;
}
.hero[data-layout="slide"] .slide-item{
  position:absolute; inset:0;
  opacity:0;
  transition: opacity 1.8s ease;
}
.hero[data-layout="slide"] .slide-item.active{ opacity:1 }
.hero[data-layout="slide"] .slide-item img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.hero[data-layout="slide"] .slide-item.active img{ transform: scale(1) }
.hero[data-layout="slide"] .slide-item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%);
}

.hero-copy{
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: clamp(60px, 10vh, 120px);
  z-index: 2;
  max-width: var(--container-wide);
  margin: 0 auto;
}
.hero-copy .hero-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 28px;
  display:inline-flex; align-items:center; gap:14px;
}
.hero-copy .hero-eyebrow::before{
  content:""; width:32px; height:1px; background: rgba(255,255,255,.5);
}
.hero-copy h1{
  font-size: clamp(36px, 6.2vw, 84px);
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.35;
  color:#fff;
  margin-bottom: 0;
}
.hero-copy h1 .accent{
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  letter-spacing:.06em;
  position: relative;
  display: inline-block;
  padding: 0 .08em;
}
.hero-copy h1 .accent::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -.08em;
  height: 3px;
  background: currentColor;
  opacity: .9;
}
.hero-copy .hero-sub{
  font-size: 14px;
  color: rgba(255,255,255,.78);
  letter-spacing:.1em;
  line-height: 2;
  max-width: 520px;
}

.hero-indicators{
  position: absolute;
  right: var(--gutter); bottom: clamp(60px, 10vh, 120px);
  z-index: 3;
  display:flex; gap: 14px; align-items:center;
}
.hero-indicators .num{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:#fff;
}
.hero-indicators .dots{display:flex; gap:8px}
.hero-indicators .dot{
  width: 28px; height:1px; background: rgba(255,255,255,.3); cursor:pointer; transition: background var(--t-fast)
}
.hero-indicators .dot.active{ background:#fff }

/* HERO B — Split */
.hero[data-layout="split"] .hero-slide{
  display:grid;
  grid-template-columns: 5fr 7fr;
  height: 100vh;
  min-height: 680px;
  max-height: 900px;
  background: #fff;
  color: var(--ink);
}
.hero[data-layout="split"] .hero-text-pane{
  display:flex; flex-direction:column; justify-content:center; padding: 0 clamp(40px, 6vw, 90px);
}
.hero[data-layout="split"] .hero-text-pane .hero-eyebrow{color: var(--ink-3)}
.hero[data-layout="split"] .hero-text-pane .hero-eyebrow::before{background: var(--ink-3)}
.hero[data-layout="split"] .hero-text-pane h1{color: var(--ink); font-size: clamp(32px, 4.5vw, 64px)}
.hero[data-layout="split"] .hero-text-pane .hero-sub{color: var(--ink-3)}
.hero[data-layout="split"] .hero-img-pane{ position:relative; overflow:hidden }
.hero[data-layout="split"] .hero-img-pane .slide-item{ position:absolute; inset:0; opacity:0; transition:opacity 1.8s}
.hero[data-layout="split"] .hero-img-pane .slide-item.active{opacity:1}
.hero[data-layout="split"] .hero-img-pane .slide-item img{width:100%; height:100%; object-fit:cover}
.hero[data-layout="split"] .hero-copy{ position:static; padding:0; max-width:none }
.hero[data-layout="split"] .hero-indicators{ left: clamp(40px, 6vw, 90px); right:auto; bottom: clamp(40px, 6vw, 80px) }
.hero[data-layout="split"] .hero-indicators .num{ color:var(--ink) }
.hero[data-layout="split"] .hero-indicators .dot{ background: var(--line-strong) }
.hero[data-layout="split"] .hero-indicators .dot.active{ background:var(--ink) }

/* HERO C — Mosaic */
.hero[data-layout="mosaic"]{ background:#fff; color:var(--ink) }
.hero[data-layout="mosaic"] .hero-slide{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(8px, 1vw, 14px);
  padding: clamp(60px, 10vh, 110px) var(--gutter) clamp(60px, 8vh, 80px);
  min-height: 100vh;
  max-width: var(--container-wide);
  margin: 0 auto;
}
.hero[data-layout="mosaic"] .mosaic-text{
  grid-column: 1 / span 5;
  display:flex; flex-direction:column; justify-content:center;
  padding: 40px 20px 40px 0;
}
.hero[data-layout="mosaic"] .mosaic-text .hero-eyebrow{ color:var(--ink-3) }
.hero[data-layout="mosaic"] .mosaic-text .hero-eyebrow::before{ background:var(--ink-3) }
.hero[data-layout="mosaic"] .mosaic-text h1{ color:var(--ink); font-size: clamp(32px, 4.4vw, 60px) }
.hero[data-layout="mosaic"] .mosaic-text .hero-sub{ color:var(--ink-3) }
.hero[data-layout="mosaic"] .mosaic-img{ overflow:hidden }
.hero[data-layout="mosaic"] .mosaic-img img{ width:100%; height:100%; object-fit:cover }
.hero[data-layout="mosaic"] .m1{ grid-column: 6 / span 4; aspect-ratio: 3/4 }
.hero[data-layout="mosaic"] .m2{ grid-column: 10 / span 3; aspect-ratio: 3/5; margin-top: 40px }
.hero[data-layout="mosaic"] .m3{ grid-column: 6 / span 3; aspect-ratio: 4/3; margin-top: 14px }
.hero[data-layout="mosaic"] .m4{ grid-column: 9 / span 4; aspect-ratio: 5/4; margin-top: -120px; align-self:end }
.hero[data-layout="mosaic"] .hero-indicators{display:none}

/* ============ Intro / Identity ============ */
.identity{
  padding: clamp(100px, 14vw, 180px) 0;
}
.identity-grid{
  display:grid;
  grid-template-columns: 3fr 5fr;
  gap: clamp(40px, 6vw, 110px);
  align-items: start;
}
.identity .label-num{
  font-family: var(--mono); font-size:14px; letter-spacing:.28em; color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 500;
}
.identity h2{
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  letter-spacing:.06em;
  line-height:1.65;
  margin-top: 32px;
}
.identity h2 .en{
  display:block;
  font-family: var(--serif);
  font-style: italic;
  font-weight:400;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--ink-3);
  letter-spacing:.04em;
  margin-bottom: 18px;
}
.identity-body p{
  font-size: 15px;
  color: var(--ink-2);
  line-height: 2.1;
  margin-bottom: 24px;
}
.identity-meta{
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.identity-meta dt{
  font-family: var(--mono); font-size:10px; letter-spacing:.24em; color:var(--ink-4);
  text-transform:uppercase; margin-bottom: 8px;
}
.identity-meta dd{
  margin:0; font-size: 22px; font-weight: 500; letter-spacing:.04em; color: var(--ink);
  line-height: 1.35;
}
.identity-meta dd.two-lines{
  font-size: 17px;
  line-height: 1.5;
}
.identity-meta dd .unit{ font-size: 12px; color: var(--ink-3); margin-left: 6px; font-weight:400 }

/* ============ Business (Services list) ============ */
.business{
  background: var(--bg-soft);
  padding: clamp(100px, 14vw, 180px) 0;
}
.business-head{
  display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;
  margin-bottom: clamp(60px, 8vw, 90px);
}
.business-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
.business-item{
  border-bottom: 1px solid var(--line-strong);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 24px;
  align-items: center;
  cursor: pointer;
  transition: padding var(--t-fast), background var(--t-fast);
}
/* 縦の区切り線（左列のアイテムの右側に配置） */
.business-item:nth-child(odd){
  border-right: 1px solid var(--line-strong);
}
.business-item:hover{ background: rgba(0,0,0,0.02); }
.business-item .b-num{
  font-family: var(--mono); font-size: 12px; letter-spacing:.2em; color: var(--ink-3);
}
.business-item h3{
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight:500;
  letter-spacing:.06em;
  line-height: 1.4;
}
.business-item h3 .en{
  display:block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 6px;
  letter-spacing:.04em;
}
.business-item .b-desc{ display: none; } /* 説明文は非表示 */
.business-item .b-arrow{
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.business-item:hover .b-arrow{
  background: var(--ink); color:#fff; border-color: var(--ink);
}

/* ============ Works grid (TOP) ============ */
.works{ padding: clamp(100px, 14vw, 180px) 0; }
.works-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap: 40px;
  margin-bottom: clamp(50px, 7vw, 80px);
  flex-wrap: wrap;
}
.works-head .right a{
  display:inline-flex; align-items:center; gap: 12px;
  font-size: 12px; letter-spacing:.16em; padding: 14px 22px;
  border: 1px solid var(--ink);
  transition: background var(--t-fast), color var(--t-fast);
}
.works-head .right a:hover{ background: var(--ink); color:#fff }
.works-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.8vw, 28px) clamp(14px, 1.8vw, 24px);
}
.work-card{
  cursor: pointer;
  display:block;
}
.work-card .img-wrap{
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
.work-card .img-wrap img{
  width:100%; height:100%; object-fit:cover;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .img-wrap img{ transform: scale(1.04) }
.work-card .meta{
  margin-top: 18px;
  display:flex; justify-content:space-between; align-items:flex-end; gap: 16px;
}
.work-card .meta h4{
  font-size: 15px; font-weight: 500; letter-spacing:.06em; line-height:1.6;
}
.work-card .meta .tag{
  font-family: var(--mono); font-size: 10px; letter-spacing:.24em; color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.work-card .meta .loc{
  font-family: var(--mono); font-size: 10px; letter-spacing:.18em; color: var(--ink-4);
  margin-top: 4px;
}

/* Featured grid pattern */
.works-grid .work-card:nth-child(1){ grid-column: 1 / span 7; }
.works-grid .work-card:nth-child(1) .img-wrap{ aspect-ratio: 16/10 }
.works-grid .work-card:nth-child(2){ grid-column: 8 / span 5; margin-top: 80px; }
.works-grid .work-card:nth-child(2) .img-wrap{ aspect-ratio: 4/5 }
.works-grid .work-card:nth-child(3){ grid-column: 1 / span 4; margin-top: 40px; }
.works-grid .work-card:nth-child(3) .img-wrap{ aspect-ratio: 4/5 }
.works-grid .work-card:nth-child(4){ grid-column: 5 / span 4; }
.works-grid .work-card:nth-child(4) .img-wrap{ aspect-ratio: 1/1 }
.works-grid .work-card:nth-child(5){ grid-column: 9 / span 4; }
.works-grid .work-card:nth-child(5) .img-wrap{ aspect-ratio: 4/5 }
.works-grid .work-card:nth-child(6){ grid-column: 1 / span 6; margin-top: 40px; }
.works-grid .work-card:nth-child(6) .img-wrap{ aspect-ratio: 5/4 }
.works-grid .work-card:nth-child(7){ grid-column: 7 / span 6; margin-top: 40px; }
.works-grid .work-card:nth-child(7) .img-wrap{ aspect-ratio: 5/4 }

/* ============ Strengths ============ */
.strengths{
  background: var(--ink);
  color: #fff;
  padding: clamp(100px, 14vw, 180px) 0;
}
.strengths .section-eyebrow{ color: rgba(255,255,255,.55) }
.strengths .section-title{ color: #fff }
.strengths .section-lead{ color: rgba(255,255,255,.7) }
.strengths-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.12);
  margin-top: clamp(50px, 7vw, 80px);
  border: 1px solid rgba(255,255,255,.12);
}
.strength-card{
  background: var(--ink);
  padding: 56px 40px;
  display:flex; flex-direction:column; gap: 24px;
}
.strength-card .s-num{
  font-family: var(--serif); font-style: italic; font-size: 42px; color: rgba(255,255,255,.45);
  line-height:1;
}
.strength-card h3{
  font-size: 22px; font-weight:500; letter-spacing:.08em; line-height:1.6;
}
.strength-card h3 .en{
  display:block; font-family: var(--mono); text-transform: uppercase;
  font-size: 10px; letter-spacing:.32em; color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}
.strength-card p{
  font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 2;
}

/* ============ Partner CTA (TOP highlight) ============ */
.partner-cta{
  padding: 0;
  background: var(--bg);
}
.partner-cta-inner{
  display:grid; grid-template-columns: 6fr 6fr;
  min-height: 620px;
}
.partner-cta-img{
  background-size: cover; background-position: center;
}
.partner-cta-text{
  padding: clamp(80px, 10vw, 120px) clamp(40px, 6vw, 90px);
  display:flex; flex-direction:column; justify-content:center;
  background: var(--bg-warm);
}
.partner-cta-text .section-eyebrow{ color: var(--ink-3) }

/* タイトル直下のプライマリボタン */
.partner-cta-text .btns-primary-only{
  margin-top: 0;
  margin-bottom: 32px;
}
/* 説明文の後のセカンダリボタン */
.partner-cta-text .btns-secondary{
  margin-top: 0;
}
/* タイトル直下にボタンが来る構成のため、h2の下マージンを詰める */
.partner-cta-text h2{
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight:500; letter-spacing:.06em; line-height:1.5;
  margin-bottom: 20px;
}
.partner-cta-text h2 .en{
  display:block; font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px); color: var(--ink-3); margin-bottom: 14px;
  letter-spacing:.04em;
}
.partner-cta-text p{
  font-size: 14.5px; color: var(--ink-2); line-height: 2.1; margin-bottom: 36px;
  max-width: 480px;
}
.partner-cta-text .btns{ display:flex; gap: 14px; flex-wrap:wrap }
.btn-primary{
  display:inline-flex; align-items:center; gap: 14px;
  padding: 18px 32px; background: var(--ink); color:#fff;
  font-size:12px; letter-spacing:.2em; font-weight:500;
  transition: background var(--t-fast);
}
.btn-primary:hover{ background:#000 }
.btn-line{
  display:inline-flex; align-items:center; gap: 14px;
  padding: 18px 32px; border: 1px solid var(--ink); color: var(--ink);
  font-size:12px; letter-spacing:.2em; font-weight:500;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-line:hover{ background: var(--ink); color:#fff }
.btn-link{
  display:inline-flex; align-items:center; gap: 12px;
  font-size: 12px; letter-spacing:.2em;
  padding-bottom: 4px; border-bottom: 1px solid var(--ink);
}

/* ============ Recruit teaser ============ */
.recruit-teaser{
  padding: clamp(100px, 14vw, 180px) 0;
}
.recruit-teaser-inner{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px);
  align-items:center;
}
.recruit-teaser-img{ aspect-ratio: 4/3; overflow:hidden }
.recruit-teaser-img img{width:100%; height:100%; object-fit:cover}
.recruit-teaser h2{
  font-size: clamp(26px, 3vw, 40px); font-weight:500; letter-spacing:.06em; line-height:1.55;
  margin-bottom: 24px;
}
.recruit-teaser h2 .en{
  display:block; font-family: var(--serif); font-style:italic;
  font-size: clamp(18px, 2vw, 26px); color: var(--ink-3); margin-bottom: 12px;
  letter-spacing:.04em;
}

/* ============ News ============ */
.news-section{
  padding: clamp(80px, 12vw, 140px) 0;
  background: var(--bg-soft);
}
.news-head{
  display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:30px;
  margin-bottom: clamp(40px, 6vw, 70px);
}
.news-list{ border-top: 1px solid var(--line-strong); }
.news-list a,
.news-list .news-static{
  display:grid;
  grid-template-columns: 120px 130px 1fr auto;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-strong);
  align-items:center;
  transition: padding var(--t-fast);
}
.news-list a:hover{ padding-left: 8px }
.news-list .news-static{ cursor: default; }
.news-list .date{font-family: var(--mono); font-size: 12px; letter-spacing:.14em; color: var(--ink-3)}
.news-list .cat{
  font-size: 10px; letter-spacing:.2em;
  padding: 5px 12px; border: 1px solid var(--line-strong); color: var(--ink-3);
  text-align:center; width: max-content;
}
.news-list .title{font-size: 14.5px; color: var(--ink)}
.news-list .arrow{ color: var(--ink-3); font-family: var(--mono); font-size: 14px }

/* News detail page */
.page-news-detail .news-detail-meta{
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 18px;
  font-size: 11px;
}
.page-news-detail .news-detail-meta .date{
  font-family: var(--mono); letter-spacing: .14em; color: var(--ink-3);
}
.page-news-detail .news-detail-meta .cat{
  padding: 5px 12px; border: 1px solid var(--line-strong); color: var(--ink-3);
  letter-spacing: .2em;
}
.news-detail-body p{
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 2.1;
  margin-bottom: 22px;
}
.news-detail-body p:last-child{ margin-bottom: 0; }

/* ============ Company strip (footer area) ============ */
.company-strip{
  padding: clamp(80px, 12vw, 140px) 0;
}
.company-strip-grid{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 90px); align-items:start;
}
.company-strip .section-title{ margin-bottom: 30px }
.company-info-table{
  border-top: 1px solid var(--line-strong);
}
.company-info-table .row{
  display:grid; grid-template-columns: 180px 1fr; gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items:start;
}
.company-info-table dt{
  font-family: var(--mono); font-size:10px; letter-spacing:.24em; color: var(--ink-3);
  text-transform:uppercase; padding-top: 4px;
}
.company-info-table dd{ margin:0; font-size: 14px; color: var(--ink); line-height: 1.9 }

/* ============ FOOTER ============ */
.site-footer{
  background: #0a0a0a;
  color: #cfcfcf;
  padding: clamp(70px, 10vw, 110px) 0 24px;
}
.footer-inner{
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 80px);
}
.footer-brand .footer-logo{
  display:flex; flex-direction:column; line-height:1.2; margin-bottom: 28px;
}
.footer-brand .footer-logo .logo-en{ color:#fff; font-size: 18px }
.footer-brand .footer-logo .logo-jp{ color: rgba(255,255,255,.55); margin-top:6px }
.footer-brand address{
  font-style: normal; font-size: 13px; color: rgba(255,255,255,.65); line-height: 2;
}
.footer-license{ font-size: 11px; color: rgba(255,255,255,.4); margin-top: 14px; letter-spacing:.08em }
.footer-group{ font-size: 12px; color: rgba(255,255,255,.55); margin-top: 20px; letter-spacing:.06em; display: flex; align-items: center; gap: 12px; }
.footer-group-label{
  font-family: var(--mono); font-size: 10px; letter-spacing:.24em; color: rgba(255,255,255,.4);
  text-transform: uppercase;
}
.footer-group a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.footer-group a:hover{ color: #fff; border-bottom-color: #fff; }
.footer-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px }
.footer-col h4{
  font-family: var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 22px;
}
.footer-col ul li{ margin-bottom: 12px }
.footer-col a{ font-size: 13px; color: rgba(255,255,255,.85); transition: color var(--t-fast) }
.footer-col a:hover{ color:#fff }
.footer-bottom{
  max-width: var(--container-wide);
  margin: 70px auto 0;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-size: 11px; color: rgba(255,255,255,.4); letter-spacing:.12em;
}
.footer-bottom .footer-meta{ font-family: var(--mono); text-transform: uppercase }

/* ============ Page Title Header (inner pages) ============ */
.page-head{
  padding: clamp(80px, 11vw, 140px) 0 clamp(60px, 8vw, 90px);
  border-bottom: 1px solid var(--line);
}
.page-head .breadcrumbs{
  font-size: 12px; letter-spacing:.08em; color: var(--ink-4);
  margin-bottom: 28px;
}
.page-head .breadcrumbs a{ color: var(--ink-3) }
.page-head .breadcrumbs a:hover{ color: var(--ink); }
.page-head h1{
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  letter-spacing:.06em;
  line-height:1.3;
}
.page-head h1 .en{
  display:block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 32px);
  color: var(--ink-3);
  margin-bottom: 16px;
  letter-spacing:.04em;
}
.page-head .lead{
  margin-top: 32px;
  max-width: 880px;
  font-size: 15px;
  color: var(--ink-3);
  line-height: 2.1;
}

/* ============ About page ============ */
.about-message{
  padding: clamp(80px, 11vw, 140px) 0;
}
.about-message-grid{
  display:grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 100px);
  align-items:start;
}
.about-message-img{ aspect-ratio: 3/4; overflow:hidden; background: var(--bg-soft) }
.about-message-img img{width:100%; height:100%; object-fit:cover}
.about-message h2{
  font-size: clamp(24px, 2.6vw, 34px); font-weight:500; letter-spacing:.08em;
  line-height: 1.7; margin-bottom: 36px;
}
.about-message h2 .en{
  display:block; font-family: var(--serif); font-style:italic; font-size: 18px;
  color: var(--ink-3); margin-bottom: 14px; letter-spacing:.04em;
}
.about-message p{
  font-size: 14.5px; color: var(--ink-2); line-height: 2.1; margin-bottom: 20px;
}
.about-message .signature{
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  display:flex; align-items:baseline; gap: 18px;
}
.about-message .signature .role{ font-size: 11px; letter-spacing:.2em; color: var(--ink-3) }
.about-message .signature .name{ font-size: 20px; letter-spacing:.08em; font-weight:500 }

.about-philosophy{
  background: var(--bg-soft);
  padding: clamp(80px, 11vw, 140px) 0;
}
.philosophy-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.philosophy-card{
  background: var(--bg);
  padding: 60px 40px;
}
.philosophy-card .p-num{
  font-family:var(--mono); font-size: 11px; letter-spacing:.32em; color: var(--ink-4);
  margin-bottom: 32px; display:block;
}
.philosophy-card h3{
  font-size: 22px; font-weight:500; letter-spacing:.08em;
  margin-bottom: 24px;
}
.philosophy-card h3 .en{
  display:block; font-family: var(--serif); font-style:italic; font-size: 14px;
  color: var(--ink-3); margin-bottom: 10px;
}
.philosophy-card p{
  font-size: 13.5px; color: var(--ink-2); line-height: 2;
}

.about-history{
  padding: clamp(80px, 11vw, 140px) 0;
}
.history-list{ border-top: 1px solid var(--line-strong) }
.history-list .h-row{
  display:grid; grid-template-columns: 200px 1fr; gap: 32px;
  padding: 24px 0; border-bottom: 1px solid var(--line);
}
.history-list .h-year{
  font-family: var(--mono); font-size: 14px; letter-spacing:.12em; color: var(--ink);
}
.history-list .h-desc{ font-size: 14px; color: var(--ink-2); line-height: 1.9 }

/* ============ Services page ============ */
.service-detail{
  padding: clamp(80px, 11vw, 140px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.service-detail:nth-child(even){ background: var(--bg-soft); border-bottom-color: transparent }
.service-detail-grid{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px);
  align-items:center;
}
.service-detail:nth-child(even) .service-detail-grid{ grid-template-columns: 7fr 5fr; direction:rtl }
.service-detail:nth-child(even) .service-detail-grid > *{direction:ltr}
.service-detail-img{ aspect-ratio: 3/2; overflow:hidden }
.service-detail-img img{width:100%; height:100%; object-fit:cover}
.service-detail .s-num{
  font-family: var(--mono); font-size: 11px; letter-spacing:.32em; color: var(--ink-3);
  margin-bottom: 20px; display:inline-block;
}
.service-detail h2{
  font-size: clamp(22px, 2.4vw, 30px); font-weight:500; letter-spacing:.04em;
  margin-bottom: 24px;
  line-height: 1.55;
}
.service-detail h2 .en{
  display:block; font-family: var(--serif); font-style:italic;
  font-size: clamp(18px, 2vw, 24px); color: var(--ink-3); margin-bottom: 12px;
  letter-spacing:.04em;
}
.service-detail .desc{ font-size: 14px; color: var(--ink-2); line-height: 2.05; margin-bottom: 28px }
.service-detail .scope{
  border-top: 1px solid var(--line-strong);
  padding-top: 24px;
}
.service-detail .scope h4{
  font-family: var(--mono); font-size: 10px; letter-spacing:.28em; color: var(--ink-3);
  text-transform: uppercase; margin-bottom: 18px;
}
.service-detail .scope ul{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px 32px;
}
.service-detail .scope li{
  font-size: 13.5px; color: var(--ink-2); padding-left: 18px; position:relative;
}
.service-detail .scope li::before{
  content:""; position:absolute; left:0; top: 13px; width: 8px; height:1px; background: var(--ink);
}

/* ============ Strengths page ============ */
.strengths-page-item{
  padding: clamp(80px, 11vw, 140px) 0;
  border-bottom: 1px solid var(--line);
}
.strengths-page-item:last-child{ border-bottom: 0 }
.strengths-page-grid{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 90px);
  align-items:start;
}
.strengths-page-item:nth-child(even) .strengths-page-grid{ grid-template-columns: 7fr 5fr }
.strengths-page-item:nth-child(even) .img-wrap{ order: 2 }
.strengths-page-item:nth-child(even) .img-wrap + div{ order: 1 }
.strengths-page-item .img-wrap{ aspect-ratio: 4/3; overflow:hidden }
.strengths-page-item .img-wrap img{width:100%; height:100%; object-fit:cover}
.strengths-page-item .s-num{
  font-family: var(--serif); font-style:italic; font-size: 48px; color: var(--ink-4);
  line-height:1; margin-bottom: 20px; display:inline-block;
}
.strengths-page-item h2{
  font-size: clamp(26px, 3vw, 36px); font-weight:500; letter-spacing:.06em;
  line-height:1.55; margin-bottom: 28px;
}
.strengths-page-item h2 .en{
  display:block; font-family: var(--mono); text-transform:uppercase; font-size: 11px;
  color: var(--ink-3); letter-spacing:.28em; margin-bottom: 14px;
}
.strengths-page-item p{
  font-size: 14.5px; color: var(--ink-2); line-height: 2.1;
}

/* ============ Works page ============ */
.works-filter{
  display:flex; gap: 8px; flex-wrap:wrap;
  padding: 32px 0 50px;
  border-bottom: 1px solid var(--line);
}
.works-filter button{
  padding: 10px 22px;
  border: 1px solid var(--line-strong);
  font-size: 12px; letter-spacing:.14em; color: var(--ink-3);
  transition: all var(--t-fast);
}
.works-filter button.active, .works-filter button:hover{
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.works-page-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 50px) clamp(20px, 2.4vw, 32px);
  padding: clamp(50px, 7vw, 80px) 0;
}
.works-page-grid .work-card .img-wrap{ aspect-ratio: 4/3 }

/* ============ Work detail page ============ */
.work-detail-hero{
  aspect-ratio: 16/9;
  overflow:hidden;
  background: var(--bg-soft);
}
.work-detail-hero img{width:100%; height:100%; object-fit:cover}
.work-detail-body{
  padding: clamp(60px, 8vw, 100px) 0;
}
.work-detail-head{
  margin-bottom: clamp(28px, 3vw, 40px);
  padding-bottom: 0;
  border-bottom: 0;
}
.work-detail-title{
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.work-detail-title .en{
  display:block;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .28em;
  margin-bottom: 14px;
  white-space: normal;
}

.work-detail-grid{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 90px);
  align-items: stretch;
}
.work-detail-grid > div{
  display: flex;
  flex-direction: column;
}
.work-detail-info{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.work-detail-info .row:last-child{
  flex: 1;
  border-bottom: 0;
}
.work-detail-text{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.work-detail-text .wd-block:last-child{
  flex: 1;
}
.work-detail-info{
  border-top: none !important;
}
.work-detail-info .row{
  display:grid; grid-template-columns: 160px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line); align-items:start;
}
.work-detail-info .row:first-child{
  padding-top: 0;
  border-top: none;
}
.work-detail-info dt{
  font-family: var(--mono); font-size: 10px; letter-spacing:.24em; color: var(--ink-3);
  text-transform:uppercase; padding-top: 4px;
}
.work-detail-info dd{ margin:0; font-size: 13.5px; color: var(--ink); line-height: 1.9 }
.work-detail-text p{ font-size: 14px; color: var(--ink-2); line-height: 2.1; margin: 0 }
.work-detail-text .wd-block{
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.work-detail-text .wd-block:first-child{ padding-top: 0; border-bottom: 1px solid var(--line); }
.work-detail-text .wd-block:last-child{ border-bottom: 0; padding-bottom: 0 }
.wd-block-title{
  display:flex; align-items:baseline; gap: 18px;
  font-size: 14px; font-weight: 500; letter-spacing:.06em; line-height: 1.4;
  margin-bottom: 18px;
  color: var(--ink);
}
.wd-block-title .en{
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing:.28em;
  color: var(--ink-3);
  font-weight: 500;
}
.wd-list{
  font-size: 14px; color: var(--ink-2); line-height: 2;
  display: flex; flex-direction: column; gap: 8px;
}
.wd-list li{
  position: relative; padding-left: 22px;
}
.wd-list li::before{
  content:""; position:absolute; left: 0; top: 17px;
  width: 12px; height:1px; background: var(--ink);
}
.work-detail-gallery{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
  padding: clamp(40px, 5vw, 80px) 0 clamp(80px, 11vw, 140px);
  align-items: start;
}
.work-detail-gallery .g{
  overflow:hidden;
  position: relative;
}
.work-detail-gallery .g img{width:100%; height:100%; object-fit:cover; display:block}
.work-detail-gallery .g-caption{
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(20, 20, 20, .72);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 2;
}
/* デフォルトクラス（4枚配置パターン用） */
.work-detail-gallery .g1{ aspect-ratio: 16/10 }
.work-detail-gallery .g2{ aspect-ratio: 4/5 }
.work-detail-gallery .g3{ aspect-ratio: 4/5 }
.work-detail-gallery .g4{ aspect-ratio: 16/10 }

/* ▼ 枚数別レイアウト（data-count による分岐） */

/* 1枚：フル幅で大判 */
.work-detail-gallery[data-count="1"] .g{
  grid-column: 1 / -1; aspect-ratio: 16/9;
}

/* 2枚：横並びの大判2枚 */
.work-detail-gallery[data-count="2"] .g{ aspect-ratio: 4/3; }
.work-detail-gallery[data-count="2"] .g:nth-child(1){ grid-column: 1 / span 6; }
.work-detail-gallery[data-count="2"] .g:nth-child(2){ grid-column: 7 / span 6; }

/* 3枚：1段目 大判フル / 2段目 横2枚 */
.work-detail-gallery[data-count="3"] .g:nth-child(1){
  grid-column: 1 / -1; aspect-ratio: 16/9;
}
.work-detail-gallery[data-count="3"] .g:nth-child(2){
  grid-column: 1 / span 6; aspect-ratio: 4/3;
}
.work-detail-gallery[data-count="3"] .g:nth-child(3){
  grid-column: 7 / span 6; aspect-ratio: 4/3;
}

/* 4枚（既存パターン）：横長+縦長 / 縦長+横長 */
.work-detail-gallery[data-count="4"] .g:nth-child(1){ grid-column: 1 / span 7; grid-row: 1; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="4"] .g:nth-child(2){ grid-column: 8 / span 5; grid-row: 1; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="4"] .g:nth-child(3){ grid-column: 1 / span 5; grid-row: 2; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="4"] .g:nth-child(4){ grid-column: 6 / span 7; grid-row: 2; aspect-ratio: 16/10 }

/* 5枚：4枚パターン+全幅1枚 */
.work-detail-gallery[data-count="5"] .g:nth-child(1){ grid-column: 1 / span 7; grid-row: 1; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="5"] .g:nth-child(2){ grid-column: 8 / span 5; grid-row: 1; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="5"] .g:nth-child(3){ grid-column: 1 / span 5; grid-row: 2; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="5"] .g:nth-child(4){ grid-column: 6 / span 7; grid-row: 2; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="5"] .g:nth-child(5){ grid-column: 1 / -1; grid-row: 3; aspect-ratio: 21/9 }

/* 6枚：3段×2列バランス配置 */
.work-detail-gallery[data-count="6"] .g:nth-child(1){ grid-column: 1 / span 7; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="6"] .g:nth-child(2){ grid-column: 8 / span 5; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="6"] .g:nth-child(3){ grid-column: 1 / span 5; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="6"] .g:nth-child(4){ grid-column: 6 / span 7; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="6"] .g:nth-child(5){ grid-column: 1 / span 6; aspect-ratio: 4/3 }
.work-detail-gallery[data-count="6"] .g:nth-child(6){ grid-column: 7 / span 6; aspect-ratio: 4/3 }

/* 7枚：6枚パターン+全幅1枚 */
.work-detail-gallery[data-count="7"] .g:nth-child(1){ grid-column: 1 / span 7; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="7"] .g:nth-child(2){ grid-column: 8 / span 5; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="7"] .g:nth-child(3){ grid-column: 1 / span 5; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="7"] .g:nth-child(4){ grid-column: 6 / span 7; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="7"] .g:nth-child(5){ grid-column: 1 / span 6; aspect-ratio: 4/3 }
.work-detail-gallery[data-count="7"] .g:nth-child(6){ grid-column: 7 / span 6; aspect-ratio: 4/3 }
.work-detail-gallery[data-count="7"] .g:nth-child(7){ grid-column: 1 / -1; aspect-ratio: 21/9 }

/* 8枚：4段×バランス配置 */
.work-detail-gallery[data-count="8"] .g:nth-child(1){ grid-column: 1 / span 7; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="8"] .g:nth-child(2){ grid-column: 8 / span 5; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="8"] .g:nth-child(3){ grid-column: 1 / span 5; aspect-ratio: 4/5 }
.work-detail-gallery[data-count="8"] .g:nth-child(4){ grid-column: 6 / span 7; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="8"] .g:nth-child(5){ grid-column: 1 / span 6; aspect-ratio: 4/3 }
.work-detail-gallery[data-count="8"] .g:nth-child(6){ grid-column: 7 / span 6; aspect-ratio: 4/3 }
.work-detail-gallery[data-count="8"] .g:nth-child(7){ grid-column: 1 / span 7; aspect-ratio: 16/10 }
.work-detail-gallery[data-count="8"] .g:nth-child(8){ grid-column: 8 / span 5; aspect-ratio: 4/5 }

/* ============ Partners page (most important) ============ */
.partners-hero{
  position: relative;
  aspect-ratio: 21/9;
  max-height: 560px;
  overflow:hidden;
  background:#0a0a0a;
}
.partners-hero img{ width:100%; height:100%; object-fit:cover; opacity:.7 }
.partners-hero .copy{
  position:absolute; left: var(--gutter); right: var(--gutter); bottom: 60px; color:#fff;
  max-width: var(--container-wide); margin: 0 auto;
}
.partners-hero .copy .breadcrumbs{ color: rgba(255,255,255,.5) }
.partners-hero .copy h1 .en{ color: rgba(255,255,255,.7) }
.partners-hero .copy h1{ color: #fff }

.partners-intro{ padding: clamp(80px, 11vw, 140px) 0 }
.partners-intro-grid{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); align-items:center;
}
.partners-intro-img-wrap{ aspect-ratio: 3/2; overflow:hidden }
.partners-intro-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block }
.partners-intro h2{ font-size: clamp(22px, 2.6vw, 32px); line-height:1.6; letter-spacing:.04em }
.partners-intro p{ font-size: 14px; color: var(--ink-2); line-height: 2.05; margin-bottom: 22px }

.partners-types{
  background: var(--bg-soft);
  padding: clamp(80px, 11vw, 140px) 0;
}
.partners-types-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  margin-top: 50px;
}
.partner-type-card{
  background: var(--bg);
  padding: 50px 40px;
  display:grid; grid-template-columns: 60px 1fr; gap: 24px; align-items:start;
}
.partner-type-card .num{ font-family: var(--serif); font-style:italic; font-size: 36px; color: var(--ink-4); line-height:1 }
.partner-type-card h3{ font-size: 18px; font-weight:500; letter-spacing:.08em; margin-bottom: 12px; line-height:1.6 }
.partner-type-card h3 .en{ display:block; font-family: var(--mono); font-size: 10px; letter-spacing:.24em; color: var(--ink-3); margin-bottom: 8px }
.partner-type-card p{ font-size: 13px; color: var(--ink-3); line-height: 1.95 }

.partners-merit{
  padding: clamp(80px, 11vw, 140px) 0;
}
.merit-list{ border-top: 1px solid var(--line-strong) }
.merit-list .m-row{
  display:grid; grid-template-columns: 80px 1fr 2fr; gap: 32px;
  padding: 40px 0; border-bottom: 1px solid var(--line-strong);
  align-items: start;
}
.merit-list .m-num{ font-family: var(--mono); font-size: 11px; letter-spacing:.2em; color: var(--ink-3); padding-top: 6px }
.merit-list h3{ font-size: 22px; font-weight:500; letter-spacing:.06em; line-height:1.5 }
.merit-list p{ font-size: 14px; color: var(--ink-2); line-height: 2 }

.partners-cta{
  background: var(--ink);
  color: #fff;
  padding: clamp(80px, 11vw, 140px) 0;
  text-align:center;
}
.partners-cta h2{
  font-size: clamp(26px, 3vw, 40px); font-weight:400; letter-spacing:.08em; margin-bottom: 18px;
}
.partners-cta h2 .en{
  display:block; font-family: var(--serif); font-style:italic; font-size: clamp(18px, 2vw, 26px);
  color: rgba(255,255,255,.6); margin-bottom: 14px; letter-spacing:.04em;
}
.partners-cta p{ color: rgba(255,255,255,.7); font-size: 14px; line-height: 2; margin-bottom: 40px; max-width: 580px; margin-left:auto; margin-right:auto }
.partners-cta .btns{ display:flex; gap: 14px; justify-content:center; flex-wrap:wrap }
.partners-cta .btn-primary{ background:#fff; color: var(--ink) }
.partners-cta .btn-primary:hover{ background: #f0f0f0 }
.partners-cta .btn-line{ border-color: rgba(255,255,255,.5); color:#fff }
.partners-cta .btn-line:hover{ background:#fff; color: var(--ink); border-color:#fff }

/* ============ Recruit page ============ */
.recruit-message{ padding: clamp(80px, 11vw, 140px) 0 }
.recruit-message-grid{
  display:grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 80px); align-items:center;
}
.recruit-message-img{ aspect-ratio: 3/2; overflow:hidden }
.recruit-message-img img{width:100%; height:100%; object-fit:cover}
.recruit-message h2{ font-size: clamp(22px, 2.6vw, 32px); font-weight:500; letter-spacing:.05em; line-height:1.6; margin-bottom: 24px }
.recruit-message h2 .en{
  display:block; font-family: var(--serif); font-style:italic; font-size: clamp(16px, 1.8vw, 22px);
  color: var(--ink-3); margin-bottom: 14px; letter-spacing:.04em;
}
.recruit-message p{ font-size: 14px; color: var(--ink-2); line-height: 2.05; margin-bottom: 18px }
.recruit-message-btns{
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 32px;
}
.recruit-message-btns .btn-primary svg{
  margin-left: 4px;
}

.recruit-positions{
  background: var(--bg-soft);
  padding: clamp(80px, 11vw, 140px) 0;
}
.position-list{ margin-top: 50px; display:flex; flex-direction:column; gap: 30px }
.position-card{
  background: var(--bg);
  padding: 50px 50px;
  display:grid; grid-template-columns: 2fr 5fr; gap: clamp(30px, 4vw, 60px);
  border: 1px solid var(--line);
}
.position-card h3{ font-size: 22px; font-weight: 500; letter-spacing:.08em; line-height:1.5; margin-top: 12px; margin-bottom: 10px }
.position-card .p-num{
  display: inline-block;
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: .08em;
  color: var(--ink-4);
  font-weight: 400;
  line-height: 1;
}
.position-card .role{ font-family: var(--mono); font-size: 11px; letter-spacing:.24em; color: var(--ink-3); text-transform: uppercase }
.position-card dl{ border-top: 1px solid var(--line) }
.position-card .row{
  display:grid; grid-template-columns: 130px 1fr; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.position-card dt{
  font-family: var(--mono); font-size: 10px; letter-spacing:.24em; color: var(--ink-3);
  text-transform:uppercase; padding-top: 4px;
}
.position-card dd{ margin:0; font-size: 13.5px; color: var(--ink-2); line-height: 1.9 }

/* ============ News page ============ */
.news-page-list{ padding: clamp(60px, 8vw, 100px) 0 }

/* ============ Contact page ============ */
.contact-section{
  padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 11vw, 140px);
}
.contact-grid{
  display:grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 90px); align-items:start;
}
.contact-info h3{ font-size: 18px; font-weight:500; letter-spacing:.08em; margin-bottom: 18px }
.contact-info .tel{ font-family: var(--mono); font-size: 28px; letter-spacing:.06em; color: var(--ink); margin-bottom: 8px; font-weight:500 }
.contact-info .hours{ font-size: 12px; color: var(--ink-3); margin-bottom: 36px }
.contact-info .address{ font-size: 13px; color: var(--ink-2); line-height: 2; margin-bottom: 24px }

.contact-form{ border-top: 1px solid var(--line-strong) }
.contact-form .contact-website{
  position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;
}
.contact-form .form-row{
  display:grid; grid-template-columns: 200px 1fr; gap: 30px;
  padding: 24px 0; border-bottom: 1px solid var(--line); align-items:start;
}
.contact-form label{
  font-size: 13px; font-weight:500; letter-spacing:.06em; padding-top: 12px;
  display:flex; align-items:center; gap: 10px;
}
.contact-form label .req{
  font-size: 9px; padding: 2px 8px; background: var(--ink); color:#fff; letter-spacing:.18em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select{
  width:100%;
  border:0; border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font: inherit;
  font-size: 14px;
  background: transparent;
  outline: none;
  transition: border-color var(--t-fast);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  border-color: var(--ink);
}
.contact-form textarea{ min-height: 130px; resize: vertical }
.contact-form .radio-group{ display:flex; gap: 24px; flex-wrap:wrap; padding-top: 8px }
.contact-form .radio-group label{
  font-size: 13px; font-weight: 400; padding: 0;
  display:inline-flex; gap: 8px; align-items:center;
}
.contact-form .submit-row{ padding-top: 50px; text-align:center }
.contact-form .submit-row button{
  display:inline-flex; align-items:center; gap: 14px;
  padding: 20px 60px; background: var(--ink); color:#fff;
  font-size: 12px; letter-spacing:.24em; font-weight:500;
  transition: background var(--t-fast);
}
.contact-form .submit-row button:hover{ background:#000 }
.contact-form .submit-row button:disabled{ opacity:.55; cursor:not-allowed }
.contact-form .note{
  font-size: 12px; color: var(--ink-3); line-height: 2; margin-top: 24px;
  text-align:center;
}
.contact-form .thanks-message h2 {
  margin: 1em 0 .5em;
}

/* ============ Photo numbering badges (review only) ============ */
.photo-num-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 50;
  background: #ff3b30;
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 6px 10px;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  line-height: 1;
}
html.photo-numbering-on .partner-cta-img .photo-num-badge,
html.photo-numbering-on .partners-hero .photo-num-badge{
  top: 16px;
  left: 16px;
}

/* ============ Tweaks open button ============ */
/* 本番環境（Tweaks系ドメイン以外）ではTweaksを完全非表示 */
.is-production .tweaks-open-btn,
.is-production .tweaks-panel{ display:none !important; }

.tweaks-open-btn{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 199;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: background var(--t-fast), transform var(--t-fast);
}
.tweaks-open-btn:hover{ background: #000; transform: translateY(-1px); }
.tweaks-open-btn.is-active{ background: #fff; color: var(--ink); border: 1px solid var(--ink); }

@media (max-width: 600px){
  .tweaks-open-btn{ right: 12px; bottom: 12px; padding: 10px 14px; font-size: 10px; }
}

/* ============ Tweaks panel ============ */
.tweaks-panel{
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  background: #fff;
  border: 1px solid var(--line);
  width: 320px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.08);
  font-size: 13px;
}
.tweaks-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing:.24em; text-transform: uppercase;
}
.tweaks-head button{ font-size: 18px; color: var(--ink-3) }
.tweak-row label{
  display:block; font-size: 11px; letter-spacing:.16em; color: var(--ink-3); margin-bottom: 12px;
}
.tweak-options{ display:flex; flex-direction:column; gap: 6px }
.tweak-options button{
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align:left; font-size: 12.5px;
  transition: all var(--t-fast);
}
.tweak-options button.active{ background: var(--ink); color:#fff; border-color: var(--ink) }
.tweak-options button:hover:not(.active){ border-color: var(--ink) }

/* ============ Responsive ============ */
@media (max-width: 1280px){
  .site-header .header-partners,
  .site-header .header-contact{
    height: 38px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .08em;
  }
  .header-inner{ gap: 24px }
}
@media (max-width: 1150px){
  .primary-nav ul{ gap: 16px }
  .primary-nav a span{ display:none }
  .header-inner{ gap: 20px }
}
@media (max-width: 1040px){
  /* 協業パートナー募集のテキストを短縮 */
  .site-header .header-partners span{ display: none }
  .site-header .header-partners::after{
    content: "パートナー募集";
  }
  .site-header .header-partners{ padding: 0 12px }
  .site-header .header-contact{ padding: 0 12px }
}
@media (max-width: 900px){
  /* タブレット・スマホでもCTAボタンを表示（コンパクトサイズ） */
  .header-cta-group{
    display: flex !important;
    gap: 6px;
  }
  .site-header .header-partners,
  .site-header .header-contact{
    height: 36px;
    padding: 0 12px;
    font-size: 10px;
    letter-spacing: .04em;
  }
  /* 「協業パートナー募集」→「パートナー募集」に短縮 */
  .site-header .header-partners span{ display: none; }
  .site-header .header-partners::after{
    content: "パートナー募集";
  }
  .menu-toggle{ display:flex; position: relative; z-index: 102; }
  .header-inner{ gap: 12px }
  .header-end{ gap: 12px }

  /* Mobile nav: fullscreen overlay */
  .primary-nav{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* モバイルブラウザのアドレスバーを考慮 */
    background: #fff;
    padding: 70px var(--gutter) 20px;
    z-index: 90;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .35s ease, transform .35s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  body.mobile-menu-open .primary-nav{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .primary-nav ul{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    flex: 1;
    justify-content: center;
  }
  .primary-nav ul li{
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .primary-nav ul li:first-child{ border-top: 1px solid var(--line); }
  .primary-nav a{
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
    width: 100%;
    font-size: 15px;
    letter-spacing: .06em;
  }
  .primary-nav a span{
    display: inline-block;
    font-size: 9px;
    color: var(--ink-4);
  }
  .primary-nav a.active::after{ display: none; }
  .primary-nav a.nav-accent::before{ display: none; }
  .primary-nav a.nav-accent{
    background: #f6f5f2;
    padding: 12px 16px;
    margin: 0 -4px;
  }
  .primary-nav a[data-nav="contact"]{
    background: var(--ink);
    color: #fff !important;
    padding: 14px 16px;
    margin: 14px -4px 0;
    border-bottom: none;
    justify-content: center;
    font-weight: 500;
  }
  .primary-nav a[data-nav="contact"] span{
    color: rgba(255,255,255,.6);
  }
  .primary-nav ul li:has(a[data-nav="contact"]){
    border-bottom: none;
  }

  /* Hamburger to X animation */
  .menu-toggle span{
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
  }
  .menu-toggle.is-active span:first-child{
    transform: translateY(3px) rotate(45deg);
  }
  .menu-toggle.is-active span:last-child{
    transform: translateY(-3px) rotate(-45deg);
  }

  /* Lock body scroll when menu is open */
  body.mobile-menu-open{ overflow: hidden; }

  .identity-grid, .business-head, .recruit-teaser-inner, .partner-cta-inner,
  .company-strip-grid, .footer-inner, .about-message-grid, .service-detail-grid,
  .partners-intro-grid, .recruit-message-grid, .contact-grid, .work-detail-grid,
  .strengths-page-grid{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .service-detail:nth-child(even) .service-detail-grid{ direction:ltr }
  .strengths-page-item:nth-child(even) .img-wrap{ order: 0 }

  .partner-cta-inner{ grid-template-columns: 1fr }
  .partner-cta-img{ aspect-ratio: 16/10 }

  /* TOPページ 会社情報テーブル — タブレット時は1カラム縦積み */
  .company-info-table .row{
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 16px 0;
  }
  .company-info-table dt{ padding-top: 2px; }
  .company-info-table dd{ font-size: 13.5px; }

  .work-detail-title{ white-space: normal; word-break: auto-phrase; text-wrap: balance }

  .works-grid{ grid-template-columns: repeat(6, 1fr); gap: 24px }
  .works-grid .work-card:nth-child(n){ grid-column: 1 / -1; margin-top: 0 }
  .works-grid .work-card .img-wrap{ aspect-ratio: 4/3 }

  .strengths-grid, .philosophy-grid{ grid-template-columns: 1fr }
  .partners-types-grid{ grid-template-columns: 1fr }
  .works-page-grid{ grid-template-columns: 1fr 1fr }

  .footer-cols{ grid-template-columns: 1fr 1fr }
  /* タブレット・スマホ向けお知らせ 2行構造 */
  .news-list a,
  .news-list .news-static{
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "date  cat"
      "title title";
    gap: 8px 14px;
    padding: 20px 0;
    align-items: center;
  }
  .news-list a:hover{ padding-left: 0; }
  .news-list .date{ grid-area: date; font-size: 11px; }
  .news-list .cat{ grid-area: cat; justify-self: start; font-size: 10px; padding: 4px 10px; }
  .news-list .title{ grid-area: title; font-size: 14px; line-height: 1.6; margin-top: 4px; }
  .news-list .arrow{ display: none; }

  .hero[data-layout="split"] .hero-slide{ grid-template-columns: 1fr; height:auto }
  .hero[data-layout="split"] .hero-img-pane{ aspect-ratio: 16/10; height:auto }
  .hero[data-layout="split"] .hero-text-pane{ padding: 60px 24px }

  .hero[data-layout="mosaic"] .hero-slide{ grid-template-columns: 1fr; padding-top: 80px }
  .hero[data-layout="mosaic"] .mosaic-text{ grid-column: 1; padding: 0 }
  .hero[data-layout="mosaic"] .mosaic-img{ grid-column: 1; aspect-ratio: 4/3; margin: 0 !important }

  /* タブレットでは事業内容は2列を維持しつつコンパクト化 */
  .business-item{ padding: 30px 20px; gap: 16px; grid-template-columns: 44px 1fr auto; }
  .business-item h3{ font-size: 15px; }
  .business-item .b-arrow{ width: 34px; height: 34px; }
  .merit-list .m-row{ grid-template-columns: 1fr; gap: 12px }

  /* タブレット向け 募集職種カード */
  .position-card{ grid-template-columns: 1fr; padding: 30px 24px; gap: 20px; }
  .position-card .row{ grid-template-columns: 110px 1fr; gap: 14px; padding: 14px 0; }
  .position-card .row dt{ padding-top: 3px; }
  .contact-form .form-row{ grid-template-columns: 1fr; gap: 12px }
  .contact-form label{ padding-top: 0 }
}
@media (max-width: 600px){
  /* コンテナ余白調整 */
  :root{ --gutter: 20px; }

  /* グリッド全解除 */
  .works-page-grid{ grid-template-columns: 1fr }
  /* スマホでは3項目を横並びのまま維持し、余白のバランスを整える */
  .identity-meta{
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 32px;
    padding-top: 22px;
  }
  .identity-meta dt{ font-size: 9px; letter-spacing:.16em; margin-bottom: 6px; }
  .identity-meta dd{ font-size: 15px; letter-spacing:.02em; line-height: 1.4 }
  .identity-meta dd.two-lines{ font-size: 12px; line-height: 1.5 }
  .identity-meta dd .unit{ font-size: 10px; margin-left: 2px }
  .footer-cols{ grid-template-columns: 1fr; gap: 32px }
  .work-detail-gallery{ grid-template-columns: 1fr; gap: 12px }
  .work-detail-gallery .g{ grid-column: 1 !important; aspect-ratio: 4/3 }
  .tweaks-panel{ right: 12px; left: 12px; width: auto; bottom: 12px }

  /* ヘッダー */
  .site-header{ padding: 0 }
  .header-inner{ padding: 12px var(--gutter); gap: 8px; }
  .logo-mark img{ width: 26px !important; height: 26px !important; }
  .logo-en{ font-size: 13px !important; }
  .logo-jp{ font-size: 9px !important; }

  /* スマホ用CTAボタン（さらにコンパクト化） */
  .header-cta-group{ gap: 4px !important; }
  .site-header .header-partners,
  .site-header .header-contact{
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
    letter-spacing: .02em !important;
  }
  .site-header .header-contact svg{ display: none; }
  .header-end{ gap: 8px !important; }

  /* ページヘッダー */
  .page-head{
    padding: clamp(60px, 12vw, 90px) 0 clamp(40px, 8vw, 60px);
  }
  .page-head .lead{ font-size: 14px; line-height: 1.95; margin-top: 22px; }
  .page-head .breadcrumbs{ font-size: 11px; margin-bottom: 20px; }
  .page-head h1{
    font-size: 28px;
    letter-spacing: .04em;
    line-height: 1.4;
    text-wrap: pretty;
    word-break: auto-phrase;
  }
  .page-head h1 .en{
    font-size: 14px;
    margin-bottom: 10px;
  }

  /* セクション余白 */
  .about-message, .about-philosophy, .about-profile, .about-history,
  .services-detail, .strengths-page, .partners-intro, .partners-types,
  .partners-merit, .partners-cta, .recruit-message, .recruit-positions,
  .news-page, .contact-page{
    padding: 60px 0 !important;
  }

  /* 施工実績カード */
  .works-page-grid .work-card .img-wrap{ aspect-ratio: 4/3 }

  /* 会社概要表（会社案内ページ用） */
  .profile-table .row{
    grid-template-columns: 1fr; gap: 4px; padding: 14px 0;
  }
  .profile-table .row dt{ font-size: 11px; color: var(--ink-4); }
  .profile-table .row dd{ font-size: 14px; }

  /* TOPページ 会社情報テーブル */
  .company-info-table .row{
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
  .company-info-table dt{
    font-size: 10px;
    letter-spacing: .16em;
    color: var(--ink-4);
    padding-top: 0;
    margin-bottom: 2px;
  }
  .company-info-table dd{
    font-size: 13.5px;
    line-height: 1.75;
  }
  .company-strip .section-title{ margin-bottom: 20px; }
  .company-strip .section-lead{ font-size: 14px; line-height: 1.95; }

  /* 沿革 */
  .history-list .row{ grid-template-columns: 60px 1fr; gap: 16px; padding: 16px 0; }
  .history-list .row dt{ font-size: 13px; }
  .history-list .row dd{ font-size: 13px; line-height: 1.8; }

  /* お問い合わせフォーム */
  .contact-info h3{ font-size: 14px }
  .contact-info .tel{ font-size: 26px }
  .contact-form label{ font-size: 12px }
  .contact-form input, .contact-form textarea{ font-size: 14px; padding: 12px }
  .contact-form .form-submit button{ padding: 14px 32px; font-size: 12px }

  /* TOPページ 事業内容 — スマホでは1列縦並びに戻す */
  .business-list{
    grid-template-columns: 1fr !important;
  }
  .business-item{
    /* grid-template-columns: 44px 1fr !important; */
    gap: 16px !important;
    padding: 22px 4px !important;
    align-items: center;
    border-right: none !important;
  }
  .business-item:hover{ padding-left: 4px; background: transparent; }
  /* .business-item .b-arrow{ display: none !important; } */
  .business-item .b-num{ font-size: 10px; }
  .business-item h3{
    font-size: 17px !important;
    letter-spacing: .04em !important;
    line-height: 1.4;
  }

  /* 求人カード */
  /* 採用情報ページ 募集職種カード — スマホ調整 */
  .position-card{ padding: 24px 20px !important; }
  .position-card .p-num{
    font-size: 18px !important;
    letter-spacing: .06em !important;
  }
  .position-card h3{
    font-size: 17px !important;
    letter-spacing: .04em !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    text-wrap: pretty;
    word-break: auto-phrase;
  }
  .position-card .role{ font-size: 10px !important; letter-spacing: .16em !important; }
  .position-card .row{
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 12px 0 !important;
  }
  .position-card .row dt{
    font-size: 10px !important;
    letter-spacing: .16em !important;
    color: var(--ink-4) !important;
    padding-top: 0 !important;
    margin-bottom: 2px !important;
  }
  .position-card .row dd{
    font-size: 13px !important;
    line-height: 1.8 !important;
  }

  /* 採用情報ページ メッセージ */
  .recruit-message-img{ aspect-ratio: 16/10; margin-bottom: 24px; }
  .recruit-message h2{
    font-size: 20px !important;
    letter-spacing: .02em !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
    text-wrap: pretty;
    word-break: auto-phrase;
  }
  .recruit-message p{ font-size: 13.5px !important; line-height: 1.95 !important; margin-bottom: 14px !important; }
  .recruit-message-btns{
    margin-top: 24px !important;
    gap: 10px !important;
    flex-direction: column;
  }
  .recruit-message-btns .btn-primary,
  .recruit-message-btns .btn-line{
    justify-content: center;
    padding: 14px 24px !important;
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }

  /* お知らせ一覧（スマホ向けさらにコンパクト） */
  .news-list a,
  .news-list .news-static{ padding: 18px 0; gap: 6px 12px }
  .news-list .date{ font-size: 10px; letter-spacing: .1em }
  .news-list .cat{ font-size: 9px; padding: 3px 8px; letter-spacing: .12em }
  .news-list .title{ font-size: 13px; line-height: 1.65; margin-top: 2px }

  /* 施工実績詳細 */
  .work-detail-hero{ aspect-ratio: 16/10 }
  .work-detail-title{ font-size: 24px !important; letter-spacing: .02em !important; }
  .wd-block-title{ font-size: 15px !important; margin-bottom: 12px !important; }
  .wd-block p{ font-size: 14px !important; line-height: 2 !important; }

  /* お知らせセクション（TOP内） */
  .news-list-inline a{
    grid-template-columns: 1fr; gap: 4px;
  }

  /* フッター */
  .footer-inner{ padding: 60px var(--gutter) 40px; gap: 40px; }
  .footer-brand address{ font-size: 12px; line-height: 1.9 }
  .footer-col h4{ font-size: 12px }
  .footer-col ul li{ font-size: 13px }
  .footer-bottom{ padding: 20px var(--gutter); font-size: 10px }

  /* ヒーロー高さを画面高に合わせる */
  .hero{ min-height: 100svh }
  .hero-copy h1{
    font-size: clamp(28px, 8vw, 42px) !important;
    letter-spacing: .04em !important;
  }

  /* お問い合わせボタングループ */
  .contact-form-buttons{ flex-direction: column; gap: 12px; }
  .contact-form-buttons button, .contact-form-buttons a{ width: 100%; }

  /* パンくずリスト */
  .breadcrumbs{ font-size: 11px !important; }

  /* PC専用の改行タグ<br class="pc-only">はスマホでは非表示 */
  br.pc-only{ display: none; }

  /* 全セクション共通タイトル ― スマホ向けサイズ調整 */
  .section-title{
    font-size: 22px !important;
    letter-spacing: .02em !important;
    line-height: 1.55 !important;
    text-wrap: pretty;
    word-break: auto-phrase;
  }
  .section-lead{
    font-size: 13.5px;
    line-height: 1.9;
  }

  /* TOPページ 04 Strengths セクション */
  .strengths{ padding: 60px 0; }
  .strengths-grid{ gap: 20px; margin-top: 32px; }
  .strength-card{ padding: 28px 22px !important; }
  .strength-card .s-num{ font-size: 11px; }
  .strength-card h3{
    font-size: 16px !important;
    letter-spacing: .04em !important;
    line-height: 1.5 !important;
    margin-top: 14px !important;
    margin-bottom: 12px !important;
    text-wrap: pretty;
    word-break: auto-phrase;
  }
  .strength-card p{ font-size: 13px; line-height: 1.9; }

  /* 強みページ（strengths-page-item） — スマホ向け調整 */
  .strengths-page-item{ padding: 40px 0; }
  .strengths-page-item .s-num{
    font-size: 32px;
    margin-bottom: 12px;
  }
  .strengths-page-item h2{
    font-size: 20px !important;
    letter-spacing: .02em !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
    text-wrap: pretty;
    word-break: auto-phrase;
  }
  .strengths-page-item h2 .en{
    font-size: 10px !important;
    letter-spacing: .18em !important;
    margin-bottom: 10px !important;
  }
  .strengths-page-item p{
    font-size: 13.5px !important;
    line-height: 1.95 !important;
  }
  .strengths-page-item .img-wrap{ aspect-ratio: 3/2; margin-bottom: 20px; }

  /* TOPページ 協業パートナー募集 CTA */
  .partner-cta-inner{
    padding: 60px 24px !important;
  }
  .partner-cta-text h2{
    font-size: 20px !important;
    line-height: 1.55 !important;
    letter-spacing: .02em !important;
    margin-bottom: 20px !important;
    text-wrap: pretty;
    word-break: auto-phrase;
  }
  .partner-cta-text p{
    font-size: 13px !important;
    line-height: 1.95 !important;
    margin-bottom: 28px !important;
  }
  .partner-cta-text .btn-primary{
    font-size: 11px !important;
    padding: 14px 24px !important;
    letter-spacing: .12em !important;
  }
}


/* custom 2026-07-23 */
.header-inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 18px var(--gutter);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 40px;
    align-items: center;
}

@media (max-width: 900px) {
    .header-inner {
        padding: 12px var(--gutter);
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 8px;
    }

    .logo {
        grid-column: 1;
    }

    .header-end {
        grid-column: 2;
        justify-self: end;
    }
}