/* 新テーマ（H-B のデザイン）の会社・実績のページ（会社概要・実績）。組み替えは inc/v2/company.php。
   service.css の部品（見出しのマス、見出しの列、2段グリッド）の後に読む。縦積みが土台で、html.is-hscroll のときだけ横の帯にする */

/* --------------------------------------------------------------------------
   会社概要（page-about）: 縦積み
   -------------------------------------------------------------------------- */
#page-about .mv-area { display: none; }
#page-about > .container { display: grid; gap: clamp(40px, 6vw, 72px); }
#page-about h1 {
  margin: 12px 0 0;
  font-family: var(--h-font-display);
  font-size: clamp(56px, 2rem + 7vw, 160px);
  font-stretch: 75%;
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.h-about-head .text { margin-top: 28px; max-width: 38em; font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); line-height: 2; }
#page-about .row { display: grid; gap: 32px; }
#page-about .row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
#page-about table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--h-ink); }
#page-about th,
#page-about td { padding: 18px 4px; border-bottom: 1px solid var(--h-line); text-align: left; vertical-align: top; }
#page-about th { width: 8.5em; font-family: var(--h-font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--h-muted); }
#page-about td { font-size: 0.9375rem; font-weight: 700; line-height: 1.8; }
.about-detail { display: grid; gap: 48px; }
.h-about-block h2 { font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); font-weight: 700; line-height: 1.4; }
.h-about-block .text { margin-top: 18px; max-width: 40em; font-size: 0.9375rem; line-height: 2; }
.h-about-block strong { background: linear-gradient(transparent 62%, rgb(252 77 104 / 0.22) 62%); }
@media (min-width: 900px) {
  #page-about .row { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* --------------------------------------------------------------------------
   実績（page-case-studies）: 縦積み
   -------------------------------------------------------------------------- */
.case-section-eyebrow {
  font-family: var(--h-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--h-muted);
}
.case-section-eyebrow + .service-section-title,
.case-section-header .service-section-title { margin-top: 12px; }
.case-section-header { margin-bottom: 28px; }
.case-cta-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* 実案件 */
.client-case-feature { display: grid; border-top: 1px solid var(--h-ink); }
.client-case__visual { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--h-bg-2); }
.client-case__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--h-ease); }
.client-case__visual:hover .client-case__image { transform: scale(1.03); }
.client-case__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 8px 12px;
  background: var(--h-ink);
  color: var(--h-bg);
  font-family: var(--h-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}
.client-case__body { padding: 24px 4px 8px; }
.client-case__client { font-size: 0.875rem; font-weight: 700; }
.client-case__project { margin-top: 4px; font-family: var(--h-font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--h-muted); }
.client-case__title { margin: 14px 0 0; font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); font-weight: 700; line-height: 1.4; }
.client-case__lead { margin-top: 14px; max-width: 38em; font-size: 0.9375rem; line-height: 1.9; }
.client-case__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 0; border-top: 1px solid var(--h-line); }
.client-case__fact { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--h-line); }
.client-case__fact dt { font-family: var(--h-font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--h-muted); }
.client-case__fact dd { margin: 6px 0 0; font-size: 0.875rem; font-weight: 700; line-height: 1.6; }
.client-case__tags,
.case-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.client-case__tag,
.case-tag { padding: 4px 10px; border: 1px solid var(--h-line); font-size: 0.75rem; line-height: 1.6; }
.client-case__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.client-case__site-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px;
  border-bottom: 1px solid var(--h-ink);
  font-size: 0.875rem;
  font-weight: 700;
}
.case-nowrap,
.case-phrase { white-space: nowrap; }
@media (min-width: 900px) {
  .client-case-feature { grid-template-columns: 1.1fr 1fr; gap: 32px; }
}

/* 自主制作デモのカード */
.case-card { display: flex; flex-direction: column; padding: 0 !important; }
.case-card__image-link { display: block; }
.case-card__image { overflow: hidden; aspect-ratio: 16 / 10; background: var(--h-bg-2); }
.case-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--h-ease); }
.case-card__image-link:hover img { transform: scale(1.03); }
.case-card__body { display: flex; flex-direction: column; padding: 22px 22px 26px; }
.case-card__title { margin: 0; font-size: clamp(1.25rem, 0.9rem + 0.8vw, 1.625rem); font-weight: 700; line-height: 1.35; }
.case-card__subtitle { margin-top: 6px; font-family: var(--h-font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--h-muted); }
.case-card__desc { margin-top: 14px; font-size: 0.875rem; line-height: 1.9; }
.case-card__links { margin-top: 18px; }
.btn-sm { min-height: 44px; padding: 0 16px; font-size: 0.8125rem; }


/* --------------------------------------------------------------------------
   横の帯（html.is-hscroll）
   -------------------------------------------------------------------------- */
/* 会社概要: section#page-about の中を、見出しのマス → 写真 → 表 → 文章のマス（3つ）に */
html.is-hscroll .h-track > section#page-about { display: flex; padding: 0; }
html.is-hscroll #page-about > .container { display: flex; gap: 0; height: 100%; }
/* 紹介文は改行（br）の位置で行を分けているので、1行がマスの中で折り返さない幅を取る（最も長い行で約55字） */
html.is-hscroll .h-about-head {
  flex: none;
  width: max(calc(var(--H) * 1.1), 1000px);
  display: grid;
  align-content: end;
  padding: 40px clamp(28px, 3vw, 48px) var(--h-cell-bottom, 40px);
}
html.is-hscroll .h-about-head .text { max-width: none; font-size: 1rem; line-height: 1.95; }
html.is-hscroll #page-about .row { display: flex; gap: 0; height: 100%; }
html.is-hscroll #page-about .col { flex: none; height: 100%; }
html.is-hscroll #page-about .col:first-child { width: calc(var(--H) * 0.7); }
html.is-hscroll #page-about .col:first-child img { height: 100%; aspect-ratio: auto; }
html.is-hscroll #page-about .col:last-child {
  width: calc(var(--H) * 0.72);
  display: grid;
  align-content: end;
  padding: 40px clamp(28px, 3vw, 48px) var(--h-cell-bottom, 40px);
}
html.is-hscroll .about-detail { display: flex; gap: 0; height: 100%; }
html.is-hscroll .h-about-block {
  flex: none;
  width: calc(var(--H) * 0.72);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 40px clamp(28px, 3vw, 48px) var(--h-cell-bottom, 40px);
  overflow-y: auto; /* 縦のホイールをページへ渡すため、overscroll-behavior: contain は付けない */
}
html.is-hscroll .h-about-block .text { max-width: none; margin-top: auto; padding-top: 20px; font-size: 0.875rem; line-height: 1.95; }
/* 2つ目（the N の強み）は文章が長く、1行も長い（約50字）ので、マスを広く取る */
html.is-hscroll .h-about-block:nth-child(2) { width: max(calc(var(--H) * 1.1), 820px); }

/* 実績: 実案件 = 見出しの列 + 写真と文の横長のマス */
html.is-hscroll .service-detail .h-track > section.client-case-section { display: flex; align-items: stretch; padding-right: 0; }
html.is-hscroll .case-section-header {
  flex: none;
  width: calc(var(--H) * 0.5);
  margin: 0;
  padding-right: 32px;
  align-self: end;
}
html.is-hscroll .client-case-feature {
  flex: none;
  width: calc(var(--H) * 1.45);
  height: 100%;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  border-top: 0;
}
html.is-hscroll .client-case__visual { height: 100%; aspect-ratio: auto; }
html.is-hscroll .client-case__body {
  display: flex;
  flex-direction: column;
  padding: 26px 28px var(--h-cell-bottom, 28px);
  overflow-y: auto; /* 縦のホイールをページへ渡すため、overscroll-behavior: contain は付けない */
}
html.is-hscroll .client-case__actions { margin-top: auto; padding-top: 20px; }

/* 自主制作デモ: 上に写真・下に文の縦長のカードを1段で並べる */
html.is-hscroll .case-studies-grid[data-h-grid] {
  grid-template-rows: minmax(0, 1fr);
  grid-auto-columns: calc(var(--H) * 0.62);
}
html.is-hscroll .case-card { display: grid; grid-template-rows: 42% minmax(0, 1fr); overflow: hidden; }
html.is-hscroll .case-card__image-link,
html.is-hscroll .case-card__image { height: 100%; aspect-ratio: auto; }
html.is-hscroll .case-card__body { overflow-y: auto; padding: 22px 26px var(--h-cell-bottom, 28px); }
html.is-hscroll .case-card__links { margin-top: auto; padding-top: 16px; }

/* 背の低い画面（1280×680・1366×768 など）: マスを広げ、文字を少し小さくして収める */
@media (max-height: 820px) {
  html.is-hscroll .h-about-head { width: max(calc(var(--H) * 1.35), 960px); }
  html.is-hscroll .h-about-head .text { font-size: 0.9375rem; line-height: 1.85; }
  html.is-hscroll .h-about-block { width: calc(var(--H) * 0.9); }
  html.is-hscroll .h-about-block:nth-child(2) { width: calc(var(--H) * 1.5); }
  html.is-hscroll #page-about .col:last-child { width: calc(var(--H) * 0.9); }
  html.is-hscroll #page-about td { font-size: 0.875rem; }
  html.is-hscroll #page-about th,
  html.is-hscroll #page-about td { padding: 12px 4px; }
  html.is-hscroll .client-case-feature { width: calc(var(--H) * 1.8); }
  html.is-hscroll .client-case__title { font-size: 1.375rem; }
  html.is-hscroll .client-case__lead { font-size: 0.875rem; line-height: 1.8; }
  html.is-hscroll .case-studies-grid[data-h-grid] { grid-auto-columns: calc(var(--H) * 0.74); }
  html.is-hscroll .case-card { grid-template-rows: 36% minmax(0, 1fr); }
  html.is-hscroll .case-card__desc { font-size: 0.8125rem; line-height: 1.8; }
}