/* =========================================================
   HAMAROBO 2026 — 出展社一覧ページ
   デザイン：株式会社エイティ・プロ「出展社一覧 2026ハマロボ展」

   寸法・色はすべて支給 PDF から実測した値です。
   （アートボード 1920px / コンテンツ幅 1280px 換算）
     カード          293.9 x 431.7
     カード左右の間隔 34.9 ／ 上下の間隔 28.3
     カード内余白     8.9
     写真            276.1 x 184.8（3:2）
     社名の紫バー     5.6 x 27.5
     紫 #a768cb ／ シアン #5ac1eb ／ 本文 #333333
   ========================================================= */

.exlist {
  /* このページ限定のトークン（サイト全体の配色は変更しない） */
  --ex-purple:      #a768cb;
  --ex-cyan:        #5ac1eb;
  --ex-text:        #333333;
  --ex-card-radius: 14px;

  /* デザイン指示書どおりのコンテンツ幅。
     サイト共通の 1100px に合わせたい場合はこの値を 1100px に変更してください。 */
  --ex-container:   1280px;

  position: relative;
  padding: 64px 24px 96px;
  color: var(--ex-text);
}

/* ----- 背景（波＋ドット）。スクロールしても動かない背景板として敷く ----- */
.exlist__bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("../img/exhibitor-bg.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
}

.exlist__inner {
  max-width: var(--ex-container);
  margin: 0 auto;
  position: relative;
}


/* =========================================================
   見出し
   ========================================================= */
.exlist__head {
  margin-bottom: 56px;
}

.exlist__title {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--ex-purple), var(--ex-cyan)) 1;
}

.exlist__title-en {
  display: block;
  font-family: "Barlow Condensed", "Arial Narrow", var(--f-jp);
  font-weight: 700;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: .01em;
  color: #222;
}

.exlist__title-ja {
  display: block;
  margin-top: 6px;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--ex-text);
}

.exlist__lead {
  margin: -24px 0 48px;
  font-size: 15px;
}


/* =========================================================
   ゾーン見出し
   ========================================================= */
.exlist__zone + .exlist__zone {
  margin-top: 72px;
}

.exlist__zone-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--ex-text);
}

/* 紫→シアンのグラデーション丸 */
.exlist__zone-mark {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, var(--ex-purple), var(--ex-cyan));
}


/* =========================================================
   カードグリッド
   1280 = 293.9 x4 + 34.9 x3
   ========================================================= */
.excards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 行ごとに高さを決める。
     以前は 1fr でグリッド全体の高さをそろえていたが（デザイン指示書と同じ見え方）、
     実データを入れたところ、製品名が5行ある1社（浜松貿易）に引きずられて
     プロダクションゾーンの30枚すべてが 708px になり、
     中身の少ないカードに大きな白い余白が出た（クライアント指摘 2026-08-24）。
     auto にすると各行が自分の行の中で高さをそろえるので、
     行内は整ったまま、ゾーン全体の間延びだけが解消する。 */
  grid-auto-rows: auto;
  gap: 28px 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.excard {
  display: flex;
}

.excard__inner {
  /* button でも div でも同じ見た目にする */
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 9px 9px 20px;
  border: none;
  border-radius: var(--ex-card-radius);
  background: #fff;
  box-shadow: 0 3px 10px rgba(30, 70, 110, .10), 0 1px 3px rgba(30, 70, 110, .06);
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* 詳細があるカードだけ押せる */
.excard--linked .excard__inner {
  cursor: pointer;
}
.excard--linked .excard__inner:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(30, 70, 110, .16), 0 2px 6px rgba(30, 70, 110, .08);
}
.excard--linked .excard__inner:focus-visible {
  outline: 3px solid var(--ex-purple);
  outline-offset: 3px;
}

/* ----- 社名（左に紫のバー） ----- */
.excard__name {
  position: relative;
  margin: 5px 0 8px;
  padding-left: 26px;
  min-height: 28px;
  display: flex;
  align-items: center;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--ex-text);
}
.excard__name::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 5.6px;
  height: 27.5px;
  border-radius: 1px;
  background-image: linear-gradient(180deg, var(--ex-purple), #8f57c4);
}

/* ----- 写真（3:2） ----- */
.excard__thumb {
  display: block;
  aspect-ratio: 276.1 / 184.8;
  border-radius: 6px;
  overflow: hidden;
  background: #eef4f8;
}
.excard__thumb img {
  width: 100%;
  height: 100%;
  /* 写真の全体を見せる（クライアント指示 2026-08-24）。
     cover だと 3:2 に切り抜かれ、縦長写真で製品や人物の一部が切れていた。
     contain にすると余った部分に .excard__thumb の背景色が出るが、
     枠の色と揃えてあるので額縁のように見える。 */
  object-fit: contain;
  display: block;
}

/* 写真がまだ無い会社 */
.excard__thumb--empty {
  display: grid;
  place-items: center;
  background-image: linear-gradient(135deg, #eaf4fb, #dceef8);
}
.excard__thumb-note {
  font-family: var(--f-jp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #8fb2c6;
}

/* ----- カード本文 ----- */
.excard__body {
  display: block;
  padding: 0 2px;
}

.excard__catch {
  display: block;
  margin-top: 14px;
  font-family: var(--f-jp);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #000;
}

.excard__category {
  display: block;
  margin-top: 12px;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ex-purple);
}

.excard__product {
  display: block;
  margin-top: 2px;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ex-purple);
}

.exlist__note {
  margin: 40px 0 0;
  font-family: var(--f-jp);
  font-size: 12px;
  letter-spacing: .02em;
  color: #5d7c8e;
}


/* =========================================================
   詳細モーダル
   モーダル幅 752 ／ 内側余白 64 ／ 写真 304.4 x 203.7 を2点・間隔 15.8
   ========================================================= */
.exmodal {
  width: min(752px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: none;
  border-radius: 10px;
  background: #fff;
  overflow: visible; /* 閉じるボタンを外側に出すため */
}
.exmodal::backdrop {
  background: rgba(120, 140, 160, .55);
  backdrop-filter: blur(2px) grayscale(.4);
}

.exmodal__inner {
  max-height: inherit;
  border-radius: 10px;
  overflow: hidden;
}

.exmodal__body {
  max-height: min(88vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 64px;
}

/* 閉じるボタン（パネル右上の外側） */
.exmodal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 30, 60, .2);
  color: #333;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}
.exmodal__close:hover { background: #f0f4f7; }

/* ----- モーダル内の要素 ----- */
.exmodal__name {
  position: relative;
  margin: 0 0 16px;
  padding-left: 18px;
  min-height: 30px;
  display: flex;
  align-items: center;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.4;
  color: #333;
}
.exmodal__name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6.2px;
  height: 30.3px;
  border-radius: 1px;
  background-image: linear-gradient(180deg, #a768cb, #8f57c4);
}

.exmodal__figures {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
}
.exmodal__figures--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 写真が1枚のときも、2枚並びの1枚と同じ大きさで表示する */
.exmodal__figures--one { grid-template-columns: minmax(0, 1fr); max-width: calc(50% - 8px); }

.exmodal__figure {
  margin: 0;
  aspect-ratio: 304.4 / 203.7;
  border-radius: 6px;
  overflow: hidden;
  background: #eef4f8;
}
.exmodal__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* カードと同じ理由（2026-08-24）。 */
  display: block;
}

/* URL・紹介動画は1セルに複数入ることがあるので、リストで縦に並べる。
   1つだけのときも同じ見た目になるよう、余白は殺しておく。 */
.exmodal__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.exmodal__links li + li {
  margin-top: 4px;
}

/* 紹介動画リンク。URL をそのまま出すと長いのでラベルにしている。 */
.exmodal__movie {
  font-weight: 700;
  color: var(--ex-purple);
}
.exmodal__ext {
  margin-left: 4px;
  font-size: .9em;
}

.exmodal__catch {
  margin: 0 0 14px;
  font-family: var(--f-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

.exmodal__category {
  margin: 0;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: #a768cb;
}

.exmodal__product {
  margin: 2px 0 0;
  font-family: var(--f-jp);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.5;
  color: #a768cb;
}

.exmodal__desc {
  margin: 22px 0 0;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.95;
  color: #333;
}

/* ----- 所在地などの表 ----- */
.exmodal__meta {
  margin: 28px 0 0;
  border-top: 1px solid #333;
}
.exmodal__row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #333;
}
.exmodal__row dt {
  margin: 0;
  font-family: var(--f-jp);
  font-size: 13.5px;
  font-weight: 500;
  color: #333;
}
.exmodal__row dd {
  margin: 0;
  font-family: var(--f-body);
  font-size: 13.5px;
  line-height: 1.7;
  color: #333;
  word-break: break-word;
}
.exmodal__row dd a {
  color: #333;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.exmodal__row dd a:hover { color: var(--ex-purple); }


/* =========================================================
   レスポンシブ
   ========================================================= */
/* 4列（デザイン指示書と同じ条件）のときだけ、カード高さを指示書の 431.7px に合わせる。
   幅が狭くなる3列以下では、中身の量に応じた高さ（行内は grid-auto-rows: 1fr で自動的に揃う）。 */
@media (min-width: 1101px) {
  .excard__inner { min-height: 431.7px; }
}

@media (max-width: 1100px) {
  .excards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .excards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
  .exlist { padding: 40px 16px 64px; }
  .exlist__title-en { font-size: 38px; }
  .exlist__head { margin-bottom: 36px; }
  .exlist__zone + .exlist__zone { margin-top: 48px; }
  .exlist__zone-head { font-size: 15px; }
  .excard__name { font-size: 14px; padding-left: 20px; }
  .excard__name::before { left: 6px; height: 22px; width: 4.5px; }
  .excard__catch { font-size: 13px; margin-top: 10px; }
  .excard__category { font-size: 12.5px; margin-top: 9px; }
  .excard__product { font-size: 14.5px; }

  .exmodal__body { padding: 28px 20px; }
  .exmodal__close { top: -14px; right: -8px; }
  .exmodal__name { font-size: 16px; }
  .exmodal__figures { gap: 10px; }
  .exmodal__figures--one { max-width: 100%; }
  .exmodal__catch { font-size: 14.5px; }
  .exmodal__product { font-size: 16px; }
  .exmodal__desc { font-size: 13.5px; }
  .exmodal__row { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 12.5px; }
  .exmodal__row dt, .exmodal__row dd { font-size: 12.5px; }
}

@media (max-width: 480px) {
  .excards { grid-template-columns: minmax(0, 1fr); }
  .exlist__bg { background-size: cover; }

  /* スマホでは写真を横に2枚並べると小さくなりすぎるため縦積みにする */
  .exmodal__figures--two { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .excard__inner { transition: none; }
  .excard--linked .excard__inner:hover { transform: none; }
}