/* ========== ベース ========== */
:root {
  --font-sans: "Zen Kaku Gothic New", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --color-offwhite: #FAF9F4;
  --color-offblack: #242424;
  --color-offgray: #242424;
  --color-offgray-light: #666666;
  --color-skyblue: #7EB9E7;
  --color-offorange: #EA8555;
  --color-ivory: #F5F0E1;
  --color-mintgreen: #A8D5BA;
  --color-forestgreen: #3F8F4A;
  --color-deepgreen: #1C4E3C;
  --color-offgray-dark: #3A332C;
  --color-whitegray: #E1E1E0;
  --color-skyblue-dark: #406A92;
  --color-brown: #AD603B;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: smooth;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--color-offblack);
}

/* ========== 固定ヘッダー ========== */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 100;
  transform: translateY(-100%);
  transition: transform 0.3s ease-out;
}
.fixed-header.is-visible {
  transform: translateY(0);
}

.font-english {
  font-family: var(--font-montserrat);
}

/* マーカー風ハイライト */
.highlight-text {
  background-size: 100% 60%;
  background-repeat: no-repeat;
  background-position: bottom;
  padding: 4px 0;
}

.highlight-text--skyblue {
  background-image: linear-gradient(
    to bottom,
    transparent 40%,
    var(--color-skyblue) 40%,
    var(--color-skyblue) 100%
  );
}

.highlight-text--mintgreen {
  background-image: linear-gradient(
    to bottom,
    transparent 40%,
    var(--color-mintgreen) 40%,
    var(--color-mintgreen) 100%
  );
}

.highlight-text--offorange {
  background-image: linear-gradient(
    to bottom,
    transparent 40%,
    var(--color-offorange) 40%,
    var(--color-offorange) 100%
  );
}
/* ========== ヒーロースライドショー ========== */
.hero-slideshow {
  position: relative;
}

.hero-slideshow__slide,
.hero-slideshow .hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 720px;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
  animation: hero-slideshow-fade 25s ease-in-out infinite;
  animation-fill-mode: backwards;
}

.hero-slideshow__slide:nth-child(1) {
  animation-delay: 0s;
  animation-name: hero-slideshow-fade-first;
}

.hero-slideshow__slide:nth-child(2) { animation-delay: 5s; }
.hero-slideshow__slide:nth-child(3) { animation-delay: 10s; }
.hero-slideshow__slide:nth-child(4) { animation-delay: 15s; }
.hero-slideshow__slide:nth-child(5) { animation-delay: 20s; }

@keyframes hero-slideshow-fade-first {
  0% { opacity: 1; transform: scale(1.2); }
  20% { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes hero-slideshow-fade {
  0% { opacity: 0; transform: scale(1.2); }
  5% { opacity: 1; transform: scale(1.2); }
  20% { opacity: 1; transform: scale(1); }
  25%, 100% { opacity: 0; transform: scale(1); }
}

/* ========== セクション柄背景・セクション番号 ========== */
.section-check-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.section-check-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/bg_pattern.svg');
  background-repeat: repeat;
  background-size: 18px 18px;
  pointer-events: none;
}

/* 柄を青にする：SVG をマスクにして色で塗る */
.section-check-bg__blue::before {
  background-color: var(--color-skyblue);
  background-image: none;
  mask-image: url('../img/bg_pattern.svg');
  mask-repeat: repeat;
  mask-size: 18px 18px;
  -webkit-mask-image: url('../img/bg_pattern.svg');
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: 18px 18px;
}

.section-dotted-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: multiply;
}

.section-dotted-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/bg_pattern_2.png');
  background-repeat: repeat;
  background-size: 10px 10px;
  pointer-events: none;
}

.icon-new-window {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mask-image: url('../img/icon_new_window.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url('../img/icon_new_window.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.section-number {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 76px;
  height: 76px;
  overflow: hidden;
  isolation: isolate; /* backdrop-filter がスクロールで消えないように */
}
/* 背景 SVG 回転 */
.section-number::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/section_number_bg.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  animation: circle__rotate 48s linear infinite;
  z-index: 0;
}
/* 数字の後ろのぼかし（レイヤー固定でスクロール時に消えないように） */
.section-number::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1;
}

.section-number .section-number__digit {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .section-number {
    width: 100px;
    height: 100px;
  }
  .section-number::before {
    width: 84px;
    height: 84px;
  }
}

/* ========== チェック付きリスト ========== */
.list-check {
  list-style: none;
  padding-left: 0;
}
.list-check li {
  position: relative;
  padding-left: 1.75rem;
}
.list-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../img/icon_check.svg');
}

/* ========== 支援制度カード（番号） ========== */
.support-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background-color: var(--color-brown);
  color: var(--color-offorange);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5rem;
  min-height: 120px;
  border-width: 2px;
  border-color: var(--color-offorange);
}
@media (min-width: 768px) {
  .support-card {
    font-weight: 700;
    font-size: 1.125rem;
  }
}

.support-card__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  width: 80%;
  height: 55px;
  max-width: 80%;
  margin: auto;
  pointer-events: none;
  background-color: currentColor;
  background-image: none;
}

/* マスクで色を変えられる（background-color で変更） */
.support-card__bg--1 {
  mask-image: url('../img/number_1.svg');
  -webkit-mask-image: url('../img/number_1.svg');
}
.support-card__bg--2 {
  mask-image: url('../img/number_2.svg');
  -webkit-mask-image: url('../img/number_2.svg');
}
.support-card__bg--3 {
  mask-image: url('../img/number_3.svg');
  -webkit-mask-image: url('../img/number_3.svg');
}
.support-card__bg--4 {
  mask-image: url('../img/number_4.svg');
  -webkit-mask-image: url('../img/number_4.svg');
}
.support-card__bg--5 {
  mask-image: url('../img/number_5.svg');
  -webkit-mask-image: url('../img/number_5.svg');
}

/* ========== 分譲地について ========== */
.bg--movie {
  position: relative;
}

.bg--movie__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

/* セクションが画面上端に着いたら固定 */
.bg--movie.is-fixed .bg--movie__back {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* セクション終端を過ぎたら固定をやめて通常スクロール */
.bg--movie.is-past .bg--movie__back {
  position: absolute;
  top: 0;
  left: 0;
}

.bg--movie__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ========== ボタン・ストライプ ========== */
.button__wrap {
  position: relative;
}

.button__wrap--strip {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: -28px;
  border-radius: 0 0 64px 64px;
  background: repeating-linear-gradient(
    135deg,
    #242424,
    #242424 3px,
    transparent 3px,
    transparent 6px
  );
  flex-shrink: 0;
}

/* ========== アニメーション ========== */
.animate-circle__rotate {
  animation: circle__rotate 24s linear infinite;
}

@keyframes circle__rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========== 区画表（区画概要） ========== */
.plot-table {
  background: #fff;
}
.plot-table th,
.plot-table td {
  width: 25%;
  border: 1px solid #e5e5e5;
  padding: 4px;
  text-align: center;
}
.plot-table__th {
  background: var(--color-ivory);
  text-align: center;
  font-weight: 600;
}
.plot-table__td {
  background: #fff;
  text-align: left;
}

/* ========== FAQ ========== */
.faq-item {
  display: block;
}

.faq-item__body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.faq-item--opened .faq-item__body-wrap {
  grid-template-rows: 1fr;
}

.faq-item__body {
  min-height: 0;
  overflow: hidden;
}

/* FAQアイコン */
.faq-item__summary::before,
.faq-item__summary::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  transition: opacity 0.3s ease-in-out;
}

.faq-item__summary::before {
  background: url('../img/icon_open.svg') no-repeat center / contain;
  opacity: 1;
}

.faq-item__summary::after {
  background: url('../img/icon_close.svg') no-repeat center / contain;
  opacity: 0;
}

.faq-item--opened .faq-item__summary::before {
  opacity: 0;
}

.faq-item--opened .faq-item__summary::after {
  opacity: 1;
}

.faq-item--opened .faq-item__body p {
  animation: faq-content-fade 0.3s ease-out;
}

@keyframes faq-content-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========== お問い合わせ ========== */
/* 問合せフォーム: focus時のボーダー */
.form-contact input:focus,
.form-contact select:focus,
.form-contact textarea:focus {
  border-color: var(--color-offgray-light);
  outline-color: var(--color-offgray-light);
}

/* 問合せフォーム: selectの矢印を左寄せ */
.form-contact select {
  appearance: none;
  background-image: url("../img/icon_arrow_down.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 16px;
}

/* ========== アニメーション ========== */
/* AOS連動: 背景色のアニメーション */
.bg-reveal {
  position: relative;
  overflow: hidden;
}

.bg-reveal__text {
  position: relative;
  z-index: 1;
}

.bg-reveal::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--color-offblack);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 0;
  transition: transform 0.45s ease-out;
}

.bg-reveal-trigger.aos-animate .bg-reveal::before {
  transform: scaleX(1);
}

/* 右→左に表示 */
.bg-reveal--rtl::before {
  transform-origin: right;
}

/* 色モディファイア */
.bg-reveal--skyblue::before {
  background: var(--color-skyblue);
}
.bg-reveal--mintgreen::before {
  background: var(--color-mintgreen);
}
.bg-reveal--offorange::before {
  background: var(--color-offorange);
}
.bg-reveal--offgray-dark::before {
  background: var(--color-offgray-dark);
}