@charset "UTF-8";
/* ==========================================================================
   現地案内図の流用
   ========================================================================== */

/* ==========================================================================
   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;
  background: rgb(255,255,255);
}

/* ==========================================================================
   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;
  }
}