/* =========================================
   コンセプト ページ
========================================= */

/* ==========
共通：見出し（ゴシック＋明朝の混植）
========== */

.concept-heading {
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
  color: var(--text-color);
}

.concept-heading__gothic {
  font-family: var(--gothic);
  font-weight: 400;
}

.concept-heading__mincho {
  font-family: var(--mincho);
  font-weight: 500;
}

.concept-heading--white {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  color: #fff;
}

/* ==========
ページタイトル
========== */

.section__content--concept-title {
  padding: min(6.4vw, 24px) 0 min(5.3333vw, 20px);
  border-bottom: 4px solid var(--accent-color);
}

.concept-title__en {
  display: block;
  width: min(34.1333vw, 128px);
  margin: 0 auto min(2.1333vw, 8px);
}

.concept-title__ja {
  display: block;
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: var(--text-color);
}

@media (min-width: 768px) {
  .section__content--concept-title {
    padding: min(2.6354vw, 36px) 0 min(1.6837vw, 23px);
    border-top: 4px solid var(--accent-color);
  }

  .concept-title__en {
    width: clamp(7.5rem, 4.1667rem + 6.9444vw, 12.5rem);
    margin-bottom: min(0.7326vw, 10px);
  }

  .concept-title__ja {
    font-size: clamp(0.75rem, 1.1713vw, 1rem);
  }
}

/* ==========
ヒーロー（水彩風建物パース）
========== */

.section__content--concept-hero {
  overflow: hidden;
}

.concept-hero__crop {
  position: relative;
  height: 47.7333333333vw;
  overflow: hidden;
}

@media (min-width: 768px) {
  .section__content--concept-hero {
    position: relative;
  }

  .concept-hero__crop {
    height: auto;
    aspect-ratio: 2 / 1;
  }

  .concept-hero__img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* ==========
URBAN AXIS
========== */

.section__content--concept-axis {
  position: relative;
  z-index: 1;
  padding: min(8vw, 30px) 0 min(14.9333vw, 56px);
}

.concept-axis__title {
  margin-bottom: min(6.1333vw, 23px);
  font-size: min(4.2667vw, 1rem);
  letter-spacing: 0.2em;
}

.concept-axis__line {
  width: 100%;
  height: 0;
  margin: 0 auto min(5.3333vw, 20px);
  border: none;
  border-top: 1px solid var(--text-color);
}

.concept-axis__graphic {
  display: block;
  width: min(45.3333vw, 170px);
  margin: 0 auto min(6.6667vw, 25px);
}

.concept-axis__text {
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  word-break: keep-all;
  color: var(--text-color);
}

/* 最終行「URBAN AXIS ── 都市的に…」の間の横線（擬似要素で表現） */
.concept-axis__en::after {
  display: inline-block;
  width: min(5.8667vw, 22px);
  height: 1px;
  margin: 0 min(1.3333vw, 5px);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  background-color: var(--text-color);
  vertical-align: middle;
  content: "";
}

@media (min-width: 768px) {
  .section__content--concept-axis {
    position: absolute;
    top: max(-135px, -9.8829vw);
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: left;
  }

  .section__content--concept-axis .section-space {
    width: 57.9%;
    max-width: calc(100% - 40px);
    margin-right: 0;
    margin-left: auto;
    text-align: left;
  }

  .concept-axis__title {
    margin-bottom: clamp(0.3125rem, -0.8915rem + 2.5084vw, 1.25rem);
    font-size: clamp(1.125rem, 0.7083rem + 0.8681vw, 1.75rem);
    letter-spacing: 0.4em;
    text-align: left;
  }

  .concept-axis__line {
    width: 100%;
    margin: 0 0 clamp(0.3125rem, -1.6942rem + 4.1806vw, 1.875rem);
  }

  .concept-axis__graphic {
    width: clamp(16.25rem, 7.2917rem + 18.6632vw, 29.6875rem);
    margin: 0 0 clamp(0.3125rem, -0.8915rem + 2.5084vw, 1.25rem);
  }

  .concept-axis__text {
    font-size: clamp(0.75rem, 0.4167rem + 0.6944vw, 1.25rem);
    text-align: left;
  }

  .concept-axis__en::after {
    width: min(2.7818vw, 38px);
    margin: 0 min(0.7321vw, 10px);
    vertical-align: min(0.4392vw, 6px);
  }
}

/* ==========
THE AXIS OF OKINAWA（都市景観）
========== */

.section__content--concept-cityscape {
  position: relative;
}

.concept-cityscape__scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.concept-cityscape__img {
  display: block;
  width: auto;
  max-width: none;
  height: min(266.6667vw, 1000px);
  object-fit: cover;
}

.concept-cityscape__intro {
  position: relative;
  z-index: 1;
  margin-top: max(-950px, -253.3333vw);
}

.concept-cityscape__body {
  position: relative;
  z-index: 1;
  padding-bottom: min(16vw, 60px);
  text-align: center;
}

.concept-cityscape__graphic {
  display: block;
  width: min(57.0667vw, 214px);
  margin: 0 auto min(8vw, 30px);
}

.concept-cityscape__title {
  margin-bottom: min(5.3333vw, 20px);
  font-size: min(5.3333vw, 1.25rem);
  letter-spacing: 0.4em;
}

.concept-cityscape__text {
  margin-bottom: min(13.3333vw, 50px);
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.concept-highlight {
  margin-top: min(163.7333vw, 614px);
  border: 1px solid #c5c0b1;
  background-color: #fff;
  text-align: left;
}

/* タイトル帯：ボックスと同じ幅（左右いっぱい）で上辺に密着させる */
.concept-highlight__title {
  display: block;
  margin: 0;
  padding: min(2.6667vw, 10px) min(5.3333vw, 20px);
  background-color: #c5c0b1;
  font-size: min(4.2667vw, 1rem);
  letter-spacing: 0.2em;
  text-align: center;
  word-break: keep-all;
}

.concept-highlight__text {
  padding: min(5.3333vw, 20px);
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-color);
}

@media (min-width: 768px) {
  .concept-cityscape__img {
    width: 100%;
    height: auto;
    aspect-ratio: 2732 / 2000;
  }

  .concept-cityscape__scroll {
    overflow: visible;
  }

  .concept-cityscape__intro {
    position: absolute;
    top: min(5.8565vw, 80px);
    left: 0;
    z-index: 1;
    width: 100%;
    margin-top: 0;
    padding: 0 min(1.4641vw, 20px);
  }

  .concept-cityscape__graphic {
    width: clamp(31.25rem, 24rem + 15.1042vw, 42.125rem);
    margin-bottom: min(2.1962vw, 30px);
  }

  .concept-cityscape__title {
    margin-bottom: min(2.1962vw, 30px);
    font-size: clamp(1.375rem, 1.2083rem + 0.3472vw, 1.625rem);
    letter-spacing: 0.4em;
  }

  .concept-cityscape__text {
    margin-bottom: 0;
    font-size: clamp(0.75rem, 0.4167rem + 0.6944vw, 1.25rem);
    line-height: 1.8;
  }

  .concept-cityscape__body {
    margin-top: calc(min(5.8565vw, 80px) - 7.2469vw);
    padding-bottom: min(4.7584vw, 65px);
  }

  .concept-highlight {
    position: relative;
    width: 62%;
    margin: 0 0 0 25%;
  }

  .concept-highlight::before {
    position: absolute;
    bottom: 100%;
    left: 61.8%;
    width: 0;
    height: 0;
    border-right: min(1.0981vw, 15px) solid transparent;
    border-bottom: min(5.8565vw, 80px) solid #c5c0b1;
    border-left: min(1.0981vw, 15px) solid transparent;
    content: "";
    transform: translateX(-50%);
  }

  .concept-highlight__title {
    padding: min(1.6837vw, 23px) min(4.3924vw, 60px);
    font-size: clamp(1.25rem, 1.4641288433vw, 1.375rem);
    letter-spacing: 0.3em;
  }

  .concept-highlight__text {
    padding: min(2.1962vw, 30px) min(4.3924vw, 60px) min(2.9283vw, 40px);
    font-size: clamp(1rem, 1.1713vw, 1.125rem);
  }
}

/* ==========
ギャラリー（PC：3カラム）
========== */

.section__content--concept-gallery {
  position: relative;
  border-top: 4px solid var(--accent-color);
  border-bottom: 4px solid var(--accent-color);
}

.concept-gallery__scroll {
  padding: min(4vw, 15px) min(5.3333vw, 20px);
  background-color: rgba(0, 32, 62, 0.98);
}

.concept-gallery__list {
  display: flex;
  flex-direction: column;
  gap: min(2.6667vw, 10px);
}

.concept-gallery__item {
  position: relative;
}

.concept-gallery__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 各画像左下の「image photo」キャプション */
.concept-gallery__credit {
  position: absolute;
  bottom: min(4vw, 15px);
  left: min(2.6667vw, 10px);
  font-size: min(2.6667vw, 0.625rem);
  font-weight: 400;
  line-height: 1.8;
  color: #fff;
}

@media (min-width: 768px) {
  .concept-gallery__scroll {
    padding: min(2.0833vw, 30px) 0;
  }

  /* 3カラム表示。各アイテムを30vwに固定し、画像は元の縦横比のまま表示する */
  .concept-gallery__list {
    flex-direction: row;
    justify-content: center;
    gap: 0;
  }
  .concept-gallery__item:not(:last-child) {
    margin-right: 20px;
  }
  .concept-gallery__item {
    width: 30vw;
  }

  .concept-gallery__credit {
    bottom: min(0.7321vw, 10px);
    left: min(0.7321vw, 10px);
    font-size: clamp(0.625rem, 0.8785vw, 0.75rem);
  }
}

/* ==========
沖縄本島を自在に使いこなす
========== */

.section__content--concept-map {
  padding: min(16vw, 60px) 0;
}

.concept-map__title {
  margin-bottom: min(6.4vw, 24px);
  font-size: min(4.2667vw, 1rem);
  letter-spacing: 0.4em;
  word-break: keep-all;
}

.concept-map__img {
  display: block;
  width: clamp(20.9375rem, 12.7261rem + 38.6417vw, 31.25rem);
  margin: 0 auto min(6.4vw, 24px);
}

.concept-map__heading {
  display: flex;
  align-items: center;
  gap: min(2.6667vw, 10px);
  margin-bottom: min(4vw, 15px);
  font-size: min(4.2667vw, 1rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
  color: var(--text-color);
}

.concept-map__heading::before,
.concept-map__heading::after {
  flex: 1;
  height: 1px;
  background-color: var(--text-color);
  content: "";
}

.concept-map__text {
  font-size: min(3.2vw, 0.75rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--text-color);
}

@media (min-width: 768px) {
  .section__content--concept-map {
    padding: min(4.3924vw, 60px) 0;
  }

  .section__content--concept-map .section-space {
    width: min(73.2064vw, 1000px);
    max-width: calc(100% - 40px);
  }

  .concept-map__title {
    margin-bottom: min(3.6603vw, 50px);
    font-size: clamp(1.375rem, 1.7607vw, 1.5rem);
    letter-spacing: 0.4em;
  }

  .concept-map__img {
    width: min(79.2826vw, 1083px);
    margin-bottom: min(2.9283vw, 40px);
  }

  .concept-map__body {
    display: block;
  }

  /* Figma: 「── 北谷町 ──」を中央に、左右へ横線を伸ばす */
  .concept-map__heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min(2.1962vw, 30px);
    width: 100%;
    margin-bottom: min(2.7818vw, 38px);
    font-size: 1.375rem;
    letter-spacing: 0.2em;
    text-align: center;
  }

  .concept-map__heading::before,
  .concept-map__heading::after {
    flex: 1;
    height: 1px;
    background-color: var(--text-color);
    content: "";
  }

  .concept-map__text {
    font-size: clamp(1rem, 1.1713vw, 1rem);
    letter-spacing: 0.16em;
    text-align: left;
  }
}

/* 第1期販売・先着順申込受付（sale）/ 注釈 は下層ページ共通のため css/common.css に集約 */