@charset "UTF-8";
/* ==========================================================================
   map.css — MAP（現地案内図）ページ固有のセクション

   レイアウト方式: 通常のレスポンシブ（%・flex・clamp()・メディアクエリ）。
   1920px の等比縮小（zoom）は使わない。HTML の .currentPage に js-fluid が付いており、
   js/common.js の _initScale はこのページでは何もしない。
   数値は「fig の 1920px 版面での値」を起点に、画面幅に応じて可変にしてある。
   ========================================================================== */

/* ==========================================================================
   p-map-hero — MAP メインビジュアル
   ========================================================================== */

.p-map-hero {
  position: relative;
  width: 100%;
  height: var(--vph, 100vh);
  overflow: hidden;
  background: rgb(222,221,219);
}

.p-map-hero__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
}

.p-map-hero__div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  mix-blend-mode: multiply;
  background: linear-gradient(114.325deg, rgb(132,127,120) 10.77%, rgb(49,46,41) 96.87%);
}

.p-map-hero__div-2 {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: 100%;
  padding: 0 clamp(24px, 4vw, 80px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 0.68vw, 13px);
  align-items: center;
}

/* 見出しは 1920px で 100px。画面が狭くなるほど自前で小さくする（縮小コピーではない） */
.p-map-hero__div-3 {
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 5.21vw, 100px);
  line-height: 0.75;
  text-align: center;
  padding-bottom: 8px;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-map-hero__div-4 {
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(16px, 1.25vw, 24px);
  line-height: 1.3;
  text-align: center;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(218,215,203) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ==========================================================================
   p-map-body — 地図＋GoogleMAPボタン
   ========================================================================== */

.p-map-body {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  /* 1920px 時 188 / 260 / 120。狭い画面では余白から先に削る */
  padding: clamp(96px, 9.79vw, 188px) clamp(24px, 13.54vw, 260px) clamp(72px, 6.25vw, 120px);
  background: linear-gradient(181.45deg, rgb(222,221,219) 9.88%, rgb(204,198,188) 88.74%);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4.17vw, 80px);
  align-items: center;
}

/* 支給素材 1400×900（= 1.556:1）。幅は版面いっぱいまで、高さは比率で決める。
   トリミングは支給データのままなので、どの画面幅でもこの比率を崩さない */
.p-map-body__map {
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 1400 / 900;
  overflow: hidden;
  background: rgb(255,255,255);
}

.p-map-body__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-map-body__btnWrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* 寸法・書体・所作は .c-goldBtn に委ねる */

.p-map-body__cap {
  margin: 0;
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: clamp(12px, 0.73vw, 14px);
  line-height: 1.6;
  text-align: center;
  color: rgb(48,47,34);
}


/* ==========================================================================
   タブレット（〜1024px）— 地図が縦に詰まりすぎないよう正方形寄りに組み替える
   ========================================================================== */

/* タブレット・SP でも比率は変えない（変えると支給素材のトリミングが変わるため）。
   以前の 4/3・1/1 への組み替えは撤去した */


/* ==========================================================================
   SP（〜767px）— 規定ブレークポイント
   ========================================================================== */

@media screen and (max-width: 767px) {

  /* SP は端末・環境光で写真が沈んで見えるため、ヒーロー写真だけ 1.5 倍明るくする。
     暗さは luminosity の写真 × multiply の暗幕で作っているので、写真側を明るくして全体を持ち上げる */
  .p-map-hero__img {
    filter: brightness(1.5);
  }


  .p-map-hero__div-2 {
    gap: 10px;
    padding: 0 24px;
  }

  .p-map-hero__div-3 {
    font-size: 54px;
    padding-bottom: 6px;
  }

  .p-map-hero__div-4 {
    font-size: 15px;
    line-height: 24px;
  }

  .p-map-body {
    padding: 88px 16px 72px;
    gap: 40px;
  }


  .p-map-body__btnWrap {
    align-self: stretch;
    gap: 12px;
  }

  .p-map-body__cap {
    font-size: 12px;
  }
}