@charset "UTF-8";
/* ==========================================================================
   design.css — DESIGNページ固有のセクション

   レイアウト方式: 通常のレスポンシブ（%・flex/grid・clamp()・メディアクエリ）。
   1920px の等比縮小（zoom）は使わない（.currentPage.js-fluid）。
   数値は fig の 1920px 版面での値を起点に、画面幅へ追従させてある。
   ========================================================================== */

/* ==========================================================================
   p-dsn-hero — DESIGN メインビジュアル
   ========================================================================== */

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

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

.p-dsn-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-dsn-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;
}

.p-dsn-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-dsn-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-dsn-facade — 外観（写真＋テキストの2枚組）
   ========================================================================== */

/* fig は 1100 の写真＋右 700 のテキスト。絶対配置をやめて 2 カラムで組む
   （1024px 以下は縦積み。下の @media） */
.p-dsn-facade {
  position: relative;
  width: 100%;
  padding: clamp(24px, 1.56vw, 30px) 0 0;
  box-sizing: border-box;
  background: linear-gradient(180.895deg, rgb(222,221,219) 0%, rgb(219,217,213) 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(24px, 1.04vw, 20px);
}

.p-dsn-facade__pic {
  position: relative;
  flex: 0 0 57.29%;
  min-width: 0;
  aspect-ratio: 1100 / 1000;
  overflow: hidden;
}

.p-dsn-facade__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 外観パースは乗算で地になじませる（Figma の合成指定に合わせる） */
  mix-blend-mode: multiply;
}

.p-dsn-facade__txt {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding-right: clamp(24px, 5.21vw, 100px);
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.17vw, 80px);
  align-items: flex-start;
}

.p-dsn-facade__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 3.65vw, 70px);
  line-height: 0.75;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(136,134,105) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-dsn-facade__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}

.p-dsn-facade__h3 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(22px, 2.08vw, 40px);
  line-height: 1.68;
  letter-spacing: 0.01em;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(44,43,31) 0%, rgb(136,134,105) 50%, rgb(44,43,31) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-dsn-facade__p {
  margin: 0;
  width: 100%;
  max-width: 588px;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2.05;
  letter-spacing: 0.01em;
  color: rgb(48,47,34);
}


/* ==========================================================================
   p-dsn-entrance — エントランス（濃色地の全幅セクション）
   ========================================================================== */

.p-dsn-entrance {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(88px, 9.38vw, 180px) clamp(16px, 2vw, 40px);
  background: linear-gradient(90deg, rgb(49,46,41) 0%, rgb(132,127,120) 53.37%, rgb(49,46,41) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 5.21vw, 100px);
}

.p-dsn-entrance__head {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.17vw, 80px);
  align-items: center;
}

.p-dsn-entrance__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.65vw, 70px);
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(218,215,203) 0%, rgb(255,255,255) 50%, rgb(218,215,203) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-dsn-entrance__txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.p-dsn-entrance__h3 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(22px, 2.08vw, 40px);
  line-height: 1.68;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(255,255,255);
}

.p-dsn-entrance__p {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2.05;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(255,255,255);
}

.p-dsn-entrance__pic {
  position: relative;
  width: 100%;
  max-width: 1720px;
  aspect-ratio: 1720 / 900;
  overflow: hidden;
}

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


/* ==========================================================================
   p-dsn-parking — 駐車場シャッターゲート
   （地と文字組は ENTRANCE APPROCH と共通。fig で同じ組みのため値も合わせる）
   ========================================================================== */

.p-dsn-parking {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-top: -1px;
  padding: 1px clamp(16px, 2vw, 40px) clamp(88px, 9.38vw, 180px);
  background: linear-gradient(90deg, rgb(49,46,41) 0%, rgb(132,127,120) 53.37%, rgb(49,46,41) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 5.21vw, 100px);
}

.p-dsn-parking__head {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.17vw, 80px);
  align-items: center;
}

.p-dsn-parking__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.65vw, 70px);
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(218,215,203) 0%, rgb(255,255,255) 50%, rgb(218,215,203) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-dsn-parking__txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.p-dsn-parking__h3 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(22px, 2.08vw, 40px);
  line-height: 1.68;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(255,255,255);
}

.p-dsn-parking__p {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2.05;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(255,255,255);
}

.p-dsn-parking__pic {
  position: relative;
  width: 100%;
  max-width: 1720px;
  aspect-ratio: 1720 / 900;
  overflow: hidden;
}

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


/* ==========================================================================
   p-dsn-plan — 全体計画（敷地配置図）
   ========================================================================== */

.p-dsn-plan {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(88px, 9.38vw, 180px) clamp(24px, 13.54vw, 260px);
  background: linear-gradient(180.895deg, rgb(216,213,208) 0%, rgb(210,206,199) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 5.21vw, 100px);
}

.p-dsn-plan__head {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.17vw, 80px);
  align-items: center;
}

.p-dsn-plan__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.65vw, 70px);
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(154,153,131) 0%, rgb(136,134,105) 50%, rgb(154,153,131) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-dsn-plan__txt {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.p-dsn-plan__h3 {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 600;
  font-size: clamp(22px, 2.08vw, 40px);
  line-height: 1.68;
  letter-spacing: 0.01em;
  text-align: center;
  padding-bottom: 4px;
  background: linear-gradient(90deg, rgb(44,43,31) 0%, rgb(136,134,105) 50%, rgb(44,43,31) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-dsn-plan__p {
  margin: 0;
  font-family: 'YakuHanMP', 'Shippori Mincho B1', serif;
  font-weight: 500;
  font-size: clamp(14px, 0.94vw, 18px);
  line-height: 2.05;
  letter-spacing: 0.01em;
  text-align: center;
  color: rgb(48,47,34);
}

.p-dsn-plan__pic {
  position: relative;
  width: 100%;
  max-width: 1400px;
  /* 支給素材は背景透過 PNG（webp 変換後も透過を保持）。地はセクションのグラデーションを見せる */
}

.p-dsn-plan__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1065;
  object-fit: contain;
}

/* 支給素材の右下に方位記号が入っているため、注釈を図版に重ねると被る。
   この図版だけ注釈を画像の外（すぐ下・右寄せ）に置く（規定: 注釈は画像のすぐ下または画像上） */
.p-dsn-plan__pic .imgCap {
  position: static;
  right: auto;
  bottom: auto;
  /* 共通の .imgCap は版面に重ねる前提で max-width: 92% が付くため、
     画像外に置くこの図版では図版の右端に揃うよう全幅に戻す */
  max-width: none;
  margin-top: 8px;
  text-align: right;
}


/* ==========================================================================
   p-dsn-coming — 準備中コンテンツの帯（2本）
   ========================================================================== */

.p-dsn-coming {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.p-dsn-coming__band {
  position: relative;
  width: 100%;
  min-height: clamp(320px, 36.46vw, 700px);
  padding: clamp(48px, 4vw, 80px) clamp(24px, 2vw, 40px);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(98,82,82);
}

/* 準備中の帯は写真をぼかして「これから公開」を示す（デザイン準拠） */
.p-dsn-coming__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(8px);
  transform: scale(1.04);
}

.p-dsn-coming__veil {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: linear-gradient(108.772deg, rgba(132,127,120,0.7) 10.75%, rgba(49,46,41,0.7) 97.26%);
}

.p-dsn-coming__band:last-child .p-dsn-coming__veil {
  background: linear-gradient(108.772deg, rgba(132,127,120,0.5) 10.75%, rgba(49,46,41,0.5) 97.26%);
}

.p-dsn-coming__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.13vw, 60px);
  align-items: center;
}

.p-dsn-coming__h2 {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.65vw, 70px);
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  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-dsn-coming__soon {
  margin: 0;
  font-family: 'Cormorant Infant', ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.29vw, 44px);
  line-height: 0.75;
  text-align: center;
  white-space: nowrap;
  color: rgb(255,255,255);
}


/* ==========================================================================
   タブレット（〜1024px）— 外観は写真とテキストを縦積みに組み替える
   ========================================================================== */

@media screen and (max-width: 1024px) {
  .p-dsn-facade {
    flex-direction: column;
    padding: 0 0 56px;
    gap: 32px;
  }

  .p-dsn-facade__pic,
  .p-dsn-facade__txt {
    width: 100%;
    flex: 0 0 auto;
  }

  .p-dsn-facade__txt {
    box-sizing: border-box;
    padding: 0 24px;
    /* 縦積みでは見出し・本文のブロックを版面センターに置く（access / location と同じ扱い） */
    max-width: 688px;
    margin: 0 auto;
    padding-right: 24px;
  }

  /* 縦積みでは本文も見出しと同じ幅まで使う（PC の 588px 上限のままだと右に大きな余白が残る） */
  .p-dsn-facade__p {
    max-width: none;
  }
}


/* ==========================================================================
   iPad 縦（768〜1023px）— 外観パースを次セクション（ENTRANCE の茶グラデ）の直上へ
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 順序を入れ替えて FACADE のコピー → パースにし、パース下の余白を落として
     次セクションの地色と隙間なく突き合わせる */
  .p-dsn-facade {
    /* 上: FACADE の英字が前セクションの写真に詰まるため余白を確保
       下: 0 にしてパースを次セクションの地色と隙間なく突き合わせる */
    padding: 56px 0 0;
  }

  .p-dsn-facade__txt {
    order: 1;
  }

  .p-dsn-facade__pic {
    order: 2;
    /* 縦積みの gap ぶんだけ上に余白が入るので、セクション下端にぴったり付ける */
    margin-bottom: 0;
  }
}


/* ==========================================================================
   SP（〜767px）— 規定ブレークポイント。zoom は掛からず実寸で組む
   ========================================================================== */

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

  /* SP は支給画像にモノクロ・明暗の加工が焼き込まれているため、実装側の画像処理（luminosity 合成・
     multiply の暗幕・明るさ補正）は行わず、画像をそのまま表示する */
  .p-dsn-hero__img {
    filter: none;
    mix-blend-mode: normal;
  }

  .p-dsn-hero__div {
    display: none;
  }


  /* ---- メインビジュアル ---- */
  #mainVisual .p-dsn-hero,
  .p-dsn-hero {
    width: 100%;
    height: var(--vph, 100vh);
  }

  .p-dsn-hero__div-2 {
    width: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 0 24px;
    white-space: normal;
  }

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

  .p-dsn-hero__div-4 {
    font-size: 15px;
    line-height: 24px;
    /* SP はキャッチコピーを白にする（支給画像の上での可読性を確保）。
       PC のグラデーション文字は打ち消す */
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: rgb(255,255,255);
  }

  /* ---- 外観: 写真 → テキストの縦積み ---- */
  .p-dsn-facade {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  /* SP は本文を先に読ませ、パースはその下。画像の下は次のセクションへベタ付き */
  .p-dsn-facade__pic {
    position: static;
    width: 100%;
    height: auto;
    order: 2;
  }

  .p-dsn-facade__img {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 680;
  }

  .p-dsn-facade__txt {
    position: static;
    width: 100%;
    box-sizing: border-box;
    padding: 88px 24px 56px;
    gap: 40px;
    order: 1;
  }

  .p-dsn-facade__h2 {
    font-size: 34px;
  }

  .p-dsn-facade__body {
    gap: 24px;
  }

  .p-dsn-facade__h3 {
    font-size: 24px;
    line-height: 40px;
  }

  .p-dsn-facade__p {
    width: 100%;
    font-size: 15px;
    line-height: 31px;
  }

  .p-dsn-facade__p br {
    display: none;
  }

  /* ---- エントランス ---- */
  .p-dsn-entrance {
    width: 100%;
    box-sizing: border-box;
    padding: 88px 24px;
    gap: 48px;
  }

  .p-dsn-entrance__head {
    width: 100%;
    gap: 32px;
  }

  .p-dsn-entrance__h2 {
    font-size: 30px;
    line-height: 0.9;
    white-space: normal;
  }

  .p-dsn-entrance__txt {
    width: 100%;
    gap: 20px;
    align-items: flex-start;
  }

  .p-dsn-entrance__h3 {
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    align-self: center;
  }

  .p-dsn-entrance__p {
    font-size: 15px;
    line-height: 31px;
    text-align: left;
  }

  .p-dsn-entrance__p br {
    display: none;
  }

  .p-dsn-entrance__pic {
    width: 100%;
    height: auto;
  }

  .p-dsn-entrance__img {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 392;
  }

  /* ---- 駐車場 ---- */
  .p-dsn-parking {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24px 88px;
    gap: 48px;
  }

  .p-dsn-parking__head {
    width: 100%;
    gap: 32px;
  }

  .p-dsn-parking__h2 {
    font-size: 30px;
    line-height: 0.9;
    white-space: normal;
  }

  .p-dsn-parking__txt {
    width: 100%;
    gap: 20px;
    align-items: flex-start;
  }

  .p-dsn-parking__h3 {
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    align-self: center;
  }

  .p-dsn-parking__p {
    font-size: 15px;
    line-height: 31px;
    text-align: left;
  }

  .p-dsn-parking__p br {
    display: none;
  }

  .p-dsn-parking__pic {
    width: 100%;
    height: auto;
  }

  .p-dsn-parking__img {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 392;
  }

  /* ---- 全体計画 ---- */
  .p-dsn-plan {
    width: 100%;
    box-sizing: border-box;
    padding: 88px 16px;
    gap: 48px;
  }

  .p-dsn-plan__head {
    width: 100%;
    gap: 32px;
  }

  .p-dsn-plan__h2 {
    font-size: 30px;
    line-height: 0.9;
    white-space: normal;
  }

  .p-dsn-plan__txt {
    width: 100%;
    gap: 20px;
    align-items: flex-start;
  }

  .p-dsn-plan__h3 {
    font-size: 24px;
    line-height: 40px;
    align-self: center;
  }

  .p-dsn-plan__p {
    font-size: 15px;
    line-height: 31px;
    text-align: left;
  }

  .p-dsn-plan__p br {
    display: none;
  }

  .p-dsn-plan__pic {
    width: 100%;
  }

  .p-dsn-plan__img {
    width: 100%;
    height: auto;
    /* SP は縦構図の専用素材（1200×2140 を 750 幅で書き出し） */
    aspect-ratio: 750 / 1338;
  }

  /* ---- 準備中の帯 ---- */
  .p-dsn-coming,
  .p-dsn-coming__band {
    width: 100%;
  }

  .p-dsn-coming__band {
    height: 300px;
  }

  .p-dsn-coming__img,
  .p-dsn-coming__veil {
    width: 100%;
    height: 100%;
  }

  .p-dsn-coming__body {
    gap: 28px;
    padding: 0 24px;
  }

  .p-dsn-coming__h2 {
    font-size: 30px;
    line-height: 0.9;
    white-space: normal;
  }

  .p-dsn-coming__soon {
    font-size: 24px;
  }

  /* SPではPC用の改行を解除（ボディコピーは折り返しに任せる） */
  .p-dsn-facade__p br:not(.only-sp) {
    display: none;
  }

  .p-dsn-entrance__p br:not(.only-sp) {
    display: none;
  }

  .p-dsn-plan__p br:not(.only-sp) {
    display: none;
  }
}