/* ==================================================
   富士梱包 設備一覧ページ STYLES
   仮レイアウト：Figmaデザイン（スクショ）受領後に調整すること
   ================================================== */

/* ---------- Global (equipment-page) ---------- */
.equipment-page *, .equipment-page *::before, .equipment-page *::after {
  box-sizing: border-box;
}
.equipment-page { margin: 0; padding: 0; background: var(--color-bg-gray, #f3f3f3); }
.equipment-page ul  { list-style: none; margin: 0; padding: 0; }
.equipment-page a   { text-decoration: none; color: inherit; }
.equipment-page img { display: block; max-width: 100%; }
.equipment-page p   { margin: 0; }
.equipment-page h1, .equipment-page h2, .equipment-page h3 { margin: 0; }

/* Header（内部ページは Navy Black 背景） */
.equipment-page .top-header {
  background: rgba(0, 12, 33, .9);
}

/* ==================================================
   PAGE HEADER（business-header と同パターン）
   ================================================== */
.equipment-header {
  background: #000c21;
  width: 100%;
}

.equipment-header__title {
  padding: 100px 40px 60px;
  display: flex;
  align-items: flex-end;
  min-height: 250px;
}

.equipment-header__title-inner {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.equipment-title-group {
  display: flex;
  align-items: stretch;
  gap: 30px;
  flex-shrink: 0;
}

.equipment-title-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

.equipment-title-en {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 60px;
  line-height: 1;
}

.equipment-title-ja {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 2.4px;
}

.equipment-title-sep {
  width: 5px;
  background: var(--color-red, #ca242e);
  align-self: stretch;
}

/* ==================================================
   SECTIONS
   ================================================== */
.equipment-section {
  padding: 80px 40px;
}

.equipment-section__container {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.equipment-section--machines {
  background: #fff;
}

/* ---- 拠点・施設 ---- */
.equipment-facilities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.equipment-facility {
  background: #fff;
  padding: 32px 36px;
  border-top: 4px solid var(--color-blue, #0050d1);
}

.equipment-facility__name {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--color-text, #3e3e3e);
  margin-bottom: 12px;
}

.equipment-facility__spec {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-blue, #0050d1);
  margin-bottom: 6px;
}

.equipment-facility__address {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text, #3e3e3e);
}

/* 拠点写真（先方支給の実写。2:1で書き出し・object-fit:cover で高さを揃える） */
.equipment-facility__photos {
  display: flex;
  gap: 4px;
  margin: -32px -36px 22px;
  height: 260px;
  overflow: hidden;
}
.equipment-facility__photo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  background: #d9d9d9;
}
.equipment-facility__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 設備グリッド ---- */
.equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}

.equipment-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 設備写真（未受領分はグレーのプレースホルダー） */
.equipment-item__img {
  aspect-ratio: 4 / 3;
  background: #d9d9d9;
  overflow: hidden;
}
/* 写真が未支給の設備。事業内容ページの商品カード（.biz-product-card__img--ph）と同じ見た目に揃えている */
.equipment-item__img--ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #eef2f8, #dce4f1);
}
.equipment-item__img--ph::after {
  content: "準備中";
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--color-blue, #0050d1);
  opacity: .55;
}
.equipment-item__ph-icon {
  width: 30px;
  height: 30px;
  color: var(--color-blue, #0050d1);
  opacity: .32;
}
.equipment-item__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equipment-item__name {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-text, #3e3e3e);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.equipment-item__count {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  background: var(--color-blue, #0050d1);
  padding: 2px 10px;
  flex-shrink: 0;
}

.equipment-item__desc {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 14px;
  line-height: 1.9;
  color: var(--color-text, #3e3e3e);
}

/* CONTACT帯の青背景版（.equipment-contact）は 2026-10-07 に削除。全ページでトップと同じ白地のデザインに統一（top.css .top-contact） */

/* ==================================================
   RESPONSIVE
   ================================================== */
@media (max-width: 1023px) {
  .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .equipment-header__title {
    padding: 90px 20px 40px;
    min-height: 180px;
  }
  .equipment-title-en { font-size: 40px; }

  .equipment-section { padding: 50px 20px; }

  .equipment-facilities { grid-template-columns: minmax(0, 1fr); }
  .equipment-facility { padding: 24px 20px; }

  /* 設備リスト：SPは大きな写真の縦積みをやめ、小サムネ＋テキストの横並びリストに
     （画像がだらだら続く見え方の解消・2026-07-07 ユーザー指示） */
  .equipment-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .equipment-item {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 6px 16px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid #e3e3e3;
  }
  .equipment-item:first-child { border-top: 1px solid #e3e3e3; }
  .equipment-item__img {
    grid-row: 1 / 3;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
  }
  .equipment-item__name { font-size: 15px; }
  .equipment-item__count { font-size: 11px; padding: 1px 8px; }
  .equipment-item__desc {
    font-size: 13px;
    line-height: 1.7;
  }
}

/* 導入予定などの注記 */
.equipment-note {
  margin-top: 28px;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 14px;
  letter-spacing: .6px;
  line-height: 1.9;
  color: #6b7280;
}

@media (max-width: 767px) {
  .equipment-facility__photos { height: 190px; margin: -24px -20px 18px; }
}

/* ==================================================
   稼働動画（サムネイル上の再生ボタン ＋ モーダル）
   サムネイルは静止画のまま。動画本体はページ下部のモーダルに1つだけ置き、
   再生ボタンの data-video を読んで src を差し替える。
   ================================================== */
.equipment-item__img--has-video { position: relative; }

/* サムネイル全体を押せるようにしつつ、中央にラベルを出す */
.equipment-item__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 12, 33, .28);
  color: #fff;
  cursor: pointer;
  transition: background .3s;
}
.equipment-item__play:hover,
.equipment-item__play:focus-visible { background: rgba(0, 12, 33, .48); }
.equipment-item__play:focus-visible { outline: 3px solid var(--color-blue, #0050d1); outline-offset: -3px; }

/* フィルム風マーカー（2026-09-01 打ち合わせ・石塚代表のご要望で必須）
   白いフィルムのコマに見立てた角丸長方形。上下の帯は repeating-linear-gradient で
   描いたパーフォレーション（送り穴）。単純な丸い再生ボタンより
   「ここに短い動画が入っている」ことが伝わる形にしている。 */
.equipment-item__play-icon {
  width: 88px;
  height: 62px;
  border-radius: 4px;
  position: relative;
  background-color: rgba(255, 255, 255, .94);
  background-image:
    repeating-linear-gradient(90deg, #000c21 0 6px, transparent 6px 13px),
    repeating-linear-gradient(90deg, #000c21 0 6px, transparent 6px 13px);
  background-repeat: repeat-x, repeat-x;
  background-position: 5px 6px, 5px calc(100% - 6px);
  background-size: calc(100% - 10px) 6px, calc(100% - 10px) 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: transform .3s, background-color .3s;
}
/* 三角形（▶）はCSSだけで描く */
.equipment-item__play-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--color-blue, #0050d1);
}
.equipment-item__play:hover .equipment-item__play-icon { transform: scale(1.06); background-color: #fff; }

.equipment-item__play-label {
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}

/* ---- 写真の拡大ボタン ---- */
/* 動画の再生ボタンと違い、サムネイル自体を見せたいので普段はほぼ透明。
   隅の小さなアイコンだけ常に出しておき、タップできることをスマホでも示す。 */
.equipment-item__img--has-zoom,
.equipment-facility__photo { position: relative; }

.equipment-item__zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: background .3s;
}
.equipment-item__zoom:hover,
.equipment-item__zoom:focus-visible { background: rgba(0, 12, 33, .3); }
.equipment-item__zoom:focus-visible { outline: 3px solid var(--color-blue, #0050d1); outline-offset: -3px; }

.equipment-item__zoom-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 12, 33, .55);
  transition: background .3s, transform .3s;
}
/* 虫めがね（円＋柄）をCSSだけで描く */
.equipment-item__zoom-icon::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
}
.equipment-item__zoom-icon::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 7px;
  height: 2px;
  background: #fff;
  transform: rotate(45deg);
}
.equipment-item__zoom:hover .equipment-item__zoom-icon {
  background: var(--color-blue, #0050d1);
  transform: scale(1.08);
}

/* ---- モーダル ---- */
/* Arkhe親テーマ(main.css)の @layer 内の display 指定が UA の [hidden] に勝つため明示的に打ち消す */
.equipment-modal[hidden] { display: none !important; }
.equipment-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.equipment-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 12, 33, .82);
  animation: equipFade .25s ease both;
}
.equipment-modal__box {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  background: #000c21;
  padding: 18px;
  animation: equipZoom .28s cubic-bezier(.22, 1, .36, 1) both;
}
.equipment-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.equipment-modal__title {
  margin: 0;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #fff;
}
.equipment-modal__close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: none;
  cursor: pointer;
  position: relative;
  transition: background .3s, border-color .3s;
}
.equipment-modal__close:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.equipment-modal__close:focus-visible { outline: 3px solid var(--color-blue, #0050d1); outline-offset: 2px; }
.equipment-modal__close span::before,
.equipment-modal__close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: #fff;
}
.equipment-modal__close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.equipment-modal__close span::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* 動画・写真を重ねる土台。送りボタンはこの上に絶対配置する */
.equipment-modal__stage { position: relative; }

.equipment-modal__video {
  display: block;
  width: 100%;
  max-height: 72vh;
  background: #000;
}
/* 写真はトリミングせず全体を見せる（サムネイルは cover だが拡大時は contain） */
.equipment-modal__image {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #000;
}
/* モーダル内の要素も [hidden] を確実に効かせる（親テーマ対策と同じ理由） */
.equipment-modal__video[hidden],
.equipment-modal__image[hidden],
.equipment-modal__note[hidden] { display: none !important; }
.equipment-modal__note {
  margin: 12px 0 0;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
}

/* ---- 複数枚あるときの送り ---- */
.equipment-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 18px;
}
.equipment-modal__counter {
  margin: 12px 0 0;
  margin-left: auto;
  font-family: var(--font-en, sans-serif);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .75);
}
.equipment-modal__note[hidden] + .equipment-modal__counter { margin-left: auto; }

.equipment-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 12, 33, .6);
  cursor: pointer;
  transition: background .3s;
}
.equipment-modal__nav:hover { background: var(--color-blue, #0050d1); }
.equipment-modal__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.equipment-modal__nav--prev { left: 12px; }
.equipment-modal__nav--next { right: 12px; }
/* 山形の矢印をCSSだけで描く */
.equipment-modal__nav span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.equipment-modal__nav--prev span { transform: translate(-40%, -50%) rotate(-135deg); }
.equipment-modal__nav--next span { transform: translate(-60%, -50%) rotate(45deg); }
/* [hidden] を確実に効かせる（親テーマの @layer 対策） */
.equipment-modal__nav[hidden],
.equipment-modal__counter[hidden] { display: none !important; }

/* サムネイル右下の「◯枚」バッジ（複数写真があることを一覧で示す）。
   台数バッジの .equipment-item__count とは別物なので名前を分けている */
.equipment-item__shots {
  position: absolute;
  right: 50px;
  bottom: 10px;
  padding: 4px 9px;
  background: rgba(0, 12, 33, .55);
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
}

/* モーダルを開いている間は背面をスクロールさせない（JSが付ける） */
.equipment-modal-open { overflow: hidden; }

@keyframes equipFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes equipZoom {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .equipment-modal { padding: 16px; }
  .equipment-modal__box { padding: 14px; }
  .equipment-item__play-icon {
    width: 70px; height: 50px;
    background-position: 4px 5px, 4px calc(100% - 5px);
    background-size: calc(100% - 8px) 5px, calc(100% - 8px) 5px;
  }
  .equipment-item__play-icon::before { border-width: 7px 0 7px 12px; }
  .equipment-item__play-label { font-size: 11px; }
  .equipment-item__zoom-icon { width: 30px; height: 30px; right: 8px; bottom: 8px; }
  .equipment-item__zoom-icon::before { top: 9px; left: 9px; width: 9px; height: 9px; }
  .equipment-item__zoom-icon::after { right: 8px; bottom: 8px; width: 6px; }
  .equipment-item__shots { right: 44px; bottom: 8px; font-size: 10px; padding: 3px 7px; }
  .equipment-modal__nav { width: 40px; height: 40px; }
  .equipment-modal__nav--prev { left: 6px; }
  .equipment-modal__nav--next { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .equipment-modal__backdrop,
  .equipment-modal__box { animation: none; }
  .equipment-item__play,
  .equipment-item__play-icon { transition: none; }
}

/* ==================================================
   モバイル改修 v3（2026-09-02）
   PC(768px超)の見た目は変更しない。
   ================================================== */
@media (max-width: 767px) {
  /* サムネイル（104px角）の中で「稼働動画を見る」が86px幅まで広がり、
     左右の余白がほぼ無く窮屈だった。字間と級数を詰めて収める。 */
  .equipment-item__play-label {
    font-size: 10px;
    letter-spacing: .04em;
  }
  /* 動画モーダルの送りボタン。縦中央だと端末の再生コントロールと近く、
     押し分けづらいので、コントロールバーのぶんだけ上へ逃がす。 */
  .equipment-modal__nav { top: calc(50% - 22px); }
}

/* ==================================================
   総点検 2026-10-07
   ・拠点の仕様：青文字の1行 → 本文色のフロアごと箇条書き（ラベル付き）
   ・写真枚数バッジ：「3枚」→ アイコン＋「写真3枚」
   ・ページヘッダーは共通部品（top.css .page-head）。旧 .equipment-header 系は未使用
   ================================================== */
.equipment-page .equipment-facility__spec {
  margin: 0 0 8px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
}
.equipment-facility__floor {
  display: inline-block;
  min-width: 3.4em;
  margin-right: .6em;
  font-family: var(--font-en);
  font-weight: 600;
  color: var(--color-blue);
}
.equipment-facility__label {
  display: inline-block;
  margin-right: .8em;
  padding: 0 .6em;
  border: 1px solid rgba(62, 62, 62, .3);
  font-size: 12px;
  line-height: 1.7;
  vertical-align: .1em;
}
.equipment-item__shots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.equipment-item__shots svg { width: 13px; height: 13px; }
.equipment-item__shots { white-space: nowrap; }

/* 文節改行（phrase.js）で「シュリンクパック」が途中で折れなくなり、320px幅でSPの2列グリッドの
   文字列が押し広げられて10pxはみ出していた → 1fr を minmax(0,1fr) にして列を縮められるように
   （それでも入らない長い語だけ、はみ出さずに語の途中で折れる） */
@media (max-width: 767px) {
  .equipment-item { grid-template-columns: 104px minmax(0, 1fr); }
  .equipment-item > * { min-width: 0; }
}
/* 320px級の小さい画面では説明文の列が141px（1行9文字）しかなく、10文字の文節（提示しやすくなります）が
   入りきらずに途中で折れていた → 写真を少し小さくして説明文の列を広げる（1行11文字） */
@media (max-width: 360px) {
  .equipment-item { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; }
}
/* 320px級では説明文の列が1行10文字しかなく、「（入庫→加工→出庫）を」（11文字・括弧の中は折らない）が入らずに
   「を」が次の行頭に落ちていた → 360px以下だけ説明文を 14px に（1行11文字） */
@media (max-width: 360px) {
  .top-page .equipment-item__desc { font-size: 14px; }
}

/* 2026-10-08：岩槻 2F B の用途が2行になったので、2行目をフロアラベルの右に揃える */
.equipment-page .equipment-facility__spec li {
  display: flex;
  align-items: baseline;
}
.equipment-page .equipment-facility__spec .equipment-facility__floor { flex-shrink: 0; }

/* 先方指定の改行（br.br-pc・2026-10-08）は、カード幅が足りる 1200px 以上だけ。それ未満は自然な折り返し */
@media (max-width: 1199px) {
  .equipment-item__desc br.br-pc { display: none; }
}