/* =====================================================================
   企業情報(/new/company/)
   ===================================================================== */

/* 会社概要 */
.overview__inner { display: grid; gap: 40px 80px; }
.overview__title { font-size: var(--fs-h2); line-height: 1.4; }
.overview__lead { margin-top: 20px; color: var(--ink-2); line-height: 2; }
.spec { border-top: 2px solid var(--navy); }
.spec__row { display: grid; gap: 4px 32px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.spec__row dt { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2); letter-spacing: var(--track-head); }
.spec__row dd { font-size: var(--fs-md); line-height: 1.9; }
.spec__sub { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; letter-spacing: var(--track-head); }
.spec__mono { font-family: var(--font-en); letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }
.spec__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-head); font-feature-settings: "palt"; margin-left: 4px; font-size: var(--fs-sm); font-weight: 700; color: var(--blue); }
.spec__link .icon { width: 16px; height: 16px; transform: rotate(90deg); }
.spec__link--page { display: flex; margin-left: 0; }
.spec__link--page .icon { transform: none; }
.spec__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.spec__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-en); font-weight: 700; font-size: 1.25rem; color: var(--navy); letter-spacing: var(--track-body); }
.spec__tel .icon { width: 18px; height: 18px; color: var(--blue); }
.spec__tel:hover { color: var(--blue); }
@media (min-width: 640px) { .spec__row { grid-template-columns: 9em minmax(0, 1fr); padding: 24px 8px; align-items: baseline; } }
@media (min-width: 1024px) {
  .overview__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); align-items: start; }
  .overview__head { position: sticky; top: calc(var(--header-h) + 88px); }
}

/* 代表メッセージ */
.message { background: var(--surface-2); overflow: hidden; isolation: isolate; }
.message__inner { display: grid; gap: 40px 96px; }
.message__title { font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.42; letter-spacing: var(--track-head); }
.message__sign { display: grid; margin-top: 40px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.9; }
.message__sign strong { margin-top: 8px; font-size: 1.625rem; letter-spacing: var(--track-label); color: var(--ink); }
.message__lead { font-family: var(--font-head); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); font-weight: 700; line-height: 1.75; letter-spacing: var(--track-head); font-feature-settings: "palt"; margin-bottom: 32px; }
.message__text { color: var(--ink-2); line-height: 2.15; }
.message__text + .message__text { margin-top: 1.4em; }
.message__text:last-child { font-family: var(--font-head); font-feature-settings: "palt"; color: var(--ink); font-weight: 700; }
.message__mark { position: absolute; right: 4vw; top: -.1em; z-index: -1; font-family: Georgia, "Times New Roman", serif; font-size: clamp(16rem, 34vw, 32rem); line-height: 1; color: rgba(0, 104, 196, .06); pointer-events: none; user-select: none; }
@media (min-width: 1024px) {
  .message__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; }
  .message__head { position: sticky; top: calc(var(--header-h) + 88px); }
  .message__body { padding-top: 64px; }
}

/* 全国拠点 */
.network-sec--company { background: #fff; }
.network-sec--company .network__map { background: radial-gradient(100% 90% at 60% 40%, #f7fafc 0%, var(--surface-2) 60%, #e9eff5 100%); }

/* 沿革(content/site.php の history に入れると表示) */
.history { margin-top: 8px; }
.history__title { font-size: var(--fs-h4); padding-bottom: 12px; border-bottom: 2px solid var(--navy); }
.history__list li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.85; }
.history__when { font-family: var(--font-head); font-feature-settings: "palt"; font-weight: 700; color: var(--navy); }
@media (min-width: 1024px) { .history { grid-column: 2; } }
.spec__row dt { font-family: var(--font-head); font-feature-settings: "palt"; }

/* 全国拠点 → IPグループ(どちらも白い章): 下の章の上の余白を詰め、細い罫線で区切る(大きな空白を作らない) */
.network-sec--company + .group { padding-top: 0; }
.network-sec--company + .group > .wrap { padding-top: calc(var(--section) * .5); border-top: 1px solid var(--line); }
.network-sec--company:has(+ .group) { padding-bottom: calc(var(--section) * .6); }

/* 全国のショールームの写真の壁(代表メッセージと全国拠点の間)。録画機のマルチ画面に見立てる:
   1180px以上は「説明 / CH01 の大きな画面 / CH02〜04 の縦の列」の3列、600〜1179px は説明の下に「CH01 / CH02〜04 の列」、599px以下は説明・CH01・CH02〜04 の横の列。
   各写真はショールームのページの拠点のギャラリーへのリンク(ホバー・フォーカスでファインダーの角と札の色) */
.floors { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--section); background: var(--navy-deep); color: #fff; }
.floors__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(124, 200, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 200, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 30% 40%, #000 20%, transparent 75%);
}
.floors__wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: #020a14; box-shadow: 0 40px 80px rgba(0, 0, 0, .3); }
.floors__text { grid-column: 1 / -1; display: grid; align-content: center; justify-items: start; gap: 0; padding: clamp(24px, 3vw, 40px); border-radius: 6px; background: linear-gradient(160deg, #0f2e52 0%, #0a2342 60%, #081b33 100%); }
.floors__title { margin-top: 4px; font-size: var(--fs-h3); line-height: 1.42; letter-spacing: var(--track-head); text-wrap: balance; }
.floors__lead { margin-top: 16px; margin-bottom: 20px; max-width: 30em; color: var(--on-dark-2); font-size: var(--fs-sm); line-height: 2; text-wrap: pretty; }
.floors__tile { position: relative; display: block; min-width: 0; overflow: hidden; border-radius: 6px; background: #0a1a2e; color: #fff; aspect-ratio: 3 / 2; }
.floors__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.floors__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 10, 20, 0) 55%, rgba(2, 10, 20, .55) 100%); pointer-events: none; }
.floors__tile--main { grid-column: 1 / -1; }
/* 写真の上の札(写真に関係なく読めるように濃紺の地。4.5:1 以上) */
.floors__cap { position: absolute; z-index: 3; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: var(--radius); background: rgba(4, 13, 26, .82); font-family: var(--font-head); font-feature-settings: "palt"; font-size: var(--fs-sm); font-weight: 700; letter-spacing: var(--track-head); white-space: nowrap; transition: background-color var(--dur-1) var(--ease); }
.floors__ch, .floors__en { font-family: var(--font-en); font-size: .75rem; letter-spacing: var(--track-label); }
.floors__ch { color: var(--sky); }
.floors__name { overflow: hidden; text-overflow: ellipsis; }
.floors__tile .vf--card { --vf-c: var(--sky); }
.floors__tile:focus-visible { outline-offset: -3px; outline-color: var(--sky); }
.floors :focus-visible { outline-color: var(--sky); }
.floors__tile:focus-visible .vf--card { opacity: 1; }
.floors__tile:focus-visible .vf--card i { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .floors__tile:hover .vf--card { opacity: 1; }
  .floors__tile:hover .vf--card i { transform: none; }
  .floors__tile:hover .floors__cap { background: var(--blue); }
}
.floors__tile:active .floors__cap { background: var(--blue); }
/* 拠点の和文の名前は、599px以下の CH02〜04 の札だけ(小さな正方形に英字の名前が入らないため) */
.floors__ja { display: none; }
/* 599px以下: CH02〜04 は横に3つ並べ、札は CH の番号と和文の拠点名(「CH02 名古屋」)だけ */
@media (max-width: 599px) {
  .floors__tile--sub { aspect-ratio: 1 / 1; }
  .floors__tile--sub .floors__cap { left: 6px; bottom: 6px; max-width: calc(100% - 12px); gap: 6px; padding: 3px 6px; font-size: .75rem; }
  .floors__tile--sub .floors__name, .floors__tile--sub .floors__en { display: none; }
  .floors__tile--sub .floors__ja { display: inline; }
}
/* 360px未満: 小さな正方形に「CH02 名古屋」が1行で入らないので、番号と拠点名を2段にする */
@media (max-width: 359px) {
  .floors__tile--sub .floors__cap { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.4; }
}
/* 600〜1279px: CH02〜04 の札は CH の番号と拠点の英字だけ(写真の名前は省く。列が狭く、名前が途中で切れるため) */
@media (min-width: 600px) and (max-width: 1279px) { .floors__tile--sub .floors__name { display: none; } }
/* 600〜1179px: 説明を上に、その下に CH01(2列分)と CH02〜04 の縦の列 */
@media (min-width: 600px) {
  .floors__wall { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto repeat(3, minmax(0, 1fr)); }
  .floors__tile { aspect-ratio: auto; min-height: 96px; }
  .floors__tile--main { grid-column: 1; grid-row: 2 / span 3; aspect-ratio: 3 / 2; }
  .floors__tile--sub { grid-column: 2; }
}
/* 1180px以上: 説明・CH01・CH02〜04 の3列 */
@media (min-width: 1180px) {
  .floors__wall { grid-template-columns: minmax(0, .95fr) minmax(0, 1.55fr) minmax(0, .8fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .floors__text { grid-column: 1; grid-row: 1 / span 3; align-content: center; padding: 40px 36px; }
  .floors__text .tlink { white-space: nowrap; }
  .floors__tile--main { grid-column: 2; grid-row: 1 / span 3; aspect-ratio: auto; min-height: 460px; }
  .floors__tile--sub { grid-column: 3; }
}
/* 1180〜1279px: 説明の列が狭いので余白を詰める(「ショールームの写真を見る」を1行に) */
@media (min-width: 1180px) and (max-width: 1279px) { .floors__text { padding: 32px 24px; } }