@charset "UTF-8";
/* ================================================================================
   会場MAP（確定版）＋ PDFダウンロード
   file  : css/parts/venue-map.css
   parts : parts/venue-map.php
   page  : index.php / visit.php （$extra_css で読み込む）
   scope : .venue-map 配下のみ。ボタンは共通の .btn-apply（button.css）に色・幅だけ上書き。
   前提  : html { font-size: 62.5% }。本ファイルは px 指定で統一。
================================================================================ */
.venue-map {
  padding: 64px 20px 72px;
  background: #F3F7FB;
  color: #172B4D;
  font-family: "Noto Sans JP", sans-serif;
}
.venue-map *,
.venue-map *::before,
.venue-map *::after {
  box-sizing: border-box;
}
.venue-map__inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}
/* index：直前の .top-cta は top:60px で下にずらして描画され（index.css）、
   人物イラストがさらに 70px はみ出す（parts.css）。重ならないようその分だけ下げる */
body.index .top-cta + .venue-map {
  margin-top: 130px;
}


/* ---------- 見出し ---------- */
.venue-map__head {
  margin-bottom: 32px;
  text-align: center;
}
/* 文節で折り返す（対応ブラウザのみ） */
.venue-map__title,
.venue-map__lead {
  word-break: auto-phrase;
  text-wrap: pretty;
}
.venue-map__en {
  margin: 0 0 8px;
  color: #2872A8;
  font-family: "Jost", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.2;
}
.venue-map__title {
  margin: 0;
  color: #17335C;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
}
.venue-map__lead {
  max-width: 720px;
  margin: 12px auto 0;
  color: #52647B;
  font-size: 16px;
  line-height: 1.8;
}


/* ---------- MAP ---------- */
.venue-map__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #D9E2EC;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(21, 47, 82, .1);
}
.venue-map__frame img {
  display: block;
  width: 100%;
  height: auto;
}
/* 「大きく見る」は地図の外、右下に置く */
.venue-map__zoom-row {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0 0;
}
.venue-map .venue-map__zoom {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  background: #11335C;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background .2s ease;
}
/* common.css の a:hover（opacity .55）で地図・ボタンが薄くならないように */
.venue-map a.venue-map__frame:hover,
.venue-map a.venue-map__zoom:hover {
  opacity: 1;
}
.venue-map a.venue-map__zoom:hover,
.venue-map__frame:hover + .venue-map__zoom-row .venue-map__zoom {
  background: #EA7022;
}


/* ---------- ダウンロード ---------- */
.venue-map__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}
/* .btn-apply（button.css）をベースに、色・幅を変える。右の矢印はアイコンに置き換え。
   visit.css は .btn-apply.circle を inline-block・余白・文字サイズ・ホバー色まで上書きするので、
   どのページでも同じ見た目になるよう、レイアウトとサイズもここで指定し直す */
.venue-map .venue-map__dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: 340px;
  padding: 20px 40px;
  border-radius: 50px;
  background-color: #184A9A;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 1;
}
.venue-map a.venue-map__dl:hover {
  opacity: 1;
  background-color: #0F3878;
  color: #FFFFFF;
  transform: none;
  box-shadow: none;
}
.venue-map .venue-map__dl::after {
  display: none;
}
.venue-map__dl-icon {
  flex: none;
  width: 22px;
  height: 22px;
}
/* 文字の箱を「キャップハイト〜ベースライン」に詰め、フォントの上下余白の差でアイコンとずれないようにする
   （非対応ブラウザは従来どおりの行ボックスで中央揃え） */
.venue-map__dl-text {
  display: block;
  text-box: trim-both cap alphabetic;
}
.venue-map__file {
  margin: 0;
  color: #52647B;
  font-size: 13px;
  line-height: 1.5;
}


/* ---------- SP ---------- */
@media (max-width: 767px) {
  .venue-map {
    padding: 48px 15px 56px;
  }
  /* SP はずらし 20px＋イラストのはみ出し 30px */
  body.index .top-cta + .venue-map {
    margin-top: 50px;
  }
  .venue-map__head {
    margin-bottom: 22px;
  }
  .venue-map__en {
    font-size: 11px;
  }
  .venue-map__title {
    font-size: 22px;
  }
  .venue-map__lead {
    font-size: 14px;
    text-align: left;
  }
  .venue-map__frame {
    border-radius: 8px;
  }
  .venue-map__zoom-row {
    margin-top: 10px;
  }
  .venue-map .venue-map__zoom {
    padding: 8px 14px;
    font-size: 12px;
  }
  .venue-map__actions {
    margin-top: 20px;
  }
  .venue-map .venue-map__dl {
    width: 100%;
    min-width: 0;
    padding: 15px 20px;
    font-size: 16px;
  }
  .venue-map__dl-icon {
    width: 18px;
    height: 18px;
  }
}