/* ------------------------------------------------------------
   カルティアささしまライブみなみⅡ / デザイン・ランドプラン
   このページ専用。共通の header / footer / style.css は変更しません。
   ------------------------------------------------------------ */
.design-page {
  --design-navy: #3e495d;
  --design-offwhite: #f5f2ed;
  --design-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --design-text: #3e495d;
  overflow: clip;
  width: 100%;
  background-color: #fff;
  color: var(--design-text);
}

.design-page *,
.design-page *::before,
.design-page *::after {
  box-sizing: border-box;
}

.design-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.design-page figure {
  margin: 0;
}

.design-page h1,
.design-page h2,
.design-page h3,
.design-page p {
  margin: 0;
}

/* キービジュアル：ロゴは支給SVG、コピーは支給写真内にあります */
.design-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
}

.design-hero__image {
  width: 100%;
  height: auto;
}

.design-hero__title {
  position: absolute;
  top: 10.2%;
  left: 50%;
  width: clamp(175px, 15%, 285px);
  transform: translateX(-50%);
}

.design-hero__title img {
  width: 100%;
}

/* コンセプト＋外観＋マテリアル（濃紺背景） */
.design-concept {
  padding: 145px 24px 192px;
  background: var(--design-navy);
  color: #fff;
  text-align: center;
}

.design-concept__inner {
  max-width: 1140px;
  margin: 0 auto;
}

.design-concept__title {
  font-family: var(--design-serif);
  font-size: clamp(26px, 2.55vw, 43px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.08em;
}

.design-concept__text {
  margin-top: 49px !important;
  font-family: var(--design-serif);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 400;
  line-height: 2.15;
  letter-spacing: 0.07em;
}

.design-concept__exterior {
  margin-top: 105px !important;
}

.design-concept__exterior img {
  width: 100%;
}

.design-material {
  margin-top: 180px;
  padding: 84px 9.8% 97px;
  border: 1px solid rgba(255,255,255,0.75);
}

.design-material__label {
  font-family: var(--design-serif);
  font-size: clamp(25px, 1.85vw, 33px);
  line-height: 1.4;
}

.design-material h3 {
  margin-top: 10px;
  font-family: var(--design-serif);
  font-size: clamp(25px, 2.1vw, 39px);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.045em;
}

.design-material__text {
  margin-top: 28px !important;
  margin-bottom: 49px !important;
  font-family: var(--design-serif);
  font-size: clamp(12px, 0.93vw, 16px);
  line-height: 1.95;
  letter-spacing: 0.055em;
}

.design-material > img {
  width: 100%;
}

/* ランドプラン（白背景） */
.design-landplan {
  padding: 182px 20px 0;
  background: #fff;
}

.design-landplan__title {
  font-family: var(--design-serif);
  font-size: clamp(26px, 2.35vw, 41px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
}

.design-landplan__illustration {
  max-width: 1140px;
  margin: 55px auto 76px;
}

.design-landplan__illustration img {
  width: 100%;
}

/* 共用設備：PC は2カラム、Aのみ説明と画像を横並び */
.design-features {
  max-width: 1140px;
  margin: 0 auto;
  padding: 70px 8.9% 83px;
  background: var(--design-offwhite);
}

.design-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px 44px;
  max-width: 755px;
  margin: 0 auto;
}

.design-feature {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.design-feature h3 {
  display: flex;
  align-items: center;
  min-height: 35px;
  gap: 0.42em;
  padding: 4px 15px;
  background: var(--design-navy);
  color: #fff;
  font-family: var(--design-serif);
  font-size: clamp(17px, 1.18vw, 23px);
  font-weight: 400;
  line-height: 1.32;
  white-space: nowrap;
}

.design-feature__letter {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05em;
  line-height: 1;
}

.design-feature p {
  margin-top: 13px;
  color: var(--design-text);
  font-family: var(--design-serif);
  font-size: clamp(13px, 0.9vw, 16px);
  line-height: 1.72;
  letter-spacing: 0.018em;
  text-align: justify;
}

.design-feature > img,
.design-feature__photo img {
  width: 100%;
  margin-top: auto;
  object-fit: contain;
}

.design-feature > img {
  padding-top: 17px;
}

.design-feature--intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  align-items: start;
}

.design-feature__photo img {
  margin: 0;
}

.design-feature__small {
  margin-top: 6px !important;
  font-size: clamp(11px, 0.75vw, 13px) !important;
  text-align: left !important;
}

/* 注意書き・資料請求 */
.design-notes {
  max-width: 1300px;
  margin: 94px auto 40px;
  font-size: 10px;
  line-height: 1.7;
  color: #686868;
  text-align: center;
}

.design-notes p {
  margin: 0;
}

.design-request {
  max-width: 1140px;
  margin: 0 auto 100px;
}

.design-request__link {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 68px;
  padding: 16px 90px;
  background: #68072d;
  color: #fff;
  font-family: var(--design-serif);
  font-size: clamp(17px, 1.35vw, 23px);
  letter-spacing: 0.14em;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.design-request__link:hover,
.design-request__link:focus-visible {
  color: #fff;
  opacity: 0.87;
}

.design-request__link:focus-visible {
  outline: 2px solid #3e495d;
  outline-offset: 3px;
}

.design-request__arrow {
  position: absolute;
  right: 29px;
  top: 50%;
  font-family: Arial, sans-serif;
  font-size: 29px;
  font-weight: 200;
  line-height: 1;
  transform: translateY(-50%);
}

/* タブレット */
@media (max-width: 1100px) {
  .design-concept { padding: 105px 24px 125px; }
  .design-concept__exterior { margin-top: 72px !important; }
  .design-material { margin-top: 125px; padding: 65px 8% 70px; }
  .design-landplan { padding-top: 120px; }
  .design-features { padding: 60px 6% 70px; }
  .design-features__grid { gap: 40px 30px; }
  .design-feature--intro { gap: 30px; }
  .design-notes { margin-top: 72px; }
}

/* スマートフォン */
@media (max-width: 767px) {
  .design-hero {
    overflow: hidden;
    background: #3f495d;
  }

  .design-hero .design-hero__image {
    height: auto;
    width: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 75% center;
  }

  .design-hero__title {
    position: relative;
    width: clamp(165px, 52vw, 265px);
    margin: 0 0 30px 0 !important;
  }

  .design-concept {
    padding: 26px 18px 90px;
  }

  .design-concept__title {
    font-size: clamp(21px, 4.5vw, 28px);
    line-height: 1.9;
    letter-spacing: 0.045em;
  }

  .design-concept__text {
    margin-top: 27px !important;
    font-size: 12px;
    line-height: 2.05;
    letter-spacing: 0.04em;
  }

  .design-concept__text br { display: none; }

  .design-concept__exterior {
    margin-top: 58px !important;
  }

  .design-material {
    margin-top: 85px;
    padding: 45px 22px 29px;
  }

  .design-material__label { font-size: 26px; }

  .design-material h3 {
    margin-top: 9px;
    font-size: clamp(15px, 4vw, 29px);
    margin-bottom:15px;
  }

  .design-material__text {
    margin-top: 22px !important;
    margin-bottom: 31px !important;
    font-size: 12px;
    line-height: 1.95;
  }

  .design-landplan {
    padding: 83px 16px 0;
  }

  .design-landplan__title {
    font-size: clamp(22px, 5.7vw, 30px);
    line-height: 1.65;
  }

  .design-landplan__illustration {
    margin: 34px auto 48px;
  }

  .design-features {
    padding: 35px 22px 48px;
  }

  .design-features__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    max-width: 440px;
  }

  .design-feature--intro {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .design-feature h3 {
    min-height: 38px;
    padding: 6px 12px;
    font-size: clamp(17px, 4.7vw, 22px);
    white-space: normal;
  }

  .design-feature p {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.8;
  }

  .design-feature > img { padding-top: 16px; }
  .design-feature__photo img { margin-top: 0; }
  .design-feature__small { font-size: 12px !important; }

  .design-notes {
    max-width: 600px;
    margin: 65px auto 28px;
    font-size: 10px;
    line-height: 1.7;
    text-align: left;
  }

  .design-notes p + p { margin-top: 4px; }
  .design-request { margin-bottom: 55px; }

  .design-request__link {
    min-height: 59px;
    padding: 13px 45px 13px 22px;
    font-size: clamp(13px, 3.5vw, 18px);
    letter-spacing: 0.07em;
  }

  .design-request__arrow { right: 12px; font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .design-request__link { transition: none; }
}